From 18b3130fe5d639110c289717fdbcce6bdc5c4c1f Mon Sep 17 00:00:00 2001
From: Cem Keylan <cem@ckyln.com>
Date: Mon, 25 Oct 2021 15:50:27 +0200
Subject: css: update bar

---
 sass/bar.scss | 81 ++++++++++++++++++-----------------------------------------
 1 file changed, 25 insertions(+), 56 deletions(-)

(limited to 'sass')

diff --git a/sass/bar.scss b/sass/bar.scss
index 57b06c4..5fae7e3 100644
--- a/sass/bar.scss
+++ b/sass/bar.scss
@@ -5,7 +5,10 @@ $bar-background-color: color-get('dark', 'carbs-color-bg') !default
 $bar-foreground-color: color-get('dark', 'carbs-color-fg') !default;
 $bar-carbs-pink:       color-get('dark', 'carbs-pink') !default;
 
-$bar-border: 5px solid $bar-carbs-pink !default;
+$navbar-background-color: color-get('dark', 'carbs-blue') !default
+$navbar-foreground-color: color-get('dark', 'carbs-color-fg') !default;
+
+$bar-border: 5px solid $navbar-background-color !default;
 $bar-font-size: 14px !default;
 $bar-font-text: $font-text !default;
 
@@ -14,17 +17,16 @@ $bar-title-width: 190px;
 
 $bar-margin: 2em;
 
-#preamble { margin-bottom: $bar-margin; }
+#preamble {
+    margin-bottom: $bar-margin;
+}
 
-#navbar {
+#titlebar {
+    box-sizing: content-box;
     background: $bar-background-color none repeat scroll 0 0 !important;
-    border-bottom: $bar-border !important;
     min-height: $bar-title-height;
     padding: 10px 15px !important;
-
-    label, #hamburger { display: none; }
-
-    a.navbartitle {
+    a.maintitle {
         margin: 0 !important;
         padding: 0 !important;
         color: $bar-carbs-pink !important;
@@ -36,30 +38,36 @@ $bar-margin: 2em;
             color: $bar-carbs-pink;
         }
     }
+}
+
+#navbar {
+    background: $navbar-background-color !important;
+    clear: both;
+    padding: .3em;
 
     #navbarlist li a {
-        color: $bar-foreground-color;
+        color: $navbar-foreground-color;
         font-weight: bold;
         text-decoration: none;
     }
 
     ul {
-        display: block;
+        vertical-align: middle;
         list-style: none;
         margin: 0;
         padding: 0;
-        text-align: right;
+        text-align: left;
         font-size: 0;
-        letter-spacing: 0;
+        display: flex;
+        justify-content: space-evenly;
         li {
-            display: inline-block;
+            display: inline;
+            text-align: justify;
             font-size: $bar-font-size;
             font-family: $bar-font-text !important;
             line-height: 1.4;
             letter-spacing: 0;
-            padding-top: 14px;
-            padding-right: 15px;
-            padding-left: 15px;
+            padding: 0.7ex;
             margin: 0;
             a {
                 color: $bar-foreground-color;
@@ -67,52 +75,13 @@ $bar-margin: 2em;
                 text-decoration: none;
             }
             a:hover {
-                color: color-get('dark', 'carbs-purple') !important;
+                color: color-get('dark', 'carbs-color-bg') !important;
                 text-decoration: none !important;
             }
         }
     }
 }
 
-@media screen and (max-width: 768px) {
-    #navbar {
-        label {
-            display: inline-block;
-            box-sizing: border-box;
-            color: $bar-foreground-color;
-            background: $bar-carbs-pink;
-            border-radius: 0.2em;
-            font-style: normal;
-            text-align: center;
-            margin-right: auto;
-            margin-left: auto;
-            font-size: 1em;
-            padding: 0.5em 0;
-            font-size: 1em;
-            width: 2.2em;
-            height: 100%;
-            float: right;
-        }
-        ul {
-            margin-left: 0;
-            margin-right: 0;
-            text-align: left;
-        }
-        #navbarlist {
-            margin-top: $bar-title-height + 10;
-            li {
-                box-sizing: border-box;
-                border-top: 1px solid $carbs-purple;
-                display: block;
-                width: 100%;
-                padding: 0.5em;
-            }
-            display: none;
-        }
-        input:checked ~ #navbarlist { display: block; }
-    }
-}
-
 footer {
     clear: both;
     margin-top: $bar-margin;
-- 
cgit v1.2.3