From dc3edbc26c28205b5ccf697ff3ef2acd001e1a5d Mon Sep 17 00:00:00 2001
From: Cem Keylan <cem@ckyln.com>
Date: Tue, 2 Feb 2021 02:37:30 +0300
Subject: initial commit

---
 sass/bar.scss | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 sass/bar.scss

(limited to 'sass/bar.scss')

diff --git a/sass/bar.scss b/sass/bar.scss
new file mode 100644
index 0000000..d5a217a
--- /dev/null
+++ b/sass/bar.scss
@@ -0,0 +1,123 @@
+@import "colors.scss";
+
+// Always use the dark-scheme colors for the navigation bar.
+$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;
+$bar-font-size: 14px !default;
+$bar-font-text: $font-text !default;
+
+$bar-title-height: 40px;
+$bar-title-width: 190px;
+
+$bar-margin: 2em;
+
+#preamble { margin-bottom: $bar-margin; }
+
+#navbar {
+    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 {
+        margin: 0 !important;
+        padding: 0 !important;
+        color: $bar-carbs-pink !important;
+        float: left !important;
+        font-weight: bolder !important;
+        font-size: 200% !important;
+        &:hover {
+            text-decoration: none;
+            color: $bar-carbs-pink;
+        }
+    }
+
+    #navbarlist li a {
+        color: $bar-foreground-color;
+        font-weight: bold;
+        text-decoration: none;
+    }
+
+    ul {
+        display: block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        text-align: right;
+        font-size: 0;
+        letter-spacing: 0;
+        li {
+            display: inline-block;
+            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;
+            margin: 0;
+
+            a:hover {
+                color: color-get('dark', 'carbs-purple') !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;
+    background: $bar-background-color none repeat scroll 0 0 !important;
+    border-top: $bar-border !important;
+    padding: 10px 15px !important;
+    bottom: 0;
+    p {
+        text-align: center;
+        color: $bar-foreground-color;
+    }
+}
-- 
cgit v1.2.3