tighten up bottom table for mobile

Switch from using   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 c4f8b5357ae93c94f49a8f9a22084a60b23512c7..ab9bb5ed63a41d05b7ac070b76058fbe22b5ef5b 100644 (file)
--- 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 f28304f9433cbc7948425a96c6c3058926e358a8..b865d006a1e90de7b52950404307d8327225ffc1 100644 (file)
--- 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;
+}
 }