- Replace arrow + 'Index' link with bold 'playwriter' logo text in TOC sidebar
- Remove 'Playwriter' subtitle and '2025' year from page header, start with first paragraph
- Remove rounded-lg from chart placeholder images for sharp edges
Code blocks and chart placeholders now extend 36px beyond the 550px prose
column on each side via negative margins (.ll-bleed class). This aligns the
code text (after line numbers) flush with the prose left edge.
- --ll-bleed: 36px CSS variable (8px div padding + 28px line-number span)
- Responsive: bleed disabled below 650px viewport
- overflow-x-hidden on page wrapper prevents horizontal scroll
Inline script in <head> applies .dark class on <html> based on OS preference
and listens for live changes. All liveline page colors now use CSS variables
with dark overrides in .dark .liveline-page block.
- liveline.css: new vars (--ll-text-muted, --ll-text-hover, --ll-divider,
--ll-code-line-nr, --ll-btn-bg/shadow, --ll-fade-*) + full dark overrides
- liveline-prism.css: GitHub Dark syntax highlighting theme under .dark
- liveline.tsx: ~30 hardcoded rgba/hex colors replaced with CSS vars
- root.tsx: anti-FOUC script toggling .dark from prefers-color-scheme
Simplifies article content by extracting repeated patterns into
reusable components:
- Section: wraps Divider + SectionHeading + children
- List: styled ul with typography inline styles
- Li: styled li with correct padding
Article JSX now reads as clean declarative markup instead of
verbose inline-styled HTML.
Recreates the benji.org/liveline page in the website folder using React,
Tailwind, and the same editorial design system. Charts are replaced with
static SVG placeholders.
Typography:
- Inter variable font from rsms.me (same source as next/font)
- font-weight 475 body, 560 headings, font-optical-sizing: auto
- 14px body, 20px line-height, -0.09px letter-spacing
- Near-black text rgb(17,17,17), 40% opacity secondary
- Display P3 accent colors with @supports fallback
Layout:
- 550px narrow content column, fixed TOC sidebar
- Stagger-in entrance animation with cascading delays
- Fixed header fade gradient (multi-stop white-to-transparent)
- Scroll-spy TOC highlighting via IntersectionObserver
Code blocks:
- Prism.js syntax highlighting with GitHub-light color palette
- Line numbers column with 20px right padding
- 12px / 18px font size
Props tables, dividers, captions, code blocks, bullet lists all
styled to match the original computed values.
Tommy D. Rossi