Ax333l/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: tweak design

Browse source
This commit is contained in:
afn 2023-03-07 01:33:29 -05:00 committed by Ax333l
parent 355e2a5bf2
commit 1d1b86b249
Signed by: Ax333l
GPG key ID: D2B4D85271127D23
6 changed files with 28 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Footer.svelte
View file

@ -19,7 +19,7 @@ const links: Link[] = [
<footer class="w-screen h-14 bg-stone-700 flex justify-between">
{#each links as link}
<a class="site-item-size m-auto text-red-100" href={link.url}>{link.name}</a>
<a class=" m-auto text-red-100" href={link.url}>{link.name}</a>
{/each}
</footer>

4
src/components/Navigation.svelte
View file

@ -35,12 +35,12 @@ const links: Link[] = [
<nav class="swup w-screen h-20 top-0 flex justify-center items-center border-red-400 border-t-8 mb-8">
<div class="site-view inline-block">
<a href="/" class="text-red-400 site-larger-item-size float-left">
<a href="/" class="text-red-400 text-lg float-left">
axelen.xyz
</a>
<div id="nav-links" class="float-right space-x-12">
{#each links as link}
<a class="site-item-size text-red-100" data-swup-preload class:site-selected={is_selected(pathname, link.url)} href={link.url}>{link.name}</a>
<a class="text-lg text-red-200" data-swup-preload class:site-selected={is_selected(pathname, link.url)} href={link.url}>{link.name}</a>
{/each}
<div>
</div>

13
src/content/Home.svelte
View file

@ -5,22 +5,21 @@
<main class="swup swup-slide grid site-view mx-auto">
<!-- Note: I think the text breakpoints are fine, but the header needs some work. -->
<header class="h-96 flex justify-start">
<div class="my-auto">
<h1 class="text-3xl md:text-6xl font-semibold">I am <span class="font-bold text-red-400">Axel.</span></h1>
<h2 class="text-xs md:text-sm text-red-200">@ax333l:chat.axelen.xyz / Ax333l#9147</h2>
<div class="my-auto flex flex-col gap-2">
<h1 class="text-4xl md:text-6xl font-semibold">I am <span class="font-bold text-red-400">Axel.</span></h1>
<h2 class="max-w-max text-xs md:text-sm text-red-200">@ax333l:chat.axelen.xyz / Ax333l#9147</h2>
</div>
</header>
<!-- This should probably break to a new line on smaller screens... -->
<figure aria-hidden="true" class="my-auto flex justify-end">
<img alt="Profile" class="w-[185px]" src={profile} />
<img alt="Profile" class="w-[150px]" src={profile} />
</figure>
<!-- There is probably a better way to do the CSS here... -->
<section id="about" class="col-span-2">
<p class="text-base md:text-lg md:text-left whitespace-pre-line">
Swedish computer science student, technology nerd and open-source contributor who loves Linux, self-hosting, programming and modding.
I always go out of my way to avoid proprietary software and internet services whenever possible.
<p class="text-base md:text-md md:text-left whitespace-pre-line">
Swedish computer science student, technology nerd and open-source contributor who loves Linux, self-hosting, programming, and modding. I always go out of my way to avoid proprietary software and internet services whenever possible.
</p>
</section>
</main>

28
src/layouts/Base.astro
View file

@ -24,23 +24,23 @@ const {title, description} = Astro.props;
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
</head>
<body class="min-h-screen grid">
{/* <script> */}
{/* import Swup from 'swup'; */}
{/* import SwupHeadPlugin from '@swup/head-plugin'; */}
{/* import SwupSlideTheme from '@swup/slide-theme' */}
{/* import SwupPreloadPlugin from '@swup/preload-plugin'; */}
{/* import SwupA11yPlugin from '@swup/a11y-plugin'; */}
<!-- <script>
import Swup from 'swup';
import SwupHeadPlugin from '@swup/head-plugin';
import SwupSlideTheme from '@swup/slide-theme'
import SwupPreloadPlugin from '@swup/preload-plugin';
import SwupA11yPlugin from '@swup/a11y-plugin';
{/* // Would be nice if I could speed up the slide transition. */}
{/* const swup = new Swup({ */}
{/* plugins: [new SwupA11yPlugin(), new SwupPreloadPlugin(), new SwupSlideTheme({ mainElement: '.swup-slide' }), new SwupHeadPlugin()], */}
{/* containers: [".swup"] */}
{/* }); */}
{/* </script> */}
// Would be nice if I could speed up the slide transition.
const swup = new Swup({
plugins: [new SwupA11yPlugin(), new SwupPreloadPlugin(), new SwupSlideTheme({ mainElement: '.swup-slide' }), new SwupHeadPlugin()],
containers: [".swup"]
});
</script> -->
<Navigation pathname={Astro.url.pathname} />
{/* Need to do this or else main page breaks. */}
<div id="content">
<!-- Need to do this or else main page breaks. -->
<div id="content" >
<slot />
</div>
<Footer />

2
src/layouts/Main.astro
View file

@ -3,7 +3,7 @@ import Base from './Base.astro';
---
<Base {...Astro.props}>
<main class="swup swup-slide site-view mx-auto">
<main class="swup swup-slide site-view mx-auto pb-6">
<slot />
</main>
</Base>

4
src/styles/global.scss
View file

@ -6,6 +6,10 @@ $red-400: #f87171;
$stone-800: #292524;
$scroll-size: 5px;
* {
box-sizing: border-box;
}
:root {
scrollbar-color: $red-400 $stone-800;
scrollbar-width: $scroll-size;