1@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Ubuntu+Mono&display=swap");
2
3:root {
4  /* Colours */
5  --black: #2a2020;
6  --hard-black: #000;
7  --pink: #ffaff3;
8  --hot-pink: #d900b8;
9  --white: #fff;
10  --pink-white: #fff8fe;
11  --mid-grey: #dfe2e5;
12  --light-grey: #f5f5f5;
13  --boi-blue: #a6f0fc;
14
15  /* Derived colours */
16  --text: var(--black);
17  --background: var(--white);
18  --accented-background: var(--pink-white);
19  --code-border: var(--pink);
20  --code-background: var(--light-grey);
21  --table-border: var(--mid-grey);
22  --table-background: var(--pink-white);
23  --links: var(--hot-pink);
24  --accent: var(--pink);
25
26  /* Sizes */
27  --content-width: 680px;
28  --header-height: 60px;
29  --hash-offset: calc(var(--header-height) * 1.67);
30  --sidebar-width: 240px;
31  --gap: 24px;
32  --small-gap: calc(var(--gap) / 2);
33  --tiny-gap: calc(var(--small-gap) / 2);
34  --large-gap: calc(var(--gap) * 2);
35  --sidebar-toggle-size: 33px;
36
37  /* etc */
38  --shadow:
39    0 0 0 1px rgba(50, 50, 93, .075),
40    0 0 1px #e9ecef,
41    0 2px 4px -2px rgba(138, 141, 151, .6);
42  --nav-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
43}
44
45* {
46  box-sizing: border-box;
47}
48
49body,
50html {
51  padding: 0;
52  margin: 0;
53  font-family: "Karla", sans-serif;
54  font-size: 17px;
55  line-height: 1.4;
56  position: relative;
57  min-height: 100vh;
58  word-break: break-word;
59}
60
61html {
62  /* This is necessary so hash targets appear below the fixed header */
63  scroll-padding-top: var(--hash-offset);
64}
65
66a,
67a:visited {
68  color: var(--links);
69  text-decoration: none;
70}
71
72a:hover {
73  text-decoration: underline;
74}
75
76button,
77select {
78  background: transparent;
79  border: 0 none;
80  cursor: pointer;
81  font-family: inherit;
82  font-size: 100%;
83  line-height: 1.15;
84  margin: 0;
85  text-transform: none;
86}
87
88button::-moz-focus-inner {
89  border-style: none;
90  padding: 0;
91}
92
93button:-moz-focusring {
94  outline: 1px dotted ButtonText;
95}
96
97button {
98  -webkit-appearance: button;
99  line-height: 1;
100  margin: 0;
101  overflow: visible;
102  padding: 0;
103}
104
105button:active,
106select:active {
107  outline: 0 none;
108}
109
110li {
111  margin-bottom: 4px;
112}
113
114p {
115  margin: var(--small-gap) 0;
116}
117
118.rendered-markdown h1,
119.rendered-markdown h2,
120.rendered-markdown h3,
121.rendered-markdown h4,
122.rendered-markdown h5 {
123  font-size: 1.3rem;
124}
125
126/* Code */
127
128pre,
129code {
130  font-family: "Ubuntu Mono", monospace;
131  line-height: 1.2;
132  background-color: var(--code-background);
133}
134
135pre {
136  margin: var(--gap) 0;
137  border-radius: 1px;
138  overflow: auto;
139  box-shadow: var(--shadow);
140}
141
142pre > code,
143code.hljs {
144  padding: var(--small-gap) var(--gap);
145  background: transparent;
146}
147
148p code {
149  margin: 0 2px;
150  border-radius: 3px;
151  padding: 0 0.2em;
152  color: var(--inline-code);
153}
154
155/* Page layout */
156
157.page {
158  display: flex;
159}
160
161.content {
162  margin-left: var(--sidebar-width);
163  padding: calc(var(--header-height) + var(--gap)) var(--gap) 0 var(--gap);
164  width: calc(100% - var(--sidebar-width));
165  max-width: var(--content-width);
166}
167
168/* Page header */
169
170.page-header {
171  box-shadow: var(--nav-shadow);
172  height: var(--header-height);
173  color: black;
174  color: var(--hard-black);
175  background-color: var(--pink);
176  display: flex;
177  padding: var(--small-gap) var(--gap);
178  position: fixed;
179  left: 0;
180  right: 0;
181  top: 0;
182  z-index: 300;
183}
184
185.page-header h2 {
186  align-items: baseline;
187  display: flex;
188  margin: 0;
189  max-width: 100%;
190}
191
192.page-header a,
193.page-header a:visited {
194  color: black;
195  color: var(--hard-black);
196  overflow: hidden;
197  text-overflow: ellipsis;
198  white-space: nowrap;
199}
200
201.sidebar-toggle {
202  display: none;
203  font-size: var(--sidebar-toggle-size);
204  opacity: 0;
205  transition: opacity 1s ease;
206}
207
208.page-header .sidebar-toggle {
209  color: white;
210  color: var(--white);
211  margin: 0 var(--small-gap) 0 0;
212}
213
214/* Version selector */
215
216#project-version {
217  --half-small-gap: calc(var(--small-gap) / 2);
218  --icon-size: .75em;
219  flex-shrink: 0;
220  font-size: .9rem;
221  font-weight: normal;
222  margin-left: var(--half-small-gap);
223}
224
225#project-version > span {
226  padding-left: var(--half-small-gap);
227}
228
229#project-version form {
230  align-items: center;
231  display: inline-flex;
232  justify-content: flex-end;
233}
234
235#project-version select {
236  appearance: none;
237  -webkit-appearance: none;
238  padding: .6rem calc(1.3 * var(--icon-size)) .6rem var(--half-small-gap);
239  position: relative;
240  z-index: 1;
241}
242
243#project-version option {
244  background-color: var(--code-background);
245}
246
247#project-version .icon {
248  font-size: var(--icon-size);
249  margin-left: calc(-1.65 * var(--icon-size));
250}
251
252/* Module doc */
253
254.module-name > a,
255.module-member-kind > a {
256  color: inherit;
257}
258
259.module-name > a:hover,
260.module-member-kind > a:hover {
261  text-decoration: none;
262}
263
264.module-name > .icon-gleam-chasse,
265.module-member-kind > .icon-gleam-chasse,
266.module-member-kind > .icon-gleam-chasse-2 {
267  color: var(--pink);
268  display: block;
269  font-size: 1rem;
270  margin: var(--small-gap) 0 0;
271}
272
273.module-name {
274  color: var(--hard-black);
275  margin: 0 0 var(--gap);
276  font-weight: 700;
277}
278
279/* Sidebar */
280
281.sidebar {
282  background-color: var(--background);
283  font-size: .95rem;
284  max-height: calc(100vh - var(--header-height));
285  overflow-y: auto;
286  overscroll-behavior: contain;
287  padding-top: var(--gap);
288  padding-bottom: calc(3 * var(--gap));
289  padding-left: var(--gap);
290  position: fixed;
291  top: var(--header-height);
292  transition: transform .5s ease;
293  width: var(--sidebar-width);
294  z-index: 100;
295}
296
297.sidebar h2 {
298  margin: 0;
299}
300
301.sidebar ul {
302  list-style: none;
303  margin: var(--small-gap) 0;
304  padding: 0;
305}
306
307.sidebar li {
308  line-height: 1.2;
309  margin-bottom: 4px;
310}
311
312.sidebar .sidebar-toggle {
313  color: var(--pink);
314  font-size: calc(.8 * var(--sidebar-toggle-size));
315}
316
317body.drawer-closed .label-open,
318body.drawer-open .label-closed {
319  display: none;
320}
321
322.display-controls {
323  display: flex;
324  flex-wrap: wrap;
325  margin-top: var(--small-gap);
326  padding-right: var(--gap);
327}
328
329.display-controls .control {
330  margin: .5rem 0;
331}
332
333.display-controls .control:not(:first-child) {
334  margin-left: 1rem;
335}
336
337.toggle {
338  align-items: center;
339  display: flex;
340  font-size: .96rem;
341}
342
343.toggle-0 .label:not(.label-0),
344.toggle-1 .label:not(.label-1) {
345  display: none;
346}
347
348.label {
349  display: flex;
350}
351
352.label .icon {
353  margin: 0 .28rem;
354}
355
356/* Module members (types, functions) */
357
358.module-members {
359  margin-top: var(--large-gap);
360}
361
362.module-member-kind {
363  font-size: 2rem;
364  color: var(--text);
365}
366
367.member {
368  margin: var(--large-gap) 0;
369  padding-bottom: var(--gap);
370}
371
372.member-name {
373  display: flex;
374  align-items: center;
375  justify-content: space-between;
376  border-left: 4px solid var(--accent);
377  padding: var(--small-gap) var(--gap);
378  background-color: var(--accented-background);
379}
380
381.member-name h2 {
382  display: flex;
383  font-size: 1.5rem;
384  margin: 0;
385}
386
387.member-name h2 a {
388  color: var(--text);
389}
390
391.member-source {
392  align-self: baseline;
393  flex-shrink: 0;
394  line-height: calc(1.4 * 1.5rem);
395  margin: 0 0 0 var(--small-gap);
396}
397
398/* Custom type constructors */
399
400.constructor-list {
401  list-style: none;
402  padding: 0;
403}
404
405.constructor-row {
406  align-items: center;
407  display: flex;
408}
409
410.constructor-item {
411  margin-bottom: var(--small-gap);
412}
413
414.constructor-argument-item {
415  display: flex;
416}
417
418.constructor-argument-label {
419  flex-shrink: 0;
420}
421
422.constructor-argument-doc {
423  margin-left: var(--gap);
424}
425
426.constructor-argument-list {
427  margin-bottom: var(--small-gap);
428}
429
430.constructor-item-docs {
431  margin-left: var(--large-gap);
432  margin-bottom: var(--gap);
433}
434
435.constructor-item .icon {
436  flex-shrink: 0;
437  font-size: .7rem;
438  margin: 0 .88rem;
439}
440
441.constructor-name {
442  box-shadow: unset;
443  margin: 0;
444}
445
446.constructor-name > code {
447  padding: var(--small-gap);
448}
449
450/* Tables */
451
452table {
453  border-spacing: 0;
454  border-collapse: collapse;
455}
456
457table td,
458table th {
459  padding: 6px 13px;
460  border: 1px solid var(--table-border);
461}
462
463table tr:nth-child(2n) {
464  background-color: var(--table-background);
465}
466
467/* Footer */
468
469.pride {
470  width: 100%;
471  display: none;
472  flex-direction: row;
473  position: absolute;
474  bottom: 0;
475  z-index: 100;
476}
477
478.show-pride .pride {
479  display: flex;
480}
481
482.show-pride .sidebar {
483  margin-bottom: var(--gap);
484}
485
486.pride div {
487  flex: 1;
488  text-align: center;
489  padding: var(--tiny-gap);
490}
491
492.pride .white {
493  background-color: var(--white);
494}
495.pride .pink {
496  background-color: var(--pink);
497}
498.pride .blue {
499  background-color: var(--boi-blue);
500}
501
502.pride-button {
503  position: absolute;
504  right: 2px;
505  bottom: 2px;
506  opacity: .2;
507  font-size: .9rem;
508}
509
510.pride-button {
511  text-decoration: none;
512  cursor: default;
513}
514
515/* Icons */
516
517.svg-lib {
518  height: 0;
519  overflow: hidden;
520  position: absolute;
521  width: 0;
522}
523
524.icon {
525  display: inline-block;
526  fill: currentColor;
527  height: 1em;
528  stroke: currentColor;
529  stroke-width: 0;
530  width: 1em;
531}
532
533.icon-gleam-chasse {
534  width: 8.182em;
535}
536
537.icon-gleam-chasse-2 {
538  width: 4.909em;
539}
540
541/* Pre-Wrap Option */
542
543body.prewrap-on code,
544body.prewrap-on pre {
545  white-space: pre-wrap;
546}
547
548/* Dark Theme Option */
549
550body.theme-dark {
551  /* Colour palette adapted from:
552   * https://github.com/dustypomerleau/yarra-valley
553   */
554
555  --argument-atom: #c651e5;
556  --class-module: #ff89b5;
557  --comment: #7e818b;
558  --escape: #7cdf89;
559  --function-call: #abb8c0;
560  --function-definition: #8af899;
561  --interpolation-regex: #ee37aa;
562  --keyword-operator: #ff9d35;
563  --number-boolean: #f14360;
564  --object: #99c2eb;
565  --punctuation: #4ce7ff;
566  --string: #aecc00;
567
568  --inline-code: #ff9d35;
569
570  --bg: #292d3e;
571  --bg-tint-1: #3e4251; --bg-tint-2: #535664; --bg-tint-3: #696c77; --bg-tint-4: #7e818b;
572  --bg-shade-1: #242837; --bg-shade-2: #202431; --bg-shade-3: #1c1f2b;
573  --bg-mono-1: #33384d; --bg-mono-2: #3d435d; --bg-mono-3: #474e6c; --bg-mono-4: #51597b;
574
575  --fg: #cac0a9;
576  --fg-tint-1: #fdf2d8; --fg-tint-2: #fdf3dc; --fg-tint-3: #fdf5e0;
577  --fg-shade-1: #e3d8be; --fg-shade-2: #cac0a9; --fg-shade-3: #b1a894; --fg-shade-4: #97907f;
578
579  --orange-shade-1: #e58d2f; --orange-shade-2: #cc7d2a; --orange-shade-3: #b26d25;
580
581  --taupe-mono-1: #fdf1d4; --taupe-mono-2: #fce9bc; --taupe-mono-3: #fbe1a3;
582
583  /* Theme Overrides */
584
585  --accent: var(--pink);
586  --accented-background: var(--bg-shade-1);
587  --background: var(--bg);
588  --code-background: var(--bg-shade-2);
589  --table-background: var(--bg-mono-1);
590  --hard-black: var(--taupe-mono-1);
591  --links: var(--pink);
592  --text: var(--taupe-mono-1);
593
594  --shadow:
595    0 0 0 1px rgba(50, 50, 93, .075),
596    0 0 1px var(--fg-shade-3),
597    0 2px 4px -2px rgba(138, 141, 151, .2);
598  --nav-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
599}
600
601body.theme-dark {
602  background-color: var(--bg);
603  color: var(--fg-shade-1);
604}
605
606body.theme-dark .page-header {
607  background-color: var(--bg-mono-1);
608}
609
610body.theme-dark .page-header h2 {
611  color: var(--fg-shade-1);
612}
613
614
615body.theme-dark .page-header a,
616body.theme-dark .page-header a:visited {
617  color: var(--pink);
618}
619
620body.theme-dark .page-header .sidebar-toggle {
621  color: var(--fg-shade-1);
622}
623
624body.theme-dark #project-version select,
625body.theme-dark .control {
626  color: var(--fg-shade-1);
627}
628
629body.theme-dark .module-name {
630  color: var(--taupe-mono-1);
631}
632
633body.theme-dark .pride {
634  color: var(--bg-shade-3);
635}
636
637body.theme-dark .pride .white {
638  background-color: var(--fg-shade-1);
639}
640
641body.theme-dark .pride .pink {
642  background-color: var(--argument-atom);
643}
644
645body.theme-dark .pride .blue {
646  background-color: var(--punctuation);
647}
648
649/* Medium and larger displays */
650@media (min-width: 680px) {
651  #prewrap-toggle {
652    display: none;
653  }
654}
655
656/* Small displays */
657@media (max-width: 920px) {
658  .page-header {
659    padding-left: var(--small-gap);
660    padding-right: var(--small-gap);
661  }
662
663  .page-header h2 {
664    max-width: calc(100% - var(--sidebar-toggle-size) - var(--small-gap));
665  }
666
667  .content {
668    width: 100%;
669    max-width: unset;
670    margin-left: unset;
671  }
672
673  .sidebar {
674    box-shadow: var(--nav-shadow);
675    height: 100vh;
676    max-height: unset;
677    top: 0;
678    transform: translate(calc(-10px - var(--sidebar-width)));
679    z-index: 500;
680  }
681
682  body.drawer-open .sidebar {
683    transform: translate(0);
684  }
685
686  .sidebar-toggle {
687    display: block;
688    opacity: 1;
689  }
690
691  .sidebar .sidebar-toggle {
692    height: var(--sidebar-toggle-size);
693    position: absolute;
694    right: var(--small-gap);
695    top: var(--small-gap);
696    width: var(--sidebar-toggle-size);
697  }
698}
699