bottom: switch to CSS flexbox

This allows for better spacing & wrapping on mobile than a table.

diff --git a/bottom.php b/bottom.php
index ab9bb5ed63a41d05b7ac070b76058fbe22b5ef5b..2e7539d75fdd4d94c254c4f95b460a651bdbd23c 100644 (file)
--- a/bottom.php
+++ b/bottom.php
@@ -4,35 +4,49 @@
 
 <hr>
 
-<table id="bottom" border=0 width="100%">
-<tr>
-<td width="1%" class="inverted"><b><tt>^G</tt></b></td>
-<td width="22%" class="indented"><tt><a href="download.php">Get Nano</a></tt></td>
-
-<td width="1%" class="inverted"><b><tt>^N</tt></b></td>
-<td width="22%" class="indented"><tt><a href="news.php">News</a></tt></td>
-
-<td width="1%" class="inverted"><b><tt>^W</tt></b></td>
-<td width="22%" class="indented"><tt><a href="who.php">Who</a></tt></td>
-
-<td width="1%" class="inverted"><b><tt>^T</tt></b></td>
-<td class="indented"><tt><a href="git.php">Git</a></tt></td>
-</tr>
-
-<tr>
-<td width="1%" class="inverted"><b><tt>^D</tt></b></td>
-<td width="22%" class="indented"><tt><a href="docs.php">Documentation</a></tt></td>
-
-<td width="1%" class="inverted"><b><tt>^H</tt></b></td>
-<td width="22%" class="indented"><tt><a href="history.php">History</a></tt></td>
-
-<td width="1%" class="inverted"><b><tt>^S</tt></b></td>
-<td width="22%" class="indented"><tt><a href="screenshots.php">Screenshots</a></tt></td>
-
-<td width="1%" class="inverted"><b><tt>^C</tt></b></td>
-<td class="indented"><tt><a href="contact.php">Contact</a></tt></td>
-</tr>
-</table>
+<div id="bottom" width="100%">
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^G</tt></b></span>
+<span class="indented"><tt><a href="download.php">Get Nano</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^N</tt></b></span>
+<span class="indented"><tt><a href="news.php">News</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^W</tt></b></span>
+<span class="indented"><tt><a href="who.php">Who</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^T</tt></b></span>
+<span class="indented"><tt><a href="git.php">Git</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^D</tt></b></span>
+<span class="indented"><tt><a href="docs.php">Documentation</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^H</tt></b></span>
+<span class="indented"><tt><a href="history.php">History</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^S</tt></b></span>
+<span class="indented"><tt><a href="screenshots.php">Screenshots</a></tt></span>
+</span>
+
+<span class="menuitem">
+<span class="inverted"><b><tt>^C</tt></b></span>
+<span class="indented"><tt><a href="contact.php">Contact</a></tt></span>
+</span>
+
+</div>
 
 </td></tr>
 </table>

diff --git a/style.css b/style.css
index 670aa363adc9c62eb42be51f3d72c91bc06f1e2c..be33cd90846f43ca55c9a3fac0a9cd6c9536cf1c 100644 (file)
--- 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;
+}
+}