Skip to content

docs(nav): header responds to its own width; identical chrome at every size #179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
soamdesai-tfh merged 4 commits into from
Sep 10, 2026
Merged

docs(nav): header responds to its own width; identical chrome at every size #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
113ac9b
docs(nav): pill header responds to its own width via container query
soamdesai-tfh Sep 10, 2026
9f7624f
docs(nav): identical header chrome at every size
soamdesai-tfh Sep 10, 2026
c6b1378
docs(footer): single links row only — drop the theme's bottom utility…
soamdesai-tfh Sep 10, 2026
df26c5d
docs(home): keep the trademark line inline with the footer links on s…
soamdesai-tfh Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,19 +428,6 @@
"light": "/logo/world-developers.svg",
"dark": "/logo/world-developers-white.svg"
},
"navbar": {
"links": [
{
"label": "Explore Integrations",
"href": "https://world.org/ecosystem"
}
],
"primary": {
"type": "button",
"label": "Developer Portal",
"href": "https://developer.worldcoin.org"
}
},
"footer": {
"socials": {
"x": "https://x.com/worldnetwork",
Expand Down
55 changes: 39 additions & 16 deletions tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,15 @@
/* the logo, the tab row, and the search/assistant cluster lay out on */
/* ONE flex line — no absolute positioning, so the variable-width */
/* hosted cluster (Search + Ask Assistant) can never overlap the tabs. */
/* Below 1440px the two-row layout above remains. */
/* Below 1440px — including when the hosted assistant panel narrows */
/* the page without changing the window width — the two-row layout */
/* above remains: the pill activates on the header's own width via a */
/* container query, not a viewport media query. */
/* ------------------------------------------------------------------ */
@media (min-width: 1440px) {
#navbar {
container-type: inline-size;
}
@container (min-width: 1440px) {
/* No full-width backdrop: the pill floats on the page background. */
#navbar #navbar-transition {
display: none;
Expand All @@ -170,10 +176,11 @@
display: flex;
align-items: center;
column-gap: 16px;
/* Side margins scale with the viewport (the design frame's 63/1728
ratio) instead of stepping at a breakpoint, so the pill keeps the
same proportions as the window shrinks. */
width: calc(100% - 7.3vw);
/* Side margins scale with the header's own width (the design
frame's 63/1728 ratio), so the pill keeps the same proportions
as the window — or the page area beside the assistant panel —
shrinks. */
width: calc(100% - 7.3cqw);
max-width: 1602px !important;
height: 84px;
margin: 24px auto 0;
Expand All @@ -200,10 +207,14 @@
order: 1;
flex: 0 0 auto !important;
}
#navbar .nav-tabs-item {
white-space: nowrap;
}
#navbar .max-w-8xl > div > div.px-12 {
order: 2;
position: static;
width: max-content;
flex-shrink: 0;
height: auto !important;
padding: 0 !important;
margin-left: auto;
Expand Down Expand Up @@ -248,18 +259,19 @@
border-color: rgba(255, 255, 255, 0.15) !important;
color: #F3F2F0 !important;
}
/* The design's header right side is just the Search / Ask pills:
no Explore Integrations link (Ecosystem lives in the Resources
menu and the footer), no Developer Portal CTA (moved into the
Resources menu at these widths), no theme toggle (the theme still
follows the system preference; both remain below 1440px). */
#navbar li.navbar-link,
#navbar #topbar-cta-button,
#navbar #theme-preference-menu-trigger,
/* The emptied right-hand group collapses inside the pill. */
#navbar div.lg\:px-12 > div > div.justify-end {
display: none !important;
}
}
/* The header chrome is identical at every size, per the design: no
Explore Integrations link and no Developer Portal CTA (both removed
from docs.json navbar — Ecosystem and Developer Portal live in the
Resources menu and footer), and no theme toggle (the theme follows
the system preference). */
#navbar #theme-preference-menu-trigger {
display: none !important;
}

/* Quickstart: tighten code block spacing within the card */
.quickstart-code .code-block {
Expand Down Expand Up @@ -596,6 +608,15 @@
#footer.advanced-footer div[class*="min-w-[140px]"] {
display: none !important;
}
/* The design's footer is the single links row only: drop the theme's
bottom utility row (Powered by Mintlify + theme icons) and its
divider. Branding removal is a paid-plan Mintlify feature — if the
org's plan requires attribution, revert this rule or use the
dashboard's hide-branding toggle instead. */
#footer.advanced-footer > div > div.h-px,
#footer.advanced-footer > div > div:last-child {
display: none !important;
}
@media (max-width: 900px) {
.landing-footer-inner {
padding: 0 24px 48px;
Expand All @@ -605,7 +626,9 @@
padding: 64px 24px;
}
.landing-footer-links {
gap: 80px !important;
/* Wrapped rows stay together: the trademark line sits inline with
the links instead of floating far above them. */
gap: 16px 40px !important;
}
}
@media (max-width: 600px) {
Expand All @@ -626,7 +649,7 @@
font-size: 18px !important;
}
.landing-footer-links {
gap: 60px !important;
gap: 12px 32px !important;
}
}

Expand Down
Loading