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

Compare commits

base: Ax333l:fafb77dbb37858af02bcee389126f91a8ea266ce
Branches Tags
Ax333l:master
Ax333l:deploy
..
compare: Ax333l:355e2a5bf2310145761e49359424eca806babdd8
Branches Tags
Ax333l:deploy
Ax333l:master

No commits in common. "fafb77dbb37858af02bcee389126f91a8ea266ce" and "355e2a5bf2310145761e49359424eca806babdd8" have entirely different histories.
fafb77dbb3 ... 355e2a5bf2

8 changed files with 40 additions and 30 deletions
Show stats Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,11 +1,11 @@
{ {
"name": "ax333l-site", "name": "@example/blog",
"version": "0.0.1", "version": "0.0.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ax333l-site", "name": "@example/blog",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@astrojs/image": "^0.12.1", "@astrojs/image": "^0.12.1",

6
src/components/Footer.svelte
View file

@ -19,6 +19,10 @@ 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=" m-auto text-red-100" href={link.url}>{link.name}</a> <a class="site-item-size m-auto text-red-100" href={link.url}>{link.name}</a>
{/each} {/each}
</footer> </footer>
<style lang="scss">
@use "./edge.scss";
</style>

6
src/components/Navigation.svelte
View file

@ -35,18 +35,20 @@ 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 text-lg float-left"> <a href="/" class="text-red-400 site-larger-item-size 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="text-lg text-red-200" data-swup-preload class:site-selected={is_selected(pathname, link.url)} href={link.url}>{link.name}</a> <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>
{/each} {/each}
<div> <div>
</div> </div>
</nav> </nav>
<style lang="scss"> <style lang="scss">
@use "./edge.scss";
.site-selected { .site-selected {
@apply font-semibold underline underline-offset-4 decoration-red-500 decoration-4; @apply font-semibold underline underline-offset-4 decoration-red-500 decoration-4;
} }

7
src/components/edge.scss Normal file
View file

@ -0,0 +1,7 @@
.site-larger-item-size {
@apply text-xl md:text-2xl lg:text-3xl;
}
.site-item-size {
@apply text-lg md:text-xl lg:text-2xl;
}

13
src/content/Home.svelte
View file

@ -5,21 +5,22 @@
<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 flex flex-col gap-2"> <div class="my-auto">
<h1 class="text-4xl md:text-6xl font-semibold">I am <span class="font-bold text-red-400">Axel.</span></h1> <h1 class="text-3xl 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> <h2 class="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-[150px]" src={profile} /> <img alt="Profile" class="w-[185px]" 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-md md:text-left whitespace-pre-line"> <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. 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> </p>
</section> </section>
</main> </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" /> <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>
<Footer /> <Footer />

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 pb-6"> <main class="swup swup-slide site-view mx-auto">
<slot /> <slot />
</main> </main>
</Base> </Base>

4
src/styles/global.scss
View file

@ -6,10 +6,6 @@ $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;