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
|
$font-size: 17px;
$line-height: 1.5;
$code-block--font-size: $font-size - 1;
$code-block--line-height: 1.4;
$content--width: 80ch;
$content--h1--font-size: $font-size + 1;
$subcontent--indent: 4ch;
$container--pad-h: 2rem;
$container--pad-h-sm: 1rem;
$container--pad-v: $line-height * 2rem;
$container--pad-v-sm: $line-height * 1rem;
$nav--font-size: $font-size - 1;
$nav--item--spacing: 4ch;
$nav--item--spacing-sm: 3ch;
$nav--item--pad-h: 1ch;
$nav--item--pad-v: .9em;
$page--item-prefix--max-chars: 3ch;
$page--item-prefix--pad: 2ch;
$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
$breakpoints: (
xs: 380px,
sm: 700px,
);
:root {
--gray0: hsl(270, 0%, 7%);
--gray1: hsl(270, 0%, 10%);
--gray2: hsl(270, 1%, 29%);
--gray3: hsl(270, 2%, 54%);
--gray4: hsl(270, 2%, 73%);
--gray5: hsl(270, 2%, 100%);
//
--bg-hi: var(--gray0); // Lighter background
--bg: var(--gray1); // Background
--obj: var(--gray2);
--fg-hi: var(--gray3); // Faint text
--fg: var(--gray4); // Text
--fg-lo: var(--gray5); // Strong text
//
--heading--fg: var(--fg-lo);
--select--bg: hsla(270, 2%, 100%, .996);
--select--fg: var(--bg-hi);
--code--fg: var(--fg-hi);
--code-block--fg: var(--fg-hi);
--link--idle--fg: var(--fg-lo);
--link--hover--bg: var(--link--idle--fg);
--link--hover--fg: #000;
--nav--bg: var(--bg-hi);
--nav--logo--fg: var(--fg-hi);
--nav--item--idle--fg: var(--fg);
--nav--item--hover--fg: var(--fg-lo);
--nav--item--active--fg: var(--fg-lo);
--page--item-prefix--fg: var(--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(--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;
}
|
