playwriter
Code Issues

liveline: match benji.org inline code style with ::before background pill

Browse Source 
Inline code now uses a subtle rgba(0,0,0,0.04) background pill via a ::before
pseudo-element with absolute inset and 4px border-radius, matching
benji.org/liveline exactly. Dark mode uses rgba(255,255,255,0.08).
Moved styles from inline to CSS class .ll-inline-code.
This commit is contained in:
Tommy D. Rossi
2026-02-20 11:52:07 +01:00
parent 1fb714a247
commit 8511d17ed7
2 changed files with 78 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/routes/liveline.tsx
+1 -10
View File
@@ -382,16 +382,7 @@ function CodeBlock({ children, lang = "jsx" }: { children: string; lang?: string
function InlineCode({ children }: { children: React.ReactNode }) { function InlineCode({ children }: { children: React.ReactNode }) {
return ( return (
<code <code className="ll-inline-code">
style={{
fontFamily: "var(--ll-font-code)",
fontSize: "12.25px",
fontWeight: 475,
lineHeight: "12.25px",
letterSpacing: "-0.09px",
padding: "0 4px",
}}
>
{children} {children}
</code> </code>
); );
website/src/styles/liveline.css
+77 -44
View File
@@ -96,54 +96,52 @@
--ll-fade-12: rgba(255, 255, 255, 0); --ll-fade-12: rgba(255, 255, 255, 0);
} }
/* Dark mode overrides — uses @variant dark so it follows whatever /* Dark mode overrides — plain CSS, not processed by Tailwind.
strategy is configured in @custom-variant dark (globals.css) */ Uses .dark ancestor selector matching @custom-variant dark in globals.css */
@variant dark { .dark .liveline-page {
.liveline-page { --ll-text-primary: rgba(255, 255, 255, 0.9);
--ll-text-primary: rgba(255, 255, 255, 0.9); --ll-text-secondary: rgba(255, 255, 255, 0.45);
--ll-text-secondary: rgba(255, 255, 255, 0.45); --ll-text-tertiary: rgba(255, 255, 255, 0.25);
--ll-text-tertiary: rgba(255, 255, 255, 0.25); --ll-text-muted: rgba(255, 255, 255, 0.35);
--ll-text-muted: rgba(255, 255, 255, 0.35); --ll-text-hover: rgba(255, 255, 255, 0.7);
--ll-text-hover: rgba(255, 255, 255, 0.7); --ll-bg: rgb(17, 17, 17);
--ll-bg: rgb(17, 17, 17); --ll-border: rgba(255, 255, 255, 0.1);
--ll-border: rgba(255, 255, 255, 0.1); --ll-divider: rgba(255, 255, 255, 0.06);
--ll-divider: rgba(255, 255, 255, 0.06); --ll-code-bg: rgba(255, 255, 255, 0.05);
--ll-code-bg: rgba(255, 255, 255, 0.05); --ll-code-line-nr: rgba(255, 255, 255, 0.15);
--ll-code-line-nr: rgba(255, 255, 255, 0.15); --ll-selection-bg: rgba(255, 255, 255, 0.1);
--ll-selection-bg: rgba(255, 255, 255, 0.1);
--ll-btn-bg: rgb(30, 30, 30); --ll-btn-bg: rgb(30, 30, 30);
--ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px, --ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
rgba(255, 255, 255, 0.02) 0px 4px 16px, rgba(255, 255, 255, 0.02) 0px 4px 16px,
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset; rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--ll-primary: #60a5fa; --ll-primary: #60a5fa;
--ll-secondary: #f5a623; --ll-secondary: #f5a623;
--ll-overlay-bg: hsla(0, 0%, 7%, 0.8); --ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
--ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), --ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
0 1.625rem 3.375rem rgba(0, 0, 0, 0.3), 0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
0 1rem 2rem rgba(0, 0, 0, 0.2), 0 1rem 2rem rgba(0, 0, 0, 0.2),
0 0.625rem 1rem rgba(0, 0, 0, 0.15), 0 0.625rem 1rem rgba(0, 0, 0, 0.15),
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1), 0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.08), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
0 0 0.125rem rgba(0, 0, 0, 0.05); 0 0 0.125rem rgba(0, 0, 0, 0.05);
/* Header fade gradient stops (dark) */ /* Header fade gradient stops (dark) */
--ll-fade-0: rgb(17, 17, 17); --ll-fade-0: rgb(17, 17, 17);
--ll-fade-1: rgba(17, 17, 17, 0.737); --ll-fade-1: rgba(17, 17, 17, 0.737);
--ll-fade-2: rgba(17, 17, 17, 0.541); --ll-fade-2: rgba(17, 17, 17, 0.541);
--ll-fade-3: rgba(17, 17, 17, 0.382); --ll-fade-3: rgba(17, 17, 17, 0.382);
--ll-fade-4: rgba(17, 17, 17, 0.278); --ll-fade-4: rgba(17, 17, 17, 0.278);
--ll-fade-5: rgba(17, 17, 17, 0.194); --ll-fade-5: rgba(17, 17, 17, 0.194);
--ll-fade-6: rgba(17, 17, 17, 0.126); --ll-fade-6: rgba(17, 17, 17, 0.126);
--ll-fade-7: rgba(17, 17, 17, 0.075); --ll-fade-7: rgba(17, 17, 17, 0.075);
--ll-fade-8: rgba(17, 17, 17, 0.042); --ll-fade-8: rgba(17, 17, 17, 0.042);
--ll-fade-9: rgba(17, 17, 17, 0.021); --ll-fade-9: rgba(17, 17, 17, 0.021);
--ll-fade-10: rgba(17, 17, 17, 0.008); --ll-fade-10: rgba(17, 17, 17, 0.008);
--ll-fade-11: rgba(17, 17, 17, 0.002); --ll-fade-11: rgba(17, 17, 17, 0.002);
--ll-fade-12: rgba(17, 17, 17, 0); --ll-fade-12: rgba(17, 17, 17, 0);
}
} }
@supports (color: color(display-p3 1 1 1)) { @supports (color: color(display-p3 1 1 1)) {
@@ -213,6 +211,41 @@
} }
} }
/* ========================================================================
Inline code — subtle background pill via ::before pseudo-element.
Matches benji.org/liveline: position relative, ::before with absolute
inset creates a pill that extends slightly above/below the text.
======================================================================== */
.ll-inline-code {
position: relative;
display: inline-block;
font-family: var(--ll-font-code);
font-size: 12.6px;
font-weight: 460;
line-height: 12.6px;
letter-spacing: -0.09px;
padding: 1.6px 3.2px;
color: rgba(0, 0, 0, 0.75);
}
.ll-inline-code::before {
content: "";
position: absolute;
inset: -1.26px 0;
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
z-index: -1;
}
.dark .ll-inline-code {
color: rgba(255, 255, 255, 0.75);
}
.dark .ll-inline-code::before {
background: rgba(255, 255, 255, 0.08);
}
/* ======================================================================== /* ========================================================================
Header fade gradient Header fade gradient
======================================================================== */ ======================================================================== */