1  
  2  /* Globals */
  3  
  4  :root {
  5      --sidebar-width: 300px;
  6      --page-padding: 15px;
  7      --content-max-width: 750px;
  8      --menu-bar-height: 50px;
  9  }
 10  
 11  /* Themes */
 12  
 13  .ayu {
 14      --bg: hsl(210, 25%, 8%);
 15      --fg: #c5c5c5;
 16  
 17      --sidebar-bg: #14191f;
 18      --sidebar-fg: #c8c9db;
 19      --sidebar-non-existant: #5c6773;
 20      --sidebar-active: #ffb454;
 21      --sidebar-spacer: #2d334f;
 22  
 23      --scrollbar: var(--sidebar-fg);
 24  
 25      --icons: #737480;
 26      --icons-hover: #b7b9cc;
 27  
 28      --links: #0096cf;
 29  
 30      --inline-code-color: #ffb454;
 31  
 32      --theme-popup-bg: #14191f;
 33      --theme-popup-border: #5c6773;
 34      --theme-hover: #191f26;
 35  
 36      --quote-bg: hsl(226, 15%, 17%);
 37      --quote-border: hsl(226, 15%, 22%);
 38  
 39      --table-border-color: hsl(210, 25%, 13%);
 40      --table-header-bg: hsl(210, 25%, 28%);
 41      --table-alternate-bg: hsl(210, 25%, 11%);
 42  
 43      --searchbar-border-color: #848484;
 44      --searchbar-bg: #424242;
 45      --searchbar-fg: #fff;
 46      --searchbar-shadow-color: #d4c89f;
 47      --searchresults-header-fg: #666;
 48      --searchresults-border-color: #888;
 49      --searchresults-li-bg: #252932;
 50      --search-mark-bg: #e3b171;
 51  
 52      --font: "Open Sans"
 53  }
 54  
 55  .coal {
 56      --bg: hsl(200, 7%, 8%);
 57      --fg: #98a3ad;
 58  
 59      --sidebar-bg: #292c2f;
 60      --sidebar-fg: #a1adb8;
 61      --sidebar-non-existant: #505254;
 62      --sidebar-active: #3473ad;
 63      --sidebar-spacer: #393939;
 64  
 65      --scrollbar: var(--sidebar-fg);
 66  
 67      --icons: #43484d;
 68      --icons-hover: #b3c0cc;
 69  
 70      --links: #2b79a2;
 71  
 72      --inline-code-color: #c5c8c6;;
 73  
 74      --theme-popup-bg: #141617;
 75      --theme-popup-border: #43484d;
 76      --theme-hover: #1f2124;
 77  
 78      --quote-bg: hsl(234, 21%, 18%);
 79      --quote-border: hsl(234, 21%, 23%);
 80  
 81      --table-border-color: hsl(200, 7%, 13%);
 82      --table-header-bg: hsl(200, 7%, 28%);
 83      --table-alternate-bg: hsl(200, 7%, 11%);
 84  
 85      --searchbar-border-color: #aaa;
 86      --searchbar-bg: #b7b7b7;
 87      --searchbar-fg: #000;
 88      --searchbar-shadow-color: #aaa;
 89      --searchresults-header-fg: #666;
 90      --searchresults-border-color: #98a3ad;
 91      --searchresults-li-bg: #2b2b2f;
 92      --search-mark-bg: #355c7d;
 93  
 94      --font: "Open Sans"
 95  }
 96  
 97  .light {
 98      --bg: hsl(0, 0%, 100%);
 99      --fg: #333333;
100  
101      --sidebar-bg: #fafafa;
102      --sidebar-fg: #364149;
103      --sidebar-non-existant: #aaaaaa;
104      --sidebar-active: #008cff;
105      --sidebar-spacer: #f4f4f4;
106  
107      --scrollbar: #cccccc;
108  
109      --icons: #cccccc;
110      --icons-hover: #333333;
111  
112      --links: #4183c4;
113  
114      --inline-code-color: #6e6b5e;
115  
116      --theme-popup-bg: #fafafa;
117      --theme-popup-border: #cccccc;
118      --theme-hover: #e6e6e6;
119  
120      --quote-bg: hsl(197, 37%, 96%);
121      --quote-border: hsl(197, 37%, 91%);
122  
123      --table-border-color: hsl(0, 0%, 95%);
124      --table-header-bg: hsl(0, 0%, 80%);
125      --table-alternate-bg: hsl(0, 0%, 97%);
126  
127      --searchbar-border-color: #aaa;
128      --searchbar-bg: #fafafa;
129      --searchbar-fg: #000;
130      --searchbar-shadow-color: #aaa;
131      --searchresults-header-fg: #666;
132      --searchresults-border-color: #888;
133      --searchresults-li-bg: #e4f2fe;
134      --search-mark-bg: #a2cff5;
135  
136      --font: "Open Sans"
137  }
138  
139  .navy {
140      --bg: hsl(226, 23%, 11%);
141      --fg: #bcbdd0;
142  
143      --sidebar-bg: #282d3f;
144      --sidebar-fg: #c8c9db;
145      --sidebar-non-existant: #505274;
146      --sidebar-active: #2b79a2;
147      --sidebar-spacer: #2d334f;
148  
149      --scrollbar: var(--sidebar-fg);
150  
151      --icons: #737480;
152      --icons-hover: #b7b9cc;
153  
154      --links: #2b79a2;
155  
156      --inline-code-color: #c5c8c6;;
157  
158      --theme-popup-bg: #161923;
159      --theme-popup-border: #737480;
160      --theme-hover: #282e40;
161  
162      --quote-bg: hsl(226, 15%, 17%);
163      --quote-border: hsl(226, 15%, 22%);
164  
165      --table-border-color: hsl(226, 23%, 16%);
166      --table-header-bg: hsl(226, 23%, 31%);
167      --table-alternate-bg: hsl(226, 23%, 14%);
168  
169      --searchbar-border-color: #aaa;
170      --searchbar-bg: #aeaec6;
171      --searchbar-fg: #000;
172      --searchbar-shadow-color: #aaa;
173      --searchresults-header-fg: #5f5f71;
174      --searchresults-border-color: #5c5c68;
175      --searchresults-li-bg: #242430;
176      --search-mark-bg: #a2cff5;
177  
178      --font: "Open Sans"
179  }
180  
181  .rust {
182      --bg: hsl(60, 9%, 87%);
183      --fg: #262625;
184  
185      --sidebar-bg: #3b2e2a;
186      --sidebar-fg: #c8c9db;
187      --sidebar-non-existant: #505254;
188      --sidebar-active: #e69f67;
189      --sidebar-spacer: #45373a;
190  
191      --scrollbar: var(--sidebar-fg);
192  
193      --icons: #737480;
194      --icons-hover: #262625;
195  
196      --links: #2b79a2;
197  
198      --inline-code-color: #6e6b5e;
199  
200      --theme-popup-bg: #e1e1db;
201      --theme-popup-border: #b38f6b;
202      --theme-hover: #99908a;
203  
204      --quote-bg: hsl(60, 5%, 75%);
205      --quote-border: hsl(60, 5%, 70%);
206  
207      --table-border-color: hsl(60, 9%, 82%);
208      --table-header-bg: #b3a497;
209      --table-alternate-bg: hsl(60, 9%, 84%);
210  
211      --searchbar-border-color: #aaa;
212      --searchbar-bg: #fafafa;
213      --searchbar-fg: #000;
214      --searchbar-shadow-color: #aaa;
215      --searchresults-header-fg: #666;
216      --searchresults-border-color: #888;
217      --searchresults-li-bg: #dec2a2;
218      --search-mark-bg: #e69f67;
219  
220      --font: "Open Sans"
221  }
222  
223  .papier {
224      --bg: hsl(45, 46%, 85%);
225      --fg: #262625;
226  
227      --sidebar-bg: #3b2e2a;
228      --sidebar-fg: #c8c9db;
229      --sidebar-non-existant: #505254;
230      --sidebar-active: #e69f67;
231      --sidebar-spacer: #45373a;
232  
233      --scrollbar: var(--sidebar-fg);
234  
235      --icons: #737480;
236      --icons-hover: #262625;
237  
238      --links: #434341;
239  
240      --inline-code-color: #6e6b5e;
241  
242      --theme-popup-bg: #e1e1db;
243      --theme-popup-border: #b38f6b;
244      --theme-hover: #99908a;
245  
246      --quote-bg: hsl(60, 5%, 75%);
247      --quote-border: hsl(60, 5%, 70%);
248  
249      --table-border-color: hsl(60, 9%, 82%);
250      --table-header-bg: #b3a497;
251      --table-alternate-bg: hsl(60, 9%, 84%);
252  
253      --searchbar-border-color: #aaa;
254      --searchbar-bg: #fafafa;
255      --searchbar-fg: #000;
256      --searchbar-shadow-color: #aaa;
257      --searchresults-header-fg: #666;
258      --searchresults-border-color: #888;
259      --searchresults-li-bg: #dec2a2;
260      --search-mark-bg: #e69f67;
261  
262      --font: "Garamond Regular";
263      --content-font-size: 1.5em
264  }
265  
266  @media (prefers-color-scheme: dark) {
267      .light.no-js {
268          --bg: hsl(200, 7%, 8%);
269          --fg: #98a3ad;
270  
271          --sidebar-bg: #292c2f;
272          --sidebar-fg: #a1adb8;
273          --sidebar-non-existant: #505254;
274          --sidebar-active: #3473ad;
275          --sidebar-spacer: #393939;
276  
277          --scrollbar: var(--sidebar-fg);
278  
279          --icons: #43484d;
280          --icons-hover: #b3c0cc;
281  
282          --links: #2b79a2;
283  
284          --inline-code-color: #c5c8c6;;
285  
286          --theme-popup-bg: #141617;
287          --theme-popup-border: #43484d;
288          --theme-hover: #1f2124;
289  
290          --quote-bg: hsl(234, 21%, 18%);
291          --quote-border: hsl(234, 21%, 23%);
292  
293          --table-border-color: hsl(200, 7%, 13%);
294          --table-header-bg: hsl(200, 7%, 28%);
295          --table-alternate-bg: hsl(200, 7%, 11%);
296  
297          --searchbar-border-color: #aaa;
298          --searchbar-bg: #b7b7b7;
299          --searchbar-fg: #000;
300          --searchbar-shadow-color: #aaa;
301          --searchresults-header-fg: #666;
302          --searchresults-border-color: #98a3ad;
303          --searchresults-li-bg: #2b2b2f;
304          --search-mark-bg: #355c7d;
305      }
306  }