INIT

src/App.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="app">
+    <Header />
+    <RouterView />
+    <Navigation />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import Header from './components/Sections/Header.vue'
+import Navigation from './components/Sections/Navigation.vue'
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --clr-white: #ffffff;
+  --clr-black: #000000;
+
+  --clr-neutral: #595959;
+  --clr-neutral-contrast: #ffffff;
+
+  --clr-success: #009933;
+  --clr-success-contrast: #ffffff;
+  --clr-error: #851919;
+  --clr-error-contrast: #ffffff;
+
+  --clr-happy-dark: #009933;
+  --clr-happy-light: #d1ffe8;
+
+  --clr-sad-dark: #252ed5;
+  --clr-sad-light: #e5ecfc;
+
+  --clr-disappointed-dark: #ab6b0e;
+  --clr-disappointed-light: #fffbd8;
+
+  --clr-angry-dark: #851919;
+  --clr-angry-light: #ffe5e5;
+
+  --clr-empty-dark: #595959;
+  --clr-empty-light: #f1f1f1;
+
+  --clr-dead-dark: #ffffff;
+  --clr-dead-light: #000000;
+
+  --clr-sick-dark: #87ad00;
+  --clr-sick-light: #edffd8;
+
+  --clr-pissed-dark: #7853ff;
+  --clr-pissed-light: #f1efff;
+
+  --clr-current-dark: var(--clr-happy-dark);
+  --clr-current-light: var(--clr-happy-light);
+
+  /* Font Sizes & Scaling Factor*/
+  --scaling-factor: 1.25;
+  --font-size-xs: calc(var(--font-size-s) / var(--scaling-factor));
+  --font-size-s: calc(var(--font-size-default) / var(--scaling-factor));
+  --font-size-default: 1rem;
+  --font-size-l: calc(var(--font-size-default) * var(--scaling-factor));
+  --font-size-xl: calc(var(--font-size-l) * var(--scaling-factor));
+  --font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor));
+
+  /* Paddings depend on Font-Size */
+  --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
+  --padding-xs: calc(var(--padding-s) / var(--scaling-factor));
+  --padding-default: var(--font-size-default);
+  --padding-s: calc(var(--padding-default) / var(--scaling-factor));
+  --padding-l: calc(var(--padding-default) * var(--scaling-factor));
+  --padding-xl: calc(var(--padding-l) * var(--scaling-factor));
+  --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));
+
+  --radius-default: calc(var(--font-size-default) / 3);
+  --radius-border: var(--font-size-default);
+
+  --transition-default: 150ms;
+
+  --box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  background-color: var(--clr-white);
+  color: var(--clr-black);
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  & > *:nth-child(2) { flex: 1; }
+}
+</style>