forked from
anil.recoil.org/monopam-myspace
My aggregated monorepo of OCaml code, automaintained
Remove inline styling from scrollycode extension index page
Replace HTML blob with card styling and Google Fonts with plain odoc
markup using standard {ul} lists and cross-references.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+7
-194
+7
-194
odoc-scrollycode-extension/doc/index.mld
+7
-194
odoc-scrollycode-extension/doc/index.mld
···
1
1
{0 Scrollycode Demos}
2
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; }
11
-
body.odoc, .odoc { padding: 0 !important; margin: 0 !important; max-width: none !important; }
3
+
Scrollycoding in OCaml — three odoc extension plugins, each rendering the
4
+
same scrollycode pattern with a radically different visual theme. Authored as
5
+
[.mld] files using [@scrolly.<theme>] custom tags.
12
6
13
-
.demos-index {
14
-
font-family: 'Source Serif 4', Georgia, serif;
15
-
background: #f4f0e8;
16
-
min-height: 100vh;
7
+
{ul
8
+
{- {{!page-warm_parser}The Warm Workshop} — 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.}
9
+
{- {{!page-dark_repl}The Dark Terminal} — 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.}
10
+
{- {{!page-notebook_testing}The Notebook} — Building a test framework incrementally. Clean editorial aesthetic with a soft white background, blue-violet accents, Newsreader serif headings.}
17
11
}
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
-
%}