jon.recoil.org
A fork of mtelver's day10 project
1let css =
2 {|
3:root {
4 --max-width: 700px;
5 --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
6 "Helvetica Neue", Arial, sans-serif;
7 --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
8 --bg-color: #ffffff;
9 --text-color: #1a1a2e;
10 --text-muted: #6b7280;
11 --link-color: #0969da;
12 --link-hover: #0550ae;
13 --border-color: #e5e7eb;
14 --code-bg: #f6f8fa;
15 --code-border: #e5e7eb;
16 --header-bg: #ffffff;
17 --highlight-bg: rgba(9, 105, 218, 0.08);
18
19 /* x-ocaml interactive cells */
20 --xo-font-size: 0.875rem;
21 --xo-bg: var(--code-bg);
22 --xo-text: var(--text-color);
23 --xo-gutter-bg: var(--code-bg);
24 --xo-gutter-text: var(--text-muted);
25 --xo-gutter-border: var(--border-color);
26 --xo-stdout-bg: rgba(9, 105, 218, 0.06);
27 --xo-stdout-text: var(--link-color);
28 --xo-stderr-bg: rgba(218, 9, 9, 0.06);
29 --xo-stderr-text: #cf222e;
30 --xo-meta-bg: var(--code-bg);
31 --xo-meta-text: var(--text-muted);
32 --xo-tooltip-bg: var(--bg-color);
33 --xo-tooltip-text: var(--text-color);
34 --xo-tooltip-border: var(--border-color);
35 --xo-btn-bg: var(--code-bg);
36 --xo-btn-border: var(--border-color);
37 --xo-btn-text: var(--text-muted);
38 --xo-btn-hover-bg: var(--text-muted);
39 --xo-btn-hover-text: var(--bg-color);
40}
41
42@media (prefers-color-scheme: dark) {
43 :root {
44 --bg-color: #0d1117;
45 --text-color: #e6edf3;
46 --text-muted: #8b949e;
47 --link-color: #58a6ff;
48 --link-hover: #79c0ff;
49 --border-color: #30363d;
50 --code-bg: #161b22;
51 --code-border: #30363d;
52 --header-bg: #161b22;
53 --highlight-bg: rgba(88, 166, 255, 0.12);
54
55 /* x-ocaml interactive cells - dark overrides */
56 --xo-stdout-bg: rgba(88, 166, 255, 0.08);
57 --xo-stdout-text: #79c0ff;
58 --xo-stderr-bg: rgba(248, 81, 73, 0.08);
59 --xo-stderr-text: #f85149;
60 }
61}
62
63/* Reset */
64* {
65 box-sizing: border-box;
66 margin: 0;
67 padding: 0;
68}
69
70body {
71 font-family: var(--font-body);
72 font-size: 16px;
73 line-height: 1.7;
74 color: var(--text-color);
75 background: var(--bg-color);
76}
77
78a {
79 color: var(--link-color);
80 text-decoration: none;
81}
82
83a:hover {
84 color: var(--link-hover);
85 text-decoration: underline;
86}
87
88/* Header */
89.jon-shell-header {
90 display: flex;
91 align-items: center;
92 justify-content: space-between;
93 max-width: calc(var(--max-width) + 300px);
94 margin: 0 auto;
95 padding: 16px 20px;
96 font-size: 14px;
97}
98
99.jon-shell-header > a {
100 font-weight: 600;
101 color: var(--text-color);
102 text-decoration: none;
103}
104
105.jon-shell-header > a:hover {
106 color: var(--link-color);
107}
108
109.jon-shell-header nav {
110 display: flex;
111 gap: 20px;
112}
113
114.jon-shell-header nav a {
115 color: var(--text-muted);
116 text-decoration: none;
117}
118
119.jon-shell-header nav a:hover {
120 color: var(--link-color);
121}
122
123/* Main content */
124.jon-shell-main {
125 max-width: calc(var(--max-width) + 300px);
126 margin: 0 auto;
127 padding: 24px 20px 60px;
128 display: flex;
129 gap: 32px;
130}
131
132.jon-shell-main .odoc-content {
133 flex: 1;
134 min-width: 0;
135}
136
137/* Sidebar */
138.jon-shell-sidebar {
139 width: 260px;
140 flex-shrink: 0;
141 font-size: 0.85rem;
142 line-height: 1.5;
143 position: sticky;
144 top: 24px;
145 align-self: flex-start;
146 max-height: calc(100vh - 48px);
147 overflow-y: auto;
148}
149
150/* Collapse the top two wrapper levels so content aligns with header */
151.jon-shell-sidebar > ul > li > ul,
152.jon-shell-sidebar > ul > li > ul > li > ul {
153 padding-left: 0;
154 margin-left: 0;
155 border-left: none;
156}
157
158.jon-shell-sidebar ul ul {
159 padding-left: 12px;
160 margin-left: 4px;
161 border-left: 1px solid var(--border-color);
162}
163
164.jon-shell-sidebar li {
165 margin: 0;
166}
167
168.jon-shell-sidebar a,
169.jon-shell-sidebar .sidebar-label {
170 display: block;
171 padding: 2px 8px;
172 color: var(--text-muted);
173 text-decoration: none;
174 border-radius: 4px;
175}
176
177.jon-shell-sidebar a:hover {
178 color: var(--link-color);
179 background: var(--highlight-bg);
180 text-decoration: none;
181}
182
183.jon-shell-sidebar a.current_unit {
184 color: var(--link-color);
185 font-weight: 600;
186}
187
188/* Collapsible entries — small inline chevron before the link */
189.jon-shell-sidebar .sidebar-toggle {
190 display: inline-flex;
191 align-items: center;
192 justify-content: center;
193 width: 20px;
194 height: 20px;
195 cursor: pointer;
196 color: var(--text-muted);
197 opacity: 0.55;
198 font-size: 1em;
199 vertical-align: middle;
200 flex-shrink: 0;
201 transition: opacity 0.15s, transform 0.15s;
202 user-select: none;
203}
204
205.jon-shell-sidebar .sidebar-toggle:hover {
206 opacity: 0.8;
207}
208
209.jon-shell-sidebar .sidebar-toggle::before {
210 content: "\25B8";
211 display: block;
212 transition: transform 0.15s;
213}
214
215.jon-shell-sidebar li:not(.collapsed) > .sidebar-toggle::before {
216 transform: rotate(90deg);
217}
218
219.jon-shell-sidebar li.collapsed > ul {
220 display: none;
221}
222
223/* Items with children: put toggle and link on same line */
224.jon-shell-sidebar li:has(> .sidebar-toggle) {
225 display: flex;
226 flex-wrap: wrap;
227 align-items: baseline;
228}
229
230.jon-shell-sidebar li:has(> .sidebar-toggle) > a,
231.jon-shell-sidebar li:has(> .sidebar-toggle) > .sidebar-label {
232 flex: 1;
233 min-width: 0;
234}
235
236.jon-shell-sidebar li:has(> .sidebar-toggle) > ul {
237 flex-basis: 100%;
238}
239
240/* Items without children: indent to align with toggle items */
241.jon-shell-sidebar li:not(:has(> .sidebar-toggle)) > a,
242.jon-shell-sidebar li:not(:has(> .sidebar-toggle)) > .sidebar-label {
243 margin-left: 20px;
244}
245
246/* Ensure collapsed children are fully hidden including overflow */
247.jon-shell-sidebar li.collapsed > ul {
248 display: none !important;
249}
250
251/* Hide the bare "index" text breadcrumb from odoc sidebar */
252.jon-shell-sidebar > ul > li:last-child:not(:has(a)) {
253 display: none;
254}
255
256/* Hide the top-level wrapper entries (e.g. "OCaml package documentation" >
257 "reference") — they waste space and add confusing nesting. Show their
258 children directly. */
259.jon-shell-sidebar > ul > li > .sidebar-toggle,
260.jon-shell-sidebar > ul > li > a,
261.jon-shell-sidebar > ul > li > .sidebar-label,
262.jon-shell-sidebar > ul > li > ul > li > .sidebar-toggle,
263.jon-shell-sidebar > ul > li > ul > li > a,
264.jon-shell-sidebar > ul > li > ul > li > .sidebar-label {
265 display: none;
266}
267
268/* Typography */
269.jon-shell-main h1 {
270 font-size: 2rem;
271 font-weight: 700;
272 line-height: 1.2;
273 margin-bottom: 24px;
274}
275
276.jon-shell-main h2 {
277 font-size: 1.5rem;
278 font-weight: 600;
279 margin-top: 40px;
280 margin-bottom: 16px;
281}
282
283.jon-shell-main h3 {
284 font-size: 1.25rem;
285 font-weight: 600;
286 margin-top: 32px;
287 margin-bottom: 12px;
288}
289
290.jon-shell-main h4,
291.jon-shell-main h5,
292.jon-shell-main h6 {
293 font-size: 1.1rem;
294 font-weight: 600;
295 margin-top: 24px;
296 margin-bottom: 8px;
297}
298
299.jon-shell-main p {
300 margin-bottom: 16px;
301}
302
303.jon-shell-main ul,
304.jon-shell-main ol {
305 margin-bottom: 16px;
306 padding-left: 28px;
307}
308
309/* Sidebar lists reset — must come after .jon-shell-main ul to win cascade */
310.jon-shell-sidebar ul {
311 list-style: none;
312 padding: 0;
313 margin: 0;
314}
315
316.jon-shell-main li {
317 margin-bottom: 4px;
318}
319
320.jon-shell-main blockquote {
321 border-left: 3px solid var(--border-color);
322 margin: 16px 0;
323 padding: 8px 16px;
324 color: var(--text-muted);
325}
326
327.jon-shell-main table {
328 width: 100%;
329 border-collapse: collapse;
330 margin-bottom: 16px;
331 font-size: 0.95em;
332}
333
334.jon-shell-main th,
335.jon-shell-main td {
336 padding: 10px 12px;
337 border: 1px solid var(--border-color);
338 text-align: left;
339}
340
341.jon-shell-main th {
342 background: var(--code-bg);
343 font-weight: 600;
344}
345
346/* Code */
347.jon-shell-main code {
348 font-family: var(--font-mono);
349 font-size: 0.88em;
350 background: var(--code-bg);
351 padding: 2px 6px;
352 border-radius: 4px;
353 border: 1px solid var(--code-border);
354}
355
356.jon-shell-main pre {
357 background: var(--code-bg);
358 border: 1px solid var(--code-border);
359 border-radius: 6px;
360 padding: 16px;
361 overflow-x: auto;
362 margin-bottom: 16px;
363}
364
365.jon-shell-main pre code {
366 background: none;
367 border: none;
368 padding: 0;
369 font-size: 0.875rem;
370 line-height: 1.5;
371}
372
373/* odoc specifics */
374.odoc-spec {
375 margin: 16px 0;
376 padding: 12px 16px;
377 background: var(--code-bg);
378 border: 1px solid var(--code-border);
379 border-radius: 6px;
380 border-left: 3px solid var(--link-color);
381}
382
383.odoc-spec code {
384 background: none;
385 border: none;
386 padding: 0;
387}
388
389.spec {
390 font-family: var(--font-mono);
391 font-size: 0.9rem;
392}
393
394.spec-doc {
395 margin-top: 8px;
396 padding-top: 8px;
397 border-top: 1px solid var(--border-color);
398 font-size: 0.95rem;
399}
400
401.comment-delim {
402 display: none;
403}
404
405.odoc-include {
406 margin: 16px 0;
407 padding: 12px;
408 border: 1px solid var(--border-color);
409 border-left: 3px solid var(--text-muted);
410 border-radius: 6px;
411}
412
413.odoc-include > details > summary {
414 cursor: pointer;
415 font-family: var(--font-mono);
416 font-size: 0.9rem;
417}
418
419/* Source links float right inside spec blocks and headings */
420a.source_link {
421 float: right;
422 color: var(--text-muted);
423 font-family: var(--font-body);
424 font-size: 0.8rem;
425 font-weight: normal;
426}
427
428a.source_link:hover {
429 color: var(--link-color);
430}
431
432/* Source code pages */
433.source_container {
434 display: flex;
435 margin-top: 0;
436 font-family: var(--font-mono);
437 font-size: 0.85rem;
438 line-height: 1.4;
439 background: var(--code-bg);
440 border: 1px solid var(--code-border);
441 border-radius: 6px;
442 overflow-x: auto;
443}
444
445.source_line_column {
446 padding: 12px 0;
447 text-align: right;
448 color: var(--text-muted);
449 background: var(--code-bg);
450 border-right: 1px solid var(--code-border);
451 user-select: none;
452}
453
454.source_line {
455 padding: 0 12px;
456}
457
458.source_code {
459 flex-grow: 1;
460 padding: 12px 16px;
461 color: var(--text-color);
462 overflow-x: auto;
463}
464
465.source_code pre {
466 margin: 0;
467 background: none;
468 border: none;
469 padding: 0;
470}
471
472.source_code code {
473 background: none;
474 border: none;
475 padding: 0;
476 font-size: inherit;
477}
478
479.odoc-src pre a {
480 color: inherit;
481}
482
483/* Source directory listings */
484.odoc-directory::before {
485 content: "\01F4C1";
486 margin-right: 0.3em;
487}
488
489/* Source code syntax highlighting */
490:root {
491 --src-keyword: #cf222e;
492 --src-uident: #0550ae;
493 --src-lident: var(--text-color);
494 --src-literal: #0a3069;
495 --src-comment: var(--text-muted);
496 --src-docstring: #116329;
497 --src-separator: #953800;
498 --src-parens: #953800;
499 --src-operator: #8250df;
500 --src-underscore: var(--text-muted);
501}
502
503@media (prefers-color-scheme: dark) {
504 :root {
505 --src-keyword: #ff7b72;
506 --src-uident: #79c0ff;
507 --src-lident: var(--text-color);
508 --src-literal: #a5d6ff;
509 --src-comment: var(--text-muted);
510 --src-docstring: #7ee787;
511 --src-separator: #d29922;
512 --src-parens: #d29922;
513 --src-operator: #d2a8ff;
514 --src-underscore: var(--text-muted);
515 }
516}
517
518/* Keywords */
519.AND, .ANDOP, .AS, .ASSERT,
520.BAR, .BEGIN,
521.CLASS, .CONSTRAINT,
522.DO, .DONE, .DOWNTO,
523.ELSE, .END, .EXCEPTION, .EXTERNAL,
524.FOR, .FUN, .FUNCTION, .FUNCTOR,
525.IF, .IN, .INCLUDE, .INHERIT, .INITIALIZER,
526.LAZY, .LESSMINUS, .LET, .LETOP,
527.MATCH, .METHOD, .MINUSGREATER, .MODULE, .MUTABLE,
528.NEW, .NONREC,
529.OBJECT, .OF, .OPEN,
530.PERCENT, .PRIVATE,
531.REC,
532.SEMISEMI, .SIG, .STRUCT,
533.THEN, .TO, .TRY, .TYPE,
534.VAL, .VIRTUAL,
535.WHEN, .WITH, .WHILE {
536 color: var(--src-keyword);
537}
538
539/* Separators */
540.COMMA, .COLON, .COLONGREATER, .SEMI {
541 color: var(--src-separator);
542}
543
544/* Parens */
545.BARRBRACKET,
546.LBRACE, .LBRACELESS,
547.LBRACKET, .LBRACKETAT, .LBRACKETATAT, .LBRACKETATATAT,
548.LBRACKETBAR, .LBRACKETGREATER, .LBRACKETLESS,
549.LBRACKETPERCENT, .LBRACKETPERCENTPERCENT,
550.LPAREN, .RBRACE, .RBRACKET, .RPAREN {
551 color: var(--src-parens);
552}
553
554/* Operators */
555.BANG, .PREFIXOP,
556.INFIXOP0, .INFIXOP1, .INFIXOP2, .INFIXOP3, .INFIXOP4,
557.BARBAR, .PLUS, .STAR, .AMPERAMPER, .AMPERAND, .COLONEQUAL,
558.GREATER, .LESS, .MINUS, .MINUSDOT, .MINUSGREATER,
559.OR, .PLUSDOT, .PLUSEQ, .EQUAL {
560 color: var(--src-operator);
561}
562
563/* Upper case idents */
564.UIDENT, .COLONCOLON, .TRUE, .FALSE {
565 color: var(--src-uident);
566}
567
568/* Lower case idents */
569.LIDENT, .QUESTION, .QUOTE, .TILDE {
570 color: var(--src-lident);
571}
572
573/* Literals */
574.STRING, .CHAR, .INT, .FLOAT, .QUOTED_STRING_EXPR, .QUOTED_STRING_ITEM {
575 color: var(--src-literal);
576}
577
578.UNDERSCORE {
579 color: var(--src-underscore);
580}
581
582.DOCSTRING {
583 color: var(--src-docstring);
584}
585
586.COMMENT {
587 color: var(--src-comment);
588 font-style: italic;
589}
590
591.anchor {
592 color: var(--text-muted);
593 text-decoration: none;
594 margin-left: 4px;
595 opacity: 0;
596 transition: opacity 0.15s;
597}
598
599h1:hover .anchor, h2:hover .anchor, h3:hover .anchor,
600h4:hover .anchor, h5:hover .anchor, h6:hover .anchor,
601.spec:hover .anchor {
602 opacity: 1;
603}
604
605.anchor:hover {
606 color: var(--link-color);
607}
608
609:target {
610 background: var(--highlight-bg);
611 border-radius: 4px;
612}
613
614/* Footer */
615.jon-shell-footer {
616 max-width: calc(var(--max-width) + 300px);
617 margin: 0 auto;
618 padding: 24px 20px;
619 border-top: 1px solid var(--border-color);
620 font-size: 14px;
621 color: var(--text-muted);
622}
623
624/* Responsive */
625@media (max-width: 800px) {
626 .jon-shell-sidebar {
627 display: none;
628 }
629
630 .jon-shell-main {
631 max-width: var(--max-width);
632 }
633
634 .jon-shell-header {
635 max-width: var(--max-width);
636 }
637
638 .jon-shell-footer {
639 max-width: var(--max-width);
640 }
641}
642
643@media (max-width: 600px) {
644 body {
645 font-size: 16px;
646 }
647
648 .jon-shell-header {
649 flex-direction: column;
650 gap: 8px;
651 align-items: flex-start;
652 }
653
654 .jon-shell-main h1 {
655 font-size: 1.6rem;
656 }
657}
658|}