dark-blog-theme 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,943 @@
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
+ }
23
+
24
+ :root {
25
+ --md-source: #6750a4;
26
+ /* primary */
27
+ --md-ref-palette-primary0: #000000;
28
+ --md-ref-palette-primary10: #21005d;
29
+ --md-ref-palette-primary20: #381e72;
30
+ --md-ref-palette-primary30: #4f378b;
31
+ --md-ref-palette-primary40: #6750a4;
32
+ --md-ref-palette-primary50: #7f67be;
33
+ --md-ref-palette-primary60: #9a82db;
34
+ --md-ref-palette-primary70: #b69df8;
35
+ --md-ref-palette-primary80: #d0bcff;
36
+ --md-ref-palette-primary90: #eaddff;
37
+ --md-ref-palette-primary95: #f6edff;
38
+ --md-ref-palette-primary99: #fffbfe;
39
+ --md-ref-palette-primary100: #ffffff;
40
+ /* secondary */
41
+ --md-ref-palette-secondary0: #000000;
42
+ --md-ref-palette-secondary10: #1d192b;
43
+ --md-ref-palette-secondary20: #332d41;
44
+ --md-ref-palette-secondary30: #4a4458;
45
+ --md-ref-palette-secondary40: #625b71;
46
+ --md-ref-palette-secondary50: #7a7289;
47
+ --md-ref-palette-secondary60: #958da5;
48
+ --md-ref-palette-secondary70: #b0a7c0;
49
+ --md-ref-palette-secondary80: #ccc2dc;
50
+ --md-ref-palette-secondary90: #e8def8;
51
+ --md-ref-palette-secondary95: #f6edff;
52
+ --md-ref-palette-secondary99: #fffbfe;
53
+ --md-ref-palette-secondary100: #ffffff;
54
+ /* tertiary */
55
+ --md-ref-palette-tertiary0: #000000;
56
+ --md-ref-palette-tertiary10: #31111d;
57
+ --md-ref-palette-tertiary20: #492532;
58
+ --md-ref-palette-tertiary30: #633b48;
59
+ --md-ref-palette-tertiary40: #7d5260;
60
+ --md-ref-palette-tertiary50: #986977;
61
+ --md-ref-palette-tertiary60: #b58392;
62
+ --md-ref-palette-tertiary70: #d29dac;
63
+ --md-ref-palette-tertiary80: #efb8c8;
64
+ --md-ref-palette-tertiary90: #ffd8e4;
65
+ --md-ref-palette-tertiary95: #ffecf1;
66
+ --md-ref-palette-tertiary99: #fffbfa;
67
+ --md-ref-palette-tertiary100: #ffffff;
68
+ /* error */
69
+ --md-ref-palette-error0: #000000;
70
+ --md-ref-palette-error10: #410e0b;
71
+ --md-ref-palette-error20: #601410;
72
+ --md-ref-palette-error30: #8c1d18;
73
+ --md-ref-palette-error40: #b3261e;
74
+ --md-ref-palette-error50: #dc362e;
75
+ --md-ref-palette-error60: #e46962;
76
+ --md-ref-palette-error70: #ec928e;
77
+ --md-ref-palette-error80: #f2b8b5;
78
+ --md-ref-palette-error90: #f9dedc;
79
+ --md-ref-palette-error95: #fceeee;
80
+ --md-ref-palette-error99: #fffbf9;
81
+ --md-ref-palette-error100: #ffffff;
82
+ /* neutral */
83
+ --md-ref-palette-neutral0: #000000;
84
+ --md-ref-palette-neutral4: #0f0d13;
85
+ --md-ref-palette-neutral6: #141218;
86
+ --md-ref-palette-neutral10: #1d1b20;
87
+ --md-ref-palette-neutral12: #211f26;
88
+ --md-ref-palette-neutral17: #2b2930;
89
+ --md-ref-palette-neutral20: #322f35;
90
+ --md-ref-palette-neutral22: #36343b;
91
+ --md-ref-palette-neutral24: #3b383e;
92
+ --md-ref-palette-neutral30: #48464c;
93
+ --md-ref-palette-neutral40: #605d64;
94
+ --md-ref-palette-neutral50: #79767d;
95
+ --md-ref-palette-neutral60: #938f96;
96
+ --md-ref-palette-neutral70: #aea9b1;
97
+ --md-ref-palette-neutral80: #cac5cd;
98
+ --md-ref-palette-neutral87: #ded8e1;
99
+ --md-ref-palette-neutral90: #e6e0e9;
100
+ --md-ref-palette-neutral92: #ece6f0;
101
+ --md-ref-palette-neutral94: #f3edf7;
102
+ --md-ref-palette-neutral95: #f5eff7;
103
+ --md-ref-palette-neutral96: #f7f2fa;
104
+ --md-ref-palette-neutral98: #fef7ff;
105
+ --md-ref-palette-neutral99: #fffbff;
106
+ --md-ref-palette-neutral100: #ffffff;
107
+ /* neutral-variant */
108
+ --md-ref-palette-neutral-variant0: #000000;
109
+ --md-ref-palette-neutral-variant10: #1d1a22;
110
+ --md-ref-palette-neutral-variant20: #322f37;
111
+ --md-ref-palette-neutral-variant30: #49454f;
112
+ --md-ref-palette-neutral-variant40: #605d66;
113
+ --md-ref-palette-neutral-variant50: #79747e;
114
+ --md-ref-palette-neutral-variant60: #938f99;
115
+ --md-ref-palette-neutral-variant70: #aea9b4;
116
+ --md-ref-palette-neutral-variant80: #cac4d0;
117
+ --md-ref-palette-neutral-variant90: #e7e0ec;
118
+ --md-ref-palette-neutral-variant95: #f5eefa;
119
+ --md-ref-palette-neutral-variant99: #fffbfe;
120
+ --md-ref-palette-neutral-variant100: #ffffff;
121
+ /* light */
122
+ --md-sys-color-primary-light: #6750a4;
123
+ --md-sys-color-on-primary-light: #ffffff;
124
+ --md-sys-color-primary-container-light: #eaddff;
125
+ --md-sys-color-on-primary-container-light: #21005d;
126
+ --md-sys-color-primary-fixed-light: #eaddff;
127
+ --md-sys-color-on-primary-fixed-light: #21005d;
128
+ --md-sys-color-primary-fixed-dim-light: #d0bcff;
129
+ --md-sys-color-on-primary-fixed-variant-light: #4f378b;
130
+ --md-sys-color-secondary-light: #625b71;
131
+ --md-sys-color-on-secondary-light: #ffffff;
132
+ --md-sys-color-secondary-container-light: #e8def8;
133
+ --md-sys-color-on-secondary-container-light: #1d192b;
134
+ --md-sys-color-secondary-fixed-light: #e8def8;
135
+ --md-sys-color-on-secondary-fixed-light: #1d192b;
136
+ --md-sys-color-secondary-fixed-dim-light: #ccc2dc;
137
+ --md-sys-color-on-secondary-fixed-variant-light: #4a4458;
138
+ --md-sys-color-tertiary-light: #7d5260;
139
+ --md-sys-color-on-tertiary-light: #ffffff;
140
+ --md-sys-color-tertiary-container-light: #ffd8e4;
141
+ --md-sys-color-on-tertiary-container-light: #31111d;
142
+ --md-sys-color-tertiary-fixed-light: #ffd8e4;
143
+ --md-sys-color-on-tertiary-fixed-light: #31111d;
144
+ --md-sys-color-tertiary-fixed-dim-light: #efb8c8;
145
+ --md-sys-color-on-tertiary-fixed-variant-light: #633b48;
146
+ --md-sys-color-error-light: #b3261e;
147
+ --md-sys-color-on-error-light: #ffffff;
148
+ --md-sys-color-error-container-light: #f9dedc;
149
+ --md-sys-color-on-error-container-light: #410e0b;
150
+ --md-sys-color-outline-light: #79747e;
151
+ --md-sys-color-background-light: #fef7ff;
152
+ --md-sys-color-on-background-light: #1d1b20;
153
+ --md-sys-color-surface-light: #fef7ff;
154
+ --md-sys-color-on-surface-light: #1d1b20;
155
+ --md-sys-color-surface-variant-light: #e7e0ec;
156
+ --md-sys-color-on-surface-variant-light: #49454f;
157
+ --md-sys-color-inverse-surface-light: #322f35;
158
+ --md-sys-color-inverse-on-surface-light: #f5eff7;
159
+ --md-sys-color-inverse-primary-light: #d0bcff;
160
+ --md-sys-color-shadow-light: #000000;
161
+ --md-sys-color-surface-tint-light: #6750a4;
162
+ --md-sys-color-outline-variant-light: #cac4d0;
163
+ --md-sys-color-scrim-light: #000000;
164
+ --md-sys-color-surface-container-highest-light: #e6e0e9;
165
+ --md-sys-color-surface-container-high-light: #ece6f0;
166
+ --md-sys-color-surface-container-light: #f3edf7;
167
+ --md-sys-color-surface-container-low-light: #f7f2fa;
168
+ --md-sys-color-surface-container-lowest-light: #ffffff;
169
+ --md-sys-color-surface-bright-light: #fef7ff;
170
+ --md-sys-color-surface-dim-light: #ded8e1;
171
+ /* dark */
172
+ --md-sys-color-primary-dark: #d0bcff;
173
+ --md-sys-color-on-primary-dark: #381e72;
174
+ --md-sys-color-primary-container-dark: #4f378b;
175
+ --md-sys-color-on-primary-container-dark: #eaddff;
176
+ --md-sys-color-primary-fixed-dark: #eaddff;
177
+ --md-sys-color-on-primary-fixed-dark: #21005d;
178
+ --md-sys-color-primary-fixed-dim-dark: #d0bcff;
179
+ --md-sys-color-on-primary-fixed-variant-dark: #4f378b;
180
+ --md-sys-color-secondary-dark: #ccc2dc;
181
+ --md-sys-color-on-secondary-dark: #332d41;
182
+ --md-sys-color-secondary-container-dark: #4a4458;
183
+ --md-sys-color-on-secondary-container-dark: #e8def8;
184
+ --md-sys-color-secondary-fixed-dark: #e8def8;
185
+ --md-sys-color-on-secondary-fixed-dark: #1d192b;
186
+ --md-sys-color-secondary-fixed-dim-dark: #ccc2dc;
187
+ --md-sys-color-on-secondary-fixed-variant-dark: #4a4458;
188
+ --md-sys-color-tertiary-dark: #efb8c8;
189
+ --md-sys-color-on-tertiary-dark: #492532;
190
+ --md-sys-color-tertiary-container-dark: #633b48;
191
+ --md-sys-color-on-tertiary-container-dark: #ffd8e4;
192
+ --md-sys-color-tertiary-fixed-dark: #ffd8e4;
193
+ --md-sys-color-on-tertiary-fixed-dark: #31111d;
194
+ --md-sys-color-tertiary-fixed-dim-dark: #efb8c8;
195
+ --md-sys-color-on-tertiary-fixed-variant-dark: #633b48;
196
+ --md-sys-color-error-dark: #f2b8b5;
197
+ --md-sys-color-on-error-dark: #601410;
198
+ --md-sys-color-error-container-dark: #8c1d18;
199
+ --md-sys-color-on-error-container-dark: #f9dedc;
200
+ --md-sys-color-outline-dark: #938f99;
201
+ --md-sys-color-background-dark: #141218;
202
+ --md-sys-color-on-background-dark: #e6e0e9;
203
+ --md-sys-color-surface-dark: #141218;
204
+ --md-sys-color-on-surface-dark: #e6e0e9;
205
+ --md-sys-color-surface-variant-dark: #49454f;
206
+ --md-sys-color-on-surface-variant-dark: #cac4d0;
207
+ --md-sys-color-inverse-surface-dark: #e6e0e9;
208
+ --md-sys-color-inverse-on-surface-dark: #322f35;
209
+ --md-sys-color-inverse-primary-dark: #6750a4;
210
+ --md-sys-color-shadow-dark: #000000;
211
+ --md-sys-color-surface-tint-dark: #d0bcff;
212
+ --md-sys-color-outline-variant-dark: #49454f;
213
+ --md-sys-color-scrim-dark: #000000;
214
+ --md-sys-color-surface-container-highest-dark: #36343b;
215
+ --md-sys-color-surface-container-high-dark: #2b2930;
216
+ --md-sys-color-surface-container-dark: #211f26;
217
+ --md-sys-color-surface-container-low-dark: #1d1b20;
218
+ --md-sys-color-surface-container-lowest-dark: #0f0d13;
219
+ --md-sys-color-surface-bright-dark: #3b383e;
220
+ --md-sys-color-surface-dim-dark: #141218;
221
+ /* display - large */
222
+ --md-sys-typescale-display-large-font-family-name: Roboto;
223
+ --md-sys-typescale-display-large-font-family-style: Regular;
224
+ --md-sys-typescale-display-large-font-weight: 400px;
225
+ --md-sys-typescale-display-large-font-size: 57px;
226
+ --md-sys-typescale-display-large-line-height: 64px;
227
+ --md-sys-typescale-display-large-letter-spacing: -0.25px;
228
+ /* display - medium */
229
+ --md-sys-typescale-display-medium-font-family-name: Roboto;
230
+ --md-sys-typescale-display-medium-font-family-style: Regular;
231
+ --md-sys-typescale-display-medium-font-weight: 400px;
232
+ --md-sys-typescale-display-medium-font-size: 45px;
233
+ --md-sys-typescale-display-medium-line-height: 52px;
234
+ --md-sys-typescale-display-medium-letter-spacing: 0px;
235
+ /* display - small */
236
+ --md-sys-typescale-display-small-font-family-name: Roboto;
237
+ --md-sys-typescale-display-small-font-family-style: Regular;
238
+ --md-sys-typescale-display-small-font-weight: 400px;
239
+ --md-sys-typescale-display-small-font-size: 36px;
240
+ --md-sys-typescale-display-small-line-height: 44px;
241
+ --md-sys-typescale-display-small-letter-spacing: 0px;
242
+ /* headline - large */
243
+ --md-sys-typescale-headline-large-font-family-name: Roboto;
244
+ --md-sys-typescale-headline-large-font-family-style: Regular;
245
+ --md-sys-typescale-headline-large-font-weight: 400px;
246
+ --md-sys-typescale-headline-large-font-size: 32px;
247
+ --md-sys-typescale-headline-large-line-height: 40px;
248
+ --md-sys-typescale-headline-large-letter-spacing: 0px;
249
+ /* headline - medium */
250
+ --md-sys-typescale-headline-medium-font-family-name: Roboto;
251
+ --md-sys-typescale-headline-medium-font-family-style: Regular;
252
+ --md-sys-typescale-headline-medium-font-weight: 400px;
253
+ --md-sys-typescale-headline-medium-font-size: 28px;
254
+ --md-sys-typescale-headline-medium-line-height: 36px;
255
+ --md-sys-typescale-headline-medium-letter-spacing: 0px;
256
+ /* headline - small */
257
+ --md-sys-typescale-headline-small-font-family-name: Roboto;
258
+ --md-sys-typescale-headline-small-font-family-style: Regular;
259
+ --md-sys-typescale-headline-small-font-weight: 400px;
260
+ --md-sys-typescale-headline-small-font-size: 24px;
261
+ --md-sys-typescale-headline-small-line-height: 32px;
262
+ --md-sys-typescale-headline-small-letter-spacing: 0px;
263
+ /* body - large */
264
+ --md-sys-typescale-body-large-font-family-name: Roboto;
265
+ --md-sys-typescale-body-large-font-family-style: Regular;
266
+ --md-sys-typescale-body-large-font-weight: 400px;
267
+ --md-sys-typescale-body-large-font-size: 16px;
268
+ --md-sys-typescale-body-large-line-height: 24px;
269
+ --md-sys-typescale-body-large-letter-spacing: 0.5px;
270
+ /* body - medium */
271
+ --md-sys-typescale-body-medium-font-family-name: Roboto;
272
+ --md-sys-typescale-body-medium-font-family-style: Regular;
273
+ --md-sys-typescale-body-medium-font-weight: 400px;
274
+ --md-sys-typescale-body-medium-font-size: 14px;
275
+ --md-sys-typescale-body-medium-line-height: 20px;
276
+ --md-sys-typescale-body-medium-letter-spacing: 0.25px;
277
+ /* body - small */
278
+ --md-sys-typescale-body-small-font-family-name: Roboto;
279
+ --md-sys-typescale-body-small-font-family-style: Regular;
280
+ --md-sys-typescale-body-small-font-weight: 400px;
281
+ --md-sys-typescale-body-small-font-size: 12px;
282
+ --md-sys-typescale-body-small-line-height: 16px;
283
+ --md-sys-typescale-body-small-letter-spacing: 0.4px;
284
+ /* label - large */
285
+ --md-sys-typescale-label-large-font-family-name: Roboto;
286
+ --md-sys-typescale-label-large-font-family-style: Medium;
287
+ --md-sys-typescale-label-large-font-weight: 500px;
288
+ --md-sys-typescale-label-large-font-size: 14px;
289
+ --md-sys-typescale-label-large-line-height: 20px;
290
+ --md-sys-typescale-label-large-letter-spacing: 0.1px;
291
+ /* label - medium */
292
+ --md-sys-typescale-label-medium-font-family-name: Roboto;
293
+ --md-sys-typescale-label-medium-font-family-style: Medium;
294
+ --md-sys-typescale-label-medium-font-weight: 500px;
295
+ --md-sys-typescale-label-medium-font-size: 12px;
296
+ --md-sys-typescale-label-medium-line-height: 16px;
297
+ --md-sys-typescale-label-medium-letter-spacing: 0.5px;
298
+ /* label - small */
299
+ --md-sys-typescale-label-small-font-family-name: Roboto;
300
+ --md-sys-typescale-label-small-font-family-style: Medium;
301
+ --md-sys-typescale-label-small-font-weight: 500px;
302
+ --md-sys-typescale-label-small-font-size: 11px;
303
+ --md-sys-typescale-label-small-line-height: 16px;
304
+ --md-sys-typescale-label-small-letter-spacing: 0.5px;
305
+ /* title - large */
306
+ --md-sys-typescale-title-large-font-family-name: Roboto;
307
+ --md-sys-typescale-title-large-font-family-style: Regular;
308
+ --md-sys-typescale-title-large-font-weight: 400px;
309
+ --md-sys-typescale-title-large-font-size: 22px;
310
+ --md-sys-typescale-title-large-line-height: 28px;
311
+ --md-sys-typescale-title-large-letter-spacing: 0px;
312
+ /* title - medium */
313
+ --md-sys-typescale-title-medium-font-family-name: Roboto;
314
+ --md-sys-typescale-title-medium-font-family-style: Medium;
315
+ --md-sys-typescale-title-medium-font-weight: 500px;
316
+ --md-sys-typescale-title-medium-font-size: 16px;
317
+ --md-sys-typescale-title-medium-line-height: 24px;
318
+ --md-sys-typescale-title-medium-letter-spacing: 0.15px;
319
+ /* title - small */
320
+ --md-sys-typescale-title-small-font-family-name: Roboto;
321
+ --md-sys-typescale-title-small-font-family-style: Medium;
322
+ --md-sys-typescale-title-small-font-weight: 500px;
323
+ --md-sys-typescale-title-small-font-size: 14px;
324
+ --md-sys-typescale-title-small-line-height: 20px;
325
+ --md-sys-typescale-title-small-letter-spacing: 0.1px;
326
+ }
327
+ .dark {
328
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
329
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
330
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
331
+ --md-sys-color-on-primary-container: var(
332
+ --md-sys-color-on-primary-container-dark
333
+ );
334
+ --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-dark);
335
+ --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-dark);
336
+ --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-dark);
337
+ --md-sys-color-on-primary-fixed-variant: var(
338
+ --md-sys-color-on-primary-fixed-variant-dark
339
+ );
340
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
341
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
342
+ --md-sys-color-secondary-container: var(
343
+ --md-sys-color-secondary-container-dark
344
+ );
345
+ --md-sys-color-on-secondary-container: var(
346
+ --md-sys-color-on-secondary-container-dark
347
+ );
348
+ --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-dark);
349
+ --md-sys-color-on-secondary-fixed: var(
350
+ --md-sys-color-on-secondary-fixed-dark
351
+ );
352
+ --md-sys-color-secondary-fixed-dim: var(
353
+ --md-sys-color-secondary-fixed-dim-dark
354
+ );
355
+ --md-sys-color-on-secondary-fixed-variant: var(
356
+ --md-sys-color-on-secondary-fixed-variant-dark
357
+ );
358
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
359
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
360
+ --md-sys-color-tertiary-container: var(
361
+ --md-sys-color-tertiary-container-dark
362
+ );
363
+ --md-sys-color-on-tertiary-container: var(
364
+ --md-sys-color-on-tertiary-container-dark
365
+ );
366
+ --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-dark);
367
+ --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-dark);
368
+ --md-sys-color-tertiary-fixed-dim: var(
369
+ --md-sys-color-tertiary-fixed-dim-dark
370
+ );
371
+ --md-sys-color-on-tertiary-fixed-variant: var(
372
+ --md-sys-color-on-tertiary-fixed-variant-dark
373
+ );
374
+ --md-sys-color-error: var(--md-sys-color-error-dark);
375
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
376
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
377
+ --md-sys-color-on-error-container: var(
378
+ --md-sys-color-on-error-container-dark
379
+ );
380
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
381
+ --md-sys-color-background: var(--md-sys-color-background-dark);
382
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
383
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
384
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
385
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
386
+ --md-sys-color-on-surface-variant: var(
387
+ --md-sys-color-on-surface-variant-dark
388
+ );
389
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
390
+ --md-sys-color-inverse-on-surface: var(
391
+ --md-sys-color-inverse-on-surface-dark
392
+ );
393
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
394
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
395
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
396
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
397
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
398
+ --md-sys-color-surface-container-highest: var(
399
+ --md-sys-color-surface-container-highest-dark
400
+ );
401
+ --md-sys-color-surface-container-high: var(
402
+ --md-sys-color-surface-container-high-dark
403
+ );
404
+ --md-sys-color-surface-container: var(--md-sys-color-surface-container-dark);
405
+ --md-sys-color-surface-container-low: var(
406
+ --md-sys-color-surface-container-low-dark
407
+ );
408
+ --md-sys-color-surface-container-lowest: var(
409
+ --md-sys-color-surface-container-lowest-dark
410
+ );
411
+ --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-dark);
412
+ --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-dark);
413
+ }
414
+
415
+ /**
416
+ * Basic styling
417
+ */
418
+ body {
419
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height}
420
+ $base-font-family;
421
+ color: $text-color;
422
+ background-color: $background-color;
423
+ -webkit-text-size-adjust: 100%;
424
+ -webkit-font-feature-settings: "kern" 1;
425
+ -moz-font-feature-settings: "kern" 1;
426
+ -o-font-feature-settings: "kern" 1;
427
+ font-feature-settings: "kern" 1;
428
+ font-kerning: normal;
429
+ display: flex;
430
+ min-height: 100vh;
431
+ flex-direction: column;
432
+ }
433
+
434
+ /**
435
+ * Set `margin-bottom` to maintain vertical rhythm
436
+ */
437
+ h1,
438
+ h2,
439
+ h3,
440
+ h4,
441
+ h5,
442
+ h6,
443
+ p,
444
+ blockquote,
445
+ pre,
446
+ ul,
447
+ ol,
448
+ dl,
449
+ figure,
450
+ %vertical-rhythm {
451
+ margin-bottom: $spacing-unit / 2;
452
+ }
453
+
454
+ /**
455
+ * `main` element
456
+ */
457
+ main {
458
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
459
+ }
460
+
461
+ /**
462
+ * Images
463
+ */
464
+ img {
465
+ max-width: 100%;
466
+ vertical-align: middle;
467
+ }
468
+
469
+ /**
470
+ * Figures
471
+ */
472
+ figure > img {
473
+ display: block;
474
+ }
475
+
476
+ figcaption {
477
+ font-size: $small-font-size;
478
+ }
479
+
480
+ /**
481
+ * Lists
482
+ */
483
+ ul,
484
+ ol {
485
+ margin-left: $spacing-unit;
486
+ }
487
+
488
+ li {
489
+ > ul,
490
+ > ol {
491
+ margin-bottom: 0;
492
+ }
493
+ }
494
+
495
+ /**
496
+ * Headings
497
+ */
498
+ h1,
499
+ h2,
500
+ h3,
501
+ h4,
502
+ h5,
503
+ h6 {
504
+ font-weight: $base-font-weight;
505
+ }
506
+
507
+ /**
508
+ * Links
509
+ */
510
+ a {
511
+ color: var(--md-sys-color-primary);
512
+ text-decoration: none;
513
+
514
+ &:visited {
515
+ color: darken($brand-color, 15%);
516
+ }
517
+
518
+ &:hover {
519
+ color: $text-color;
520
+ text-decoration: underline;
521
+ }
522
+
523
+ .social-media-list &:hover {
524
+ text-decoration: none;
525
+
526
+ .username {
527
+ text-decoration: underline;
528
+ }
529
+ }
530
+ }
531
+
532
+ /**
533
+ * Blockquotes
534
+ */
535
+ blockquote {
536
+ color: $grey-color;
537
+ border-left: 4px solid $grey-color-light;
538
+ padding-left: $spacing-unit / 2;
539
+ @include relative-font-size(1.125);
540
+ letter-spacing: -1px;
541
+ font-style: italic;
542
+
543
+ > :last-child {
544
+ margin-bottom: 0;
545
+ }
546
+ }
547
+
548
+ /**
549
+ * Code formatting
550
+ */
551
+ pre,
552
+ code {
553
+ @include relative-font-size(0.9375);
554
+ border: 1px solid $grey-color-light;
555
+ border-radius: 3px;
556
+ background-color: #eef;
557
+ }
558
+
559
+ code {
560
+ padding: 1px 5px;
561
+ }
562
+
563
+ pre {
564
+ padding: 8px 12px;
565
+ overflow-x: auto;
566
+
567
+ > code {
568
+ border: 0;
569
+ padding-right: 0;
570
+ padding-left: 0;
571
+ }
572
+ }
573
+
574
+ /**
575
+ * Wrapper
576
+ */
577
+ .wrapper {
578
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
579
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
580
+ margin-right: auto;
581
+ margin-left: auto;
582
+ padding-right: $spacing-unit;
583
+ padding-left: $spacing-unit;
584
+ @extend %clearfix;
585
+
586
+ @include media-query($on-laptop) {
587
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
588
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
589
+ padding-right: $spacing-unit / 2;
590
+ padding-left: $spacing-unit / 2;
591
+ }
592
+ }
593
+
594
+ /**
595
+ * Clearfix
596
+ */
597
+ %clearfix:after {
598
+ content: "";
599
+ display: table;
600
+ clear: both;
601
+ }
602
+
603
+ /**
604
+ * Icons
605
+ */
606
+
607
+ .svg-icon {
608
+ width: 16px;
609
+ height: 16px;
610
+ display: inline-block;
611
+ fill: #{$grey-color};
612
+ padding-right: 5px;
613
+ vertical-align: text-top;
614
+ }
615
+
616
+ .social-media-list {
617
+ li + li {
618
+ padding-top: 5px;
619
+ }
620
+ }
621
+
622
+ /**
623
+ * Tables
624
+ */
625
+ table {
626
+ margin-bottom: $spacing-unit;
627
+ width: 100%;
628
+ text-align: $table-text-align;
629
+ color: lighten($text-color, 18%);
630
+ border-collapse: collapse;
631
+ border: 1px solid $grey-color-light;
632
+ tr {
633
+ &:nth-child(even) {
634
+ background-color: lighten($grey-color-light, 6%);
635
+ }
636
+ }
637
+ th,
638
+ td {
639
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
640
+ }
641
+ th {
642
+ background-color: lighten($grey-color-light, 3%);
643
+ border: 1px solid darken($grey-color-light, 4%);
644
+ border-bottom-color: darken($grey-color-light, 12%);
645
+ }
646
+ td {
647
+ border: 1px solid $grey-color-light;
648
+ }
649
+ }
650
+ .primary {
651
+ background-color: var(--md-sys-color-primary);
652
+ }
653
+ .primary-text {
654
+ color: var(--md-sys-color-primary);
655
+ }
656
+ .on-primary {
657
+ background-color: var(--md-sys-color-on-primary);
658
+ }
659
+ .on-primary-text {
660
+ color: var(--md-sys-color-on-primary);
661
+ }
662
+ .primary-container {
663
+ background-color: var(--md-sys-color-primary-container);
664
+ }
665
+ .primary-container-text {
666
+ color: var(--md-sys-color-primary-container);
667
+ }
668
+ .on-primary-container {
669
+ background-color: var(--md-sys-color-on-primary-container);
670
+ }
671
+ .on-primary-container-text {
672
+ color: var(--md-sys-color-on-primary-container);
673
+ }
674
+ .primary-fixed {
675
+ background-color: var(--md-sys-color-primary-fixed);
676
+ }
677
+ .primary-fixed-text {
678
+ color: var(--md-sys-color-primary-fixed);
679
+ }
680
+ .on-primary-fixed {
681
+ background-color: var(--md-sys-color-on-primary-fixed);
682
+ }
683
+ .on-primary-fixed-text {
684
+ color: var(--md-sys-color-on-primary-fixed);
685
+ }
686
+ .primary-fixed-dim {
687
+ background-color: var(--md-sys-color-primary-fixed-dim);
688
+ }
689
+ .primary-fixed-dim-text {
690
+ color: var(--md-sys-color-primary-fixed-dim);
691
+ }
692
+ .on-primary-fixed-variant {
693
+ background-color: var(--md-sys-color-on-primary-fixed-variant);
694
+ }
695
+ .on-primary-fixed-variant-text {
696
+ color: var(--md-sys-color-on-primary-fixed-variant);
697
+ }
698
+ .secondary {
699
+ background-color: var(--md-sys-color-secondary);
700
+ }
701
+ .secondary-text {
702
+ color: var(--md-sys-color-secondary);
703
+ }
704
+ .on-secondary {
705
+ background-color: var(--md-sys-color-on-secondary);
706
+ }
707
+ .on-secondary-text {
708
+ color: var(--md-sys-color-on-secondary);
709
+ }
710
+ .secondary-container {
711
+ background-color: var(--md-sys-color-secondary-container);
712
+ }
713
+ .secondary-container-text {
714
+ color: var(--md-sys-color-secondary-container);
715
+ }
716
+ .on-secondary-container {
717
+ background-color: var(--md-sys-color-on-secondary-container);
718
+ }
719
+ .on-secondary-container-text {
720
+ color: var(--md-sys-color-on-secondary-container);
721
+ }
722
+ .secondary-fixed {
723
+ background-color: var(--md-sys-color-secondary-fixed);
724
+ }
725
+ .secondary-fixed-text {
726
+ color: var(--md-sys-color-secondary-fixed);
727
+ }
728
+ .on-secondary-fixed {
729
+ background-color: var(--md-sys-color-on-secondary-fixed);
730
+ }
731
+ .on-secondary-fixed-text {
732
+ color: var(--md-sys-color-on-secondary-fixed);
733
+ }
734
+ .secondary-fixed-dim {
735
+ background-color: var(--md-sys-color-secondary-fixed-dim);
736
+ }
737
+ .secondary-fixed-dim-text {
738
+ color: var(--md-sys-color-secondary-fixed-dim);
739
+ }
740
+ .on-secondary-fixed-variant {
741
+ background-color: var(--md-sys-color-on-secondary-fixed-variant);
742
+ }
743
+ .on-secondary-fixed-variant-text {
744
+ color: var(--md-sys-color-on-secondary-fixed-variant);
745
+ }
746
+ .tertiary {
747
+ background-color: var(--md-sys-color-tertiary);
748
+ }
749
+ .tertiary-text {
750
+ color: var(--md-sys-color-tertiary);
751
+ }
752
+ .on-tertiary {
753
+ background-color: var(--md-sys-color-on-tertiary);
754
+ }
755
+ .on-tertiary-text {
756
+ color: var(--md-sys-color-on-tertiary);
757
+ }
758
+ .tertiary-container {
759
+ background-color: var(--md-sys-color-tertiary-container);
760
+ }
761
+ .tertiary-container-text {
762
+ color: var(--md-sys-color-tertiary-container);
763
+ }
764
+ .on-tertiary-container {
765
+ background-color: var(--md-sys-color-on-tertiary-container);
766
+ }
767
+ .on-tertiary-container-text {
768
+ color: var(--md-sys-color-on-tertiary-container);
769
+ }
770
+ .tertiary-fixed {
771
+ background-color: var(--md-sys-color-tertiary-fixed);
772
+ }
773
+ .tertiary-fixed-text {
774
+ color: var(--md-sys-color-tertiary-fixed);
775
+ }
776
+ .on-tertiary-fixed {
777
+ background-color: var(--md-sys-color-on-tertiary-fixed);
778
+ }
779
+ .on-tertiary-fixed-text {
780
+ color: var(--md-sys-color-on-tertiary-fixed);
781
+ }
782
+ .tertiary-fixed-dim {
783
+ background-color: var(--md-sys-color-tertiary-fixed-dim);
784
+ }
785
+ .tertiary-fixed-dim-text {
786
+ color: var(--md-sys-color-tertiary-fixed-dim);
787
+ }
788
+ .on-tertiary-fixed-variant {
789
+ background-color: var(--md-sys-color-on-tertiary-fixed-variant);
790
+ }
791
+ .on-tertiary-fixed-variant-text {
792
+ color: var(--md-sys-color-on-tertiary-fixed-variant);
793
+ }
794
+ .error {
795
+ background-color: var(--md-sys-color-error);
796
+ }
797
+ .error-text {
798
+ color: var(--md-sys-color-error);
799
+ }
800
+ .on-error {
801
+ background-color: var(--md-sys-color-on-error);
802
+ }
803
+ .on-error-text {
804
+ color: var(--md-sys-color-on-error);
805
+ }
806
+ .error-container {
807
+ background-color: var(--md-sys-color-error-container);
808
+ }
809
+ .error-container-text {
810
+ color: var(--md-sys-color-error-container);
811
+ }
812
+ .on-error-container {
813
+ background-color: var(--md-sys-color-on-error-container);
814
+ }
815
+ .on-error-container-text {
816
+ color: var(--md-sys-color-on-error-container);
817
+ }
818
+ .outline {
819
+ background-color: var(--md-sys-color-outline);
820
+ }
821
+ .outline-text {
822
+ color: var(--md-sys-color-outline);
823
+ }
824
+ .background {
825
+ background-color: var(--md-sys-color-background);
826
+ }
827
+ .background-text {
828
+ color: var(--md-sys-color-background);
829
+ }
830
+ .on-background {
831
+ background-color: var(--md-sys-color-on-background);
832
+ }
833
+ .on-background-text {
834
+ color: var(--md-sys-color-on-background);
835
+ }
836
+ .surface {
837
+ background-color: var(--md-sys-color-surface);
838
+ }
839
+ .surface-text {
840
+ color: var(--md-sys-color-surface);
841
+ }
842
+ .on-surface {
843
+ background-color: var(--md-sys-color-on-surface);
844
+ }
845
+ .on-surface-text {
846
+ color: var(--md-sys-color-on-surface);
847
+ }
848
+ .surface-variant {
849
+ background-color: var(--md-sys-color-surface-variant);
850
+ }
851
+ .surface-variant-text {
852
+ color: var(--md-sys-color-surface-variant);
853
+ }
854
+ .on-surface-variant {
855
+ background-color: var(--md-sys-color-on-surface-variant);
856
+ }
857
+ .on-surface-variant-text {
858
+ color: var(--md-sys-color-on-surface-variant);
859
+ }
860
+ .inverse-surface {
861
+ background-color: var(--md-sys-color-inverse-surface);
862
+ }
863
+ .inverse-surface-text {
864
+ color: var(--md-sys-color-inverse-surface);
865
+ }
866
+ .inverse-on-surface {
867
+ background-color: var(--md-sys-color-inverse-on-surface);
868
+ }
869
+ .inverse-on-surface-text {
870
+ color: var(--md-sys-color-inverse-on-surface);
871
+ }
872
+ .inverse-primary {
873
+ background-color: var(--md-sys-color-inverse-primary);
874
+ }
875
+ .inverse-primary-text {
876
+ color: var(--md-sys-color-inverse-primary);
877
+ }
878
+ .shadow {
879
+ background-color: var(--md-sys-color-shadow);
880
+ }
881
+ .shadow-text {
882
+ color: var(--md-sys-color-shadow);
883
+ }
884
+ .surface-tint {
885
+ background-color: var(--md-sys-color-surface-tint);
886
+ }
887
+ .surface-tint-text {
888
+ color: var(--md-sys-color-surface-tint);
889
+ }
890
+ .outline-variant {
891
+ background-color: var(--md-sys-color-outline-variant);
892
+ }
893
+ .outline-variant-text {
894
+ color: var(--md-sys-color-outline-variant);
895
+ }
896
+ .scrim {
897
+ background-color: var(--md-sys-color-scrim);
898
+ }
899
+ .scrim-text {
900
+ color: var(--md-sys-color-scrim);
901
+ }
902
+ .surface-container-highest {
903
+ background-color: var(--md-sys-color-surface-container-highest);
904
+ }
905
+ .surface-container-highest-text {
906
+ color: var(--md-sys-color-surface-container-highest);
907
+ }
908
+ .surface-container-high {
909
+ background-color: var(--md-sys-color-surface-container-high);
910
+ }
911
+ .surface-container-high-text {
912
+ color: var(--md-sys-color-surface-container-high);
913
+ }
914
+ .surface-container {
915
+ background-color: var(--md-sys-color-surface-container);
916
+ }
917
+ .surface-container-text {
918
+ color: var(--md-sys-color-surface-container);
919
+ }
920
+ .surface-container-low {
921
+ background-color: var(--md-sys-color-surface-container-low);
922
+ }
923
+ .surface-container-low-text {
924
+ color: var(--md-sys-color-surface-container-low);
925
+ }
926
+ .surface-container-lowest {
927
+ background-color: var(--md-sys-color-surface-container-lowest);
928
+ }
929
+ .surface-container-lowest-text {
930
+ color: var(--md-sys-color-surface-container-lowest);
931
+ }
932
+ .surface-bright {
933
+ background-color: var(--md-sys-color-surface-bright);
934
+ }
935
+ .surface-bright-text {
936
+ color: var(--md-sys-color-surface-bright);
937
+ }
938
+ .surface-dim {
939
+ background-color: var(--md-sys-color-surface-dim);
940
+ }
941
+ .surface-dim-text {
942
+ color: var(--md-sys-color-surface-dim);
943
+ }