From 20d848623f0327dcb1862b7eefb9b73e27cc7304 Mon Sep 17 00:00:00 2001
From: dangrubbb <dangrubb@firemail.cc>
Date: Thu, 22 Oct 2026 20:10:52 -0400
Subject: [PATCH] radiance: Private Search menu item (search.dangrubb.net);
 restyle blog with radiance colors and fonts

---
 src/layouts/RadianceBase.astro |  42 +++++++++
 src/pages/blog/index.astro     | 164 ++++++++++++---------------------
 src/pages/index.astro          |   2 +-
 3 files changed, 104 insertions(+), 104 deletions(-)
 create mode 100644 src/layouts/RadianceBase.astro

diff --git a/src/layouts/RadianceBase.astro b/src/layouts/RadianceBase.astro
new file mode 100644
index 0000000..aa96a61
--- /dev/null
+++ b/src/layouts/RadianceBase.astro
@@ -0,0 +1,42 @@
+---
+import '@fontsource/instrument-sans/latin-400.css';
+import '@fontsource/instrument-sans/latin-500.css';
+import '@fontsource/geist-mono/latin-500.css';
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="theme-color" content="#fff6f4" />
+    <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --ink: 9 11 17;
+    --ease: cubic-bezier(0.33, 0, 0.2, 1);
+  }
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; min-height: 100%; }
+  body {
+    background-color: #f9d9b3;
+    background-image:
+      radial-gradient(115% 80% at 50% 30%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
+      linear-gradient(180deg, #fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 55%, #f3c19e 78%, #ee9972 92%, #ef815c 100%);
+    background-attachment: fixed;
+    color: rgb(var(--ink) / 0.8);
+    font-family: 'Instrument Sans', system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  a { color: inherit; text-decoration: none; }
+  :focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
+</style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 22f3fee..f4ddee0 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,18 +1,17 @@
 ---
-import CrushBase from '../../layouts/CrushBase.astro';
+import RadianceBase from '../../layouts/RadianceBase.astro';
 import posts from '../../data/posts.json';
 ---
 
-<CrushBase title="dangrubb.net/blog">
+<RadianceBase title="dangrubb.net/blog">
   <div class="page">
     <header class="blog-header">
-      <div class="header-logo">
-        <img src="/src/img/DanGrubbLogoTeal.png" alt="dangrubb" class="logo-img">
-      </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>
+      <a class="header-logo" href="/">
+        <span class="sr-only">dangrubb.net home</span>
+        <img src="/src/img/DanGrubbLogoDark.png" alt="" width="64" height="64" />
+      </a>
+      <h1 class="page-title">Blog</h1>
+      <p class="back-link"><a href="/">← Home</a></p>
     </header>
 
     <div class="blogs-container">
@@ -20,7 +19,7 @@ import posts from '../../data/posts.json';
         <article class="blog-post" id={post.slug}>
           <h2 class="blog-post-title">{post.title}</h2>
           <div class="blog-post-date">
-            {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+            {new Date(post.date + 'T12:00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
           </div>
           <div class="blog-post-content" set:html={post.content} />
           <div class="blog-post-image">
@@ -31,65 +30,49 @@ import posts from '../../data/posts.json';
     </div>
 
     <footer class="blog-footer">
-      <a href="/">← home</a>
+      <a href="/">← Home</a>
     </footer>
   </div>
-</CrushBase>
+</RadianceBase>
 
 <style>
-  .page {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background: var(--crush-white);
+  .page { min-height: 100vh; display: flex; flex-direction: column; }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
   }
 
-  .blog-header {
-    text-align: center;
-    padding: 30px 20px 20px;
-    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;
-  }
+  .blog-header { text-align: center; padding: 28px 20px 8px; }
+  .header-logo { display: inline-block; margin-bottom: 18px; }
+  .header-logo img { width: 56px; height: 56px; }
 
   .page-title {
-    font-family: 'Alfa Slab One', 'Georgia', serif;
-    font-size: clamp(1.8rem, 5vw, 3rem);
-    letter-spacing: -1px;
+    margin: 0 0 12px;
+    font-weight: 400;
+    font-size: clamp(30px, 3.34vw, 56px);
     line-height: 1;
-    margin-bottom: 8px;
+    letter-spacing: -0.03em;
   }
 
-  .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, .blog-footer a {
+    font-family: 'Geist Mono', ui-monospace, monospace;
+    font-weight: 500;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
   }
-  .back-link a {
-    color: var(--crush-teal);
-    opacity: 0.7;
+  .back-link { margin: 0; }
+  .back-link a, .blog-footer a {
+    position: relative; display: inline-block; overflow: hidden;
   }
-  .back-link a:hover { opacity: 1; }
+  .back-link a::after, .blog-footer a::after {
+    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
+    background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
+  }
+  .back-link a:hover::after, .blog-footer a:hover::after { transform: none; }
 
   .blogs-container {
-    margin: 30px auto;
+    margin: 32px auto;
     max-width: 700px;
     width: 100%;
     padding: 0 20px;
@@ -99,71 +82,46 @@ import posts from '../../data/posts.json';
   }
 
   .blog-post {
-    margin-bottom: 40px;
-    padding: 24px;
-    border: 1px solid rgba(0, 139, 139, 0.12);
-    border-radius: 6px;
-    background: linear-gradient(135deg, #f0faf9, #f8f9fa);
+    margin-bottom: 32px;
+    padding: 28px;
+    background: #fff;
     max-width: 700px;
     width: 100%;
   }
 
   .blog-post-title {
-    color: var(--crush-teal);
-    font-weight: 700;
+    margin: 0 0 8px;
+    font-weight: 500;
     font-size: 1.6rem;
+    letter-spacing: -0.03em;
     text-align: center;
-    margin-bottom: 6px;
   }
 
   .blog-post-date {
-    color: var(--crush-teal-light);
-    font-size: 0.85rem;
+    font-family: 'Geist Mono', ui-monospace, monospace;
+    font-weight: 500;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
     text-align: center;
-    margin-bottom: 20px;
-    opacity: 0.7;
+    margin-bottom: 22px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid rgb(var(--ink) / 0.15);
+    color: rgb(var(--ink) / 0.6);
   }
 
-  .blog-post-content {
-    font-size: 0.95rem;
-    line-height: 1.6;
-    color: #333;
-    text-align: center;
-  }
-  .blog-post-content :global(p) {
-    margin: 0 0 15px;
-  }
+  .blog-post-content { font-size: 1rem; line-height: 1.55; text-align: center; }
+  .blog-post-content :global(p) { margin: 0 0 15px; }
+  .blog-post-content :global(a) { text-decoration: underline; text-underline-offset: 3px; }
 
-  .blog-post-image {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-  }
-  .blog-post-image img {
-    max-width: 100%;
-    height: auto;
-    max-height: 60vh;
-    border-radius: 4px;
-    box-shadow: 0 4px 12px rgba(0, 102, 102, 0.15);
-  }
+  .blog-post-image { display: flex; justify-content: center; margin-top: 20px; }
+  .blog-post-image img { max-width: 100%; height: auto; max-height: 60vh; }
 
-  .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;
-  }
+  .blog-footer { text-align: center; padding: 16px 20px 44px; margin-top: auto; }
 
   @media (max-width: 768px) {
-    .blog-header { padding: 20px 15px 15px; }
-    .logo-img { width: 45px; height: 45px; }
-    .blogs-container { padding: 0 15px; }
-    .blog-post { padding: 16px; margin-bottom: 24px; }
-    .blog-post-title { font-size: 1.3rem; }
+    .blogs-container { padding: 0 12px; }
+    .blog-post { padding: 18px; margin-bottom: 20px; }
+    .blog-post-title { font-size: 1.35rem; }
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 03bfa68..a20b8fd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,7 +8,7 @@ const nav = [
   { label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' },
   { label: 'Exclusive Music', href: '/music' },
   { label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' },
-  { label: 'Crypto', href: '#' },
+  { label: 'Private Search', href: 'https://search.dangrubb.net' },
   { label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' },
 ];
 const links = [