diff options
Diffstat (limited to 'assets/css/_vars.scss')
| -rw-r--r-- | assets/css/_vars.scss | 141 |
1 files changed, 97 insertions, 44 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ab3d9e5..388db0e 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
| @@ -24,56 +24,109 @@ $font-size: 16px; | |||
| 24 | $line-height: 1.7; | 24 | $line-height: 1.7; |
| 25 | $content--width: 42rem; | 25 | $content--width: 42rem; |
| 26 | 26 | ||
| 27 | $gray0: hsl(220, 7%, 7%); | 27 | @include iro-execute { |
| 28 | $gray1: hsl(220, 7%, 11%); | 28 | $gray0: hsl(220, 7%, 7%); |
| 29 | $gray2: hsl(220, 7%, 18%); | 29 | $gray1: hsl(220, 7%, 11%); |
| 30 | $gray3: hsl(220, 7%, 23%); | 30 | $gray2: hsl(220, 7%, 18%); |
| 31 | $gray4: hsl(220, 7%, 38%); | 31 | $gray3: hsl(220, 7%, 23%); |
| 32 | $gray5: hsl(220, 7%, 60%); | 32 | $gray4: hsl(220, 7%, 38%); |
| 33 | $gray6: hsl(220, 7%, 76%); | 33 | $gray5: hsl(220, 7%, 60%); |
| 34 | $gray7: hsl(220, 7%, 100%); | 34 | $gray6: hsl(220, 7%, 76%); |
| 35 | $gray7: hsl(220, 7%, 100%); | ||
| 35 | 36 | ||
| 36 | @include store(( | 37 | @include store(( |
| 37 | --dims: ( | 38 | --dims: ( |
| 38 | --outer: 4rem, | 39 | --outer: 4rem, |
| 39 | --indent: 2rem, | 40 | --indent: 2rem, |
| 40 | ), | 41 | |
| 41 | --colors: ( | 42 | --obj-shadow: 0 .4em 3.5em, |
| 42 | --bg-hi: $gray0, // Darker background | ||
| 43 | --bg: $gray1, // Background | ||
| 44 | --bg-lo: $gray2, // Lighter background | ||
| 45 | |||
| 46 | --obj-hi: $gray3, | ||
| 47 | --obj: $gray4, | ||
| 48 | |||
| 49 | --fg-hi: $gray5, // Faint text | ||
| 50 | --fg: $gray6, // Text | ||
| 51 | --fg-lo: $gray7, // Strong text | ||
| 52 | |||
| 53 | --accent: ( | ||
| 54 | --h: 354, | ||
| 55 | --s: 84%, | ||
| 56 | --l: 55%, | ||
| 57 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | ||
| 58 | ), | 43 | ), |
| 44 | --colors: ( | ||
| 45 | --bg-hi: $gray0, // Darker background | ||
| 46 | --bg: $gray1, // Background | ||
| 47 | --bg-lo: $gray2, // Lighter background | ||
| 48 | |||
| 49 | --obj-hi: $gray3, | ||
| 50 | --obj: $gray4, | ||
| 51 | |||
| 52 | --fg-hi: $gray5, // Faint text | ||
| 53 | --fg: $gray6, // Text | ||
| 54 | --fg-lo: $gray7, // Strong text | ||
| 59 | 55 | ||
| 60 | --focus-ring: var(--colors--fg-lo), | 56 | --obj-shadow: transparent, |
| 61 | 57 | ||
| 62 | --select: ( | 58 | --accent: ( |
| 63 | --bg: rgba($gray7, .996), | 59 | --h: 354, |
| 64 | --img-bg: rgba($gray7, .5), | 60 | --s: 84%, |
| 65 | --fg: $gray0, | 61 | --l: 55%, |
| 66 | ), | 62 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), |
| 63 | ), | ||
| 64 | |||
| 65 | --focus-ring: var(--colors--fg-lo), | ||
| 67 | 66 | ||
| 68 | --link: ( | 67 | --select: ( |
| 69 | --idle: var(--colors--fg-lo), | 68 | --bg: rgba($gray7, .996), |
| 70 | --colored: ( | 69 | --img-bg: rgba($gray7, .5), |
| 71 | --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), // | 70 | --fg: var(--colors--bg-hi), |
| 72 | --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // | 71 | ), |
| 73 | ) | 72 | |
| 73 | --link: ( | ||
| 74 | --idle: var(--colors--fg-lo), | ||
| 75 | --colored: ( | ||
| 76 | --idle: hsl(210, 90%, 72%), //hsl(var(--colors--accent--h), 100%, 66%), // | ||
| 77 | --visited: hsl(270, 60%, 75%), //hsl(var(--colors--accent--h), 50%, 66%), // | ||
| 78 | ) | ||
| 79 | ), | ||
| 80 | ) | ||
| 81 | )); | ||
| 82 | } | ||
| 83 | |||
| 84 | @include iro-execute { | ||
| 85 | $gray0: hsl(220, 7%, 100%); | ||
| 86 | $gray1: hsl(220, 7%, 97%); | ||
| 87 | $gray2: hsl(220, 7%, 88%); | ||
| 88 | $gray3: hsl(220, 7%, 83%); | ||
| 89 | $gray4: hsl(220, 7%, 68%); | ||
| 90 | $gray5: hsl(220, 7%, 40%); | ||
| 91 | $gray6: hsl(220, 7%, 16%); | ||
| 92 | $gray7: hsl(220, 7%, 0%); | ||
| 93 | |||
| 94 | @include store(( | ||
| 95 | --colors: ( | ||
| 96 | --bg-hi: $gray0, // Darker background | ||
| 97 | --bg: $gray1, // Background | ||
| 98 | --bg-lo: $gray2, // Lighter background | ||
| 99 | |||
| 100 | --obj-hi: $gray3, | ||
| 101 | --obj: $gray4, | ||
| 102 | |||
| 103 | --fg-hi: $gray5, // Faint text | ||
| 104 | --fg: $gray6, // Text | ||
| 105 | --fg-lo: $gray7, // Strong text | ||
| 106 | |||
| 107 | --obj-shadow: rgba(#000, .05), | ||
| 108 | |||
| 109 | --accent: ( | ||
| 110 | --h: 354, | ||
| 111 | --s: 74%, | ||
| 112 | --l: 48%, | ||
| 113 | --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), | ||
| 114 | ), | ||
| 115 | |||
| 116 | --select: ( | ||
| 117 | --bg: rgba($gray7, .996), | ||
| 118 | --img-bg: rgba($gray7, .5), | ||
| 119 | ), | ||
| 120 | |||
| 121 | --link: ( | ||
| 122 | --colored: ( | ||
| 123 | --idle: hsl(210, 80%, 45%), //hsl(var(--colors--accent--h), 100%, 66%), // | ||
| 124 | --visited: hsl(270, 40%, 45%), //hsl(var(--colors--accent--h), 50%, 66%), // | ||
| 125 | ) | ||
| 126 | ), | ||
| 74 | ), | 127 | ), |
| 75 | ) | 128 | ), 'light'); |
| 76 | )); | 129 | } |
| 77 | 130 | ||
| 78 | @each $breakpoint in map-keys($breakpoints) { | 131 | @each $breakpoint in map-keys($breakpoints) { |
| 79 | @include media('<=#{$breakpoint}') { | 132 | @include media('<=#{$breakpoint}') { |