RC: (update) layout of blog list page

src/layouts/PostLayout.astro

@@ -29,7 +29,7 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
       <div class="post-meta">
         <time class="font-mono text-muted" datetime={pubDate.toISOString()}>{formatted}</time>
         <div class="post-tags">
-          {tags.map(tag => <span class="tag">{tag}</span>)}
+          {tags.map(tag => <a href={`/tags/${tag}`} class="tag">{tag}</a>)}
         </div>
       </div>
     </div>
@@ -51,7 +51,7 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
           <div class="card sidebar-card" style="margin-top:1rem">
             <p class="font-display" style="font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Tags</p>
             <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
-              {tags.map(tag => <span class="tag">{tag}</span>)}
+              {tags.map(tag => <a href={`/tags/${tag}`} class="tag">{tag}</a>)}
             </div>
           </div>
         )}
@@ -84,9 +84,13 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
 </script>
 
 <style>
-  .post-wrapper { padding-top: 8rem; padding-bottom: 4rem; }
+  .post-wrapper { padding-top: 8rem; padding-bottom: 2rem; }
 
-  .post-hero { max-width: 900px; }
+  /* Hero is explicitly left-aligned — Rajdhani can inherit centre from somewhere */
+  .post-hero {
+    max-width: 800px;
+    text-align: left;
+  }
 
   .day-badge {
     font-size: 0.85rem;
@@ -95,12 +99,16 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
     letter-spacing: 0.08em;
   }
 
-  .post-title { margin-bottom: 1rem; }
+  .post-title {
+    margin-bottom: 1rem;
+    text-align: left;
+  }
 
   .post-description {
     font-size: 1.15rem;
     max-width: 65ch;
     margin-bottom: 1.5rem;
+    text-align: left;
   }
 
   .post-meta {
@@ -119,10 +127,30 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
     align-items: start;
   }
 
+  /* Sidebar card — sticky */
   .sidebar-card { position: sticky; top: 6rem; }
 
+  /* TOC heading labels — was almost same colour as bg */
+  .sidebar-card p[style] {
+    color: var(--text-secondary) !important;
+  }
+
+  /* TOC links — clearly visible */
+  #toc-placeholder a {
+    color: var(--text-secondary) !important;
+  }
+  #toc-placeholder a:hover {
+    color: var(--petronas-teal) !important;
+  }
+
+  /* Sidebar section labels */
+  .sidebar-card .font-display {
+    color: var(--text-secondary) !important;
+    letter-spacing: 0.12em;
+  }
+
   @media (max-width: 900px) {
     .post-body { grid-template-columns: 1fr; }
     .post-sidebar { display: none; }
   }
-</style>
+</style>

src/pages/blog/index.astro

@@ -20,29 +20,39 @@ const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
     </div>
 
     <div class="blog-layout container">
