From: Mike Frysinger <vapier@gentoo.org>
Date: Tue, 14 Nov 2023 16:42:03 +0000 (-0500)
Subject: tighten up bottom table for mobile
X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=9426f8fa76370ed102c63b5b44ca9f1512c83090;p=nano-editor.git

tighten up bottom table for mobile

Switch from using &nbsp; to CSS padding.  This has the advantage of
shrinking when on mobile, and we can enforce a minimum padding on the
right side if the elements get too close together.
---

diff --git a/bottom.php b/bottom.php
index c4f8b53..ab9bb5e 100644
--- a/bottom.php
+++ b/bottom.php
@@ -4,33 +4,33 @@
 
 <hr>
 
-<table border=0 width="100%">
+<table id="bottom" border=0 width="100%">
 <tr>
 <td width="1%" class="inverted"><b><tt>^G</tt></b></td>
-<td width="22%"><tt>&nbsp;<a href="download.php">Get Nano</a></tt></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%"><tt>&nbsp;<a href="news.php">News</a></tt></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%"><tt>&nbsp;<a href="who.php">Who</a></tt></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><tt>&nbsp;<a href="git.php">Git</a></tt></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%"><tt>&nbsp;<a href="docs.php">Documentation</a></tt></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%"><tt>&nbsp;<a href="history.php">History</a></tt></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%"><tt>&nbsp;<a href="screenshots.php">Screenshots</a></tt></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><tt>&nbsp;<a href="contact.php">Contact</a></tt></td>
+<td class="indented"><tt><a href="contact.php">Contact</a></tt></td>
 </tr>
 </table>
 
diff --git a/style.css b/style.css
index f28304f..b865d00 100644
--- a/style.css
+++ b/style.css
@@ -69,6 +69,11 @@ table#homepage {
 	padding-bottom: 3em;
 }
 
+table#bottom td.indented {
+	padding-left: 1ch;
+	padding-right: 1ch;
+}
+
 /* Mobile (i.e. phones) */
 @media only screen and (max-width: 768px) {
 body {
@@ -78,4 +83,9 @@ body {
 table#homepage {
 	font-size: x-small;
 }
+
+table#bottom td.indented {
+	padding-left: 0.5ch;
+	padding-right: 0.5ch;
+}
 }