From 996a8452586a2b591d1808568f5dfd674912ba5e Mon Sep 17 00:00:00 2001 From: hallelx2 Date: Sat, 20 Jun 2026 23:51:52 +0100 Subject: [PATCH] style: align blog and docs with Cream/Ink editorial style guide --- apps/blogs/app/globals.css | 24 +- apps/blogs/app/layout.tsx | 5 +- apps/blogs/app/page.tsx | 510 ++++++++++++++++++----------------- apps/docs/src/app/global.css | 60 ++--- 4 files changed, 312 insertions(+), 287 deletions(-) diff --git a/apps/blogs/app/globals.css b/apps/blogs/app/globals.css index 6f4ec08..c9a35af 100644 --- a/apps/blogs/app/globals.css +++ b/apps/blogs/app/globals.css @@ -3,24 +3,25 @@ @theme { --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif; - --font-display: var(--font-geist), ui-sans-serif, system-ui, sans-serif; + --font-display: var(--font-plus-jakarta), var(--font-geist), ui-sans-serif, system-ui, sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace; --font-serif: var(--font-instrument-serif), ui-serif, Georgia, serif; - --color-bg-base: #fcfcfd; - --color-text-base: #0a0a0a; - --color-text-secondary: #3f3f46; - --color-text-muted: #71717a; + --color-bg-base: #FAF6EE; + --color-bg-paper: #FAF8F5; + --color-text-base: #0F0F0F; + --color-text-secondary: #3F3F3E; + --color-text-muted: #70706F; --color-brand-blue: #1456f0; --color-brand-pink: #ea5ec1; - --color-border-light: #f2f3f5; - --color-border-gray: #e5e7eb; + --color-border-light: #F0EDE6; + --color-border-gray: #E3DFD5; } @layer base { html, body { - background-color: #fcfcfd !important; - color: #0a0a0a; + background-color: #FAF6EE !important; + color: #0F0F0F; margin: 0; padding: 0; width: 100%; @@ -31,8 +32,9 @@ @layer utilities { .grid-paper { background-image: - linear-gradient(to right, rgba(20, 86, 240, 0.04) 1px, transparent 1px), - linear-gradient(to bottom, rgba(20, 86, 240, 0.04) 1px, transparent 1px); + linear-gradient(to right, rgba(20, 86, 240, 0.03) 1px, transparent 1px), + linear-gradient(to bottom, rgba(20, 86, 240, 0.03) 1px, transparent 1px); background-size: 56px 56px; } } + diff --git a/apps/blogs/app/layout.tsx b/apps/blogs/app/layout.tsx index 7223194..52204ab 100644 --- a/apps/blogs/app/layout.tsx +++ b/apps/blogs/app/layout.tsx @@ -1,9 +1,10 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono, Instrument_Serif } from "next/font/google"; +import { Geist, Geist_Mono, Instrument_Serif, Plus_Jakarta_Sans } from "next/font/google"; import "./globals.css"; const geist = Geist({ subsets: ["latin"], variable: "--font-geist" }); const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" }); +const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-plus-jakarta" }); const instrumentSerif = Instrument_Serif({ weight: "400", subsets: ["latin"], @@ -23,7 +24,7 @@ export default function RootLayout({ return ( +
{/* Editorial top accent line */}
- {/* Subtle blueprint grid backdrop */} -
+ {/* Subtle blueprint grid backdrop - hidden when reading article */} + {!activeArticle && ( +
+ )} {/* Main Content Wrapper */}
{/* Header Block */} -
-
+
+
setActiveArticle(null)} + className="flex items-center gap-3 cursor-pointer group" + >
- + Vectorless - + Intelligence Log
-
- {/* Hero Section */} -
-
- - Volume IV · Technical Library - -

- Document retrieval for the reasoning era. -

-

- Deep dives, implementation specifications, and performance analyses of structure-preserving retrieval architectures. -

