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

Compare commits

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

3 commits
355e2a5bf2 ... fafb77dbb3

Author SHA1 Message Date
Ax333l
fafb77dbb3
chore: lockfile name moment
Some checks failed
ci/woodpecker/push/web Pipeline failed
Details
2023-03-07 08:53:11 +01:00
Ax333l
503ddb16f1
chore: remove unused styles 2023-03-07 08:52:25 +01:00
afn
1d1b86b249
fix: tweak design 2023-03-07 08:50:37 +01:00
8 changed files with 30 additions and 40 deletions
Show stats Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,11 +1,11 @@
{ {
"name": "@example/blog", "name": "ax333l-site",
"version": "0.0.1", "version": "0.0.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@example/blog", "name": "ax333l-site",
"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,10 +19,6 @@ 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>
<style lang="scss">
@use "./edge.scss";
</style>

6
src/components/Navigation.svelte
View file

@ -35,20 +35,18 @@ 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>
</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
View file

@ -1,7 +0,0 @@
.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,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;