wilson/thomaswilson-sveltekit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finalise redesign

Browse source
This commit is contained in:
Thomas 2024-03-17 22:01:32 +00:00
parent 8fcd9d23b7
commit 46c5065d60
9 changed files with 169 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

158
src/lib/components/Navbar.svelte
View file

@ -1,82 +1,108 @@
<script lang="ts"> <script lang="ts">
import { colourSchemeStore, lightColourScheme, darkColourScheme } from "../../stores/colourSchemeStore"; import { tweened } from 'svelte/motion'
import { expoOut } from 'svelte/easing'
import {
colourSchemeStore,
lightColourScheme,
darkColourScheme,
} from "../../stores/colourSchemeStore.ts";
import sunSvg from "./sun.svg";
import moonSvg from "./moon.svg";
function onColourSchemeChange() { function onColourSchemeChange() {
if ($colourSchemeStore.name === 'dark') { const newColourScheme =
colourSchemeStore.set(lightColourScheme) $colourSchemeStore.name === "dark" ? lightColourScheme : darkColourScheme;
} else { localStorage.setItem("colourScheme", newColourScheme.name);
colourSchemeStore.set(darkColourScheme) colourSchemeStore.set(newColourScheme);
} iconMovement.set($iconMovement + 360);
} }
const iconMovement = tweened(0, {
duration: 300,
easing: expoOut
});
</script> </script>
<nav>
<div class="left">
<a href="/" class="home">Thomas Wilson</a>
</div>
<div class="right"> <nav>
<button class="colour-theme-toggle" on:click={onColourSchemeChange}>Toggle Colour Scheme</button> <div class="left">
<a href="/blog" class="blog">/blog</a> <a href="/" class="home">Thomas Wilson</a>
</div> </div>
<div class="right">
<button class="colour-theme-toggle" on:click={onColourSchemeChange}>
<img
class="icon"
src={$colourSchemeStore.name === "light" ? sunSvg : moonSvg}
alt="Light mode"
width="24"
height="24"
style="transform: rotate({$iconMovement}deg)"
/>
</button>
<a href="/blog" class="blog">/blog</a>
</div>
</nav> </nav>
<style> <style>
nav { nav {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
max-width: 100vw; max-width: 100vw;
overflow: hidden; overflow: hidden;
min-height: var(--navbar-height); min-height: var(--navbar-height);
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
} }
.left { .left {
flex: 1; flex: 1;
flex-grow: 0; flex-grow: 0;
text-align: left; text-align: left;
padding: var(--spacing-base); padding: var(--spacing-base);
}
}
.home { .home {
color: var(--brand-orange); color: var(--brand-orange);
font-family: inherit; font-family: inherit;
text-decoration: none; text-decoration: none;
font-weight: 300; font-weight: 300;
display: flex; display: flex;
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;
transition: 0.3s; transition: 0.3s;
} }
.home:hover { .home:hover {
transform: rotate(11deg); transform: rotate(11deg);
} }
.right { .right {
display: flex; display: flex;
flex: 1; flex: 1;
text-align: right; text-align: right;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: var(--spacing-base); padding: var(--spacing-base);
} }
.colour-theme-toggle { .colour-theme-toggle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.blog { svg path {
font-size: 1.1rem; fill: var(--colour-scheme-text);
padding: 0; }
margin: 0;
}
.blog:visited { .blog {
color: var(--colour-scheme-text); font-size: 1.1rem;
} padding: 0;
margin: 0;
}
.blog:visited {
color: var(--colour-scheme-text);
}
</style> </style>

1
src/lib/components/moon.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M3 11.5066C3 16.7497 7.25034 21 12.4934 21C16.2209 21 19.4466 18.8518 21 15.7259C12.4934 15.7259 8.27411 11.5066 8.27411 3C5.14821 4.55344 3 7.77915 3 11.5066Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 438 B

1
src/lib/components/sun.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="red"><path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12L23 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 2V1" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 23V22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 20L19 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L19 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 20L5 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 4L5 5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1 12L2 12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

68
src/routes/+layout.svelte
View file

@ -1,31 +1,59 @@
<script lang="ts"> <script lang="ts">
import "../styles/thomaswilson.css"; import "../styles/thomaswilson.css";
import { colourSchemeStore } from "../stores/colourSchemeStore.ts"; import {
colourSchemeStore,
colourSchemes,
darkColourScheme,
lightColourScheme,
} from "../stores/colourSchemeStore.ts";
import { browser } from "$app/environment"; import { browser } from "$app/environment";
import { onMount } from "svelte";
onMount(() => {
const prefersDarkmode: boolean = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
const colourSchemeName: string | null =
localStorage.getItem("colourScheme");
const colourScheme = colourSchemes?.[colourSchemeName];
console.log({
colourSchemeName,
colourScheme,
prefersDarkmode
})
if (colourScheme) {
colourSchemeStore.set(colourScheme);
} else if (prefersDarkmode) {
colourSchemeStore.set(darkColourScheme);
} else {
colourSchemeStore.set(lightColourScheme);
}
});
colourSchemeStore.subscribe((value) => { colourSchemeStore.subscribe((value) => {
if (browser) { if (!browser) return;
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--colour-scheme-background", "--colour-scheme-background",
value.background value.background
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--colour-scheme-text", "--colour-scheme-text",
value.text value.text
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--colour-scheme-background-accent", "--colour-scheme-background-accent",
value.backgroundAccent value.backgroundAccent
); );
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
"--colour-scheme-text-accent", "--colour-scheme-text-accent",
value.textAccent value.textAccent
); );
}
}); });
</script> </script>

