lib/zen/src/theme/defaults.zig
daab053ee43316e1809a84551d573ddd1e5bf3d2
1 pub const default_layout =
2 "<!doctype html>\n" ++
3 "<html lang=\"{{language}}\">\n" ++
4 "<head>\n" ++
5 "<meta charset=\"utf-8\">\n" ++
6 "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n" ++
7 "<title>{{title}} - {{site.title}}</title>\n" ++
8 "<meta name=\"description\" content=\"{{description}}\">\n" ++
9 "<link rel=\"stylesheet\" href=\"/{{style.path}}\">\n" ++
10 "</head>\n" ++
11 "<body>\n" ++
12 "<main>\n" ++
13 "{{content}}\n" ++
14 "</main>\n" ++
15 "</body>\n" ++
16 "</html>\n";
17
18 pub const default_style =
19 ":root{color-scheme:light dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.55;background:#f7f7f4;color:#20231f}" ++
20 "body{margin:0}" ++
21 "main{max-width:72ch;margin:0 auto;padding:4rem 1.25rem}" ++
22 "h1,h2,h3{line-height:1.12}" ++
23 "a{color:#0b6bcb}" ++
24 "sup{line-height:0}" ++
25 "pre{overflow:auto;padding:1rem;background:#1f241f;color:#f4f6ef}" ++
26 "code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}" ++
27 ".zen-code-block{margin:1rem 0;border:1px solid #d6d6ce;background:#1f241f;color:#f4f6ef}" ++
28 ".zen-code-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .8rem;border-bottom:1px solid rgba(244,246,239,.18);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem}" ++
29 ".zen-code-title{font-weight:700}" ++
30 ".zen-code-language{margin-left:auto;color:#b8c1aa;text-transform:uppercase;letter-spacing:.08em}" ++
31 ".zen-code{margin:0;padding:.8rem 0;overflow-x:auto;background:transparent;color:inherit}" ++
32 ".zen-code-wrap .zen-code{overflow-x:hidden}" ++
33 ".zen-code code{display:block;font-size:.9rem}" ++
34 ".zen-code-line{display:grid;grid-template-columns:3ch minmax(0,1fr);gap:.8rem;min-height:1.5em;padding:0 .85rem}" ++
35 ".zen-code-no-lines .zen-code-line{grid-template-columns:minmax(0,1fr)}" ++
36 ".zen-code-line-number{user-select:none;text-align:right;color:#8f987f}" ++
37 ".zen-code-line-source{min-width:0;white-space:pre}" ++
38 ".zen-code-wrap .zen-code-line-source{white-space:pre-wrap;overflow-wrap:anywhere}" ++
39 ".zen-code-keyword{color:#ffb86c}" ++
40 ".zen-code-type{color:#8be9fd}" ++
41 ".zen-code-string{color:#f1fa8c}" ++
42 ".zen-code-comment{color:#9aa17d}" ++
43 ".zen-code-number{color:#bd93f9}" ++
44 ".zen-code-builtin{color:#50fa7b}" ++
45 ".zen-code-constant{color:#ff79c6}" ++
46 "blockquote{border-left:4px solid #9aa17d;margin-left:0;padding-left:1rem;color:#4e5548}" ++
47 "main:has(>.zen-slides){max-width:none;padding:0}" ++
48 ".zen-slides{min-height:100vh;scroll-snap-type:y mandatory}" ++
49 ".zen-slide{min-height:100vh;box-sizing:border-box;display:grid;place-items:center;padding:1rem;scroll-snap-align:start}" ++
50 ".zen-slide-frame{box-sizing:border-box;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;gap:1rem;width:min(calc(100vw - 2rem),calc(177.7778vh - 3.5556rem));height:min(calc(100vh - 2rem),calc(56.25vw - 1.125rem));padding:3.5rem 4rem;overflow:auto}" ++
51 ".zen-slide-frame>*{width:100%;max-width:68rem;margin-left:auto;margin-right:auto}" ++
52 ".zen-slide-frame>p:has(>img:only-child),.zen-slide-frame>p:has(>img.zen-slide-motion){position:relative;display:grid;flex:1 1 0;place-items:center;min-height:0;margin:0;overflow:hidden;line-height:0}.zen-slide-frame>p:has(>img:only-child):first-of-type,.zen-slide-frame>p:has(>img.zen-slide-motion):first-of-type{flex-grow:1.6}.zen-slide-frame>p:has(>img:only-child) img,.zen-slide-frame>p:has(>img.zen-slide-motion)>img,.zen-slide-frame>p:has(>img.zen-slide-motion)>object{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.zen-slide-frame img[data-zen-motion-src][hidden]{display:block;visibility:hidden}.zen-slide-frame object[data-zen-motion-live]:not([data-zen-motion-ready]){visibility:hidden}" ++
53 ".zen-slide-frame h1{font-size:clamp(1.1rem,5.2cqi,9rem);line-height:1;margin-bottom:.3rem}" ++
54 ".zen-slide-frame h2{font-size:clamp(.9rem,3.5cqi,6.5rem);line-height:1.08;margin-top:0}" ++
55 ".zen-slide-frame p,.zen-slide-frame li{font-size:clamp(.8rem,1.8cqi,3.2rem);line-height:1.36}" ++
56 ".zen-slide-frame ul,.zen-slide-frame ol{padding-left:2.1rem}" ++
57 ".zen-slide-frame math[display=\"block\"]{font-size:clamp(1rem,2cqi,3.6rem);line-height:1.2;text-align:center}" ++
58 ".zen-slide-frame img,.zen-slide-frame object,.zen-slide-frame svg,.zen-slide-frame video,.zen-slide-frame canvas,.zen-slide-frame math[display=\"block\"],.zen-slide-frame .zen-diagram,.zen-slide-frame .zen-code-block{max-width:100%}" ++
59 ".zen-slide-frame img,.zen-slide-frame object,.zen-slide-frame svg,.zen-slide-frame video,.zen-slide-frame canvas{max-height:68vh;object-fit:contain}" ++
60 ".zen-slide-frame .zen-code-block,.zen-slide-frame .zen-diagram{max-height:60vh;overflow:auto;font-size:clamp(.72rem,1.35cqi,2.4rem)}" ++
61 ".zen-speaker-notes[hidden]{display:none}" ++
62 "body.zen-print-notes .zen-speaker-notes[hidden]{display:block;margin-top:1rem;padding:1rem;border-top:1px solid #d6d6ce;font-size:1rem;color:#4e5548}" ++
63 ".zen-slide-toolbar{position:fixed;right:1rem;bottom:1rem;z-index:40;display:flex;align-items:center;gap:.35rem;padding:.35rem;border:1px solid #d6d6ce;background:#f7f7f4;color:#20231f;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.28}" ++
64 ".zen-slide-toolbar:hover,.zen-slide-toolbar:focus-within{opacity:1}" ++
65 ".zen-slide-toolbar button,.zen-presenter-controls button{display:inline-grid;place-items:center;width:2rem;height:2rem;border:1px solid #d6d6ce;background:#fff;color:inherit;font:inherit}" ++
66 ".zen-slide-toolbar button svg,.zen-presenter-controls button svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}" ++
67 ".zen-slide-toolbar button:disabled{opacity:.35}.zen-slide-toolbar button[aria-pressed=\"true\"],.zen-presenter-controls button[aria-pressed=\"true\"]{background:#20231f;color:#f7f7f4}" ++
68 ".zen-slide-counter{min-width:4.5rem;text-align:center;font-size:.78rem}" ++
69 ".zen-slide-notes-panel{position:fixed;left:1rem;right:1rem;bottom:4.1rem;z-index:35;max-height:38vh;overflow:auto;padding:1rem;border:1px solid #d6d6ce;background:#f7f7f4;color:#20231f}" ++
70 ".zen-slide-notes-panel p{font-size:1rem;line-height:1.45}" ++
71 ".zen-slide-overview-panel{position:fixed;right:1rem;top:1rem;bottom:4.1rem;z-index:36;width:min(24rem,calc(100vw - 2rem));overflow:auto;padding:1rem;border:1px solid #d6d6ce;background:#f7f7f4;color:#20231f}" ++
72 ".zen-slide-overview-summary{display:grid;gap:.35rem;margin-bottom:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}.zen-slide-overview-panel ol{display:grid;gap:.35rem;list-style:none;margin:0;padding:0}.zen-slide-overview-panel button{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.2rem .5rem;width:100%;padding:.45rem;border:1px solid transparent;background:transparent;color:inherit;text-align:left;font:inherit}.zen-slide-overview-panel button[aria-current=\"true\"]{border-color:#20231f;background:#fff}.zen-slide-overview-panel em{grid-column:2;font-size:.78rem;color:#4e5548;font-style:normal}" ++
73 ".zen-presenter-view{display:none}" ++
74 "body.zen-presenter-mode{background:#f7f7f4;color:#20231f}" ++
75 "body.zen-presenter-mode .zen-slides{display:none}" ++
76 "body.zen-presenter-mode .zen-slide-toolbar{display:none}" ++
77 "body.zen-presenter-mode .zen-presenter-view{height:100vh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);gap:1.5rem;padding:1.5rem}" ++
78 ".zen-presenter-current,.zen-presenter-side{min-width:0;min-height:0;border:1px solid #d6d6ce;background:#fff;padding:1rem;overflow:auto}.zen-presenter-current{display:grid;place-items:center}.zen-presenter-current .zen-slide-frame{width:100%;height:auto;aspect-ratio:16/9;padding:2rem}" ++
79 ".zen-presenter-side{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem;overflow:hidden}.zen-presenter-notes-section{display:flex;flex-direction:column;min-height:0}" ++
80 ".zen-presenter-current p,.zen-presenter-current li{font-size:1.05rem}.zen-presenter-current .zen-code-block,.zen-presenter-current .zen-diagram{max-height:48vh;overflow:auto;font-size:.9rem}" ++
81 ".zen-presenter-meta{display:grid;grid-template-columns:repeat(3,max-content) 1fr;align-items:center;gap:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;color:#4e5548}.zen-presenter-controls{display:flex;justify-content:flex-end;gap:.35rem}.zen-presenter-notes-section>h2,.zen-presenter-next>h2{margin:.2rem 0 .5rem;font-size:1rem;line-height:1.1;color:#4e5548}.zen-presenter-notes{max-height:none;min-height:0;overflow:auto}.zen-presenter-notes p{font-size:1.08rem;line-height:1.5}.zen-presenter-next{padding-top:1rem;border-top:1px solid #d6d6ce}.zen-presenter-next-title{font-size:1.05rem;color:#4e5548}.zen-presenter-next-preview{margin-top:.65rem;max-height:none;overflow:hidden;border:1px solid #d6d6ce;background:#f7f7f4;padding:.75rem}.zen-presenter-next-preview .zen-slide-frame{width:100%;height:auto;aspect-ratio:16/9;gap:.35rem;padding:.65rem;overflow:hidden}.zen-presenter-next-preview p,.zen-presenter-next-preview li{font-size:.82rem;line-height:1.3}.zen-presenter-next-preview .zen-code-block,.zen-presenter-next-preview .zen-diagram{font-size:.68rem;max-height:8rem;overflow:hidden}" ++
82 "body.zen-presenter-dark{color-scheme:dark;background:#11100d;color:#f6f1e7}body.zen-presenter-dark .zen-presenter-current,body.zen-presenter-dark .zen-presenter-side,body.zen-presenter-dark .zen-presenter-next-preview{border-color:#4d4639;background:#171511;color:#f6f1e7}body.zen-presenter-dark .zen-presenter-current h1,body.zen-presenter-dark .zen-presenter-current h2,body.zen-presenter-dark .zen-presenter-current h3,body.zen-presenter-dark .zen-presenter-current p,body.zen-presenter-dark .zen-presenter-current li,body.zen-presenter-dark .zen-presenter-current math{color:#f6f1e7}body.zen-presenter-dark .zen-presenter-current .zen-diagram,body.zen-presenter-dark .zen-presenter-next-preview .zen-diagram{background:#f7f7f4;color:#20231f}body.zen-presenter-dark .zen-presenter-meta,body.zen-presenter-dark .zen-presenter-notes-section h2,body.zen-presenter-dark .zen-presenter-next h2,body.zen-presenter-dark .zen-presenter-next-title{color:#cdbf9a}body.zen-presenter-dark .zen-presenter-controls button{border-color:#4d4639;background:#211e18;color:#f6f1e7}body.zen-presenter-dark .zen-presenter-controls button[aria-pressed=\"true\"]{background:#cdbf9a;color:#11100d}" ++
83 "@media(max-width:720px){.zen-slide{padding:.5rem}.zen-slide-frame{width:min(calc(100vw - 1rem),calc(177.7778vh - 1.7778rem));height:min(calc(100vh - 1rem),calc(56.25vw - .5625rem));gap:.45rem;padding:1rem}.zen-slide-frame .zen-code-block,.zen-slide-frame .zen-diagram{max-height:54vh}.zen-slide-toolbar{left:1rem;right:1rem;justify-content:center}.zen-slide-notes-panel{bottom:4.3rem}.zen-slide-overview-panel{left:1rem;right:1rem;width:auto;bottom:4.3rem}body.zen-presenter-mode .zen-presenter-view{height:auto;grid-template-columns:1fr}.zen-presenter-notes{max-height:38vh}.zen-presenter-meta{grid-template-columns:repeat(2,max-content) 1fr}.zen-presenter-controls{grid-column:1/-1;justify-content:flex-start}}" ++
84 ".footnotes{margin-top:2.5rem;padding-top:1rem;border-top:1px solid #d6d6ce;font-size:.9rem}" ++
85 ".footnotes ol{padding-left:1.5rem}" ++
86 ".zen-page-badge{display:inline-block;margin-bottom:1.2rem;padding:.15rem .55rem;border:1.5px solid #b3261e;color:#b3261e;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-indent:.18em}" ++
87 ".zen-quiz{margin:2.5rem 0;padding:1.25rem 1.5rem;border:1px solid #d6d6ce;background:#fff}" ++
88 ".zen-quiz-questions{margin:0;padding-left:1.25rem}" ++
89 ".zen-quiz-question{margin:1rem 0}" ++
90 ".zen-quiz-prompt{font-weight:600}" ++
91 ".zen-quiz-options{list-style:lower-alpha;padding-left:1.5rem}" ++
92 ".zen-quiz-answer{margin:.5rem 0}" ++
93 ".zen-quiz-answer summary{cursor:pointer;color:#0b6bcb}" ++
94 "math mtd:first-child{padding-left:0}" ++
95 "math mtd:last-child{padding-right:0}" ++
96 "mtable.zen-cases mtd{padding-left:0;padding-right:0;text-align:left}" ++
97 "mtable.zen-cases mtd+mtd{padding-left:1em}" ++
98 "mtable.zen-aligned mtd{padding:0.7ex 0}" ++
99 "mtable.zen-aligned mtd:nth-child(2n+3){padding-left:1em}" ++
100 "mtable.zen-aligned mtd:nth-child(odd){text-align:right}" ++
101 "mtable.zen-aligned mtd:nth-child(even){text-align:left}" ++
102 "@supports (not (-webkit-backdrop-filter:blur(1px))) and (not (-moz-appearance:none)){" ++
103 "mtable.zen-cases mtd{text-align:-webkit-left}" ++
104 "mtable.zen-aligned mtd:nth-child(odd){text-align:-webkit-right}" ++
105 "mtable.zen-aligned mtd:nth-child(even){text-align:-webkit-left}" ++
106 "}" ++
107 "img{max-width:100%;height:auto}\n";