summer hours 2024!
This commit is contained in:
Thomas
parent
9a1547af47
commit
a32392fc1e
5 changed files with 253 additions and 176 deletions
|
|
@ -1,49 +1,50 @@
|
|||
<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 }>();
|
||||
const dispatch = createEventDispatcher<{ change: string }>();
|
||||
|
||||
let apiPassword = '';
|
||||
let state: 'edit' | 'view' = 'edit';
|
||||
let unsubscribe: () => void;
|
||||
let apiPassword = "";
|
||||
let state: "edit" | "view" = "edit";
|
||||
let unsubscribe: () => void;
|
||||
|
||||
function onSubmit() {
|
||||
state = 'view';
|
||||
if (localStorage) {
|
||||
localStorage.setItem('apiPassword', apiPassword);
|
||||
}
|
||||
dispatch('change', apiPassword);
|
||||
}
|
||||
function onSubmit() {
|
||||
state = "view";
|
||||
if (localStorage) {
|
||||
localStorage.setItem("apiPassword", apiPassword);
|
||||
}
|
||||
dispatch("change", apiPassword);
|
||||
}
|
||||
|
||||
function onEdit() {
|
||||
state = 'edit';
|
||||
}
|
||||
function onEdit() {
|
||||
state = "edit";
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (localStorage !== undefined) {
|
||||
apiPassword = localStorage.getItem('apiPassword') || '';
|
||||
}
|
||||
onMount(() => {
|
||||
if (localStorage !== undefined) {
|
||||
apiPassword = localStorage.getItem("apiPassword") || "";
|
||||
}
|
||||
|
||||
if (apiPassword.length > 0) {
|
||||
dispatch('change', apiPassword);
|
||||
state = 'view';
|
||||
}
|
||||
});
|
||||
if (apiPassword.length > 0) {
|
||||
dispatch("change", apiPassword);
|
||||
state = "view";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
{/if}
|
||||
{#if state === 'view'}
|
||||
<button on:click={onEdit}>Edit Password</button>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={onSubmit}>
|
||||
<input type="text" bind:value={apiPassword} />
|
||||
<input type="submit" value="Set Password" />
|
||||
</form>
|
||||
{/if}
|
||||
{#if apiPassword.length === 0}
|
||||
<p>
|
||||
To save things to the ledger you need to enter the password. Right now you
|
||||
haven't set one.
|
||||
</p>
|
||||
{/if}
|
||||
{#if state === "view"}
|
||||
<button on:click={onEdit}>Edit Password</button>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={onSubmit}>
|
||||
<input type="text" bind:value={apiPassword} />
|
||||
<input type="submit" value="Set Password" />
|
||||
</form>
|
||||
{/if}
|
||||
</section>
|
||||
|
|
|
|||
16
src/content/blog/2024-06-18-summer-hours-2024.md
Normal file
16
src/content/blog/2024-06-18-summer-hours-2024.md
Normal 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.
|
||||
|
||||
✌️☀️
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'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'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 {
|
||||
|
|
|
|||
|
|
@ -1,99 +1,113 @@
|
|||
@font-face {
|
||||
font-family: 'FivoSansModern-Regular';
|
||||
src: url('/FivoSansModern-Regular.otf');
|
||||
font-display: swap;
|
||||
font-family: "FivoSansModern-Regular";
|
||||
src: url("/FivoSansModern-Regular.otf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--brand-orange: #ff8c0d;
|
||||
--brand-purple: #464d77;
|
||||
--brand-green: #36827f;
|
||||
--brand-blue: #00a0e9;
|
||||
--white: #fff;
|
||||
--gray-100: #f8f9fa;
|
||||
--gray-200: #e9ecef;
|
||||
--gray-300: #dee2e6;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6c757d;
|
||||
--gray-700: #495057;
|
||||
--gray-800: #343a40;
|
||||
--gray-900: #212529;
|
||||
--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;
|
||||
--brand-orange: #ff8c0d;
|
||||
--brand-purple: #464d77;
|
||||
--brand-green: #36827f;
|
||||
--brand-blue: #00a0e9;
|
||||
--white: #fff;
|
||||
--gray-100: #f8f9fa;
|
||||
--gray-200: #e9ecef;
|
||||
--gray-300: #dee2e6;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6c757d;
|
||||
--gray-700: #495057;
|
||||
--gray-800: #343a40;
|
||||
--gray-900: #212529;
|
||||
--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;
|
||||
|
||||
--line-height: 120%;
|
||||
--line-height-sm: 120%;
|
||||
--line-height-md: 138%;
|
||||
--line-height-lg: 145%;
|
||||
--line-height: 120%;
|
||||
--line-height-sm: 120%;
|
||||
--line-height-md: 138%;
|
||||
--line-height-lg: 145%;
|
||||
|
||||
--font-size-base: 1rem;
|
||||
--spacing-base: 1rem;
|
||||
--spacing-sm: 0.25rem;
|
||||
--spacing-md: 0.5rem;
|
||||
--spacing-lg: 1rem;
|
||||
--spacing-xl: 1.5rem;
|
||||
--navbar-height: 75px;
|
||||
--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;
|
||||
--spacing-lg: 1rem;
|
||||
--spacing-xl: 1.5rem;
|
||||
--navbar-height: 75px;
|
||||
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size: 1.12rem;
|
||||
--font-size-md: 1.25rem;
|
||||
--font-size-lg: 1.5rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size: 1.12rem;
|
||||
--font-size-md: 1.25rem;
|
||||
--font-size-lg: 1.5rem;
|
||||
|
||||
--btn-border: 0;
|
||||
--btn-padding: var(--spacing-sm);
|
||||
--btn-border-radius: 0.25rem;
|
||||
--btn-font-size: 1.08rem;
|
||||
--btn-text-decoration: none;
|
||||
--btn-border: 0;
|
||||
--btn-padding: var(--spacing-sm);
|
||||
--btn-border-radius: 0.25rem;
|
||||
--btn-font-size: 1.08rem;
|
||||
--btn-text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-sans);
|
||||
line-height: var(--line-height-md);
|
||||
min-height: 100vh;
|
||||
background-color: var(--colour-scheme-background);
|
||||
color: var(--colour-scheme-text);
|
||||
transition: 0.3s ease;
|
||||
transition-property: background-color, color;
|
||||
font-family: var(--font-family-sans);
|
||||
line-height: var(--line-height-md);
|
||||
min-height: 100vh;
|
||||
background-color: var(--colour-scheme-background);
|
||||
color: var(--colour-scheme-text);
|
||||
transition: 0.3s ease;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
.thomaswilson-container {
|
||||
--container-padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(100vh - var(--navbar-height) - calc(2 * var(--container-padding)));
|
||||
padding: var(--container-padding);
|
||||
--container-padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(
|
||||
100vh - var(--navbar-height) - calc(2 * var(--container-padding))
|
||||
);
|
||||
padding: var(--container-padding);
|
||||
}
|
||||
|
||||
.thomaswilson-container .section {
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
font-size: 1.19rem;
|
||||
line-height: var(--line-height-md);
|
||||
padding-bottom: var(--spacing-base);
|
||||
padding-bottom: 2rem;
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
font-size: 1.19rem;
|
||||
line-height: var(--line-height-md);
|
||||
padding-bottom: var(--spacing-base);
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.thomaswilson-strapline .title {
|
||||
font-family: var(--font-family-title);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
font-family: var(--font-family-title);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.thomaswilson-strapline p {
|
||||
font-size: 1.4rem;
|
||||
line-height: var(--line-height-md);
|
||||
letter-spacing: -0.25px;
|
||||
font-weight: 200;
|
||||
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,
|
||||
|
|
@ -102,73 +116,73 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-family-title);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--colour-scheme-text);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 8px;
|
||||
line-height: var(--line-height);
|
||||
font-family: var(--font-family-title);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--colour-scheme-text);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 8px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.25rem;
|
||||
padding-top: 0.7rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 2.25rem;
|
||||
padding-top: 0.7rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
a,
|
||||
blockquote {
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height-lg);
|
||||
font-family: var(--font-family-mono);
|
||||
margin: 0;
|
||||
color: var(--colour-scheme-text);
|
||||
padding: 8px 0;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height-lg);
|
||||
font-family: var(--font-family-mono);
|
||||
margin: 0;
|
||||
color: var(--colour-scheme-text);
|
||||
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;
|
||||
max-width: 60ch;
|
||||
border-style: solid;
|
||||
padding: 0.25rem 0 0.5rem 1rem;
|
||||
border-width: 0px;
|
||||
border-left: 4px solid var(--brand-orange);
|
||||
opacity: 0.85;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--spacing-base);
|
||||
padding-left: var(--spacing-base);
|
||||
}
|
||||
|
||||
.thomaswilson-button {
|
||||
border: var(--btn-border);
|
||||
padding: var(--btn-padding);
|
||||
border-radius: var(--btn-border-radius);
|
||||
font-size: var(--btn-font-size);
|
||||
text-decoration: var(--btn-text-decoration);
|
||||
border: var(--btn-border);
|
||||
padding: var(--btn-padding);
|
||||
border-radius: var(--btn-border-radius);
|
||||
font-size: var(--btn-font-size);
|
||||
text-decoration: var(--btn-text-decoration);
|
||||
}
|
||||
|
||||
.thomaswilson-button:hover {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue