jon.recoil.org
this repo has no description
1{0 Scrollycode Demos}
2
3{%html:
4<link rel="preconnect" href="https://fonts.googleapis.com">
5<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Source+Code+Pro:ital,wght@0,300..900;1,300..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&display=swap" rel="stylesheet">
7<style>
8.odoc-nav, .odoc-tocs, .odoc-search { display: none !important; }
9.odoc-preamble > h1 { display: none !important; }
10.odoc-preamble, .odoc-content { max-width: none !important; padding: 0 !important; margin: 0 !important; }
11body.odoc, .odoc { padding: 0 !important; margin: 0 !important; max-width: none !important; }
12
13.demos-index {
14 font-family: 'Source Serif 4', Georgia, serif;
15 background: #f4f0e8;
16 min-height: 100vh;
17}
18
19.demos-header {
20 max-width: 680px;
21 margin: 0 auto;
22 padding: 6rem 2rem 3rem;
23 text-align: center;
24}
25
26.demos-header h1 {
27 font-family: 'Fraunces', serif;
28 font-size: clamp(2rem, 5vw, 3.2rem);
29 font-weight: 800;
30 line-height: 1.15;
31 letter-spacing: -0.02em;
32 margin-bottom: 1rem;
33 color: #2c2416;
34}
35
36.demos-header h1 em {
37 font-style: italic;
38 color: #c25832;
39}
40
41.demos-header p {
42 color: #6b5d4d;
43 max-width: 50ch;
44 margin: 0 auto;
45 font-size: 1.05rem;
46 line-height: 1.6;
47}
48
49.demos-list {
50 max-width: 720px;
51 margin: 0 auto;
52 padding: 1rem 2rem 6rem;
53 display: flex;
54 flex-direction: column;
55 gap: 1.25rem;
56}
57
58.demo-card {
59 display: block;
60 background: #fff;
61 border: 1px solid rgba(44,36,22,0.08);
62 border-radius: 10px;
63 padding: 1.5rem 1.75rem;
64 text-decoration: none;
65 color: inherit;
66 transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
67}
68
69.demo-card:hover {
70 border-color: #c25832;
71 box-shadow: 0 4px 20px rgba(194,88,50,0.1);
72 transform: translateY(-2px);
73}
74
75.demo-card-header {
76 display: flex;
77 align-items: baseline;
78 gap: 0.75rem;
79 margin-bottom: 0.5rem;
80}
81
82.demo-card-number {
83 font-family: 'Source Code Pro', monospace;
84 font-size: 0.68rem;
85 font-weight: 600;
86 letter-spacing: 0.08em;
87 color: #c25832;
88 flex-shrink: 0;
89}
90
91.demo-card h2 {
92 font-family: 'Fraunces', serif;
93 font-size: 1.2rem;
94 font-weight: 700;
95 letter-spacing: -0.01em;
96 margin: 0;
97}
98
99.demo-card p {
100 color: #6b5d4d;
101 font-size: 0.92rem;
102 line-height: 1.6;
103 margin: 0.5rem 0;
104}
105
106.demo-card .tags {
107 display: flex;
108 flex-wrap: wrap;
109 gap: 0.4rem;
110 margin-top: 0.75rem;
111}
112
113.tag {
114 font-family: 'Source Code Pro', monospace;
115 font-size: 0.65rem;
116 letter-spacing: 0.04em;
117 padding: 0.2em 0.6em;
118 border-radius: 4px;
119 background: rgba(194,88,50,0.07);
120 color: #c25832;
121}
122
123.tag.dark {
124 background: #1a1a2e;
125 color: rgba(255,255,255,0.5);
126}
127
128.demos-footer {
129 text-align: center;
130 padding: 0 2rem 4rem;
131 font-family: 'Source Code Pro', monospace;
132 font-size: 0.72rem;
133 color: #6b5d4d;
134 letter-spacing: 0.04em;
135}
136
137.demos-footer a {
138 color: #c25832;
139 text-decoration: none;
140}
141</style>
142
143<div class="demos-index">
144
145<div class="demos-header">
146 <h1>Scrollycoding in <em>OCaml</em></h1>
147 <p>Three odoc extension plugins, each rendering the same scrollycode pattern with a radically different visual theme. Authored as <code>.mld</code> files using <code>@scrolly.<theme></code> custom tags.</p>
148</div>
149
150<div class="demos-list">
151
152 <a class="demo-card" href="warm_parser.html">
153 <div class="demo-card-header">
154 <span class="demo-card-number">01</span>
155 <h2>The Warm Workshop</h2>
156 </div>
157 <p>Building a JSON parser step by step. Warm cream background with a dark navy code panel, Fraunces serif display type, and earthy burnt-sienna accents. Classic scrollycode split layout.</p>
158 <div class="tags">
159 <span class="tag">@scrolly.warm</span>
160 <span class="tag">Fraunces + Source Serif</span>
161 <span class="tag">parser tutorial</span>
162 </div>
163 </a>
164
165 <a class="demo-card" href="dark_repl.html">
166 <div class="demo-card-header">
167 <span class="demo-card-number">02</span>
168 <h2>The Dark Terminal</h2>
169 </div>
170 <p>Building a REPL from scratch. Near-black cinematic theme with phosphor-green accents, JetBrains Mono code font, and the code panel as the visual hero. Prose in a narrow left column.</p>
171 <div class="tags">
172 <span class="tag dark">@scrolly.dark</span>
173 <span class="tag">JetBrains Mono + Outfit</span>
174 <span class="tag">REPL tutorial</span>
175 </div>
176 </a>
177
178 <a class="demo-card" href="notebook_testing.html">
179 <div class="demo-card-header">
180 <span class="demo-card-number">03</span>
181 <h2>The Notebook</h2>
182 </div>
183 <p>Building a test framework incrementally. Clean editorial aesthetic with a soft white background, blue-violet accents, Newsreader serif headings, and generous whitespace.</p>
184 <div class="tags">
185 <span class="tag">@scrolly.notebook</span>
186 <span class="tag">Newsreader + DM Sans</span>
187 <span class="tag">testing tutorial</span>
188 </div>
189 </a>
190
191</div>
192
193<div class="demos-footer">
194 Powered by <a href="https://ocaml.github.io/odoc/">odoc</a> custom tag extensions · Inspired by <a href="https://codehike.org">Code Hike</a>
195</div>
196
197</div>
198%}