site: founding post, headline post layout, masonry grid, source links

- New "Why this exists" post; masthead "founded" links to it - Post template: serif headline + date in masthead, "Filed under {category}" in footer - Drop counts from footer Collections list - Masonry component for home + sources grid; source badges link to /sources/#slug - Theme toggle (settings page + cog) with dark-mode-aware tokens - Six new themed find lists; cluster-finds skill
2026-05-03 17:52:14 -04:00
parent c8095d2766
commit e873460465
17 changed files with 683 additions and 251 deletions
@@ -7,6 +7,7 @@ interface Props {
  title: string;
  description?: string;
  subheader?: string;
+  subheaderVariant?: 'tagline' | 'headline';
  lastUpdated?: Date;
  canonicalPath?: string;
  canonicalOverride?: string;
@@ -23,6 +24,7 @@ const {
  title,
  description = 'A small log of delightful, unique things — products, apps, phenomena, oddities.',
  subheader,
+  subheaderVariant = 'tagline',
  lastUpdated,
  canonicalPath,
  canonicalOverride,
@@ -42,6 +44,7 @@ const fmtLong = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
+  timeZone: 'UTC',
 });
 const fmtShort = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
@@ -69,13 +72,23 @@ const year = new Date().getFullYear();
      articleTags={articleTags}
      jsonLd={jsonLd}
    />
+    <script is:inline>
+      (function () {
+        try {
+          var t = localStorage.getItem('theme');
+          if (t === 'light' || t === 'dark') {
+            document.documentElement.setAttribute('data-theme', t);
+          }
+        } catch (e) {}
+      })();
+    </script>
  </head>
  <body>
    <header class="masthead">
      <div class="masthead-row">
        <div class="masthead-stats">
          <span>{stats.total} entries</span>
-          <span>founded {fmtShort.format(SITE_FOUNDED)}</span>
+          <span><a href="/posts/2026-05-03-why-this-exists/">founded {fmtShort.format(SITE_FOUNDED)}</a></span>
        </div>
        <a href="/" class="masthead-brand">{siteName}</a>
        <nav class="masthead-nav" aria-label="Primary">
@@ -85,8 +98,13 @@ const year = new Date().getFullYear();
      </div>
      {subheader && (
        <div class="subheader">
-          <p class="subheader-line">{subheader}</p>
-          {updatedDate && (
+          <p class={`subheader-line${subheaderVariant === 'headline' ? ' subheader-headline' : ''}`}>{subheader}</p>
+          {updatedDate && subheaderVariant === 'headline' && (
+            <p class="subheader-date">
+              <time datetime={updatedDate.toISOString()}>{fmtLong.format(updatedDate)}</time>
+            </p>
+          )}
+          {updatedDate && subheaderVariant !== 'headline' && (
            <p class="subheader-date">
              Updated <time datetime={updatedDate.toISOString()}>{fmtLong.format(updatedDate)}</time>
            </p>
@@ -110,10 +128,10 @@ const year = new Date().getFullYear();
        <section>
          <h4>Collections</h4>
          <ul>
-            <li><a href="/grid/">Reviews ({stats.reviews})</a></li>
-            <li><a href="/find/">Finds ({stats.finds})</a></li>
-            <li><a href="/finds/">Lists ({stats.lists})</a></li>
-            <li><a href="/blog/">Posts ({stats.posts})</a></li>
+            <li><a href="/grid/">Reviews</a></li>
+            <li><a href="/find/">Finds</a></li>
+            <li><a href="/finds/">Lists</a></li>
+            <li><a href="/blog/">Posts</a></li>
          </ul>
        </section>
        <section>
@@ -129,27 +147,45 @@ const year = new Date().getFullYear();
          © {year} Unique
          <span aria-hidden="true">·</span>
          <a href="/legal/">Legal</a>
+          <span aria-hidden="true">·</span>
+          <a href="/settings/" class="settings-cog" aria-label="Settings">
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+            </svg>
+          </a>
        </p>
      </div>
    </footer>
+
    <style is:global>
      :root {
        --fg: #1a1a1a;
-        --bg: #fafaf7;
+        --bg: #f4f0ec;
+        --card-fill: #ebe6df;
        --muted: #6b6b6b;
        --accent: #b34700;
-        --rule: #e6e3dc;
+        --rule: #e0dbd2;
        --max: 42rem;
      }
      @media (prefers-color-scheme: dark) {
-        :root {
+        :root:not([data-theme="light"]) {
          --fg: #ececea;
          --bg: #161613;
+          --card-fill: #1f1f1c;
          --muted: #8d8d88;
          --accent: #ff9c5b;
          --rule: #2a2a26;
        }
      }
+      :root[data-theme="dark"] {
+        --fg: #ececea;
+        --bg: #161613;
+        --card-fill: #1f1f1c;
+        --muted: #8d8d88;
+        --accent: #ff9c5b;
+        --rule: #2a2a26;
+      }
      * { box-sizing: border-box; }
      html, body {
        margin: 0;
@@ -192,6 +228,8 @@ const year = new Date().getFullYear();
        letter-spacing: 0.08em;
        color: var(--muted);
      }
+      .masthead-stats a { color: var(--muted); }
+      .masthead-stats a:hover { color: var(--accent); }
      .masthead-brand {
        font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif;
        font-weight: 700;
@@ -217,6 +255,22 @@ const year = new Date().getFullYear();
      .masthead-nav a { color: var(--muted); }
      .masthead-nav a:hover { color: var(--accent); }

+      .settings-cog {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        color: var(--muted);
+        line-height: 0;
+        transition: color 0.18s ease, transform 0.6s ease;
+      }
+      .settings-cog:hover {
+        color: var(--accent);
+        text-decoration: none;
+        transform: rotate(60deg);
+      }
+      .settings-cog svg { display: block; }
+
      .subheader {
        text-align: center;
        padding: 0.85rem 0 1rem;
@@ -228,6 +282,15 @@ const year = new Date().getFullYear();
        font-size: 1rem;
        color: var(--fg);
      }
+      .subheader-line.subheader-headline {
+        font-family: ui-serif, Georgia, 'Iowan Old Style', 'Apple Garamond', 'Palatino Linotype', serif;
+        font-style: normal;
+        font-weight: 700;
+        font-size: clamp(1.6rem, 4.2vw, 2.4rem);
+        line-height: 1.15;
+        letter-spacing: -0.01em;
+        color: var(--fg);
+      }
      .subheader-date {
        margin: 0.25rem 0 0;
        font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
@@ -246,6 +309,7 @@ const year = new Date().getFullYear();
        }
        .masthead-stats {
          flex-direction: row;
+          flex-wrap: wrap;
          justify-content: center;
          gap: 0.5rem;
          order: 2;