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

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import Masonry from '../components/Masonry.astro';
 import { heroes } from '../lib/hero';
 import { buildOgImage, buildItemList, WEBSITE, ORGANIZATION } from '../lib/seo';
 
@@ -75,10 +76,10 @@ const itemList = buildItemList(
     </a>
   )}
 
-  <ul class="grid" data-initial={INITIAL_GRID} data-batch={BATCH_SIZE}>
+  <Masonry initial={INITIAL_GRID} batch={BATCH_SIZE}>
     {
-      rest.map((tile, i) => (
-        <li class:list={[{ hidden: i >= INITIAL_GRID }]} data-index={i}>
+      rest.map((tile) => (
+        <article>
           <a href={tile.href} class:list={['tile', { 'text-only': !tile.hero }]}>
             {tile.hero?.kind === 'image' && (
               <img
@@ -108,107 +109,10 @@ const itemList = buildItemList(
               <span class="subtitle">{tile.subtitle}</span>
             </div>
           </a>
-        </li>
+        </article>
       ))
     }
-  </ul>
-
-  {rest.length > INITIAL_GRID && (
-    <div class="more-wrap">
-      <button id="load-more" class="load-more" type="button">
-        Load more
-      </button>
-    </div>
-  )}
-
-  <script>
-    const grid = document.querySelector<HTMLUListElement>('.grid');
-    const button = document.querySelector<HTMLButtonElement>('#load-more');
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-    function easeInOutCubic(t: number): number {
-      return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-    }
-
-    // A long, gentle programmatic scroll. Native smooth-scroll is too quick and
-    // jumps to a fixed target; we want to drift continuously as cards appear.
-    function softScrollBy(distance: number, duration: number): Promise<void> {
-      if (prefersReducedMotion || distance <= 0) {
-        window.scrollBy(0, distance);
-        return Promise.resolve();
-      }
-      return new Promise((resolve) => {
-        const startY = window.scrollY;
-        const start = performance.now();
-        function step(now: number) {
-          const t = Math.min(1, (now - start) / duration);
-          window.scrollTo(0, startY + distance * easeInOutCubic(t));
-          if (t < 1) requestAnimationFrame(step);
-          else resolve();
-        }
-        requestAnimationFrame(step);
-      });
-    }
-
-    function wait(ms: number): Promise<void> {
-      return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-
-    if (grid && button) {
-      const batch = Number(grid.dataset.batch ?? '7');
-      let busy = false;
-
-      button.addEventListener('click', async () => {
-        if (busy) return;
-        busy = true;
-        button.disabled = true;
-
-        const hidden = grid.querySelectorAll<HTMLLIElement>('li.hidden');
-        const toReveal = Array.from(hidden).slice(0, batch);
-
-        // Reveal one at a time, with the page drifting smoothly to keep new
-        // cards in view as they slide in.
-        const REVEAL_DURATION = 520;
-        const GAP = 220;
-        const SCROLL_AMOUNT = 110;
-        const SCROLL_DURATION = REVEAL_DURATION + GAP;
-
-        for (let i = 0; i < toReveal.length; i++) {
-          const li = toReveal[i];
-          li.classList.remove('hidden');
-          li.classList.add('revealing');
-          li.addEventListener(
-            'animationend',
-            () => li.classList.remove('revealing'),
-            { once: true }
-          );
-
-          // Start a soft scroll alongside each card (except the first, so the
-          // user sees the initial reveal in place).
-          if (i > 0 && !prefersReducedMotion) {
-            softScrollBy(SCROLL_AMOUNT, SCROLL_DURATION);
-          }
-          await wait(GAP);
-        }
-
-        // Final settle: ensure the button (or the last card) is comfortably
-        // in view.
-        if (!prefersReducedMotion) {
-          const target = button.getBoundingClientRect();
-          const overflow = target.bottom - window.innerHeight + 32;
-          if (overflow > 0) await softScrollBy(overflow, 600);
-        }
-
-        if (grid.querySelectorAll('li.hidden').length === 0) {
-          button.classList.add('fading');
-          button.addEventListener('transitionend', () => button.remove(), { once: true });
-        } else {
-          button.disabled = false;
-        }
-        busy = false;
-      });
-    }
-  </script>
+  </Masonry>
 
   <style>
     .hero {
@@ -216,17 +120,16 @@ const itemList = buildItemList(
       position: relative;
       border-radius: 14px;
       overflow: hidden;
-      border: 1px solid var(--rule);
+      border: 2px solid var(--rule);
       background: var(--bg);
       color: inherit;
       margin-bottom: 2.5rem;
-      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+      transition: box-shadow 0.18s ease, border-color 0.18s ease;
     }
     .hero:hover {
       text-decoration: none;
-      transform: translateY(-2px);
-      border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
-      box-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.28);
+      border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
+      box-shadow: 0 0 32px -4px color-mix(in srgb, var(--accent) 35%, transparent);
     }
     .hero:hover .hero-name { color: var(--accent); }
 
@@ -265,58 +168,19 @@ const itemList = buildItemList(
       line-height: 1.45;
     }
 
-    .grid {
-      column-count: 3;
-      column-gap: 1rem;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-    @media (max-width: 880px) {
-      .grid { column-count: 2; }
-    }
-    @media (max-width: 520px) {
-      .grid { column-count: 1; }
-    }
-
-    .grid > li {
-      break-inside: avoid;
-      display: block;
-      margin: 0 0 1rem;
-    }
-    .grid > li.hidden { display: none; }
-    .grid > li.revealing {
-      animation: tile-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
-      will-change: transform, opacity;
-    }
-    @keyframes tile-in {
-      from {
-        opacity: 0;
-        transform: translateY(22px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .grid > li.revealing { animation: none; }
-    }
-
     .tile {
       display: block;
       border-radius: 8px;
       overflow: hidden;
-      border: 1px solid var(--rule);
+      border: 2px solid var(--rule);
       background: var(--bg);
       color: inherit;
-      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+      transition: box-shadow 0.18s ease, border-color 0.18s ease;
     }
     .tile:hover {
       text-decoration: none;
-      transform: translateY(-2px);
-      border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
-      box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.18);
+      border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
+      box-shadow: 0 0 20px -4px color-mix(in srgb, var(--accent) 30%, transparent);
     }
     .tile:hover .name { color: var(--accent); }
 
@@ -332,6 +196,7 @@ const itemList = buildItemList(
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
+      background: var(--card-fill);
     }
     .name {
       font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
@@ -361,38 +226,5 @@ const itemList = buildItemList(
       font-size: 1rem;
     }
 
-    .more-wrap {
-      display: flex;
-      justify-content: center;
-      margin: 2rem 0 0.5rem;
-    }
-    .load-more {
-      font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
-      font-size: 0.95rem;
-      font-weight: 600;
-      letter-spacing: 0.01em;
-      color: var(--fg);
-      background: var(--bg);
-      border: 1px solid var(--rule);
-      border-radius: 999px;
-      padding: 0.7rem 1.6rem;
-      cursor: pointer;
-      transition:
-        border-color 0.18s ease,
-        color 0.18s ease,
-        transform 0.18s ease,
-        opacity 0.4s ease;
-    }
-    .load-more:hover {
-      color: var(--accent);
-      border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
-      transform: translateY(-1px);
-    }
-    .load-more.fading {
-      opacity: 0;
-      transform: translateY(4px);
-      pointer-events: none;
-    }
-
   </style>
 </BaseLayout>

src/pages/posts/[...slug].astro

@@ -19,12 +19,6 @@ export async function getStaticPaths() {
 const { post } = Astro.props;
 const { Content } = await render(post);
 
-const fmt = new Intl.DateTimeFormat('en-US', {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-});
-
 const description = post.data.description ?? `Notes from Unique: ${post.data.title}.`;
 const ogImage = buildOgImage(undefined, 'posts', `${post.data.title} cover image`);
 
@@ -52,6 +46,9 @@ const breadcrumbs = buildBreadcrumbs([
 <BaseLayout
   title={post.data.title}
   description={description}
+  subheader={post.data.title}
+  subheaderVariant="headline"
+  lastUpdated={post.data.date}
   ogType="article"
   ogImage={ogImage}
   publishedTime={post.data.date}
@@ -59,47 +56,30 @@ const breadcrumbs = buildBreadcrumbs([
   jsonLd={[blogPosting, breadcrumbs]}
 >
   <article>
-    <header class="post-header">
-      <h1>{post.data.title}</h1>
-      <p class="meta">
-        <time datetime={post.data.date.toISOString()}>
-          {fmt.format(post.data.date)}
-        </time>
-        <span class="dot">·</span>
-        <a href={`/categories/${post.data.category}/`} class="category">
-          {post.data.category}
-        </a>
-      </p>
-    </header>
-
     <div class="body">
       <Content />
     </div>
 
-    {
-      post.data.tags.length > 0 && (
-        <footer class="tags">
+    <footer class="post-footer">
+      {post.data.tags.length > 0 && (
+        <div class="tags">
           {post.data.tags.map((tag) => (
             <a href={`/tags/${tag}/`} class="tag">#{tag}</a>
           ))}
-        </footer>
-      )
-    }
+        </div>
+      )}
+      <p class="filed-under">
+        Filed under{' '}
+        <a href={`/categories/${post.data.category}/`} class="category">
+          {post.data.category}
+        </a>
+      </p>
+    </footer>
 
     <p class="back"><a href="/">← back</a></p>
   </article>
 
   <style>
-    .post-header {
-      margin-bottom: 2rem;
-      padding-bottom: 1rem;
-      border-bottom: 1px solid var(--rule);
-    }
-    h1 { margin: 0 0 0.5rem; }
-    .meta { margin: 0; color: var(--muted); font-size: 0.9rem; }
-    .meta .dot { margin: 0 0.4rem; }
-    .meta .category { color: var(--muted); }
-    .meta .category:hover { color: var(--accent); }
     .body :global(p) { margin: 0 0 1rem; }
     .body :global(h2) { font-size: 1.3rem; margin: 2rem 0 0.75rem; }
     .body :global(h3) { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
@@ -115,16 +95,28 @@ const breadcrumbs = buildBreadcrumbs([
       margin: 0 0 1.75rem;
     }
     .body :global(blockquote p) { margin: 0; }
-    .tags {
+    .post-footer {
       margin-top: 2.5rem;
       padding-top: 1rem;
       border-top: 1px solid var(--rule);
+    }
+    .tags {
       display: flex;
       gap: 0.75rem;
       flex-wrap: wrap;
     }
     .tag { font-size: 0.85rem; color: var(--muted); }
     .tag:hover { color: var(--accent); }
+    .filed-under {
+      margin: 1rem 0 0;
+      font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+      font-size: 0.72rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--muted);
+    }
+    .filed-under .category { color: var(--muted); }
+    .filed-under .category:hover { color: var(--accent); }
     .back { margin-top: 2rem; font-size: 0.9rem; }
   </style>
 </BaseLayout>

src/pages/settings.astro

@@ -0,0 +1,117 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+---
+
+<BaseLayout
+  title="Settings"
+  description="Presentation options for Unique — color theme and other display preferences."
+  subheader="Presentation options."
+  noindex
+>
+  <article>
+    <section class="setting">
+      <h2>Color theme</h2>
+      <p class="hint">
+        Auto follows your system preference. Light or dark overrides it on this
+        device.
+      </p>
+      <div class="theme-toggle" role="group" aria-label="Color theme">
+        <button type="button" data-theme-set="auto">Auto</button>
+        <button type="button" data-theme-set="light">Light</button>
+        <button type="button" data-theme-set="dark">Dark</button>
+      </div>
+    </section>
+
+    <p class="more">More presentation options will land here over time.</p>
+  </article>
+
+  <script>
+    type Theme = 'auto' | 'light' | 'dark';
+    const buttons = document.querySelectorAll<HTMLButtonElement>('[data-theme-set]');
+
+    function currentTheme(): Theme {
+      const t = document.documentElement.getAttribute('data-theme');
+      return t === 'light' || t === 'dark' ? t : 'auto';
+    }
+
+    function setActive(value: Theme) {
+      for (const b of buttons) {
+        if (b.dataset.themeSet === value) b.setAttribute('aria-current', 'true');
+        else b.removeAttribute('aria-current');
+      }
+    }
+
+    function applyTheme(value: Theme) {
+      if (value === 'auto') {
+        document.documentElement.removeAttribute('data-theme');
+        try { localStorage.removeItem('theme'); } catch (e) {}
+      } else {
+        document.documentElement.setAttribute('data-theme', value);
+        try { localStorage.setItem('theme', value); } catch (e) {}
+      }
+      setActive(value);
+    }
+
+    for (const b of buttons) {
+      b.addEventListener('click', () => {
+        const v = b.dataset.themeSet;
+        if (v === 'auto' || v === 'light' || v === 'dark') applyTheme(v);
+      });
+    }
+
+    setActive(currentTheme());
+  </script>
+
+  <style>
+    .setting {
+      padding: 1.5rem 0;
+      border-bottom: 1px solid var(--rule);
+    }
+    .setting:first-child { padding-top: 0; }
+    .setting h2 {
+      margin: 0 0 0.35rem;
+      font-size: 1.05rem;
+    }
+    .hint {
+      margin: 0 0 0.85rem;
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+
+    .theme-toggle {
+      display: inline-flex;
+      gap: 0;
+      border: 1px solid var(--rule);
+      border-radius: 999px;
+      overflow: hidden;
+    }
+    .theme-toggle button {
+      font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
+      font-size: 0.85rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      background: none;
+      border: 0;
+      padding: 0.45rem 1rem;
+      margin: 0;
+      color: var(--muted);
+      cursor: pointer;
+      transition: background 0.18s ease, color 0.18s ease;
+    }
+    .theme-toggle button + button {
+      border-left: 1px solid var(--rule);
+    }
+    .theme-toggle button:hover { color: var(--accent); }
+    .theme-toggle button[aria-current="true"] {
+      background: var(--fg);
+      color: var(--bg);
+    }
+
+    .more {
+      margin-top: 2rem;
+      color: var(--muted);
+      font-style: italic;
+      font-size: 0.9rem;
+    }
+  </style>
+</BaseLayout>

src/pages/sources.astro

@@ -1,7 +1,9 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+import Masonry from '../components/Masonry.astro';
 import sourcesData from '../../sources.json';
 import { getAllFinds } from '../lib/find-items';
+import { sourceSlug } from '../lib/sources';
 import {
   buildOgImage,
   buildBreadcrumbs,
@@ -83,12 +85,12 @@ const breadcrumbs = buildBreadcrumbs([
   ogImage={ogImage}
   jsonLd={[collectionPage, itemList, breadcrumbs]}
 >
-  <ul class="grid">
+  <Masonry>
     {
       sources.map((source) => {
         const recent = (findsBySource.get(source.name) ?? []).slice(0, 5);
         return (
-          <li>
+          <article id={sourceSlug(source.name)} class="source-item">
             <div class="card">
               <a href={source.url} class="head-link" target="_blank" rel="noopener">
                 <div class="head">
@@ -119,29 +121,21 @@ const breadcrumbs = buildBreadcrumbs([
                 </div>
               )}
             </div>
-          </li>
+          </article>
         );
       })
     }
-  </ul>
+  </Masonry>
 
   <p class="back"><a href="/">← back</a></p>
 
   <style>
-    .grid {
-      column-count: 3;
-      column-gap: 1rem;
-      list-style: none;
-      margin: 0;
-      padding: 0;
+    .source-item {
+      scroll-margin-top: 1rem;
     }
-    @media (max-width: 880px) { .grid { column-count: 2; } }
-    @media (max-width: 520px) { .grid { column-count: 1; } }
-
-    .grid > li {
-      break-inside: avoid;
-      display: block;
-      margin: 0 0 1rem;
+    .source-item:target .card {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
     }
 
     .card {
@@ -164,10 +158,11 @@ const breadcrumbs = buildBreadcrumbs([
 
     .head {
       display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 0.6rem;
+      flex-direction: column;
+      gap: 0.15rem;
       margin-bottom: 0.45rem;
+      min-width: 0;
+      overflow: hidden;
     }
     .name {
       font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
@@ -178,10 +173,14 @@ const breadcrumbs = buildBreadcrumbs([
       transition: color 0.18s ease;
     }
     .host {
+      display: block;
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: 0.72rem;
       color: var(--muted);
-      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
     }
 
     .notes {