diff options
author | Volpeon <git@volpeon.ink> | 2021-06-14 14:04:35 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-06-14 14:04:35 +0200 |
commit | 01d0b3af3c0d74ca4825c40d6900c2c5280d33c4 (patch) | |
tree | ffbe7a90d0e6ade9223d74e6d85876a7cbef6de0 /assets/css | |
parent | More distinctive appearance for unread posts (diff) | |
download | volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.tar.gz volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.tar.bz2 volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.zip |
Restructured some variables
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/_vars.scss | 82 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 26 |
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 | } |