summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_basics.scss6
-rw-r--r--assets/css/_vars.scss71
-rw-r--r--assets/css/components/_card.scss25
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 {
32 padding: 0; 32 padding: 0;
33} 33}
34 34
35main {
36 display: flex;
37 flex-direction: column;
38 min-height: 100vh;
39}
40
35pre, 41pre,
36code { 42code {
37 font-family: $font-fam--mono; 43 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;
73 ), 73 ),
74 ), 74 ),
75 75
76 --themes: (
77 --link: (
78 --bg-hi: $gray1,
79 --bg: $gray2,
80 --bg-lo: $gray3,
81
82 --obj-hi: $gray4,
83 --obj: $gray5,
84
85 --fg-hi: $gray6,
86 --fg: $gray7,
87 --fg-lo: $gray7,
88 ),
89 --invert: (
90 --bg-hi: $gray7,
91 --bg: $gray7,
92 --bg-lo: $gray7,
93
94 --obj-hi: $gray2,
95 --obj: $gray2,
96
97 --fg-hi: $gray1,
98 --fg: $gray0,
99 --fg-lo: $gray0,
100 )
101 ),
102
103 --focus-ring: var(--colors--fg-lo), 76 --focus-ring: var(--colors--fg-lo),
104 77
105 --select: ( 78 --select: (
@@ -111,7 +84,14 @@ $content--width: 42rem;
111 --link: ( 84 --link: (
112 --idle: var(--colors--fg-lo), 85 --idle: var(--colors--fg-lo),
113 --colored: ( 86 --colored: (
114 --idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), // 87 --idle-h: 220,
88 --idle-s: 100%,
89 --idle-l: 80%,
90 --idle: hsl(
91 var(--colors--link--colored--idle-h),
92 var(--colors--link--colored--idle-s),
93 var(--colors--link--colored--idle-l),
94 ), //hsl(var(--colors--accent--h), 100%, 66%), //
115 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // 95 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
116 ) 96 )
117 ), 97 ),
@@ -159,41 +139,6 @@ $content--width: 42rem;
159 ), 139 ),
160 ), 140 ),
161 141
162 --themes: (
163 --link: (
164 --bg-hi: hsl(
165 var(--colors--link--colored--idle-h),
166 var(--colors--link--colored--idle-s),
167 98.8%
168 ),
169 --bg: var(--colors--themes--link--bg-hi),
170 --bg-lo: var(--colors--themes--link--bg-hi),
171
172 --obj-hi: hsl(
173 var(--colors--link--colored--idle-h),
174 calc(var(--colors--link--colored--idle-s) * .7),
175 calc(var(--colors--link--colored--idle-l) * 1.3)
176 ),
177 --obj: var(--colors--themes--link--obj-hi),
178
179 --fg-hi: var(--colors--themes--link--obj-hi),
180 --fg: var(--colors--link--colored--idle),
181 --fg-lo: var(--colors--themes--link--fg),
182 ),
183 --invert: (
184 --bg-hi: $gray7,
185 --bg: $gray7,
186 --bg-lo: $gray7,
187
188 --obj-hi: $gray2,
189 --obj: $gray2,
190
191 --fg-hi: $gray1,
192 --fg: $gray0,
193 --fg-lo: $gray0,
194 )
195 ),
196
197 --select: ( 142 --select: (
198 --bg: rgba($gray7, .996), 143 --bg: rgba($gray7, .996),
199 --img-bg: rgba($gray7, .5), 144 --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 @@
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