feat(web): full layout overhaul — Linear design system
CI / typecheck + build (turbo) (push) Canceled after 0s
CI / typecheck + build (turbo) (push) Canceled after 0s
Complete UI/UX overhaul, not just style changes:
Layout:
- Dark-mode-first (near-black #08090a canvas, whiteOpacity borders)
- Sticky header with brand + nav + theme toggle
- Sticky sidebar (xl+) with hierarchical doc tree
- Main content in max-w-3xl centered column
- Inter font system (via @font-face + CSS vars)
- Font feature settings cv01/ss03 for Linear-geometric Inter
Components rewritten in Linear aesthetic:
- Homepage: editorial-style doc listing with tags, section headers
- Doc page: breadcrumb-style nav links, metadata bar (author/date/tags),
clean prose, Related + History sections
- TOC: rehype-slug heading anchors + github-slugger matching
- Create/Edit: inline form with Linear-style inputs/buttons
- Login: centered card-style, brand-indigo CTA button
- Docs index: sectioned listing with tag previews
- Search: dark-themed search with result cards + snippets
- ThemeToggle: system-default + localStorage persistence
Typography:
- prose with custom Tailwind classes matching Linear's:
headings #f7f8f8 font-light, body #d0d6e0,
links #7170ff with hover #828fff,
code blocks #191a1b bg with #23252a border
New deps: rehype-slug (heading anchors), github-slugger (TOC matching)
Files: layout.tsx (overhaul), page.tsx, create/, login/, docs/,
[section]/[...slug]/page.tsx, Sidebar.tsx, ThemeToggle.tsx,
TOC.tsx, DocForm.tsx, Markdown.tsx, Search page
This commit is contained in:
@@ -3,10 +3,18 @@ import rehypeSlug from "rehype-slug";
|
||||
|
||||
export default function Markdown({ source }: { source: string }) {
|
||||
return (
|
||||
<div className="prose prose-zinc dark:prose-invert max-w-none [&_pre]:bg-zinc-100 dark:[&_pre]:bg-zinc-900 [&_pre]:p-3 [&_pre]:rounded [&_code]:font-mono [&_a]:underline">
|
||||
<ReactMarkdown rehypePlugins={[rehypeSlug]}>
|
||||
{source}
|
||||
</ReactMarkdown>
|
||||
<div
|
||||
className="prose prose-lg max-w-none
|
||||
prose-headings:text-[#f7f8f8] prose-headings:font-light prose-headings:mb-4
|
||||
prose-p:text-[#d0d6e0] prose-p:mb-4
|
||||
prose-a:text-[#7170ff] prose-a:no-underline hover:prose-a:text-[#828fff]
|
||||
prose-code:text-[#d0d6e0] prose-code:bg-[#191a1b] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
|
||||
prose-pre:bg-[#191a1b] prose-pre:border prose-pre:border-[#23252a] prose-pre:rounded-lg
|
||||
prose-pre code:bg-transparent prose-pre code:p-0 prose-pre code:text-sm
|
||||
prose-blockquote:border-l-[#23252a] prose-blockquote:text-[#a0a4a8]
|
||||
prose-ul:text-[#d0d6e0] prose-ol:text-[#d0d6e0]"
|
||||
>
|
||||
<ReactMarkdown rehypePlugins={[rehypeSlug]}>{source}</ReactMarkdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user