Add some style again again

src/App.vue

@@ -3,7 +3,7 @@ import LayoutDefault from "@/layouts/LayoutDefault.vue";
 </script>
 
 <template>
-  <layout-default class="layout">
+  <layout-default>
     <router-view />
   </layout-default>
 </template>

src/assets/base.css

@@ -1,19 +1,15 @@
-/*
-fff8ed-1b2021-51513d-63c132
-*/
-
 :root
 {
-    --primary-color : #fff8ed;
-    --secondary-color : #63c132;
-    --tertiary-color : #51513d;
-    --bruh-color : #1b2021;
+    --primary-color : #1b2021;
+    --secondary-color : #9BC53D;
+    --header-color : #FCFCFC;
+    --background-color : #FCFCFC;
     --radius : 3px;
 }
 
 @media screen and (min-width: 601px) {
     :root {
-        --font-size : 1rem;
+        --font-size : 1.5rem;
     }
 }
 
@@ -25,9 +21,9 @@ fff8ed-1b2021-51513d-63c132
 
 *
 {
-    color: #141115;
+    color: var(--primary-color);
     text-decoration: none;
-    font-family: 'PT Sans', sans-serif;
+    font-family: 'Afacad Flux', sans-serif;
     transition: 0.3s all;
-}
 
+}

src/assets/main.css

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

src/components/NavLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <router-link to="/create"><div class="button">Create an event</div></router-link>
+</template>
+
+<style scoped>
+
+.button {
+  color: var(--primary-color);
+  text-align: center;
+  align-content: center;
+  min-width: 15vw;
+  min-height: 7vh;
+  border-radius: var(--radius);
+  background-color: var(--secondary-color);
+}
+
+.button:hover
+{
+  background-color: rgba(255, 255, 255, 0.8);
+}
+</style>

src/layouts/LayoutDefault.vue

@@ -3,13 +3,12 @@
 </script>
 
 <template>
-  <div class="layoutDefault">
+  <div class="layout">
 
-    <!--<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 class="nav">
+      <p>Let's<br>Meet</p>
+      <router-link to="/about"><div>About</div></router-link>
+    </nav>
 
     <main class="main">
       <slot/>
@@ -22,11 +21,27 @@
 
 <style scoped>
 
+.layout
+{
+  display: flex;
+  flex-direction: column;
+}
+
 nav {
-  text-decoration: none;
-  height: 2vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  min-height: 4vw;
   border: 1px solid;
   border-radius: var(--radius);
+  background-color: var(--header-color);
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  padding: 0 1vw 0 1vw;
+}
+
+nav p {
+  font-size: calc(var(--font-size) * 1.1);
+  margin: 4px 0 4px 0;
 }
 
 .main {
@@ -34,7 +49,7 @@ nav {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  flex-grow: 1;
 }
 
 </style>

src/views/HomeView.vue

@@ -7,12 +7,12 @@
   <div class="container">
     <div class="introduction">
       <h1>Welcome !</h1>
-      <p>This website is currently under development and might look ugly as fuck</p>
+      <p>This website is currently under <span class="colored-text">development</span> and might look ugly as fuck</p>
     </div>
 
-    <div class="actions">
-      <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 class="actions">
+        <router-link to="/create"><div class="button">Create</div></router-link>
+        <router-link to="/join"><div class="button">Join</div></router-link>
     </div>
   </div>
 
@@ -20,48 +20,67 @@
 
 <style scoped>
 
-.container {
+.container, .introduction, .actions {
   display: flex;
-  flex-direction: row;
+  justify-content: center;
   align-items: center;
-  width: 100%;
   height: 100%;
+  padding: 0 1vw 0 1vw;
+}
+
+.container {
+  flex-direction: row;
+  width: 80%;
+}
+
+.introduction, .actions {
+  flex-direction: column;
 }
 
 .introduction {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 75%;
-  height: 100%;
+  word-break: break-word;
+  width: 50%;
+}
+
+.introduction h1
+{
+  font-size: 4rem;
+}
+
+.introduction p
+{
+  width: 80%;
+  text-align: center;
+}
+
+.colored-text
+{
+  color: var(--secondary-color);
 }
 
 .actions {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  width: 50%;
   gap: 4vh;
-  height: 100%;
-  width: 25%;
-  border-left: var(--radius);
-  background-color: var(--bruh-color);
-  box-shadow: -3px 0 3px var(--tertiary-color);
 }
 
 .button {
+  color: var(--primary-color);
   text-align: center;
   align-content: center;
-  min-width: 10vw;
-  min-height: 5vh;
+  width: 15vw;
+  height: 7vh;
+
+  min-width: 15vw;
+  min-height: 7vh;
   border-radius: var(--radius);
   background-color: var(--secondary-color);
 }
 
 .button:hover
 {
-  background-color: rgba(255, 255, 255, 0.8);
+  transform: scale(1.1);
+  background-color: var(--header-color);
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 </style>