update README, add meta description, fill orange into corners

README.md

@@ -1,10 +1,9 @@
 ## Prerequisites
 
-- pnpm@9
 - node@20
 - [mise](https://mise.jdx.dev/) (optional) to install dependencies
 
 ## Usage
 
-- Local development: `pnpm dev`
-- Deploy: `pnpm upload`
+- Local development: `npm run dev`
+- Deploy: `npm run upload`

assets/site.css

@@ -219,6 +219,7 @@ body {
       bottom: calc(1px - 0.5rem);
       border-radius: 1.3rem 1.3rem 1rem 1rem;
       border: 0.5rem solid var(--c-accent);
+      outline: 0.5rem solid var(--c-accent);
     }
   }
   body > footer {
@@ -266,7 +267,8 @@ a[href] {
 a[href]:hover,
 a[href]:focus-visible,
 label:hover,
-label:focus-visible {
+label:focus-visible,
+label:has(input:focus-visible) {
   text-decoration-color: var(--c-accent);
 }
 

site/_includes/base.njk

@@ -8,7 +8,10 @@ title: Joshua's Homepage
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{buildTime}}"/>
+    <link rel="preload" media="light" href="{{ "./cloud.png" | url }}" as="image" />
+    <link rel="preload" media="dark" href="{{ "./cloud-night.png" | url }}" as="image" />
     <title>{{ computedTitle }} - {{ site.title }}</title>
+    <meta name="description" content="{{ description }}" />
     <meta property="og:title" content="{{ computedTitle }}" />
     <meta property="og:type" content="{{ article }}" />
     <meta property="og:url" content="{{ page.url | absoluteURL }}" />