localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ticker: replace LiveWire with dual-row neon ticker (news + events)

Browse Source 
Row 1 (Live Wire, scrolls →): most recent imported + AI-rewritten
articles, neon-green label, monospaced [HH:MM] [SOURCE_CODE] prefix.
Row 2 (On Calendar, scrolls ←, slower): upcoming events from
bb.events (confirmed/tentative, start_date >= today), neon-cyan
label, [Mon DD] [SHORT_NAME] prefix.

Defensive: each query is in its own try/catch so a partial failure
renders an empty row rather than crashing the page — that was the
silent build crash that took down the prior DoubleTicker incarnation.
If BOTH queries return zero rows we render nothing instead of two
blank bars.

CSS tokens added to redesign-tokens.css:
- bb-marquee--reverse + bb-marquee--slow modifiers
- .bb-neon-bar / .bb-neon-label / .bb-neon-time / .bb-neon-code
  (scoped class names so this is the ONLY place on the site that
  uses the neon palette — rest of the site keeps dark-navy + blue)

User cancelled the wholesale neon redesign; only the dual-ticker
keeps the neon green/cyan styling.
This commit is contained in:
Ryan Salazar
2026-05-20 07:02:15 +00:00
parent 5c3432915a
commit a9823b1d8a
4 changed files with 247 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles/redesign-tokens.css
View File

@@ -74,9 +74,49 @@
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes bb-marquee-reverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.bb-marquee {
display: flex;
white-space: nowrap;
animation: bb-marquee 90s linear infinite;
}
.bb-marquee:hover { animation-play-state: paused; }
.bb-marquee--reverse {
animation-name: bb-marquee-reverse;
}
.bb-marquee--slow {
animation-duration: 140s;
}
/* Neon dual-ticker tokens — used ONLY inside DoubleTicker. */
.bb-neon-bar {
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(5,10,8,0.55));
border-top: 1px solid rgba(0,255,159,0.18);
border-bottom: 1px solid rgba(0,255,159,0.18);
}
.bb-neon-bar + .bb-neon-bar {
border-top: 1px solid rgba(0,212,255,0.10); /* faint divider between the two */
}
.bb-neon-label {
background: #00ff9f;
color: #050a08;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.15em;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
flex-shrink: 0;
text-shadow: none;
}
.bb-neon-label--cyan {
background: #00d4ff;
}
.bb-neon-time { color: #707070; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.bb-neon-code { color: #00ff9f; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.bb-neon-code--cyan { color: #00d4ff; }
.bb-neon-text { color: #d4d4d4; }
.bb-neon-text:hover { color: #00ff9f; text-shadow: 0 0 8px rgba(0,255,159,0.4); }