Design

6 files changed, 62 insertions, 33 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3093949..741061f 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -45,7 +45,7 @@ code {
 }
 
 code {
-    color:     var(--code--fg);
+    color:     prop(--colors --code --fg);
     font-size: 1 / 16 * 15em;
 }
 
@@ -147,7 +147,7 @@ h4,
 h5,
 h6 {
     margin:         ($line-height * 2rem) 0 0;
-    color:          var(--heading--fg);
+    color:          prop(--colors --fg-lo);
     font-size:      1 / 16 * 14em;
     font-weight:    700;
     letter-spacing: 1px;
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 814a68d..96c1c75 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -56,10 +56,12 @@ $content--width:  42rem;
             --obj-shadow: transparent,
 
             --accent: (
-                --h:     354,
-                --s:     84%,
-                --l:     55%,
-                --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+                --h:      354,
+                --s:      84%,
+                --l:      55%,
+                --color:  hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+                --strong: hsl(var(--colors--accent--h), calc(var(--colors--accent--s) * 1.1), calc(var(--colors--accent--l) * 1.1)),
+                --faint:  hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .1),
             ),
 
             --focus-ring: var(--colors--fg-lo),
@@ -77,6 +79,10 @@ $content--width:  42rem;
                     --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), //
                 )
             ),
+
+            --code: (
+                --fg: var(--colors--fg-hi),
+            ),
         )
     ));
 }
@@ -107,10 +113,10 @@ $content--width:  42rem;
             --obj-shadow: rgba(#000, .05),
 
             --accent: (
-                --h:     354,
-                --s:     74%,
-                --l:     48%,
-                --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+                --h:      354,
+                --s:      74%,
+                --l:      48%,
+                --strong: hsl(var(--colors--accent--h), var(--colors--accent--s), calc(var(--colors--accent--l) * .9)),
             ),
 
             --select: (
@@ -142,16 +148,3 @@ $content--width:  42rem;
         --indent: 1.5rem,
     ),
 ), 'sm');
-
-:root {
-    --heading--fg: var(--colors--fg-lo);
-
-    --code--fg: var(--colors--fg-hi);
-
-    --code-block--fg: var(--colors--fg-hi);
-
-    --page--link--idle--fg:    var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
-    --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
-    --page--link--hover--bg:   var(--page--link--idle--fg);
-    --page--link--hover--fg:   #000;
-}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 0e44e35..f1b8595 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -1,8 +1,10 @@
 @include namespace('landing-banner') {
     @include store((
         --colors: (
-            --emph-fg: prop(--colors --accent --color, $global: true),
-            --emph-bg: prop(--colors --bg-hi, $global: true)
+            --emph: (
+                --fg: prop(--colors --accent --color, $global: true),
+                --bg: prop(--colors --bg-hi, $global: true)
+            )
         )
     ));
 
@@ -21,14 +23,14 @@
             background-image: linear-gradient(
                 to top,
                 transparent .15em,
-                #{prop(--colors --emph-bg)} .15em,
-                #{prop(--colors --emph-bg)} .6em,
+                #{prop(--colors --emph --bg)} .15em,
+                #{prop(--colors --emph --bg)} .6em,
                 transparent .6em
             );
         }
 
         @include element('emph') {
-            color:       prop(--colors --emph-fg);
+            color:       prop(--colors --emph --fg);
             font-weight: 550;
         }
 
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 36c84a7..7c1cc9b 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,10 +1,17 @@
 @include namespace('section') {
     @include store((
         --colors: (
-            --border: prop(--colors --obj-hi, $global: true),
+            --border:  prop(--colors --obj-hi, $global: true),
+            --body-bg: transparent,
         )
     ));
 
+    @include store((
+        --colors: (
+            --body-bg: prop(--colors --bg-hi, $global: true),
+        )
+    ), 'light');
+
     @include layout(namespace()) {
         position: relative;
 
@@ -15,6 +22,10 @@
             padding-bottom: prop(--dims --outer, $global: true);
         }
 
+        @include modifier('body') {
+            background-color: prop(--colors --body-bg);
+        }
+
         @include modifier('no-head') {
             padding-top: prop(--dims --outer, $global: true);
         }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index a27b30f..ededaad 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -3,7 +3,7 @@
         --colors: (
             --meta: prop(--colors --fg-hi, $global: true),
             --code: (
-                --fg: hsl(prop(--colors --accent --h, $global: true), 90%, 64%),
+                --fg: prop(--colors --accent --strong, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
             ),
             --obj-border: prop(--colors --obj, $global: true),
@@ -13,7 +13,7 @@
     @include store((
         --colors: (
             --code: (
-                --fg: hsl(prop(--colors --accent --h, $global: true), 74%, 52%),
+                --bg: prop(--colors --accent --faint, $global: true),
             ),
             --obj-border: prop(--colors --obj-hi, $global: true),
         )
@@ -36,7 +36,8 @@
         }
 
         code {
-            padding:          .2em .4em;
+            padding:          .1em .3em;
+            border-radius:    3px;
             background-color: prop(--colors --code --bg);
             color:            prop(--colors --code --fg);
         }
@@ -50,6 +51,7 @@
 
         pre code {
             padding:          0;
+            border-radius:    0;
             background-color: transparent;
             color:            currentColor;
         }
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index dcd8024..03d6be1 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -2,11 +2,20 @@
     @include store((
         --colors: (
             --emph: (
-                --bg: prop(--colors --bg-hi, $global: true),
+                --bg:      prop(--colors --bg-hi, $global: true),
+                --body-bg: prop(--colors --bg-hi, $global: true),
             )
         )
     ));
 
+    @include store((
+        --colors: (
+            --emph: (
+                --body-bg: prop(--colors --bg, $global: true),
+            )
+        )
+    ), 'light');
+
     @include scope(namespace()) {
         h1,
         h2,
@@ -70,5 +79,17 @@
                 transparent .6em
             );
         }
+
+        @include modifier('body') {
+            @include element('title-inner') {
+                background-image: linear-gradient(
+                    to top,
+                    transparent .15em,
+                    #{prop(--colors --emph --body-bg)} .15em,
+                    #{prop(--colors --emph --body-bg)} .6em,
+                    transparent .6em
+                );
+            }
+        }
     }
 }