Make the pages responsive on phones - #21
Merged
Merged
Conversation
The site had no viewport meta tag, so phones rendered the 950px desktop layout scaled down. Adding it exposed a few layout issues that are fixed here as well: - .flex-column had a hard min-width of 470px, wider than a phone viewport, which made the whole page scroll horizontally - #menu was 4px wider than its container because its 2px border was added on top of width:100% - the GPL notice and the command lines could not wrap Breakpoints at 800/600/480/380px tighten padding, wrap the menu into a flex row with tappable entries, wrap the GPL block, cap the gallery items at one thumbnail wide and show the whole header logo instead of cropping its sides. The desktop rendering is unchanged apart from the 4px menu fix. The gallery rules were written with CSS nesting; they are now flat selectors so that they also apply in browsers without nesting support, where the thumbnails otherwise lost their fixed size. Also declares the UTF-8 charset - the About page contains en-dashes that were rendered as mojibake without it - and the document language. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019XJeo2Rp5sDjApHWf77wza
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.
The site had no viewport meta tag, so phones rendered the 950px desktop layout scaled down. Adding it exposed a few layout issues, fixed here as well.
Changes
header.html<meta name="viewport" content="width=device-width, initial-scale=1">— the main fix.<meta charset="utf-8">— the About page contains real UTF-8 en-dashes ("Navier–Stokes–Cahn–Hilliard", "vapour–liquid") that were rendered as mojibake without a declared charset.lang="en"on<html>._generated/css/style.css.flex-columnhad a hardmin-width: 470px, wider than a phone viewport, which made the whole page scroll horizontally.#menuwas 4px wider than its container because its 2px border was added on top ofwidth: 100%; nowbox-sizing: border-box.img { max-width: 100% },pre { overflow-x: auto },#content { overflow-wrap: break-word }.background-size: containso its edges are not cropped.& > li,& img, …) and are now flat selectors, so they also apply in browsers without nesting support — there the thumbnails otherwise lost their fixed 200×150 size and showed list bullets.Verification
Rendered all three pages headless at 320/375/414/768/1024/1280 px:
scrollWidth == clientWidth) at any width.box-sizingfix, a 2px shift of the labels) and the gallery block. The gallery was checked by patching the old stylesheet with nesting emulated: it then produces exactly the new geometry (241px tall, page height 2153), confirming current browsers already rendered it that way.No content or design changes.
🤖 Generated with Claude Code
https://claude.ai/code/session_019XJeo2Rp5sDjApHWf77wza