Better code block design, make header smaller on mobile

2 files changed, 39 insertions, 10 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index a84c4fa..1df7c5b 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -24,6 +24,12 @@
         )
     ), 'light');
 
+    @include store((
+        --dims: (
+            --height: 3.4rem,
+        )
+    ), 'sm');
+
     @include component(namespace()) {
         display: flex;
         height:  prop(--dims --height);
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 1de4dc5..a21c0a1 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -9,12 +9,26 @@
                 --fg: prop(--colors --accent --strong, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
             ),
-            --obj-border: prop(--colors --obj-hi, $global: true),
+            --code-block: (
+                --fg: prop(--colors --fg, $global: true),
+                --bg: prop(--colors --bg-lo, $global: true),
+            ),
+            --blockquote: (
+                --border: prop(--colors --obj-hi, $global: true),
+            )
         ),
         --dims: (
             --meta: (
                 --pad-x: .6em,
                 --pad-y: .2em
+            ),
+            --code: (
+                --pad-x: .3em,
+                --pad-y: .1em
+            ),
+            --code-block: (
+                --pad-x: 1em,
+                --pad-y: .7em
             )
         )
     ));
@@ -27,6 +41,9 @@
             --code: (
                 --bg: prop(--colors --accent --faint, $global: true),
             ),
+            --code-block: (
+                --bg: prop(--colors --bg-hi, $global: true),
+            ),
         )
     ), 'light');
 
@@ -48,24 +65,30 @@
         }
 
         code {
-            padding:          .1em .3em;
+            padding:          prop(--dims --code --pad-y) prop(--dims --code --pad-x);
             border-radius:    3px;
             background-color: prop(--colors --code --bg);
             color:            prop(--colors --code --fg);
         }
 
-        blockquote,
-        pre {
+        blockquote {
             margin:       ($line-height * 1rem) 0 0 1px;
             padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
-            border-left:  3px solid prop(--colors --obj-border);
+            border-left:  3px solid prop(--colors --blockquote --border);
         }
 
-        pre code {
-            padding:          0;
-            border-radius:    0;
-            background-color: transparent;
-            color:            currentColor;
+        pre {
+            margin:           ($line-height * 1rem) 0 0 0;
+            padding:          prop(--dims --code-block --pad-y) prop(--dims --code-block --pad-x);
+            background-color: prop(--colors --code-block --bg);
+            color:            prop(--colors --code-block --fg);
+
+            code {
+                padding:          0;
+                border-radius:    0;
+                background-color: transparent;
+                color:            currentColor;
+            }
         }
     }
 }