jon.recoil.org
this repo has no description
1(** Structural CSS for the scrollycode extension.
2
3 This CSS defines layout, animations, and structure using CSS custom
4 properties for all theming. Theme files set the custom property values.
5
6 Custom property contract:
7 - Typography: --sc-font-display, --sc-font-body, --sc-font-code
8 - Colors: --sc-bg, --sc-text, --sc-text-dim, --sc-accent, --sc-accent-soft,
9 --sc-code-bg, --sc-code-text, --sc-code-gutter, --sc-border,
10 --sc-focus-bg, --sc-panel-radius
11 - Syntax: --sc-hl-keyword, --sc-hl-type, --sc-hl-string, --sc-hl-comment,
12 --sc-hl-number, --sc-hl-module, --sc-hl-operator, --sc-hl-punct *)
13
14let structural_css =
15 {|
16/* === Override odoc page chrome for scrollycode pages === */
17.odoc-nav, .odoc-tocs, .odoc-search { display: none !important; }
18.odoc-preamble > h1, .odoc-preamble > h2, .odoc-preamble > h3 { display: none !important; }
19.at-tags > li > .at-tag { display: none !important; }
20.odoc-preamble, .odoc-content {
21 max-width: none !important;
22 padding: 0 !important;
23 margin: 0 !important;
24 display: block !important;
25}
26.at-tags {
27 list-style: none !important;
28 padding: 0 !important;
29 margin: 0 !important;
30}
31.at-tags > li {
32 display: block !important;
33 margin: 0 !important;
34 padding: 0 !important;
35}
36body.odoc, .odoc {
37 padding: 0 !important;
38 margin: 0 !important;
39 max-width: none !important;
40 background: inherit;
41}
42
43/* === Container === */
44.sc-container {
45 font-family: var(--sc-font-body);
46 background: var(--sc-bg);
47 color: var(--sc-text);
48}
49
50/* === Hero === */
51.sc-container .sc-hero {
52 background: var(--sc-bg);
53 padding: 5rem 2rem 3rem;
54}
55
56.sc-container .sc-hero h1 {
57 font-family: var(--sc-font-display);
58 font-size: clamp(2.2rem, 5vw, 3.4rem);
59 font-weight: 800;
60 color: var(--sc-text);
61 letter-spacing: -0.03em;
62 line-height: 1.1;
63 margin-bottom: 0.75rem;
64}
65
66.sc-container .sc-hero p {
67 color: var(--sc-text-dim);
68 font-size: 1.05rem;
69 max-width: 48ch;
70 line-height: 1.6;
71}
72
73/* === Tutorial layout === */
74.sc-container .sc-tutorial {
75 display: flex;
76 gap: 0;
77 background: var(--sc-bg);
78 position: relative;
79}
80
81.sc-container .sc-steps-col {
82 flex: 1;
83 min-width: 0;
84 padding: 2rem 2.5rem 50vh 2.5rem;
85}
86
87.sc-container .sc-code-col {
88 width: 52%;
89 flex-shrink: 0;
90}
91
92/* === Step === */
93.sc-container .sc-step {
94 min-height: 70vh;
95 display: flex;
96 flex-direction: column;
97 justify-content: center;
98 padding: 2rem 0;
99}
100
101.sc-container .sc-step-number {
102 font-family: var(--sc-font-code);
103 font-size: 0.7rem;
104 font-weight: 600;
105 letter-spacing: 0.1em;
106 color: var(--sc-accent);
107 text-transform: uppercase;
108 margin-bottom: 0.5rem;
109}
110
111.sc-container .sc-step h2 {
112 font-family: var(--sc-font-display);
113 font-size: 1.5rem;
114 font-weight: 700;
115 color: var(--sc-text);
116 letter-spacing: -0.02em;
117 margin-bottom: 0.75rem;
118 line-height: 1.25;
119}
120
121.sc-container .sc-step p {
122 color: var(--sc-text-dim);
123 font-size: 0.95rem;
124 line-height: 1.7;
125 max-width: 44ch;
126}
127
128/* === Code panel === */
129.sc-container .sc-code-panel {
130 position: sticky;
131 top: 10vh;
132 height: 80vh;
133 margin: 0 2rem 0 0;
134 background: var(--sc-code-bg);
135 border-radius: var(--sc-panel-radius);
136 overflow: hidden;
137 display: flex;
138 flex-direction: column;
139 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.03) inset;
140}
141
142.sc-container .sc-code-header {
143 display: flex;
144 align-items: center;
145 padding: 0.85rem 1.25rem;
146 background: rgba(255,255,255,0.03);
147 border-bottom: 1px solid rgba(255,255,255,0.06);
148 gap: 0.6rem;
149}
150
151.sc-container .sc-dots {
152 display: flex;
153 gap: 6px;
154}
155
156.sc-container .sc-dots span {
157 width: 10px;
158 height: 10px;
159 border-radius: 50%;
160}
161
162.sc-container .sc-dots span:nth-child(1) { background: #ff5f57; }
163.sc-container .sc-dots span:nth-child(2) { background: #ffbd2e; }
164.sc-container .sc-dots span:nth-child(3) { background: #28c840; }
165
166.sc-container .sc-filename {
167 font-family: var(--sc-font-code);
168 font-size: 0.72rem;
169 color: rgba(255,255,255,0.35);
170 letter-spacing: 0.04em;
171 flex: 1;
172 text-align: center;
173}
174
175.sc-container .sc-step-badge {
176 font-family: var(--sc-font-code);
177 font-size: 0.65rem;
178 color: rgba(255,255,255,0.25);
179 letter-spacing: 0.06em;
180}
181
182.sc-container .sc-code-body {
183 flex: 1;
184 overflow-y: auto;
185 padding: 1.25rem 0;
186 font-family: var(--sc-font-code);
187 font-size: 0.82rem;
188 line-height: 1.7;
189 color: var(--sc-code-text);
190}
191
192/* === Lines === */
193.sc-container .sc-line {
194 padding: 0 1.25rem;
195 white-space: pre;
196 transition: opacity 0.3s ease;
197 opacity: 0.35;
198}
199
200.sc-container .sc-line.sc-focused {
201 opacity: 1;
202 background: var(--sc-focus-bg, rgba(255,255,255,0.04));
203}
204
205.sc-container .sc-line-number {
206 display: inline-block;
207 width: 3ch;
208 text-align: right;
209 margin-right: 1.5ch;
210 color: var(--sc-code-gutter);
211 user-select: none;
212}
213
214/* === Syntax highlighting === */
215.sc-container .hl-keyword { color: var(--sc-hl-keyword); font-weight: 500; }
216.sc-container .hl-type { color: var(--sc-hl-type); }
217.sc-container .hl-string { color: var(--sc-hl-string); }
218.sc-container .hl-comment { color: var(--sc-hl-comment); font-style: italic; }
219.sc-container .hl-number { color: var(--sc-hl-number); }
220.sc-container .hl-module { color: var(--sc-hl-module); }
221.sc-container .hl-operator { color: var(--sc-hl-operator); }
222.sc-container .hl-punct { color: var(--sc-hl-punct); }
223
224/* === Progress pips === */
225.sc-container .sc-progress {
226 position: fixed;
227 left: 1.5rem;
228 top: 50%;
229 transform: translateY(-50%);
230 display: flex;
231 flex-direction: column;
232 gap: 8px;
233 z-index: 100;
234}
235
236.sc-container .sc-pip {
237 width: 6px;
238 height: 6px;
239 border-radius: 50%;
240 background: var(--sc-border);
241 transition: all 0.3s ease;
242}
243
244.sc-container .sc-pip.sc-active {
245 background: var(--sc-accent);
246 box-shadow: 0 0 8px color-mix(in srgb, var(--sc-accent) 40%, transparent);
247 transform: scale(1.4);
248}
249
250/* === Animations === */
251@keyframes sc-line-exit {
252 0% { opacity: 1; transform: translateX(0); }
253 100% { opacity: 0; transform: translateX(-30px); }
254}
255
256@keyframes sc-line-enter {
257 0% { opacity: 0; transform: translateX(30px); }
258 100% { opacity: 1; transform: translateX(0); }
259}
260
261.sc-container .sc-line.sc-exiting {
262 animation: sc-line-exit 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
263}
264
265.sc-container .sc-line.sc-entering {
266 animation: sc-line-enter 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
267}
268
269/* Hidden code slot */
270.sc-code-slot { display: none; }
271
272/* === Mobile responsive === */
273@media (max-width: 700px) {
274 .sc-container { padding: 0 1rem; }
275 .sc-container .sc-desktop { display: none !important; }
276 .sc-container .sc-mobile { display: block !important; }
277 .sc-container .sc-progress { display: none; }
278 .sc-container .sc-hero h1 { font-size: 2rem; }
279}
280@media (min-width: 701px) {
281 .sc-container .sc-mobile { display: none !important; }
282}
283
284.sc-container .sc-mobile-step {
285 margin: 1.5rem 0;
286 padding: 1.5rem;
287 border-radius: 12px;
288 background: var(--sc-mobile-step-bg, rgba(255,255,255,0.5));
289}
290
291.sc-container .sc-mobile-step-num {
292 font-family: var(--sc-font-display);
293 font-size: 0.75rem;
294 text-transform: uppercase;
295 letter-spacing: 0.15em;
296 color: var(--sc-accent);
297 margin-bottom: 0.5rem;
298}
299
300.sc-container .sc-mobile-step h2 {
301 font-family: var(--sc-font-display);
302 font-size: 1.3rem;
303 color: var(--sc-text);
304 margin: 0 0 0.75rem;
305}
306
307.sc-container .sc-mobile-step p {
308 font-family: var(--sc-font-body);
309 font-size: 1rem;
310 color: var(--sc-text-dim);
311 line-height: 1.6;
312 margin: 0 0 1rem;
313}
314
315.sc-container .sc-diff-block {
316 background: var(--sc-code-bg);
317 border-radius: 8px;
318 padding: 0.75rem;
319 overflow-x: auto;
320 font-family: var(--sc-font-code);
321 font-size: 0.8rem;
322 line-height: 1.5;
323}
324
325.sc-container .sc-diff-line { padding: 1px 0.5rem; white-space: pre; }
326.sc-container .sc-diff-added { background: rgba(80, 200, 80, 0.15); border-left: 3px solid #4caf50; }
327.sc-container .sc-diff-removed { background: rgba(255, 80, 80, 0.12); border-left: 3px solid #ef5350; text-decoration: line-through; opacity: 0.7; }
328.sc-container .sc-diff-same { opacity: 0.5; }
329
330/* === Playground overlay === */
331.sc-playground-overlay {
332 display: none;
333 position: fixed;
334 inset: 0;
335 z-index: 10000;
336 background: rgba(0,0,0,0.6);
337 backdrop-filter: blur(4px);
338 align-items: center;
339 justify-content: center;
340}
341.sc-playground-overlay.sc-open {
342 display: flex;
343}
344.sc-playground-container {
345 width: 90vw;
346 max-width: 900px;
347 height: 80vh;
348 background: var(--sc-code-bg, #1e1b2e);
349 border-radius: 12px;
350 display: flex;
351 flex-direction: column;
352 overflow: hidden;
353 box-shadow: 0 25px 80px rgba(0,0,0,0.5);
354}
355.sc-playground-header {
356 display: flex;
357 align-items: center;
358 justify-content: space-between;
359 padding: 0.85rem 1.5rem;
360 background: rgba(255,255,255,0.05);
361 border-bottom: 1px solid rgba(255,255,255,0.1);
362 flex-shrink: 0;
363}
364.sc-playground-title {
365 font-family: var(--sc-font-code, monospace);
366 font-size: 0.8rem;
367 font-weight: 500;
368 letter-spacing: 0.04em;
369 color: rgba(255,255,255,0.6);
370 text-transform: uppercase;
371}
372.sc-playground-close {
373 background: none;
374 border: none;
375 color: rgba(255,255,255,0.4);
376 font-size: 1.25rem;
377 cursor: pointer;
378 padding: 0 0.25rem;
379 line-height: 1;
380}
381.sc-playground-close:hover { color: #fff; }
382.sc-playground-editor {
383 flex: 1;
384 overflow: auto;
385 min-height: 0;
386}
387.sc-playground-editor x-ocaml {
388 display: block;
389 height: 100%;
390 font-size: 0.85rem;
391
392 /* Map scrollycode theme properties to x-ocaml custom properties */
393 --xo-font: var(--sc-font-code, monospace);
394 --xo-font-size: inherit;
395 --xo-bg: var(--sc-code-bg, #1a1a2e);
396 --xo-text: var(--sc-code-text, #d4d0c8);
397 --xo-gutter-bg: var(--sc-code-bg, #1a1a2e);
398 --xo-gutter-text: var(--sc-code-gutter, #3a3a52);
399 --xo-gutter-border: rgba(255,255,255,0.06);
400 --xo-focus-outline: rgba(255,255,255,0.2);
401 --xo-active-line: rgba(255,255,255,0.04);
402 --xo-active-line-focused: rgba(255,255,255,0.06);
403 --xo-selection: rgba(255,255,255,0.12);
404 --xo-selection-focused: rgba(255,255,255,0.15);
405 --xo-content-padding-left: 16px;
406 --xo-gutter-element-padding: 0 12px 0 8px;
407 --xo-line-numbers-min-width: 40px;
408
409 /* Run button */
410 --xo-btn-bg: var(--sc-code-bg, #1a1a2e);
411 --xo-btn-border: var(--sc-code-gutter, #3a3a52);
412 --xo-btn-text: var(--sc-code-text, #d4d0c8);
413 --xo-btn-hover-bg: var(--sc-accent, #c25832);
414 --xo-btn-hover-text: #fff;
415
416 /* Tooltips */
417 --xo-tooltip-bg: var(--sc-code-bg, #1a1a2e);
418 --xo-tooltip-text: var(--sc-code-text, #d4d0c8);
419 --xo-tooltip-border: rgba(255,255,255,0.15);
420
421 /* Output areas */
422 --xo-stdout-bg: rgba(255,255,255,0.05);
423 --xo-stdout-text: var(--sc-code-text, #d4d0c8);
424 --xo-stderr-bg: rgba(235,86,86,0.1);
425 --xo-stderr-text: #f08080;
426 --xo-meta-bg: rgba(255,255,255,0.03);
427 --xo-meta-text: var(--sc-code-gutter, #3a3a52);
428}
429
430/* === Playground button === */
431.sc-container .sc-playground-btn {
432 display: inline-block;
433 margin-top: 0.75rem;
434 padding: 0.4rem 1rem;
435 border: 1px solid color-mix(in srgb, var(--sc-accent) 30%, transparent);
436 border-radius: 6px;
437 background: transparent;
438 color: var(--sc-accent);
439 font-family: var(--sc-font-body);
440 font-size: 0.85rem;
441 cursor: pointer;
442 transition: all 0.2s;
443}
444.sc-container .sc-playground-btn:hover {
445 background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
446 border-color: var(--sc-accent);
447}
448|}