Added light theme

10 files changed, 158 insertions, 66 deletions

diff --git a/.stylelintrc.json b/.stylelintrc.json
index f15e9b6..82a61ce 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -5,7 +5,7 @@
         "number-leading-zero": "never",
         "max-nesting-depth": 4,
         "selector-class-pattern": [
-            "^[closu](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
+            "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
             { "resolveNestedSelectors": true }
         ],
         "declaration-colon-space-after": null,
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');
+}
diff --git a/templates/layouts/ascii_fox.html b/templates/layouts/ascii_fox.html
index ce8597e..9ae3b29 100644
--- a/templates/layouts/ascii_fox.html
+++ b/templates/layouts/ascii_fox.html
@@ -7,6 +7,6 @@
  '  '    |__          ,(    |'      |_     '      '            '       <strong>//\_</strong>         '   | '   . |            '      '          | '     ' 
  '       |   )~._   _(    . )      .|  )   '      <strong>____,...,______..,_~``  -`..,</strong>     '   |     ' |        . ( '      '          |       ' 
  '       |,     __´  )  (   |   |   |    `  <strong>_,~´"'  ,               .    ,~--´</strong>      '  _|  | .  |~~.__ ´     '      '__,.      |    '  ' 
- '    |  |  _.~(    _       |  '   ~(    <strong>,-"    _.-|~/  |..,____,) ,/,,"'</strong>           '_( | '     |)     )  .  '     (     )~-_  | '     ' 
- '       | (_     )    ´-   |    (  '    <strong>\__,~"´   /:) /       |:\ \</strong>              ,~(    ) .  | |  )    `,   '   _/- ..  ,  _) |       ' 
-´   .   ( `   (  .      :  /    :        .   :    <strong>(:/\_-,      \:.\_-,</strong>      .  \ .\      .  :    \  .    ) . ' ,(  .    :     /   .     `
+ '    |  |  ..(     _       |  '   ~(    <strong>,-"    _.-|~/  |..,____,) ,/,,"'</strong>           '_( | '     |)     )  .  '     (     )~-_  | '     ' 
+ '       |        )-   ´-   |    (  '    <strong>\__,~"´   /:) /       |:\ \</strong>              ,~(    ) .  | |  )    `,   '   _/- ..  ,  _) |       ' 
+´   .   ( `  :  ´.      :  /    :        .   :    <strong>(:/\_-,      \:.\_-,</strong>      .  \ .\      .  :    \  .    ) . ' ,(  .    :     /   .     `