From e7d6404ab184a5f6a8645bd0ac90b3676b8c5efc Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 25 Dec 2020 13:22:37 +0100
Subject: Improved CSS definitions, more fine-grained content build script

---
 assets/css/components/_nav.scss | 70 ++++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 25 deletions(-)

(limited to 'assets/css/components/_nav.scss')

diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index d86a484..834b6a0 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,36 +1,56 @@
 .c-nav {
-    background-color: var(--nav-bg);
-    //border-bottom: 1px solid var(--bg-plus);
+  background-color: var(--nav-bg);
 
-    &__items {
-        display: flex;
-        align-items: baseline;
+  &__items {
+    display: flex;
+    align-items: baseline;
+  }
+
+  &__logo {
+    display: inline-block;
+    color: var(--nav-logo-fg);
+    text-decoration: none;
+
+    &:link,
+    &:visited {
+      &:hover {
+        background-color: transparent;
+        color: var(--nav-item-hover-fg);
+        font-weight: bold;
+      }
     }
+  }
 
-    &__logo {
-        display: inline-block;
-        color: var(--nav-logo-fg);
-        text-decoration: none;
+  &__item {
+    display: inline-block;
+    padding: 1rem 1ch calc(1rem - 2px);
+    margin: 0 -1ch 0 3ch;
+    color: var(--nav-item-idle-fg);
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
 
-        &:link:hover {
-            background-color: transparent;
-            color: var(--nav-item-hover-fg);
-            font-weight: bold;
-        }
+    &:hover {
+      background-color: transparent;
+      color: var(--nav-item-hover-fg);
+      font-weight: bold;
     }
+  }
 
+  @media (max-width: map-get($breakpoints, "sm")) {
     &__item {
-        display: inline-block;
-        padding: 1rem 1ch calc(1rem - 2px);
-        margin: 0 -1ch 0 3ch;
-        color: var(--nav-item-idle-fg);
-        text-decoration: none;
-        border-bottom: 2px solid transparent;
-
-        &:hover {
-            background-color: transparent;
-            color: var(--nav-item-hover-fg);
-            font-weight: bold;
+      margin-left: 2ch;
+    }
+  }
+
+  /*
+    @media (max-width: map-get($breakpoints, "xs")) {
+        &__logo {
+            display: none;
+        }
+
+        &__logo + &__item {
+            margin-left: -1ch;
         }
     }
+    */
 }
-- 
cgit v1.2.3-70-g09d2