jekyll-theme-handwritten 4.3.4 → 4.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +21 -21
  3. data/README.md +92 -90
  4. data/_config.yml +54 -54
  5. data/_data/images.json +2 -2
  6. data/_includes/disqus_comments.html +20 -20
  7. data/_includes/footer.html +49 -49
  8. data/_includes/google-analytics.html +12 -12
  9. data/_includes/head.html +44 -45
  10. data/_includes/header.html +33 -33
  11. data/_includes/icon-github.html +1 -1
  12. data/_includes/icon-github.svg +1 -1
  13. data/_includes/icon-twitter.html +1 -1
  14. data/_includes/icon-twitter.svg +1 -1
  15. data/_includes/navrail.html +23 -23
  16. data/_includes/social.html +14 -14
  17. data/_includes/theme_selector.html +35 -35
  18. data/_layouts/default.html +23 -23
  19. data/_layouts/home.html +80 -80
  20. data/_layouts/page.html +14 -14
  21. data/_layouts/post.html +35 -35
  22. data/_sass/minima/_base.scss +846 -840
  23. data/_sass/minima/_layout.scss +277 -271
  24. data/_sass/minima/_mysass.scss +289 -285
  25. data/_sass/minima/_syntax-highlighting.scss +68 -68
  26. data/_sass/minima.scss +52 -52
  27. data/assets/main.scss +5 -5
  28. data/assets/minima-social-icons.svg +33 -33
  29. data/assets/theme-assets/js/theme.js +27 -27
  30. data/assets/theme-assets/material-theme/colors.module.css +294 -294
  31. data/assets/theme-assets/material-theme/theme.css +5 -5
  32. data/assets/theme-assets/material-theme/theme.dark.css +51 -51
  33. data/assets/theme-assets/material-theme/theme.light.css +51 -51
  34. data/assets/theme-assets/material-theme/tokens.css +303 -303
  35. data/assets/theme-assets/material-theme/typography.module.css +150 -150
  36. data/assets/theme-assets/theme-fonts/CascadiaCode-Regular.woff2 +0 -0
  37. data/assets/theme-assets/theme-fonts/ComicShanns-Regular.woff2 +0 -0
  38. data/assets/theme-assets/theme-fonts/Excalifont-Regular.woff2 +0 -0
  39. data/assets/theme-assets/theme-fonts/Lexend-Regular.ttf +0 -0
  40. data/assets/theme-assets/theme-fonts/LilitaOne-Regular.ttf +0 -0
  41. data/assets/theme-assets/theme-fonts/Virgil-Regular.woff2 +0 -0
  42. data/assets/theme-assets/theme-fonts/comic shanns.otf +0 -0
  43. data/assets/theme-assets/theme-icons/aboutme-small.svg +102 -102
  44. data/assets/theme-assets/theme-icons/aboutme.svg +9 -9
  45. data/assets/theme-assets/theme-icons/bookmark.svg +9 -9
  46. data/assets/theme-assets/theme-icons/categories-rough.svg +9 -9
  47. data/assets/theme-assets/theme-icons/categories2.svg +9 -9
  48. data/assets/theme-assets/theme-icons/divider.svg +19 -19
  49. data/assets/theme-assets/theme-icons/home-rough.svg +9 -9
  50. data/assets/theme-assets/theme-icons/home.svg +5 -5
  51. data/assets/theme-assets/theme-icons/home2.svg +9 -9
  52. data/assets/theme-assets/theme-icons/pin.svg +18 -18
  53. data/assets/theme-assets/theme-images/border-thick.svg +15 -15
  54. data/assets/theme-assets/theme-images/comp.png +0 -0
  55. data/assets/theme-assets/theme-images/comp.svg +9 -9
  56. data/assets/theme-assets/theme-images/logo.svg +9 -9
  57. data/assets/theme-assets/theme-images/menu.svg +9 -9
  58. metadata +13 -7
