diff options
author | Volpeon <git@volpeon.ink> | 2021-06-16 21:26:40 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-06-16 21:26:40 +0200 |
commit | d5e1870eb547e11ff49f9956ea9c092105e4192c (patch) | |
tree | a4c4c7c5ec5a883ff41fd85c98c5206a0d2242d7 /assets/css/components/_card.scss | |
parent | Use 100vh to make fullscreen sections occupy the whole viewport (diff) | |
download | volpeon.ink-d5e1870eb547e11ff49f9956ea9c092105e4192c.tar.gz volpeon.ink-d5e1870eb547e11ff49f9956ea9c092105e4192c.tar.bz2 volpeon.ink-d5e1870eb547e11ff49f9956ea9c092105e4192c.zip |
Make sure page is not shorter than viewport; put card theme variables into card component
Diffstat (limited to 'assets/css/components/_card.scss')
-rw-r--r-- | assets/css/components/_card.scss | 25 |
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 @@ | |||
9 | --bg: prop(--colors --bg-lo, $global: true), | 9 | --bg: prop(--colors --bg-lo, $global: true), |
10 | --fg: prop(--colors --fg, $global: true), | 10 | --fg: prop(--colors --fg, $global: true), |
11 | --hover: ( | 11 | --hover: ( |
12 | --bg: prop(--colors --themes --invert --bg, $global: true), | 12 | --bg: prop(--colors --fg-lo, $global: true), |
13 | --fg: prop(--colors --themes --invert --fg, $global: true), | 13 | --fg: prop(--colors --bg-hi, $global: true), |
14 | ), | 14 | ), |
15 | --link: ( | 15 | --link: ( |
16 | --bg: prop(--colors --themes --link --bg-lo, $global: true), | 16 | --bg: prop(--colors --obj-hi, $global: true), |
17 | --fg: prop(--colors --themes --link --fg, $global: true), | 17 | --fg: prop(--colors --fg-lo, $global: true), |
18 | --fg-hi: prop(--colors --themes --link --fg-hi, $global: true), | 18 | --fg-hi: prop(--colors --fg, $global: true), |
19 | ) | 19 | ), |
20 | ) | 20 | ) |
21 | )); | 21 | )); |
22 | 22 | ||
23 | @include store(( | 23 | @include store(( |
24 | --colors: ( | 24 | --colors: ( |
25 | --bg: prop(--colors --bg-hi, $global: true), | 25 | --bg: prop(--colors --bg-hi, $global: true), |
26 | --link: ( | ||
27 | --bg: hsl( | ||
28 | #{prop(--colors --link --colored --idle-h, $global: true)}, | ||
29 | #{prop(--colors --link --colored --idle-s, $global: true)}, | ||
30 | 98.8% | ||
31 | ), | ||
32 | --fg: prop(--colors --link --colored --idle, $global: true), | ||
33 | --fg-hi: hsl( | ||
34 | #{prop(--colors --link --colored --idle-h, $global: true)}, | ||
35 | calc(#{prop(--colors --link --colored --idle-s, $global: true)} * .7), | ||
36 | calc(#{prop(--colors --link --colored --idle-l, $global: true)} * 1.3) | ||
37 | ), | ||
38 | ), | ||
26 | ) | 39 | ) |
27 | ), 'light'); | 40 | ), 'light'); |
28 | 41 | ||