diff options
author | Volpeon <git@volpeon.ink> | 2021-04-27 21:40:34 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-27 21:40:34 +0200 |
commit | 93493c0714145dc8bb7d812700a0f4f3f577dd7f (patch) | |
tree | c012755c3ced01820d7fa0872c27feed5288aa7f /assets/css/_vars.scss | |
parent | Update (diff) | |
download | volpeon.ink-93493c0714145dc8bb7d812700a0f4f3f577dd7f.tar.gz volpeon.ink-93493c0714145dc8bb7d812700a0f4f3f577dd7f.tar.bz2 volpeon.ink-93493c0714145dc8bb7d812700a0f4f3f577dd7f.zip |
Update
Diffstat (limited to 'assets/css/_vars.scss')
-rw-r--r-- | assets/css/_vars.scss | 37 |
1 files changed, 23 insertions, 14 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 2fd7b53..37262a6 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -12,6 +12,11 @@ $unit-intervals: ( | |||
12 | '': 0 | 12 | '': 0 |
13 | ); | 13 | ); |
14 | 14 | ||
15 | $responsive-mod-scale: ( | ||
16 | xs: (1rem, 1.2), | ||
17 | sm: (.5rem, 1.6) | ||
18 | ); | ||
19 | |||
15 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | 20 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; |
16 | $font-fam--large: 'Garet', $font-fam--text; | 21 | $font-fam--large: 'Garet', $font-fam--text; |
17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 22 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
@@ -19,13 +24,13 @@ $font-size: 16px; | |||
19 | $line-height: 1.7; | 24 | $line-height: 1.7; |
20 | $content--width: 42rem; | 25 | $content--width: 42rem; |
21 | 26 | ||
22 | $gray0: hsl(220, 7%, 6%); | 27 | $gray0: hsl(220, 7%, 7%); |
23 | $gray1: hsl(220, 7%, 9%); | 28 | $gray1: hsl(220, 7%, 11%); |
24 | $gray2: hsl(220, 7%, 15%); | 29 | $gray2: hsl(220, 7%, 18%); |
25 | $gray3: hsl(220, 7%, 20%); | 30 | $gray3: hsl(220, 7%, 23%); |
26 | $gray4: hsl(220, 7%, 33%); | 31 | $gray4: hsl(220, 7%, 38%); |
27 | $gray5: hsl(220, 7%, 54%); | 32 | $gray5: hsl(220, 7%, 58%); |
28 | $gray6: hsl(220, 7%, 73%); | 33 | $gray6: hsl(220, 7%, 76%); |
29 | $gray7: hsl(220, 7%, 100%); | 34 | $gray7: hsl(220, 7%, 100%); |
30 | 35 | ||
31 | @include store(( | 36 | @include store(( |
@@ -34,16 +39,16 @@ $gray7: hsl(220, 7%, 100%); | |||
34 | --indent: 2rem, | 39 | --indent: 2rem, |
35 | ), | 40 | ), |
36 | --colors: ( | 41 | --colors: ( |
37 | --bg-hi: $gray0, // Darker background | 42 | --bg-hi: $gray0, // Darker background |
38 | --bg: $gray1, // Background | 43 | --bg: $gray1, // Background |
39 | --bg-lo: $gray2, // Lighter background | 44 | --bg-lo: $gray2, // Lighter background |
40 | 45 | ||
41 | --obj-hi: $gray3, | 46 | --obj-hi: $gray3, |
42 | --obj: $gray4, | 47 | --obj: $gray4, |
43 | 48 | ||
44 | --fg-hi: $gray5, // Faint text | 49 | --fg-hi: $gray5, // Faint text |
45 | --fg: $gray6, // Text | 50 | --fg: $gray6, // Text |
46 | --fg-lo: $gray7, // Strong text | 51 | --fg-lo: $gray7, // Strong text |
47 | 52 | ||
48 | --accent: ( | 53 | --accent: ( |
49 | --h: 354, | 54 | --h: 354, |
@@ -52,6 +57,8 @@ $gray7: hsl(220, 7%, 100%); | |||
52 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | 57 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), |
53 | ), | 58 | ), |
54 | 59 | ||
60 | --focus-ring: var(--colors--accent--color), | ||
61 | |||
55 | --select: ( | 62 | --select: ( |
56 | --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996), | 63 | --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996), |
57 | --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), | 64 | --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), |
@@ -59,7 +66,9 @@ $gray7: hsl(220, 7%, 100%); | |||
59 | ), | 66 | ), |
60 | 67 | ||
61 | --link: ( | 68 | --link: ( |
62 | --idle: var(--colors--fg-lo) | 69 | --idle: var(--colors--fg-lo), |
70 | --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), | ||
71 | --visited-body: hsl(270, 60%, 72%), // hsl(354, 50%, 66%), | ||
63 | ) | 72 | ) |
64 | ) | 73 | ) |
65 | )); | 74 | )); |