LiteSun commented on code in PR #2073:
URL: https://github.com/apache/apisix-website/pull/2073#discussion_r3628095058
##########
next/src/styles/global.css:
##########
@@ -0,0 +1,292 @@
+:root {
+ --color-primary: #e8433e;
+ --color-primary-dark: #9a2521;
+ --color-text: #1c1e21;
+ --color-text-soft: #525860;
+ --color-surface: #fff;
+ --color-surface-alt: #f8f8fa;
+ --color-border: #eaecef;
+ --color-code-bg: #f6f7f8;
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
Arial, sans-serif;
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
monospace;
+ --max-width: 1140px;
+ --header-height: 60px;
+ --radius-card: .75rem;
+ --color-surface-warm: #faf7f7;
+ --color-badge-bg: #fcebeb;
+ --color-badge-text: #a32d2d;
+ --color-hover-border: #f3b6b3;
+ --shadow-card-hover: 0 10px 28px rgb(0 0 0 / 7%);
+ --dur: .18s;
+ --ease: ease;
+}
+
+* { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; scroll-padding-top:
calc(var(--header-height) + 12px); }
+body {
+ margin: 0;
+ font-family: var(--font-sans);
+ color: var(--color-text);
+ background: var(--color-surface);
+ line-height: 1.65;
+ font-size: 16px;
+}
+img { max-width: 100%; height: auto; }
+a { color: var(--color-primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
+
+/* ---------- header ---------- */
+.announcement { background: var(--color-primary); color: #fff; text-align:
center; font-size: .9rem; padding: .5rem 1rem; }
+.announcement a { color: #fff; text-decoration: underline; font-weight: 600; }
+.site-header {
+ position: sticky; top: 0; z-index: 100;
+ background: var(--color-surface);
+ border-bottom: 1px solid var(--color-border);
+ height: var(--header-height);
+}
+.site-header .container { display: flex; align-items: center; gap: 1rem;
height: 100%; }
+.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700;
color: var(--color-text); font-size: 1.05rem; }
+.brand img { height: 30px; width: auto; }
+.brand:hover { text-decoration: none; }
+.main-nav { margin-left: auto; display: flex; align-items: center; gap:
.25rem; }
+.main-nav > a, .nav-drop > summary {
+ padding: .4rem .65rem; border-radius: 6px; color: var(--color-text);
+ font-size: .95rem; cursor: pointer; list-style: none; white-space: nowrap;
+}
+.nav-drop > summary::-webkit-details-marker { display: none; }
+.main-nav > a:hover, .nav-drop > summary:hover { background:
var(--color-surface-alt); text-decoration: none; }
+.nav-drop { position: relative; }
+.nav-drop > .menu {
+ position: absolute; right: 0; top: calc(100% + 6px);
+ background: var(--color-surface); border: 1px solid var(--color-border);
+ border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
+ min-width: 270px; padding: .4rem; display: none;
+}
+.nav-drop[open] > .menu { display: block; }
+.nav-drop .menu a { display: block; padding: .4rem .6rem; border-radius: 6px;
color: var(--color-text); font-size: .9rem; }
+.nav-drop .menu a:hover { background: var(--color-surface-alt);
text-decoration: none; }
+.mobile-toggle { display: none; }
+
+@media (max-width: 900px) {
+ .main-nav { display: none; }
+ .mobile-toggle { display: block; margin-left: auto; }
+ .mobile-toggle > summary { list-style: none; cursor: pointer; padding: .4rem
.6rem; }
+ .mobile-toggle > .menu {
+ position: fixed; inset: var(--header-height) 0 auto 0;
Review Comment:
[P1] The mobile menu covers the header and its own toggle
At widths up to 900px, the menu is fixed at `top: var(--header-height)`. At
the top of the page, the announcement bar pushes the sticky header down, so the
menu overlays the header and hamburger button. Once opened, users cannot close
it without navigating away. Please position the menu relative to the header—for
example, with `position: absolute; top: 100%`—or otherwise account for the
announcement offset.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
