From 4a18859a3c70beb2fd96b8cdc61c753868a141ac Mon Sep 17 00:00:00 2001
From: Dinesh <13635627+HumbleBee14@users.noreply.github.com>
Date: Sat, 8 Aug 2026 23:00:10 -0700
Subject: [PATCH 1/2] Revert homepage to card layout

The editorial index duplicated the topic row list below and wasted
vertical space. Keeps the dark-mode elevation fix (already on main).
---
 src/pages/index.astro | 212 ++++++------------------------------------
 1 file changed, 30 insertions(+), 182 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 54f6723..4583c05 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -44,10 +44,6 @@ const featuredTools = pickCoreTools(allTools);
   <!-- HERO -->
   <section class="hero">
     <div class="container">
-      <div class="masthead-bar">
-        <span class="masthead-name">ML Systems</span>
-        <span class="masthead-meta">An open archive · Est. 2026</span>
-      </div>
       <div class="hero-grid">
         <div>
           <h1 class="hero-h1">
@@ -101,29 +97,23 @@ const featuredTools = pickCoreTools(allTools);
               All articles →
             </a>
           </div>
-          <ol class="idx-list">
-            {featured.map((p, i) => (
-              <li class="idx-row">
-                <a class="idx-link" href={`/blog/${p.id}`}>
-                  <span class="idx-num">{String(i + 1).padStart(2, '0')}</span>
-                  <div class="idx-main">
-                    <h3 class="idx-title">{p.data.title}</h3>
-                    <p class="idx-sum">{p.data.summary}</p>
-                    <div class="idx-meta">
-                      {p.data.topicId && <span class="idx-topic">{topicName(p.data.topicId)}</span>}
-                      <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
-                      <span>
-                        {formatDate(p.data.date)} · {p.data.readMin} min
-                      </span>
-                    </div>
-                  </div>
-                  <span class="idx-arrow" aria-hidden="true">
-                    →
+          <div class="latest-grid">
+            {featured.map((p) => (
+              <a class="article-card" href={`/blog/${p.id}`}>
+                <div class="article-meta">
+                  {p.data.topicId && <span class="chip chip--sm">{topicName(p.data.topicId)}</span>}
+                </div>
+                <h3 class="article-title">{p.data.title}</h3>
+                <p class="article-summary">{p.data.summary}</p>
+                <div class="article-foot">
+                  <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
+                  <span>
+                    {formatDate(p.data.date)} · {p.data.readMin} min
                   </span>
-                </a>
-              </li>
+                </div>
+              </a>
             ))}
-          </ol>
+          </div>
         </div>
       </section>
     )
@@ -142,29 +132,23 @@ const featuredTools = pickCoreTools(allTools);
               All articles →
             </a>
           </div>
-          <ol class="idx-list">
-            {recent.map((p, i) => (
-              <li class="idx-row">
-                <a class="idx-link" href={`/blog/${p.id}`}>
-                  <span class="idx-num">{String(i + 1).padStart(2, '0')}</span>
-                  <div class="idx-main">
-                    <h3 class="idx-title">{p.data.title}</h3>
-                    <p class="idx-sum">{p.data.summary}</p>
-                    <div class="idx-meta">
-                      {p.data.topicId && <span class="idx-topic">{topicName(p.data.topicId)}</span>}
-                      <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
-                      <span>
-                        {formatDate(p.data.date)} · {p.data.readMin} min
-                      </span>
-                    </div>
-                  </div>
-                  <span class="idx-arrow" aria-hidden="true">
-                    →
+          <div class="latest-grid">
+            {recent.map((p) => (
+              <a class="article-card" href={`/blog/${p.id}`}>
+                <div class="article-meta">
+                  {p.data.topicId && <span class="chip chip--sm">{topicName(p.data.topicId)}</span>}
+                </div>
+                <h3 class="article-title">{p.data.title}</h3>
+                <p class="article-summary">{p.data.summary}</p>
+                <div class="article-foot">
+                  <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
+                  <span>
+                    {formatDate(p.data.date)} · {p.data.readMin} min
                   </span>
-                </a>
-              </li>
+                </div>
+              </a>
             ))}
-          </ol>
+          </div>
         </div>
       </section>
     )
@@ -370,142 +354,6 @@ const featuredTools = pickCoreTools(allTools);
 </BaseLayout>
 
 <style>
-  /* Zine masthead — a running rule with mono wordmark + tagline at the ends */
-  .masthead-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: 16px;
-    padding-bottom: 14px;
-    margin-bottom: 40px;
-    border-bottom: 1px solid var(--ink);
-    font-family: var(--font-mono);
-    font-size: 12px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-  }
-  .masthead-name {
-    font-weight: 600;
-    color: var(--ink);
-  }
-  .masthead-meta {
-    color: var(--ink-3);
-  }
-  @media (max-width: 560px) {
-    .masthead-meta {
-      display: none;
-    }
-  }
-
-  /* Editorial index — numbered, ruled list instead of a card grid */
-  .idx-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    border-top: 1px solid var(--line);
-  }
-  .idx-row {
-    border-bottom: 1px solid var(--line);
-  }
-  .idx-link {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: baseline;
-    column-gap: 28px;
-    padding: 26px 8px;
-    color: inherit;
-    text-decoration: none;
-    transition:
-      background 0.15s ease,
-      padding 0.18s ease;
-  }
-  .idx-link:hover {
-    background: var(--accent-soft);
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-  .idx-num {
-    font-family: var(--font-mono);
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--ink-4);
-    letter-spacing: 0.04em;
-    padding-top: 6px;
-    transition: color 0.15s ease;
-  }
-  .idx-link:hover .idx-num {
-    color: var(--accent);
-  }
-  .idx-main {
-    min-width: 0;
-  }
-  .idx-title {
-    font-family: var(--font-display);
-    font-size: clamp(24px, 3.2vw, 34px);
-    font-weight: 400;
-    line-height: 1.12;
-    letter-spacing: -0.015em;
-    color: var(--ink);
-    margin: 0 0 10px;
-    transition: color 0.15s ease;
-  }
-  .idx-link:hover .idx-title {
-    color: var(--accent);
-  }
-  .idx-sum {
-    font-family: var(--font-read);
-    font-size: 16px;
-    line-height: 1.55;
-    color: var(--ink-2);
-    margin: 0 0 14px;
-    max-width: 60ch;
-  }
-  .idx-meta {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 14px;
-    font-family: var(--font-mono);
-    font-size: 11.5px;
-    letter-spacing: 0.03em;
-    color: var(--ink-3);
-    text-transform: uppercase;
-  }
-  .idx-topic {
-    color: var(--accent);
-    font-weight: 500;
-  }
-  .idx-arrow {
-    font-family: var(--font-mono);
-    font-size: 18px;
-    color: var(--ink-4);
-    align-self: center;
-    opacity: 0;
-    transform: translateX(-6px);
-    transition:
-      opacity 0.18s ease,
-      transform 0.18s ease,
-      color 0.15s ease;
-  }
-  .idx-link:hover .idx-arrow {
-    opacity: 1;
-    transform: none;
-    color: var(--accent);
-  }
-  @media (max-width: 640px) {
-    .idx-link {
-      grid-template-columns: auto 1fr;
-      column-gap: 16px;
-      padding: 22px 4px;
-    }
-    .idx-arrow {
-      display: none;
-    }
-    .idx-title {
-      margin-bottom: 8px;
-    }
-  }
-
   .kernel-toggle {
     background: none;
     border: none;

From bc542d473b924dbbc19509157944935491630b58 Mon Sep 17 00:00:00 2001
From: Dinesh <13635627+HumbleBee14@users.noreply.github.com>
Date: Sat, 8 Aug 2026 23:14:09 -0700
Subject: [PATCH 2/2] Switch to modern typeset (confident sans display,
 site-wide)

Flip typeset editorial -> modern: swaps Playfair for tight Hanken
Grotesk display type across the site for a modern product-editorial
feel. Warm palette unchanged.
---
 src/lib/site.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/site.ts b/src/lib/site.ts
index d5d664c..674fd13 100644
--- a/src/lib/site.ts
+++ b/src/lib/site.ts
@@ -52,7 +52,7 @@ export const SITE = {
 export const APPEARANCE = {
   theme: 'light',
   accent: 'oxide',
-  typeset: 'editorial',
+  typeset: 'modern',
   background: 'plain',
   density: 'comfortable',
 } as const;