feat: theme revisions

src/_data/colors.js

@@ -36,4 +36,27 @@ const colors = {
   },
 };
 
-module.exports = colors;
+const colorSchemes = {
+  light: {
+    primary: "188deg 84% 35%",
+    secondary: "8 84% 50%",
+    background: "0 0% 98%",
+    surface: "188 27% 94%",
+    border: "188 48% 80%",
+    text: "0 0% 4%",
+    fadeText: "188 12% 32%",
+    shadow: "188deg 100% 18%",
+  },
+  dark: {
+    primary: "188deg 84% 28%",
+    secondary: "8 84% 43%",
+    background: "0 0% 4%",
+    surface: "202 10% 10%",
+    border: "208 27% 15%",
+    text: "0 0% 98%",
+    fadeText: "188 12% 70%",
+    shadow: "188deg 100% 18%",
+  },
+};
+
+module.exports = { colors, colorSchemes };

src/_includes/css/colorVariables.njk

@@ -1,7 +1,29 @@
-html {
-{% for colorName, colorValues in colors %}
-    {% for value, hex in colorValues %}
-        --color-{{ colorName }}-{{ value }}: {{ hex }};
-    {% endfor %}
+{% set colorSchemes = colors.colorSchemes %}
+{% set lightScheme = colorSchemes.light %}
+{% set darkScheme = colorSchemes.dark %}
+
+:root {
+{% for colorName, value in lightScheme %}
+    --{{ colorName }}: {{ value }};
+    --color-{{ colorName }}: hsl({{ value }});
 {% endfor %}
 }
+
+{% for colorName, value in lightScheme %}
+.bg-{{ colorName }} {
+    background-color: var(--color-{{ colorName }});
+}
+
+.text-{{ colorName }} {
+    color: var(--color-{{ colorName }});
+}
+{% endfor %}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+{% for colorName, value in darkScheme %}
+    --{{ colorName }}: {{ value }};
+    --color-{{ colorName }}: hsl({{ value }});
+{% endfor %}
+    }
+}

src/_includes/css/spacing.njk

@@ -74,3 +74,9 @@
     }
 {% endfor %}
 
+:root {
+{% for keyRaw, value in spacing %}
+    {% set key = keyRaw | replace(".", "-") %}
+    --spacing-{{ key }}: {{ value }}px;
+{% endfor %}
+}

src/_includes/partials/footer.html

@@ -14,13 +14,16 @@
             <ul class="[ flex list-none gap-0.5 m-0 p-0 ]">
                 <li>
                     <span class="[ visually-hidden ]">RSS</span>
-                    <a href="#" target="_blank">{% include "svgs/rss.svg" %}</a>
+                    <a href="#" target="_blank" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
                 </li>
                 {% for key, url in meta.social %}
                     {% set alt = key | capitalize %}
                     <li>
                         <span class="[ visually-hidden ]">{{ alt }}</span>
-                        <a href="{{ url }}" target="_blank" rel="external noreferrer noopener">{% include "svgs/social-" + key + ".svg" %}</a>
+                        <a href="{{ url }}"
+                           target="_blank"
+                           rel="external noreferrer noopener"
+                           aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
                     </li>
                 {% endfor %}
             </ul>

src/_includes/partials/header.html

@@ -2,10 +2,13 @@
     <nav class="[ wrapper flex items-center justify-between ]">
         <div class="[ site-logo ] [ flex items-center ]">
             <a class="[ logo ] [ flex items-center justify-center ]"
+               aria-label="Go to index"
                href="{{ meta.url }}">
                 <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
             </a>
-            <a class="[ wordmark ] [ flex ]" href="{{ meta.url }}">
+            <a class="[ wordmark ] [ flex ]"
+               href="{{ meta.url }}"
+               aria-label="Go to index">
                 <span>wonderful</span>
                 <span>frog</span>
             </a>

src/_includes/svgs/calendar.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0H3V2H1V5H15V2H13V0H10V2H6V0Z" fill="currentColor"/>
+<path d="M15 7H1V15H15V7Z" fill="currentColor"/>
+</svg>

