From f2e910f14a7c91256b1886d3ab0a66fdd6fd0574 Mon Sep 17 00:00:00 2001
From: Nico <nico@astolfo.org>
Date: Wed, 3 Sep 2025 00:49:59 +1000
Subject: [PATCH] make navbar a sidebar

---
 _includes/base.html | 19 ++++++++------
 bundle.css          | 63 +++++++++++++++++++++++++++++++++------------
 2 files changed, 58 insertions(+), 24 deletions(-)
diff --git a/_includes/base.html b/_includes/base.html
index e24b361..7227b47 100644
--- a/_includes/base.html
+++ b/_includes/base.html
@@ -10,20 +10,23 @@
     <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
 </head>
 <body>
-    <nav>
-      <a href="/">home</a>
-      <a href="/blog">blog</a>
-      <a href="/store">store</a>
-      <a href="https://git.astolfo.org">git</a>
-    </nav>
-
     <header>
       <h1 id="wave-text">
         <span style="animation-delay: 0.1s;">a</span><span style="animation-delay: 0.2s;">s</span><span style="animation-delay: 0.3s;">t</span><span style="animation-delay: 0.4s;">o</span><span style="animation-delay: 0.5s;">l</span><span style="animation-delay: 0.6s;">f</span><span style="animation-delay: 0.8s;">o</span><span style="animation-delay: 0.9s;">!</span>
       </h1>
     </header>
 
-    <div style="padding: 2em;">{{ content }}</div>
+    <div id="main-page">
+      <nav>
+        <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://git.astolfo.org">git</a></li>
+        </ul>
+      </nav>
+      <div style="margin: 2em;">{{ content }}</div>
+    </div>
 
     <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>
diff --git a/bundle.css b/bundle.css
index e0b82a4..913bd7d 100644
--- a/bundle.css
+++ b/bundle.css
@@ -52,8 +52,8 @@ header {
   border-radius: var(--rounding);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
 
-  width: 60em;
-  height: 30em;
+  width: auto;
+  height: 10em;
   margin: auto;
   margin-top: 2em;
   animation: spinin 1s;
@@ -70,8 +70,8 @@ header h1 {
   border-radius: var(--rounding);
   background-color: var(--accent2);
 
-  position: relative;
-  top: 3em;
+  position: absolute;
+  left: 0px;
   margin: auto;
   font-size: 8em;
   height: fit-content;
@@ -133,22 +133,53 @@ header a:hover {
  * nav/sidebar
  */
 
-nav {
-  list-style-type: none;
-  justify-content: space-evenly;
+#main-page {
   display: flex;
+  flex-direction: reverse-row;
 }
 
-nav a {
-  color: var(--text) !important;
-}
+nav {
+  margin-top: 2em;
+  width: 7em;
 
-nav a:hover {
-  color: var(--accent2);
-  background-color: inherit;
-  transform: none;
-  scale: 100%;
-  rotate: 0deg;
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    color: var(--text) !important;
+    background-color: var(--background);
+    border-radius: var(--rounding);
+
+    list-style-type: none;
+    margin: 0;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding: 1em;
+    width: 6em;
+  }
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
+  li:hover {
+    transform: scale(125%);
+    filter: hue-rotate(60deg);
+    border: white 2px solid;
+    background-image: url("/img/astolfos/header.gif");
+    background-position: 100% 100%;
+    background-size: 100% 100%;
+  }
+
+  a:hover {
+    background-color: inherit;
+    transform: none;
+    rotate: 0deg;
+  }
 }
 
 /*
