GitGitGadget's website is responsive, how about kernel.org?

GitGitGadget's website is responsive, how about kernel.org?

[Johannes Schindelin]

Hi Konstantin (and Git mailing list, for transparency),

the website of GitGitGadget was made responsive recently
(https://github.com/gitgitgadget/gitgitgadget.github.io/pull/26) meaning
that it will look good not only on a desktop, but also on a cell phone.

The same contributor (Rito, Cc:ed) told me that he would be interested to
help kernel.org's site become responsive, too. He even has a live demo at
https://kernel.ritovision.com/. Interested?

Ciao,
Johannes

Re: GitGitGadget's website is responsive, how about kernel.org?

[Konstantin Ryabitsev]

On Fri, Mar 13, 2026 at 07:52:13AM +0100, Johannes Schindelin wrote:
> Hi Konstantin (and Git mailing list, for transparency),
> 
> the website of GitGitGadget was made responsive recently
> (https://github.com/gitgitgadget/gitgitgadget.github.io/pull/26) meaning
> that it will look good not only on a desktop, but also on a cell phone.
> 
> The same contributor (Rito, Cc:ed) told me that he would be interested to
> help kernel.org's site become responsive, too. He even has a live demo at
> https://kernel.ritovision.com/. Interested?

First time I hear of it. I can take a look!

-- 
KR

Re: GitGitGadget's website is responsive, how about kernel.org?

[Rito Rhymes]

Thanks Konstantin, I appreciate it.

I'll send the patch series in a separate thread shortly for review.

Rito

Re: GitGitGadget's website is responsive, how about kernel.org?

[Konstantin Ryabitsev]

On Fri, Mar 13, 2026 at 09:14:38AM -0400, Rito Rhymes wrote:
> Thanks Konstantin, I appreciate it.
> 
> I'll send the patch series in a separate thread shortly for review.

Oh, I just found a bunch of your messages in my spam folder. Sorry! Google
really dislikes messages without a DKIM signature. You should look into fixing
that. :)

-- 
KR

Re: GitGitGadget's website is responsive, how about kernel.org?

[Rito Rhymes]

Yikes! I'll have to take a look at that.

I just sent the first patch series.

I also have a follow-up patch ready that adds a clean mobile nav header
to complete the UI, if the first series merges.

Re: GitGitGadget's website is responsive, how about kernel.org?

[Junio C Hamano]

Konstantin Ryabitsev <konstantin@linuxfoundation.org> writes:

> On Fri, Mar 13, 2026 at 09:14:38AM -0400, Rito Rhymes wrote:
>> Thanks Konstantin, I appreciate it.
>> 
>> I'll send the patch series in a separate thread shortly for review.
>
> Oh, I just found a bunch of your messages in my spam folder. Sorry! Google
> really dislikes messages without a DKIM signature. You should look into fixing
> that. :)

FWIW, we also have gitweb patches from the same author graduated to
the 'master' branch preparing for the next release as of a week or
so ago.

Thanks, Rito.

Re: GitGitGadget's website is responsive, how about kernel.org?

[Rito Rhymes]

Actually...

now that I've had time to think about it (and get some
rest), I think it's best to keep the patch series review and
discussion all in this thread, publicly and transparently.

I initially defaulted to sending it separately to Konstantin directly
because this is Git's archive, and I wanted to respect convention by
keeping the thread appropriately scoped. At first, this seemed more like
just a routing touchpoint.

But seeing as there is no public mailing list for kernel.org's repo
specifically, and this is basically already a sidecar thread about the
site theme patch, we might as well consolidate the process here for
simplicity and transparency. Plus, I imagine the site matters to most
people in Git, and the mailing list is archived on lore.kernel.org
anyway...

This will allow anyone to review the code and comment on it.

I'm sending the patch series again directly in this thread, and I
think we should keep communication contained here (unless someone has
a better idea).

Re: GitGitGadget's website is responsive, how about kernel.org?

[Junio C Hamano]

"Rito Rhymes" <rito@ritovision.com> writes:

> Actually...
>
> now that I've had time to think about it (and get some
> rest), I think it's best to keep the patch series review and
> discussion all in this thread, publicly and transparently.
>
> I initially defaulted to sending it separately to Konstantin directly
> because this is Git's archive, and I wanted to respect convention by
> keeping the thread appropriately scoped. At first, this seemed more like
> just a routing touchpoint.
>
> But seeing as there is no public mailing list for kernel.org's repo
> specifically, and this is basically already a sidecar thread about the
> site theme patch, we might as well consolidate the process here for
> simplicity and transparency. Plus, I imagine the site matters to most
> people in Git, and the mailing list is archived on lore.kernel.org
> anyway...
>
> This will allow anyone to review the code and comment on it.
>
> I'm sending the patch series again directly in this thread, and I
> think we should keep communication contained here (unless someone has
> a better idea).

I would not object discussion here, and I personally do not mind
having to see, and possibly ignore, more patches on this list, but
to those who come here to work with and work on Git, I am reasonably
sure that it will look offtopic to discuss how the k.org website
appears and behaves, and/or how a better version of it would appear
and behave.

I'll leave Konstantin with the final say.  I hope there are better
places, even though I do not now where they are as I do not do
websites.  I've seen folks with accounts at k.org discuss things on
mailing lists that is more limited for kernel.org users.

Re: GitGitGadget's website is responsive, how about kernel.org?

[Rito Rhymes]

I see where you're coming from, Junio. I don't want to distract people,
and I guess there's also the matter of review fit, where not many people
here are inclined to contribute to websites, so there may be more
suitable venues for this elsewhere.

Konstantin, whatever venue you decide is cool with me.

Rito

Re: GitGitGadget's website is responsive, how about kernel.org?

[Konstantin Ryabitsev]

On Sat, Mar 14, 2026 at 02:54:01PM -0400, Rito Rhymes wrote:
> I see where you're coming from, Junio. I don't want to distract people,
> and I guess there's also the matter of review fit, where not many people
> here are inclined to contribute to websites, so there may be more
> suitable venues for this elsewhere.
> 
> Konstantin, whatever venue you decide is cool with me.

I've added CONTRIBUTING.md to the website, which describes how to submit
contributions to the website. Apologies that it didn't exist before -- this is
literally the second time in the past 15 years that someone's contributed any
code to it. :)

Please review, rebase on the latest master, and submit to the right list.

Thank you!

Best wishes,
-- 
KR

Re: GitGitGadget's website is responsive, how about kernel.org?

[Rito Rhymes]

Okay cool. Will do.

Thank you!

Rito

[PATCH v1 0/6] Allow site layouts to render properly on mobile devices

[Rito Rhymes]

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.

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

[PATCH v1 1/6] add viewport meta tag for proper mobile rendering

[Rito Rhymes]

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>
---
 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

[PATCH v1 2/6] prevent wrapped headings from overlapping with text above it

[Rito Rhymes]

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>
---
 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

[PATCH v1 3/6] add 848px mobile banner adjustments to prevent overflow

[Rito Rhymes]

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>
---
 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

[PATCH v1 4/6] add responsive extras and footer layout adjustments to contain overflow

[Rito Rhymes]

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>
---
 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

[PATCH v1 5/6] contain horizontal overflow in core content and homepage releases layout

[Rito Rhymes]

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>
---
 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

[PATCH v1 6/6] improve mobile rendering of docutils tables

[Rito Rhymes]

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>
---
 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