add pretty animations to nav

components/HomeStatBox.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts"></script>
+
 <template>
-  <div></div>
+  <div class="container">
+    <slot />
+  </div>
 </template>
+
+<style scoped>
+.container {
+  width: 10rem;
+  height: 5rem;
+  border: 0.5rem solid pink;
+}
+</style>

components/Navbar.vue

@@ -9,7 +9,10 @@ import ColourPicker from "./ColourPicker.vue";
       <li><a href="/blog">Blog</a></li>
       <li><a href="/stories">Stories</a></li>
     </ul>
-    <ColourPicker />
+    <div class="flex items-center">
+      <ColourPicker />
+      <div class="hamburger">HAMBURGER</div>
+    </div>
   </nav>
 </template>
 
@@ -22,7 +25,6 @@ nav {
 }
 
 ul {
-  width: 100%;
   display: flex;
   align-items: center;
   gap: 3rem;
@@ -35,4 +37,37 @@ li.home-text {
   font-size: x-large;
   font-weight: bold;
 }
+
+.hamburger {
+  height: 1px;
+  width: 1px;
+  opacity: 0;
+}
+
+* {
+  transition: all 0.2s ease;
+}
+
+@media screen and (max-width: 510px) {
+  .hamburger {
+    display: flex;
+    padding-left: 1rem;
+    height: unset;
+    width: unset;
+    opacity: 1;
+  }
+
+  li:not(.home-text) {
+    height: 1px;
+    width: 1px;
+    opacity: 0;
+    /* accessibility? screw accessibility
+     * i want my pretty animations
+     */
+  }
+
+  ul {
+    gap: 0rem;
+  }
+}
 </style>

layouts/base.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="flex flex-col items-center w-full h-full">
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.dark-mode body {
-  background-color: #091a28;
-  color: #ebf4f1;
-}
-</style>

layouts/default.vue

@@ -36,8 +36,10 @@ html.dark::before {
   transform: translateX(0);
 }
 
-.dark-mode body {
+main {
-  background-color: #091a28;
+  width: 80%;
-  color: #ebf4f1;
+  max-width: 60rem;
+  height: 100%;
+  padding-top: 2rem;
 }
 </style>

pages/[...slug].vue

@@ -11,9 +11,8 @@
 </template>
 
 <style>
-article,
+article {
-main {
+  width: 80%;
-  width: 90%;
   height: 100%;
   padding-top: 2rem;
 }

pages/index.vue

@@ -1,3 +1,14 @@
 <script setup lang="ts"></script>
 
-<template>HELLO</template>
+<template>
+  <main>
+    <h1>Hello!</h1>
+    <HomeStatBox> Box 1 </HomeStatBox>
+  </main>
+</template>
+
+<style scoped>
+main {
+  display: flex;
+}
+</style>