Consolidate site styles and fix site navigation - #56
Merged
Conversation
The four page templates each carried a near-copy of the same CSS, and they had already drifted apart: different skip-link colours, body line heights, and mobile breakpoints. Replace all of it with a single site.css, scoped by a body class per page type. Other site fixes: - Give the home page its own H1 and title. It previously duplicated the external monitor guide word for word, so the two pages competed for the same query. - Serve the hero screenshot through srcset so a 2x capture can be dropped in later. Until images/image1@2x.png exists, the workflow publishes the 1x file under the 2x name. - Use the same navigation and footer everywhere. Support and Privacy had no link to the guides at all, which is where people troubleshooting DDC/CI land first. - Stop hiding the first navigation link on small screens. The navigation wraps instead. - Add FAQPage data to Support and TechArticle data to both guides. - Name the Homebrew command blocks with a group role instead of an aria-label on the pre, which carries no role to hold the name, and make them keyboard scrollable. A copy button is added by script, so pages without JavaScript do not show a dead control. - Add a branded 404 page. - Add lastmod to the sitemap and og:locale to every page.
The menu panel is 300 points wide, so images/image1.png at 600 pixels is already a 2x capture and macOS will not produce a sharper one. The site was stretching it to 420 CSS pixels, which is what made it look soft. Render the screenshot at 300 CSS pixels, where it maps exactly to the Retina grid, and give the figure a stage so the hero column keeps its visual weight at the smaller image size. This also removes the srcset and the workflow's optional 2x asset, which cannot exist. Stack the header on small screens while here. The navigation now has the full width and keeps all four links on one row down to 320 pixels.
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.
Review pass over the published site (
documentation/), fixing the issues it turned up.Styles
The four page templates each carried a near-copy of the same CSS, and they had already drifted: different skip-link colours, body line heights, and mobile breakpoints. All of it is now one
site.css, scoped by a body class per page type (.page-home,.page-guide,.page-doc).guides.cssand the three inline<style>blocks are gone.Search and metadata
FAQPagedata on Support,TechArticledata on both guides.lastmodin the sitemap,og:localeand full Open Graph tags on every page.Navigation
Hero screenshot
The menu panel is 300 points wide, so
images/image1.pngat 600 pixels is already a 2x capture. The site was stretching it to 420 CSS pixels, which is what made it look soft. It now renders at 300 CSS pixels, mapping exactly to the Retina grid, with a stage behind it so the hero column keeps its visual weight.Accessibility
The Homebrew command blocks were named with an
aria-labelon thepre, which has no role to hold the name. They are now arole="group"wrapper with the label, and the scrollablepreis keyboard reachable. A copy button is added by script so pages without JavaScript do not show a dead control.Verification
Ran the Pages prepare step locally and served the result. All internal links resolve, all JSON-LD parses, one H1 per page with no heading-level jumps, no inline styles remain. In the browser: no horizontal scroll from 320 to 1440, no console errors, tab order matches visual order, the copy button writes the correct text, the screenshot renders at an effective 2x or better at every breakpoint, and light and dark both render correctly.