data/_sass/minima/_base.scss CHANGED
@@ -1,840 +1,846 @@
1
- /**
2
- * Reset some basic elements
3
- */
4
- body,
5
- h1,
6
- h2,
7
- h3,
8
- h4,
9
- h5,
10
- h6,
11
- p,
12
- blockquote,
13
- pre,
14
- hr,
15
- dl,
16
- dd,
17
- ol,
18
- ul,
19
- figure {
20
- margin: 0;
21
- padding: 0;
22
- box-sizing: border-box;
23
- }
24
- .dark-yellow {
25
- --md-sys-color-primary: rgb(219 198 110);
26
- --md-sys-color-surface-tint: rgb(219 198 110);
27
- --md-sys-color-on-primary: rgb(58 48 0);
28
- --md-sys-color-primary-container: rgb(83 70 0);
29
- --md-sys-color-on-primary-container: rgb(248 226 135);
30
- --md-sys-color-secondary: rgb(209 198 161);
31
- --md-sys-color-on-secondary: rgb(54 48 22);
32
- --md-sys-color-secondary-container: rgb(78 71 42);
33
- --md-sys-color-on-secondary-container: rgb(238 226 188);
34
- --md-sys-color-tertiary: rgb(169 208 179);
35
- --md-sys-color-on-tertiary: rgb(20 55 35);
36
- --md-sys-color-tertiary-container: rgb(44 78 56);
37
- --md-sys-color-on-tertiary-container: rgb(197 236 206);
38
- --md-sys-color-error: rgb(255 180 171);
39
- --md-sys-color-on-error: rgb(105 0 5);
40
- --md-sys-color-error-container: rgb(147 0 10);
41
- --md-sys-color-on-error-container: rgb(255 218 214);
42
- --md-sys-color-background: rgb(21 19 11);
43
- --md-sys-color-on-background: rgb(232 226 212);
44
- --md-sys-color-surface: rgb(21 19 11);
45
- --md-sys-color-on-surface: rgb(232 226 212);
46
- --md-sys-color-surface-variant: rgb(75 71 57);
47
- --md-sys-color-on-surface-variant: rgb(205 198 180);
48
- --md-sys-color-outline: #969080;
49
- --outline-filter: brightness(0) saturate(100%) invert(64%) sepia(15%)
50
- saturate(306%) hue-rotate(6deg) brightness(87%) contrast(85%);
51
- --md-sys-color-outline-variant: rgb(75 71 57);
52
- --md-sys-color-shadow: rgb(0 0 0);
53
- --md-sys-color-scrim: rgb(0 0 0);
54
- --md-sys-color-inverse-surface: rgb(232 226 212);
55
- --md-sys-color-inverse-on-surface: rgb(51 48 39);
56
- --md-sys-color-inverse-primary: rgb(109 94 15);
57
- --md-sys-color-primary-fixed: rgb(248 226 135);
58
- --md-sys-color-on-primary-fixed: rgb(34 27 0);
59
- --md-sys-color-primary-fixed-dim: rgb(219 198 110);
60
- --md-sys-color-on-primary-fixed-variant: rgb(83 70 0);
61
- --md-sys-color-secondary-fixed: rgb(238 226 188);
62
- --md-sys-color-on-secondary-fixed: rgb(33 27 4);
63
- --md-sys-color-secondary-fixed-dim: rgb(209 198 161);
64
- --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42);
65
- --md-sys-color-tertiary-fixed: rgb(197 236 206);
66
- --md-sys-color-on-tertiary-fixed: rgb(0 33 15);
67
- --md-sys-color-tertiary-fixed-dim: rgb(169 208 179);
68
- --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56);
69
- --md-sys-color-surface-dim: rgb(21 19 11);
70
- --md-sys-color-surface-bright: rgb(60 57 48);
71
- --md-sys-color-surface-container-lowest: rgb(16 14 7);
72
- --md-sys-color-surface-container-low: rgb(30 27 19);
73
- --md-sys-color-surface-container: rgb(34 32 23);
74
- --md-sys-color-surface-container-high: rgb(45 42 33);
75
- --md-sys-color-surface-container-highest: rgb(56 53 43);
76
- }
77
- .dark-blue {
78
- --md-sys-color-primary: rgb(170 199 255);
79
- --md-sys-color-surface-tint: rgb(170 199 255);
80
- --md-sys-color-on-primary: rgb(10 48 95);
81
- --md-sys-color-primary-container: rgb(40 71 119);
82
- --md-sys-color-on-primary-container: rgb(214 227 255);
83
- --md-sys-color-secondary: rgb(190 198 220);
84
- --md-sys-color-on-secondary: rgb(40 49 65);
85
- --md-sys-color-secondary-container: rgb(62 71 89);
86
- --md-sys-color-on-secondary-container: rgb(218 226 249);
87
- --md-sys-color-tertiary: rgb(221 188 224);
88
- --md-sys-color-on-tertiary: rgb(63 40 68);
89
- --md-sys-color-tertiary-container: rgb(87 62 92);
90
- --md-sys-color-on-tertiary-container: rgb(250 216 253);
91
- --md-sys-color-error: rgb(255 180 171);
92
- --md-sys-color-on-error: rgb(105 0 5);
93
- --md-sys-color-error-container: rgb(147 0 10);
94
- --md-sys-color-on-error-container: rgb(255 218 214);
95
- --md-sys-color-background: rgb(17 19 24);
96
- --md-sys-color-on-background: rgb(226 226 233);
97
- --md-sys-color-surface: rgb(17 19 24);
98
- --md-sys-color-on-surface: rgb(226 226 233);
99
- --md-sys-color-surface-variant: rgb(68 71 78);
100
- --md-sys-color-on-surface-variant: rgb(196 198 208);
101
- --md-sys-color-outline: #8e9099;
102
- --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(5%)
103
- saturate(424%) hue-rotate(192deg) brightness(92%) contrast(92%);
104
- --md-sys-color-outline-variant: #44474e;
105
- --md-sys-color-shadow: rgb(0 0 0);
106
- --md-sys-color-scrim: rgb(0 0 0);
107
- --md-sys-color-inverse-surface: rgb(226 226 233);
108
- --md-sys-color-inverse-on-surface: rgb(46 48 54);
109
- --md-sys-color-inverse-primary: rgb(65 95 145);
110
- --md-sys-color-primary-fixed: rgb(214 227 255);
111
- --md-sys-color-on-primary-fixed: rgb(0 27 62);
112
- --md-sys-color-primary-fixed-dim: rgb(170 199 255);
113
- --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
114
- --md-sys-color-secondary-fixed: rgb(218 226 249);
115
- --md-sys-color-on-secondary-fixed: rgb(19 28 43);
116
- --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
117
- --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
118
- --md-sys-color-tertiary-fixed: rgb(250 216 253);
119
- --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
120
- --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
121
- --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
122
- --md-sys-color-surface-dim: rgb(17 19 24);
123
- --md-sys-color-surface-bright: rgb(55 57 62);
124
- --md-sys-color-surface-container-lowest: rgb(12 14 19);
125
- --md-sys-color-surface-container-low: rgb(25 28 32);
126
- --md-sys-color-surface-container: rgb(29 32 36);
127
- --md-sys-color-surface-container-high: rgb(40 42 47);
128
- --md-sys-color-surface-container-highest: rgb(51 53 58);
129
- }
130
- .dark-cyan {
131
- --md-sys-color-primary: rgb(129 213 205);
132
- --md-sys-color-surface-tint: rgb(129 213 205);
133
- --md-sys-color-on-primary: rgb(0 55 52);
134
- --md-sys-color-primary-container: rgb(0 80 75);
135
- --md-sys-color-on-primary-container: rgb(157 242 233);
136
- --md-sys-color-secondary: rgb(176 204 200);
137
- --md-sys-color-on-secondary: rgb(28 53 50);
138
- --md-sys-color-secondary-container: rgb(50 75 73);
139
- --md-sys-color-on-secondary-container: rgb(204 232 228);
140
- --md-sys-color-tertiary: rgb(175 201 231);
141
- --md-sys-color-on-tertiary: rgb(24 50 74);
142
- --md-sys-color-tertiary-container: rgb(48 73 98);
143
- --md-sys-color-on-tertiary-container: rgb(207 229 255);
144
- --md-sys-color-error: rgb(255 180 171);
145
- --md-sys-color-on-error: rgb(105 0 5);
146
- --md-sys-color-error-container: rgb(147 0 10);
147
- --md-sys-color-on-error-container: rgb(255 218 214);
148
- --md-sys-color-background: rgb(14 21 20);
149
- --md-sys-color-on-background: rgb(221 228 226);
150
- --md-sys-color-surface: rgb(14 21 20);
151
- --md-sys-color-on-surface: rgb(221 228 226);
152
- --md-sys-color-surface-variant: rgb(63 73 71);
153
- --md-sys-color-on-surface-variant: rgb(190 201 198);
154
- --md-sys-color-outline: #899391;
155
- --outline-filter: brightness(0) saturate(100%) invert(66%) sepia(8%)
156
- saturate(263%) hue-rotate(118deg) brightness(85%) contrast(87%);
157
- --md-sys-color-outline-variant: rgb(63 73 71);
158
- --md-sys-color-shadow: rgb(0 0 0);
159
- --md-sys-color-scrim: rgb(0 0 0);
160
- --md-sys-color-inverse-surface: rgb(221 228 226);
161
- --md-sys-color-inverse-on-surface: rgb(43 50 49);
162
- --md-sys-color-inverse-primary: rgb(0 106 100);
163
- --md-sys-color-primary-fixed: rgb(157 242 233);
164
- --md-sys-color-on-primary-fixed: rgb(0 32 30);
165
- --md-sys-color-primary-fixed-dim: rgb(129 213 205);
166
- --md-sys-color-on-primary-fixed-variant: rgb(0 80 75);
167
- --md-sys-color-secondary-fixed: rgb(204 232 228);
168
- --md-sys-color-on-secondary-fixed: rgb(5 31 29);
169
- --md-sys-color-secondary-fixed-dim: rgb(176 204 200);
170
- --md-sys-color-on-secondary-fixed-variant: rgb(50 75 73);
171
- --md-sys-color-tertiary-fixed: rgb(207 229 255);
172
- --md-sys-color-on-tertiary-fixed: rgb(0 29 51);
173
- --md-sys-color-tertiary-fixed-dim: rgb(175 201 231);
174
- --md-sys-color-on-tertiary-fixed-variant: rgb(48 73 98);
175
- --md-sys-color-surface-dim: rgb(14 21 20);
176
- --md-sys-color-surface-bright: rgb(52 58 57);
177
- --md-sys-color-surface-container-lowest: rgb(9 15 15);
178
- --md-sys-color-surface-container-low: rgb(22 29 28);
179
- --md-sys-color-surface-container: rgb(26 33 32);
180
- --md-sys-color-surface-container-high: rgb(37 43 42);
181
- --md-sys-color-surface-container-highest: rgb(47 54 53);
182
- }
183
- .dark-green {
184
- --md-sys-color-primary: rgb(177 209 138);
185
- --md-sys-color-surface-tint: rgb(177 209 138);
186
- --md-sys-color-on-primary: rgb(31 55 1);
187
- --md-sys-color-primary-container: rgb(53 78 22);
188
- --md-sys-color-on-primary-container: rgb(205 237 163);
189
- --md-sys-color-secondary: rgb(191 203 173);
190
- --md-sys-color-on-secondary: rgb(42 51 30);
191
- --md-sys-color-secondary-container: rgb(64 74 51);
192
- --md-sys-color-on-secondary-container: rgb(220 231 200);
193
- --md-sys-color-tertiary: rgb(160 208 203);
194
- --md-sys-color-on-tertiary: rgb(0 55 53);
195
- --md-sys-color-tertiary-container: rgb(31 78 75);
196
- --md-sys-color-on-tertiary-container: rgb(188 236 231);
197
- --md-sys-color-error: rgb(255 180 171);
198
- --md-sys-color-on-error: rgb(105 0 5);
199
- --md-sys-color-error-container: rgb(147 0 10);
200
- --md-sys-color-on-error-container: rgb(255 218 214);
201
- --md-sys-color-background: rgb(18 20 14);
202
- --md-sys-color-on-background: rgb(226 227 216);
203
- --md-sys-color-surface: rgb(18 20 14);
204
- --md-sys-color-on-surface: rgb(226 227 216);
205
- --md-sys-color-surface-variant: rgb(68 72 61);
206
- --md-sys-color-on-surface-variant: rgb(197 200 186);
207
- --md-sys-color-outline: #8f9285;
208
- --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(6%)
209
- saturate(487%) hue-rotate(33deg) brightness(92%) contrast(91%);
210
- --md-sys-color-outline-variant: rgb(68 72 61);
211
- --md-sys-color-shadow: rgb(0 0 0);
212
- --md-sys-color-scrim: rgb(0 0 0);
213
- --md-sys-color-inverse-surface: rgb(226 227 216);
214
- --md-sys-color-inverse-on-surface: rgb(47 49 42);
215
- --md-sys-color-inverse-primary: rgb(76 102 43);
216
- --md-sys-color-primary-fixed: rgb(205 237 163);
217
- --md-sys-color-on-primary-fixed: rgb(16 32 0);
218
- --md-sys-color-primary-fixed-dim: rgb(177 209 138);
219
- --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
220
- --md-sys-color-secondary-fixed: rgb(220 231 200);
221
- --md-sys-color-on-secondary-fixed: rgb(21 30 11);
222
- --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
223
- --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
224
- --md-sys-color-tertiary-fixed: rgb(188 236 231);
225
- --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
226
- --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
227
- --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
228
- --md-sys-color-surface-dim: rgb(18 20 14);
229
- --md-sys-color-surface-bright: rgb(56 58 50);
230
- --md-sys-color-surface-container-lowest: rgb(12 15 9);
231
- --md-sys-color-surface-container-low: rgb(26 28 22);
232
- --md-sys-color-surface-container: rgb(30 32 26);
233
- --md-sys-color-surface-container-high: rgb(40 43 36);
234
- --md-sys-color-surface-container-highest: rgb(51 54 46);
235
- }
236
- .dark-pink {
237
- --md-sys-color-primary: rgb(240 179 231);
238
- --md-sys-color-surface-tint: rgb(240 179 231);
239
- --md-sys-color-on-primary: rgb(75 31 74);
240
- --md-sys-color-primary-container: rgb(101 54 98);
241
- --md-sys-color-on-primary-container: rgb(255 215 247);
242
- --md-sys-color-secondary: rgb(218 191 211);
243
- --md-sys-color-on-secondary: rgb(61 43 58);
244
- --md-sys-color-secondary-container: rgb(84 65 81);
245
- --md-sys-color-on-secondary-container: rgb(247 218 239);
246
- --md-sys-color-tertiary: rgb(246 184 168);
247
- --md-sys-color-on-tertiary: rgb(76 38 27);
248
- --md-sys-color-tertiary-container: rgb(102 59 48);
249
- --md-sys-color-on-tertiary-container: rgb(255 219 209);
250
- --md-sys-color-error: rgb(255 180 171);
251
- --md-sys-color-on-error: rgb(105 0 5);
252
- --md-sys-color-error-container: rgb(147 0 10);
253
- --md-sys-color-on-error-container: rgb(255 218 214);
254
- --md-sys-color-background: rgb(23 18 22);
255
- --md-sys-color-on-background: rgb(235 223 230);
256
- --md-sys-color-surface: rgb(23 18 22);
257
- --md-sys-color-on-surface: rgb(235 223 230);
258
- --md-sys-color-surface-variant: rgb(78 68 75);
259
- --md-sys-color-on-surface-variant: rgb(209 195 203);
260
- --md-sys-color-outline: #9a8d95;
261
- --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(13%)
262
- saturate(228%) hue-rotate(270deg) brightness(93%) contrast(82%);
263
- --md-sys-color-outline-variant: rgb(78 68 75);
264
- --md-sys-color-shadow: rgb(0 0 0);
265
- --md-sys-color-scrim: rgb(0 0 0);
266
- --md-sys-color-inverse-surface: rgb(235 223 230);
267
- --md-sys-color-inverse-on-surface: rgb(53 46 51);
268
- --md-sys-color-inverse-primary: rgb(127 77 123);
269
- --md-sys-color-primary-fixed: rgb(255 215 247);
270
- --md-sys-color-on-primary-fixed: rgb(51 8 51);
271
- --md-sys-color-primary-fixed-dim: rgb(240 179 231);
272
- --md-sys-color-on-primary-fixed-variant: rgb(101 54 98);
273
- --md-sys-color-secondary-fixed: rgb(247 218 239);
274
- --md-sys-color-on-secondary-fixed: rgb(38 22 37);
275
- --md-sys-color-secondary-fixed-dim: rgb(218 191 211);
276
- --md-sys-color-on-secondary-fixed-variant: rgb(84 65 81);
277
- --md-sys-color-tertiary-fixed: rgb(255 219 209);
278
- --md-sys-color-on-tertiary-fixed: rgb(50 18 9);
279
- --md-sys-color-tertiary-fixed-dim: rgb(246 184 168);
280
- --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 48);
281
- --md-sys-color-surface-dim: rgb(23 18 22);
282
- --md-sys-color-surface-bright: rgb(62 55 60);
283
- --md-sys-color-surface-container-lowest: rgb(18 13 17);
284
- --md-sys-color-surface-container-low: rgb(32 26 30);
285
- --md-sys-color-surface-container: rgb(36 30 34);
286
- --md-sys-color-surface-container-high: rgb(47 40 45);
287
- --md-sys-color-surface-container-highest: rgb(58 51 56);
288
- }
289
-
290
- .logo {
291
- height: 120px;
292
- @include media-query($on-palm) {
293
- height: 90px;
294
- }
295
- }
296
- .header-container {
297
- display: flex;
298
- justify-content: center;
299
- flex-direction: column;
300
- }
301
- @font-face {
302
- font-family: Virgil;
303
- src: url("/assets/theme-assets/theme-fonts/Virgil.woff2");
304
- }
305
- @font-face {
306
- font-family: "Comic Shanns";
307
- src: url("/assets/theme-assets/theme-fonts/comic\ shanns.otf");
308
- }
309
- /**
310
- * Basic styling
311
- */
312
- body {
313
- font: $base-font-weight #{$base-font-size}/#{$base-line-height}
314
- $base-font-family;
315
- color: $text-color;
316
- background-color: $background-color;
317
- -webkit-text-size-adjust: 100%;
318
- -webkit-font-feature-settings: "kern" 1;
319
- -moz-font-feature-settings: "kern" 1;
320
- -o-font-feature-settings: "kern" 1;
321
- font-feature-settings: "kern" 1;
322
- font-kerning: normal;
323
- display: flex;
324
- min-height: 100vh;
325
- flex-direction: column;
326
- }
327
-
328
- /**
329
- * Set `margin-bottom` to maintain vertical rhythm
330
- */
331
- h1,
332
- h2,
333
- h3,
334
- h4,
335
- h5,
336
- h6,
337
- p,
338
- blockquote,
339
- pre,
340
- ul,
341
- ol,
342
- dl,
343
- figure,
344
- %vertical-rhythm {
345
- margin-bottom: $spacing-unit / 2;
346
- }
347
-
348
- /**
349
- * `main` element
350
- */
351
- main {
352
- display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
353
- }
354
-
355
- /**
356
- * Images
357
- */
358
- img {
359
- max-width: 100%;
360
- vertical-align: middle;
361
- }
362
-
363
- /**
364
- * Figures
365
- */
366
- figure > img {
367
- display: block;
368
- }
369
-
370
- figcaption {
371
- font-size: $small-font-size;
372
- }
373
-
374
- /**
375
- * Lists
376
- */
377
- ul,
378
- ol {
379
- margin-left: $spacing-unit;
380
- }
381
-
382
- li {
383
- > ul,
384
- > ol {
385
- margin-bottom: 0;
386
- }
387
- }
388
-
389
- /**
390
- * Headings
391
- */
392
- h1,
393
- h2,
394
- h3,
395
- h4,
396
- h5,
397
- h6 {
398
- font-weight: $base-font-weight;
399
- }
400
-
401
- /**
402
- * Links
403
- */
404
- a {
405
- color: var(--md-sys-color-primary);
406
- text-decoration: none;
407
-
408
- &:visited {
409
- // color: var(--md-sys-color-inverse-primary);
410
- }
411
-
412
- &:hover {
413
- color: $text-color;
414
- text-decoration: underline;
415
- }
416
-
417
- .social-media-list &:hover {
418
- text-decoration: none;
419
-
420
- .username {
421
- text-decoration: underline;
422
- }
423
- }
424
- }
425
-
426
- /**
427
- * Blockquotes
428
- */
429
- blockquote {
430
- color: $grey-color;
431
- border-left: 4px solid $grey-color-light;
432
- padding-left: $spacing-unit / 2;
433
- @include relative-font-size(1.125);
434
- letter-spacing: -1px;
435
- font-style: italic;
436
-
437
- > :last-child {
438
- margin-bottom: 0;
439
- }
440
- }
441
-
442
- /**
443
- * Code formatting
444
- */
445
- pre,
446
- code {
447
- @include relative-font-size(0.9375);
448
- border: 1px solid var(--md-sys-color-outline);
449
- border-radius: 3px;
450
- background-color: var(--md-sys-color-surface-container-high);
451
- }
452
-
453
- code {
454
- padding: 1px 5px;
455
- }
456
-
457
- pre {
458
- padding: 8px 12px;
459
- overflow-x: auto;
460
-
461
- > code {
462
- border: 0;
463
- padding-right: 0;
464
- padding-left: 0;
465
- }
466
- }
467
-
468
- /**
469
- * Wrapper
470
- */
471
- .wrapper {
472
- max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
473
- max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
474
- margin-right: auto;
475
- margin-left: auto;
476
- padding-right: $spacing-unit;
477
- padding-left: $spacing-unit + 100;
478
- @extend %clearfix;
479
-
480
- @include media-query($on-laptop) {
481
- max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
482
- max-width: calc(#{$content-width} - (#{$spacing-unit}));
483
- padding-right: $spacing-unit / 2;
484
- padding-left: ($spacing-unit / 2)+100;
485
- }
486
- @include media-query($on-palm) {
487
- padding-left: $spacing-unit/2;
488
- }
489
- }
490
-
491
- /**
492
- * Clearfix
493
- */
494
- %clearfix:after {
495
- content: "";
496
- display: table;
497
- clear: both;
498
- }
499
-
500
- /**
501
- * Icons
502
- */
503
-
504
- .svg-icon {
505
- width: 16px;
506
- height: 16px;
507
- display: inline-block;
508
- fill: #{$grey-color};
509
- padding-right: 5px;
510
- vertical-align: text-top;
511
- }
512
-
513
- .social-media-list {
514
- li + li {
515
- padding-top: 5px;
516
- }
517
- }
518
-
519
- /**
520
- * Tables
521
- */
522
- table {
523
- margin-bottom: $spacing-unit;
524
- width: 100%;
525
- text-align: $table-text-align;
526
- color: var(--md-sys-color-on-surface);
527
- border-collapse: collapse;
528
- border: 1px solid var(--md-sys-color-outline);
529
- tr {
530
- &:nth-child(even) {
531
- background-color: var(--md-sys-color-surface-container-high);
532
- }
533
- }
534
- th,
535
- td {
536
- padding: ($spacing-unit / 3) ($spacing-unit / 2);
537
- }
538
- th {
539
- background-color: var(--md-sys-color-surface-container-highest);
540
- // border: 1px solid darken($grey-color-light, 4%);
541
- // border-bottom-color: darken($grey-color-light, 12%);
542
- }
543
- td {
544
- border: 1px solid var(--md-sys-color-outline);
545
- }
546
- }
547
- .primary {
548
- background-color: var(--md-sys-color-primary);
549
- }
550
- .primary-text {
551
- color: var(--md-sys-color-primary);
552
- }
553
- .on-primary {
554
- background-color: var(--md-sys-color-on-primary);
555
- }
556
- .on-primary-text {
557
- color: var(--md-sys-color-on-primary);
558
- }
559
- .primary-container {
560
- background-color: var(--md-sys-color-primary-container);
561
- }
562
- .primary-container-text {
563
- color: var(--md-sys-color-primary-container);
564
- }
565
- .on-primary-container {
566
- background-color: var(--md-sys-color-on-primary-container);
567
- }
568
- .on-primary-container-text {
569
- color: var(--md-sys-color-on-primary-container);
570
- }
571
- .primary-fixed {
572
- background-color: var(--md-sys-color-primary-fixed);
573
- }
574
- .primary-fixed-text {
575
- color: var(--md-sys-color-primary-fixed);
576
- }
577
- .on-primary-fixed {
578
- background-color: var(--md-sys-color-on-primary-fixed);
579
- }
580
- .on-primary-fixed-text {
581
- color: var(--md-sys-color-on-primary-fixed);
582
- }
583
- .primary-fixed-dim {
584
- background-color: var(--md-sys-color-primary-fixed-dim);
585
- }
586
- .primary-fixed-dim-text {
587
- color: var(--md-sys-color-primary-fixed-dim);
588
- }
589
- .on-primary-fixed-variant {
590
- background-color: var(--md-sys-color-on-primary-fixed-variant);
591
- }
592
- .on-primary-fixed-variant-text {
593
- color: var(--md-sys-color-on-primary-fixed-variant);
594
- }
595
- .secondary {
596
- background-color: var(--md-sys-color-secondary);
597
- }
598
- .secondary-text {
599
- color: var(--md-sys-color-secondary);
600
- }
601
- .on-secondary {
602
- background-color: var(--md-sys-color-on-secondary);
603
- }
604
- .on-secondary-text {
605
- color: var(--md-sys-color-on-secondary);
606
- }
607
- .secondary-container {
608
- background-color: var(--md-sys-color-secondary-container);
609
- }
610
- .secondary-container-text {
611
- color: var(--md-sys-color-secondary-container);
612
- }
613
- .on-secondary-container {
614
- background-color: var(--md-sys-color-on-secondary-container);
615
- }
616
- .on-secondary-container-text {
617
- color: var(--md-sys-color-on-secondary-container);
618
- }
619
- .secondary-fixed {
620
- background-color: var(--md-sys-color-secondary-fixed);
621
- }
622
- .secondary-fixed-text {
623
- color: var(--md-sys-color-secondary-fixed);
624
- }
625
- .on-secondary-fixed {
626
- background-color: var(--md-sys-color-on-secondary-fixed);
627
- }
628
- .on-secondary-fixed-text {
629
- color: var(--md-sys-color-on-secondary-fixed);
630
- }
631
- .secondary-fixed-dim {
632
- background-color: var(--md-sys-color-secondary-fixed-dim);
633
- }
634
- .secondary-fixed-dim-text {
635
- color: var(--md-sys-color-secondary-fixed-dim);
636
- }
637
- .on-secondary-fixed-variant {
638
- background-color: var(--md-sys-color-on-secondary-fixed-variant);
639
- }
640
- .on-secondary-fixed-variant-text {
641
- color: var(--md-sys-color-on-secondary-fixed-variant);
642
- }
643
- .tertiary {
644
- background-color: var(--md-sys-color-tertiary);
645
- }
646
- .tertiary-text {
647
- color: var(--md-sys-color-tertiary);
648
- }
649
- .on-tertiary {
650
- background-color: var(--md-sys-color-on-tertiary);
651
- }
652
- .on-tertiary-text {
653
- color: var(--md-sys-color-on-tertiary);
654
- }
655
- .tertiary-container {
656
- background-color: var(--md-sys-color-tertiary-container);
657
- }
658
- .tertiary-container-text {
659
- color: var(--md-sys-color-tertiary-container);
660
- }
661
- .on-tertiary-container {
662
- background-color: var(--md-sys-color-on-tertiary-container);
663
- }
664
- .on-tertiary-container-text {
665
- color: var(--md-sys-color-on-tertiary-container);
666
- }
667
- .tertiary-fixed {
668
- background-color: var(--md-sys-color-tertiary-fixed);
669
- }
670
- .tertiary-fixed-text {
671
- color: var(--md-sys-color-tertiary-fixed);
672
- }
673
- .on-tertiary-fixed {
674
- background-color: var(--md-sys-color-on-tertiary-fixed);
675
- }
676
- .on-tertiary-fixed-text {
677
- color: var(--md-sys-color-on-tertiary-fixed);
678
- }
679
- .tertiary-fixed-dim {
680
- background-color: var(--md-sys-color-tertiary-fixed-dim);
681
- }
682
- .tertiary-fixed-dim-text {
683
- color: var(--md-sys-color-tertiary-fixed-dim);
684
- }
685
- .on-tertiary-fixed-variant {
686
- background-color: var(--md-sys-color-on-tertiary-fixed-variant);
687
- }
688
- .on-tertiary-fixed-variant-text {
689
- color: var(--md-sys-color-on-tertiary-fixed-variant);
690
- }
691
- .error {
692
- background-color: var(--md-sys-color-error);
693
- }
694
- .error-text {
695
- color: var(--md-sys-color-error);
696
- }
697
- .on-error {
698
- background-color: var(--md-sys-color-on-error);
699
- }
700
- .on-error-text {
701
- color: var(--md-sys-color-on-error);
702
- }
703
- .error-container {
704
- background-color: var(--md-sys-color-error-container);
705
- }
706
- .error-container-text {
707
- color: var(--md-sys-color-error-container);
708
- }
709
- .on-error-container {
710
- background-color: var(--md-sys-color-on-error-container);
711
- }
712
- .on-error-container-text {
713
- color: var(--md-sys-color-on-error-container);
714
- }
715
- .outline {
716
- background-color: var(--md-sys-color-outline);
717
- }
718
- .outline-text {
719
- color: var(--md-sys-color-outline);
720
- }
721
- .background {
722
- background-color: var(--md-sys-color-background);
723
- }
724
- .background-text {
725
- color: var(--md-sys-color-background);
726
- }
727
- .on-background {
728
- background-color: var(--md-sys-color-on-background);
729
- }
730
- .on-background-text {
731
- color: var(--md-sys-color-on-background);
732
- }
733
- .surface {
734
- background-color: var(--md-sys-color-surface);
735
- }
736
- .surface-text {
737
- color: var(--md-sys-color-surface);
738
- }
739
- .on-surface {
740
- background-color: var(--md-sys-color-on-surface);
741
- }
742
- .on-surface-text {
743
- color: var(--md-sys-color-on-surface);
744
- }
745
- .surface-variant {
746
- background-color: var(--md-sys-color-surface-variant);
747
- }
748
- .surface-variant-text {
749
- color: var(--md-sys-color-surface-variant);
750
- }
751
- .on-surface-variant {
752
- background-color: var(--md-sys-color-on-surface-variant);
753
- }
754
- .on-surface-variant-text {
755
- color: var(--md-sys-color-on-surface-variant);
756
- }
757
- .inverse-surface {
758
- background-color: var(--md-sys-color-inverse-surface);
759
- }
760
- .inverse-surface-text {
761
- color: var(--md-sys-color-inverse-surface);
762
- }
763
- .inverse-on-surface {
764
- background-color: var(--md-sys-color-inverse-on-surface);
765
- }
766
- .inverse-on-surface-text {
767
- color: var(--md-sys-color-inverse-on-surface);
768
- }
769
- .inverse-primary {
770
- background-color: var(--md-sys-color-inverse-primary);
771
- }
772
- .inverse-primary-text {
773
- color: var(--md-sys-color-inverse-primary);
774
- }
775
- .shadow {
776
- background-color: var(--md-sys-color-shadow);
777
- }
778
- .shadow-text {
779
- color: var(--md-sys-color-shadow);
780
- }
781
- .surface-tint {
782
- background-color: var(--md-sys-color-surface-tint);
783
- }
784
- .surface-tint-text {
785
- color: var(--md-sys-color-surface-tint);
786
- }
787
- .outline-variant {
788
- background-color: var(--md-sys-color-outline-variant);
789
- }
790
- .outline-variant-text {
791
- color: var(--md-sys-color-outline-variant);
792
- }
793
- .scrim {
794
- background-color: var(--md-sys-color-scrim);
795
- }
796
- .scrim-text {
797
- color: var(--md-sys-color-scrim);
798
- }
799
- .surface-container-highest {
800
- background-color: var(--md-sys-color-surface-container-highest);
801
- }
802
- .surface-container-highest-text {
803
- color: var(--md-sys-color-surface-container-highest);
804
- }
805
- .surface-container-high {
806
- background-color: var(--md-sys-color-surface-container-high);
807
- }
808
- .surface-container-high-text {
809
- color: var(--md-sys-color-surface-container-high);
810
- }
811
- .surface-container {
812
- background-color: var(--md-sys-color-surface-container);
813
- }
814
- .surface-container-text {
815
- color: var(--md-sys-color-surface-container);
816
- }
817
- .surface-container-low {
818
- background-color: var(--md-sys-color-surface-container-low);
819
- }
820
- .surface-container-low-text {
821
- color: var(--md-sys-color-surface-container-low);
822
- }
823
- .surface-container-lowest {
824
- background-color: var(--md-sys-color-surface-container-lowest);
825
- }
826
- .surface-container-lowest-text {
827
- color: var(--md-sys-color-surface-container-lowest);
828
- }
829
- .surface-bright {
830
- background-color: var(--md-sys-color-surface-bright);
831
- }
832
- .surface-bright-text {
833
- color: var(--md-sys-color-surface-bright);
834
- }
835
- .surface-dim {
836
- background-color: var(--md-sys-color-surface-dim);
837
- }
838
- .surface-dim-text {
839
- color: var(--md-sys-color-surface-dim);
840
- }
1
+ /**
2
+ * Reset some basic elements
3
+ */
4
+ body,
5
+ h1,
6
+ h2,
7
+ h3,
8
+ h4,
9
+ h5,
10
+ h6,
11
+ p,
12
+ blockquote,
13
+ pre,
14
+ hr,
15
+ dl,
16
+ dd,
17
+ ol,
18
+ ul,
19
+ figure {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+ .dark-yellow {
25
+ --md-sys-color-primary: rgb(219 198 110);
26
+ --md-sys-color-surface-tint: rgb(219 198 110);
27
+ --md-sys-color-on-primary: rgb(58 48 0);
28
+ --md-sys-color-primary-container: rgb(83 70 0);
29
+ --md-sys-color-on-primary-container: rgb(248 226 135);
30
+ --md-sys-color-secondary: rgb(209 198 161);
31
+ --md-sys-color-on-secondary: rgb(54 48 22);
32
+ --md-sys-color-secondary-container: rgb(78 71 42);
33
+ --md-sys-color-on-secondary-container: rgb(238 226 188);
34
+ --md-sys-color-tertiary: rgb(169 208 179);
35
+ --md-sys-color-on-tertiary: rgb(20 55 35);
36
+ --md-sys-color-tertiary-container: rgb(44 78 56);
37
+ --md-sys-color-on-tertiary-container: rgb(197 236 206);
38
+ --md-sys-color-error: rgb(255 180 171);
39
+ --md-sys-color-on-error: rgb(105 0 5);
40
+ --md-sys-color-error-container: rgb(147 0 10);
41
+ --md-sys-color-on-error-container: rgb(255 218 214);
42
+ --md-sys-color-background: rgb(21 19 11);
43
+ --md-sys-color-on-background: rgb(232 226 212);
44
+ --md-sys-color-surface: rgb(21 19 11);
45
+ --md-sys-color-on-surface: rgb(232 226 212);
46
+ --md-sys-color-surface-variant: rgb(75 71 57);
47
+ --md-sys-color-on-surface-variant: rgb(205 198 180);
48
+ --md-sys-color-outline: #969080;
49
+ --outline-filter: brightness(0) saturate(100%) invert(64%) sepia(15%)
50
+ saturate(306%) hue-rotate(6deg) brightness(87%) contrast(85%);
51
+ --md-sys-color-outline-variant: rgb(75 71 57);
52
+ --md-sys-color-shadow: rgb(0 0 0);
53
+ --md-sys-color-scrim: rgb(0 0 0);
54
+ --md-sys-color-inverse-surface: rgb(232 226 212);
55
+ --md-sys-color-inverse-on-surface: rgb(51 48 39);
56
+ --md-sys-color-inverse-primary: rgb(109 94 15);
57
+ --md-sys-color-primary-fixed: rgb(248 226 135);
58
+ --md-sys-color-on-primary-fixed: rgb(34 27 0);
59
+ --md-sys-color-primary-fixed-dim: rgb(219 198 110);
60
+ --md-sys-color-on-primary-fixed-variant: rgb(83 70 0);
61
+ --md-sys-color-secondary-fixed: rgb(238 226 188);
62
+ --md-sys-color-on-secondary-fixed: rgb(33 27 4);
63
+ --md-sys-color-secondary-fixed-dim: rgb(209 198 161);
64
+ --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42);
65
+ --md-sys-color-tertiary-fixed: rgb(197 236 206);
66
+ --md-sys-color-on-tertiary-fixed: rgb(0 33 15);
67
+ --md-sys-color-tertiary-fixed-dim: rgb(169 208 179);
68
+ --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56);
69
+ --md-sys-color-surface-dim: rgb(21 19 11);
70
+ --md-sys-color-surface-bright: rgb(60 57 48);
71
+ --md-sys-color-surface-container-lowest: rgb(16 14 7);
72
+ --md-sys-color-surface-container-low: rgb(30 27 19);
73
+ --md-sys-color-surface-container: rgb(34 32 23);
74
+ --md-sys-color-surface-container-high: rgb(45 42 33);
75
+ --md-sys-color-surface-container-highest: rgb(56 53 43);
76
+ }
77
+ .dark-blue {
78
+ --md-sys-color-primary: rgb(170 199 255);
79
+ --md-sys-color-surface-tint: rgb(170 199 255);
80
+ --md-sys-color-on-primary: rgb(10 48 95);
81
+ --md-sys-color-primary-container: rgb(40 71 119);
82
+ --md-sys-color-on-primary-container: rgb(214 227 255);
83
+ --md-sys-color-secondary: rgb(190 198 220);
84
+ --md-sys-color-on-secondary: rgb(40 49 65);
85
+ --md-sys-color-secondary-container: rgb(62 71 89);
86
+ --md-sys-color-on-secondary-container: rgb(218 226 249);
87
+ --md-sys-color-tertiary: rgb(221 188 224);
88
+ --md-sys-color-on-tertiary: rgb(63 40 68);
89
+ --md-sys-color-tertiary-container: rgb(87 62 92);
90
+ --md-sys-color-on-tertiary-container: rgb(250 216 253);
91
+ --md-sys-color-error: rgb(255 180 171);
92
+ --md-sys-color-on-error: rgb(105 0 5);
93
+ --md-sys-color-error-container: rgb(147 0 10);
94
+ --md-sys-color-on-error-container: rgb(255 218 214);
95
+ --md-sys-color-background: rgb(17 19 24);
96
+ --md-sys-color-on-background: rgb(226 226 233);
97
+ --md-sys-color-surface: rgb(17 19 24);
98
+ --md-sys-color-on-surface: rgb(226 226 233);
99
+ --md-sys-color-surface-variant: rgb(68 71 78);
100
+ --md-sys-color-on-surface-variant: rgb(196 198 208);
101
+ --md-sys-color-outline: #8e9099;
102
+ --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(5%)
103
+ saturate(424%) hue-rotate(192deg) brightness(92%) contrast(92%);
104
+ --md-sys-color-outline-variant: #44474e;
105
+ --md-sys-color-shadow: rgb(0 0 0);
106
+ --md-sys-color-scrim: rgb(0 0 0);
107
+ --md-sys-color-inverse-surface: rgb(226 226 233);
108
+ --md-sys-color-inverse-on-surface: rgb(46 48 54);
109
+ --md-sys-color-inverse-primary: rgb(65 95 145);
110
+ --md-sys-color-primary-fixed: rgb(214 227 255);
111
+ --md-sys-color-on-primary-fixed: rgb(0 27 62);
112
+ --md-sys-color-primary-fixed-dim: rgb(170 199 255);
113
+ --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
114
+ --md-sys-color-secondary-fixed: rgb(218 226 249);
115
+ --md-sys-color-on-secondary-fixed: rgb(19 28 43);
116
+ --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
117
+ --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
118
+ --md-sys-color-tertiary-fixed: rgb(250 216 253);
119
+ --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
120
+ --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
121
+ --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
122
+ --md-sys-color-surface-dim: rgb(17 19 24);
123
+ --md-sys-color-surface-bright: rgb(55 57 62);
124
+ --md-sys-color-surface-container-lowest: rgb(12 14 19);
125
+ --md-sys-color-surface-container-low: rgb(25 28 32);
126
+ --md-sys-color-surface-container: rgb(29 32 36);
127
+ --md-sys-color-surface-container-high: rgb(40 42 47);
128
+ --md-sys-color-surface-container-highest: rgb(51 53 58);
129
+ }
130
+ .dark-cyan {
131
+ --md-sys-color-primary: rgb(129 213 205);
132
+ --md-sys-color-surface-tint: rgb(129 213 205);
133
+ --md-sys-color-on-primary: rgb(0 55 52);
134
+ --md-sys-color-primary-container: rgb(0 80 75);
135
+ --md-sys-color-on-primary-container: rgb(157 242 233);
136
+ --md-sys-color-secondary: rgb(176 204 200);
137
+ --md-sys-color-on-secondary: rgb(28 53 50);
138
+ --md-sys-color-secondary-container: rgb(50 75 73);
139
+ --md-sys-color-on-secondary-container: rgb(204 232 228);
140
+ --md-sys-color-tertiary: rgb(175 201 231);
141
+ --md-sys-color-on-tertiary: rgb(24 50 74);
142
+ --md-sys-color-tertiary-container: rgb(48 73 98);
143
+ --md-sys-color-on-tertiary-container: rgb(207 229 255);
144
+ --md-sys-color-error: rgb(255 180 171);
145
+ --md-sys-color-on-error: rgb(105 0 5);
146
+ --md-sys-color-error-container: rgb(147 0 10);
147
+ --md-sys-color-on-error-container: rgb(255 218 214);
148
+ --md-sys-color-background: rgb(14 21 20);
149
+ --md-sys-color-on-background: rgb(221 228 226);
150
+ --md-sys-color-surface: rgb(14 21 20);
151
+ --md-sys-color-on-surface: rgb(221 228 226);
152
+ --md-sys-color-surface-variant: rgb(63 73 71);
153
+ --md-sys-color-on-surface-variant: rgb(190 201 198);
154
+ --md-sys-color-outline: #899391;
155
+ --outline-filter: brightness(0) saturate(100%) invert(66%) sepia(8%)
156
+ saturate(263%) hue-rotate(118deg) brightness(85%) contrast(87%);
157
+ --md-sys-color-outline-variant: rgb(63 73 71);
158
+ --md-sys-color-shadow: rgb(0 0 0);
159
+ --md-sys-color-scrim: rgb(0 0 0);
160
+ --md-sys-color-inverse-surface: rgb(221 228 226);
161
+ --md-sys-color-inverse-on-surface: rgb(43 50 49);
162
+ --md-sys-color-inverse-primary: rgb(0 106 100);
163
+ --md-sys-color-primary-fixed: rgb(157 242 233);
164
+ --md-sys-color-on-primary-fixed: rgb(0 32 30);
165
+ --md-sys-color-primary-fixed-dim: rgb(129 213 205);
166
+ --md-sys-color-on-primary-fixed-variant: rgb(0 80 75);
167
+ --md-sys-color-secondary-fixed: rgb(204 232 228);
168
+ --md-sys-color-on-secondary-fixed: rgb(5 31 29);
169
+ --md-sys-color-secondary-fixed-dim: rgb(176 204 200);
170
+ --md-sys-color-on-secondary-fixed-variant: rgb(50 75 73);
171
+ --md-sys-color-tertiary-fixed: rgb(207 229 255);
172
+ --md-sys-color-on-tertiary-fixed: rgb(0 29 51);
173
+ --md-sys-color-tertiary-fixed-dim: rgb(175 201 231);
174
+ --md-sys-color-on-tertiary-fixed-variant: rgb(48 73 98);
175
+ --md-sys-color-surface-dim: rgb(14 21 20);
176
+ --md-sys-color-surface-bright: rgb(52 58 57);
177
+ --md-sys-color-surface-container-lowest: rgb(9 15 15);
178
+ --md-sys-color-surface-container-low: rgb(22 29 28);
179
+ --md-sys-color-surface-container: rgb(26 33 32);
180
+ --md-sys-color-surface-container-high: rgb(37 43 42);
181
+ --md-sys-color-surface-container-highest: rgb(47 54 53);
182
+ }
183
+ .dark-green {
184
+ --md-sys-color-primary: rgb(177 209 138);
185
+ --md-sys-color-surface-tint: rgb(177 209 138);
186
+ --md-sys-color-on-primary: rgb(31 55 1);
187
+ --md-sys-color-primary-container: rgb(53 78 22);
188
+ --md-sys-color-on-primary-container: rgb(205 237 163);
189
+ --md-sys-color-secondary: rgb(191 203 173);
190
+ --md-sys-color-on-secondary: rgb(42 51 30);
191
+ --md-sys-color-secondary-container: rgb(64 74 51);
192
+ --md-sys-color-on-secondary-container: rgb(220 231 200);
193
+ --md-sys-color-tertiary: rgb(160 208 203);
194
+ --md-sys-color-on-tertiary: rgb(0 55 53);
195
+ --md-sys-color-tertiary-container: rgb(31 78 75);
196
+ --md-sys-color-on-tertiary-container: rgb(188 236 231);
197
+ --md-sys-color-error: rgb(255 180 171);
198
+ --md-sys-color-on-error: rgb(105 0 5);
199
+ --md-sys-color-error-container: rgb(147 0 10);
200
+ --md-sys-color-on-error-container: rgb(255 218 214);
201
+ --md-sys-color-background: rgb(18 20 14);
202
+ --md-sys-color-on-background: rgb(226 227 216);
203
+ --md-sys-color-surface: rgb(18 20 14);
204
+ --md-sys-color-on-surface: rgb(226 227 216);
205
+ --md-sys-color-surface-variant: rgb(68 72 61);
206
+ --md-sys-color-on-surface-variant: rgb(197 200 186);
207
+ --md-sys-color-outline: #8f9285;
208
+ --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(6%)
209
+ saturate(487%) hue-rotate(33deg) brightness(92%) contrast(91%);
210
+ --md-sys-color-outline-variant: rgb(68 72 61);
211
+ --md-sys-color-shadow: rgb(0 0 0);
212
+ --md-sys-color-scrim: rgb(0 0 0);
213
+ --md-sys-color-inverse-surface: rgb(226 227 216);
214
+ --md-sys-color-inverse-on-surface: rgb(47 49 42);
215
+ --md-sys-color-inverse-primary: rgb(76 102 43);
216
+ --md-sys-color-primary-fixed: rgb(205 237 163);
217
+ --md-sys-color-on-primary-fixed: rgb(16 32 0);
218
+ --md-sys-color-primary-fixed-dim: rgb(177 209 138);
219
+ --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
220
+ --md-sys-color-secondary-fixed: rgb(220 231 200);
221
+ --md-sys-color-on-secondary-fixed: rgb(21 30 11);
222
+ --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
223
+ --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
224
+ --md-sys-color-tertiary-fixed: rgb(188 236 231);
225
+ --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
226
+ --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
227
+ --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
228
+ --md-sys-color-surface-dim: rgb(18 20 14);
229
+ --md-sys-color-surface-bright: rgb(56 58 50);
230
+ --md-sys-color-surface-container-lowest: rgb(12 15 9);
231
+ --md-sys-color-surface-container-low: rgb(26 28 22);
232
+ --md-sys-color-surface-container: rgb(30 32 26);
233
+ --md-sys-color-surface-container-high: rgb(40 43 36);
234
+ --md-sys-color-surface-container-highest: rgb(51 54 46);
235
+ }
236
+ .dark-pink {
237
+ --md-sys-color-primary: rgb(240 179 231);
238
+ --md-sys-color-surface-tint: rgb(240 179 231);
239
+ --md-sys-color-on-primary: rgb(75 31 74);
240
+ --md-sys-color-primary-container: rgb(101 54 98);
241
+ --md-sys-color-on-primary-container: rgb(255 215 247);
242
+ --md-sys-color-secondary: rgb(218 191 211);
243
+ --md-sys-color-on-secondary: rgb(61 43 58);
244
+ --md-sys-color-secondary-container: rgb(84 65 81);
245
+ --md-sys-color-on-secondary-container: rgb(247 218 239);
246
+ --md-sys-color-tertiary: rgb(246 184 168);
247
+ --md-sys-color-on-tertiary: rgb(76 38 27);
248
+ --md-sys-color-tertiary-container: rgb(102 59 48);
249
+ --md-sys-color-on-tertiary-container: rgb(255 219 209);
250
+ --md-sys-color-error: rgb(255 180 171);
251
+ --md-sys-color-on-error: rgb(105 0 5);
252
+ --md-sys-color-error-container: rgb(147 0 10);
253
+ --md-sys-color-on-error-container: rgb(255 218 214);
254
+ --md-sys-color-background: rgb(23 18 22);
255
+ --md-sys-color-on-background: rgb(235 223 230);
256
+ --md-sys-color-surface: rgb(23 18 22);
257
+ --md-sys-color-on-surface: rgb(235 223 230);
258
+ --md-sys-color-surface-variant: rgb(78 68 75);
259
+ --md-sys-color-on-surface-variant: rgb(209 195 203);
260
+ --md-sys-color-outline: #9a8d95;
261
+ --outline-filter: brightness(0) saturate(100%) invert(61%) sepia(13%)
262
+ saturate(228%) hue-rotate(270deg) brightness(93%) contrast(82%);
263
+ --md-sys-color-outline-variant: rgb(78 68 75);
264
+ --md-sys-color-shadow: rgb(0 0 0);
265
+ --md-sys-color-scrim: rgb(0 0 0);
266
+ --md-sys-color-inverse-surface: rgb(235 223 230);
267
+ --md-sys-color-inverse-on-surface: rgb(53 46 51);
268
+ --md-sys-color-inverse-primary: rgb(127 77 123);
269
+ --md-sys-color-primary-fixed: rgb(255 215 247);
270
+ --md-sys-color-on-primary-fixed: rgb(51 8 51);
271
+ --md-sys-color-primary-fixed-dim: rgb(240 179 231);
272
+ --md-sys-color-on-primary-fixed-variant: rgb(101 54 98);
273
+ --md-sys-color-secondary-fixed: rgb(247 218 239);
274
+ --md-sys-color-on-secondary-fixed: rgb(38 22 37);
275
+ --md-sys-color-secondary-fixed-dim: rgb(218 191 211);
276
+ --md-sys-color-on-secondary-fixed-variant: rgb(84 65 81);
277
+ --md-sys-color-tertiary-fixed: rgb(255 219 209);
278
+ --md-sys-color-on-tertiary-fixed: rgb(50 18 9);
279
+ --md-sys-color-tertiary-fixed-dim: rgb(246 184 168);
280
+ --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 48);
281
+ --md-sys-color-surface-dim: rgb(23 18 22);
282
+ --md-sys-color-surface-bright: rgb(62 55 60);
283
+ --md-sys-color-surface-container-lowest: rgb(18 13 17);
284
+ --md-sys-color-surface-container-low: rgb(32 26 30);
285
+ --md-sys-color-surface-container: rgb(36 30 34);
286
+ --md-sys-color-surface-container-high: #2f282d;
287
+ --md-sys-color-surface-container-highest: rgb(58 51 56);
288
+ }
289
+
290
+ .logo {
291
+ height: 120px;
292
+ @include media-query($on-palm) {
293
+ height: 90px;
294
+ }
295
+ }
296
+ .header-container {
297
+ display: flex;
298
+ justify-content: center;
299
+ flex-direction: column;
300
+ }
301
+ @font-face {
302
+ font-family: "Excalifont";
303
+ src: url("/assets/theme-assets/theme-fonts/Excalifont-Regular.woff2");
304
+ }
305
+ @font-face {
306
+ font-family: "Comic Shanns";
307
+ src: url("/assets/theme-assets/theme-fonts/comic\ shanns.otf");
308
+ }
309
+ @font-face {
310
+ font-family: "Lexend";
311
+ src: url("/assets/theme-assets/theme-fonts/Lexend-Regular.ttf");
312
+ }
313
+ /**
314
+ * Basic styling
315
+ */
316
+ body {
317
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height}
318
+ $base-font-family;
319
+ color: $text-color;
320
+ background-color: $background-color;
321
+ -webkit-text-size-adjust: 100%;
322
+ -webkit-font-feature-settings: "kern" 1;
323
+ -moz-font-feature-settings: "kern" 1;
324
+ -o-font-feature-settings: "kern" 1;
325
+ font-feature-settings: "kern" 1;
326
+ font-kerning: normal;
327
+ display: flex;
328
+ min-height: 100vh;
329
+ flex-direction: column;
330
+ }
331
+
332
+ /**
333
+ * Set `margin-bottom` to maintain vertical rhythm
334
+ */
335
+ h1,
336
+ h2,
337
+ h3,
338
+ h4,
339
+ h5,
340
+ h6,
341
+ p,
342
+ blockquote,
343
+ pre,
344
+ ul,
345
+ ol,
346
+ dl,
347
+ figure,
348
+ %vertical-rhythm {
349
+ margin-bottom: $spacing-unit / 2;
350
+ }
351
+
352
+ /**
353
+ * `main` element
354
+ */
355
+ main {
356
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
357
+ }
358
+
359
+ /**
360
+ * Images
361
+ */
362
+ img {
363
+ max-width: 100%;
364
+ vertical-align: middle;
365
+ }
366
+
367
+ /**
368
+ * Figures
369
+ */
370
+ figure > img {
371
+ display: block;
372
+ }
373
+
374
+ figcaption {
375
+ font-size: $small-font-size;
376
+ }
377
+
378
+ /**
379
+ * Lists
380
+ */
381
+ ul,
382
+ ol {
383
+ margin-left: $spacing-unit;
384
+ }
385
+
386
+ li {
387
+ > ul,
388
+ > ol {
389
+ margin-bottom: 0;
390
+ }
391
+ }
392
+
393
+ /**
394
+ * Headings
395
+ */
396
+ h1,
397
+ h2,
398
+ h3,
399
+ h4,
400
+ h5,
401
+ h6 {
402
+ font-weight: $base-font-weight;
403
+ }
404
+
405
+ /**
406
+ * Links
407
+ */
408
+ a {
409
+ color: var(--md-sys-color-primary);
410
+ text-decoration: none;
411
+
412
+ &:visited {
413
+ // color: var(--md-sys-color-inverse-primary);
414
+ }
415
+
416
+ &:hover {
417
+ color: $text-color;
418
+ text-decoration: underline;
419
+ }
420
+
421
+ .social-media-list &:hover {
422
+ text-decoration: none;
423
+
424
+ .username {
425
+ text-decoration: underline;
426
+ }
427
+ }
428
+ }
429
+
430
+ /**
431
+ * Blockquotes
432
+ */
433
+ blockquote {
434
+ color: var(--md-sys-color-primary);
435
+ border-left: 3px solid $grey-color-light;
436
+ padding-left: $spacing-unit / 2;
437
+ margin-left: 12px;
438
+ margin-right: 12px;
439
+ @include relative-font-size(1.125);
440
+ letter-spacing: -1px;
441
+ font-style: italic;
442
+
443
+ > :last-child {
444
+ margin-bottom: 0;
445
+ }
446
+ }
447
+
448
+ /**
449
+ * Code formatting
450
+ */
451
+ pre,
452
+ code {
453
+ @include relative-font-size(0.9375);
454
+ border: 1px solid var(--md-sys-color-outline);
455
+ border-radius: 3px;
456
+ background-color: var(--md-sys-color-surface-container-high);
457
+ }
458
+
459
+ code {
460
+ padding: 1px 5px;
461
+ }
462
+
463
+ pre {
464
+ padding: 8px 12px;
465
+ overflow-x: auto;
466
+
467
+ > code {
468
+ border: 0;
469
+ padding-right: 0;
470
+ padding-left: 0;
471
+ }
472
+ }
473
+
474
+ /**
475
+ * Wrapper
476
+ */
477
+ .wrapper {
478
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
479
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
480
+ margin-right: auto;
481
+ margin-left: auto;
482
+ padding-right: $spacing-unit;
483
+ padding-left: $spacing-unit + 100;
484
+ @extend %clearfix;
485
+
486
+ @include media-query($on-laptop) {
487
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
488
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
489
+ padding-right: $spacing-unit / 2;
490
+ padding-left: ($spacing-unit / 2)+100;
491
+ }
492
+ @include media-query($on-palm) {
493
+ padding-left: $spacing-unit/2;
494
+ }
495
+ }
496
+
497
+ /**
498
+ * Clearfix
499
+ */
500
+ %clearfix:after {
501
+ content: "";
502
+ display: table;
503
+ clear: both;
504
+ }
505
+
506
+ /**
507
+ * Icons
508
+ */
509
+
510
+ .svg-icon {
511
+ width: 16px;
512
+ height: 16px;
513
+ display: inline-block;
514
+ fill: #{$grey-color};
515
+ padding-right: 5px;
516
+ vertical-align: text-top;
517
+ }
518
+
519
+ .social-media-list {
520
+ li + li {
521
+ padding-top: 5px;
522
+ }
523
+ }
524
+
525
+ /**
526
+ * Tables
527
+ */
528
+ table {
529
+ margin-bottom: $spacing-unit;
530
+ width: 100%;
531
+ text-align: $table-text-align;
532
+ color: var(--md-sys-color-on-surface);
533
+ border-collapse: collapse;
534
+ border: 1px solid var(--md-sys-color-outline);
535
+ tr {
536
+ &:nth-child(even) {
537
+ background-color: var(--md-sys-color-surface-container-high);
538
+ }
539
+ }
540
+ th,
541
+ td {
542
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
543
+ }
544
+ th {
545
+ background-color: var(--md-sys-color-surface-container-highest);
546
+ // border: 1px solid darken($grey-color-light, 4%);
547
+ // border-bottom-color: darken($grey-color-light, 12%);
548
+ }
549
+ td {
550
+ border: 1px solid var(--md-sys-color-outline);
551
+ }
552
+ }
553
+ .primary {
554
+ background-color: var(--md-sys-color-primary);
555
+ }
556
+ .primary-text {
557
+ color: var(--md-sys-color-primary);
558
+ }
559
+ .on-primary {
560
+ background-color: var(--md-sys-color-on-primary);
561
+ }
562
+ .on-primary-text {
563
+ color: var(--md-sys-color-on-primary);
564
+ }
565
+ .primary-container {
566
+ background-color: var(--md-sys-color-primary-container);
567
+ }
568
+ .primary-container-text {
569
+ color: var(--md-sys-color-primary-container);
570
+ }
571
+ .on-primary-container {
572
+ background-color: var(--md-sys-color-on-primary-container);
573
+ }
574
+ .on-primary-container-text {
575
+ color: var(--md-sys-color-on-primary-container);
576
+ }
577
+ .primary-fixed {
578
+ background-color: var(--md-sys-color-primary-fixed);
579
+ }
580
+ .primary-fixed-text {
581
+ color: var(--md-sys-color-primary-fixed);
582
+ }
583
+ .on-primary-fixed {
584
+ background-color: var(--md-sys-color-on-primary-fixed);
585
+ }
586
+ .on-primary-fixed-text {
587
+ color: var(--md-sys-color-on-primary-fixed);
588
+ }
589
+ .primary-fixed-dim {
590
+ background-color: var(--md-sys-color-primary-fixed-dim);
591
+ }
592
+ .primary-fixed-dim-text {
593
+ color: var(--md-sys-color-primary-fixed-dim);
594
+ }
595
+ .on-primary-fixed-variant {
596
+ background-color: var(--md-sys-color-on-primary-fixed-variant);
597
+ }
598
+ .on-primary-fixed-variant-text {
599
+ color: var(--md-sys-color-on-primary-fixed-variant);
600
+ }
601
+ .secondary {
602
+ background-color: var(--md-sys-color-secondary);
603
+ }
604
+ .secondary-text {
605
+ color: var(--md-sys-color-secondary);
606
+ }
607
+ .on-secondary {
608
+ background-color: var(--md-sys-color-on-secondary);
609
+ }
610
+ .on-secondary-text {
611
+ color: var(--md-sys-color-on-secondary);
612
+ }
613
+ .secondary-container {
614
+ background-color: var(--md-sys-color-secondary-container);
615
+ }
616
+ .secondary-container-text {
617
+ color: var(--md-sys-color-secondary-container);
618
+ }
619
+ .on-secondary-container {
620
+ background-color: var(--md-sys-color-on-secondary-container);
621
+ }
622
+ .on-secondary-container-text {
623
+ color: var(--md-sys-color-on-secondary-container);
624
+ }
625
+ .secondary-fixed {
626
+ background-color: var(--md-sys-color-secondary-fixed);
627
+ }
628
+ .secondary-fixed-text {
629
+ color: var(--md-sys-color-secondary-fixed);
630
+ }
631
+ .on-secondary-fixed {
632
+ background-color: var(--md-sys-color-on-secondary-fixed);
633
+ }
634
+ .on-secondary-fixed-text {
635
+ color: var(--md-sys-color-on-secondary-fixed);
636
+ }
637
+ .secondary-fixed-dim {
638
+ background-color: var(--md-sys-color-secondary-fixed-dim);
639
+ }
640
+ .secondary-fixed-dim-text {
641
+ color: var(--md-sys-color-secondary-fixed-dim);
642
+ }
643
+ .on-secondary-fixed-variant {
644
+ background-color: var(--md-sys-color-on-secondary-fixed-variant);
645
+ }
646
+ .on-secondary-fixed-variant-text {
647
+ color: var(--md-sys-color-on-secondary-fixed-variant);
648
+ }
649
+ .tertiary {
650
+ background-color: var(--md-sys-color-tertiary);
651
+ }
652
+ .tertiary-text {
653
+ color: var(--md-sys-color-tertiary);
654
+ }
655
+ .on-tertiary {
656
+ background-color: var(--md-sys-color-on-tertiary);
657
+ }
658
+ .on-tertiary-text {
659
+ color: var(--md-sys-color-on-tertiary);
660
+ }
661
+ .tertiary-container {
662
+ background-color: var(--md-sys-color-tertiary-container);
663
+ }
664
+ .tertiary-container-text {
665
+ color: var(--md-sys-color-tertiary-container);
666
+ }
667
+ .on-tertiary-container {
668
+ background-color: var(--md-sys-color-on-tertiary-container);
669
+ }
670
+ .on-tertiary-container-text {
671
+ color: var(--md-sys-color-on-tertiary-container);
672
+ }
673
+ .tertiary-fixed {
674
+ background-color: var(--md-sys-color-tertiary-fixed);
675
+ }
676
+ .tertiary-fixed-text {
677
+ color: var(--md-sys-color-tertiary-fixed);
678
+ }
679
+ .on-tertiary-fixed {
680
+ background-color: var(--md-sys-color-on-tertiary-fixed);
681
+ }
682
+ .on-tertiary-fixed-text {
683
+ color: var(--md-sys-color-on-tertiary-fixed);
684
+ }
685
+ .tertiary-fixed-dim {
686
+ background-color: var(--md-sys-color-tertiary-fixed-dim);
687
+ }
688
+ .tertiary-fixed-dim-text {
689
+ color: var(--md-sys-color-tertiary-fixed-dim);
690
+ }
691
+ .on-tertiary-fixed-variant {
692
+ background-color: var(--md-sys-color-on-tertiary-fixed-variant);
693
+ }
694
+ .on-tertiary-fixed-variant-text {
695
+ color: var(--md-sys-color-on-tertiary-fixed-variant);
696
+ }
697
+ .error {
698
+ background-color: var(--md-sys-color-error);
699
+ }
700
+ .error-text {
701
+ color: var(--md-sys-color-error);
702
+ }
703
+ .on-error {
704
+ background-color: var(--md-sys-color-on-error);
705
+ }
706
+ .on-error-text {
707
+ color: var(--md-sys-color-on-error);
708
+ }
709
+ .error-container {
710
+ background-color: var(--md-sys-color-error-container);
711
+ }
712
+ .error-container-text {
713
+ color: var(--md-sys-color-error-container);
714
+ }
715
+ .on-error-container {
716
+ background-color: var(--md-sys-color-on-error-container);
717
+ }
718
+ .on-error-container-text {
719
+ color: var(--md-sys-color-on-error-container);
720
+ }
721
+ .outline {
722
+ background-color: var(--md-sys-color-outline);
723
+ }
724
+ .outline-text {
725
+ color: var(--md-sys-color-outline);
726
+ }
727
+ .background {
728
+ background-color: var(--md-sys-color-background);
729
+ }
730
+ .background-text {
731
+ color: var(--md-sys-color-background);
732
+ }
733
+ .on-background {
734
+ background-color: var(--md-sys-color-on-background);
735
+ }
736
+ .on-background-text {
737
+ color: var(--md-sys-color-on-background);
738
+ }
739
+ .surface {
740
+ background-color: var(--md-sys-color-surface);
741
+ }
742
+ .surface-text {
743
+ color: var(--md-sys-color-surface);
744
+ }
745
+ .on-surface {
746
+ background-color: var(--md-sys-color-on-surface);
747
+ }
748
+ .on-surface-text {
749
+ color: var(--md-sys-color-on-surface);
750
+ }
751
+ .surface-variant {
752
+ background-color: var(--md-sys-color-surface-variant);
753
+ }
754
+ .surface-variant-text {
755
+ color: var(--md-sys-color-surface-variant);
756
+ }
757
+ .on-surface-variant {
758
+ background-color: var(--md-sys-color-on-surface-variant);
759
+ }
760
+ .on-surface-variant-text {
761
+ color: var(--md-sys-color-on-surface-variant);
762
+ }
763
+ .inverse-surface {
764
+ background-color: var(--md-sys-color-inverse-surface);
765
+ }
766
+ .inverse-surface-text {
767
+ color: var(--md-sys-color-inverse-surface);
768
+ }
769
+ .inverse-on-surface {
770
+ background-color: var(--md-sys-color-inverse-on-surface);
771
+ }
772
+ .inverse-on-surface-text {
773
+ color: var(--md-sys-color-inverse-on-surface);
774
+ }
775
+ .inverse-primary {
776
+ background-color: var(--md-sys-color-inverse-primary);
777
+ }
778
+ .inverse-primary-text {
779
+ color: var(--md-sys-color-inverse-primary);
780
+ }
781
+ .shadow {
782
+ background-color: var(--md-sys-color-shadow);
783
+ }
784
+ .shadow-text {
785
+ color: var(--md-sys-color-shadow);
786
+ }
787
+ .surface-tint {
788
+ background-color: var(--md-sys-color-surface-tint);
789
+ }
790
+ .surface-tint-text {
791
+ color: var(--md-sys-color-surface-tint);
792
+ }
793
+ .outline-variant {
794
+ background-color: var(--md-sys-color-outline-variant);
795
+ }
796
+ .outline-variant-text {
797
+ color: var(--md-sys-color-outline-variant);
798
+ }
799
+ .scrim {
800
+ background-color: var(--md-sys-color-scrim);
801
+ }
802
+ .scrim-text {
803
+ color: var(--md-sys-color-scrim);
804
+ }
805
+ .surface-container-highest {
806
+ background-color: var(--md-sys-color-surface-container-highest);
807
+ }
808
+ .surface-container-highest-text {
809
+ color: var(--md-sys-color-surface-container-highest);
810
+ }
811
+ .surface-container-high {
812
+ background-color: var(--md-sys-color-surface-container-high);
813
+ }
814
+ .surface-container-high-text {
815
+ color: var(--md-sys-color-surface-container-high);
816
+ }
817
+ .surface-container {
818
+ background-color: var(--md-sys-color-surface-container);
819
+ }
820
+ .surface-container-text {
821
+ color: var(--md-sys-color-surface-container);
822
+ }
823
+ .surface-container-low {
824
+ background-color: var(--md-sys-color-surface-container-low);
825
+ }
826
+ .surface-container-low-text {
827
+ color: var(--md-sys-color-surface-container-low);
828
+ }
829
+ .surface-container-lowest {
830
+ background-color: var(--md-sys-color-surface-container-lowest);
831
+ }
832
+ .surface-container-lowest-text {
833
+ color: var(--md-sys-color-surface-container-lowest);
834
+ }
835
+ .surface-bright {
836
+ background-color: var(--md-sys-color-surface-bright);
837
+ }
838
+ .surface-bright-text {
839
+ color: var(--md-sys-color-surface-bright);
840
+ }
841
+ .surface-dim {
842
+ background-color: var(--md-sys-color-surface-dim);
843
+ }
844
+ .surface-dim-text {
845
+ color: var(--md-sys-color-surface-dim);
846
+ }