summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss82
-rw-r--r--assets/css/components/_card.scss26
2 files changed, 63 insertions, 45 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ba2d1fa..832c410 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -73,22 +73,31 @@ $content--width: 42rem;
73 ), 73 ),
74 ), 74 ),
75 75
76 --secondary-accent: ( 76 --themes: (
77 --h: 220, 77 --link: (
78 --s: 100%, 78 --bg-hi: $gray1,
79 --l: 80%, 79 --bg: $gray2,
80 --color: hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)), 80 --bg-lo: $gray3,
81 --strong: hsl( 81
82 var(--colors--secondary-accent--h), 82 --obj-hi: $gray4,
83 calc(var(--colors--secondary-accent--s) * 1.2), 83 --obj: $gray5,
84 calc(var(--colors--secondary-accent--l) * 1.2) 84
85 ), 85 --fg-hi: $gray6,
86 --faint: hsla( 86 --fg: $gray7,
87 var(--colors--secondary-accent--h), 87 --fg-lo: $gray7,
88 var(--colors--secondary-accent--s),
89 var(--colors--secondary-accent--l),
90 .1
91 ), 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 )
92 ), 101 ),
93 102
94 --focus-ring: var(--colors--fg-lo), 103 --focus-ring: var(--colors--fg-lo),
@@ -102,7 +111,7 @@ $content--width: 42rem;
102 --link: ( 111 --link: (
103 --idle: var(--colors--fg-lo), 112 --idle: var(--colors--fg-lo),
104 --colored: ( 113 --colored: (
105 --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), // 114 --idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), //
106 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // 115 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
107 ) 116 )
108 ), 117 ),
@@ -124,6 +133,13 @@ $content--width: 42rem;
124 $gray6: hsl(220, 7%, 16%); 133 $gray6: hsl(220, 7%, 16%);
125 $gray7: hsl(220, 7%, 0%); 134 $gray7: hsl(220, 7%, 0%);
126 135
136 $link-idle: hsl(220, 60%, 40%);
137
138 $theme-link-bg: change-color($link-idle, $lightness: 98.8%);
139 $theme-link-obj: rgba($link-idle, .5);
140 $theme-link-fg-hi: mix($link-idle, $gray0, 75%);
141 $theme-link-fg: $link-idle;
142
127 @include store(( 143 @include store((
128 --colors: ( 144 --colors: (
129 --bg-hi: $gray0, // Darker background 145 --bg-hi: $gray0, // Darker background
@@ -150,15 +166,31 @@ $content--width: 42rem;
150 ), 166 ),
151 ), 167 ),
152 168
153 --secondary-accent: ( 169 --themes: (
154 --h: 220, 170 --link: (
155 --s: 60%, 171 --bg-hi: $theme-link-bg,
156 --l: 40%, 172 --bg: $theme-link-bg,
157 --strong: hsl( 173 --bg-lo: $theme-link-bg,
158 var(--colors--secondary-accent--h), 174
159 var(--colors--secondary-accent--s), 175 --obj-hi: $theme-link-obj,
160 calc(var(--colors--secondary-accent--l) * .8) 176 --obj: $theme-link-obj,
177
178 --fg-hi: $theme-link-fg-hi,
179 --fg: $theme-link-fg,
180 --fg-lo: $theme-link-fg,
161 ), 181 ),
182 --invert: (
183 --bg-hi: $gray7,
184 --bg: $gray7,
185 --bg-lo: $gray7,
186
187 --obj-hi: $gray2,
188 --obj: $gray2,
189
190 --fg-hi: $gray1,
191 --fg: $gray0,
192 --fg-lo: $gray0,
193 )
162 ), 194 ),
163 195
164 --select: ( 196 --select: (
@@ -168,7 +200,7 @@ $content--width: 42rem;
168 200
169 --link: ( 201 --link: (
170 --colored: ( 202 --colored: (
171 --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), // 203 --idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //
172 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // 204 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
173 ) 205 )
174 ), 206 ),
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 1a7d1bd..6fdd874 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -9,13 +9,13 @@
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 --fg-lo, $global: true), 12 --bg: prop(--colors --themes --invert --bg, $global: true),
13 --fg: prop(--colors --bg-hi, $global: true), 13 --fg: prop(--colors --themes --invert --fg, $global: true),
14 ), 14 ),
15 --link: ( 15 --link: (
16 --bg: prop(--colors --obj-hi, $global: true), 16 --bg: prop(--colors --themes --link --bg-lo, $global: true),
17 --fg: prop(--colors --fg-lo, $global: true), 17 --fg: prop(--colors --themes --link --fg, $global: true),
18 --fg-faint: prop(--colors --fg, $global: true), 18 --fg-hi: prop(--colors --themes --link --fg-hi, $global: true),
19 ) 19 )
20 ) 20 )
21 )); 21 ));
@@ -23,20 +23,6 @@
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 --secondary-accent --h, $global: true),
29 prop(--colors --secondary-accent --s, $global: true),
30 98.8%,
31 ),
32 --fg: prop(--colors --secondary-accent --color, $global: true),
33 --fg-faint: hsla(
34 prop(--colors --secondary-accent --h, $global: true),
35 prop(--colors --secondary-accent --s, $global: true),
36 prop(--colors --secondary-accent --l, $global: true),
37 .75
38 ),
39 )
40 ) 26 )
41 ), 'light'); 27 ), 'light');
42 28
@@ -92,7 +78,7 @@
92 color: prop(--colors --link --fg); 78 color: prop(--colors --link --fg);
93 79
94 small { 80 small {
95 color: prop(--colors --link --fg-faint); 81 color: prop(--colors --link --fg-hi);
96 } 82 }
97 } 83 }
98 } 84 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 06:59:22 +0000