Add some style again

src/assets/base.css

@@ -1,20 +1,25 @@
+/*
+fff8ed-1b2021-51513d-63c132
+*/
+
 :root
 {
     --primary-color : #fff8ed;
-    --secondary-color : #fff8ed;
-    --tertiary-color : #fff8ed;
+    --secondary-color : #63c132;
+    --tertiary-color : #51513d;
+    --bruh-color : #1b2021;
     --radius : 3px;
 }
 
 @media screen and (min-width: 601px) {
     :root {
-        --font-size : 18px;
+        --font-size : 1rem;
     }
 }
 
 @media screen and (max-width: 600px) {
     :root {
-        --font-size : 15px;
+        --font-size : 0.8rem;
     }
 }
 
@@ -22,11 +27,7 @@
 {
     color: #141115;
     text-decoration: none;
-    font-size: var(--font-size);
     font-family: 'PT Sans', sans-serif;
     transition: 0.3s all;
 }
 
-h1 {
-    font-size: calc(var(--font-size, 1vw) * 2.15);
-}

src/assets/main.css

@@ -1,8 +1,24 @@
 @import './base.css';
 
+html, body {
+    margin: 0;
+    height: 100%;
+}
+
 body
 {
-    background-color: var(--primary-color);
+    background: var(--primary-color);
+    font-size: var(--font-size);
+}
+
+#app
+{
+    height: 100%;
+}
+
+.layout
+{
+    height: 100%;
 }
 
 footer

src/layouts/LayoutDefault.vue

@@ -3,19 +3,19 @@
 </script>
 
 <template>
-  <div class="LayoutDefault">
+  <div class="layoutDefault">
 
-    <nav class="nav">
+    <!--<nav class="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
       <router-link to="/error">Error</router-link>
-    </nav>
+    </nav>-->
 
     <main class="main">
       <slot/>
     </main>
 
-    <footer class="footer">Blank footer</footer>
+    <!--<footer class="footer">Blank footer</footer>-->
 
   </div>
 </template>
@@ -34,7 +34,7 @@ nav {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 90vh;
+  height: 100%;
 }
 
 </style>

src/views/HomeView.vue

@@ -11,8 +11,8 @@
     </div>
 
     <div class="actions">
-      <div class="button"><router-link to="/create">Create an event</router-link></div>
-      <div class="button"><router-link to="/join">Join an event</router-link></div>
+      <router-link to="/create"><div class="button">Create an event</div></router-link>
+      <router-link to="/join"><div class="button">Join an event</div></router-link>
     </div>
   </div>
 
@@ -33,9 +33,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 70%;
+  width: 75%;
   height: 100%;
-  border: solid 1px;
 }
 
 .actions {
@@ -45,8 +44,10 @@
   align-items: center;
   gap: 4vh;
   height: 100%;
-  width: 30%;
-  border: solid 1px;
+  width: 25%;
+  border-left: var(--radius);
+  background-color: var(--bruh-color);
+  box-shadow: -3px 0 3px var(--tertiary-color);
 }
 
 .button {
@@ -56,9 +57,11 @@
   min-height: 5vh;
   border-radius: var(--radius);
   background-color: var(--secondary-color);
-  box-shadow: 2px 2px 5px;
-  border: solid 1px;
+}
 
+.button:hover
+{
+  background-color: rgba(255, 255, 255, 0.8);
 }
 
 </style>