website: clean up liveline page, fix dark mode, add OG tags
- 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
This commit is contained in:
Tommy D. Rossi
@@ -1,5 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
@custom-variant dark (@media (prefers-color-scheme: dark));
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@@ -38,9 +38,8 @@
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.871 0.006 286.286);
|
||||
|
||||
/* Dark mode overrides — @variant dark inside :root compiles to
|
||||
:root:where(.dark, .dark *), following whatever strategy is
|
||||
configured in @custom-variant dark above */
|
||||
/* Dark mode overrides — uses prefers-color-scheme media query
|
||||
via @custom-variant dark above */
|
||||
@variant dark {
|
||||
--background: oklch(0.21 0.006 285.885);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
@@ -137,11 +136,21 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-muted);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-muted-foreground);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@variant dark {
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,93 +136,95 @@ pre[class*="language-"] {
|
||||
|
||||
/* ======================================================================
|
||||
Dark mode - GitHub Dark inspired palette.
|
||||
Plain CSS (not processed by Tailwind), uses .dark ancestor selector
|
||||
matching @custom-variant dark in globals.css.
|
||||
Uses @variant dark from globals.css so the strategy is defined in
|
||||
one place (@custom-variant dark in globals.css).
|
||||
====================================================================== */
|
||||
|
||||
.dark code[class*="language-"],
|
||||
.dark pre[class*="language-"] {
|
||||
color: #e6edf3;
|
||||
}
|
||||
@variant dark {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.keyword,
|
||||
.dark .token.module,
|
||||
.dark .token.imports,
|
||||
.dark .token.control-flow {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token.keyword,
|
||||
.token.module,
|
||||
.token.imports,
|
||||
.token.control-flow {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token.string,
|
||||
.dark .token.template-string,
|
||||
.dark .token.attr-value {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.token.string,
|
||||
.token.template-string,
|
||||
.token.attr-value {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.dark .token.function,
|
||||
.dark .token.class-name {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.dark .token.property,
|
||||
.dark .token.parameter {
|
||||
color: #ffa657;
|
||||
}
|
||||
.token.property,
|
||||
.token.parameter {
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
.token.tag .token.tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.class-name {
|
||||
color: #7ee787;
|
||||
}
|
||||
.token.tag .token.class-name {
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.attr-name,
|
||||
.dark .token.attr-name {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token.tag .token.attr-name,
|
||||
.token.attr-name {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token.number {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token.number {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token.operator {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token.operator {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.boolean,
|
||||
.dark .token.constant,
|
||||
.dark .token.builtin {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.token.boolean,
|
||||
.token.constant,
|
||||
.token.builtin {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.dark .token.comment,
|
||||
.dark .token.prolog,
|
||||
.dark .token.doctype,
|
||||
.dark .token.cdata {
|
||||
color: #8b949e;
|
||||
font-style: italic;
|
||||
}
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8b949e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.dark .token.tag .token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token.tag .token.punctuation {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.spread {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.token.spread {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.dark .token.plain-text {
|
||||
color: #e6edf3;
|
||||
}
|
||||
.token.plain-text {
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
.dark .token.regex {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.token.regex {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.dark .language-bash .token.function {
|
||||
color: #79c0ff;
|
||||
.language-bash .token.function {
|
||||
color: #79c0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,9 +113,10 @@
|
||||
--ll-fade-12: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
/* Dark mode overrides — plain CSS, not processed by Tailwind.
|
||||
Uses .dark ancestor selector matching @custom-variant dark in globals.css */
|
||||
.dark .liveline-page {
|
||||
/* Dark mode overrides — uses @variant dark from globals.css
|
||||
so the strategy is defined in one place */
|
||||
@variant dark {
|
||||
.liveline-page {
|
||||
--ll-text-primary: rgba(255, 255, 255, 0.9);
|
||||
--ll-text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--ll-text-tertiary: rgba(255, 255, 255, 0.25);
|
||||
@@ -161,6 +162,7 @@
|
||||
--ll-fade-11: rgba(17, 17, 17, 0.002);
|
||||
--ll-fade-12: rgba(17, 17, 17, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (color: color(display-p3 1 1 1)) {
|
||||
.liveline-page {
|
||||
@@ -258,12 +260,14 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dark .ll-inline-code {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
@variant dark {
|
||||
.ll-inline-code {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.dark .ll-inline-code::before {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
.ll-inline-code::before {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================
|
||||
|
||||
Reference in New Issue
Block a user