@liustack/pagepress 0.1.0

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,555 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>{{title}}</title>
8
+ <style>
9
+ /**
10
+ * Default Theme — Apple-inspired Design
11
+ * Clean, elegant, premium
12
+ */
13
+
14
+ :root {
15
+ --text-primary: #1d1d1f;
16
+ --text-secondary: #6e6e73;
17
+ --text-tertiary: #86868b;
18
+ --bg-primary: #ffffff;
19
+ --bg-secondary: #fbfbfd;
20
+ --border-color: #d2d2d7;
21
+ --accent: #0071e3;
22
+ --code-bg: #f5f5f7;
23
+ }
24
+
25
+ * {
26
+ box-sizing: border-box;
27
+ margin: 0;
28
+ padding: 0;
29
+ }
30
+
31
+ body {
32
+ font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
33
+ "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
34
+ font-size: 17px;
35
+ line-height: 1.65;
36
+ color: var(--text-primary);
37
+ background: var(--bg-primary);
38
+ -webkit-font-smoothing: antialiased;
39
+ -moz-osx-font-smoothing: grayscale;
40
+ -webkit-print-color-adjust: exact;
41
+ print-color-adjust: exact;
42
+ }
43
+
44
+ .container {
45
+ max-width: 900px;
46
+ margin: 0 auto;
47
+ padding: 96px 64px 140px;
48
+ }
49
+
50
+ /* Heading System */
51
+ h1,
52
+ h2,
53
+ h3,
54
+ h4,
55
+ h5,
56
+ h6 {
57
+ font-weight: 600;
58
+ line-height: 1.125;
59
+ letter-spacing: 0.004em;
60
+ margin-top: 1.5em;
61
+ margin-bottom: 0.5em;
62
+ }
63
+
64
+ h1 {
65
+ font-size: 40px;
66
+ line-height: 1.1;
67
+ letter-spacing: -0.005em;
68
+ margin-top: 0;
69
+ margin-bottom: 24px;
70
+ }
71
+
72
+ h2 {
73
+ font-size: 28px;
74
+ margin-top: 48px;
75
+ }
76
+
77
+ h3 {
78
+ font-size: 21px;
79
+ }
80
+
81
+ h4 {
82
+ font-size: 17px;
83
+ color: var(--text-secondary);
84
+ }
85
+
86
+ /* Paragraph */
87
+ p {
88
+ margin-bottom: 1.25em;
89
+ }
90
+
91
+ .lead {
92
+ font-size: 21px;
93
+ line-height: 1.6;
94
+ color: var(--text-secondary);
95
+ margin-bottom: 32px;
96
+ }
97
+
98
+ strong {
99
+ font-weight: 600;
100
+ }
101
+
102
+ a {
103
+ color: var(--accent);
104
+ text-decoration: none;
105
+ }
106
+
107
+ a:hover {
108
+ text-decoration: underline;
109
+ }
110
+
111
+ /* Lists */
112
+ ul,
113
+ ol {
114
+ margin: 0 0 1.25em;
115
+ padding-left: 1.5em;
116
+ }
117
+
118
+ li {
119
+ margin-bottom: 0.5em;
120
+ }
121
+
122
+ /* Blockquote - Clean Apple Style */
123
+ blockquote {
124
+ margin: 1.5em 0;
125
+ padding: 0 0 0 1.25em;
126
+ border-left: 4px solid var(--text-tertiary);
127
+ color: var(--text-secondary);
128
+ font-style: italic;
129
+ }
130
+
131
+ blockquote p {
132
+ font-size: 1.05em;
133
+ line-height: 1.6;
134
+ }
135
+
136
+ blockquote p:last-child {
137
+ margin-bottom: 0;
138
+ }
139
+
140
+ /* Code */
141
+ code {
142
+ font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
143
+ font-size: 0.875em;
144
+ padding: 0.2em 0.4em;
145
+ background: var(--code-bg);
146
+ border-radius: 6px;
147
+ color: #1d1d1f;
148
+ }
149
+
150
+ pre {
151
+ margin: 1.5em 0;
152
+ padding: 24px 28px;
153
+ background: var(--bg-secondary);
154
+ border: 1px solid var(--border-color);
155
+ border-radius: 12px;
156
+ overflow-x: auto;
157
+ font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
158
+ font-size: 14px;
159
+ line-height: 1.6;
160
+ color: #1d1d1f;
161
+ }
162
+
163
+ pre code {
164
+ display: block;
165
+ padding: 0;
166
+ background: transparent;
167
+ color: inherit;
168
+ border-radius: 0;
169
+ font-size: inherit;
170
+ font-family: inherit;
171
+ }
172
+
173
+ /* Light theme syntax highlighting */
174
+ pre .comment {
175
+ color: #6e6e73;
176
+ font-style: italic;
177
+ }
178
+
179
+ pre .keyword {
180
+ color: #9b2393;
181
+ font-weight: 600;
182
+ }
183
+
184
+ pre .string {
185
+ color: #c41a16;
186
+ }
187
+
188
+ pre .function {
189
+ color: #326d74;
190
+ }
191
+
192
+ pre .number {
193
+ color: #1c00cf;
194
+ }
195
+
196
+ pre .class {
197
+ color: #5c2699;
198
+ }
199
+
200
+ pre .operator {
201
+ color: #1d1d1f;
202
+ }
203
+
204
+ pre .punctuation {
205
+ color: #1d1d1f;
206
+ }
207
+
208
+ /* codehilite compatibility (class names generated by Markdown libraries) */
209
+ pre .hll {
210
+ background: rgba(255, 255, 0, 0.2);
211
+ }
212
+
213
+ pre .c,
214
+ pre .ch,
215
+ pre .cm,
216
+ pre .c1,
217
+ pre .cs {
218
+ color: #6e6e73;
219
+ font-style: italic;
220
+ }
221
+
222
+ pre .k,
223
+ pre .kc,
224
+ pre .kd,
225
+ pre .kn,
226
+ pre .kp,
227
+ pre .kr,
228
+ pre .kt {
229
+ color: #9b2393;
230
+ font-weight: 600;
231
+ }
232
+
233
+ pre .s,
234
+ pre .s1,
235
+ pre .s2,
236
+ pre .sa,
237
+ pre .sb,
238
+ pre .sc,
239
+ pre .sd,
240
+ pre .se,
241
+ pre .sh,
242
+ pre .si,
243
+ pre .sr,
244
+ pre .ss,
245
+ pre .sx {
246
+ color: #c41a16;
247
+ }
248
+
249
+ pre .n,
250
+ pre .na,
251
+ pre .nb,
252
+ pre .nc,
253
+ pre .nd,
254
+ pre .ne,
255
+ pre .ni,
256
+ pre .nl,
257
+ pre .nn,
258
+ pre .no,
259
+ pre .nt,
260
+ pre .nv {
261
+ color: #1d1d1f;
262
+ }
263
+
264
+ pre .nf,
265
+ pre .fm {
266
+ color: #326d74;
267
+ }
268
+
269
+ pre .o,
270
+ pre .ow {
271
+ color: #1d1d1f;
272
+ }
273
+
274
+ pre .p {
275
+ color: #1d1d1f;
276
+ }
277
+
278
+ pre .mi,
279
+ pre .mf,
280
+ pre .mh,
281
+ pre .mo,
282
+ pre .mb,
283
+ pre .il {
284
+ color: #1c00cf;
285
+ }
286
+
287
+ pre .bp {
288
+ color: #5c2699;
289
+ }
290
+
291
+ pre .vc,
292
+ pre .vg,
293
+ pre .vi,
294
+ pre .vm {
295
+ color: #c41a16;
296
+ }
297
+
298
+ /* Table - Apple style rounded corners */
299
+ table {
300
+ width: 100%;
301
+ margin: 1.5em 0;
302
+ border-collapse: separate;
303
+ border-spacing: 0;
304
+ font-size: 15px;
305
+ border: 1px solid var(--border-color);
306
+ border-radius: 12px;
307
+ overflow: hidden;
308
+ }
309
+
310
+ th,
311
+ td {
312
+ padding: 14px 20px;
313
+ text-align: left;
314
+ border-bottom: 1px solid var(--border-color);
315
+ }
316
+
317
+ th {
318
+ font-weight: 600;
319
+ color: var(--text-secondary);
320
+ font-size: 13px;
321
+ letter-spacing: 0.02em;
322
+ background: var(--bg-secondary);
323
+ }
324
+
325
+ tr:last-child td {
326
+ border-bottom: none;
327
+ }
328
+
329
+ /* Lists - Apple style */
330
+ ul,
331
+ ol {
332
+ margin: 1em 0;
333
+ padding-left: 1.5em;
334
+ }
335
+
336
+ li {
337
+ margin: 0.5em 0;
338
+ line-height: 1.6;
339
+ }
340
+
341
+ li::marker {
342
+ color: var(--text-secondary);
343
+ }
344
+
345
+ ul li {
346
+ list-style-type: disc;
347
+ }
348
+
349
+ ul ul li {
350
+ list-style-type: circle;
351
+ }
352
+
353
+ ol li {
354
+ list-style-type: decimal;
355
+ }
356
+
357
+ /* Divider */
358
+ hr {
359
+ border: none;
360
+ height: 1px;
361
+ background: var(--border-color);
362
+ margin: 48px 0;
363
+ }
364
+
365
+ /* Feature Cards */
366
+ .feature-grid {
367
+ display: grid;
368
+ grid-template-columns: repeat(2, 1fr);
369
+ gap: 20px;
370
+ margin: 32px 0;
371
+ }
372
+
373
+ .feature-item {
374
+ padding: 24px 28px;
375
+ background: var(--bg-secondary);
376
+ border-radius: 16px;
377
+ }
378
+
379
+ .feature-item h3 {
380
+ font-size: 17px;
381
+ margin: 0 0 8px;
382
+ }
383
+
384
+ .feature-item p {
385
+ margin: 0;
386
+ font-size: 14px;
387
+ color: var(--text-secondary);
388
+ line-height: 1.5;
389
+ }
390
+
391
+ /* Callout */
392
+ .callout {
393
+ margin: 1.5em 0;
394
+ padding: 20px 24px;
395
+ background: var(--bg-secondary);
396
+ border-radius: 12px;
397
+ border-left: 3px solid var(--accent);
398
+ }
399
+
400
+ .callout-title {
401
+ font-size: 12px;
402
+ font-weight: 600;
403
+ color: var(--text-secondary);
404
+ text-transform: uppercase;
405
+ letter-spacing: 0.02em;
406
+ margin-bottom: 8px;
407
+ }
408
+
409
+ .callout p:last-child {
410
+ margin-bottom: 0;
411
+ }
412
+
413
+ /* Steps */
414
+ .steps {
415
+ margin: 32px 0;
416
+ }
417
+
418
+ .step {
419
+ display: flex;
420
+ gap: 16px;
421
+ margin-bottom: 20px;
422
+ }
423
+
424
+ .step-number {
425
+ width: 28px;
426
+ height: 28px;
427
+ border-radius: 50%;
428
+ background: var(--text-primary);
429
+ color: white;
430
+ font-size: 14px;
431
+ font-weight: 600;
432
+ display: flex;
433
+ align-items: center;
434
+ justify-content: center;
435
+ flex-shrink: 0;
436
+ }
437
+
438
+ .step-content h4 {
439
+ margin: 0 0 4px;
440
+ font-size: 17px;
441
+ color: var(--text-primary);
442
+ }
443
+
444
+ .step-content p {
445
+ margin: 0;
446
+ font-size: 15px;
447
+ color: var(--text-secondary);
448
+ }
449
+
450
+ /* Footer */
451
+ .footer {
452
+ margin-top: 64px;
453
+ text-align: center;
454
+ color: var(--text-tertiary);
455
+ font-size: 12px;
456
+ }
457
+
458
+ /* Print */
459
+ @page {
460
+ size: A4;
461
+ margin: 24mm 20mm;
462
+ }
463
+
464
+ @media print {
465
+ .container {
466
+ padding: 0;
467
+ max-width: none;
468
+ }
469
+
470
+ h1 {
471
+ font-size: 28px;
472
+ }
473
+
474
+ h2 {
475
+ font-size: 20px;
476
+ }
477
+
478
+ pre {
479
+ background: var(--bg-secondary) !important;
480
+ color: #1d1d1f !important;
481
+ border: 1px solid var(--border-color);
482
+ -webkit-print-color-adjust: exact;
483
+ print-color-adjust: exact;
484
+ }
485
+
486
+ pre code {
487
+ color: inherit !important;
488
+ }
489
+
490
+ /* Keep light theme syntax highlighting colors when printing */
491
+ pre .c,
492
+ pre .ch,
493
+ pre .cm,
494
+ pre .c1,
495
+ pre .cs {
496
+ color: #6e6e73 !important;
497
+ }
498
+
499
+ pre .k,
500
+ pre .kc,
501
+ pre .kd,
502
+ pre .kn,
503
+ pre .kp,
504
+ pre .kr,
505
+ pre .kt {
506
+ color: #9b2393 !important;
507
+ }
508
+
509
+ pre .s,
510
+ pre .s1,
511
+ pre .s2,
512
+ pre .sa,
513
+ pre .sb,
514
+ pre .sc,
515
+ pre .sd,
516
+ pre .se,
517
+ pre .sh,
518
+ pre .si,
519
+ pre .sr,
520
+ pre .ss,
521
+ pre .sx {
522
+ color: #c41a16 !important;
523
+ }
524
+
525
+ pre .nf,
526
+ pre .fm {
527
+ color: #326d74 !important;
528
+ }
529
+
530
+ pre .mi,
531
+ pre .mf,
532
+ pre .mh,
533
+ pre .mo,
534
+ pre .mb,
535
+ pre .il {
536
+ color: #1c00cf !important;
537
+ }
538
+
539
+ .feature-grid {
540
+ grid-template-columns: repeat(2, 1fr);
541
+ }
542
+ }
543
+ </style>
544
+ {{styles}}
545
+ </head>
546
+
547
+ <body>
548
+ <article class="container">
549
+ {{body}}
550
+ </article>
551
+
552
+
553
+ </body>
554
+
555
+ </html>