Refine changelog page layout and release entries

- Reduce spacing and typography across release detail pages
- Replace changelog cards with streamlined bordered entries and inline navigation arrows

Author: badcuban

apps/marketing/src/pages/changelog/[version].astro

@@ -88,7 +88,7 @@ const structuredData = {
 
 <style>
   .release-detail {
-    padding: 64px 0 112px;
+    padding: 48px 0 96px;
   }
 
   .release-wrap {
@@ -108,7 +108,7 @@ const structuredData = {
   }
 
   .release-header {
-    padding: 56px 0 64px;
+    padding: 32px 0 36px;
     border-bottom: 1px solid var(--border);
   }
 
@@ -126,8 +126,8 @@ const structuredData = {
 
   .release-header h1 {
     max-width: 780px;
-    margin: 20px 0;
-    font-size: clamp(38px, 6vw, 64px);
+    margin: 14px 0 12px;
+    font-size: clamp(32px, 5vw, 48px);
     text-wrap: balance;
   }
 
@@ -141,14 +141,13 @@ const structuredData = {
 
   .highlights {
     display: grid;
-    padding: 28px 0;
   }
 
   .highlight {
     display: grid;
     grid-template-columns: 48px minmax(0, 1fr);
     gap: 18px;
-    padding: 32px 0;
+    padding: 22px 0;
     border-bottom: 1px solid var(--border);
   }
 
@@ -160,29 +159,25 @@ const structuredData = {
   }
 
   .highlight h2 {
-    margin-bottom: 10px;
-    font-size: 25px;
+    margin-bottom: 6px;
+    font-size: 22px;
     letter-spacing: -0.02em;
   }
 
   .highlight p {
     max-width: 68ch;
     color: var(--fg-muted);
-    line-height: 1.7;
+    line-height: 1.65;
   }
 
   .also-improved {
-    margin-top: 28px;
-    padding: 30px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
+    padding: 24px 0 0;
   }
 
   .also-improved ul {
     display: grid;
-    gap: 12px;
-    margin-top: 20px;
+    gap: 8px;
+    margin-top: 14px;
     padding-left: 20px;
     color: var(--fg-muted);
     line-height: 1.6;
@@ -197,8 +192,7 @@ const structuredData = {
     flex-wrap: wrap;
     align-items: center;
     gap: 20px 28px;
-    margin-top: 48px;
-    padding-top: 32px;
+    margin-top: 36px;
   }
 
   .release-actions a {
@@ -225,21 +219,17 @@ const structuredData = {
 
   @media (max-width: 620px) {
     .release-detail {
-      padding: 44px 0 88px;
+      padding: 36px 0 80px;
     }
 
     .release-header {
-      padding: 42px 0 48px;
+      padding: 26px 0 30px;
     }
 
     .highlight {
       grid-template-columns: 34px minmax(0, 1fr);
       gap: 10px;
-      padding: 28px 0;
-    }
-
-    .also-improved {
-      padding: 24px 22px;
+      padding: 20px 0;
     }
   }
 </style>

apps/marketing/src/pages/changelog/index.astro

@@ -30,17 +30,18 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
       <div class="release-list">
         {
           entries.map((entry) => (
-            <article class="release-card">
+            <article class="release-entry">
               <a href={changelogEntryPath(entry)}>
                 <div class="release-meta">
                   <span>v{entry.data.version}</span>
                   <time datetime={entry.data.date.toISOString()}>
                     {formatReleaseDate(entry.data.date)}
                   </time>
                 </div>
-                <h2>{entry.data.title}</h2>
+                <h2>
+                  {entry.data.title} <span class="release-arrow" aria-hidden="true">→</span>
+                </h2>
                 <p>{entry.data.summary}</p>
-                <span class="release-link">Read release notes <span aria-hidden="true">→</span></span>
               </a>
             </article>
           ))
@@ -52,7 +53,7 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
 
 <style>
   .changelog-index {
-    padding: 88px 0 112px;
+    padding: 72px 0 96px;
   }
 
   .changelog-wrap {
@@ -61,7 +62,7 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
 
   .changelog-header {
     max-width: 680px;
-    margin-bottom: 56px;
+    margin-bottom: 36px;
   }
 
   .changelog-header h1 {
@@ -76,34 +77,23 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
     text-wrap: pretty;
   }
 
-  .release-list {
-    display: grid;
-    gap: 16px;
-  }
-
-  .release-card {
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
-    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
+  .release-entry {
+    border-top: 1px solid var(--border);
   }
 
-  .release-card:hover {
-    border-color: var(--border-strong);
-    background: var(--surface-hover);
-    transform: translateY(-1px);
+  .release-entry:last-child {
+    border-bottom: 1px solid var(--border);
   }
 
-  .release-card a {
+  .release-entry a {
     display: block;
-    padding: 28px 30px;
+    padding: 24px 0;
   }
 
   .release-meta {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 12px;
+    gap: 16px;
     color: var(--fg-dim);
     font-family: var(--font-mono);
     font-size: 12px;
@@ -113,39 +103,39 @@ const entries = sortChangelogEntries(await getCollection("changelog"));
     color: var(--accent-bright);
   }
 
-  .release-card h2 {
-    margin: 18px 0 10px;
-    font-size: clamp(23px, 3vw, 30px);
-    line-height: 1.15;
-    letter-spacing: -0.025em;
+  .release-entry h2 {
+    margin: 10px 0 6px;
+    font-size: clamp(20px, 2.6vw, 24px);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
   }
 
-  .release-card p {
-    max-width: 68ch;
-    color: var(--fg-muted);
-    line-height: 1.65;
+  .release-arrow {
+    color: var(--fg-dim);
+    transition: color 0.2s ease, transform 0.2s ease;
+  }
+
+  .release-entry a:hover .release-arrow {
+    color: var(--accent-bright);
   }
 
-  .release-link {
-    display: inline-flex;
-    gap: 6px;
-    margin-top: 22px;
-    color: var(--fg);
-    font-size: 14px;
-    font-weight: 600;
+  .release-entry p {
+    max-width: 68ch;
+    color: var(--fg-muted);
+    line-height: 1.6;
   }
 
   @media (max-width: 620px) {
     .changelog-index {
-      padding: 64px 0 88px;
+      padding: 56px 0 80px;
     }
 
     .changelog-header {
-      margin-bottom: 38px;
+      margin-bottom: 28px;
     }
 
-    .release-card a {
-      padding: 24px 22px;
+    .release-entry a {
+      padding: 20px 0;
     }
   }
 </style>