blog: end of summer hours
This commit is contained in:
Thomas
parent
a32392fc1e
commit
ed0e455b9c
7 changed files with 590 additions and 615 deletions
|
|
@ -59,7 +59,7 @@
|
|||
"unified": "^10.1.2",
|
||||
"zod": "^3.22.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 20.11.1"
|
||||
}
|
||||
"engines": {
|
||||
"node": ">= 20.11.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
51
src/components/SummerHours2024.svelte
Normal file
51
src/components/SummerHours2024.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script lang="ts">
|
||||
export let isActive: boolean;
|
||||
</script>
|
||||
|
||||
<div class="summer-hours">
|
||||
<p class="summer-hours__emoji">☀️🥂🌻</p>
|
||||
<p class="summer-hours__text" class:inactive={!isActive}>
|
||||
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>
|
||||
{#if !isActive}
|
||||
<p class="summer-hours__text">
|
||||
Summer hours are over, slowly rebooting, bear with.
|
||||
</p>
|
||||
{/if}
|
||||
<p class="summer-hours__signature">--TJW 2024-08-26</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.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__text.inactive {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.summer-hours__signature {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,49 +1,50 @@
|
|||
<div class="out-of-office">
|
||||
<h2 class="title">Summer Hours 2022</h2>
|
||||
<p class="text">
|
||||
I am currently out-of-office for summer 2022. That means instead of writing and documenting, I'm
|
||||
going to spend time with great people, in great places, hopefully eating great food.
|
||||
</p>
|
||||
<h2 class="title">Summer Hours 2022</h2>
|
||||
<p class="text">
|
||||
I am currently out-of-office for summer 2022. That means instead of writing
|
||||
and documenting, I'm going to spend time with great people, in great places,
|
||||
hopefully eating great food.
|
||||
</p>
|
||||
|
||||
<p class="text">Long days and pleasant nights, friend.</p>
|
||||
<p class="text">Long days and pleasant nights, friend.</p>
|
||||
|
||||
<p class="text">Thomas, 2022-07-06</p>
|
||||
<p class="text">Thomas, 2022-07-06</p>
|
||||
</div>
|
||||
|
||||
<link href="https://fonts.bunny.net/css?family=amiko:700" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
.out-of-office {
|
||||
font-size: 1.5rem;
|
||||
max-width: 750px;
|
||||
font-weight: 700;
|
||||
.out-of-office {
|
||||
font-size: 1.5rem;
|
||||
max-width: 750px;
|
||||
font-weight: 700;
|
||||
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background-color: #ffcb00;
|
||||
border: 5px solid #f8aa4b;
|
||||
border-radius: 12px;
|
||||
}
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background-color: #ffcb00;
|
||||
border: 5px solid #f8aa4b;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.title,
|
||||
.text {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
.title,
|
||||
.text {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Amiko', var(--font-family-title);
|
||||
font-weight: 700;
|
||||
font-size: 1.35rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #072448;
|
||||
}
|
||||
.title {
|
||||
font-family: "Amiko", var(--font-family-title);
|
||||
font-weight: 700;
|
||||
font-size: 1.35rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #072448;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: var(--font-size-base);
|
||||
color: #072448;
|
||||
font-family: var(--font-family-sans);
|
||||
font-weight: 500;
|
||||
}
|
||||
.text {
|
||||
font-size: var(--font-size-base);
|
||||
color: #072448;
|
||||
font-family: var(--font-family-sans);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
18
src/content/blog/2024-08-26-summer-hours-2024-are-over.md
Normal file
18
src/content/blog/2024-08-26-summer-hours-2024-are-over.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Summer Hours 2024 are over
|
||||
date: 2024-08-26T09:48:30.668Z
|
||||
slug: 2024-08-26-summer-hours-2024-are-over
|
||||
author: Thomas Wilson
|
||||
|
||||
---
|
||||
Hello, again.
|
||||
|
||||
Nature is telling me that summer is over. Or at least that calling this late August _summer_ is stretching the truth.
|
||||
|
||||
The days are getting shorter. The wind has a cold bite to it. The squirrels want nothing more than to de-head the seeding plants and cache food anywhere in the garden.
|
||||
|
||||
Autumn is coming. Famously the best season. Other than summer.
|
||||
|
||||
I want to write more, but the best way to start is to start. This is my re-starting.
|
||||
|
||||
Long-live summer.
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import type { PageData } from "./$types.js";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import BlogPostListItem from "./BlogPostListItem.svelte";
|
||||
import SummerHours2024 from "../../components/SummerHours2024.svelte";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
|
|
@ -45,16 +46,7 @@
|
|||
<main class="thomaswilson-container">
|
||||
<section class="thomaswilson-strapline section heading">
|
||||
<h1>Blog</h1>
|
||||
<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>
|
||||
|
||||
<SummerHours2024 isActive={false} />
|
||||
<p class="heading__text">
|
||||
It has been been
|
||||
<span
|
||||
|
|
@ -139,31 +131,4 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -52,35 +52,34 @@
|
|||
<section class="new-blog-post">
|
||||
<a href="/blog">Back to Blog</a>
|
||||
<h1>New Blog Post</h1>
|
||||
<form on:submit|preventDefault="{onCreate}">
|
||||
<form on:submit|preventDefault={onCreate}>
|
||||
<div class="field">
|
||||
<label class="field__label" for="title">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
required
|
||||
bind:value="{title}"
|
||||
on:change="{handleTitleChange}"
|
||||
bind:value={title}
|
||||
on:change={handleTitleChange}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field__label" for="author">Author</label>
|
||||
<input type="text" id="author" required bind:value="{author}" />
|
||||
<input type="text" id="author" required bind:value={author} />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="slug">Slug</label>
|
||||
<input type="text" id="slug" required bind:value="{slug}" />
|
||||
<input type="text" id="slug" required bind:value={slug} />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="content">Content</label>
|
||||
<textarea id="content" rows="10" cols="50" bind:value="{content}"
|
||||
></textarea>
|
||||
<textarea id="content" rows="10" cols="50" bind:value={content} />
|
||||
</div>
|
||||
|
||||
<div class="submit">
|
||||
<button class="create-button">Create</button>
|
||||
<button class="create-button">Publish</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue