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