Add mobile-responsive CSS#13
Open
rdubar wants to merge 3 commits into
Open
Conversation
Appends media queries to both jargon.css (entry pages) and html/jargon.css (letter-index pages) without touching any existing rules: - Mobile (≤640px): 16px body font, padding, overflow-wrap; nav tables (DocBook navheader/navfooter) reflowed as flex rows so Prev/Next links stack correctly instead of overflowing; 44px min touch targets on nav links; pre/code/tt wrap to prevent horizontal scroll; images capped at 100% width. - Desktop (≥900px): content centred with max-width 860px for readability on wide screens. Note: a <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the HTML templates would further improve initial scale on mobile. That change would affect the XSL build pipeline and is left as a follow-up. Co-Authored-By: Roger Dubar <rdubar@gmail.com>
- Insert <meta name="viewport" content="width=device-width, initial-scale=1"/> into all 2413 HTML files — without this, mobile browsers render at desktop width and scale down, so media queries never fire - Add html/body overflow-x:hidden + width:100% + box-sizing:border-box to the mobile block so content can't escape the viewport - Add box-sizing and explicit width:100% to navheader/navfooter tables Co-Authored-By: Roger Dubar <rdubar@gmail.com>
…le row - Redo viewport meta patching in binary mode — previous approach decoded files as UTF-8 and corrupted ISO-8859-1 non-breaking space bytes (0xA0) into UTF-8 replacement characters (0xEF BF BD) - Add tbody/display:block so flex layout reaches tr/td through the browser's implicit tbody insertion - Hide .navheader tr:first-child on mobile — it repeats the entry term name which appears immediately below in the content, saving vertical space Co-Authored-By: Roger Dubar <rdubar@gmail.com>
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.
Summary
Adds media queries to both
jargon.css(entry pages) andhtml/jargon.css(letter-index pages) for better reading on mobile devices. No existing rules are changed — the new block is purely additive.Mobile (≤ 640px)
navheader/navfooterreflowed as flex rows so Prev/Next links wrap correctly instead of overflowing the screenpre,code,ttwrap to prevent horizontal scrollDesktop (≥ 900px)
max-width: 860pxfor readability on wide screensNote on viewport meta tag
A
<meta name="viewport" content="width=device-width, initial-scale=1">in the HTML<head>would further improve initial scale on mobile (without it some browsers default to a zoomed-out desktop view). That change touches the XSL build pipeline, so I've left it as a follow-up — happy to take a look at that too if it's useful.From rdubar/jargon — a CLI for the Jargon File that uses this repo as its data source.