checkpoint: blog rethemed to crush (teal logo, white bg, teal accents)

src/pages/blog/index.astro

@@ -1,15 +1,19 @@
 ---
-import Base from '../../layouts/Base.astro';
+import CrushBase from '../../layouts/CrushBase.astro';
-import GlitchBard from '../../components/GlitchBard.astro';
 import posts from '../../data/posts.json';
 ---
 
-<Base title="dangrubb.net/blog">
+<CrushBase title="dangrubb.net/blog">
   <div class="page">
-    <GlitchBard />
+    <header class="blog-header">
-
+      <div class="header-logo">
-    <p class="page-title">dangrubb.net/blog</p>
+        <img src="/src/img/DanGrubbLogoTeal.png" alt="dangrubb" class="logo-img">
-    <p class="back-link"><a href="/">← back to home</a></p>
+      </div>
+      <p class="page-title">
+        <span class="title-name">dangrubb</span><span class="title-dot">.</span><span class="title-tld">net</span><span class="title-slash">/</span><span class="title-page">blog</span>
+      </p>
+      <p class="back-link"><a href="/">← home</a></p>
+    </header>
 
     <div class="blogs-container">
       {posts.map(post => (
@@ -25,66 +29,111 @@ import posts from '../../data/posts.json';
         </article>
       ))}
     </div>
+
+    <footer class="blog-footer">
+      <a href="/">← home</a>
+    </footer>
   </div>
-</Base>
+</CrushBase>
 
 <style>
-  @import '../../styles/bard.css';
-
   .page {
-    padding: 20px 20px 40px;
     min-height: 100vh;
-    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background: var(--crush-white);
   }
 
-  .page-title, .back-link {
+  .blog-header {
-    margin: 20px auto 0;
-    max-width: 400px;
     text-align: center;
-    line-height: 1.3;
+    padding: 30px 20px 20px;
-    font-size: 0.875rem;
+    background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
+    border-bottom: 3px solid var(--crush-teal);
   }
 
+  .header-logo {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12px;
+  }
+
+  .logo-img {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+  }
+
+  .page-title {
+    font-family: 'Alfa Slab One', 'Georgia', serif;
+    font-size: clamp(1.8rem, 5vw, 3rem);
+    letter-spacing: -1px;
+    line-height: 1;
+    margin-bottom: 8px;
+  }
+
+  .title-name { color: var(--crush-teal); }
+  .title-dot { color: var(--crush-teal-light); }
+  .title-tld { color: var(--crush-teal-dark); }
+  .title-slash { color: var(--crush-teal); }
+  .title-page { color: var(--crush-teal-dark); font-size: 0.7em; }
+
+  .back-link {
+    font-size: 0.875rem;
+    color: var(--crush-teal);
+    margin-top: 4px;
+  }
+  .back-link a {
+    color: var(--crush-teal);
+    opacity: 0.7;
+  }
+  .back-link a:hover { opacity: 1; }
+
   .blogs-container {
-    margin: 40px auto 0;
+    margin: 30px auto;
-    max-width: 65em;
+    max-width: 700px;
     width: 100%;
+    padding: 0 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
   .blog-post {
-    margin: 40px auto;
+    margin-bottom: 40px;
-    padding: 20px;
+    padding: 24px;
-    border: 1px solid rgba(155, 169, 180, 0.2);
+    border: 1px solid rgba(0, 139, 139, 0.12);
-    border-radius: 4px;
+    border-radius: 6px;
-    background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
+    background: linear-gradient(135deg, #f0faf9, #f8f9fa);
-    scroll-margin-top: 100px;
     max-width: 700px;
     width: 100%;
   }
+
   .blog-post-title {
-    color: #ffff00;
+    color: var(--crush-teal);
-    font-weight: bold;
+    font-weight: 700;
-    font-size: 1.8rem;
+    font-size: 1.6rem;
     text-align: center;
+    margin-bottom: 6px;
   }
+
   .blog-post-date {
-    color: #aa95bd;
+    color: var(--crush-teal-light);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     text-align: center;
     margin-bottom: 20px;
+    opacity: 0.7;
   }
+
   .blog-post-content {
-    color: #9d9aa4;
     font-size: 0.95rem;
     line-height: 1.6;
+    color: #333;
     text-align: center;
   }
   .blog-post-content :global(p) {
     margin: 0 0 15px;
   }
+
   .blog-post-image {
     display: flex;
     justify-content: center;
@@ -95,13 +144,26 @@ import posts from '../../data/posts.json';
     height: auto;
     max-height: 60vh;
     border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 4px 12px rgba(0, 102, 102, 0.15);
+  }
+
+  .blog-footer {
+    text-align: center;
+    padding: 30px 20px 40px;
+    border-top: 3px solid var(--crush-teal);
+    background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
+    margin-top: auto;
+  }
+  .blog-footer a {
+    color: var(--crush-teal);
+    font-weight: 600;
   }
 
   @media (max-width: 768px) {
-    .page { padding: 20px 10px 40px; }
+    .blog-header { padding: 20px 15px 15px; }
-    .page-title, .back-link { font-size: 0.8rem; max-width: 320px; }
+    .logo-img { width: 45px; height: 45px; }
-    .blog-post { padding: 15px; margin: 20px auto; }
+    .blogs-container { padding: 0 15px; }
-    .blog-post-title { font-size: 1.4rem; }
+    .blog-post { padding: 16px; margin-bottom: 24px; }
+    .blog-post-title { font-size: 1.3rem; }
   }
 </style>