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",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "ax333l-site",
"name": "@example/blog",
"version": "0.0.1",
"dependencies": {
"@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">
{#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}
</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">
<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
</a>
<div id="nav-links" class="float-right space-x-12">
{#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}
<div>
</div>
</nav>
<style lang="scss">
@use "./edge.scss";
.site-selected {
@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">
<!-- 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 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 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>
</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-[150px]" src={profile} />
<img alt="Profile" class="w-[185px]" 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-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 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>
</section>
</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" />
</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. -->
{/* Need to do this or else main page breaks. */}
<div id="content">
<slot />
</div>

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

4
src/styles/global.scss
View file

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