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.
-<table border=0 width="100%">
+<table id="bottom" border=0 width="100%">
<tr>
<td width="1%" class="inverted"><b><tt>^G</tt></b></td>
<tr>
<td width="1%" class="inverted"><b><tt>^G</tt></b></td>
-<td width="22%"><tt> <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="1%" class="inverted"><b><tt>^N</tt></b></td>
-<td width="22%"><tt> <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="1%" class="inverted"><b><tt>^W</tt></b></td>
-<td width="22%"><tt> <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 width="1%" class="inverted"><b><tt>^T</tt></b></td>
-<td><tt> <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>
</tr>
<tr>
<td width="1%" class="inverted"><b><tt>^D</tt></b></td>
-<td width="22%"><tt> <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="1%" class="inverted"><b><tt>^H</tt></b></td>
-<td width="22%"><tt> <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="1%" class="inverted"><b><tt>^S</tt></b></td>
-<td width="22%"><tt> <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 width="1%" class="inverted"><b><tt>^C</tt></b></td>
-<td><tt> <a href="contact.php">Contact</a></tt></td>
+<td class="indented"><tt><a href="contact.php">Contact</a></tt></td>
+table#bottom td.indented {
+ padding-left: 1ch;
+ padding-right: 1ch;
+}
+
/* Mobile (i.e. phones) */
@media only screen and (max-width: 768px) {
body {
/* Mobile (i.e. phones) */
@media only screen and (max-width: 768px) {
body {
table#homepage {
font-size: x-small;
}
table#homepage {
font-size: x-small;
}
+
+table#bottom td.indented {
+ padding-left: 0.5ch;
+ padding-right: 0.5ch;
+}