Design

2 files changed, 27 insertions, 4 deletions

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
+                );
+            }
+        }
     }
 }