[preview only] Docs 3.0 QA round 2 — all changes combined - #178
Closed
soamdesai-tfh wants to merge 12 commits into
Closed
[preview only] Docs 3.0 QA round 2 — all changes combined#178soamdesai-tfh wants to merge 12 commits into
soamdesai-tfh wants to merge 12 commits into
Conversation
…alignment Design QA fixes against the World Website Handoff Figma (Homepage - live, node 78456-89219): - Align the navbar container with the page content: 1728px frame with 96px gutters at desktop, so the logo, tabs, hero, and content share the same left edge (docs pages pull the sidebar wrapper to match). - Add Resources and Support dropdown tabs to the navigation, separated from the page tabs by a hairline divider per the new header design. Their menus absorb the old global sidebar anchors (Telegram, email, GitHub), which the design drops from the sidebar. - Restyle tabs to the design language: ink labels, black pill for the active tab (inverted in dark mode), no underline indicator; search entry restyled to the quiet bordered pill. - Add the missing footer on docs pages via footer.links, restyled to the design's single row: ™ 2026 World left, six ink links right. - Hide the floating assistant chat launcher; the assistant remains reachable from the header. - Update the Go to World Tech link to /blog?blog_type=world-tech (both visibility twins) and underline it per the design. - Sidebar: selected item is now the neutral pill (#F3F2F0 bg, #181818 text, 6px radius) instead of theme blue; drop the blue badge swap. - Homepage detail pass from the design frame: hero sub width 487px, World Tech Updates rows get hairline dividers and 40px padding, story cards 756px/24px gap with right-gutter bleed, card icons 32px, section spacing to 160/240/240.
Collapse the theme's two-row header into the design's floating 84px pill at ≥1440px: logo left, adjacent pill tabs centered (752px row per the mock), compact search pill and CTA right, 63px side margins at the 1728px frame so the logo shares the 96px page gutter. Tab pills tighten to the design metrics (zero gap, 10px padding, 14px on the active pill). Between 1440-1600px the theme toggle steps aside; below 1440px the two-row layout remains.
The gap between the world mark and 'Developers' in the combined logo SVGs rendered ~47% wider than the mock (12.6px vs 8.6px at the header scale). Shift the wordmark 6.1 viewBox units left in both variants (canvas 233 -> 226.9) so the gap ratio lands on the design's 5.16%, and keep the pill-header logo block at the mock's 166px width.
Hide the Developer Portal CTA and the theme toggle at pill widths (>=1440px): the design's header carries only the Search and Ask pills. Developer Portal joins the Resources menu so it stays one click away; the theme still follows the system preference, and both elements remain in the sub-1440 layouts and mobile nav.
…ible The hosted header carries a wide Search + Ask Assistant cluster that the absolutely-centered tab row painted under at sub-1728 widths (tabs were hidden behind the pills). Flatten the theme's two-row scaffolding with display:contents so logo, tabs, and the cluster are items on ONE flex line: auto margins center the tabs in the free space and the layout can never overlap regardless of cluster width. Also style the hosted Ask Assistant entry as the design's Ask pill and compact the search entry by rule (the prod cluster lacks the justify-center class the previous selector keyed on).
The pill's side margins jumped from 63px to 24px below 1600px, so the bar visibly widened as the window shrank. Use the design frame's ratio (63/1728 per side, 7.3vw total) continuously, capped at the 1602px design width — same proportions at every desktop size, and the logo stays on the 96px gutter at the 1728px frame.
The hosted assistant panel narrows the page without changing the window width, so the viewport media query kept the single-row pill active in a ~1340px slot and the tab labels wrapped inside their pills. Make #navbar an inline-size container and gate the pill on a container query instead: when anything narrows the header below 1440px the two-row layout returns. Margins now scale with the header's own width (cqw), and the tab row is belt-and-braces nowrap/no-shrink inside the pill.
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
Contributor
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Preview-only — do not merge. This branch holds every Docs 3.0 QA round 2 change combined, so the whole redesign can be reviewed on one Mintlify preview:
🔍 Preview: https://tfh-soam-developer-docs-qa-51c376.mintlify.site
(Best viewed at desktop width ≥1440px for the pill header; check the homepage, any World ID docs page, and the footers.)
What's in here, and the PRs that actually merge it:
blog?blog_type=world-tech, updates-row dividersMerging the six non-draft PRs in any order reproduces this branch exactly (minus the newsletter). When they're all merged, close this PR and delete the branch.