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"> <footer class="w-screen h-14 bg-stone-700 flex justify-between">
{#each links as link} {#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} {/each}
</footer> </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"> <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"> <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 axelen.xyz
</a> </a>
<div id="nav-links" class="float-right space-x-12"> <div id="nav-links" class="float-right space-x-12">
{#each links as link} {#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} {/each}
<div> <div>
</div> </div>

13
src/content/Home.svelte
View file

@ -5,22 +5,21 @@
<main class="swup swup-slide grid site-view mx-auto"> <main class="swup swup-slide grid site-view mx-auto">
<!-- Note: I think the text breakpoints are fine, but the header needs some work. --> <!-- Note: I think the text breakpoints are fine, but the header needs some work. -->
<header class="h-96 flex justify-start"> <header class="h-96 flex justify-start">
<div class="my-auto"> <div class="my-auto flex flex-col gap-2">
<h1 class="text-3xl md:text-6xl font-semibold">I am <span class="font-bold text-red-400">Axel.</span></h1> <h1 class="text-4xl 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> <h2 class="max-w-max text-xs md:text-sm text-red-200">@ax333l:chat.axelen.xyz / Ax333l#9147</h2>
</div> </div>
</header> </header>
<!-- This should probably break to a new line on smaller screens... --> <!-- This should probably break to a new line on smaller screens... -->
<figure aria-hidden="true" class="my-auto flex justify-end"> <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> </figure>
<!-- There is probably a better way to do the CSS here... --> <!-- There is probably a better way to do the CSS here... -->
<section id="about" class="col-span-2"> <section id="about" class="col-span-2">
<p class="text-base md:text-lg md:text-left whitespace-pre-line"> <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. 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.
I always go out of my way to avoid proprietary software and internet services whenever possible.
</p> </p>
</section> </section>
</main> </main>

26
src/layouts/Base.astro
View file

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

2
src/layouts/Main.astro
View file

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

4
src/styles/global.scss
View file

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