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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
$breakpoints: (
lg: 1500px,
md: 900px,
sm: 600px,
xs: 400px,
);
$unit-intervals: (
'px': 1,
'em': .01,
'rem': .01,
'': 0
);
$responsive-mod-scale: (
xs: (.8rem, 1.35),
md: (.8rem, 1.53)
);
$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
$font-fam--large: 'Garet', $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: 42rem;
$gray0: hsl(220, 7%, 7%);
$gray1: hsl(220, 7%, 11%);
$gray2: hsl(220, 7%, 18%);
$gray3: hsl(220, 7%, 23%);
$gray4: hsl(220, 7%, 38%);
$gray5: hsl(220, 7%, 60%);
$gray6: hsl(220, 7%, 76%);
$gray7: hsl(220, 7%, 100%);
@include store((
--dims: (
--outer: 4rem,
--indent: 2rem,
),
--colors: (
--bg-hi: $gray0, // Darker background
--bg: $gray1, // Background
--bg-lo: $gray2, // Lighter background
--obj-hi: $gray3,
--obj: $gray4,
--fg-hi: $gray5, // Faint text
--fg: $gray6, // Text
--fg-lo: $gray7, // Strong text
--accent: (
--h: 354,
--s: 84%,
--l: 55%,
--color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
),
--focus-ring: var(--colors--accent--color),
--select: (
--bg: rgba($gray7, .996),
--img-bg: rgba($gray7, .5),
--fg: $gray0,
),
--link: (
--idle: var(--colors--fg-lo),
)
)
));
@each $breakpoint in map-keys($breakpoints) {
@include media('<=#{$breakpoint}') {
@include store((
--colors: ()
), $breakpoint);
}
}
@include store((
--dims: (
--outer: 3.5rem,
),
), 'sm');
:root {
--heading--fg: var(--colors--fg-lo);
--code--fg: var(--colors--fg-hi);
--code-block--fg: var(--colors--fg-hi);
--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;
}
|
