From 0ef5fa066f2d311c1b3738d471825a00d6cb49cb Mon Sep 17 00:00:00 2001 From: Rafael Vuijk Date: Sun, 25 Oct 2026 15:07:21 +0000 Subject: [PATCH] The header fits a narrow window Below 1100px the header sets the title at 1.5 x 25pt, 50px, where "AngouriMath" is 339px wide, and the column is 70% of the window. So in a window narrower than about 545px the title ran past the column, and below about 420px the whole page scrolled sideways: by 85px at 320px, which is a 1280px desktop window at 400% zoom. The menu's "Angouri.org", at 30pt, ran over below about 420px. The three sizes are now capped by the window's width: the header at 8vw, the title at 9vw and the menu links at 7.5vw. At 320px nothing in the header leaves the column and the home page does not scroll sideways. From about 555px up every size is what it was. A phone is unaffected: the pages declare no viewport, so a phone lays them out 980px wide, where none of the caps is reached. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_012sonx8iAspMiwRwokT1Ura --- styles.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 4e5fe871c..45a516c15 100644 --- a/styles.css +++ b/styles.css @@ -108,18 +108,23 @@ summary { display: none; } + /* Capped by the window's width, so that "AngouriMath" and "Angouri.org" stay inside the column down to 320px, which is a desktop window at 400% zoom */ .head-of-page { - font-size: 25pt; + font-size: min(25pt, 8vw); } - + + .head-of-page h2 { + font-size: min(1.5em, 9vw); + } + .link-block-mob { display: block; } - + .link-block-mob a { display: block; border-bottom: solid 1px gray; - font-size: 30pt; + font-size: min(30pt, 7.5vw); padding: 15px; }