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">
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() {
if ($colourSchemeStore.name === 'dark') {
colourSchemeStore.set(lightColourScheme)
} else {
colourSchemeStore.set(darkColourScheme)
}
}
function onColourSchemeChange() {
const newColourScheme =
$colourSchemeStore.name === "dark" ? lightColourScheme : darkColourScheme;
localStorage.setItem("colourScheme", newColourScheme.name);
colourSchemeStore.set(newColourScheme);
iconMovement.set($iconMovement + 360);
}
const iconMovement = tweened(0, {
duration: 300,
easing: expoOut
});
</script>
<nav>
<div class="left">
<a href="/" class="home">Thomas Wilson</a>
</div>
<div class="right">
<button class="colour-theme-toggle" on:click={onColourSchemeChange}>Toggle Colour Scheme</button>
<a href="/blog" class="blog">/blog</a>
</div>
<nav>
<div class="left">
<a href="/" class="home">Thomas Wilson</a>
</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>
<style>
nav {
display: flex;
flex-flow: row;
max-width: 100vw;
overflow: hidden;
min-height: var(--navbar-height);
font-family: var(--font-family-mono);
}
nav {
display: flex;
flex-flow: row;
max-width: 100vw;
overflow: hidden;
min-height: var(--navbar-height);
font-family: var(--font-family-mono);
}
.left {
flex: 1;
flex-grow: 0;
text-align: left;
padding: var(--spacing-base);
}
.left {
flex: 1;
flex-grow: 0;
text-align: left;
padding: var(--spacing-base);
}
.home {
color: var(--brand-orange);
font-family: inherit;
text-decoration: none;
font-weight: 300;
display: flex;
width: fit-content;
white-space: nowrap;
transition: 0.3s;
}
.home {
color: var(--brand-orange);
font-family: inherit;
text-decoration: none;
font-weight: 300;
display: flex;
width: fit-content;
white-space: nowrap;
transition: 0.3s;
}
.home:hover {
transform: rotate(11deg);
}
.home:hover {
transform: rotate(11deg);
}
.right {
display: flex;
flex: 1;
text-align: right;
gap: 1rem;
align-items: center;
justify-content: flex-end;
padding: var(--spacing-base);
}
.right {
display: flex;
flex: 1;
text-align: right;
gap: 1rem;
align-items: center;
justify-content: flex-end;
padding: var(--spacing-base);
}
.colour-theme-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.colour-theme-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.blog {
font-size: 1.1rem;
padding: 0;
margin: 0;
}
svg path {
fill: var(--colour-scheme-text);
}
.blog:visited {
color: var(--colour-scheme-text);
}
.blog {
font-size: 1.1rem;
padding: 0;
margin: 0;
}
.blog:visited {
color: var(--colour-scheme-text);
}
</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">
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 { 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) => {
if (browser) {
document.documentElement.style.setProperty(
"--colour-scheme-background",
value.background
);
if (!browser) return;
document.documentElement.style.setProperty(
"--colour-scheme-background",
value.background
);
document.documentElement.style.setProperty(
"--colour-scheme-text",
value.text
);
document.documentElement.style.setProperty(
"--colour-scheme-text",
value.text
);
document.documentElement.style.setProperty(
"--colour-scheme-background-accent",
value.backgroundAccent
);
document.documentElement.style.setProperty(
"--colour-scheme-background-accent",
value.backgroundAccent
);
document.documentElement.style.setProperty(
"--colour-scheme-text-accent",
value.textAccent
);
}
document.documentElement.style.setProperty(
"--colour-scheme-text-accent",
value.textAccent
);
});
</script>

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

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

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

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

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

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

4
src/stores/colourSchemeStore.ts
View file

@ -1,4 +1,5 @@
import { writable } from "svelte/store";
import { browser } from '$app/environment'
type ColourSchemeName = 'light' | 'dark';
@ -31,5 +32,6 @@ export const colourSchemes: Record<ColourSchemeName, ColourScheme> = {
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,
li,
a {
a,
blockquote {
font-size: var(--font-size);
line-height: var(--line-height-lg);
font-family: var(--font-family-mono);
@ -123,6 +124,14 @@ a {
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,
ol {
padding-left: var(--spacing-base);