-      <!-- Post list -->
       <div class="post-list">
         {allPosts.map((post, i) => (
           <article class="post-row card">
             <a href={`/blog/${post.id}`} class="post-row-link">
-              <div class="post-row-left">
+
-                {post.data.day && (
+              {/* Top row: entry badge + title stacked over description */}
-                  <div class="font-mono" style="font-size:0.7rem;color:var(--petronas-teal);letter-spacing:0.1em;margin-bottom:0.3rem">
+              <div class="post-row-top">
-                    entry_{String(post.data.day).padStart(3,'0')}
+                <div class="post-row-left">
-                  </div>
+                  {post.data.day && (
-                )}
+                    <div class="post-row-day font-mono">
-                <h2 class="post-row-title">{post.data.title}</h2>
+                      entry_{String(post.data.day).padStart(3,'0')}
-                <p class="text-muted post-row-desc">{post.data.description}</p>
+                    </div>
-                <div class="post-row-meta">
+                  )}
-                  <time class="font-mono text-muted" style="font-size:0.72rem">
+                  <h2 class="post-row-title">{post.data.title}</h2>
-                    {post.data.pubDate.toLocaleDateString('en-GB', {day:'numeric',month:'short',year:'numeric'})}
-                  </time>
-                  <div style="display:flex;gap:0.35rem;flex-wrap:wrap">
-                    {(post.data.tags ?? []).map((t: string) => <span class="tag">{t}</span>)}
-                  </div>
                 </div>
+                <p class="text-muted post-row-desc">{post.data.description}</p>
               </div>
-              <div class="post-row-arrow text-accent font-display">→</div>
+
+              {/* Bottom row: date + tags inline + MORE button */}
+              <div class="post-row-meta">
+                <time class="font-mono text-muted post-row-date">
+                  {post.data.pubDate.toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'})}
+                </time>
+                <div class="post-row-tags">
+                  {(post.data.tags ?? []).map((t: string) => (
+                    <a href={`/tags/${t}`} class="tag" onclick="event.stopPropagation()">{t}</a>
+                  ))}
+                </div>
+                <a href={`/blog/${post.id}`} >
+                <div class="post-row-more font-mono">MORE &rarr;</div>
+                </a>
+              </div>
+
             </a>
           </article>
         ))}
@@ -51,17 +61,23 @@ const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
       <!-- Sidebar -->
       <aside class="blog-sidebar">
         <div class="card" style="position:sticky;top:5.5rem">
-          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Tags</p>
-          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
-            {allTags.map(t => <span class="tag">{t}</span>)}
-          </div>
-          <hr class="glow-divider" style="margin:1.5rem 0" />
           <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Navigate</p>
           <div style="display:flex;flex-direction:column;gap:0.35rem">
             <a href="/" class="text-muted font-mono" style="font-size:0.8rem">← Home</a>
             <a href="/homelab" class="text-muted font-mono" style="font-size:0.8rem">Homelab status</a>
             <a href="/hardware" class="text-muted font-mono" style="font-size:0.8rem">Hardware list</a>
           </div>
+          <hr class="glow-divider" style="margin:1.5rem 0" />
+          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Tags</p>
+
+          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
+            {allTags.map(t => <a href={`/tags/${t}`} class="tag">{t}</a>)}
+          </div>
+          <hr class="glow-divider" style="margin:1.5rem 0" />
+          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Posts</p>
+          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
+            {allPosts.map(t => <a href={`/blog/${t}`} class="blog">{t}</a>)}
+          </div>
         </div>
       </aside>
     </div>
@@ -86,46 +102,101 @@ const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
 
   .post-row-link {
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: 1.5rem;
+    gap: 1rem;
-    padding: 1.5rem;
+    padding: 1.25rem 1.5rem;
     color: inherit;
-    transition: background var(--transition-fast);
   }
 
-  .post-row:hover .post-row-title { color: var(--petronas-teal); }
+  /* * FIXED: Top section now stacks the title and description in 2 rows 
+   */
+  .post-row-top {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 
-  .post-row-left { flex: 1; }
+  .post-row-left { display: flex; flex-direction: column; gap: 0.25rem; }
+
+  .post-row-day {
+    font-size: 0.68rem;
+    color: var(--petronas-teal);
+    letter-spacing: 0.1em;
+    opacity: 0.8;
+  }
 
   .post-row-title {
-    font-size: 1.05rem;
+    font-size: 1rem;
-    margin-bottom: 0.4rem;
+    line-height: 1.35;
     transition: color var(--transition-fast);
   }
+  .post-row:hover .post-row-title { color: var(--petronas-teal); }
 
   .post-row-desc {
     font-size: 0.85rem;
     line-height: 1.55;
-    margin-bottom: 0.75rem;
   }
 
+  /* Bottom section: date + tags + button all on one line */
   .post-row-meta {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    border-top: 1px solid var(--border-subtle);
+    padding-top: 1rem;
   }
 
-  .post-row-arrow {
+  .post-row-date {
-    font-size: 1.5rem;
+    font-size: 0.7rem;
-    opacity: 0.3;
+    white-space: nowrap;
-    transition: opacity var(--transition-fast), transform var(--transition-fast);
     flex-shrink: 0;
   }
-  .post-row:hover .post-row-arrow { opacity: 1; transform: translateX(4px); }
+
+  .post-row-tags {
+    display: flex;
+    gap: 0.35rem;
+    flex-wrap: wrap;
+    flex: 1;
+  }
+
+  /* * FIXED: Force the tag contents to center perfectly 
+   * (You can move this to your global CSS file if `.tag` is shared globally)
+   */
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    padding: 0.3rem 0.65rem;
+    border-radius: 9999px;
+  }
+
+  /* * FIXED: Replaced arrow with a styled 'MORE' button
+   */
+  .post-row-more {
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+    padding: 0.35rem 0.6rem;
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    color: var(--text-muted);
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+    margin-left: auto;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+  }
+  .post-row:hover .post-row-more { 
+    border-color: var(--petronas-teal);
+    color: var(--petronas-teal);
+  }
 
   @media (max-width: 768px) {
-    .blog-layout { grid-template-columns: 1fr; }
+    .blog-layout  { grid-template-columns: 1fr; }
     .blog-sidebar { display: none; }
+    .post-row-meta { flex-wrap: wrap; }
+    .post-row-more { margin-left: 0; } /* Optional: push button to left on mobile if wrapped */
   }
-</style>
+</style>