diff options
Diffstat (limited to 'assets/css/_vars.scss')
-rw-r--r-- | assets/css/_vars.scss | 54 |
1 files changed, 32 insertions, 22 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 9cd4b24..2242f09 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -34,35 +34,45 @@ $breakpoints: ( | |||
34 | --gray2: hsl(270, 1%, 29%); | 34 | --gray2: hsl(270, 1%, 29%); |
35 | --gray3: hsl(270, 2%, 54%); | 35 | --gray3: hsl(270, 2%, 54%); |
36 | --gray4: hsl(270, 2%, 73%); | 36 | --gray4: hsl(270, 2%, 73%); |
37 | --gray5: hsl(270, 2%, 83%); | 37 | --gray5: hsl(270, 2%, 86%); |
38 | --gray6: hsl(270, 2%, 100%); | 38 | --gray5: hsl(270, 2%, 100%); |
39 | 39 | ||
40 | --bg-minus: var(--gray0); | 40 | // |
41 | --bg: var(--gray1); | ||
42 | --bg-plus: var(--gray2); | ||
43 | --fg-minus: var(--gray3); | ||
44 | --fg: var(--gray4); | ||
45 | --fg-plus: var(--gray5); | ||
46 | --fg-plus-2: var(--gray6); | ||
47 | 41 | ||
48 | --heading--fg: var(--fg-plus-2); | 42 | --bg-hi: var(--gray0); // Lighter background |
43 | --bg: var(--gray1); // Background | ||
44 | |||
45 | --obj: var(--gray2); | ||
46 | |||
47 | --fg-hi: var(--gray3); // Faint text | ||
48 | --fg: var(--gray4); // Text | ||
49 | --fg-lo: var(--gray5); // Strong text | ||
50 | |||
51 | // | ||
52 | |||
53 | --heading--fg: var(--fg-lo); | ||
49 | 54 | ||
50 | --select--bg: hsla(270, 2%, 100%, .996); | 55 | --select--bg: hsla(270, 2%, 100%, .996); |
51 | --select--fg: var(--bg-minus); | 56 | --select--fg: var(--bg-hi); |
52 | 57 | ||
53 | --code--fg: var(--fg-minus); | 58 | --code--fg: var(--fg-hi); |
54 | --code-block--fg: var(--fg-minus); | ||
55 | 59 | ||
56 | --page--item-prefix--fg: var(--fg-minus); | 60 | --code-block--fg: var(--fg-hi); |
57 | 61 | ||
58 | --link--idle--fg: var(--fg-plus-2); //#90acf2; | 62 | --link--idle--fg: var(--fg-lo); |
59 | --link--visited--fg: var(--fg-plus); //#bc9df2; | 63 | --link--hover--bg: var(--link--idle--fg); |
60 | --link--hover--bg: var(--fg-plus-2); | 64 | --link--hover--fg: #000; |
61 | --link--hover--fg: var(--bg-minus); | ||
62 | 65 | ||
63 | --nav--bg: var(--bg-minus); | 66 | --nav--bg: var(--bg-hi); |
64 | --nav--logo--fg: var(--fg-minus); | 67 | --nav--logo--fg: var(--fg-hi); |
65 | --nav--item--idle--fg: var(--fg); | 68 | --nav--item--idle--fg: var(--fg); |
66 | --nav--item--hover--fg: var(--fg-plus-2); | 69 | --nav--item--hover--fg: var(--fg-lo); |
67 | --nav--item--active--fg: var(--fg-plus-2); | 70 | --nav--item--active--fg: var(--fg-lo); |
71 | |||
72 | --page--item-prefix--fg: var(--fg-hi); | ||
73 | |||
74 | --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; | ||
75 | --page--link--visited--fg: var(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; | ||
76 | --page--link--hover--bg: var(--page--link--idle--fg); | ||
77 | --page--link--hover--fg: #000; | ||
68 | } | 78 | } |