5
src/routes/blog/[slug]/+page.svelte
View file

@ -77,7 +77,6 @@
line-height: 160%; line-height: 160%;
font-size: var(--font-size); font-size: var(--font-size);
font-weight: 400; font-weight: 400;
margin-bottom: 1.5rem;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@ -93,8 +92,10 @@
flex-grow: 1; flex-grow: 1;
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
--font-size: 1.1rem; --font-size: 1rem;
padding: 12px; padding: 12px;
letter-spacing: normal;
line-height: 110%;
} }
@media screen and (min-width: 700px) { @media screen and (min-width: 700px) {

7
src/routes/games/PreviousGameScores.svelte
View file

@ -36,11 +36,4 @@
grid-template-columns: 100%; grid-template-columns: 100%;
width: 100%; width: 100%;
} }
.toggle-button {
width: 100%;
color: white;
background: var(--brand-purple);
border: none;
}
</style> </style>

21
src/routes/home/HomepageHeader.svelte
View file

@ -13,17 +13,16 @@
<section class="homepage-header"> <section class="homepage-header">
<h1 class="title">(Thomas) Wilson</h1> <h1 class="title">(Thomas) Wilson</h1>
<p class="body"> <p class="body">
I love the craft of well-built things: mostly software (~8 years), but also I love the craft of making well-built things, especially software and
clothes (~2 years). clothes. My embarrassing but earnest goal is to:
</p> </p>
<blockquote class="mission-statement">
make things stronger which don&apos;t rely on exploitation, excessive waste, or
dishonesty; and to try and build a kinder, fairer world even when it's hard.
</blockquote>
<p class="body"> <p class="body">
I work against systems which rely on exploitation, excessive waste, and I try to think and be curious, which is why I keep a <a href="/blog">weblog</a
dishonesty. I'm trying to build a kinder and fairer world, and I find that > and, equally worth mentioning, what got me through a
hard sometimes.
</p>
<p class="body">
I try to think and be curious, that's why I keep a <a href="/blog">weblog</a
>. And (equally embarrassing to say) probably what got me through a
<a <a
class="thesis" class="thesis"
target="_blank" target="_blank"
@ -68,7 +67,8 @@
a, a,
ol, ol,
li, li,
p { p,
blockquote {
color: var(--text-color); color: var(--text-color);
font-family: inherit; font-family: inherit;
width: 100%; width: 100%;
@ -78,6 +78,7 @@
.title { .title {
font-weight: 400; font-weight: 400;
font-family: inherit; font-family: inherit;
padding-bottom: 1.85rem;
} }
.body { .body {

4
src/stores/colourSchemeStore.ts
View file

@ -1,4 +1,5 @@
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import { browser } from '$app/environment'
type ColourSchemeName = 'light' | 'dark'; type ColourSchemeName = 'light' | 'dark';
@ -31,5 +32,6 @@ export const colourSchemes: Record<ColourSchemeName, ColourScheme> = {
dark: darkColourScheme dark: darkColourScheme
}; };
export const colourSchemeStore = writable<ColourScheme>(darkColourScheme); export const colourSchemeStore = writable<ColourScheme>(lightColourScheme);

11
src/styles/thomaswilson.css
View file

@ -114,7 +114,8 @@ h6 {
p, p,
li, li,
a { a,
blockquote {
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height-lg); line-height: var(--line-height-lg);
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
@ -123,6 +124,14 @@ a {
padding: 8px 0; padding: 8px 0;
} }
blockquote {
border-style: solid;
padding: 0.25rem 0 0.5rem 1rem;
border-width: 0px;
border-left: 4px solid var(--brand-orange);
opacity: 0.85;
}
ul, ul,
ol { ol {
padding-left: var(--spacing-base); padding-left: var(--spacing-base);