Added light theme

8 files changed, 154 insertions, 62 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ab3d9e5..388db0e 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -24,56 +24,109 @@ $font-size:       16px;
 $line-height:     1.7;
 $content--width:  42rem;
 
-$gray0: hsl(220, 7%, 7%);
-$gray1: hsl(220, 7%, 11%);
-$gray2: hsl(220, 7%, 18%);
-$gray3: hsl(220, 7%, 23%);
-$gray4: hsl(220, 7%, 38%);
-$gray5: hsl(220, 7%, 60%);
-$gray6: hsl(220, 7%, 76%);
-$gray7: hsl(220, 7%, 100%);
+@include iro-execute {
+    $gray0: hsl(220, 7%, 7%);
+    $gray1: hsl(220, 7%, 11%);
+    $gray2: hsl(220, 7%, 18%);
+    $gray3: hsl(220, 7%, 23%);
+    $gray4: hsl(220, 7%, 38%);
+    $gray5: hsl(220, 7%, 60%);
+    $gray6: hsl(220, 7%, 76%);
+    $gray7: hsl(220, 7%, 100%);
 
-@include store((
-    --dims: (
-        --outer:  4rem,
-        --indent: 2rem,
-    ),
-    --colors: (
-        --bg-hi:  $gray0, // Darker background
-        --bg:     $gray1, // Background
-        --bg-lo:  $gray2, // Lighter background
-    
-        --obj-hi: $gray3,
-        --obj:    $gray4,
-    
-        --fg-hi:  $gray5, // Faint text
-        --fg:     $gray6, // Text
-        --fg-lo:  $gray7, // Strong text
-
-        --accent: (
-            --h:     354,
-            --s:     84%,
-            --l:     55%,
-            --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+    @include store((
+        --dims: (
+            --outer:  4rem,
+            --indent: 2rem,
+
+            --obj-shadow: 0 .4em 3.5em,
         ),
+        --colors: (
+            --bg-hi:  $gray0, // Darker background
+            --bg:     $gray1, // Background
+            --bg-lo:  $gray2, // Lighter background
+        
+            --obj-hi: $gray3,
+            --obj:    $gray4,
+        
+            --fg-hi:  $gray5, // Faint text
+            --fg:     $gray6, // Text
+            --fg-lo:  $gray7, // Strong text
 
-        --focus-ring: var(--colors--fg-lo),
+            --obj-shadow: transparent,
 
-        --select: (
-            --bg:     rgba($gray7, .996),
-            --img-bg: rgba($gray7, .5),
-            --fg:     $gray0,
-        ),
+            --accent: (
+                --h:     354,
+                --s:     84%,
+                --l:     55%,
+                --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
+            ),
+
+            --focus-ring: var(--colors--fg-lo),
 
-        --link: (
-            --idle: var(--colors--fg-lo),
-            --colored: (
-                --idle:    hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), //
-                --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), //
-            )
+            --select: (
+                --bg:     rgba($gray7, .996),
+                --img-bg: rgba($gray7, .5),
+                --fg:     var(--colors--bg-hi),
+            ),
+
+            --link: (
+                --idle: var(--colors--fg-lo),
+                --colored: (
+                    --idle:    hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), //
+                )
+            ),
+        )
+    ));
+}
+
+@include iro-execute {
+    $gray0: hsl(220, 7%, 100%);
+    $gray1: hsl(220, 7%, 97%);
+    $gray2: hsl(220, 7%, 88%);
+    $gray3: hsl(220, 7%, 83%);
+    $gray4: hsl(220, 7%, 68%);
+    $gray5: hsl(220, 7%, 40%);
+    $gray6: hsl(220, 7%, 16%);
+    $gray7: hsl(220, 7%, 0%);
+
+    @include store((
+        --colors: (
+            --bg-hi:  $gray0, // Darker background
+            --bg:     $gray1, // Background
+            --bg-lo:  $gray2, // Lighter background
+        
+            --obj-hi: $gray3,
+            --obj:    $gray4,
+        
+            --fg-hi:  $gray5, // Faint text
+            --fg:     $gray6, // Text
+            --fg-lo:  $gray7, // Strong text
+
+            --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)),
+            ),
+
+            --select: (
+                --bg:     rgba($gray7, .996),
+                --img-bg: rgba($gray7, .5),
+            ),
+
+            --link: (
+                --colored: (
+                    --idle:    hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), //
+                )
+            ),
         ),
-    )
-));
+    ), 'light');
+}
 
 @each $breakpoint in map-keys($breakpoints) {
     @include media('<=#{$breakpoint}') {
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index fd897a7..eeaa7c1 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,6 +15,12 @@
         )
     ));
 
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+        )
+    ), 'light');
+
     @include component(namespace()) {
         display:          flex;
         position:         relative;
@@ -22,6 +28,7 @@
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s;
         background-color: prop(--colors --bg);
+        box-shadow:       prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
         color:            prop(--colors --fg);
         line-height:      1.4;
 
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 61f6f4a..e74780b 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -18,5 +18,6 @@
         left:            0;
         flex-direction:  row;
         justify-content: flex-start;
+        box-shadow:      prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
     }
 }
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 2b7775e..f3d3276 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -18,6 +18,12 @@
         )
     ));
 
+    @include store((
+        --colors: (
+            --border: rgba(#fff, .1),
+        )
+    ), 'light');
+
     @include component(namespace()) {
         display:          flex;
         height:           prop(--dims --outer, $global: true);
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 76cc68b..5248e32 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -6,8 +6,9 @@
     ));
 
     @include component(namespace()) {
-        position: relative;
-        overflow: hidden;
+        position:   relative;
+        overflow:   hidden;
+        box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
 
         &::before {
             content:          '';
@@ -56,13 +57,12 @@
         }
 
         @include element('card') {
-            position:   absolute;
-            z-index:    20;
-            right:      1em;
-            bottom:     1em;
-            min-width:  15em;
-            max-width:  calc(100% - 2em);
-            box-shadow: 0 .8em 2.5em rgba(#000, .25);
+            position:  absolute;
+            z-index:   20;
+            right:     1em;
+            bottom:    1em;
+            min-width: 15em;
+            max-width: calc(100% - 2em);
         }
     }
 }
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 9dbe2be..36c84a7 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -2,9 +2,6 @@
     @include store((
         --colors: (
             --border: prop(--colors --obj-hi, $global: true),
-        ),
-        --dims: (
-            --banner-blur: .5rem,
         )
     ));
 
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') {
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 30878fe..5ba15b8 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -40,3 +40,7 @@
         }
     }
 }
+
+.t-light {
+    @include assign('light');
+}