From ce79f02211c69bc6241d5543c0799170af766cab Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Mon, 8 Jun 2026 12:21:46 +0000
Subject: [PATCH] fix(web): correct blog colors for the light workspace +
 thumbnails
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only the .rail sidebar is dark; the .workspace content area is on the
light (#f6f7f4) page background. The previous blog styling assumed a dark
workspace, so text was light-grey on white (unreadable) and the link
green was too light.

- Darken the global link color to #0a7d59 (readable on white); content
  links only — rail nav stays inherited.
- Repaint .blog-content (post HTML) for a light surface: dark body text,
  light code/pre, light borders.
- Blog index/post: dark titles, readable grey meta, light row borders;
  light-themed footer.
- Add post thumbnails to the /blog index from featured_image.url.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../logicsrc-web/src/app/blog/[slug]/page.tsx |  8 +-
 apps/logicsrc-web/src/app/blog/page.tsx       | 91 +++++++++++++------
 .../src/components/site-shell.tsx             |  4 +-
 apps/logicsrc-web/src/styles.css              | 18 ++--
 4 files changed, 81 insertions(+), 40 deletions(-)

diff --git a/apps/logicsrc-web/src/app/blog/[slug]/page.tsx b/apps/logicsrc-web/src/app/blog/[slug]/page.tsx
index 76cdc83..7b5d7be 100644
--- a/apps/logicsrc-web/src/app/blog/[slug]/page.tsx
+++ b/apps/logicsrc-web/src/app/blog/[slug]/page.tsx
@@ -69,12 +69,14 @@ export default async function BlogPostPage({
     <SiteShell active="Blog">
       <article className="band" style={{ maxWidth: "48rem" }}>
         <p style={{ marginBottom: "1.5rem" }}>
-          <Link href="/blog" style={{ color: "#b5beb2", textDecoration: "none" }}>
+          <Link href="/blog" style={{ color: "#5b6b7a", textDecoration: "none" }}>
             ← Blog
           </Link>
         </p>
-        <h1 style={{ fontSize: "2.2rem", margin: "0 0 0.5rem" }}>{post.title}</h1>
-        <div style={{ color: "#8a95a0", fontSize: "0.85rem", marginBottom: "2rem" }}>
+        <h1 style={{ fontSize: "2.2rem", margin: "0 0 0.5rem", color: "#101418" }}>
+          {post.title}
+        </h1>
+        <div style={{ color: "#5b6b7a", fontSize: "0.85rem", marginBottom: "2rem" }}>
           {formatDate(post.published_at)}
         </div>
         {post.featured_image?.url ? (
diff --git a/apps/logicsrc-web/src/app/blog/page.tsx b/apps/logicsrc-web/src/app/blog/page.tsx
index 67a1051..8bbdba5 100644
--- a/apps/logicsrc-web/src/app/blog/page.tsx
+++ b/apps/logicsrc-web/src/app/blog/page.tsx
@@ -17,6 +17,7 @@ type PostRow = {
   slug: string;
   title: string;
   excerpt: string | null;
+  featured_image: { url?: string } | null;
   published_at: string;
 };
 
@@ -32,7 +33,7 @@ export default async function BlogIndex(): Promise<ReactNode> {
   const supabase = publicClient();
   const { data } = await supabase
     .from("blog_posts")
-    .select("slug, title, excerpt, published_at")
+    .select("slug, title, excerpt, featured_image, published_at")
     .eq("status", "published")
     .order("published_at", { ascending: false });
   const posts = (data ?? []) as PostRow[];
@@ -50,35 +51,71 @@ export default async function BlogIndex(): Promise<ReactNode> {
         </div>
 
         {posts.length === 0 ? (
-          <p style={{ color: "#b5beb2" }}>No posts yet.</p>
+          <p style={{ color: "#5b6b7a" }}>No posts yet.</p>
         ) : (
           <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
-            {posts.map((post) => (
-              <li
-                key={post.slug}
-                style={{
-                  padding: "1.25rem 0",
-                  borderTop: "1px solid rgba(245, 247, 244, 0.12)",
-                }}
-              >
-                <Link
-                  href={`/blog/${post.slug}`}
-                  style={{ color: "inherit", textDecoration: "none" }}
+            {posts.map((post) => {
+              const thumb = post.featured_image?.url;
+              return (
+                <li
+                  key={post.slug}
+                  style={{
+                    padding: "1.25rem 0",
+                    borderTop: "1px solid #e3e6e0",
+                  }}
                 >
-                  <h3 style={{ margin: "0 0 0.35rem", fontSize: "1.25rem" }}>
-                    {post.title}
-                  </h3>
-                </Link>
-                <div
-                  style={{ color: "#8a95a0", fontSize: "0.85rem", marginBottom: "0.5rem" }}
-                >
-                  {formatDate(post.published_at)}
-                </div>
-                {post.excerpt ? (
-                  <p style={{ color: "#b5beb2", margin: 0 }}>{post.excerpt}</p>
-                ) : null}
-              </li>
-            ))}
+                  <Link
+                    href={`/blog/${post.slug}`}
+                    style={{
+                      display: "flex",
+                      gap: "1rem",
+                      color: "inherit",
+                      textDecoration: "none",
+                      alignItems: "flex-start",
+                    }}
+                  >
+                    {thumb ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={thumb}
+                        alt=""
+                        style={{
+                          width: "160px",
+                          height: "100px",
+                          objectFit: "cover",
+                          borderRadius: "0.5rem",
+                          flexShrink: 0,
+                          border: "1px solid #e3e6e0",
+                        }}
+                      />
+                    ) : null}
+                    <div style={{ minWidth: 0 }}>
+                      <h3
+                        style={{
+                          margin: "0 0 0.35rem",
+                          fontSize: "1.25rem",
+                          color: "#101418",
+                        }}
+                      >
+                        {post.title}
+                      </h3>
+                      <div
+                        style={{
+                          color: "#5b6b7a",
+                          fontSize: "0.85rem",
+                          marginBottom: "0.5rem",
+                        }}
+                      >
+                        {formatDate(post.published_at)}
+                      </div>
+                      {post.excerpt ? (
+                        <p style={{ color: "#41505d", margin: 0 }}>{post.excerpt}</p>
+                      ) : null}
+                    </div>
+                  </Link>
+                </li>
+              );
+            })}
           </ul>
         )}
       </div>
diff --git a/apps/logicsrc-web/src/components/site-shell.tsx b/apps/logicsrc-web/src/components/site-shell.tsx
index 271e5b2..75c22a6 100644
--- a/apps/logicsrc-web/src/components/site-shell.tsx
+++ b/apps/logicsrc-web/src/components/site-shell.tsx
@@ -56,13 +56,13 @@ export function SiteShell({
             maxWidth: "72rem",
             margin: "2rem auto 0",
             padding: "1.25rem 0",
-            borderTop: "1px solid rgba(245, 247, 244, 0.12)",
+            borderTop: "1px solid #d9ded4",
             display: "flex",
             flexWrap: "wrap",
             gap: "0.75rem",
             justifyContent: "space-between",
             fontSize: "0.85rem",
-            color: "#b5beb2",
+            color: "#5b6b7a",
           }}
         >
           <span>© {new Date().getFullYear()} Profullstack, Inc. · LogicSRC</span>
diff --git a/apps/logicsrc-web/src/styles.css b/apps/logicsrc-web/src/styles.css
index f35ca96..4352367 100644
--- a/apps/logicsrc-web/src/styles.css
+++ b/apps/logicsrc-web/src/styles.css
@@ -15,7 +15,7 @@ body {
 }
 
 a {
-  color: #5ac8a6;
+  color: #0a7d59;
   text-decoration: none;
 }
 
@@ -703,18 +703,19 @@ pre {
   }
 }
 
-/* Rendered blog post HTML (autoblog payload) on the dark workspace. */
+/* Rendered blog post HTML (autoblog payload) on the light workspace. */
 .blog-content {
-  color: #e7ebe4;
+  color: #1f2933;
 }
 .blog-content a {
-  color: #5ac8a6;
+  color: #0a7d59;
 }
 .blog-content h2,
 .blog-content h3,
 .blog-content h4 {
   margin: 1.75rem 0 0.5rem;
   line-height: 1.25;
+  color: #101418;
 }
 .blog-content p,
 .blog-content ul,
@@ -728,13 +729,14 @@ pre {
   border-radius: 0.5rem;
 }
 .blog-content pre {
-  background: rgba(0, 0, 0, 0.32);
+  background: #f1f3ef;
+  border: 1px solid #e3e6e0;
   padding: 1rem;
   border-radius: 0.5rem;
   overflow: auto;
 }
 .blog-content code {
-  background: rgba(0, 0, 0, 0.32);
+  background: rgba(16, 20, 24, 0.06);
   padding: 0.1rem 0.35rem;
   border-radius: 0.25rem;
   font-size: 0.9em;
@@ -744,7 +746,7 @@ pre {
   padding: 0;
 }
 .blog-content blockquote {
-  border-left: 3px solid rgba(245, 247, 244, 0.2);
+  border-left: 3px solid #d9ded4;
   padding-left: 1rem;
-  color: #b5beb2;
+  color: #5b6b7a;
 }