From d5e1870eb547e11ff49f9956ea9c092105e4192c Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 16 Jun 2021 21:26:40 +0200
Subject: Make sure page is not shorter than viewport; put card theme variables
into card component
---
assets/css/_basics.scss | 6 ++++
assets/css/_vars.scss | 71 +++++-----------------------------------
assets/css/components/_card.scss | 25 ++++++++++----
3 files changed, 33 insertions(+), 69 deletions(-)
(limited to 'assets/css')
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');
--
cgit v1.2.3-70-g09d2