diff options
Diffstat (limited to 'assets/css/_vars.scss')
| -rw-r--r-- | assets/css/_vars.scss | 40 |
1 files changed, 23 insertions, 17 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 3461b81..0c6102d 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
| @@ -1,9 +1,8 @@ | |||
| 1 | $iro-root-size: 16px; | ||
| 2 | |||
| 3 | $breakpoints: ( | 1 | $breakpoints: ( |
| 4 | xs: 320px, | 2 | xs: 320px, |
| 5 | sm: 700px, | 3 | sm: 600px, |
| 6 | md: 1100px, | 4 | md: 900px, |
| 5 | lg: 1400px, | ||
| 7 | ); | 6 | ); |
| 8 | 7 | ||
| 9 | $unit-intervals: ( | 8 | $unit-intervals: ( |
| @@ -18,28 +17,35 @@ $font-fam--large: 'Garet Variable', $font-fam--text; | |||
| 18 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | 17 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; |
| 19 | $font-size: 16px; | 18 | $font-size: 16px; |
| 20 | $line-height: 1.7; | 19 | $line-height: 1.7; |
| 21 | $content--width: 56rem; | 20 | $content--width: 42rem; |
| 22 | $subcontent--indent: 2em; | 21 | $subcontent--indent: 2em; |
| 23 | 22 | ||
| 24 | $gray0: hsl(220, 0%, 7%); | 23 | $gray0: hsl(220, 0%, 6%); |
| 25 | $gray1: hsl(220, 0%, 10%); | 24 | $gray1: hsl(220, 0%, 9%); |
| 26 | $gray2: hsl(220, 0%, 29%); | 25 | $gray2: hsl(220, 0%, 16%); |
| 27 | $gray3: hsl(220, 0%, 54%); | 26 | $gray3: hsl(220, 0%, 29%); |
| 28 | $gray4: hsl(220, 0%, 73%); | 27 | $gray4: hsl(220, 0%, 54%); |
| 29 | $gray5: hsl(220, 0%, 100%); | 28 | $gray5: hsl(220, 0%, 73%); |
| 29 | $gray6: hsl(220, 0%, 100%); | ||
| 30 | 30 | ||
| 31 | @include store(( | 31 | @include store(( |
| 32 | --colors: ( | 32 | --colors: ( |
| 33 | --bg-hi: $gray0, // Lighter background | 33 | --bg-hi: $gray0, // Darker background |
| 34 | --bg: $gray1, // Background | 34 | --bg: $gray1, // Background |
| 35 | --bg-lo: $gray2, // Lighter background | ||
| 35 | 36 | ||
| 36 | --obj: $gray2, | 37 | --obj: $gray3, |
| 37 | 38 | ||
| 38 | --fg-hi: $gray3, // Faint text | 39 | --fg-hi: $gray4, // Faint text |
| 39 | --fg: $gray4, // Text | 40 | --fg: $gray5, // Text |
| 40 | --fg-lo: $gray5, // Strong text | 41 | --fg-lo: $gray6, // Strong text |
| 41 | 42 | ||
| 42 | --accent: hsl(354, 84%, 55%), | 43 | --accent: ( |
| 44 | --h: 354, | ||
| 45 | --s: 84%, | ||
| 46 | --l: 55%, | ||
| 47 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | ||
| 48 | ) | ||
| 43 | ) | 49 | ) |
| 44 | )); | 50 | )); |
| 45 | 51 | ||