src/_layouts/base.html

@@ -18,16 +18,16 @@
                   {% if preload.crossorigin %}crossorigin{% endif %} />
         {% endfor %}
         {% set css %}
+            {% include "css/colorVariables.njk" %}
             {% include "css/fontFace.njk" %}
             {% include "css/fontVariables.njk" %}
-            {% include "css/colorVariables.njk" %}
             {% include "css/spacing.njk" %}
         {% endset %}
         <style>{{ css | minifyCss | safe }}</style>
     </head>
-    <body>
+    <body class="[ flex-col ]">
         {% include "partials/header.html" %}
-        <main id="main" class="[ flow wrapper ]">
+        <main id="main" class="[ flow flex-1 wrapper ]">
             {{ content | safe }}
         </main>
         {% include "partials/footer.html" %}

src/_layouts/post.html

@@ -4,12 +4,14 @@ layout: base
 
 <article class="[ flow ]">
     <header class="[ flow ]" style="--flow-space: 1rem">
-        <time class="[ date ]" datetime="{{ date }}">{{ date | formatDate("MMMM D, YYYY") }}</time>
+        <time class="[ date ][ flex items-center gap-0.5 ]" datetime="{{ date }}">
+            {% include "svgs/calendar.svg" %}
+        {{ date | formatDate("MMMM D, YYYY") }}</time>
         <h1>{{ title }}</h1>
-        <ul class="[ categories ]">
+        <ul class="[ categories ] [ flex gap-1 list-none p-0 ]">
             {% for category in categories %}
                 <li>
-                    <a href="/tag/{{ category }}">{{ category }}</a>
+                    <a class="[ flex ]" href="/tags/{{ category }}">{{ category }}</a>
                 </li>
             {% endfor %}
         </ul>

src/assets/css/blocks/archive.css

@@ -1,11 +1,11 @@
 .archive-divider {
-  border-color: var(--color-bg-faded);
+  border-color: var(--color-surface);
   border-width: 1px;
   border-style: dashed;
   flex: 1;
 }
 
 .archive-date {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
   letter-spacing: 0.05em;
 }

src/assets/css/blocks/categories.css

@@ -1,14 +1,23 @@
 .categories {
-  color: var(--color-text-soft);
-  display: flex;
-  gap: 1rem;
-  list-style-type: none;
-  margin-block-end: 0;
-  padding: 0;
+  color: var(--text-color);
 }
 
-.categories li::before {
-  content: "#";
-  margin-inline-end: 0.125rem;
-  user-select: none;
+.categories li {
+  --text-color: var(--color-fadeText);
+}
+
+.categories > li > a {
+  color: var(--text-color);
+  text-decoration-color: var(--text-color);
+}
+
+.categories li:has(a:hover) {
+  --text-color: var(--color-primary);
+}
+
+.categories > li > a::before {
+  content: "#";
+  color: var(--text-color);
+  user-select: none;
+  transition: color var(--transition-duration);
 }

src/assets/css/blocks/date.css

@@ -1,3 +1,7 @@
 .date {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
+}
+
+.date svg {
+  color: var(--color-shadow);
 }

src/assets/css/blocks/pill.css

@@ -1,12 +1,12 @@
 .pill {
-  background-color: var(--color-bg-soft);
+  background-color: var(--color-surface);
   border-radius: 1rem;
   transition: transform var(--transition-duration);
 }
 
 .pill:hover {
   background-color: var(--color-text);
-  color: var(--color-bg);
+  color: var(--color-primary);
   transform: translateY(-2px);
 }
 
@@ -19,5 +19,9 @@ a.pill {
 }
 
 .pill-count {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
+}
+
+.pill:hover .pill-count {
+  color: var(--color-border);
 }

src/assets/css/blocks/site-footer.css

@@ -1,5 +1,5 @@
 .footer {
-  background-color: var(--color-bg-soft);
+  background-color: var(--color-surface);
 }
 
 .footer-grid {

src/assets/css/blocks/site-logo.css

@@ -2,17 +2,6 @@
   gap: 0.5rem;
 }
 
-.site-logo .logo {
-  background-color: var(--color-light);
-  border-radius: 50%;
-  width: 52px;
-  height: 52px;
-  border-color: var(--color-dark);
-  border-width: 1px;
-  border-style: solid;
-  box-shadow: 0 2px 0 var(--color-dark);
-}
-
 .site-logo .wordmark {
   text-decoration: none;
 }
@@ -30,7 +19,7 @@
     -1px 3px 0 var(--shadow-color),
     0px 3px 0 var(--shadow-color),
     1px 3px 0 var(--shadow-color);
-  color: white;
+  color: var(--color-white);
   font-family: var(--font-family-display);
   font-size: 1.5rem;
   letter-spacing: -0.05em;
@@ -42,24 +31,10 @@
 }
 
 .site-logo .wordmark > :nth-child(1) {
-  --shadow-color: var(--color-dark);
-}
-
-.site-logo .wordmark > :nth-child(2) {
-  --shadow-color: var(--color-primary-faded);
+  --shadow-color: var(--color-shadow);
   z-index: 1;
 }
 
