diff options
Diffstat (limited to 'assets/css/_vars.scss')
-rw-r--r-- | assets/css/_vars.scss | 117 |
1 files changed, 52 insertions, 65 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ea831a6..ae8a7a8 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -1,88 +1,75 @@ | |||
1 | $font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', | 1 | $iro-root-size: 16px; |
2 | Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif; | ||
3 | $font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier, | ||
4 | monospace; | ||
5 | $font-size: 16px; | ||
6 | $line-height: 1.7; | ||
7 | |||
8 | $code-block--font-size: 16px; | ||
9 | $code-block--line-height: 1.4; | ||
10 | |||
11 | $content--width: 42em; | ||
12 | $content--h1--font-size: $font-size + 1; | ||
13 | |||
14 | $subcontent--indent: 2em; | ||
15 | |||
16 | $container--pad-h: 2rem; | ||
17 | $container--pad-h--sm: 1rem; | ||
18 | $container--pad-v: $line-height * 2rem; | ||
19 | $container--pad-v--sm: $line-height * 1rem; | ||
20 | |||
21 | $nav--font-size: $font-size - 1; | ||
22 | $nav--item--spacing: 2em; | ||
23 | $nav--item--spacing--sm: 1.5em; | ||
24 | $nav--item--pad-h: .5em; | ||
25 | $nav--item--pad-v: .9em; | ||
26 | |||
27 | $footer--pad-v: .8em; | ||
28 | |||
29 | $page--item-prefix--max-chars: 1.5em; | ||
30 | $page--item-prefix--pad: 1em; | ||
31 | $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; | ||
32 | |||
33 | $page--item-prefix--max-chars--sm: 1em; | ||
34 | $page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad; | ||
35 | 2 | ||
36 | $breakpoints: ( | 3 | $breakpoints: ( |
37 | xs: 380px, | 4 | xs: 320px, |
38 | sm: 700px, | 5 | sm: 700px, |
6 | md: 1100px, | ||
39 | ); | 7 | ); |
40 | 8 | ||
41 | :root { | 9 | $unit-intervals: ( |
42 | --gray0: hsl(270, 0%, 7%); | 10 | 'px': 1, |
43 | --gray1: hsl(270, 0%, 10%); | 11 | 'em': .01, |
44 | --gray2: hsl(270, 1%, 29%); | 12 | 'rem': .01, |
45 | --gray3: hsl(270, 2%, 54%); | 13 | '': 0 |
46 | --gray4: hsl(270, 2%, 73%); | 14 | ); |
47 | --gray5: hsl(270, 2%, 100%); | ||
48 | |||
49 | // | ||
50 | |||
51 | --bg-hi: var(--gray0); // Lighter background | ||
52 | --bg: var(--gray1); // Background | ||
53 | |||
54 | --obj: var(--gray2); | ||
55 | 15 | ||
56 | --fg-hi: var(--gray3); // Faint text | 16 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; |
57 | --fg: var(--gray4); // Text | 17 | $font-fam--large: 'Garet Variable', $font-fam--text; |
58 | --fg-lo: var(--gray5); // Strong text | 18 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
19 | $font-size: 16px; | ||
20 | $line-height: 1.7; | ||
21 | $content--width: 56rem; | ||
22 | $subcontent--indent: 2em; | ||
59 | 23 | ||
60 | // | 24 | $gray0: hsl(220, 0%, 7%); |
25 | $gray1: hsl(220, 0%, 10%); | ||
26 | $gray2: hsl(220, 0%, 29%); | ||
27 | $gray3: hsl(220, 0%, 54%); | ||
28 | $gray4: hsl(220, 0%, 73%); | ||
29 | $gray5: hsl(220, 0%, 100%); | ||
30 | |||
31 | @include store(( | ||
32 | --colors: ( | ||
33 | --bg-hi: $gray0, // Lighter background | ||
34 | --bg: $gray1, // Background | ||
35 | |||
36 | --obj: $gray2, | ||
37 | |||
38 | --fg-hi: $gray3, // Faint text | ||
39 | --fg: $gray4, // Text | ||
40 | --fg-lo: $gray5, // Strong text | ||
41 | |||
42 | --accent: hsl(354, 84%, 55%), | ||
43 | ) | ||
44 | )); | ||
61 | 45 | ||
62 | --heading--fg: var(--fg-lo); | 46 | :root { |
47 | --heading--fg: var(--colors--fg-lo); | ||
63 | 48 | ||
64 | --select--bg: hsla(270, 2%, 100%, .996); | 49 | --select--bg: hsla(270, 2%, 100%, .996); |
65 | --select--img-bg: hsla(270, 2%, 100%, .5); | 50 | --select--img-bg: hsla(270, 2%, 100%, .5); |
66 | --select--fg: var(--bg-hi); | 51 | --select--fg: var(--colors--bg-hi); |
67 | 52 | ||
68 | --code--fg: var(--fg-hi); | 53 | --code--fg: var(--colors--fg-hi); |
69 | 54 | ||
70 | --code-block--fg: var(--fg-hi); | 55 | --code-block--fg: var(--colors--fg-hi); |
71 | 56 | ||
72 | --link--idle--fg: var(--fg-lo); | 57 | --link--idle--fg: var(--colors--fg-lo); |
73 | --link--hover--bg: var(--link--idle--fg); | 58 | --link--hover--bg: var(--link--idle--fg); |
74 | --link--hover--fg: #000; | 59 | --link--hover--fg: #000; |
75 | 60 | ||
76 | --nav--bg: var(--bg-hi); | 61 | --hero--back-fg: var(--colors--bg-hi); |
77 | --nav--logo--fg: var(--fg-hi); | 62 | |
78 | --nav--item--idle--fg: var(--fg); | 63 | --nav--bg: var(--colors--bg); |
79 | --nav--item--hover--fg: var(--fg-lo); | 64 | --nav--logo--fg: var(--colors--fg-hi); |
80 | --nav--item--active--fg: var(--fg-lo); | 65 | --nav--item--idle--fg: var(--colors--fg); |
66 | --nav--item--hover--fg: var(--colors--fg-lo); | ||
67 | --nav--item--active--fg: var(--colors--fg-lo); | ||
81 | 68 | ||
82 | --page--item-prefix--fg: var(--fg-hi); | 69 | --footer--bg: var(--colors--bg); |
83 | 70 | ||
84 | --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; | 71 | --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; |
85 | --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; | 72 | --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; |
86 | --page--link--hover--bg: var(--page--link--idle--fg); | 73 | --page--link--hover--bg: var(--page--link--idle--fg); |
87 | --page--link--hover--fg: #000; | 74 | --page--link--hover--fg: #000; |
88 | } | 75 | } |