diff options
-rw-r--r-- | assets/css/_vars.scss | 55 |
1 files changed, 24 insertions, 31 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index d650842..3a1fb28 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -133,28 +133,6 @@ $content--width: 42rem; | |||
133 | $gray6: hsl(220, 7%, 16%); | 133 | $gray6: hsl(220, 7%, 16%); |
134 | $gray7: hsl(220, 7%, 0%); | 134 | $gray7: hsl(220, 7%, 0%); |
135 | 135 | ||
136 | $theme-link-bg: hsl( | ||
137 | var(--colors--accent--h), | ||
138 | var(--colors--accent--s), | ||
139 | 98.8% | ||
140 | ); | ||
141 | $theme-link-obj: hsla( | ||
142 | var(--colors--accent--h), | ||
143 | var(--colors--accent--s), | ||
144 | var(--colors--accent--l), | ||
145 | .5 | ||
146 | ); | ||
147 | $theme-link-fg: hsl( | ||
148 | var(--colors--accent--h), | ||
149 | var(--colors--accent--s), | ||
150 | calc(var(--colors--accent--l) * .8) | ||
151 | ); | ||
152 | $theme-link-fg-hi: hsl( | ||
153 | var(--colors--accent--h), | ||
154 | calc(var(--colors--accent--s) * .6), | ||
155 | calc(var(--colors--accent--l) * 1.2) | ||
156 | ); | ||
157 | |||
158 | @include store(( | 136 | @include store(( |
159 | --colors: ( | 137 | --colors: ( |
160 | --bg-hi: $gray0, // Darker background | 138 | --bg-hi: $gray0, // Darker background |
@@ -183,16 +161,24 @@ $content--width: 42rem; | |||
183 | 161 | ||
184 | --themes: ( | 162 | --themes: ( |
185 | --link: ( | 163 | --link: ( |
186 | --bg-hi: $theme-link-bg, | 164 | --bg-hi: hsl( |
187 | --bg: $theme-link-bg, | 165 | var(--colors--link--colored--idle-h), |
188 | --bg-lo: $theme-link-bg, | 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), | ||
189 | 171 | ||
190 | --obj-hi: $theme-link-obj, | 172 | --obj-hi: hsl( |
191 | --obj: $theme-link-obj, | 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), | ||
192 | 178 | ||
193 | --fg-hi: $theme-link-fg-hi, | 179 | --fg-hi: var(--colors--themes--link--obj-hi), |
194 | --fg: $theme-link-fg, | 180 | --fg: var(--colors--link--colored--idle), |
195 | --fg-lo: $theme-link-fg, | 181 | --fg-lo: var(--colors--themes--link--fg), |
196 | ), | 182 | ), |
197 | --invert: ( | 183 | --invert: ( |
198 | --bg-hi: $gray7, | 184 | --bg-hi: $gray7, |
@@ -215,7 +201,14 @@ $content--width: 42rem; | |||
215 | 201 | ||
216 | --link: ( | 202 | --link: ( |
217 | --colored: ( | 203 | --colored: ( |
218 | --idle: hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), // | 204 | --idle-h: 220, |
205 | --idle-s: 60%, | ||
206 | --idle-l: 40%, | ||
207 | --idle: hsl( | ||
208 | var(--colors--link--colored--idle-h), | ||
209 | var(--colors--link--colored--idle-s), | ||
210 | var(--colors--link--colored--idle-l), | ||
211 | ), //hsl(var(--colors--accent--h), 100%, 66%), // | ||
219 | --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // | 212 | --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // |
220 | ) | 213 | ) |
221 | ), | 214 | ), |