initial commit

5 files changed, 332 insertions, 0 deletions

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;
+    }
+}
diff --git a/sass/carbslinux.scss b/sass/carbslinux.scss
new file mode 100644
index 0000000..96c63dd
--- /dev/null
+++ b/sass/carbslinux.scss
@@ -0,0 +1,8 @@
+/*
+ * Stylesheet for Carbs Linux website
+ * Copyright (c) 2019-2021 Cem Keylan
+ */
+@import "colors.scss";
+@import "sitestyle.scss";
+@import "bar.scss";
+@import "code.scss";
diff --git a/sass/code.scss b/sass/code.scss
new file mode 100644
index 0000000..b488d88
--- /dev/null
+++ b/sass/code.scss
@@ -0,0 +1,15 @@
+@import "colors.scss";
+
+/* Syntax highlighting for org-mode source block exports */
+.org-comment, .org-comment-delimiter {
+    color: $carbs-grey; font-style: italic;        // font-lock-comment-face
+}
+.org-builtin           { color: $carbs-blue; }     // font-lock-builtin-face
+.org-constant          { color: $carbs-pink; }     // font-lock-constant-face
+.org-doc               { color: $carbs-grey; }     // font-lock-doc-face
+.org-function-name     { color: $carbs-blue; }     // font-lock-function-name-face
+.org-variable-name     { color: $carbs-purple; }   // font-lock-variable-name-face
+.org-keyword           { color: $carbs-blue-alt; } // font-lock-keyword-face
+.org-string            { color: $carbs-green; }    // font-lock-string-face
+.org-type              { color: $carbs-orange; }   // font-lock-type-face
+.org-warning           { color: $carbs-red; }      // font-lock-warning-face
diff --git a/sass/colors.scss b/sass/colors.scss
new file mode 100644
index 0000000..dc4eff9
--- /dev/null
+++ b/sass/colors.scss
@@ -0,0 +1,68 @@
+$colors: (
+    light: (
+        carbs-color-bg:    #F3F6F8,
+        carbs-color-fg:    #0A1E2B,
+        carbs-highlight:   #E9ECEE,
+        carbs-pink:        #BF6790,
+        carbs-purple:      #8C45D4,
+        carbs-blue:        #3F74A6,
+        carbs-blue-alt:    #3F41A6,
+        carbs-red:         #D32C2C,
+        carbs-grey:        #738B8B,
+        carbs-green:       #027A59,
+        carbs-orange:      #B45123,
+    ),
+    dark: (
+        carbs-color-bg:    #0A1E2B,
+        carbs-color-fg:    #F3F6F8,
+        carbs-highlight:   #0A2830,
+        carbs-pink:        #BF6790,
+        carbs-purple:      #A6A6D2,
+        carbs-blue:        #6790BF,
+        carbs-blue-alt:    #67BCBF,
+        carbs-red:         #C34266,
+        carbs-grey:        #686868,
+        carbs-green:       #67BF96,
+        carbs-orange:      #F47A00,
+    ),
+);
+
+@function compose-color-variable($color-key) {
+    @return '--color-#{$color-key}';
+}
+
+@function color-get($theme, $color) {
+    $result: #{map-get(map-get($colors, $theme), $color)};
+    @if $result != "" {
+        @return $result;
+    }
+    @else { @error "Unknown theme/color combination: '#{$theme}' '#{$color}'" }
+}
+
+@mixin theme-adjust-hue($key, $color-name, $light-hue, $dark-hue: $light-hue) {
+    #{$key}: #{adjust-hue(map-get(map-get($colors, 'light'), $color-name), $light-hue)};
+    @at-root @media (prefers-color-scheme: dark) {
+        & {
+            #{$key}: #{adjust-hue(map-get(map-get($colors, 'dark'), $color-name), $dark-hue)};
+        }
+    }
+}
+
+$carbs-color-fg:  var(--color-carbs-color-fg) !default;
+$carbs-color-bg:  var(--color-carbs-color-bg) !default;
+$carbs-highlight: var(--color-carbs-highlight) !default;
+$carbs-pink:      var(--color-carbs-pink) !default;
+$carbs-purple:    var(--color-carbs-purple) !default;
+$carbs-blue:      var(--color-carbs-blue) !default;
+$carbs-blue-alt:  var(--color-carbs-blue-alt) !default;
+$carbs-red:       var(--color-carbs-red) !default;
+$carbs-grey:      var(--color-carbs-grey) !default;
+$carbs-green:     var(--color-carbs-green) !default;
+$carbs-orange:    var(--color-carbs-orange) !default;
+
+$font-size: 16px;
+
+$font-text: 'Noto Sans', 'Open Sans', sans-serif;
+$primary: $carbs-pink;
+$link: $carbs-pink;
+$link-alt: $carbs-blue-alt;
diff --git a/sass/sitestyle.scss b/sass/sitestyle.scss
new file mode 100644
index 0000000..f3e2f09
--- /dev/null
+++ b/sass/sitestyle.scss
@@ -0,0 +1,118 @@
+@import "colors.scss";
+
+// Generate light-scheme and dark-scheme colors from the '$colors' list
+:root {
+    @each $key, $value in map-get($colors, 'light') {
+        #{compose-color-variable($key)}: #{$value};
+    }
+    @at-root @media (prefers-color-scheme: dark) {
+        & {
+            @each $key, $value in map-get($colors, 'dark') {
+                #{compose-color-variable($key)}: #{$value};
+            }
+
+        }
+    }
+}
+
+body {
+    margin: 0;
+    background-color: $carbs-color-bg;
+    font-family: $font-text;
+    font-size: $font-size;
+    color: $carbs-color-fg;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -ms-overflow-style: scrollbar;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Reasonable line-height for better readability. */
+p, pre, li, dt, dd, table, code, address { line-height: 1.5em; }
+
+p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+#content {
+    width: 95%;
+    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left;
+    max-width: 50em;
+}
+
+.subtitle {
+    color: $carbs-color-fg;
+    font-weight: normal;
+    font-size: $font-size;
+    font-style: italic;
+}
+
+code, pre.src {
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+}
+
+code {
+    background-color: $carbs-highlight;
+    border-radius: 3px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    a {
+        color: inherit;
+        &:hover { text-decoration: none ;}
+    }
+}
+
+h1 {
+    color: $carbs-pink;
+    font-weight: 800;
+    a:hover { @include theme-adjust-hue(color, carbs-pink, 30deg) ;}
+}
+
+h2 {
+    color: $carbs-blue;
+    font-weight: 700;
+    a:hover { color: $carbs-purple; }
+}
+
+h3 {
+    color: $carbs-color-fg;
+    font-weight: 600;
+    a:hover { color: $carbs-blue; }
+}
+
+pre {
+    font: monospace;
+    border-radius: 3px;
+    border: 1px solid $carbs-highlight;
+    background-color: $carbs-highlight;
+    padding: 0.5em;
+    margin: 1em;
+    code, &.src {
+        display: block;
+        overflow: auto;
+    }
+    code { background: transparent; }
+}
+
+a {
+    text-decoration: none;
+    font-weight: bold;
+    color: $link;
+}
+
+a:hover {
+    text-decoration: underline;
+    color: $link-alt;
+}
+
+blockquote {
+    border-left: 1px solid $carbs-highlight;
+    font-style: italic;
+}