Restyle header links

Current version looks bad on small screens, this restyle won't look
bad on small screens.

2 files changed, 17 insertions, 59 deletions

diff --git a/header.html b/header.html
index 3b4b93d..7b6ce63 100644
--- a/header.html
+++ b/header.html
@@ -9,41 +9,15 @@
    ╚═╝   ╚═╝╚══════╝╚═════╝ ╚══════╝╚═╝╚═╝╚═╝  ╚═══╝╚══════╝   ╚═╝   ╚═╝   ╚═╝    ╚═════╝    ╚═╝   ╚══════╝</pre>
 </div>
 <div id="navigation">
-    <table>
-        <tr>
-            <td>
-                <a href="http://tilde.institute">News</a>
-            </td>
-	    <td>
-		<a href="/faq">FAQ</a>
-	    </td>
-            <td>
-                <a href="/signup">Sign Up</a>
-            </td>
-            <td>
-                <a href="https://wiki.tilde.institute">Wiki</a>
-            </td>
-            <td>
-                <a href="https://git.tilde.institute/">Git</a>
-            </td>
-            <td>
-                <a href="https://twtxt.tilde.institute">twtxt</a>
-            </td>
-	    <td>
-		<a href="https://crawl.tildeverse.org">crawl/dcss</a>
-	    </td>
-            <td>
-                <a rel="me" href="https://tilde.zone/@tildeinstitute">Fediverse</a>
-            </td>
-            <td>
-                <a href="/stats">Stats</a>
-            </td>
-            <td>
-                <a href="/coc">CoC</a>
-            </td>
-            <td>
-                <a href="tilde.json"><code>tilde.json</code></a>
-            </td>
-        </tr>
-    </table>
+  <a href="http://tilde.institute">News</a>
+  <a href="/faq">FAQ</a>
+  <a href="/signup">Sign Up</a>
+  <a href="https://wiki.tilde.institute">Wiki</a>
+  <a href="https://git.tilde.institute/">Git</a>
+  <a href="https://twtxt.tilde.institute">twtxt</a>
+  <a href="https://crawl.tildeverse.org">crawl/dcss</a>
+  <a rel="me" href="https://tilde.zone/@tildeinstitute">Fediverse</a>
+  <a href="/stats">Stats</a>
+  <a href="/coc">CoC</a>
+  <a href="tilde.json"><code>tilde.json</code></a>
 </div>
diff --git a/tilde.css b/tilde.css
index b7877d6..3dd0f15 100644
--- a/tilde.css
+++ b/tilde.css
@@ -25,35 +25,19 @@ pre {
 }
 
 #navigation {
-    margin: 0 auto;
+    line-height: 2.8em;
     text-align: center;
 }
 
-#navigation table {
-    border: 0px;
-    width: 100%;
-}
-
-#navigation td {
-    text-align: center;
-    vertical-align: center;
-    height: 1.5em;
+#navigation a {
+    padding: 0.5em;
+    margin: 0.1em;
+    text-decoration: none;
     background-color: #0B3861;
 }
 
-#navigation td:hover {
+#navigation a:hover {
     background-color: #045fb4;
-}
-
-#navigation td a {
-    display: block;
-    width: 100%;
-    text-decoration: none;
-    min-width: 3.5rem;
-}
-
-#navigation td a:hover {
-    text-decoration: none;
     color: #ffffff;
 }