-
-
- - {/* Categories Bar */} -
-
- {categories.map((cat) => { - const isActive = selectedCategory === cat; - return ( - - ); - })} -
- -
- - Format: Structural / Open-Source Spec -
-
- - {/* Featured Editorial Hero Article */} - {selectedCategory === 'All' && featuredPost && ( - setActiveArticle(featuredPost)} - className="py-12 border-b border-[#E5E7EB] cursor-pointer group" + exit={{ opacity: 0, y: 15 }} + transition={{ duration: 0.4 }} + className="flex-grow max-w-3xl mx-auto w-full py-16 md:py-24" > -
-
-
-
- {featuredPost.category} - • - {featuredPost.date} - • - {featuredPost.readTime} -
- -

- {featuredPost.title} -

- -

- {featuredPost.snippet} -

-
+
+ {activeArticle.category} + • + {activeArticle.date} + • + {activeArticle.readTime} +
-
- Analyze Specification - -
+

+ {activeArticle.title} +

+ + {/* Author Card */} +
+
+ {activeArticle.author.name}
- -
- +
+ {activeArticle.author.name} + {activeArticle.author.role}
- - )} - - - {/* Magazine Grid List */} -
- - - {displayPosts.map((post, idx) => ( - setActiveArticle(post)} - className="flex flex-col justify-between cursor-pointer group h-full pb-8 border-b border-[#E5E7EB]/80" - > -
- {/* Header meta */} -
- {post.category} - {post.date} -
- {/* Title */} -

- {post.title} -

+ {/* Large Accent Illustration */} +
+
+ +
+
- {/* Snippet */} -

- {post.snippet} + {/* Article Content with Premium Typography */} +

+ {activeArticle.content.map((paragraph, pIdx) => { + // If it starts with a number list item like "1. " + if (/^\d+\.\s/.test(paragraph)) { + const parts = paragraph.split(/^\d+\.\s/); + const titleAndText = parts[1].split(/:\s/); + return ( +
+ {titleAndText.length > 1 ? ( + <> +

{titleAndText[0]}

+

{titleAndText[1]}

+ + ) : ( +

{parts[1]}

+ )} +
+ ); + } + return ( +

+ {paragraph}

-
- - {/* Card Illustration */} -
- -
+ ); + })} + - {/* Author */} -
-
- {post.author.name} -
-
- {post.author.name} - {post.author.role} -
-
- - ))} - - - {/* Empty State */} - {displayPosts.length === 0 && ( -
- No matching logs found - -
- )} - -
- - {/* Footer */} - -
- - {/* FULL ARTICLE SIDE SHEET DRAWER */} - - {activeArticle && ( -
- {/* Backdrop */} - + File: {activeArticle.id}.log + +
+ + ) : ( + /* MAGAZINE LIST VIEW */ + setActiveArticle(null)} - className="absolute inset-0 bg-[#0A0A0A]/30 backdrop-blur-xs" - /> - - {/* Slide-out Sheet */} - - + {/* Hero Section */} +
+
+ + Volume IV · Technical Library + +

+ Document retrieval for the reasoning era. +

+

+ Deep dives, implementation specifications, and performance analyses of structure-preserving retrieval architectures. +

+
+
+ + {/* Categories Bar */} +
+
+ {categories.map((cat) => { + const isActive = selectedCategory === cat; + return ( + + ); + })} +
+ +
+ + Format: Structural / Open-Source Spec +
+
+ + {/* Featured Editorial Hero Article */} + + {selectedCategory === 'All' && featuredPost && ( + setActiveArticle(featuredPost)} + className="py-12 border-b border-[#E3DFD5] cursor-pointer group" + > +
+
+
+
+ {featuredPost.category} + • + {featuredPost.date} + • + {featuredPost.readTime} +
+ +

+ {featuredPost.title} +

+ +

+ {featuredPost.snippet} +

+
-
-
-
- {activeArticle.category} - • - {activeArticle.date} - • - {activeArticle.readTime} -
+
+ Analyze Specification + +
+
-

- {activeArticle.title} -

- - {/* Author Card */} -
-
- {activeArticle.author.name} -
-
-
{activeArticle.author.name}
-

{activeArticle.author.role}

+
+ +
-
+ + )} + + + {/* Magazine Grid List */} +
+
+ + {displayPosts.map((post, idx) => ( + setActiveArticle(post)} + className="flex flex-col justify-between cursor-pointer group h-full pb-8 border-b border-[#E3DFD5]/80" + > +
+ {/* Header meta */} +
+ {post.category} + {post.date} +
+ + {/* Title */} +

+ {post.title} +

+ + {/* Snippet */} +

+ {post.snippet} +

+
- {/* Text Contents */} -
- {activeArticle.content.map((paragraph, pIdx) => ( -

- {paragraph} -

+ {/* Card Illustration */} +
+ +
+ + {/* Author */} +
+
+ {post.author.name} +
+
+ {post.author.name} + {post.author.role} +
+
+ ))} -
+ + + {/* Empty State */} + {displayPosts.length === 0 && ( +
+ No matching logs found + +
+ )}
+
-
- File: spec_dump.log - + {/* Footer */} +
+
+ + Vectorless
-
+

+ © {new Date().getFullYear()} Vectorless. All rights reserved. +

+
+ Privacy + / + Terms +
+ -
- )} - + )} + + +
{/* DYNAMIC INTERACTIVE RETRIEVAL TERMINAL SANDBOX */} diff --git a/apps/docs/src/app/global.css b/apps/docs/src/app/global.css index 5adb65b..50f0dbe 100644 --- a/apps/docs/src/app/global.css +++ b/apps/docs/src/app/global.css @@ -17,19 +17,19 @@ --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace; --font-serif: var(--font-instrument-serif), ui-serif, Georgia, serif; - --color-vl-canvas: #fcfcfd; - --color-vl-ink: #0a0a0a; - --color-vl-secondary: #3f3f46; - --color-vl-muted: #71717a; - --color-vl-hairline: #e5e7eb; + --color-vl-canvas: #FAF6EE; + --color-vl-ink: #0F0F0F; + --color-vl-secondary: #3F3F3E; + --color-vl-muted: #70706F; + --color-vl-hairline: #E3DFD5; --color-vl-blue: #1456f0; --color-vl-pink: #ea5ec1; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; - --color-border-light: #f2f3f5; - --color-border-gray: #e5e7eb; + --color-border-light: #F0EDE6; + --color-border-gray: #E3DFD5; /* shadcn/ui color mappings for Tailwind v4 */ --color-background: hsl(var(--background)); @@ -59,43 +59,43 @@ } :root { - --background: 0 0% 99%; /* #fcfcfd */ - --foreground: 0 0% 13.3%; - --card: 0 0% 100%; - --card-foreground: 0 0% 13.3%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 13.3%; + --background: 40 38% 96%; /* #FAF6EE */ + --foreground: 0 0% 9.4%; /* #0F0F0F */ + --card: 40 20% 98%; /* #FAF8F5 */ + --card-foreground: 0 0% 9.4%; + --popover: 40 20% 98%; + --popover-foreground: 0 0% 9.4%; --primary: 222 89% 51%; /* #1456f0 */ --primary-foreground: 0 0% 100%; - --secondary: 210 15% 95%; - --secondary-foreground: 210 15% 30%; - --muted: 210 15% 96%; - --muted-foreground: 210 10% 45%; - --accent: 210 15% 95%; - --accent-foreground: 210 15% 30%; + --secondary: 40 15% 94%; + --secondary-foreground: 0 0% 24.7%; + --muted: 40 15% 94%; + --muted-foreground: 0 0% 43.9%; + --accent: 40 15% 94%; + --accent-foreground: 0 0% 24.7%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; - --border: 220 13% 91%; - --input: 220 13% 91%; + --border: 40 13% 86%; /* #E3DFD5 */ + --input: 40 13% 86%; --ring: 222 89% 51%; --radius: 0.625rem; /* Fumadocs overrides for strict light theme */ - --color-fd-background: #fcfcfd; - --color-fd-foreground: #0a0a0a; - --color-fd-muted: #f4f5f7; - --color-fd-muted-foreground: #71717a; - --color-fd-border: #e5e7eb; + --color-fd-background: #FAF6EE; + --color-fd-foreground: #0F0F0F; + --color-fd-muted: #FAF8F5; + --color-fd-muted-foreground: #70706F; + --color-fd-border: #E3DFD5; --color-fd-primary: #1456f0; --color-fd-primary-foreground: #ffffff; } /* Force Light Theme — Disable dark mode overrides */ .dark { - --background: 0 0% 99% !important; - --foreground: 0 0% 13.3% !important; - --color-fd-background: #fcfcfd !important; - --color-fd-foreground: #0a0a0a !important; + --background: 40 38% 96% !important; + --foreground: 0 0% 9.4% !important; + --color-fd-background: #FAF6EE !important; + --color-fd-foreground: #0F0F0F !important; } @layer base {