1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
$iro-root-size: 16px;
$breakpoints: (
xs: 320px,
sm: 700px,
md: 1100px,
);
$unit-intervals: (
'px': 1,
'em': .01,
'rem': .01,
'': 0
);
$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
$font-fam--large: 'Garet Variable', $font-fam--text;
$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
$font-size: 16px;
$line-height: 1.7;
$content--width: 56rem;
$subcontent--indent: 2em;
$gray0: hsl(220, 0%, 7%);
$gray1: hsl(220, 0%, 10%);
$gray2: hsl(220, 0%, 29%);
$gray3: hsl(220, 0%, 54%);
$gray4: hsl(220, 0%, 73%);
$gray5: hsl(220, 0%, 100%);
@include store((
--colors: (
--bg-hi: $gray0, // Lighter background
--bg: $gray1, // Background
--obj: $gray2,
--fg-hi: $gray3, // Faint text
--fg: $gray4, // Text
--fg-lo: $gray5, // Strong text
--accent: hsl(354, 84%, 55%),
)
));
@each $breakpoint in map-keys($breakpoints) {
@include media('<=#{$breakpoint}') {
@include store((
--colors: ()
), $breakpoint);
}
}
:root {
--heading--fg: var(--colors--fg-lo);
--select--bg: hsla(270, 2%, 100%, .996);
--select--img-bg: hsla(270, 2%, 100%, .5);
--select--fg: var(--colors--bg-hi);
--code--fg: var(--colors--fg-hi);
--code-block--fg: var(--colors--fg-hi);
--link--idle--fg: var(--colors--fg-lo);
--link--hover--bg: var(--link--idle--fg);
--link--hover--fg: #000;
--hero--back-fg: var(--colors--bg-hi);
--nav--bg: var(--colors--bg);
--nav--logo--fg: var(--colors--fg-hi);
--nav--item--idle--fg: var(--colors--fg);
--nav--item--hover--fg: var(--colors--fg-lo);
--nav--item--active--fg: var(--colors--fg-lo);
--footer--bg: var(--colors--bg);
--page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
--page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
--page--link--hover--bg: var(--page--link--idle--fg);
--page--link--hover--fg: #000;
}
|
