Merge pull request 'Responsive navbar' (#2) from paper/tilde.institute-site:responsive-navbar into master

Reviewed-on: https://tildegit.org/institute/site/pulls/2

2 files changed, 48 insertions, 58 deletions

diff --git a/header.html b/header.html
index 3b4b93d..78e5c78 100644
--- a/header.html
+++ b/header.html
@@ -9,41 +9,37 @@
    ╚═╝   ╚═╝╚══════╝╚═════╝ ╚══════╝╚═╝╚═╝╚═╝  ╚═══╝╚══════╝   ╚═╝   ╚═╝   ╚═╝    ╚═════╝    ╚═╝   ╚══════╝</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>
+    <div>
+      <a href="https://tilde.institute">News</a>
+    </div>
+    <div>
+      <a href="/faq">FAQ</a>
+    </div>
+    <div>
+      <a href="/signup">Sign Up</a>
+    </div>
+    <div>
+      <a href="https://wiki.tilde.institute">Wiki</a>
+    </div>
+    <div>
+      <a href="https://git.tilde.institute/">Git</a>
+    </div>
+    <div>
+      <a href="https://twtxt.tilde.institute">twtxt</a>
+    </div>
+    <div>
+      <a href="https://crawl.tildeverse.org">crawl/dcss</a>
+    </div>
+    <div>
+      <a rel="me" href="https://tilde.zone/@tildeinstitute">Fediverse</a>
+    </div>
+    <div>
+      <a href="/stats">Stats</a>
+    </div>
+    <div>
+      <a href="/coc">CoC</a>
+    </div>
+    <div>
+      <a href="tilde.json"><code>tilde.json</code></a>
+    </div>
 </div>
diff --git a/tilde.css b/tilde.css
index fd7e224..416c6e7 100644
--- a/tilde.css
+++ b/tilde.css
@@ -25,36 +25,30 @@ pre {
 }
 
 #navigation {
-    margin: 0 auto;
-    text-align: center;
-}
-
-#navigation table {
-    border: 0px;
-    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    text-decoration: none;
+    margin: 0;
+    padding: 0;
 }
 
-#navigation td {
-    text-align: center;
-    vertical-align: center;
-    height: 1.5em;
+#navigation div {
     background-color: #0B3861;
+    flex-grow: 1;
+    min-width: 3.2rem;
+    padding: .2em;
+    margin: .05em;
+    text-align: center;
 }
 
-#navigation td:hover {
+#navigation div:hover {
     background-color: #045fb4;
 }
 
-#navigation td a {
-    display: block;
-    width: 100%;
-    text-decoration: none;
-    min-width: 3.5rem;
-}
-
-#navigation td a:hover {
+#navigation div a {
+    color: white;
+    text-align: center;
     text-decoration: none;
-    color: #ffffff;
 }
 
 #content {