-@container (max-width: 32em) {
-  .site-logo .wordmark {
-    /* Visually hide wordmark on smaller screens */
-    clip: rect(0 0 0 0);
-    height: auto;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
-  }
+.site-logo .wordmark > :nth-child(2) {
+  --shadow-color: var(--color-primary);
 }

src/assets/css/blocks/site-nav.css

@@ -1,7 +1,11 @@
 .navbar {
   backdrop-filter: blur(3px);
-  background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
-  background-image: linear-gradient(var(--color-bg) 20%, transparent);
+  background-color: color-mix(
+    in srgb,
+    var(--color-background) 60%,
+    transparent
+  );
+  background-image: linear-gradient(var(--color-background) 20%, transparent);
   container: navbar / inline-size;
   padding-block: 1.5rem;
   position: sticky;

src/assets/css/global/global-styles.css

@@ -10,7 +10,7 @@ html {
 
 body {
   accent-color: var(--color-primary);
-  background-color: var(--color-bg);
+  background-color: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-family-body);
   font-size: 1.125rem;
@@ -44,6 +44,13 @@ h2 {
 }
 
 h3 {
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 1.5rem;
+}
+
+h4 {
   font-size: 1.125rem;
   font-weight: var(--font-weight-display-bold);
   letter-spacing: -0.05rem;
@@ -55,31 +62,36 @@ a {
   color: currentColor;
   text-decoration-color: var(--color-primary);
   text-decoration-thickness: 2px;
-  transition: text-decoration-color var(--transition-duration);
+  transition:
+    color var(--transition-duration),
+    text-decoration-color var(--transition-duration);
+}
+
+a:visited {
+  text-decoration-color: var(--color-shadow);
 }
 
 a:hover,
 a:active,
 a:focus-visible {
-  text-decoration-color: var(--color-primary-highlight);
-}
-
-a:visited {
-  text-decoration-color: var(--color-primary-subtle);
+  color: var(--color-primary);
+  text-decoration-color: var(--color-primary);
 }
 
 ul li::marker {
-  color: var(--color-primary-faded);
+  color: var(--color-primary);
 }
 
 ol li::marker {
-  color: var(--color-text-soft);
+  color: var(--color-fadeText);
 }
 
 blockquote {
-  border-inline-start: 2px solid var(--color-bg-faded);
+  border-inline-start: 2px solid var(--color-primary);
   margin-inline-start: 0;
+  margin-inline-end: 0;
   padding-inline: 1rem;
+  background-color: var(--color-surface);
 }
 
 blockquote > * + * {
@@ -107,7 +119,23 @@ img[width][height] {
 
 hr {
   border-style: solid;
-  color: var(--color-bg-faded);
+  color: var(--color-surface);
+}
+
+pre {
+  overflow-x: auto;
+}
+
+figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-inline: 0;
+  gap: var(--spacing-1);
+}
+
+figure figcaption {
+  color: var(--color-fadeText);
 }
 
 @media (prefers-reduced-motion: reduce) {

src/assets/css/global/variables.css

@@ -3,32 +3,6 @@
   --transition-duration: 250ms;
   --transition-timing: ease;
 
-  --color-light: var(--color-neutral-50);
-  --color-dark: var(--color-neutral-950);
-
-  --color-bg: var(--color-light);
-  --color-bg-faded: var(--color-neutral-300);
-  --color-bg-soft: var(--color-neutral-100);
-  --color-text: var(--color-dark);
-  --color-text-soft: var(--color-neutral-600);
-  --color-primary: var(--color-aqua-400);
-  --color-primary-highlight: var(--color-aqua-300);
-  --color-primary-subtle: var(--color-aqua-500);
-  --color-primary-faded: var(--color-aqua-600);
-  --color-secondary: var(--color-carotte-400);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: var(--color-dark);
-    --color-bg-soft: var(--color-neutral-900);
-    --color-bg-faded: var(--color-neutral-800);
-    --color-text: var(--color-light);
-    --color-text-soft: var(--color-neutral-500);
-
-    --color-primary: var(--color-aqua-300);
-    --color-primary-highlight: var(--color-aqua-200);
-    --color-primary-subtle: var(--color-aqua-400);
-    --color-primary-faded: var(--color-aqua-100);
-  }
+  --color-white: white;
+  --color-black: black;
 }

src/assets/css/utils/flex.css

@@ -26,3 +26,7 @@
 .flex-nowrap {
   flex-wrap: nowrap;
 }
+
+.flex-1 {
+  flex: 1;
+}

src/assets/css/utils/wrapper.css

@@ -6,7 +6,7 @@
  */
 .wrapper {
   width: 90vw;
-  width: clamp(16rem, 90vw, 80ch);
+  width: clamp(16rem, 90vw, 65ch);
   margin-left: auto;
   margin-right: auto;
   padding-left: 1.5rem;

src/content/pages/styleguide.html

@@ -0,0 +1,75 @@
+---
+layout: base
+permalink: /styleguide/index.html
+title: Styleguide
+---
+
+<h1>Heading one</h1>
+<h2>Heading two</h2>
+<h3>Heading three</h3>
+<h4>Heading four</h4>
+<p>Paragraph text</p>
+<p>
+    <strong>Bold text</strong>
+</p>
+<p>
+    <em>Emphasized text</em>
+</p>
+<p>
+    <strong>
+        <em>Bold and emphasized text</em>
+    </strong>
+</p>
+<p>
+    An abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>
+</p>
+<hr />
+<div class="[ flex ]">
+    <div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-background)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
+    <div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
+</div>
+<hr />
+<a href="#">A link</a>
+<a href="/">A visited link</a>
+<hr />
+<blockquote>
+    <p>A blockquote</p>
+    <p>Here is some more text</p>
+    <p>And even more!</p>
+</blockquote>
+<hr />
+<p>An unordered list</p>
+<ul>
+    <li>Item one</li>
+    <li>Item two</li>
+    <li>Item three</li>
+</ul>
+<hr />
+<p>An ordered list</p>
+<ol>
+    <li>Item one</li>
+    <li>Item two</li>
+    <li>Item three</li>
+</ol>
+<hr />
+<aside>
+    <p>An aside block</p>
+</aside>
+<hr />
+<figure>
+    <img src="/assets/images/logo.svg" />
+    <figcaption>A fig caption.</figcaption>
+</figure>
+<hr />
+<div style="background-color: var(--color-surface);
+            border: 1px solid var(--color-border);
+            padding: 1rem">A card-type component.</div>
+<hr />
+<div style="box-shadow: 2px 2px 8px hsl(var(--shadow) / 0.34);
+            padding: 1rem">This box has a shadow</div>