From 5bab4502a098eb0e3b5a59b68bc9d8d23529ea55 Mon Sep 17 00:00:00 2001
From: Arne Rief <arne.rief@gmail.com>
Date: Fri, 10 Feb 2023 21:40:00 +0100
Subject: Desktop version

---
 sass/layout/_nav.scss | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 sass/layout/_nav.scss

(limited to 'sass/layout/_nav.scss')

diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
new file mode 100644
index 0000000..d57f3d7
--- /dev/null
+++ b/sass/layout/_nav.scss
@@ -0,0 +1,61 @@
+@use "../abstracts" as *;
+
+nav {
+  background-color: $bg-text-container;
+  font-family: "Archivo Black", sans-serif;
+  height: 10vh;
+  width: 100%;
+
+  ul {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    list-style-type: none;
+    padding: 0 3rem;
+    width: 100%;
+  }
+
+  // logo to the left side of navbar
+  li:first-child {
+    text-align: left;
+    margin-right: auto;
+  }
+
+  li a {
+    display: block;
+    color: inherit;
+    font-size: $medium-text;
+    padding: 0 1.5rem;
+    text-align: center;
+    transition: transform 0.3s;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      @include main-link-hover;
+    }
+  }
+}
+
+// mobile
+@media screen and (max-width: 770px) {
+  nav {
+    ul {
+      gap: 1rem;
+      justify-content: center;
+      padding: 0;
+    }
+
+    li:first-child {
+      text-align: center;
+      margin-right: 1.5rem;
+    }
+
+    li a {
+      font-size: 1rem;
+      padding: 0;
+    }
+  }
+}
-- 
cgit v1.2.3