diff --git a/website/src/badges.html b/website/src/badges.html
index f96ad51ff8..72278b52d0 100644
--- a/website/src/badges.html
+++ b/website/src/badges.html
@@ -48,12 +48,19 @@ templateEngineOverride: njk
background-color: var(--nav-color); transition: width .25s ease-out;
}
.b-links a:hover::before { width: 100%; left: 0; right: auto; }
- .b-theme { position: absolute; right: 0; margin-right: 20px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
+ .b-theme { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
+ .b-theme-top { position: absolute; right: 0; margin-right: 20px; }
+ .b-theme-inline { display: none; }
.b-theme svg { width: 20px; height: 20px; }
.b-theme svg path { fill: var(--nav-color); }
.b-theme .sun { display: none; }
html.dark .b-theme .sun { display: block; }
html.dark .b-theme .moon { display: none; }
+ /* The hamburger shows only on phones; there the links collapse into a dropdown it toggles. */
+ .b-burger { display: none; position: absolute; right: 0; margin-right: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
+ .b-burger svg { width: 24px; height: 24px; }
+ .b-burger svg path { fill: var(--nav-color); }
+ .b-theme-label { font-family: "Manrope", sans-serif; color: var(--nav-color); font-size: 16px; font-weight: 500; }
/* The frame sits under the fixed navbar (the app pads its own top to clear it) and is sized
to its content by the app's height messages, so the page — not the frame — scrolls, and
the footer follows naturally. 100vh is only the size before the first message arrives. */
@@ -67,7 +74,28 @@ templateEngineOverride: njk
opacity: 0; transition: opacity .25s ease;
}
html.dark #badges-frame { background: #000832; }
- @media (max-width: 640px) { .b-links { gap: 24px; } }
+ @media (max-width: 640px) {
+ .b-burger { display: flex; align-items: center; }
+ .b-theme-top { display: none; }
+ /* The links become a frosted dropdown pinned under the hamburger, shown only when open. */
+ .b-links {
+ position: absolute; top: 54px; right: 8px;
+ flex-direction: column; align-items: stretch; gap: 2px;
+ min-width: 190px; padding: 8px;
+ /* Solid, and a shade off the page — the surfaces the site's own mobile menu uses — so
+ the panel reads as a distinct card, not see-through against the matching ground. */
+ background: #fff; border: 1px solid rgba(0, 23, 150, .12);
+ border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 8, 50, .18);
+ display: none;
+ }
+ html.dark .b-links { background: #0a0f2b; border-color: rgba(255, 255, 255, .12); }
+ .b-nav.open .b-links { display: flex; }
+ .b-links a { padding: 10px 12px; border-radius: 8px; font-size: 16px; }
+ .b-links a::before { display: none; }
+ .b-links a:hover { background: rgba(0, 23, 150, .06); }
+ html.dark .b-links a:hover { background: rgba(255, 255, 255, .06); }
+ .b-theme-inline { display: flex; justify-content: flex-start; gap: 8px; padding: 10px 12px; }
+ }
@@ -76,14 +104,24 @@ templateEngineOverride: njk
-