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}') { |