Make sure page is not shorter than viewport; put card theme variables into card component

3 files changed, 33 insertions, 69 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 8857121..4fe73a2 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -32,6 +32,12 @@ body {
     padding: 0;
 }
 
+main {
+    display:        flex;
+    flex-direction: column;
+    min-height:     100vh;
+}
+
 pre,
 code {
     font-family: $font-fam--mono;
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 3a1fb28..2377b43 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -73,33 +73,6 @@ $content--width:  42rem;
                 ),
             ),
 
-            --themes: (
-                --link: (
-                    --bg-hi:  $gray1,
-                    --bg:     $gray2,
-                    --bg-lo:  $gray3,
-                
-                    --obj-hi: $gray4,
-                    --obj:    $gray5,
-                
-                    --fg-hi:  $gray6,
-                    --fg:     $gray7,
-                    --fg-lo:  $gray7,
-                ),
-                --invert: (
-                    --bg-hi:  $gray7,
-                    --bg:     $gray7,
-                    --bg-lo:  $gray7,
-                
-                    --obj-hi: $gray2,
-                    --obj:    $gray2,
-                
-                    --fg-hi:  $gray1,
-                    --fg:     $gray0,
-                    --fg-lo:  $gray0,
-                )
-            ),
-
             --focus-ring: var(--colors--fg-lo),
 
             --select: (
@@ -111,7 +84,14 @@ $content--width:  42rem;
             --link: (
                 --idle: var(--colors--fg-lo),
                 --colored: (
-                    --idle:    hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --idle-h:  220,
+                    --idle-s:  100%,
+                    --idle-l:  80%,
+                    --idle:    hsl(
+                        var(--colors--link--colored--idle-h),
+                        var(--colors--link--colored--idle-s),
+                        var(--colors--link--colored--idle-l),
+                    ), //hsl(var(--colors--accent--h), 100%, 66%), //
                     --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
                 )
             ),
@@ -159,41 +139,6 @@ $content--width:  42rem;
                 ),
             ),
 
-            --themes: (
-                --link: (
-                    --bg-hi:  hsl(
-                        var(--colors--link--colored--idle-h),
-                        var(--colors--link--colored--idle-s),
-                        98.8%
-                    ),
-                    --bg:     var(--colors--themes--link--bg-hi),
-                    --bg-lo:  var(--colors--themes--link--bg-hi),
-                
-                    --obj-hi: hsl(
-                        var(--colors--link--colored--idle-h),
-                        calc(var(--colors--link--colored--idle-s) * .7),
-                        calc(var(--colors--link--colored--idle-l) * 1.3)
-                    ),
-                    --obj:    var(--colors--themes--link--obj-hi),
-                
-                    --fg-hi:  var(--colors--themes--link--obj-hi),
-                    --fg:     var(--colors--link--colored--idle),
-                    --fg-lo:  var(--colors--themes--link--fg),
-                ),
-                --invert: (
-                    --bg-hi:  $gray7,
-                    --bg:     $gray7,
-                    --bg-lo:  $gray7,
-                
-                    --obj-hi: $gray2,
-                    --obj:    $gray2,
-                
-                    --fg-hi:  $gray1,
-                    --fg:     $gray0,
-                    --fg-lo:  $gray0,
-                )
-            ),
-
             --select: (
                 --bg:     rgba($gray7, .996),
                 --img-bg: rgba($gray7, .5),
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index d1b549d..9a49cfd 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -9,20 +9,33 @@
             --bg: prop(--colors --bg-lo, $global: true),
             --fg: prop(--colors --fg, $global: true),
             --hover: (
-                --bg: prop(--colors --themes --invert --bg, $global: true),
-                --fg: prop(--colors --themes --invert --fg, $global: true),
+                --bg: prop(--colors --fg-lo, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
             ),
             --link: (
-                --bg:    prop(--colors --themes --link --bg-lo, $global: true),
-                --fg:    prop(--colors --themes --link --fg, $global: true),
-                --fg-hi: prop(--colors --themes --link --fg-hi, $global: true),
-            )
+                --bg:    prop(--colors --obj-hi, $global: true),
+                --fg:    prop(--colors --fg-lo, $global: true),
+                --fg-hi: prop(--colors --fg, $global: true),
+            ),
         )
     ));
 
     @include store((
         --colors: (
             --bg: prop(--colors --bg-hi, $global: true),
+            --link: (
+                --bg:    hsl(
+                    #{prop(--colors --link --colored --idle-h, $global: true)},
+                    #{prop(--colors --link --colored --idle-s, $global: true)},
+                    98.8%
+                ),
+                --fg:    prop(--colors --link --colored --idle, $global: true),
+                --fg-hi: hsl(
+                    #{prop(--colors --link --colored --idle-h, $global: true)},
+                    calc(#{prop(--colors --link --colored --idle-s, $global: true)} * .7),
+                    calc(#{prop(--colors --link --colored --idle-l, $global: true)} * 1.3)
+                ),
+            ),
         )
     ), 'light');