add navbar to footer

_includes/base.html

@@ -18,10 +18,22 @@
 
     <div style="padding: 2em;">{{ content }}</div>
 
-    <footer>
+    <footer class="horizontal-flex">
       <marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>
       <!-- idk put astolfo in a train here, learn pixel art someday -->
       <div>
+        <div style="display: flex;" class="horizontal-flex">
+          <ul>
+            <li><a href="/">home</a></li>
+            <li><a href="/blog/">blog</a></li>
+            <li><a href="/store">store</a></li>
+            <li><a href="https://status.astolfo.org">status</a></li>
+          </ul>
+          <ul>
+            <li><a href="https://git.astolfo.org">git</a></li>
+            <li><a href="https://sso.astolfo.org">sso</a></li>
+          </ul>
+        </div>
           <hr>
         <p>site build at commit [PUT COMMIT HERE]. <br>source avaliable at <a href="https://git.nijika.astolfo.org/astolfo/astolfo.org">git.nijika.astolfo.org/astolfo/astolfo.org</a></p>
         <p>all text, html and css licensed under <a href="https://opensource.org/license/0bsd">BSD0</a> unless noted otherwise.</p>

bundle.css

@@ -172,32 +172,6 @@ footer p,hr,div {
   }
 }
 
-@media (max-width: 1000px) {
-  header {
-    margin: none;
-    width: 100%;
-    height: auto;
-    border-radius: 0px;
-    margin-top: 0px;
-  }
-
-  header h1 {
-    top: 0.3em;
-  }
-
-  footer {
-    flex-direction: column;
-  }
-
-  footer marquee {
-    width: auto !important;
-  }
-
-  .blog-content {
-    width: 90vw !important;
-  }
-}
-
 /*
  * blog
  */
@@ -211,3 +185,38 @@ footer p,hr,div {
   font-family: Serif;
   font-size: 3rem;
 }
+
+/*
+ * responsive webpage
+ */
+.horizontal-flex {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (max-width: 1000px) {
+  header {
+    margin: none;
+    width: 100%;
+    height: auto;
+    border-radius: 0px;
+    margin-top: 0px;
+  }
+
+  header h1 {
+    top: 0.3em;
+  }
+
+  .horizontal-flex {
+    flex-direction: column;
+  }
+
+  footer marquee {
+    width: auto !important;
+  }
+
+  .blog-content {
+    width: 90vw !important;
+  }
+}
+