diff options
Diffstat (limited to 'assets/css/_vars.scss')
-rw-r--r-- | assets/css/_vars.scss | 196 |
1 files changed, 0 insertions, 196 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss deleted file mode 100644 index ad9e16f..0000000 --- a/assets/css/_vars.scss +++ /dev/null | |||
@@ -1,196 +0,0 @@ | |||
1 | $breakpoints: ( | ||
2 | lg: 1340px, | ||
3 | md: 900px, | ||
4 | sm: 600px, | ||
5 | xs: 400px, | ||
6 | ); | ||
7 | |||
8 | $unit-intervals: ( | ||
9 | 'px': 1, | ||
10 | 'em': .01, | ||
11 | 'rem': .01, | ||
12 | '': 0 | ||
13 | ); | ||
14 | |||
15 | $responsive-mod-scale: ( | ||
16 | xs: (iro-px-to-rem(14px), 1.28), | ||
17 | md: (iro-px-to-rem(14px), 1.49) | ||
18 | ); | ||
19 | |||
20 | $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; | ||
21 | $font-fam--large: 'Garet', $font-fam--text; | ||
22 | $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; | ||
23 | $font-size: 16px; | ||
24 | $line-height: 1.7; | ||
25 | $content--width: 44rem; | ||
26 | |||
27 | @include iro-execute { | ||
28 | $gray0: hsl(220, 5%, 4%); | ||
29 | $gray1: hsl(220, 5%, 10%); | ||
30 | $gray2: hsl(220, 5%, 16%); | ||
31 | $gray3: hsl(220, 5%, 23%); | ||
32 | $gray4: hsl(220, 5%, 38%); | ||
33 | $gray5: hsl(220, 5%, 60%); | ||
34 | $gray6: hsl(220, 5%, 80%); | ||
35 | $gray7: hsl(220, 5%, 100%); | ||
36 | |||
37 | @include store(( | ||
38 | --dims: ( | ||
39 | --indent: 2rem, | ||
40 | ), | ||
41 | --colors: ( | ||
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 | --strong: hsl( | ||
59 | var(--colors--accent--h), | ||
60 | calc(var(--colors--accent--s) * 1.2), | ||
61 | calc(var(--colors--accent--l) * 1.2) | ||
62 | ), | ||
63 | --faint: hsla( | ||
64 | var(--colors--accent--h), | ||
65 | var(--colors--accent--s), | ||
66 | var(--colors--accent--l), | ||
67 | .1 | ||
68 | ), | ||
69 | ), | ||
70 | |||
71 | --focus-ring: var(--colors--fg-lo), | ||
72 | |||
73 | --select: ( | ||
74 | --bg: rgba($gray7, .996), | ||
75 | --img-bg: rgba($gray7, .5), | ||
76 | --fg: var(--colors--bg-hi), | ||
77 | --inverted: ( | ||
78 | --bg: rgba($gray0, .996), | ||
79 | --fg: var(--colors--fg-lo), | ||
80 | ) | ||
81 | ), | ||
82 | |||
83 | --link: ( | ||
84 | --default: var(--colors--fg-lo), | ||
85 | --colored: ( | ||
86 | --idle-h: 220, | ||
87 | --idle-s: 100%, | ||
88 | --idle-l: 80%, | ||
89 | --idle: hsl( | ||
90 | var(--colors--link--colored--idle-h), | ||
91 | var(--colors--link--colored--idle-s), | ||
92 | var(--colors--link--colored--idle-l), | ||
93 | ), //hsl(var(--colors--accent--h), 100%, 66%), // | ||
94 | --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // | ||
95 | ) | ||
96 | ), | ||
97 | |||
98 | --code: ( | ||
99 | --fg: var(--colors--fg-hi), | ||
100 | ), | ||
101 | ) | ||
102 | )); | ||
103 | } | ||
104 | |||
105 | @include iro-execute { | ||
106 | $gray0: hsl(220, 5%, 100%); | ||
107 | $gray1: hsl(220, 5%, 95%); | ||
108 | $gray2: hsl(220, 5%, 88%); | ||
109 | $gray3: hsl(220, 5%, 83%); | ||
110 | $gray4: hsl(220, 5%, 68%); | ||
111 | $gray5: hsl(220, 5%, 44%); | ||
112 | $gray6: hsl(220, 5%, 16%); | ||
113 | $gray7: hsl(220, 5%, 0%); | ||
114 | |||
115 | @include store(( | ||
116 | --colors: ( | ||
117 | --bg-hi: $gray0, // Darker background | ||
118 | --bg: $gray1, // Background | ||
119 | --bg-lo: $gray2, // Lighter background | ||
120 | |||
121 | --obj-hi: $gray3, | ||
122 | --obj: $gray4, | ||
123 | |||
124 | --fg-hi: $gray5, // Faint text | ||
125 | --fg: $gray6, // Text | ||
126 | --fg-lo: $gray7, // Strong text | ||
127 | |||
128 | --accent: ( | ||
129 | --h: 354, | ||
130 | --s: 74%, | ||
131 | --l: 48%, | ||
132 | --strong: hsl( | ||
133 | var(--colors--accent--h), | ||
134 | var(--colors--accent--s), | ||
135 | calc(var(--colors--accent--l) * .8) | ||
136 | ), | ||
137 | ), | ||
138 | |||
139 | --select: ( | ||
140 | --bg: rgba($gray7, .996), | ||
141 | --img-bg: rgba($gray7, .5), | ||
142 | --inverted: ( | ||
143 | --bg: rgba($gray0, .996), | ||
144 | ), | ||
145 | ), | ||
146 | |||
147 | --link: ( | ||
148 | --colored: ( | ||
149 | --idle-h: 220, | ||
150 | --idle-s: 60%, | ||
151 | --idle-l: 40%, | ||
152 | --idle: hsl( | ||
153 | var(--colors--link--colored--idle-h), | ||
154 | var(--colors--link--colored--idle-s), | ||
155 | var(--colors--link--colored--idle-l), | ||
156 | ), //hsl(var(--colors--accent--h), 100%, 66%), // | ||
157 | --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // | ||
158 | ) | ||
159 | ), | ||
160 | ), | ||
161 | ), 'light'); | ||
162 | } | ||
163 | |||
164 | @include iro-execute { | ||
165 | $white: #fff; | ||
166 | $black: #000; | ||
167 | |||
168 | @include store(( | ||
169 | --colors: ( | ||
170 | --bg-hi: $white, // Darker background | ||
171 | --bg: $white, // Background | ||
172 | --bg-lo: $black, // Lighter background | ||
173 | |||
174 | --obj-hi: $black, | ||
175 | --obj: $black, | ||
176 | |||
177 | --fg-hi: $black, // Faint text | ||
178 | --fg: $black, // Text | ||
179 | --fg-lo: $black, // Strong text | ||
180 | ), | ||
181 | ), 'print'); | ||
182 | } | ||
183 | |||
184 | @each $breakpoint in map-keys($breakpoints) { | ||
185 | @include media('<=#{$breakpoint}') { | ||
186 | @include store(( | ||
187 | --colors: () | ||
188 | ), $breakpoint); | ||
189 | } | ||
190 | } | ||
191 | |||
192 | @include store(( | ||
193 | --dims: ( | ||
194 | --indent: 1.5rem, | ||
195 | ), | ||
196 | ), 'sm'); | ||