this repo has no description
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
doc/index.mld
+7
-194
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
-
%}