From f5f29d4c16a08108ad9ea02886fc8af267e73e3f Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 19:15:49 -0500 Subject: [PATCH 1/7] add mobile viewport meta as first step against panzoom dance On mobile, without an explicit viewport, pages can render at desktop width, forcing a two-handed pinch/zoom/pan "panzoom dance" just to read content, instead of simply scrolling vertically. Add the standard viewport meta tag in the base template so initial scale matches device width. This is a necessary foundation, not a complete fix: other overflow sources (long unbroken content, wide elements) can still cause horizontal scrolling and are handled in follow-up commits. --- layouts/_default/baseof.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index cca15b8..6e7f358 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,6 +1,8 @@ + + {{ .Title }} {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "main.scss" . | css.Sass }} From d36a7993f439014f4df99a504b34aca31dc06d5b Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 19:29:50 -0500 Subject: [PATCH 2/7] make banner images responsive and remove table banner variant Banner images were not scaling on mobile, so they appeared oversized/disproportionate and triggered horizontal page overflow. Apply responsive image sizing in `.banner` (`max-width: 100%`, `height: auto`) so banner images scale correctly. Non-home pages also used a table-based banner layout, which is generally not mobile-friendly and makes it harder to position, contain, and scale content within smaller viewports. It also introduced unnecessary branding inconsistency across desktop and mobile: the home page and non-home pages presented essentially the same banner content with different proportions and visual behavior but still serving the same purpose and content. Rather than making the table layout itself responsive, remove it entirely. The home page already had a working non-table structure, and a single shared layout is simpler to maintain and style. Remove that page-kind split and use one shared banner structure (logo + subtitle in .banner) so banner behavior and branding are consistent on mobile and desktop across the site. --- assets/sass/main.scss | 5 +++-- layouts/partials/banner.html | 15 --------------- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index f5eae4a..209fa2a 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -16,8 +16,9 @@ body { .banner { text-align: center; font-weight: bold; - td img { - height: 150px; + img { + max-width: 100%; + height: auto; } } big { diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html index b676b85..2bd84d5 100644 --- a/layouts/partials/banner.html +++ b/layouts/partials/banner.html @@ -7,21 +7,6 @@ ... one iteration at a time... {{- end -}} {{ if eq .Kind "home" }}
{{ end }} From 614576d32c6ca17a8237eb5259c4aecb24e5ca62 Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 19:38:36 -0500 Subject: [PATCH 3/7] contain code-block overflow with bordered horizontal scroll on mobile Long code lines can overflow narrow screens and trigger horizontal page scrolling. For code, wrapping/breaking tokens is undesirable because it hurts copy/paste and readability fidelity. Style `pre` as an explicit container (background, border, radius, padding) and enable `overflow-x: auto` so overflow is contained inside the code block instead of the page. The container styling, especially the border, is intentional and important: it makes the block read as a distinct container, which makes it easier to recognize when it is scrollable. Style inline `code` to match the visual language, and reset `pre code` background and padding so nested code does not get double styling. Result: on mobile, overflowing code stays unbroken and scrolls within a clearly visible bounded container; on desktop, behavior remains normal when no overflow occurs. --- assets/sass/main.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 209fa2a..9f1d209 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -27,6 +27,22 @@ big { small { font-size: 70%; } +pre { + background-color: rgb(247, 243, 239); + border: 1px solid #c5bbb0; + border-radius: 0.5em; + padding: 1em; + overflow-x: auto; +} +code { + background-color: rgb(247, 243, 239); + padding: 0.1em 0.3em; + border-radius: 0.25em; +} +pre code { + background-color: transparent; + padding: 0; +} div.feature-matrix { table { border-collapse: collapse; From c1a541f8b72716948021a8cfe8417437a3ab9da5 Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 19:47:12 -0500 Subject: [PATCH 4/7] set global body wrapping policy for ordinary text Long unbroken text (currently seen with URLs in the architecture page) can force horizontal page overflow on mobile. Apply `overflow-wrap: break-word` at the `body` level as a global safeguard and default policy: regular content should wrap rather than widen the viewport. This is intentionally global instead of targeting specific elements, so new non-specialized content also gets safe wrapping by default. Specialized components (for example code blocks and tables) can keep their own overflow behavior where preserving layout/fidelity is more important. --- assets/sass/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 9f1d209..4f2e364 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -4,6 +4,7 @@ body { background-image: linear-gradient(#d7cdc0ff, #fdf7f6ff); margin-right: 10%; margin-left: 10%; + overflow-wrap: break-word; } .block { background-color: rgb(247, 243, 239); From 7d0b9fc031c472d2045db5b6e46c6aef40d0f495 Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 19:50:27 -0500 Subject: [PATCH 5/7] reduce body side margins on mobile to preserve readable width Desktop margins are acceptable, but on small screens they consume too much of the viewport and leave content unnecessarily constrained. At <=767px, reduce body side margins from 10% to 3% so more width is available for ordinary content. This lowers avoidable wrapping and reduces the chance of horizontal overflow triggered by overly narrow content area. --- assets/sass/main.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 4f2e364..017d387 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -79,6 +79,10 @@ div.feature-matrix { } } @media screen and (max-width: 767px) { + body { + margin-right: 3%; + margin-left: 3%; + } .tg { width: auto !important; } From 5462718d2c5455822568b155bd7c4a31da588917 Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 20:10:05 -0500 Subject: [PATCH 6/7] prevent banner title wrapping on mobile by reducing font size On smaller screens, the desktop-sized banner title does not fit on one line and can break within the title word at arbitrary character boundaries. At <=450px, reduce `big` from 400% to 300% so the title stays on one line and remains readable. --- assets/sass/main.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 017d387..75e5ddc 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -78,6 +78,11 @@ div.feature-matrix { vertical-align: center; } } +@media screen and (max-width: 450px) { + big { + font-size: 300%; + } +} @media screen and (max-width: 767px) { body { margin-right: 3%; From 85e377b9ea4913b9c5726e7e35c50542e8178bb1 Mon Sep 17 00:00:00 2001 From: Rito Rhymes <83614463+ritorhymes@users.noreply.github.com> Date: Thu, 5 Feb 2026 20:50:46 -0500 Subject: [PATCH 7/7] apply responsive image sizing globally to prevent mobile overflow Graphviz diagrams are rendered/injected as plain `` elements outside the banner container, and on mobile they were causing horizontal page overflow. The previous responsive image rule was scoped to `.banner img`, so those non-banner images could exceed viewport width and trigger horizontal scrolling. Move `max-width: 100%` and `height: auto` from `.banner img` to a global `img` rule. This sets a site-wide default policy that images should fit their container, while still preserving aspect ratio. This immediately fixes horizontal overflow for Graphviz images and also provides the same protection for future non-banner images by default. --- assets/sass/main.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 75e5ddc..371969f 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -14,13 +14,13 @@ body { padding-bottom: .1em; border-radius: 2em; } +img { + max-width: 100%; + height: auto; +} .banner { text-align: center; font-weight: bold; - img { - max-width: 100%; - height: auto; - } } big { font-size: 400%;