Skip to content

Spread the menu entries across the width of the bar #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdiddens merged 1 commit into from
Aug 8, 2026
Merged

Spread the menu entries across the width of the bar #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions _generated/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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) {
Expand All @@ -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 */
Expand Down Expand Up @@ -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; }
}
Loading