From 7fe09ea35e0e8622648ed2e468729f592ecf1a75 Mon Sep 17 00:00:00 2001 From: "Tommy D. Rossi" Date: Fri, 20 Feb 2026 12:25:32 +0100 Subject: [PATCH] liveline: JetBrainsMono Nerd Font Mono for code blocks, fix diagram alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add @font-face for JetBrainsMono Nerd Font Mono (nerd-fonts v3.3.0) with proper box-drawing glyph support for seamless Unicode diagram rendering - Update --ll-font-code to use NF Mono as primary, fallback to JetBrains Mono/SF Mono - Fix liveline-prism.css: use var(--ll-font-code) instead of hardcoded SF Mono - Remove unused Google Fonts JetBrains Mono link from root.tsx - Fix diagram: keep Unicode box chars for seamless lines, use ASCII < > v for arrows (◄ ► ▼ render at inconsistent widths), recount all columns --- website/src/routes/liveline.tsx | 28 ++-- website/src/styles/liveline-prism.css | 180 +++++++++++++------------- website/src/styles/liveline.css | 18 ++- 3 files changed, 119 insertions(+), 107 deletions(-) diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx index 3ef9d0c..89b2c6c 100644 --- a/website/src/routes/liveline.tsx +++ b/website/src/routes/liveline.tsx @@ -652,20 +652,20 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`} back. - {`+---------------------+ +-------------------+ +-----------------+ -| BROWSER | | LOCALHOST | | CLIENT | -| | | | | | -| +---------------+ | | WebSocket Server | | +-----------+ | -| | Extension |<---------> :19988 | | | CLI / MCP | | -| +-------+-------+ | WS | | | +-----------+ | -| | | | /extension | | | | -| chrome.debugger | | | | | v | -| v | | v | | +-----------+ | -| +---------------+ | | /cdp/:id <------------> | | execute | | -| | Tab 1 (green) | | +--------------------+ WS | +-----------+ | -| | Tab 2 (green) | | | | | -| | Tab 3 (gray) | | Tab 3 not controlled | Playwright API | -+---------------------+ (extension not clicked) +-----------------+`} + {`┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────┐ +│ BROWSER │ │ LOCALHOST │ │ CLIENT │ +│ │ │ │ │ │ +│ ┌───────────────┐ │ │ WebSocket Server │ │ ┌───────────┐ │ +│ │ Extension │<-----------> :19988 │ │ │ CLI / MCP │ │ +│ └───────┬───────┘ │ WS │ │ │ └───────────┘ │ +│ │ │ │ /extension │ │ │ │ +│ chrome.debugger │ │ │ │ │ v │ +│ v │ │ v │ │ ┌───────────┐ │ +│ ┌───────────────┐ │ │ /cdp/:id <--------------->│ │ execute │ │ +│ │ Tab 1 (green) │ │ └──────────────────────┘ WS │ └───────────┘ │ +│ │ Tab 2 (green) │ │ │ │ │ +│ │ Tab 3 (gray) │ │ Tab 3 not controlled │ Playwright API │ +└─────────────────────┘ (extension not clicked) └─────────────────┘`} No Chrome restart required. No --remote-debugging-port{" "} diff --git a/website/src/styles/liveline-prism.css b/website/src/styles/liveline-prism.css index a14305a..3e087df 100644 --- a/website/src/styles/liveline-prism.css +++ b/website/src/styles/liveline-prism.css @@ -17,8 +17,8 @@ pre[class*="language-"] { color: #1f2328; background: none; text-shadow: none; - font-family: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono", - Menlo, Courier, monospace; + font-family: var(--ll-font-code, "SF Mono", "SFMono-Regular", "Consolas", + "Liberation Mono", Menlo, Courier, monospace); font-size: 12px; line-height: 18px; text-align: left; @@ -136,95 +136,93 @@ pre[class*="language-"] { /* ====================================================================== Dark mode - GitHub Dark inspired palette. - Uses @variant dark so it follows whatever strategy is configured - in @custom-variant dark (globals.css). + Plain CSS (not processed by Tailwind), uses .dark ancestor selector + matching @custom-variant dark in globals.css. ====================================================================== */ -@variant dark { - code[class*="language-"], - pre[class*="language-"] { - color: #e6edf3; - } - - .token.keyword, - .token.module, - .token.imports, - .token.control-flow { - color: #ff7b72; - } - - .token.string, - .token.template-string, - .token.attr-value { - color: #a5d6ff; - } - - .token.function, - .token.class-name { - color: #d2a8ff; - } - - .token.property, - .token.parameter { - color: #ffa657; - } - - .token.tag .token.tag { - color: #7ee787; - } - - .token.tag .token.class-name { - color: #7ee787; - } - - .token.tag .token.attr-name, - .token.attr-name { - color: #79c0ff; - } - - .token.number { - color: #79c0ff; - } - - .token.operator { - color: #ff7b72; - } - - .token.punctuation { - color: #e6edf3; - } - - .token.boolean, - .token.constant, - .token.builtin { - color: #79c0ff; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: #8b949e; - font-style: italic; - } - - .token.tag .token.punctuation { - color: #e6edf3; - } - - .token.spread { - color: #ff7b72; - } - - .token.plain-text { - color: #e6edf3; - } - - .token.regex { - color: #a5d6ff; - } - - .language-bash .token.function { - color: #79c0ff; - } +.dark code[class*="language-"], +.dark pre[class*="language-"] { + color: #e6edf3; +} + +.dark .token.keyword, +.dark .token.module, +.dark .token.imports, +.dark .token.control-flow { + color: #ff7b72; +} + +.dark .token.string, +.dark .token.template-string, +.dark .token.attr-value { + color: #a5d6ff; +} + +.dark .token.function, +.dark .token.class-name { + color: #d2a8ff; +} + +.dark .token.property, +.dark .token.parameter { + color: #ffa657; +} + +.dark .token.tag .token.tag { + color: #7ee787; +} + +.dark .token.tag .token.class-name { + color: #7ee787; +} + +.dark .token.tag .token.attr-name, +.dark .token.attr-name { + color: #79c0ff; +} + +.dark .token.number { + color: #79c0ff; +} + +.dark .token.operator { + color: #ff7b72; +} + +.dark .token.punctuation { + color: #e6edf3; +} + +.dark .token.boolean, +.dark .token.constant, +.dark .token.builtin { + color: #79c0ff; +} + +.dark .token.comment, +.dark .token.prolog, +.dark .token.doctype, +.dark .token.cdata { + color: #8b949e; + font-style: italic; +} + +.dark .token.tag .token.punctuation { + color: #e6edf3; +} + +.dark .token.spread { + color: #ff7b72; +} + +.dark .token.plain-text { + color: #e6edf3; +} + +.dark .token.regex { + color: #a5d6ff; +} + +.dark .language-bash .token.function { + color: #79c0ff; } diff --git a/website/src/styles/liveline.css b/website/src/styles/liveline.css index 2ece015..5f5a17a 100644 --- a/website/src/styles/liveline.css +++ b/website/src/styles/liveline.css @@ -14,6 +14,20 @@ * - Small font sizes (14px body) for editorial/compact aesthetic */ +/* ======================================================================== + JetBrainsMono Nerd Font Mono — patched with box-drawing glyphs that + tile perfectly (no gaps). Only load regular 400 to keep payload small. + Source: github.com/ryanoasis/nerd-fonts + ======================================================================== */ + +@font-face { + font-family: "JetBrainsMono NF Mono"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/refs/tags/v3.3.0/patched-fonts/JetBrainsMono/Ligatures/Regular/JetBrainsMonoNerdFontMono-Regular.ttf") format("truetype"); +} + /* ======================================================================== Design tokens ======================================================================== */ @@ -22,8 +36,8 @@ --ll-font-primary: "Inter var", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ll-font-secondary: "Newsreader", Georgia, "Times New Roman", serif; - --ll-font-code: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono", - Menlo, Courier, monospace; + --ll-font-code: "JetBrainsMono NF Mono", "JetBrains Mono", "SF Mono", + "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace; /* Bleed: code blocks & images extend beyond prose column. 36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */