- Replace favicon.ico with transparent PNG favicons (32px, 16px) generated
from the gray extension icon, preserving alpha channel
- Move favicon links from hardcoded JSX to typed LinksFunction export in
root.tsx, rendered via <Links /> component
- Type liveline meta export as MetaFunction
- Add properly sized OG image (1200x630) for X/Slack/Discord previews,
update meta tags to reference it
- Remove 5 ChartPlaceholder stubs that were never replaced with real content
- Add OG meta tags (title, description, og:image 1280x800, twitter:card
summary_large_image) for rich previews on X, Slack, Discord
- Rename PropsTable to ComparisonTable with configurable headers prop,
fixing the hardcoded 'Prop/Type/Default' headers on comparison tables
- Remove stale Antigravity/Jetski comparison section
- Switch dark mode from .dark class toggle to prefers-color-scheme media
query via Tailwind @custom-variant. Remove inline JS script from root.tsx,
update all .dark selectors in liveline.css, liveline-prism.css to use
@variant dark from globals.css so strategy is defined in one place
- Fix scrollbar colors: light gray on light backgrounds, subtle white on
dark backgrounds (was using --color-muted which was invisible in both)
- Update remote access section with traforo link, VPN/firewall context,
MCP env var docs, and more use cases from docs/remote-access.md
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
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