Added light theme

1 files changed, 30 insertions, 6 deletions

diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index b44e083..a27b30f 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,17 +1,29 @@
 @include namespace('body') {
     @include store((
         --colors: (
-            --meta: (
-                --fg: prop(--colors --fg-hi, $global: true),
-            )
+            --meta: prop(--colors --fg-hi, $global: true),
+            --code: (
+                --fg: hsl(prop(--colors --accent --h, $global: true), 90%, 64%),
+                --bg: prop(--colors --bg-hi, $global: true),
+            ),
+            --obj-border: prop(--colors --obj, $global: true),
         )
     ));
 
+    @include store((
+        --colors: (
+            --code: (
+                --fg: hsl(prop(--colors --accent --h, $global: true), 74%, 52%),
+            ),
+            --obj-border: prop(--colors --obj-hi, $global: true),
+        )
+    ), 'light');
+
     @include scope(namespace()) {
         font-size: 1 / 16 * 19em;
 
         @include element('meta') {
-            color:     prop(--colors --meta --fg);
+            color:     prop(--colors --meta);
             font-size: 1 / 16 * 15rem;
 
             + h1 {
@@ -23,11 +35,23 @@
             max-width: 100%;
         }
 
+        code {
+            padding:          .2em .4em;
+            background-color: prop(--colors --code --bg);
+            color:            prop(--colors --code --fg);
+        }
+
         blockquote,
         pre {
-            margin:       ($line-height * 1rem) 0 0;
+            margin:       ($line-height * 1rem) 0 0 1px;
             padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
-            border-left:  3px solid prop(--colors --obj, $global: true);
+            border-left:  3px solid prop(--colors --obj-border);
+        }
+
+        pre code {
+            padding:          0;
+            background-color: transparent;
+            color:            currentColor;
         }
 
         @include media('<=sm') {