From 3f2b89e4f93e19a2f5c31a456f64af39e2e6cb5a Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Sat, 25 Nov 2023 11:46:51 -0500 Subject: [PATCH] bottom: switch to CSS flexbox This allows for better spacing & wrapping on mobile than a table. --- bottom.php | 72 ++++++++++++++++++++++++++++++++---------------------- style.css | 28 +++++++++++++++++++-- 2 files changed, 69 insertions(+), 31 deletions(-) diff --git a/bottom.php b/bottom.php index ab9bb5e..2e7539d 100644 --- a/bottom.php +++ b/bottom.php @@ -4,35 +4,49 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
^GGet Nano^NNews^WWho^TGit
^DDocumentation^HHistory^SScreenshots^CContact
+
+ + +^G +Get Nano + + + +^N +News + + + +^W +Who + + + +^T +Git + + + +^D +Documentation + + + +^H +History + + + +^S +Screenshots + + + +^C +Contact + + +
diff --git a/style.css b/style.css index 670aa36..be33cd9 100644 --- a/style.css +++ b/style.css @@ -70,7 +70,7 @@ table#homepage { } table#top td, -table#bottom td.indented { +div#bottom .indented { padding-left: 1ch; padding-right: 1ch; } @@ -80,6 +80,18 @@ table#download { width: 80%; } +div#bottom { + display: flex; + flex-wrap: wrap; +} +div#bottom span.menuitem { + flex-basis: 25%; + flex-grow: 1; + flex-shrink: 0; + line-height: 1em; + white-space: nowrap; +} + /* Mobile (i.e. phones) */ @media only screen and (max-width: 768px) { body { @@ -91,13 +103,25 @@ table#homepage { } table#top td, -table#bottom td.indented { +div#bottom .indented { padding-left: 0.5ch; padding-right: 0.5ch; } +div#bottom span.menuitem { + font-size: large; + line-height: inherit; +} + table#docs, table#download { width: 100%; } } + +@media only screen and (max-width: 600px) { +div#bottom span.menuitem { + flex-basis: 50%; + line-height: 1.5em; +} +} -- 2.39.2