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

1 files changed, 19 insertions, 6 deletions

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');