Skip to content

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

Merged
zoosky merged 1 commit into
mainfrom
fix/site-mobile-layout
Sep 13, 2026
Merged

zoosky merged 1 commit into
mainfrom
fix/site-mobile-layout

Conversation

@zoosky

@zoosky zoosky commented Sep 13, 2026

Copy link
Copy Markdown
Owner

The site had no working phone layout. At 390px and 320px wide, every page was 488px wide and scrolled sideways, and the docs sidebar pushed the page title 606px down. This applies the fix made for the accent-sass site in zoosky/accent-sass#113, and adds the same build line to the footer.

Changes

  • Header. The links and the two buttons (search, theme) are now separate groups. Below 640px, the buttons stay beside the wordmark and the links take their own row, which scrolls sideways. Every link stays reachable. The old rule hid one link, and the rest still didn't fit. scroll-padding-top grows to match the taller header, so anchor jumps aren't hidden under it.
  • Docs sidebar. The sidebar is now a <details> menu. Below 940px it collapses to one line showing the current page. A short inline script closes it before first paint, so the page doesn't jump. Without JavaScript, the menu stays open. On desktop the summary is hidden and the sidebar looks as before.
  • Playground output header. The header can now wrap. The stylesheet select and the tabs can shrink, and the tabs scroll sideways if they still don't fit.
  • Footer. A new line reads Built with Accent CMS 0.25.1 (d7ed19b) · Last updated 2026-09-13. The version comes from accent.version_string and the date from site.built_at. File dates aren't used, because a CI checkout gives every file the checkout time. The date filter passes built_at through unformatted, so the template takes the first ten characters.

Measured

Built with Accent v0.25.1, the version pages.yml pins, and served with accent serve-static --base-path /accent-proust. Pages were loaded in 390px and 320px iframes, and every element extending past the viewport was listed.

  • Home, docs index, docs/rust and the playground now fit exactly at both widths. Before, each was 488px wide.
  • The docs title is at 205px, with the menu closed. Before, it was at 606px.
  • Playground at 320px: the pane's right edge is at 296px, and the select and tabs end at 285px. The tabs scroll, and each of the four tabs selects and shows its panel.
  • Desktop at 1280px: the header is still 61px tall, and the sidebar is still open and sticky.

The output header was clipped on desktop too, not only on a phone. At 1280px with the old nowrap, the tabs need more room than the pane has. With wrapping, the header takes two rows (81px instead of 48px) and nothing is cut off.

Not done

  • The WebAssembly build was skipped (--skip-wasm), so the engine didn't run in the local check. The layout doesn't depend on it.
  • Accent's pin in pages.yml stays at v0.25.1.

@zoosky
zoosky merged commit bc1ed60 into main Sep 13, 2026
13 checks passed
@zoosky
zoosky deleted the fix/site-mobile-layout branch September 13, 2026 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant