From e0840b79a903f2c435e3e77984c59cb5caed942e Mon Sep 17 00:00:00 2001
From: "c.diddens" <c.diddens@utwente.nl>
Date: Sun, 9 Aug 2026 01:16:49 +0200
Subject: [PATCH] Spread the menu entries across the width of the bar

The five nav entries sat bunched in the middle of an otherwise empty
green bar. Lay the list out as a flex row and distribute it with
space-evenly, so the gaps between neighbours and at the two ends are all
equal and the bar is used over its full width.

column-gap is the minimum the spacing may fall to; below that the row
wraps. From 800px down the layout switches back to centred, because
spreading a wrapped list edge to edge leaves a lopsided last row.

Replace the per-item left/right margins with that gap while here. Two
adjacent margins added up between neighbours but gave the ends only half
as much, which is what made the row read as bunched.

Claude-Session: https://claude.ai/code/session_01TtWDWoCaBcP1uFCK4e4RsJ
---
 _generated/css/style.css | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/_generated/css/style.css b/_generated/css/style.css
index 8a432e2..3d54cd5 100644
--- a/_generated/css/style.css
+++ b/_generated/css/style.css
@@ -31,8 +31,13 @@ a {text-decoration:underline; color:#000000;}
 
 
 #menu { background-color:#377e22; text-align:center; line-height:30px; line-height:30px; bottom:0px;margin-left:auto;margin-right:auto;width:100%;}
-#menu ul {list-style:none; padding:0; margin:0; font-size:20px; font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",helvetica,arial,sans-serif; letter-spacing:1px; color:#FFFFFF;}
-#menu li {margin-right:16px; margin-left:16px; display:inline; padding-bottom:3px}
+#menu ul {list-style:none; padding:0 12px; margin:0; font-size:20px; font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",helvetica,arial,sans-serif; letter-spacing:1px; color:#FFFFFF;}
+/* spread the entries over the whole width of the bar rather than bunching them
+   in the middle. space-evenly gives the same gap between neighbours as at the
+   two ends; column-gap is the floor it may never fall below, at which point the
+   row wraps instead. */
+#menu ul { display:flex; flex-wrap:wrap; justify-content:space-evenly; align-items:center; column-gap:24px; row-gap:2px; }
+#menu li {padding-bottom:3px}
 #menu a {color:#FFF; text-decoration:none; padding:4px;}
 
 #menu a:hover {color: #DDD}
@@ -279,10 +284,9 @@ text-decoration:none;
 @media screen and (max-width: 800px) {
   #content { padding: 18px; }
 
-  /* below this width the entries no longer fit on one line, so lay them out as
-     a wrapping flex row - inline items would wrap into ragged, uneven rows */
-  #menu ul { font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; }
-  #menu li { margin-left: 10px; margin-right: 10px; display: inline-block; }
+  /* below this width the entries start to wrap, and spreading them edge to edge
+     would leave a half-empty last row - centre them and keep a generous gap */
+  #menu ul { font-size: 18px; justify-content: center; column-gap: 22px; }
 }
 
 @media screen and (max-width: 600px) {
@@ -292,8 +296,8 @@ text-decoration:none;
 
   /* wrap the menu onto as many rows as needed, with room to tap each entry */
   #menu { line-height: 1.4; padding: 6px 4px; }
-  #menu ul { font-size: 17px; row-gap: 4px; }
-  #menu li { margin-left: 8px; margin-right: 8px; padding-bottom: 0; }
+  #menu ul { font-size: 17px; column-gap: 16px; row-gap: 4px; }
+  #menu li { padding-bottom: 0; }
   #menu a { display: inline-block; padding: 6px 4px; }
 
   /* the feature lists lose the browser's default list indentation */
@@ -325,7 +329,6 @@ text-decoration:none;
 
 @media screen and (max-width: 380px) {
   #content { padding: 10px; }
-  #menu ul { font-size: 16px; }
-  #menu li { margin-left: 6px; margin-right: 6px; }
+  #menu ul { font-size: 16px; column-gap: 12px; padding: 0 4px; }
   #page-top { height: 120px; }
 }