update website appearence

SeiyaCooper · Feb 7, 2024 · 450526c · 450526c
1 parent cc93f2c
commit 450526c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/site/components/Link.astro b/site/components/Link.astro
@@ -13,10 +13,9 @@ const { title = "", src = "" } = Astro.props;
 
 <style>
     li {
-        height: 40px;
-        width: 60vw;
+        height: 20px;
         min-width: 100px;
-        background-color: rgba(20, 20, 25, 1);
+        background-color: rgba(20, 20, 25, 0.3);
         padding: 10px;
         margin: 1px;
         display: flex;
@@ -25,7 +24,7 @@ const { title = "", src = "" } = Astro.props;
     }
 
     li:hover {
-        background-color: aliceblue;
+        background-color: rgba(215, 215, 240, 0.7);
     }
 
     li:hover a {
@@ -40,7 +39,7 @@ const { title = "", src = "" } = Astro.props;
         color: aliceblue;
         text-decoration: none;
         font-family: Helvetica;
-        font-size: 100%;
+        font-size: 80%;
         font-weight: bolder;
     }
 </style>
diff --git a/site/components/NavBar.astro b/site/components/NavBar.astro
@@ -19,8 +19,8 @@ const { list = [""], focus = "" } = Astro.props;
 </ul>
 
 <script>
-    const button = document.querySelector("button");
-    const ul = document.querySelector("ul");
+    const button = document.querySelector("button") as HTMLButtonElement;
+    const ul = document.querySelector("ul") as HTMLUListElement;
     let visible = false;
     button.onclick = () => {
         visible = !visible;
@@ -36,25 +36,39 @@ const { list = [""], focus = "" } = Astro.props;
 
 <style>
     button {
-        width: 8vh;
-        height: 8vh;
+        width: 10vh;
+        height: 10vh;
         position: absolute;
         top: 0;
         left: 0;
         background-color: transparent;
         background-image: url("/Mraph.js/chevrons-right.svg");
-        background-size: contain;
+        background-size: 65%;
+        background-position: center;
+        background-repeat: no-repeat;
         border: none;
         transition: rotate 0.3s;
     }
 
     ul {
         position: absolute;
+        width: 20vw;
+        height: 100vh;
+        overflow-y: auto;
         margin: 0;
-        padding: 0;
-        top: 8vh;
+        padding-left: 10px;
+        padding-top: 10px;
+        padding-right: 10px;
+        top: calc(10vh + 1px);
         left: -100%;
         list-style: none;
-        transition: all 0.3s;
+        transition: left ease-in-out 0.3s;
+        background-color: rgba(30, 30, 30, 0.5);
+    }
+
+    @media (max-width: 767px) {
+        ul {
+            width: 55vw;
+        }
     }
 </style>
diff --git a/site/components/TopBar.astro b/site/components/TopBar.astro
@@ -22,13 +22,15 @@ const examples = [
 
 <style>
     div {
-        width: 100%;
-        height: 8%;
+        width: calc(100% - 2px);
+        height: 10%;
         position: fixed;
-        background-color: rgba(20, 20, 25, 1);
+        background-color: rgba(15, 15, 25, 0.5);
+        border: 1px solid rgba(220, 220, 255, 0.3);
         display: flex;
         justify-content: center;
         align-items: center;
+        backdrop-filter: blur(6px);
     }
 
     div h1 {