aboutsummaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/bar.scss123
-rw-r--r--sass/carbslinux.scss8
-rw-r--r--sass/code.scss15
-rw-r--r--sass/colors.scss68
-rw-r--r--sass/sitestyle.scss118
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;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-19 18:11:21 +0000