1 files changed, 118 insertions, 0 deletions
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;
+}