summer hours 2024!

This commit is contained in:
Thomas 2024-06-18 07:23:06 +01:00
parent 9a1547af47
commit a32392fc1e
5 changed files with 253 additions and 176 deletions

View file

@ -1,33 +1,33 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
import { writable } from "svelte/store";
import { onMount, onDestroy, createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher<{ change: string }>();
let apiPassword = '';
let state: 'edit' | 'view' = 'edit';
let apiPassword = "";
let state: "edit" | "view" = "edit";
let unsubscribe: () => void;
function onSubmit() {
state = 'view';
state = "view";
if (localStorage) {
localStorage.setItem('apiPassword', apiPassword);
localStorage.setItem("apiPassword", apiPassword);
}
dispatch('change', apiPassword);
dispatch("change", apiPassword);
}
function onEdit() {
state = 'edit';
state = "edit";
}
onMount(() => {
if (localStorage !== undefined) {
apiPassword = localStorage.getItem('apiPassword') || '';
apiPassword = localStorage.getItem("apiPassword") || "";
}
if (apiPassword.length > 0) {
dispatch('change', apiPassword);
state = 'view';
dispatch("change", apiPassword);
state = "view";
}
});
</script>
@ -35,10 +35,11 @@
<section>
{#if apiPassword.length === 0}
<p>
To save things to the ledger you need to enter the password. Right now you haven't set one.
To save things to the ledger you need to enter the password. Right now you
haven't set one.
</p>
{/if}
{#if state === 'view'}
{#if state === "view"}
<button on:click={onEdit}>Edit Password</button>
{:else}
<form on:submit|preventDefault={onSubmit}>

View file

@ -0,0 +1,16 @@
---
title: Summer Hours 2024
date: 2024-06-18T06:18:13.110Z
slug: 2024-06-18-summer-hours-2024
author: Thomas Wilson
---
It's that time of year when I intentionally set-aside the guilt of not writing all the blog posts I want to, in favour of spending time outside.
In the great tradition, I'll be on Summer Hours for the next few months. Spending times outside, ideally eating and drinking good food.
In July I'm getting married - which I am _incredibly_ excited for.
Around that, I'll be attending other weddings, spending time with family and friends, and lapping up what little sunshine as are bestowed on these Great British Isles.
✌️☀️

View file

@ -43,19 +43,30 @@
<Navbar />
<main class="thomaswilson-container">
<section class="thomaswilson-strapline section">
<section class="thomaswilson-strapline section heading">
<h1>Blog</h1>
<p>
<div class="summer-hours">
<p class="summer-hours__emoji">☀️🥂🌻</p>
<p class="summer-hours__text">
I'm currently out of office for the summer. I'm getting married in July,
and I'll be spending as much time as possible out-of-doors in August.
I'll be back at keyboard in September.
</p>
<p class="summer-hours__signature">--TJW 2024-06-17</p>
</div>
<p class="heading__text">
It has been been
<span
class="days-since"
class:days-since-success="{daysSinceLastPublish === 0}"
class:days-since-success={daysSinceLastPublish === 0}
>
{daysSinceLastPublish}
</span>
{daysSinceLastPublish === 1 ? "day" : "days"} since I last published something.
</p>
<p>
<p class="heading__text">
I have written {numberOfBlogPostsThisYear}
{numberOfBlogPostsThisYear === 1 ? "piece" : "pieces"} so far this year. On
average I publish something every {averageDaysBetweenPosts} days ({numberOfPosts}
@ -70,14 +81,14 @@
<ul class="posts">
{#each posts as post, index}
<BlogPostListItem
index="{index}"
content_type="{post.content_type}"
book_review="{post.book_review}"
date="{post.date}"
numberOfPosts="{posts.length}"
preview="{post.preview}"
slug="{post.slug}"
title="{post.title}"
{index}
content_type={post.content_type}
book_review={post.book_review}
date={post.date}
numberOfPosts={posts.length}
preview={post.preview}
slug={post.slug}
title={post.title}
/>
{/each}
</ul>
@ -85,6 +96,12 @@
</main>
<style lang="scss">
.heading {
gap: var(--spacing-base);
display: grid;
grid-template-columns: 100%;
}
.posts {
list-style: none;
margin: 0;
@ -122,4 +139,31 @@
box-shadow: 0 0 0 5px rgba(54, 130, 127, 0);
}
}
.summer-hours {
border: 2px solid var(--brand-orange);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: 8px;
margin-top: var(--spacing-base);
gap: 0px;
font-size: var(--font-size-sm);
}
.summer-hours__emoji {
font-family: sans-serif;
font-size: var(--font-size-xl);
margin: 0;
}
.summer-hours__text {
margin: 0;
font-size: var(--font-size-base);
line-height: 150%;
}
.summer-hours__signature {
margin: 0;
font-size: var(--font-size-sm);
text-align: right;
}
</style>

View file

@ -12,17 +12,18 @@
<section class="homepage-header">
<h1 class="title">(Thomas) Wilson</h1>
<p class="body">
I love the craft of making well-built things, especially software and
clothes. My embarrassing but earnest goal is to:
</p>
<p class="body">Hand-maker of things, notably software and clothes.</p>
<p class="body">My personal 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.
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 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
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"
@ -49,8 +50,8 @@
href="https://www.laka.co.uk"
target="_blank"
rel="noopener noreferrer">Laka</a
>, making insurance genuinely fairer. Before that, I was Head of
Software Engineering at
>, making insurance genuinely fairer. Before that, I was Head of Software
Engineering at
<a href="https://www.oxwash.com" target="_blank" rel="noopener noreferrer"
>Oxwash</a
>, building tools for actually sustainable laundry and wet cleaning.
@ -83,6 +84,7 @@
.body {
text-align: left;
line-height: 160%;
}
.latest-blog-posts {

View file

@ -1,6 +1,6 @@
@font-face {
font-family: 'FivoSansModern-Regular';
src: url('/FivoSansModern-Regular.otf');
font-family: "FivoSansModern-Regular";
src: url("/FivoSansModern-Regular.otf");
font-display: swap;
}
@ -22,17 +22,23 @@
--gray-950: #1a1e23;
--gray-1000: #0a0c0e;
--font-family-mono: monospace;
--font-family-title: 'FivoSansModern-Regular', sans-serif;
--font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
--font-family-title: "FivoSansModern-Regular", sans-serif;
--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
--line-height: 120%;
--line-height-sm: 120%;
--line-height-md: 138%;
--line-height-lg: 145%;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--spacing-base: 1rem;
--spacing-sm: 0.25rem;
--spacing-md: 0.5rem;
@ -68,7 +74,9 @@ body {
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--navbar-height) - calc(2 * var(--container-padding)));
min-height: calc(
100vh - var(--navbar-height) - calc(2 * var(--container-padding))
);
padding: var(--container-padding);
}
@ -90,12 +98,18 @@ body {
}
.thomaswilson-strapline p {
font-size: 1.4rem;
font-size: var(--font-size-md);
line-height: var(--line-height-md);
letter-spacing: -0.25px;
font-weight: 200;
}
@container (width < 500px) {
.thomaswilson-strapline p {
font-size: ;
}
}
h1,
h2,
h3,