The demo moves out of the lofi dropdown to stand beside lofi and lofi-node, styled after the demo's own incident-report button: heat gradient, sharp 2px corners, char text, ember glow on hover, warm focus ring. Self-contained colors keep it identical across color modes and in the mobile drawer.
- commit
- 5409df2b75da162f38dcd46c7f87929dc2dfe840
- parent
- 303cceb2662346acb171f623ae7f317d68e33d87
- author
- FelineStateMachine <dami.etoile@gmail.com>
| M | website/ | 12 | ++++++++++-- |
| M | website/ | 30 | ++++++++++++++++++++++++++++++ |
@@ -259,8 +259,9 @@ const config: Config = {
259259 respectPrefersColorScheme: true,260260 },261261 navbar: {262- // Two trees, no wordmark: the site now fronts two products, and each262+ // Two trees, no wordmark: the site fronts two products, and each263263 // product's own dropdown carries its links (so no top-level GitHub/JSR).264+ // The demo stands beside them as a third top-level entry.264265 logo: {265266 alt: "lofi",266267 src: "img/two-trees.svg",@@ -278,7 +279,6 @@ const config: Config = {
278279 items: [279280 { label: "docs", to: "/docs" },280281 { label: "api", to: "/api" },281- { label: "demo", href: "https://demo.lofi.host" },282282 {283283 label: "github",284284 href: "https://github.com/FelineStateMachine/lofi",@@ -301,6 +301,14 @@ const config: Config = {
301301 { label: "jsr", href: "https://jsr.io/@nzip/lofi-node" },302302 ],303303 },304+ {305+ label: "demo",306+ position: "left",307+ href: "https://demo.lofi.host",308+ // Wears the demo's magma styling (custom.css) instead of the309+ // navbar link treatment.310+ className: "navbar-demo-link",311+ },304312 ],305313 },306314 footer: {@@ -93,6 +93,36 @@
9393 color: #f3faf6;9494 }9595 96+/* The demo entry wears the demo's own magma dress — the incident board's97+ report button: heat gradient, sharp 2px corners, char text, ember glow on98+ hover, warm focus ring. Self-contained, so it reads the same on both color99+ modes and in the mobile drawer. */100+.navbar-demo-link {101+ background: linear-gradient(120deg, #b3122e, #ff3d00 55%, #ff9d45);102+ border-radius: 2px;103+ color: #1a0703;104+ font-weight: 800;105+ letter-spacing: 0.05em;106+ text-transform: uppercase;107+}108+.navbar__items .navbar-demo-link {109+ margin-left: 0.25rem;110+ padding: 0.25rem 0.75rem;111+}112+.navbar-sidebar .menu__link.navbar-demo-link {113+ color: #1a0703;114+ margin: 0.25rem 0;115+ width: fit-content;116+}117+.navbar-demo-link:hover {118+ box-shadow: 0 0 20px rgba(255, 61, 0, 0.4);119+ color: #1a0703;120+}121+.navbar-demo-link:focus-visible {122+ outline: 3px solid #ffcf99;123+ outline-offset: 2px;124+}125+96126 /* Dracula's comment color fails WCAG contrast on its background; sage97127 clears 4.5:1. prism-react-renderer inlines token colors, so !important. */98128 [data-theme="dark"] .theme-code-block .token.comment,