Fit the site to a phone, and show the build in the footer

[zoosky]

Why

On a phone, the documentation site scrolled sideways on every page, and on docs pages the whole sidebar came before any content. The footer also gave no way to tell which build a reader was looking at.

What changes

Header

On a 390px screen, the header's single 60px row held the wordmark, six links and two buttons, and ran to 521px. The GitHub link, the search button and the theme toggle were off-screen, and every page scrolled sideways. Hiding API and Changelog below 640px had not made the rest fit.

• Below 640px the header now wraps. The two buttons stay beside the wordmark, and the links get a full-width row that scrolls sideways. Every link stays reachable, and none is hidden.
• The buttons moved out of the nav into their own .site-tools group, so the two can be laid out separately.
• The scroll offset for in-page links grows to match the taller header.

Docs sidebar

Below 940px the sidebar sits above the content, so a phone showed twenty links before the page itself.

• The sidebar is now a <details> disclosure. It ships open, and its summary names the current page.
• An inline script closes it on a narrow screen before the content below it renders, and reopens it if the width crosses the breakpoint. The script is inline rather than in the deferred chrome.js, because a deferred script would close the list only after it had painted, and the page would jump.
• Without JavaScript the sidebar stays open, as it is today. On a wide screen the summary is hidden and the sidebar is unchanged.

Footer build line

The footer now ends with, for example, Built with Accent CMS 0.25.1 (d7ed19b) · Last updated 2026-09-13.

• Version: the version and hash come from accent.version_string.
• Date: the date comes from site.built_at, the build time. On this site that is when a change was last deployed, because the Pages workflow rebuilds on every change to the docs, the theme, the compiler or CHANGELOG.md. Per-file modification dates would only be the CI checkout time.
• Formatting: the date filter passes the ISO timestamp through unformatted, so the template shows its first ten characters. The full timestamp stays in the datetime attribute.
• Accent version: site.built_at is not in v0.25.1's documentation, but v0.25.1 does render it. I checked with the v0.25.1 binary, the release the workflow pins. site.last_modified is the fallback if a release ever omits it.

Home page

The code sample on the home page imported from "accent-sass". The npm package is @zoosky/accent-sass.

What was measured

In Chrome, each page loaded in a 390px frame and a 320px frame, where media queries respond to the frame width, and at 1280px. A script listed every element extending past the viewport.

Page	390px, before	390px, after	320px, after
Home	521px wide	390	320
Guide: install	521	390	320
Reference: compatibility	521	390	320
Changelog	521	390	--
Demo	521	390	--

The only element still flagged is the skip link, which sits off-screen by design.

• Docs menu: it starts closed on a phone. The page heading moves up to 205px, instead of sitting below the list, and tapping the summary opens the menu.
• Search: the dialog fits a 390px screen (16px to 374px) and returns results.
• Desktop: at 1280px the header is a single 61px row, and the sidebar is sticky and open with its summary hidden, as before.
• Footer line: it renders with Accent v0.25.1 and with 0.26.0-dev, and fits the phone footer. The v0.25.1 build also renders the new header, the disclosure and the corrected import.

Tables and code blocks already scrolled inside themselves on a phone, and the demo's panes and tabs already fit, so neither changed.