Test

src/components/common/Navigation.astro

@@ -0,0 +1,44 @@
+---
+import { t } from "i18next";
+---
+
+<nav class="nav">
+    <div>
+    </div>
+
+    <ul class="nav__items">
+        <li class="nav__items__link" id="welcome">
+            <a href="#welcome">
+                H.1
+
+                <span class="nav__items__link__desc">
+                    - Welcome
+                </span>
+            </a>
+        </li>
+
+        <li class="nav__items__link" id="another">
+            <a href="#another">
+                H.2
+
+                <span class="nav__items__link__desc">
+                    - About
+                </span>
+            </a>
+        </li>
+
+        <li class="nav__items__link" id="something">
+            <a href="#something">
+                H.3
+
+                <span class="nav__items__link__desc">
+                    - Contact
+                </span>
+            </a>
+        </li>
+
+        <button class="nav__items__link nav__items__burger">
+
+        </button>
+    </ul>
+</nav>

src/pages/test.astro

@@ -0,0 +1,22 @@
+---
+import { changeLanguage, t } from "i18next";
+import Layout from "../layouts/Layout.astro";
+import Header from "../components/Header.astro";
+import ThemesSetup from "../components/ThemesSetup.astro";
+import ThemeSelection from "../components/ThemeSelection.astro";
+import { Projects } from "../lib/Projects.lib";
+import HeaderSocials from "../components/HeaderSocials.astro";
+import Project from "../components/Project.astro";
+import Preview from "../components/Preview.astro";
+import Navigation from "../components/common/Navigation.astro";
+
+changeLanguage("en");
+---
+
+<Layout title={t('pageTitle')}>
+	<Navigation />
+
+	<main>
+		<!-- hello -->
+	</main>
+</Layout>

src/styles/_nav.scss

@@ -0,0 +1,89 @@
+.nav {
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--background);
+    color: var(--contrast);
+    border-bottom: var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    &__items {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        &__link {
+            text-decoration: none;
+            color: var(--contrast);
+            border-left: var(--border);
+            min-height: 100%;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            position: relative;
+            white-space: nowrap;
+            transition: .5s ease-out;
+            overflow: hidden;
+
+            a {
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: var(--padding);
+                z-index: 1;
+            }
+
+            &::before {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 0%;
+                background-color: var(--contrast);
+                transition: var(--transition);
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: 0;
+                background-color: var(--contrast);
+                transition: var(--transition);
+            }
+
+            &:hover {
+                &::before {
+                    height: 10%;
+                }
+            }
+
+            &--active, &:target {
+                color: var(--background);
+                font-weight: 400;
+
+                &::after {
+                    width: 100%;
+                }
+            }
+        }
+
+        &__burger {
+            aspect-ratio: 1/1;
+            display: flex;
+            margin: 0;
+            padding: 0;
+            width: 3rem;
+            border: none;
+            background-color: var(--contrast);
+            // border-left: var(--border); 
+            // border-left-color: var(--background);
+        }
+    }
+}

src/styles/index.scss

@@ -1,8 +1,4 @@
-// Core
 @import './lib/normalize';
 @import './lib/base';
-@import './lib/utils';
-@import './lib/selectors';
 
-// Themes
-@import './themes/!themes.scss';
+@import './nav';

src/styles/lib/_base.scss

@@ -1,10 +1,43 @@
-html, body, main {
-    font-family: system-ui, sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
+html {
+    --background: white;
+    --contrast: black;
+    --thickness: 1px;
+    --padding: .75rem;
+    --border: var(--thickness) solid var(--contrast);
+    --transition: .25s .1s ease;
+}
+
+html, body {
     margin: 0;
     height: 100%;
     display: flow-root;
     overflow-x: hidden;
     scroll-behavior: smooth;
+
+    font-family: "Outfit", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 300;
+    font-style: normal;
+
+    &::-webkit-scrollbar {
+        width: .2rem;
+        background: var(--contrast);
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--contrast);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--background);
+        border-left: var(--border);
+    }
+}
+
+main {
+    height: 200vh;
 }
 
 .theme {

src/styles/themes/_theme!Default.scss

@@ -233,7 +233,7 @@ $theme: 'Default';
         font-size: 0.8rem;
         padding: .2rem .5rem;
         border-radius: 1rem;
-        border: .15rem solid theme.Color('backgroundAlt');
+        border: .1rem solid theme.Color('backgroundAlt');
         margin: 0;
     }