💄 ✨ better styles and refactoring

src/components/Button.astro

@@ -0,0 +1,13 @@
+---
+
+interface Props {
+    href: string;
+    color: string;
+}
+
+---
+
+<div class="button">
+
+</div>
+

src/components/Footer.astro

@@ -1,29 +1,35 @@
 ---
-import "../styles/global.css"
 ---
 
 <footer class="footer">
     <div class="container">
-        Made by retrozinndev, licensed under <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3</a> and newer
+        Made with &hearts; by retrozinndev
          · <a href="https://github.com/retrozinndev/retrozinndev.github.io">Improve this Page</a>
     </div>
 </footer>
 
 <style>
-.footer {
-    margin-left: 0px;
-    color: lightgray;
-    overflow: scroll;
-    display: block;
-    width: 100%;
-    max-width: 100vw;
-    position: relative;
-    font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
-    font-size: 12.8px;
-    text-align: center;
-}
+    .footer {
+        margin-left: 0px;
+        color: lightgray;
+        overflow: scroll;
+        display: block;
+        width: 100%;
+        font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
+        font-size: 12.8px;
+        text-align: center;
+    }
 
-.footer > a {
-    color: lightgray;
-}
+    .container {
+        width: auto;
+    }
+
+    a {
+        color: lightgray;
+        transition: 250ms;
+    }
+
+    a:hover {
+        color: rgb(91, 91, 185);
+    }
 </style>

src/components/NavBar.astro

@@ -34,15 +34,15 @@ var options = {
 </header>
 
 <style>
-    :root {
-        --avatar-size: 32px;
-        --avatar-margin-left: 16px;
-    }
 
     header {
+        --avatar-size: 32px;
+        --avatar-margin-left: 10px;
+
         display: flex;
         flex-direction: row;
         background-color: var(--navbar-color);
+        padding: 6px;
     }
 
     .navbar {
@@ -84,14 +84,14 @@ var options = {
         margin-top: 0;
     }
 
-    .link > a {
+    a {
         color: white;
         text-decoration: none;
         font-weight: bold;
         transition: 250ms;
     }
 
-    .link > a:hover {
+    a:hover {
         color: var(--link-color);
     }
 </style>