* [PATCH v1 0/6] Allow site layouts to render properly on mobile devices
@ 2026-03-16 18:00 Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 1/6] add viewport meta tag for proper mobile rendering Rito Rhymes
` (8 more replies)
0 siblings, 9 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
Currently, pages on mobile devices render against a desktop-width
viewport, which makes the content appear tiny and forces users into
a pan-zoom dance of pinch-zooming and horizontal panning to read
content rather than simple vertical scrolling.
The first patch establishes the correct baseline by setting the
viewport width to the device width. Once the site is allowed to
render at actual mobile widths, however, numerous latent layout
issues emerge. The remaining patches address those issues with
targeted responsive adjustments.
It is not a transformative redesign and is not intended to affect the
desktop layout.
AI assistance note: this series was developed several weeks ago,
before CONTRIBUTING.md instructed contributors to record the full
model version identifier, and I could not recover the full identifier
from the local session metadata.
Rito Rhymes (6):
add viewport meta tag for proper mobile rendering
prevent wrapped headings from overlapping with text above it
add 848px mobile banner adjustments to prevent overflow
add responsive extras and footer layout adjustments to contain
overflow
contain horizontal overflow in core content and homepage releases
layout
improve mobile rendering of docutils tables
korgi/static/css/main.css | 154 +++++++++++++++++++++++++++++++++++++-
korgi/templates/base.html | 1 +
2 files changed, 153 insertions(+), 2 deletions(-)
--
2.51.0
^ permalink raw reply [flat|nested] 12+ messages in thread
* [PATCH v1 1/6] add viewport meta tag for proper mobile rendering
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
@ 2026-03-16 18:00 ` Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 2/6] prevent wrapped headings from overlapping with text above it Rito Rhymes
` (7 subsequent siblings)
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
The site UI is broken on mobile because pages currently render at
desktop width on phones, which makes the content appear tiny and forces
users into a pan-zoom dance of pinch-zooming and horizontal panning to
read content. Adding a viewport meta tag to set the viewport width to
the device width enables normal vertical scrolling on small screens and
establishes the baseline layout for follow-up mobile fixes.
Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/templates/base.html | 1 +
1 file changed, 1 insertion(+)
diff --git a/korgi/templates/base.html b/korgi/templates/base.html
index 9872e08..ce1d5fb 100644
--- a/korgi/templates/base.html
+++ b/korgi/templates/base.html
@@ -3,6 +3,7 @@
<head>
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="{{ SITEURL }}/theme/images/logos/favicon.png" />
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
{% if FEED_ALL_ATOM %}
--
2.51.0
^ permalink raw reply related [flat|nested] 12+ messages in thread
* [PATCH v1 2/6] prevent wrapped headings from overlapping with text above it
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 1/6] add viewport meta tag for proper mobile rendering Rito Rhymes
@ 2026-03-16 18:00 ` Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow Rito Rhymes
` (6 subsequent siblings)
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
The Oswald heading font has tall ascenders/descenders, and at the
prior line-height wrapped heading lines can visually overlap adjacent
text above, reducing legibility. This is most noticeable on mobile,
especially in the desktop banner where the title wraps and overlaps
with itself.
Apply this as a global heading rule as a consistent policy for
anywhere heading wrap can occur. Some desktop views may not show the
issue yet due to available width, but the underlying font behavior is
the same and can surface as content or layout changes.
Adjust banner heading and nav spacing to offset the line-height
change, preserving the original desktop banner visual layout.
Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/static/css/main.css | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 7d73395..3b09d24 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -68,7 +68,7 @@ body {
float: right;
}
#banner h1 {
- margin: 28px 0 47px .05em;
+ margin: 12px 0 31px .05em;
text-shadow: 3px 3px 0 #F8F4EE;
font-size: 3em;
}
@@ -78,7 +78,7 @@ body {
}
#banner ul {
padding: 0;
- margin: 0;
+ margin: 0 100px 0 0;
font-size: 1.1em;
font-weight: bold;
list-style: none;
@@ -99,6 +99,7 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: oswald,helvetica,sans-serif;
+ line-height: 1.1;
}
a {
--
2.51.0
^ permalink raw reply related [flat|nested] 12+ messages in thread
* [PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 1/6] add viewport meta tag for proper mobile rendering Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 2/6] prevent wrapped headings from overlapping with text above it Rito Rhymes
@ 2026-03-16 18:00 ` Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 4/6] add responsive extras and footer layout adjustments to contain overflow Rito Rhymes
` (5 subsequent siblings)
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
At widths below 848px, the desktop banner structure is too wide and
creates page-wide horizontal scroll overflow, breaking the layout.
Introduce a mobile breakpoint at 848px (equivalent to 53em at a 16px
base font size), matching the site's existing fixed-width layout scale.
Adjust banner sizing and spacing at this breakpoint while preserving
the existing desktop layout for viewport widths above it.
This patch is intentionally banner-only. The overall mobile layout
will still not render correctly until corresponding main-content and
footer overflow fixes are applied in follow-up commits.
Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/static/css/main.css | 22 ++++++++++++++++++++++
1 file changed, 22 insertions(+)
diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 3b09d24..19ee328 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -339,3 +339,25 @@ dt {
#logo-akamai {
padding-bottom: 22px;
}
+
+@media screen and (max-width: 848px) {
+ #banner {
+ width: auto;
+ margin: 0;
+ border-radius: 0;
+ border-left: none;
+ border-right: none;
+ border-top: none;
+ }
+ #banner h1 {
+ font-size: 2em;
+ margin: 0.5em 0;
+ }
+ #tux-gear {
+ width: 4em;
+ height: 5em;
+ }
+ #banner li {
+ padding: 0 0.5em;
+ }
+}
--
2.51.0
^ permalink raw reply related [flat|nested] 12+ messages in thread
* [PATCH v1 4/6] add responsive extras and footer layout adjustments to contain overflow
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (2 preceding siblings ...)
2026-03-16 18:00 ` [PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow Rito Rhymes
@ 2026-03-16 18:00 ` Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout Rito Rhymes
` (4 subsequent siblings)
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
Below 848px, fixed-width extras and footer blocks overflow the page and
create page-wide horizontal scrolling that breaks layout.
Make extras and footer sections responsive by switching extras to
wrapping layout, stacking blogroll/social blocks to full width, and
relaxing fixed heights/widths. Update donors to wrap logos and hide
manual <br> breaks so the sponsor area reflows naturally on small
screens.
Add 550px and 400px refinements to progressively reduce
blogroll/social column counts (3 -> 2 -> 1), preventing overlap and
preserving readability as viewport width shrinks.
This patch is intentionally limited to extras/footer behavior; content
and homepage table overflow handling are addressed separately.
Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/static/css/main.css | 84 +++++++++++++++++++++++++++++++++++++++
1 file changed, 84 insertions(+)
diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 19ee328..d20d8b6 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -360,4 +360,88 @@ dt {
#banner li {
padding: 0 0.5em;
}
+
+ #extras {
+ width: auto;
+ margin: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1em;
+ }
+ #extras > div {
+ height: auto;
+ }
+ #extras > .blogroll {
+ float: none;
+ width: 100%;
+ padding: 0.5em 1em;
+ box-sizing: border-box;
+ }
+ #extras > .blogroll ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25em 1em;
+ }
+ #extras > .blogroll li {
+ width: auto;
+ float: none;
+ flex: 1 1 30%;
+ }
+ #extras > .social {
+ float: none;
+ width: 100%;
+ padding: 0.5em 1em;
+ box-sizing: border-box;
+ }
+ #extras > .social ul {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 0.5em;
+ }
+ #extras > .social li {
+ flex: 1 1 30%;
+ }
+
+ #contentinfo {
+ width: auto;
+ margin: 1em;
+ padding-top: 2em;
+ }
+ #donors {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 1em;
+ }
+ #donors br {
+ display: none;
+ }
+ #donors img {
+ max-width: 120px;
+ height: auto;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ #extras > .blogroll li {
+ flex: 1 1 45%;
+ }
+ #extras > .social ul {
+ display: block;
+ columns: 2;
+ }
+ #extras > .social li {
+ flex: none;
+ }
+}
+
+@media screen and (max-width: 400px) {
+ #extras > .blogroll li {
+ flex: 1 1 100%;
+ }
+ #extras > .social ul {
+ columns: 1;
+ }
}
--
2.51.0
^ permalink raw reply related [flat|nested] 12+ messages in thread
* [PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (3 preceding siblings ...)
2026-03-16 18:00 ` [PATCH v1 4/6] add responsive extras and footer layout adjustments to contain overflow Rito Rhymes
@ 2026-03-16 18:00 ` Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 6/6] improve mobile rendering of docutils tables Rito Rhymes
` (3 subsequent siblings)
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
On narrow viewports, fixed-width content containers, homepage release
sections, and long preformatted strings can force page-wide horizontal
overflow.
Realign #protocols and #latest for narrow screens so they do not
overflow and can wrap down as needed to fit.
Make #releases scroll within its own container, and keep release-date
cells readable on mobile with nowrap and horizontal padding.
Allow preformatted blocks to scroll horizontally within their own
region instead of expanding page width and creating page-wide
horizontal scrolling.
Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/static/css/main.css | 27 +++++++++++++++++++++++++++
1 file changed, 27 insertions(+)
diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index d20d8b6..16d97cd 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -360,6 +360,33 @@ dt {
#banner li {
padding: 0 0.5em;
}
+ #protocols {
+ margin: 1em 0;
+ width: auto;
+ }
+ #latest {
+ margin-right: 0;
+ }
+ #releases {
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+ #releases td:nth-child(3) {
+ white-space: nowrap;
+ padding: 0 0.75em;
+ }
+ #featured,
+ #content {
+ width: auto;
+ margin: 1em;
+ padding: 1em;
+ }
+ pre,
+ .literal-block {
+ white-space: pre;
+ overflow-x: auto;
+ }
#extras {
width: auto;
--
2.51.0
^ permalink raw reply related [flat|nested] 12+ messages in thread
* [PATCH v1 6/6] improve mobile rendering of docutils tables
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (4 preceding siblings ...)
2026-03-16 18:00 ` [PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout Rito Rhymes
@ 2026-03-16 18:00 ` Rito Rhymes
2026-03-16 18:17 ` [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (2 subsequent siblings)
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:00 UTC (permalink / raw)
To: tools; +Cc: rito
On narrow viewports, docutils tables become hard to read: the releases
table compresses too tightly, and the signatures fingerprint values
wrap and lose scanability.
Both /releases.html and /signature.html use table.docutils, and their
cells contain data values (versions, dates, fingerprints) rather than
sentence prose. Keep mobile behavior consistent with desktop by
treating these as single-line values and preserving readability.
Make docutils tables horizontally scrollable within their container so
cells can keep single-line values without forcing column collapse or
value wrapdown on narrow viewports.
Adjust border drawing for the scrollable table state by resetting
default cell borders and reapplying explicit grid edges to avoid
uneven/doubled outer borders.
Signed-off-by: Rito Rhymes <rito@ritovision.com>
Assisted-by: claude-opus-4-6
---
korgi/static/css/main.css | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 16d97cd..04955c6 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -382,6 +382,22 @@ dt {
margin: 1em;
padding: 1em;
}
+ table.docutils {
+ display: block;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ width: 100%;
+ }
+ table.docutils th,
+ table.docutils td {
+ white-space: nowrap;
+ padding: 0 5px;
+ border: 1px solid #ccc;
+ border-collapse: collapse;
+ }
+ table.docutils > caption {
+ padding-left: 5px;
+ }
pre,
.literal-block {
white-space: pre;
--
2.51.0
^ permalink raw reply related [flat|nested] 12+ messages in thread
* Re: [PATCH v1 0/6] Allow site layouts to render properly on mobile devices
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (5 preceding siblings ...)
2026-03-16 18:00 ` [PATCH v1 6/6] improve mobile rendering of docutils tables Rito Rhymes
@ 2026-03-16 18:17 ` Rito Rhymes
2026-03-30 2:08 ` Rito Rhymes
2026-04-10 2:42 ` Rito Rhymes
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-16 18:17 UTC (permalink / raw)
To: Rito Rhymes, tools
Also, I have a live demo of the rendered result here:
https://kernel.ritovision.com
For transparency, the demo includes two elements beyond the exact
patchset as sent:
1. a static recreation of the homepage releases table to demonstrate
the CSS changes to it, since unofficial builds / dry runs do not
include the live one
2. a mobile menu drawer UI that is a follow-on patch and not part
of this series
^ permalink raw reply [flat|nested] 12+ messages in thread
* Re: [PATCH v1 0/6] Allow site layouts to render properly on mobile devices
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (6 preceding siblings ...)
2026-03-16 18:17 ` [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
@ 2026-03-30 2:08 ` Rito Rhymes
2026-04-10 2:42 ` Rito Rhymes
8 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-03-30 2:08 UTC (permalink / raw)
To: tools; +Cc: Konstantin Ryabitsev
Hi,
I wanted to follow up on this patch series and see whether there has
been any time to review it.
FWIW, I noticed that lore.kernel.org now has a viewport meta tag
and is fully mobile responsive. That appears to build on the
admin tag injection support I merged upstream to Public Inbox,
along with the text overflow fix. Glad to see it all come together.
Kernel.org is next with this series!
Thanks,
Rito
^ permalink raw reply [flat|nested] 12+ messages in thread
* Re: [PATCH v1 0/6] Allow site layouts to render properly on mobile devices
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
` (7 preceding siblings ...)
2026-03-30 2:08 ` Rito Rhymes
@ 2026-04-10 2:42 ` Rito Rhymes
2026-04-10 13:59 ` Konstantin Ryabitsev
8 siblings, 1 reply; 12+ messages in thread
From: Rito Rhymes @ 2026-04-10 2:42 UTC (permalink / raw)
To: konstantin, tools
Konstantin,
Following up on this patch since it has been about three weeks.
I’m checking in because the thread has been idle while review
activity has continued on other tools@kernel.org threads,
including some submitted after this one, and I want to
understand whether this series is still something you expect to
review. It addresses a broken mobile and small-screen desktop
experience in the kernel.org site theme, and I submitted it in
good faith through kernel.org’s publicly stated channel for
theme/CSS improvements, as described at:
kernel.org/cleanroom-styles.html
kernel.org/fifty-shades-of-tux.html
Based on CONTRIBUTIONS.md, this appears to be the right thread
for work like this, but it is not clear to me that it is
functioning that way in practice here. If there is some other
more active path for theme work, I’d appreciate a clear signal
on that. If this is simply not a direction you want to take, I’d
appreciate a clear signal on that as well so I can calibrate
accordingly.
Thanks,
Rito
^ permalink raw reply [flat|nested] 12+ messages in thread
* Re: [PATCH v1 0/6] Allow site layouts to render properly on mobile devices
2026-04-10 2:42 ` Rito Rhymes
@ 2026-04-10 13:59 ` Konstantin Ryabitsev
2026-04-11 13:12 ` Rito Rhymes
0 siblings, 1 reply; 12+ messages in thread
From: Konstantin Ryabitsev @ 2026-04-10 13:59 UTC (permalink / raw)
To: Rito Rhymes; +Cc: tools
On Thu, Apr 09, 2026 at 10:42:57PM -0400, Rito Rhymes wrote:
> Konstantin,
>
> Following up on this patch since it has been about three weeks.
Please be patient -- I have to juggle a lot of priorities and the website is
taking a lower priority for the moment.
Thank you for your help.
-K
^ permalink raw reply [flat|nested] 12+ messages in thread
* Re: [PATCH v1 0/6] Allow site layouts to render properly on mobile devices
2026-04-10 13:59 ` Konstantin Ryabitsev
@ 2026-04-11 13:12 ` Rito Rhymes
0 siblings, 0 replies; 12+ messages in thread
From: Rito Rhymes @ 2026-04-11 13:12 UTC (permalink / raw)
To: Konstantin Ryabitsev, Rito Rhymes; +Cc: tools
I understand.
Thanks for the update.
Rito
^ permalink raw reply [flat|nested] 12+ messages in thread
end of thread, other threads:[~2026-04-11 13:13 UTC | newest]
Thread overview: 12+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2026-03-16 18:00 [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 1/6] add viewport meta tag for proper mobile rendering Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 2/6] prevent wrapped headings from overlapping with text above it Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 4/6] add responsive extras and footer layout adjustments to contain overflow Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout Rito Rhymes
2026-03-16 18:00 ` [PATCH v1 6/6] improve mobile rendering of docutils tables Rito Rhymes
2026-03-16 18:17 ` [PATCH v1 0/6] Allow site layouts to render properly on mobile devices Rito Rhymes
2026-03-30 2:08 ` Rito Rhymes
2026-04-10 2:42 ` Rito Rhymes
2026-04-10 13:59 ` Konstantin Ryabitsev
2026-04-11 13:12 ` Rito Rhymes
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox