feat: homepage initialization, components, css, motion

assets/main.css

@@ -1,107 +1,103 @@
-/* App-wide styling */
+@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+
+:root {
+    --rosewater: #dc8a78;
+    --flamingo: #dd7878;
+    --pink: #ea76cb;
+    --mauve: #8839ef;
+    --red: #d20f39;
+    --maroon: #e64553;
+    --peach: #fe640b;
+    --yellow: #df8e1d;
+    --green: #40a02b;
+    --teal: #179299;
+    --sky: #04a5e5;
+    --sapphire: #209fb5;
+    --blue: #1e66f5;
+    --lavender: #7287fd;
+    --text: #434f69;
+    --subtext1: #5c5f77;
+    --subtext0: #6c6f85;
+    --overlay2: #7c7f93;
+    --overlay1: #8c8fa1;
+    --overlay0: #9ca0b0;
+    --surface2: #acb0be;
+    --surface1: #bcc0cc;
+    --surface0: #ccd0da;
+    --base: #eff1f5;
+    --mantle: #e6e9ef;
+    --crust: #dce0e8;
+}
+
+::selection {
+    background-color: var(--overlay0);
+}
+
+html,
 body {
-    background-color: #0f1116;
-    color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
-}
-
-#hero {
     margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    width: 100%;
+    background-color: var(--base);
+    color: var(--text);
+    font-family: "Schibsted Grotesk", sans-serif;
+    overflow: auto;
+    overflow-anchor: none;
 }
 
-#links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: white;
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: white;
+a {
+    color: var(--text);
+    transition:
+        0.1s color ease-in-out;
     text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
 }
 
-#links a:hover {
-    background-color: #1f1f1f;
-    cursor: pointer;
+a:hover,
+a:active,
+a:focus {
+    color: var(--subtext0)
 }
 
-#header {
-    max-width: 1200px;
-}
-
-/* Navbar */
 #navbar {
     display: flex;
-    flex-direction: row;
-  }
-  
-#navbar a {
-    color: #ffffff;
-    margin-right: 20px;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1em 3em;
+}
+
+.navbar-main {
     text-decoration: none;
-    transition: color 0.2s ease;
+    font-size: 1.6em;
 }
 
-#navbar a:hover {
+.navbar-theme {
+    width: 2em;
+    height: 2em;
+    font-size: 1em;
+    border: 1px solid var(--overlay0);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--yellow)
+}
+
+.navbar-theme:hover,
+.navbar-theme:active,
+.navbar-theme:focus {
     cursor: pointer;
-    color: #91a4d2;
 }
 
-/* Blog page */
-#blog {
-    margin-top: 50px;
-  }
-  
-#blog a {
-    color: #ffffff;
-    margin-top: 50px;
+.navbar-end {
+    display: flex;
+    align-items: center;
+    gap: 1em;
 }
 
-/* Echo */
-#echo {
-    width: 360px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 50px;
-    background-color: #1e222d;
-    padding: 20px;
-    border-radius: 10px;
-}
-
-#echo>h4 {
-    margin: 0px 0px 15px 0px;
-}
-
-
-#echo>input {
-    border: none;
-    border-bottom: 1px white solid;
-    background-color: transparent;
-    color: #ffffff;
-    transition: border-bottom-color 0.2s ease;
-    outline: none;
-    display: block;
-    padding: 0px 0px 5px 0px;
-    width: 100%;
-}
-
-#echo>input:focus {
-    border-bottom-color: #6d85c6;
-}
-
-#echo>p {
-    margin: 20px 0px 0px auto;
+.content-wrapper {
+    margin: 2em 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 }