mulmocast 2.1.28 → 2.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,998 @@
1
+ /**
2
+ * Markdown Slide Styles
3
+ * 100 pre-designed styles for markdown slides
4
+ */
5
+ // Base reset styles applied to all
6
+ const baseReset = `
7
+ *,*::before,*::after{box-sizing:border-box}
8
+ body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
9
+ html:focus-within{scroll-behavior:smooth}
10
+ body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.6}
11
+ img,picture{max-width:100%;display:block}
12
+ `;
13
+ // Helper function to create a style
14
+ const createStyle = (name, category, css) => ({
15
+ name,
16
+ category,
17
+ css: baseReset + css,
18
+ });
19
+ export const markdownStyles = [
20
+ // ========================================
21
+ // BUSINESS / CORPORATE (1-10)
22
+ // ========================================
23
+ createStyle("corporate-blue", "business", `
24
+ body {
25
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
26
+ color: #fff; font-family: 'Segoe UI', sans-serif; padding: 60px;
27
+ }
28
+ h1 { font-size: 56px; font-weight: 700; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
29
+ h2 { font-size: 42px; border-bottom: 3px solid rgba(255,255,255,0.5); padding-bottom: 10px; }
30
+ ul { font-size: 28px; margin-left: 40px; }
31
+ li { margin: 15px 0; }
32
+ `),
33
+ createStyle("executive-gray", "business", `
34
+ body {
35
+ background: linear-gradient(180deg, #2c3e50 0%, #4a5568 100%);
36
+ color: #f7fafc; font-family: 'Georgia', serif; padding: 60px;
37
+ }
38
+ h1 { font-size: 52px; font-weight: 400; letter-spacing: 2px; border-left: 5px solid #e2b714; padding-left: 20px; }
39
+ h2 { font-size: 38px; color: #e2b714; }
40
+ ul { font-size: 26px; }
41
+ li { margin: 12px 0; }
42
+ `),
43
+ createStyle("finance-green", "business", `
44
+ body {
45
+ background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
46
+ color: #fff; font-family: 'Arial', sans-serif; padding: 60px;
47
+ }
48
+ h1 { font-size: 54px; text-align: center; margin-bottom: 40px; }
49
+ h2 { font-size: 40px; }
50
+ ul { font-size: 28px; background: rgba(255,255,255,0.1); padding: 30px; border-radius: 10px; }
51
+ `),
52
+ createStyle("startup-orange", "business", `
53
+ body {
54
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
55
+ color: #fff; font-family: 'Helvetica Neue', sans-serif; padding: 60px;
56
+ }
57
+ h1 { font-size: 58px; font-weight: 800; }
58
+ h2 { font-size: 42px; }
59
+ ul { font-size: 28px; }
60
+ li::marker { color: #fff; }
61
+ `),
62
+ createStyle("consulting-navy", "business", `
63
+ body {
64
+ background: #1a365d; color: #fff;
65
+ font-family: 'Times New Roman', serif; padding: 60px;
66
+ }
67
+ h1 { font-size: 50px; color: #90cdf4; border-bottom: 2px solid #90cdf4; }
68
+ h2 { font-size: 36px; }
69
+ ul { font-size: 26px; }
70
+ `),
71
+ createStyle("professional-white", "business", `
72
+ body {
73
+ background: #fff; color: #1a202c;
74
+ font-family: 'Segoe UI', sans-serif; padding: 60px;
75
+ border-left: 8px solid #3182ce;
76
+ }
77
+ h1 { font-size: 52px; color: #2b6cb0; }
78
+ h2 { font-size: 38px; color: #4a5568; }
79
+ ul { font-size: 26px; }
80
+ `),
81
+ createStyle("corporate-teal", "business", `
82
+ body {
83
+ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
84
+ color: #e0f2f1; font-family: 'Arial', sans-serif; padding: 60px;
85
+ }
86
+ h1 { font-size: 54px; color: #4fd1c5; }
87
+ h2 { font-size: 40px; }
88
+ ul { font-size: 28px; }
89
+ `),
90
+ createStyle("enterprise-purple", "business", `
91
+ body {
92
+ background: linear-gradient(135deg, #2e1065 0%, #581c87 100%);
93
+ color: #f3e8ff; font-family: 'Georgia', serif; padding: 60px;
94
+ }
95
+ h1 { font-size: 52px; }
96
+ h2 { font-size: 38px; color: #c4b5fd; }
97
+ ul { font-size: 26px; }
98
+ `),
99
+ createStyle("banking-gold", "business", `
100
+ body {
101
+ background: linear-gradient(135deg, #232526 0%, #414345 100%);
102
+ color: #fff; font-family: 'Palatino', serif; padding: 60px;
103
+ }
104
+ h1 { font-size: 50px; color: #d4af37; border-bottom: 2px solid #d4af37; }
105
+ h2 { font-size: 36px; color: #d4af37; }
106
+ ul { font-size: 26px; }
107
+ `),
108
+ createStyle("modern-corporate", "business", `
109
+ body {
110
+ background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
111
+ color: #2d3748; font-family: 'SF Pro Display', sans-serif; padding: 60px;
112
+ }
113
+ h1 { font-size: 56px; background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
114
+ h2 { font-size: 40px; }
115
+ ul { font-size: 28px; }
116
+ `),
117
+ // ========================================
118
+ // TECH / CYBER (11-20)
119
+ // ========================================
120
+ createStyle("cyber-neon", "tech", `
121
+ body {
122
+ background: #0a0a0a; color: #00ff88;
123
+ font-family: 'Courier New', monospace; padding: 60px;
124
+ }
125
+ h1 { font-size: 54px; text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88; }
126
+ h2 { font-size: 40px; color: #ff00ff; text-shadow: 0 0 10px #ff00ff; }
127
+ ul { font-size: 26px; border-left: 3px solid #00ff88; padding-left: 20px; }
128
+ `),
129
+ createStyle("terminal-dark", "tech", `
130
+ body {
131
+ background: #1e1e1e; color: #d4d4d4;
132
+ font-family: 'Fira Code', 'Consolas', monospace; padding: 60px;
133
+ }
134
+ h1 { font-size: 48px; color: #569cd6; }
135
+ h1::before { content: '> '; color: #608b4e; }
136
+ h2 { font-size: 36px; color: #ce9178; }
137
+ ul { font-size: 24px; }
138
+ code { background: #2d2d2d; padding: 2px 6px; border-radius: 3px; }
139
+ `),
140
+ createStyle("gradient-purple", "tech", `
141
+ body {
142
+ background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
143
+ color: #fff; font-family: 'Inter', sans-serif; padding: 60px;
144
+ }
145
+ h1 { font-size: 56px; font-weight: 800; }
146
+ h2 { font-size: 42px; }
147
+ ul { font-size: 28px; background: rgba(0,0,0,0.2); padding: 30px; border-radius: 15px; }
148
+ `),
149
+ createStyle("matrix-green", "tech", `
150
+ body {
151
+ background: #000; color: #00ff00;
152
+ font-family: 'Courier New', monospace; padding: 60px;
153
+ }
154
+ h1 { font-size: 50px; text-shadow: 0 0 10px #00ff00; animation: flicker 2s infinite; }
155
+ h2 { font-size: 38px; }
156
+ ul { font-size: 26px; }
157
+ @keyframes flicker { 0%,100%{opacity:1} 50%{opacity:0.8} }
158
+ `),
159
+ createStyle("ai-blue", "tech", `
160
+ body {
161
+ background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
162
+ color: #e0f2fe; font-family: 'Roboto', sans-serif; padding: 60px;
163
+ }
164
+ h1 { font-size: 54px; color: #38bdf8; }
165
+ h2 { font-size: 40px; color: #7dd3fc; }
166
+ ul { font-size: 28px; }
167
+ li::marker { color: #38bdf8; }
168
+ `),
169
+ createStyle("hologram", "tech", `
170
+ body {
171
+ background: linear-gradient(135deg, #0c1445 0%, #1a1a40 100%);
172
+ color: #00d4ff; font-family: 'Orbitron', sans-serif; padding: 60px;
173
+ }
174
+ h1 { font-size: 52px; text-shadow: 0 0 30px rgba(0,212,255,0.5); }
175
+ h2 { font-size: 38px; border-bottom: 1px solid rgba(0,212,255,0.3); }
176
+ ul { font-size: 26px; }
177
+ `),
178
+ createStyle("circuit-board", "tech", `
179
+ body {
180
+ background: #1a1a2e; color: #4ade80;
181
+ font-family: 'JetBrains Mono', monospace; padding: 60px;
182
+ background-image:
183
+ linear-gradient(rgba(74,222,128,0.1) 1px, transparent 1px),
184
+ linear-gradient(90deg, rgba(74,222,128,0.1) 1px, transparent 1px);
185
+ background-size: 30px 30px;
186
+ }
187
+ h1 { font-size: 50px; }
188
+ h2 { font-size: 38px; }
189
+ ul { font-size: 26px; }
190
+ `),
191
+ createStyle("dark-code", "tech", `
192
+ body {
193
+ background: #282c34; color: #abb2bf;
194
+ font-family: 'Source Code Pro', monospace; padding: 60px;
195
+ }
196
+ h1 { font-size: 48px; color: #61afef; }
197
+ h2 { font-size: 36px; color: #c678dd; }
198
+ ul { font-size: 24px; }
199
+ pre { background: #21252b; padding: 20px; border-radius: 8px; }
200
+ `),
201
+ createStyle("cyberpunk", "tech", `
202
+ body {
203
+ background: linear-gradient(135deg, #0d0221 0%, #150734 100%);
204
+ color: #ff2a6d; font-family: 'Orbitron', sans-serif; padding: 60px;
205
+ }
206
+ h1 { font-size: 54px; color: #05d9e8; text-shadow: 3px 3px 0 #ff2a6d; }
207
+ h2 { font-size: 40px; color: #d1f7ff; }
208
+ ul { font-size: 26px; color: #fff; }
209
+ `),
210
+ createStyle("blockchain", "tech", `
211
+ body {
212
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
213
+ color: #f7931a; font-family: 'Inter', sans-serif; padding: 60px;
214
+ }
215
+ h1 { font-size: 52px; }
216
+ h2 { font-size: 40px; color: #fff; }
217
+ ul { font-size: 28px; color: #e0e0e0; }
218
+ `),
219
+ // ========================================
220
+ // CREATIVE / ARTISTIC (21-30)
221
+ // ========================================
222
+ createStyle("artistic-splash", "creative", `
223
+ body {
224
+ background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);
225
+ color: #fff; font-family: 'Playfair Display', serif; padding: 60px;
226
+ }
227
+ h1 { font-size: 58px; font-style: italic; text-shadow: 3px 3px 6px rgba(0,0,0,0.3); }
228
+ h2 { font-size: 42px; }
229
+ ul { font-size: 28px; }
230
+ `),
231
+ createStyle("watercolor-soft", "creative", `
232
+ body {
233
+ background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
234
+ color: #5d4e37; font-family: 'Dancing Script', cursive; padding: 60px;
235
+ }
236
+ h1 { font-size: 60px; color: #c44569; }
237
+ h2 { font-size: 44px; color: #f8b500; }
238
+ ul { font-size: 30px; font-family: 'Georgia', serif; }
239
+ `),
240
+ createStyle("bold-pop", "creative", `
241
+ body {
242
+ background: #fff500; color: #000;
243
+ font-family: 'Impact', sans-serif; padding: 60px;
244
+ }
245
+ h1 { font-size: 64px; text-transform: uppercase; }
246
+ h2 { font-size: 48px; color: #ff0066; }
247
+ ul { font-size: 30px; font-family: 'Arial Black', sans-serif; }
248
+ `),
249
+ createStyle("pastel-dream", "creative", `
250
+ body {
251
+ background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
252
+ color: #4a4a4a; font-family: 'Quicksand', sans-serif; padding: 60px;
253
+ }
254
+ h1 { font-size: 54px; color: #6c5ce7; }
255
+ h2 { font-size: 40px; color: #fd79a8; }
256
+ ul { font-size: 28px; }
257
+ `),
258
+ createStyle("graffiti", "creative", `
259
+ body {
260
+ background: #1a1a1a; color: #fff;
261
+ font-family: 'Permanent Marker', cursive; padding: 60px;
262
+ }
263
+ h1 { font-size: 58px; color: #ff6b6b; transform: rotate(-2deg); }
264
+ h2 { font-size: 44px; color: #4ecdc4; }
265
+ ul { font-size: 28px; }
266
+ `),
267
+ createStyle("neon-glow", "creative", `
268
+ body {
269
+ background: #1a1a2e; color: #fff;
270
+ font-family: 'Montserrat', sans-serif; padding: 60px;
271
+ }
272
+ h1 { font-size: 56px; color: #ff00ff; text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; }
273
+ h2 { font-size: 42px; color: #00ffff; text-shadow: 0 0 15px #00ffff; }
274
+ ul { font-size: 28px; }
275
+ `),
276
+ createStyle("retro-comic", "creative", `
277
+ body {
278
+ background: #fffbe6; color: #333;
279
+ font-family: 'Comic Sans MS', cursive; padding: 60px;
280
+ background-image: radial-gradient(circle, #000 1px, transparent 1px);
281
+ background-size: 20px 20px;
282
+ }
283
+ h1 { font-size: 52px; color: #e74c3c; text-shadow: 3px 3px 0 #f1c40f; }
284
+ h2 { font-size: 40px; }
285
+ ul { font-size: 28px; }
286
+ `),
287
+ createStyle("abstract-shapes", "creative", `
288
+ body {
289
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
290
+ color: #fff; font-family: 'Poppins', sans-serif; padding: 60px;
291
+ }
292
+ h1 { font-size: 54px; }
293
+ h2 { font-size: 40px; }
294
+ ul { font-size: 28px; background: rgba(255,255,255,0.15); padding: 25px; border-radius: 20px; }
295
+ `),
296
+ createStyle("vintage-poster", "creative", `
297
+ body {
298
+ background: #f4e4bc; color: #2c1810;
299
+ font-family: 'Playfair Display', serif; padding: 60px;
300
+ }
301
+ h1 { font-size: 56px; color: #8b0000; text-transform: uppercase; letter-spacing: 5px; }
302
+ h2 { font-size: 40px; border-bottom: 3px double #2c1810; }
303
+ ul { font-size: 28px; }
304
+ `),
305
+ createStyle("rainbow-gradient", "creative", `
306
+ body {
307
+ background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
308
+ color: #fff; font-family: 'Fredoka One', cursive; padding: 60px;
309
+ }
310
+ h1 { font-size: 58px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
311
+ h2 { font-size: 44px; }
312
+ ul { font-size: 30px; background: rgba(0,0,0,0.3); padding: 25px; border-radius: 15px; }
313
+ `),
314
+ // ========================================
315
+ // MINIMALIST (31-40)
316
+ // ========================================
317
+ createStyle("clean-white", "minimalist", `
318
+ body {
319
+ background: #ffffff; color: #1a1a1a;
320
+ font-family: 'Helvetica Neue', sans-serif; padding: 80px;
321
+ }
322
+ h1 { font-size: 48px; font-weight: 300; letter-spacing: -1px; }
323
+ h2 { font-size: 32px; font-weight: 300; color: #666; }
324
+ ul { font-size: 24px; font-weight: 300; }
325
+ li { margin: 20px 0; }
326
+ `),
327
+ createStyle("zen-beige", "minimalist", `
328
+ body {
329
+ background: #f5f0e8; color: #3d3d3d;
330
+ font-family: 'Noto Serif', serif; padding: 80px;
331
+ }
332
+ h1 { font-size: 46px; font-weight: 400; }
333
+ h2 { font-size: 32px; color: #8b7355; }
334
+ ul { font-size: 24px; }
335
+ `),
336
+ createStyle("nordic-light", "minimalist", `
337
+ body {
338
+ background: #f0f4f8; color: #2d3748;
339
+ font-family: 'Inter', sans-serif; padding: 80px;
340
+ }
341
+ h1 { font-size: 50px; font-weight: 600; }
342
+ h2 { font-size: 34px; color: #4a5568; }
343
+ ul { font-size: 26px; }
344
+ `),
345
+ createStyle("paper-minimal", "minimalist", `
346
+ body {
347
+ background: #fffef9; color: #333;
348
+ font-family: 'Merriweather', serif; padding: 80px;
349
+ border: 1px solid #e0e0e0;
350
+ }
351
+ h1 { font-size: 44px; font-weight: 400; }
352
+ h2 { font-size: 30px; }
353
+ ul { font-size: 24px; }
354
+ `),
355
+ createStyle("swiss-design", "minimalist", `
356
+ body {
357
+ background: #fff; color: #000;
358
+ font-family: 'Helvetica', sans-serif; padding: 60px;
359
+ }
360
+ h1 { font-size: 72px; font-weight: 700; line-height: 1; }
361
+ h2 { font-size: 36px; color: #ff0000; }
362
+ ul { font-size: 24px; }
363
+ `),
364
+ createStyle("soft-gray", "minimalist", `
365
+ body {
366
+ background: #f8f9fa; color: #495057;
367
+ font-family: 'Roboto', sans-serif; padding: 80px;
368
+ }
369
+ h1 { font-size: 48px; color: #212529; }
370
+ h2 { font-size: 32px; }
371
+ ul { font-size: 24px; }
372
+ `),
373
+ createStyle("mono-elegant", "minimalist", `
374
+ body {
375
+ background: #1a1a1a; color: #f0f0f0;
376
+ font-family: 'SF Mono', monospace; padding: 80px;
377
+ }
378
+ h1 { font-size: 44px; font-weight: 300; letter-spacing: 3px; }
379
+ h2 { font-size: 28px; color: #888; }
380
+ ul { font-size: 22px; }
381
+ `),
382
+ createStyle("airy-blue", "minimalist", `
383
+ body {
384
+ background: #f0f7ff; color: #1e3a5f;
385
+ font-family: 'Open Sans', sans-serif; padding: 80px;
386
+ }
387
+ h1 { font-size: 50px; font-weight: 300; }
388
+ h2 { font-size: 34px; color: #3182ce; }
389
+ ul { font-size: 26px; }
390
+ `),
391
+ createStyle("cream-simple", "minimalist", `
392
+ body {
393
+ background: #fdfcf8; color: #4a4a4a;
394
+ font-family: 'Lora', serif; padding: 80px;
395
+ }
396
+ h1 { font-size: 48px; }
397
+ h2 { font-size: 32px; color: #8b7355; }
398
+ ul { font-size: 26px; }
399
+ `),
400
+ createStyle("ultra-minimal", "minimalist", `
401
+ body {
402
+ background: #fff; color: #000;
403
+ font-family: 'Arial', sans-serif; padding: 100px;
404
+ }
405
+ h1 { font-size: 40px; font-weight: 400; margin-bottom: 60px; }
406
+ h2 { font-size: 28px; }
407
+ ul { font-size: 22px; list-style: none; }
408
+ li { border-bottom: 1px solid #eee; padding: 15px 0; }
409
+ `),
410
+ // ========================================
411
+ // NATURE (41-50)
412
+ // ========================================
413
+ createStyle("forest-green", "nature", `
414
+ body {
415
+ background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
416
+ color: #fff; font-family: 'Georgia', serif; padding: 60px;
417
+ }
418
+ h1 { font-size: 54px; }
419
+ h2 { font-size: 40px; color: #a8e6cf; }
420
+ ul { font-size: 28px; }
421
+ `),
422
+ createStyle("ocean-blue", "nature", `
423
+ body {
424
+ background: linear-gradient(180deg, #0077b6 0%, #023e8a 100%);
425
+ color: #fff; font-family: 'Lato', sans-serif; padding: 60px;
426
+ }
427
+ h1 { font-size: 56px; color: #90e0ef; }
428
+ h2 { font-size: 42px; }
429
+ ul { font-size: 28px; }
430
+ `),
431
+ createStyle("sunset-orange", "nature", `
432
+ body {
433
+ background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
434
+ color: #fff; font-family: 'Montserrat', sans-serif; padding: 60px;
435
+ }
436
+ h1 { font-size: 58px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
437
+ h2 { font-size: 44px; }
438
+ ul { font-size: 30px; }
439
+ `),
440
+ createStyle("autumn-leaves", "nature", `
441
+ body {
442
+ background: linear-gradient(135deg, #834d18 0%, #bf6a41 50%, #d4a574 100%);
443
+ color: #fff8e7; font-family: 'Crimson Text', serif; padding: 60px;
444
+ }
445
+ h1 { font-size: 52px; }
446
+ h2 { font-size: 38px; color: #ffd93d; }
447
+ ul { font-size: 28px; }
448
+ `),
449
+ createStyle("spring-bloom", "nature", `
450
+ body {
451
+ background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
452
+ color: #5d4037; font-family: 'Playfair Display', serif; padding: 60px;
453
+ }
454
+ h1 { font-size: 54px; color: #e91e63; }
455
+ h2 { font-size: 40px; color: #8bc34a; }
456
+ ul { font-size: 28px; }
457
+ `),
458
+ createStyle("mountain-mist", "nature", `
459
+ body {
460
+ background: linear-gradient(180deg, #bdc3c7 0%, #2c3e50 100%);
461
+ color: #fff; font-family: 'Raleway', sans-serif; padding: 60px;
462
+ }
463
+ h1 { font-size: 52px; }
464
+ h2 { font-size: 38px; }
465
+ ul { font-size: 28px; }
466
+ `),
467
+ createStyle("tropical-vibes", "nature", `
468
+ body {
469
+ background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
470
+ color: #fff; font-family: 'Nunito', sans-serif; padding: 60px;
471
+ }
472
+ h1 { font-size: 56px; }
473
+ h2 { font-size: 42px; }
474
+ ul { font-size: 28px; background: rgba(0,0,0,0.15); padding: 25px; border-radius: 15px; }
475
+ `),
476
+ createStyle("desert-sand", "nature", `
477
+ body {
478
+ background: linear-gradient(135deg, #c2b280 0%, #f4e4bc 100%);
479
+ color: #5d4037; font-family: 'Libre Baskerville', serif; padding: 60px;
480
+ }
481
+ h1 { font-size: 50px; color: #8b4513; }
482
+ h2 { font-size: 36px; }
483
+ ul { font-size: 26px; }
484
+ `),
485
+ createStyle("night-sky", "nature", `
486
+ body {
487
+ background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
488
+ color: #fff; font-family: 'Quicksand', sans-serif; padding: 60px;
489
+ }
490
+ h1 { font-size: 54px; color: #f9d71c; }
491
+ h2 { font-size: 40px; color: #87ceeb; }
492
+ ul { font-size: 28px; }
493
+ `),
494
+ createStyle("lavender-field", "nature", `
495
+ body {
496
+ background: linear-gradient(135deg, #e6e6fa 0%, #9370db 100%);
497
+ color: #4b0082; font-family: 'Cormorant Garamond', serif; padding: 60px;
498
+ }
499
+ h1 { font-size: 52px; }
500
+ h2 { font-size: 38px; }
501
+ ul { font-size: 28px; color: #2e0854; }
502
+ `),
503
+ // ========================================
504
+ // DARK MODE (51-60)
505
+ // ========================================
506
+ createStyle("charcoal-elegant", "dark", `
507
+ body {
508
+ background: #1a1a1a; color: #e0e0e0;
509
+ font-family: 'Playfair Display', serif; padding: 60px;
510
+ }
511
+ h1 { font-size: 52px; color: #fff; }
512
+ h2 { font-size: 38px; color: #b0b0b0; }
513
+ ul { font-size: 26px; }
514
+ `),
515
+ createStyle("midnight-blue", "dark", `
516
+ body {
517
+ background: linear-gradient(180deg, #0d1b2a 0%, #1b263b 100%);
518
+ color: #e0e1dd; font-family: 'Roboto', sans-serif; padding: 60px;
519
+ }
520
+ h1 { font-size: 54px; color: #778da9; }
521
+ h2 { font-size: 40px; }
522
+ ul { font-size: 28px; }
523
+ `),
524
+ createStyle("dark-gradient", "dark", `
525
+ body {
526
+ background: linear-gradient(135deg, #232526 0%, #414345 100%);
527
+ color: #fff; font-family: 'Inter', sans-serif; padding: 60px;
528
+ }
529
+ h1 { font-size: 56px; }
530
+ h2 { font-size: 42px; color: #a0a0a0; }
531
+ ul { font-size: 28px; }
532
+ `),
533
+ createStyle("deep-purple-dark", "dark", `
534
+ body {
535
+ background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 100%);
536
+ color: #e8d5f2; font-family: 'Nunito', sans-serif; padding: 60px;
537
+ }
538
+ h1 { font-size: 54px; color: #bb86fc; }
539
+ h2 { font-size: 40px; color: #cf6679; }
540
+ ul { font-size: 28px; }
541
+ `),
542
+ createStyle("obsidian", "dark", `
543
+ body {
544
+ background: #0b0c10; color: #c5c6c7;
545
+ font-family: 'Source Sans Pro', sans-serif; padding: 60px;
546
+ }
547
+ h1 { font-size: 52px; color: #66fcf1; }
548
+ h2 { font-size: 38px; color: #45a29e; }
549
+ ul { font-size: 26px; }
550
+ `),
551
+ createStyle("dark-forest", "dark", `
552
+ body {
553
+ background: linear-gradient(180deg, #0d1f0d 0%, #1a3a1a 100%);
554
+ color: #a8d5a2; font-family: 'Merriweather', serif; padding: 60px;
555
+ }
556
+ h1 { font-size: 50px; color: #90ee90; }
557
+ h2 { font-size: 36px; }
558
+ ul { font-size: 26px; }
559
+ `),
560
+ createStyle("dark-ocean", "dark", `
561
+ body {
562
+ background: linear-gradient(180deg, #0a1628 0%, #1a3a5c 100%);
563
+ color: #b8d4e8; font-family: 'Lato', sans-serif; padding: 60px;
564
+ }
565
+ h1 { font-size: 54px; color: #4fc3f7; }
566
+ h2 { font-size: 40px; }
567
+ ul { font-size: 28px; }
568
+ `),
569
+ createStyle("slate-dark", "dark", `
570
+ body {
571
+ background: #1e293b; color: #e2e8f0;
572
+ font-family: 'Inter', sans-serif; padding: 60px;
573
+ }
574
+ h1 { font-size: 52px; color: #f8fafc; }
575
+ h2 { font-size: 38px; color: #94a3b8; }
576
+ ul { font-size: 26px; }
577
+ `),
578
+ createStyle("noir", "dark", `
579
+ body {
580
+ background: #000; color: #fff;
581
+ font-family: 'Bodoni Moda', serif; padding: 60px;
582
+ }
583
+ h1 { font-size: 56px; font-style: italic; }
584
+ h2 { font-size: 40px; color: #888; }
585
+ ul { font-size: 28px; }
586
+ `),
587
+ createStyle("carbon-fiber", "dark", `
588
+ body {
589
+ background: #111; color: #ddd;
590
+ font-family: 'Exo 2', sans-serif; padding: 60px;
591
+ background-image:
592
+ linear-gradient(45deg, #222 25%, transparent 25%),
593
+ linear-gradient(-45deg, #222 25%, transparent 25%),
594
+ linear-gradient(45deg, transparent 75%, #222 75%),
595
+ linear-gradient(-45deg, transparent 75%, #222 75%);
596
+ background-size: 10px 10px;
597
+ }
598
+ h1 { font-size: 50px; color: #00bcd4; }
599
+ h2 { font-size: 36px; }
600
+ ul { font-size: 26px; }
601
+ `),
602
+ // ========================================
603
+ // COLORFUL / VIBRANT (61-70)
604
+ // ========================================
605
+ createStyle("vibrant-pink", "colorful", `
606
+ body {
607
+ background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
608
+ color: #fff; font-family: 'Poppins', sans-serif; padding: 60px;
609
+ }
610
+ h1 { font-size: 58px; font-weight: 700; }
611
+ h2 { font-size: 44px; }
612
+ ul { font-size: 30px; }
613
+ `),
614
+ createStyle("electric-blue", "colorful", `
615
+ body {
616
+ background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
617
+ color: #fff; font-family: 'Montserrat', sans-serif; padding: 60px;
618
+ }
619
+ h1 { font-size: 56px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
620
+ h2 { font-size: 42px; }
621
+ ul { font-size: 28px; }
622
+ `),
623
+ createStyle("lime-green", "colorful", `
624
+ body {
625
+ background: linear-gradient(135deg, #c6ff00 0%, #00e676 100%);
626
+ color: #1a1a1a; font-family: 'Nunito', sans-serif; padding: 60px;
627
+ }
628
+ h1 { font-size: 54px; }
629
+ h2 { font-size: 40px; }
630
+ ul { font-size: 28px; }
631
+ `),
632
+ createStyle("candy-colors", "colorful", `
633
+ body {
634
+ background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
635
+ color: #5d4037; font-family: 'Quicksand', sans-serif; padding: 60px;
636
+ }
637
+ h1 { font-size: 54px; color: #e91e63; }
638
+ h2 { font-size: 40px; color: #9c27b0; }
639
+ ul { font-size: 28px; }
640
+ `),
641
+ createStyle("sunset-vibes", "colorful", `
642
+ body {
643
+ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
644
+ color: #fff; font-family: 'Josefin Sans', sans-serif; padding: 60px;
645
+ }
646
+ h1 { font-size: 58px; }
647
+ h2 { font-size: 44px; }
648
+ ul { font-size: 30px; }
649
+ `),
650
+ createStyle("aurora", "colorful", `
651
+ body {
652
+ background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
653
+ color: #1a365d; font-family: 'Raleway', sans-serif; padding: 60px;
654
+ }
655
+ h1 { font-size: 54px; }
656
+ h2 { font-size: 40px; }
657
+ ul { font-size: 28px; }
658
+ `),
659
+ createStyle("fiesta", "colorful", `
660
+ body {
661
+ background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
662
+ color: #fff; font-family: 'Fredoka One', cursive; padding: 60px;
663
+ }
664
+ h1 { font-size: 60px; }
665
+ h2 { font-size: 46px; }
666
+ ul { font-size: 32px; }
667
+ `),
668
+ createStyle("cosmic", "colorful", `
669
+ body {
670
+ background: linear-gradient(135deg, #7f00ff 0%, #e100ff 100%);
671
+ color: #fff; font-family: 'Orbitron', sans-serif; padding: 60px;
672
+ }
673
+ h1 { font-size: 52px; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
674
+ h2 { font-size: 38px; }
675
+ ul { font-size: 26px; }
676
+ `),
677
+ createStyle("mango-tango", "colorful", `
678
+ body {
679
+ background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%);
680
+ color: #5d4037; font-family: 'Nunito', sans-serif; padding: 60px;
681
+ }
682
+ h1 { font-size: 56px; color: #e65100; }
683
+ h2 { font-size: 42px; }
684
+ ul { font-size: 28px; }
685
+ `),
686
+ createStyle("grape-soda", "colorful", `
687
+ body {
688
+ background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
689
+ color: #fff; font-family: 'Poppins', sans-serif; padding: 60px;
690
+ }
691
+ h1 { font-size: 56px; }
692
+ h2 { font-size: 42px; color: #fde68a; }
693
+ ul { font-size: 28px; }
694
+ `),
695
+ // ========================================
696
+ // VINTAGE / RETRO (71-80)
697
+ // ========================================
698
+ createStyle("retro-70s", "vintage", `
699
+ body {
700
+ background: #f4a460; color: #8b4513;
701
+ font-family: 'Abril Fatface', cursive; padding: 60px;
702
+ }
703
+ h1 { font-size: 58px; color: #cd853f; }
704
+ h2 { font-size: 42px; color: #d2691e; }
705
+ ul { font-size: 28px; font-family: 'Georgia', serif; }
706
+ `),
707
+ createStyle("paper-texture", "vintage", `
708
+ body {
709
+ background: #f5f5dc; color: #3e2723;
710
+ font-family: 'Libre Baskerville', serif; padding: 60px;
711
+ }
712
+ h1 { font-size: 48px; }
713
+ h2 { font-size: 34px; }
714
+ ul { font-size: 26px; }
715
+ `),
716
+ createStyle("typewriter", "vintage", `
717
+ body {
718
+ background: #fffef0; color: #2c2c2c;
719
+ font-family: 'Courier Prime', monospace; padding: 60px;
720
+ }
721
+ h1 { font-size: 44px; }
722
+ h2 { font-size: 32px; }
723
+ ul { font-size: 24px; }
724
+ li { margin: 15px 0; }
725
+ `),
726
+ createStyle("sepia-photo", "vintage", `
727
+ body {
728
+ background: linear-gradient(135deg, #d4a574 0%, #c2956e 100%);
729
+ color: #3e2723; font-family: 'Playfair Display', serif; padding: 60px;
730
+ }
731
+ h1 { font-size: 52px; }
732
+ h2 { font-size: 38px; }
733
+ ul { font-size: 26px; }
734
+ `),
735
+ createStyle("art-deco", "vintage", `
736
+ body {
737
+ background: #1a1a2e; color: #d4af37;
738
+ font-family: 'Poiret One', cursive; padding: 60px;
739
+ }
740
+ h1 { font-size: 56px; letter-spacing: 5px; border-bottom: 3px solid #d4af37; }
741
+ h2 { font-size: 40px; }
742
+ ul { font-size: 28px; color: #f0e6d3; }
743
+ `),
744
+ createStyle("newspaper", "vintage", `
745
+ body {
746
+ background: #f5f5f0; color: #1a1a1a;
747
+ font-family: 'Times New Roman', serif; padding: 60px;
748
+ column-count: 1;
749
+ }
750
+ h1 { font-size: 48px; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #000; }
751
+ h2 { font-size: 32px; font-style: italic; }
752
+ ul { font-size: 24px; }
753
+ `),
754
+ createStyle("polaroid", "vintage", `
755
+ body {
756
+ background: #e8dcc4; color: #4a4a4a;
757
+ font-family: 'Patrick Hand', cursive; padding: 60px;
758
+ }
759
+ h1 { font-size: 52px; color: #8b4513; }
760
+ h2 { font-size: 38px; }
761
+ ul { font-size: 28px; background: #fff; padding: 30px; box-shadow: 5px 5px 15px rgba(0,0,0,0.2); }
762
+ `),
763
+ createStyle("old-book", "vintage", `
764
+ body {
765
+ background: #f4ecd8; color: #2c1810;
766
+ font-family: 'EB Garamond', serif; padding: 60px;
767
+ }
768
+ h1 { font-size: 50px; font-variant: small-caps; }
769
+ h2 { font-size: 36px; }
770
+ ul { font-size: 26px; }
771
+ `),
772
+ createStyle("vinyl-record", "vintage", `
773
+ body {
774
+ background: #1a1a1a; color: #f0e6d3;
775
+ font-family: 'Righteous', cursive; padding: 60px;
776
+ }
777
+ h1 { font-size: 54px; color: #ff6b35; }
778
+ h2 { font-size: 40px; color: #f7c59f; }
779
+ ul { font-size: 28px; }
780
+ `),
781
+ createStyle("mid-century", "vintage", `
782
+ body {
783
+ background: #f7c59f; color: #2d3436;
784
+ font-family: 'Josefin Sans', sans-serif; padding: 60px;
785
+ }
786
+ h1 { font-size: 52px; color: #d35400; }
787
+ h2 { font-size: 38px; color: #16a085; }
788
+ ul { font-size: 28px; }
789
+ `),
790
+ // ========================================
791
+ // JAPANESE (81-90)
792
+ // ========================================
793
+ createStyle("washi-paper", "japanese", `
794
+ body {
795
+ background: #f5f0e6; color: #3d3d3d;
796
+ font-family: 'Noto Serif JP', serif; padding: 60px;
797
+ }
798
+ h1 { font-size: 48px; color: #8b0000; }
799
+ h2 { font-size: 34px; color: #556b2f; }
800
+ ul { font-size: 26px; }
801
+ `),
802
+ createStyle("sumi-ink", "japanese", `
803
+ body {
804
+ background: #f5f5f0; color: #1a1a1a;
805
+ font-family: 'Noto Serif JP', serif; padding: 60px;
806
+ }
807
+ h1 { font-size: 52px; font-weight: 600; }
808
+ h2 { font-size: 38px; }
809
+ ul { font-size: 26px; border-left: 3px solid #1a1a1a; padding-left: 20px; }
810
+ `),
811
+ createStyle("sakura-pink", "japanese", `
812
+ body {
813
+ background: linear-gradient(180deg, #fff5f5 0%, #ffd1dc 100%);
814
+ color: #5d4037; font-family: 'Noto Sans JP', sans-serif; padding: 60px;
815
+ }
816
+ h1 { font-size: 50px; color: #d81b60; }
817
+ h2 { font-size: 36px; color: #ec407a; }
818
+ ul { font-size: 26px; }
819
+ `),
820
+ createStyle("matcha-green", "japanese", `
821
+ body {
822
+ background: #dce8d4; color: #2d4a22;
823
+ font-family: 'Noto Serif JP', serif; padding: 60px;
824
+ }
825
+ h1 { font-size: 50px; color: #558b2f; }
826
+ h2 { font-size: 36px; }
827
+ ul { font-size: 26px; }
828
+ `),
829
+ createStyle("indigo-blue", "japanese", `
830
+ body {
831
+ background: #1a237e; color: #e8eaf6;
832
+ font-family: 'Noto Sans JP', sans-serif; padding: 60px;
833
+ }
834
+ h1 { font-size: 52px; color: #fff; }
835
+ h2 { font-size: 38px; color: #9fa8da; }
836
+ ul { font-size: 28px; }
837
+ `),
838
+ createStyle("autumn-maple", "japanese", `
839
+ body {
840
+ background: linear-gradient(135deg, #8b0000 0%, #d2691e 100%);
841
+ color: #fff8e7; font-family: 'Noto Serif JP', serif; padding: 60px;
842
+ }
843
+ h1 { font-size: 52px; }
844
+ h2 { font-size: 38px; color: #ffd700; }
845
+ ul { font-size: 28px; }
846
+ `),
847
+ createStyle("zen-garden", "japanese", `
848
+ body {
849
+ background: #e8e4d9; color: #4a4a4a;
850
+ font-family: 'Noto Serif JP', serif; padding: 80px;
851
+ }
852
+ h1 { font-size: 46px; font-weight: 400; letter-spacing: 3px; }
853
+ h2 { font-size: 32px; }
854
+ ul { font-size: 24px; }
855
+ `),
856
+ createStyle("ukiyo-e", "japanese", `
857
+ body {
858
+ background: #2e4057; color: #f4d06f;
859
+ font-family: 'Noto Serif JP', serif; padding: 60px;
860
+ }
861
+ h1 { font-size: 50px; }
862
+ h2 { font-size: 36px; color: #e8b4b8; }
863
+ ul { font-size: 26px; color: #f0e6d3; }
864
+ `),
865
+ createStyle("fuji-mountain", "japanese", `
866
+ body {
867
+ background: linear-gradient(180deg, #87ceeb 0%, #f5f5f5 60%, #556b2f 100%);
868
+ color: #2d3436; font-family: 'Noto Sans JP', sans-serif; padding: 60px;
869
+ }
870
+ h1 { font-size: 52px; color: #1a237e; }
871
+ h2 { font-size: 38px; }
872
+ ul { font-size: 28px; background: rgba(255,255,255,0.8); padding: 25px; border-radius: 10px; }
873
+ `),
874
+ createStyle("koi-pond", "japanese", `
875
+ body {
876
+ background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
877
+ color: #fff; font-family: 'Noto Serif JP', serif; padding: 60px;
878
+ }
879
+ h1 { font-size: 52px; color: #ff6b6b; }
880
+ h2 { font-size: 38px; color: #ffd700; }
881
+ ul { font-size: 28px; }
882
+ `),
883
+ // ========================================
884
+ // GEOMETRIC (91-100)
885
+ // ========================================
886
+ createStyle("hexagon-pattern", "geometric", `
887
+ body {
888
+ background: #1a1a2e; color: #fff;
889
+ font-family: 'Rajdhani', sans-serif; padding: 60px;
890
+ }
891
+ h1 { font-size: 54px; color: #00d9ff; }
892
+ h2 { font-size: 40px; color: #ff6b6b; }
893
+ ul { font-size: 28px; }
894
+ `),
895
+ createStyle("isometric", "geometric", `
896
+ body {
897
+ background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
898
+ color: #fff; font-family: 'Exo 2', sans-serif; padding: 60px;
899
+ }
900
+ h1 { font-size: 52px; }
901
+ h2 { font-size: 38px; color: #f1c40f; }
902
+ ul { font-size: 26px; }
903
+ `),
904
+ createStyle("grid-modern", "geometric", `
905
+ body {
906
+ background: #fff; color: #333;
907
+ font-family: 'Space Grotesk', sans-serif; padding: 60px;
908
+ background-image: linear-gradient(#eee 1px, transparent 1px), linear-gradient(90deg, #eee 1px, transparent 1px);
909
+ background-size: 40px 40px;
910
+ }
911
+ h1 { font-size: 56px; color: #e74c3c; }
912
+ h2 { font-size: 42px; color: #3498db; }
913
+ ul { font-size: 28px; }
914
+ `),
915
+ createStyle("triangles", "geometric", `
916
+ body {
917
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
918
+ color: #fff; font-family: 'Rajdhani', sans-serif; padding: 60px;
919
+ }
920
+ h1 { font-size: 58px; }
921
+ h2 { font-size: 44px; }
922
+ ul { font-size: 30px; }
923
+ `),
924
+ createStyle("circles-overlap", "geometric", `
925
+ body {
926
+ background: #f5f5f5; color: #333;
927
+ font-family: 'Nunito', sans-serif; padding: 60px;
928
+ }
929
+ h1 { font-size: 52px; color: #9c27b0; }
930
+ h2 { font-size: 38px; color: #e91e63; }
931
+ ul { font-size: 28px; }
932
+ `),
933
+ createStyle("diagonal-stripes", "geometric", `
934
+ body {
935
+ background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
936
+ color: #fff; font-family: 'Montserrat', sans-serif; padding: 60px;
937
+ }
938
+ h1 { font-size: 54px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
939
+ h2 { font-size: 40px; }
940
+ ul { font-size: 28px; background: rgba(0,0,0,0.3); padding: 25px; border-radius: 10px; }
941
+ `),
942
+ createStyle("bauhaus", "geometric", `
943
+ body {
944
+ background: #f5f5dc; color: #1a1a1a;
945
+ font-family: 'Futura', 'Trebuchet MS', sans-serif; padding: 60px;
946
+ }
947
+ h1 { font-size: 60px; color: #e74c3c; }
948
+ h2 { font-size: 44px; color: #3498db; }
949
+ ul { font-size: 28px; }
950
+ `),
951
+ createStyle("polka-dots", "geometric", `
952
+ body {
953
+ background: #fff; color: #333;
954
+ font-family: 'Quicksand', sans-serif; padding: 60px;
955
+ background-image: radial-gradient(#ff6b6b 10%, transparent 10%);
956
+ background-size: 30px 30px;
957
+ }
958
+ h1 { font-size: 52px; color: #e74c3c; }
959
+ h2 { font-size: 38px; }
960
+ ul { font-size: 28px; background: rgba(255,255,255,0.9); padding: 25px; }
961
+ `),
962
+ createStyle("waves", "geometric", `
963
+ body {
964
+ background: linear-gradient(180deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%);
965
+ color: #fff; font-family: 'Poppins', sans-serif; padding: 60px;
966
+ }
967
+ h1 { font-size: 56px; }
968
+ h2 { font-size: 42px; }
969
+ ul { font-size: 28px; }
970
+ `),
971
+ createStyle("mondrian", "geometric", `
972
+ body {
973
+ background: #f5f5f5; color: #1a1a1a;
974
+ font-family: 'Futura', sans-serif; padding: 60px;
975
+ border-left: 30px solid #e74c3c;
976
+ border-right: 30px solid #3498db;
977
+ }
978
+ h1 { font-size: 54px; }
979
+ h2 { font-size: 40px; color: #f1c40f; }
980
+ ul { font-size: 28px; }
981
+ `),
982
+ ];
983
+ // Style lookup by name
984
+ export const getMarkdownStyle = (styleName) => {
985
+ return markdownStyles.find((s) => s.name === styleName);
986
+ };
987
+ // Get all style names
988
+ export const getMarkdownStyleNames = () => {
989
+ return markdownStyles.map((s) => s.name);
990
+ };
991
+ // Get styles by category
992
+ export const getMarkdownStylesByCategory = (category) => {
993
+ return markdownStyles.filter((s) => s.category === category);
994
+ };
995
+ // Get all categories
996
+ export const getMarkdownCategories = () => {
997
+ return [...new Set(markdownStyles.map((s) => s.category))];
998
+ };