liveline: JetBrainsMono Nerd Font Mono for code blocks, fix diagram alignment
- 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
This commit is contained in:
Tommy D. Rossi
@@ -652,20 +652,20 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
|
|||||||
back.
|
back.
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
|
|
||||||
<CodeBlock lang="bash">{`+---------------------+ +-------------------+ +-----------------+
|
<CodeBlock lang="bash">{`┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────┐
|
||||||
| BROWSER | | LOCALHOST | | CLIENT |
|
│ BROWSER │ │ LOCALHOST │ │ CLIENT │
|
||||||
| | | | | |
|
│ │ │ │ │ │
|
||||||
| +---------------+ | | WebSocket Server | | +-----------+ |
|
│ ┌───────────────┐ │ │ WebSocket Server │ │ ┌───────────┐ │
|
||||||
| | Extension |<---------> :19988 | | | CLI / MCP | |
|
│ │ Extension │<-----------> :19988 │ │ │ CLI / MCP │ │
|
||||||
| +-------+-------+ | WS | | | +-----------+ |
|
│ └───────┬───────┘ │ WS │ │ │ └───────────┘ │
|
||||||
| | | | /extension | | | |
|
│ │ │ │ /extension │ │ │ │
|
||||||
| chrome.debugger | | | | | v |
|
│ chrome.debugger │ │ │ │ │ v │
|
||||||
| v | | v | | +-----------+ |
|
│ v │ │ v │ │ ┌───────────┐ │
|
||||||
| +---------------+ | | /cdp/:id <------------> | | execute | |
|
│ ┌───────────────┐ │ │ /cdp/:id <--------------->│ │ execute │ │
|
||||||
| | Tab 1 (green) | | +--------------------+ WS | +-----------+ |
|
│ │ Tab 1 (green) │ │ └──────────────────────┘ WS │ └───────────┘ │
|
||||||
| | Tab 2 (green) | | | | |
|
│ │ Tab 2 (green) │ │ │ │ │
|
||||||
| | Tab 3 (gray) | | Tab 3 not controlled | Playwright API |
|
│ │ Tab 3 (gray) │ │ Tab 3 not controlled │ Playwright API │
|
||||||
+---------------------+ (extension not clicked) +-----------------+`}</CodeBlock>
|
└─────────────────────┘ (extension not clicked) └─────────────────┘`}</CodeBlock>
|
||||||
|
|
||||||
<Paragraph>
|
<Paragraph>
|
||||||
No Chrome restart required. No <InlineCode>--remote-debugging-port</InlineCode>{" "}
|
No Chrome restart required. No <InlineCode>--remote-debugging-port</InlineCode>{" "}
|
||||||
|
|||||||
@@ -17,8 +17,8 @@ pre[class*="language-"] {
|
|||||||
color: #1f2328;
|
color: #1f2328;
|
||||||
background: none;
|
background: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
font-family: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
|
font-family: var(--ll-font-code, "SF Mono", "SFMono-Regular", "Consolas",
|
||||||
Menlo, Courier, monospace;
|
"Liberation Mono", Menlo, Courier, monospace);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@@ -136,95 +136,93 @@ pre[class*="language-"] {
|
|||||||
|
|
||||||
/* ======================================================================
|
/* ======================================================================
|
||||||
Dark mode - GitHub Dark inspired palette.
|
Dark mode - GitHub Dark inspired palette.
|
||||||
Uses @variant dark so it follows whatever strategy is configured
|
Plain CSS (not processed by Tailwind), uses .dark ancestor selector
|
||||||
in @custom-variant dark (globals.css).
|
matching @custom-variant dark in globals.css.
|
||||||
====================================================================== */
|
====================================================================== */
|
||||||
|
|
||||||
@variant dark {
|
.dark code[class*="language-"],
|
||||||
code[class*="language-"],
|
.dark pre[class*="language-"] {
|
||||||
pre[class*="language-"] {
|
color: #e6edf3;
|
||||||
color: #e6edf3;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.keyword,
|
||||||
.token.keyword,
|
.dark .token.module,
|
||||||
.token.module,
|
.dark .token.imports,
|
||||||
.token.imports,
|
.dark .token.control-flow {
|
||||||
.token.control-flow {
|
color: #ff7b72;
|
||||||
color: #ff7b72;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.string,
|
||||||
.token.string,
|
.dark .token.template-string,
|
||||||
.token.template-string,
|
.dark .token.attr-value {
|
||||||
.token.attr-value {
|
color: #a5d6ff;
|
||||||
color: #a5d6ff;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.function,
|
||||||
.token.function,
|
.dark .token.class-name {
|
||||||
.token.class-name {
|
color: #d2a8ff;
|
||||||
color: #d2a8ff;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.property,
|
||||||
.token.property,
|
.dark .token.parameter {
|
||||||
.token.parameter {
|
color: #ffa657;
|
||||||
color: #ffa657;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.tag .token.tag {
|
||||||
.token.tag .token.tag {
|
color: #7ee787;
|
||||||
color: #7ee787;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.tag .token.class-name {
|
||||||
.token.tag .token.class-name {
|
color: #7ee787;
|
||||||
color: #7ee787;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.tag .token.attr-name,
|
||||||
.token.tag .token.attr-name,
|
.dark .token.attr-name {
|
||||||
.token.attr-name {
|
color: #79c0ff;
|
||||||
color: #79c0ff;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.number {
|
||||||
.token.number {
|
color: #79c0ff;
|
||||||
color: #79c0ff;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.operator {
|
||||||
.token.operator {
|
color: #ff7b72;
|
||||||
color: #ff7b72;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.punctuation {
|
||||||
.token.punctuation {
|
color: #e6edf3;
|
||||||
color: #e6edf3;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.boolean,
|
||||||
.token.boolean,
|
.dark .token.constant,
|
||||||
.token.constant,
|
.dark .token.builtin {
|
||||||
.token.builtin {
|
color: #79c0ff;
|
||||||
color: #79c0ff;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.comment,
|
||||||
.token.comment,
|
.dark .token.prolog,
|
||||||
.token.prolog,
|
.dark .token.doctype,
|
||||||
.token.doctype,
|
.dark .token.cdata {
|
||||||
.token.cdata {
|
color: #8b949e;
|
||||||
color: #8b949e;
|
font-style: italic;
|
||||||
font-style: italic;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.tag .token.punctuation {
|
||||||
.token.tag .token.punctuation {
|
color: #e6edf3;
|
||||||
color: #e6edf3;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.spread {
|
||||||
.token.spread {
|
color: #ff7b72;
|
||||||
color: #ff7b72;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.plain-text {
|
||||||
.token.plain-text {
|
color: #e6edf3;
|
||||||
color: #e6edf3;
|
}
|
||||||
}
|
|
||||||
|
.dark .token.regex {
|
||||||
.token.regex {
|
color: #a5d6ff;
|
||||||
color: #a5d6ff;
|
}
|
||||||
}
|
|
||||||
|
.dark .language-bash .token.function {
|
||||||
.language-bash .token.function {
|
color: #79c0ff;
|
||||||
color: #79c0ff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,6 +14,20 @@
|
|||||||
* - Small font sizes (14px body) for editorial/compact aesthetic
|
* - 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
|
Design tokens
|
||||||
======================================================================== */
|
======================================================================== */
|
||||||
@@ -22,8 +36,8 @@
|
|||||||
--ll-font-primary: "Inter var", "Inter", system-ui, -apple-system,
|
--ll-font-primary: "Inter var", "Inter", system-ui, -apple-system,
|
||||||
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
--ll-font-secondary: "Newsreader", Georgia, "Times New Roman", serif;
|
--ll-font-secondary: "Newsreader", Georgia, "Times New Roman", serif;
|
||||||
--ll-font-code: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
|
--ll-font-code: "JetBrainsMono NF Mono", "JetBrains Mono", "SF Mono",
|
||||||
Menlo, Courier, monospace;
|
"SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace;
|
||||||
|
|
||||||
/* Bleed: code blocks & images extend beyond prose column.
|
/* Bleed: code blocks & images extend beyond prose column.
|
||||||
36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */
|
36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */
|
||||||
|
|||||||
Reference in New Issue
Block a user