From 2460877b7769f30e995827e554640b4042109e4f Mon Sep 17 00:00:00 2001 From: Christian Diddens Date: Tue, 4 Aug 2026 13:33:16 +0200 Subject: [PATCH] Make the pages responsive on phones 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) Claude-Session: https://claude.ai/code/session_019XJeo2Rp5sDjApHWf77wza --- _generated/css/style.css | 134 +++++++++++++++++++++++++++++---------- header.html | 4 +- 2 files changed, 104 insertions(+), 34 deletions(-) diff --git a/_generated/css/style.css b/_generated/css/style.css index 27f1040..00d8fab 100644 --- a/_generated/css/style.css +++ b/_generated/css/style.css @@ -1,7 +1,10 @@ body, html { padding:0; margin:0; } -body{ background-color:#FFF;} +body{ background-color:#FFF; -webkit-text-size-adjust:100%; } h1 {font-size:26px;color:#202020;} -img {border-style:none;} +img {border-style:none; max-width:100%;} + +/* never let media or preformatted text push the page wider than the viewport */ +pre {overflow-x:auto;} a {text-decoration:underline; color:#000000;} @@ -22,7 +25,8 @@ a {text-decoration:underline; color:#000000;} background-color: #DDD; border-radius: 12px; border: 2px solid #000; - padding: 0px; + padding: 0px; + box-sizing: border-box; } @@ -36,7 +40,8 @@ a {text-decoration:underline; color:#000000;} #content {position:static; padding:25px; font-family:'lucida grande',verdana,helvetica,arial,sans-serif;font-size:16px; line-height:1.6; margin-left: auto; margin-right:auto; background-color:#FFF;} -#content {max-width: 950px;min-height:800px} +#content {max-width: 950px;min-height:800px} +#content {overflow-wrap: break-word;} #content {background-color:#FFF;} @@ -60,7 +65,9 @@ a {text-decoration:underline; color:#000000;} } .flex-column { - min-width: 470px; + /* 470px keeps the two-column layout on wide screens, but the column must never + be wider than its container, otherwise narrow viewports scroll horizontally */ + min-width: min(470px, 100%); } .flex-column ul { @@ -150,35 +157,96 @@ text-decoration:none; overflow-x: auto; overscroll-behavior-inline: contain; +} + +/* These used to be nested inside the rule above with `&`. Written out flat, so + that they also apply in browsers without CSS nesting - there the thumbnails + would otherwise fall back to their intrinsic size and show list bullets. */ + +.horizontal-media-scroller > li { + display: inline-block; /* removes the list-item bullet */ +} + +.horizontal-media-scroller picture { + inline-size: var(--size); + block-size: var(--size); +} + +.horizontal-media-scroller img { + /* smash into whatever box it's in */ + inline-size: 100%; + block-size: 100%; + width: 200px; + height: 150px; + max-width: none; /* thumbnails keep their fixed size, the strip scrolls instead */ + + /* don't squish but do cover the space */ + object-fit: contain; + + /* soften the edges */ + border-radius: 1ex; + overflow: hidden; +} + +.horizontal-media-scroller figcaption { + text-align: center; +} - - & > li { - display: inline-block; /* removes the list-item bullet */ - } - & picture { - inline-size: var(--size); - block-size: var(--size); +/* --------------------------------------------------------------------------- + Small screens (tablets in portrait and phones). + Same content and same design, only tightened up so that nothing overflows + the viewport and the touch targets stay usable. + --------------------------------------------------------------------------- */ + +@media screen and (max-width: 800px) { + #content { padding: 18px; } + + /* below this width the entries no longer fit on one line, so lay them out as + a wrapping flex row - inline items would wrap into ragged, uneven rows */ + #menu ul { font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; } + #menu li { margin-left: 10px; margin-right: 10px; display: inline-block; } +} + +@media screen and (max-width: 600px) { + #content { padding: 14px; } + + h1 { font-size: 22px; } + + /* wrap the menu onto as many rows as needed, with room to tap each entry */ + #menu { line-height: 1.4; padding: 6px 4px; } + #menu ul { font-size: 17px; row-gap: 4px; } + #menu li { margin-left: 8px; margin-right: 8px; padding-bottom: 0; } + #menu a { display: inline-block; padding: 6px 4px; } + + /* the feature lists lose the browser's default list indentation */ + .flex-column ul { padding-left: 0; } + + /* the GPL notice is fixed-width plain text: wrap it instead of scrolling it */ + #gpl { white-space: pre-wrap; overflow-wrap: break-word; font-size: 13px; } + + /* command lines can be longer than a phone is wide */ + .code-box codebox { text-indent: 0; overflow-wrap: anywhere; } + + /* publication list: reclaim the wide default indentation of the numbers */ + #content ol { padding-left: 1.6em; } + + /* one thumbnail at a time, captions wrapping under it */ + .horizontal-media-scroller { gap: 12px; } + .horizontal-media-scroller > li { max-width: 200px; } +} + +@media screen and (max-width: 480px) { + /* show the whole logo instead of cropping its sides */ + #page-top { + height: 150px; + background-size: contain; } - - & img { - /* smash into whatever box it's in */ - inline-size: 100%; - block-size: 100%; - width: 200px; - height: 150px; - - /* don't squish but do cover the space */ - object-fit: contain; - - /* soften the edges */ - border-radius: 1ex; - overflow: hidden; - - } - - & figcaption - { - text-align: center; - } +} + +@media screen and (max-width: 380px) { + #content { padding: 10px; } + #menu ul { font-size: 16px; } + #menu li { margin-left: 6px; margin-right: 6px; } + #page-top { height: 120px; } } diff --git a/header.html b/header.html index 18008c1..fc5c99c 100644 --- a/header.html +++ b/header.html @@ -1,7 +1,9 @@ - + + + pyoomph - A finite element framework in Python, based on oomph-lib and GiNaC