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

Rito Rhymes
2026-03-16T18:00:48Z

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