slide-cli 1.0.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.
- package/README.md +184 -0
- package/TEMPLATE_GUIDE.md +661 -0
- package/dist/TEMPLATE_GUIDE.md +661 -0
- package/dist/index.js +277058 -0
- package/dist/scripts/build.js +41 -0
- package/dist/scripts/download-fonts.js +123 -0
- package/dist/templates/bold-title/sample.json +57 -0
- package/dist/templates/bold-title/template.html +212 -0
- package/dist/templates/bold-title/template.json +76 -0
- package/dist/templates/bold-title-wide/sample.json +58 -0
- package/dist/templates/bold-title-wide/template.html +224 -0
- package/dist/templates/bold-title-wide/template.json +76 -0
- package/dist/templates/minimal/sample.json +53 -0
- package/dist/templates/minimal/template.html +183 -0
- package/dist/templates/minimal/template.json +76 -0
- package/dist/templates/minimal-wide/sample.json +53 -0
- package/dist/templates/minimal-wide/template.html +208 -0
- package/dist/templates/minimal-wide/template.json +76 -0
- package/dist/templates/quote-card/sample.json +57 -0
- package/dist/templates/quote-card/template.html +203 -0
- package/dist/templates/quote-card/template.json +76 -0
- package/dist/templates/quote-card-wide/sample.json +58 -0
- package/dist/templates/quote-card-wide/template.html +215 -0
- package/dist/templates/quote-card-wide/template.json +76 -0
- package/package.json +66 -0
- package/scripts/build.js +41 -0
- package/scripts/download-fonts.js +123 -0
- package/templates/bold-title/sample.json +57 -0
- package/templates/bold-title/template.html +212 -0
- package/templates/bold-title/template.json +76 -0
- package/templates/bold-title-wide/sample.json +58 -0
- package/templates/bold-title-wide/template.html +224 -0
- package/templates/bold-title-wide/template.json +76 -0
- package/templates/minimal/sample.json +53 -0
- package/templates/minimal/template.html +183 -0
- package/templates/minimal/template.json +76 -0
- package/templates/minimal-wide/sample.json +53 -0
- package/templates/minimal-wide/template.html +208 -0
- package/templates/minimal-wide/template.json +76 -0
- package/templates/quote-card/sample.json +57 -0
- package/templates/quote-card/template.html +203 -0
- package/templates/quote-card/template.json +76 -0
- package/templates/quote-card-wide/sample.json +58 -0
- package/templates/quote-card-wide/template.html +215 -0
- package/templates/quote-card-wide/template.json +76 -0
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
8
|
+
|
|
9
|
+
html, body {
|
|
10
|
+
width: 1080px;
|
|
11
|
+
height: 1920px;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
background: {{bg}};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
position: relative;
|
|
20
|
+
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Paper texture */
|
|
24
|
+
body::before {
|
|
25
|
+
content: '';
|
|
26
|
+
position: absolute; inset: 0;
|
|
27
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
28
|
+
pointer-events: none; mix-blend-mode: multiply;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.header {
|
|
32
|
+
padding: 80px 96px 0;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: space-between;
|
|
36
|
+
position: relative; z-index: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* topic: full opacity, slightly larger */
|
|
40
|
+
.topic {
|
|
41
|
+
font-size: 30px; font-weight: 700;
|
|
42
|
+
letter-spacing: 0.16em; text-transform: uppercase;
|
|
43
|
+
color: {{accent}};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* header-num: enough to be present, not distracting */
|
|
47
|
+
.header-num {
|
|
48
|
+
font-size: 28px; font-weight: 300;
|
|
49
|
+
color: {{ink}}; opacity: 0.35; letter-spacing: 0.1em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.top-rule {
|
|
53
|
+
margin: 60px 96px 0;
|
|
54
|
+
height: 1px;
|
|
55
|
+
background: linear-gradient(90deg, {{accent}}, transparent);
|
|
56
|
+
opacity: 0.4;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.main {
|
|
60
|
+
flex: 1;
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
padding: 0 96px;
|
|
65
|
+
position: relative; z-index: 1;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* SVG quotation mark */
|
|
69
|
+
.open-quote {
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: -20px; left: 48px;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
opacity: 0.13;
|
|
74
|
+
width: 260px; height: 220px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.quote-text {
|
|
78
|
+
font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
79
|
+
font-size: 86px; font-weight: 700; font-style: italic;
|
|
80
|
+
line-height: 1.3; letter-spacing: -0.01em;
|
|
81
|
+
color: {{ink}};
|
|
82
|
+
position: relative; z-index: 1;
|
|
83
|
+
margin-bottom: 80px;
|
|
84
|
+
text-wrap: balance;
|
|
85
|
+
word-break: keep-all;
|
|
86
|
+
overflow-wrap: break-word;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ── Attribution row — portrait + text side by side ── */
|
|
90
|
+
.attribution {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 48px;
|
|
94
|
+
position: relative; z-index: 1;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Circular portrait */
|
|
98
|
+
.portrait {
|
|
99
|
+
flex: 0 0 140px;
|
|
100
|
+
width: 140px; height: 140px;
|
|
101
|
+
border-radius: 50%;
|
|
102
|
+
overflow: hidden;
|
|
103
|
+
border: 3px solid {{accent}};
|
|
104
|
+
opacity: 0.92;
|
|
105
|
+
}
|
|
106
|
+
.portrait img {
|
|
107
|
+
width: 100%; height: 100%;
|
|
108
|
+
object-fit: cover; object-position: center top;
|
|
109
|
+
display: block;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.attribution-text { display: flex; flex-direction: column; gap: 12px; }
|
|
113
|
+
|
|
114
|
+
.attr-rule { width: 64px; height: 3px; background: {{accent}}; margin-bottom: 4px; }
|
|
115
|
+
|
|
116
|
+
.author-name {
|
|
117
|
+
font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
118
|
+
font-size: 46px; font-weight: 700;
|
|
119
|
+
color: {{ink}}; letter-spacing: 0.01em;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* author-role: raised opacity and size for legibility */
|
|
123
|
+
.author-role {
|
|
124
|
+
font-size: 34px; font-weight: 400;
|
|
125
|
+
color: {{ink}}; opacity: 0.6; letter-spacing: 0.04em;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.footer {
|
|
129
|
+
padding: 0 96px 80px;
|
|
130
|
+
display: flex;
|
|
131
|
+
align-items: flex-end;
|
|
132
|
+
justify-content: space-between;
|
|
133
|
+
position: relative; z-index: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.bottom-rule {
|
|
137
|
+
flex: 1; height: 1px;
|
|
138
|
+
background: {{ink}}; opacity: 0.1;
|
|
139
|
+
margin-right: 40px; margin-bottom: 8px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* slide-info: visible enough to orient the reader */
|
|
143
|
+
.slide-info {
|
|
144
|
+
font-size: 28px; font-weight: 400;
|
|
145
|
+
color: {{ink}}; opacity: 0.38;
|
|
146
|
+
letter-spacing: 0.1em; white-space: nowrap;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.corner-br {
|
|
150
|
+
position: absolute; bottom: 80px; right: 80px;
|
|
151
|
+
width: 60px; height: 60px;
|
|
152
|
+
border-right: 2px solid {{accent}};
|
|
153
|
+
border-bottom: 2px solid {{accent}};
|
|
154
|
+
opacity: 0.25;
|
|
155
|
+
}
|
|
156
|
+
.corner-tl {
|
|
157
|
+
position: absolute; top: 80px; left: 80px;
|
|
158
|
+
width: 60px; height: 60px;
|
|
159
|
+
border-left: 2px solid {{accent}};
|
|
160
|
+
border-top: 2px solid {{accent}};
|
|
161
|
+
opacity: 0.25;
|
|
162
|
+
}
|
|
163
|
+
</style>
|
|
164
|
+
</head>
|
|
165
|
+
<body>
|
|
166
|
+
<div class="corner-tl"></div>
|
|
167
|
+
<div class="corner-br"></div>
|
|
168
|
+
|
|
169
|
+
<div class="header">
|
|
170
|
+
{{#if topic}}<span class="topic">{{topic}}</span>{{else}}<span></span>{{/if}}
|
|
171
|
+
<span class="header-num">{{slideIndex}}</span>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="top-rule"></div>
|
|
175
|
+
|
|
176
|
+
<div class="main">
|
|
177
|
+
<svg class="open-quote" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
|
|
178
|
+
<path d="M20 130 C20 90 45 55 80 30 L70 15 C25 42 0 82 0 130 C0 148 12 160 28 160 C44 160 55 148 55 132 C55 116 44 104 28 104 C24 104 22 104 20 105 Z" fill="{{accent}}"/>
|
|
179
|
+
<path d="M110 130 C110 90 135 55 170 30 L160 15 C115 42 90 82 90 130 C90 148 102 160 118 160 C134 160 145 148 145 132 C145 116 134 104 118 104 C114 104 112 104 110 105 Z" fill="{{accent}}"/>
|
|
180
|
+
</svg>
|
|
181
|
+
|
|
182
|
+
<blockquote class="quote-text">{{quote}}</blockquote>
|
|
183
|
+
|
|
184
|
+
{{#if author}}
|
|
185
|
+
<div class="attribution">
|
|
186
|
+
{{#if image}}
|
|
187
|
+
<div class="portrait"><img src="{{image}}" alt="{{author}}"></div>
|
|
188
|
+
{{/if}}
|
|
189
|
+
<div class="attribution-text">
|
|
190
|
+
<div class="attr-rule"></div>
|
|
191
|
+
<div class="author-name">{{author}}</div>
|
|
192
|
+
{{#if role}}<div class="author-role">{{role}}</div>{{/if}}
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
{{/if}}
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="footer">
|
|
199
|
+
<div class="bottom-rule"></div>
|
|
200
|
+
<div class="slide-info">{{slideIndex}} / {{totalSlides}}</div>
|
|
201
|
+
</div>
|
|
202
|
+
</body>
|
|
203
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Quote Card",
|
|
3
|
+
"id": "quote-card",
|
|
4
|
+
"version": "1.1.0",
|
|
5
|
+
"description": "Elegant pull-quote card with large quotation marks and attribution",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "9:16",
|
|
8
|
+
"width": 1080,
|
|
9
|
+
"height": 1920,
|
|
10
|
+
"tags": ["quote", "elegant", "serif"],
|
|
11
|
+
"slots": [
|
|
12
|
+
{
|
|
13
|
+
"id": "quote",
|
|
14
|
+
"type": "text",
|
|
15
|
+
"label": "Quote text",
|
|
16
|
+
"required": true,
|
|
17
|
+
"description": "The main quote (without quotation marks)"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "author",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"label": "Author name",
|
|
23
|
+
"required": false,
|
|
24
|
+
"default": "",
|
|
25
|
+
"description": "Who said it"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "role",
|
|
29
|
+
"type": "text",
|
|
30
|
+
"label": "Author role / context",
|
|
31
|
+
"required": false,
|
|
32
|
+
"default": "",
|
|
33
|
+
"description": "e.g. CEO, Philosopher, 1984"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "image",
|
|
37
|
+
"type": "image",
|
|
38
|
+
"label": "Author portrait",
|
|
39
|
+
"required": false,
|
|
40
|
+
"default": "",
|
|
41
|
+
"description": "Optional author portrait. Shown as a circle (140px) beside the author name. File path or https:// URL."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "topic",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"label": "Topic tag",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "",
|
|
49
|
+
"description": "Short category label shown at top"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "bg",
|
|
53
|
+
"type": "color",
|
|
54
|
+
"label": "Background",
|
|
55
|
+
"required": false,
|
|
56
|
+
"default": "#faf7f2",
|
|
57
|
+
"description": "Card background"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "ink",
|
|
61
|
+
"type": "color",
|
|
62
|
+
"label": "Text color",
|
|
63
|
+
"required": false,
|
|
64
|
+
"default": "#1a1714",
|
|
65
|
+
"description": "Main text color"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "accent",
|
|
69
|
+
"type": "color",
|
|
70
|
+
"label": "Accent color",
|
|
71
|
+
"required": false,
|
|
72
|
+
"default": "#c0392b",
|
|
73
|
+
"description": "Color for quotation marks and rule"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"_template": "quote-card-wide",
|
|
3
|
+
"_description": "Elegant pull-quote card — 16:9 widescreen. Quote text on the left, author attribution on the right in a two-column layout. Best for 1–3 sentence quotes.",
|
|
4
|
+
"_slots": {
|
|
5
|
+
"quote": "REQUIRED — the quote text, without any quotation marks (they are drawn as SVG)",
|
|
6
|
+
"author": "optional — the person who said it",
|
|
7
|
+
"role": "optional — their title, context, or the source work (e.g. 'CEO', 'Meditations, 180 AD')",
|
|
8
|
+
"image": "optional — author portrait. Path or https:// URL. Displayed as a circle beside the author name.",
|
|
9
|
+
"topic": "optional — short category label shown at top",
|
|
10
|
+
"bg": "optional — hex background color (default: #faf7f2, a warm off-white)",
|
|
11
|
+
"ink": "optional — hex color for all text (default: #1a1714, near-black)",
|
|
12
|
+
"accent": "optional — hex color for the quotation marks, rule, and topic tag (default: #c0392b)"
|
|
13
|
+
},
|
|
14
|
+
"title": "Words That Moved the World",
|
|
15
|
+
"slides": [
|
|
16
|
+
{
|
|
17
|
+
"layout": "quote-card-wide",
|
|
18
|
+
"topic": "On Creation",
|
|
19
|
+
"quote": "Every child is an artist. The problem is how to remain an artist once we grow up.",
|
|
20
|
+
"author": "Pablo Picasso",
|
|
21
|
+
"role": "Painter & Sculptor",
|
|
22
|
+
"bg": "#faf7f2",
|
|
23
|
+
"ink": "#1a1714",
|
|
24
|
+
"accent": "#c0392b"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"layout": "quote-card-wide",
|
|
28
|
+
"topic": "On Time",
|
|
29
|
+
"quote": "The two most powerful warriors are patience and time.",
|
|
30
|
+
"author": "Leo Tolstoy",
|
|
31
|
+
"role": "War and Peace, 1869",
|
|
32
|
+
"bg": "#f2f5fa",
|
|
33
|
+
"ink": "#141720",
|
|
34
|
+
"accent": "#2c5282"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"layout": "quote-card-wide",
|
|
38
|
+
"topic": "On Design",
|
|
39
|
+
"quote": "Design is not just what it looks like and feels like. Design is how it works.",
|
|
40
|
+
"author": "Steve Jobs",
|
|
41
|
+
"role": "Apple Inc.",
|
|
42
|
+
"bg": "#fafaf8",
|
|
43
|
+
"ink": "#181818",
|
|
44
|
+
"accent": "#2d6a4f"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"layout": "quote-card-wide",
|
|
48
|
+
"topic": "On Courage",
|
|
49
|
+
"quote": "You have power over your mind, not outside events. Realize this, and you will find strength.",
|
|
50
|
+
"author": "Marcus Aurelius",
|
|
51
|
+
"role": "Meditations, 180 AD",
|
|
52
|
+
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Marcus_Aurelius_Metropolitan_Museum.jpg/480px-Marcus_Aurelius_Metropolitan_Museum.jpg",
|
|
53
|
+
"bg": "#f5f0e8",
|
|
54
|
+
"ink": "#1a1510",
|
|
55
|
+
"accent": "#8b6914"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
8
|
+
|
|
9
|
+
html, body {
|
|
10
|
+
width: 1920px;
|
|
11
|
+
height: 1080px;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
background: {{bg}};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
position: relative;
|
|
20
|
+
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Paper texture */
|
|
24
|
+
body::before {
|
|
25
|
+
content: '';
|
|
26
|
+
position: absolute; inset: 0;
|
|
27
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
28
|
+
pointer-events: none; mix-blend-mode: multiply;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.header {
|
|
32
|
+
padding: 52px 96px 0;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: space-between;
|
|
36
|
+
position: relative; z-index: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.topic {
|
|
40
|
+
font-size: 22px; font-weight: 700;
|
|
41
|
+
letter-spacing: 0.16em; text-transform: uppercase;
|
|
42
|
+
color: {{accent}};
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.header-num {
|
|
46
|
+
font-size: 22px; font-weight: 300;
|
|
47
|
+
color: {{ink}}; opacity: 0.35; letter-spacing: 0.1em;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.top-rule {
|
|
51
|
+
margin: 36px 96px 0;
|
|
52
|
+
height: 1px;
|
|
53
|
+
background: linear-gradient(90deg, {{accent}}, transparent);
|
|
54
|
+
opacity: 0.4;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* ── Main: two-column layout for wide ── */
|
|
58
|
+
.main {
|
|
59
|
+
flex: 1;
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: row;
|
|
62
|
+
align-items: stretch;
|
|
63
|
+
padding: 0 96px;
|
|
64
|
+
position: relative; z-index: 1;
|
|
65
|
+
gap: 80px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Left column: the quote itself */
|
|
69
|
+
.quote-col {
|
|
70
|
+
flex: 1 1 0;
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
position: relative;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Right column: attribution */
|
|
78
|
+
.attr-col {
|
|
79
|
+
flex: 0 0 480px;
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
border-left: 1px solid {{ink}};
|
|
84
|
+
border-left-color: {{ink}};
|
|
85
|
+
opacity-reference: 0.08;
|
|
86
|
+
padding-left: 64px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* SVG quotation mark */
|
|
90
|
+
.open-quote {
|
|
91
|
+
position: absolute;
|
|
92
|
+
top: -10px; left: -24px;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
opacity: 0.10;
|
|
95
|
+
width: 200px; height: 170px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.quote-text {
|
|
99
|
+
font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
100
|
+
font-size: 64px; font-weight: 700; font-style: italic;
|
|
101
|
+
line-height: 1.3; letter-spacing: -0.01em;
|
|
102
|
+
color: {{ink}};
|
|
103
|
+
position: relative; z-index: 1;
|
|
104
|
+
text-wrap: balance;
|
|
105
|
+
word-break: keep-all;
|
|
106
|
+
overflow-wrap: break-word;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ── Attribution ── */
|
|
110
|
+
.portrait {
|
|
111
|
+
flex: 0 0 110px;
|
|
112
|
+
width: 110px; height: 110px;
|
|
113
|
+
border-radius: 50%;
|
|
114
|
+
overflow: hidden;
|
|
115
|
+
border: 3px solid {{accent}};
|
|
116
|
+
opacity: 0.92;
|
|
117
|
+
margin-bottom: 28px;
|
|
118
|
+
}
|
|
119
|
+
.portrait img {
|
|
120
|
+
width: 100%; height: 100%;
|
|
121
|
+
object-fit: cover; object-position: center top;
|
|
122
|
+
display: block;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.attribution-text { display: flex; flex-direction: column; gap: 10px; }
|
|
126
|
+
|
|
127
|
+
.attr-rule { width: 52px; height: 3px; background: {{accent}}; margin-bottom: 4px; }
|
|
128
|
+
|
|
129
|
+
.author-name {
|
|
130
|
+
font-family: 'Playfair Display', 'Noto Serif CJK', Georgia, 'Times New Roman', serif;
|
|
131
|
+
font-size: 36px; font-weight: 700;
|
|
132
|
+
color: {{ink}}; letter-spacing: 0.01em;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.author-role {
|
|
136
|
+
font-size: 26px; font-weight: 400;
|
|
137
|
+
color: {{ink}}; opacity: 0.6; letter-spacing: 0.04em;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.footer {
|
|
141
|
+
padding: 0 96px 44px;
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: flex-end;
|
|
144
|
+
justify-content: space-between;
|
|
145
|
+
position: relative; z-index: 1;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.bottom-rule {
|
|
149
|
+
flex: 1; height: 1px;
|
|
150
|
+
background: {{ink}}; opacity: 0.1;
|
|
151
|
+
margin-right: 40px; margin-bottom: 8px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.slide-info {
|
|
155
|
+
font-size: 22px; font-weight: 400;
|
|
156
|
+
color: {{ink}}; opacity: 0.38;
|
|
157
|
+
letter-spacing: 0.1em; white-space: nowrap;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.corner-br {
|
|
161
|
+
position: absolute; bottom: 52px; right: 80px;
|
|
162
|
+
width: 48px; height: 48px;
|
|
163
|
+
border-right: 2px solid {{accent}};
|
|
164
|
+
border-bottom: 2px solid {{accent}};
|
|
165
|
+
opacity: 0.25;
|
|
166
|
+
}
|
|
167
|
+
.corner-tl {
|
|
168
|
+
position: absolute; top: 52px; left: 80px;
|
|
169
|
+
width: 48px; height: 48px;
|
|
170
|
+
border-left: 2px solid {{accent}};
|
|
171
|
+
border-top: 2px solid {{accent}};
|
|
172
|
+
opacity: 0.25;
|
|
173
|
+
}
|
|
174
|
+
</style>
|
|
175
|
+
</head>
|
|
176
|
+
<body>
|
|
177
|
+
<div class="corner-tl"></div>
|
|
178
|
+
<div class="corner-br"></div>
|
|
179
|
+
|
|
180
|
+
<div class="header">
|
|
181
|
+
{{#if topic}}<span class="topic">{{topic}}</span>{{else}}<span></span>{{/if}}
|
|
182
|
+
<span class="header-num">{{slideIndex}}</span>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<div class="top-rule"></div>
|
|
186
|
+
|
|
187
|
+
<div class="main">
|
|
188
|
+
<div class="quote-col">
|
|
189
|
+
<svg class="open-quote" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
|
|
190
|
+
<path d="M20 130 C20 90 45 55 80 30 L70 15 C25 42 0 82 0 130 C0 148 12 160 28 160 C44 160 55 148 55 132 C55 116 44 104 28 104 C24 104 22 104 20 105 Z" fill="{{accent}}"/>
|
|
191
|
+
<path d="M110 130 C110 90 135 55 170 30 L160 15 C115 42 90 82 90 130 C90 148 102 160 118 160 C134 160 145 148 145 132 C145 116 134 104 118 104 C114 104 112 104 110 105 Z" fill="{{accent}}"/>
|
|
192
|
+
</svg>
|
|
193
|
+
<blockquote class="quote-text">{{quote}}</blockquote>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
{{#if author}}
|
|
197
|
+
<div class="attr-col">
|
|
198
|
+
{{#if image}}
|
|
199
|
+
<div class="portrait"><img src="{{image}}" alt="{{author}}"></div>
|
|
200
|
+
{{/if}}
|
|
201
|
+
<div class="attribution-text">
|
|
202
|
+
<div class="attr-rule"></div>
|
|
203
|
+
<div class="author-name">{{author}}</div>
|
|
204
|
+
{{#if role}}<div class="author-role">{{role}}</div>{{/if}}
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
{{/if}}
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="footer">
|
|
211
|
+
<div class="bottom-rule"></div>
|
|
212
|
+
<div class="slide-info">{{slideIndex}} / {{totalSlides}}</div>
|
|
213
|
+
</div>
|
|
214
|
+
</body>
|
|
215
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Quote Card Wide",
|
|
3
|
+
"id": "quote-card-wide",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"description": "Elegant pull-quote card with large quotation marks and attribution — 16:9 widescreen",
|
|
6
|
+
"author": "slide-cli",
|
|
7
|
+
"aspectRatio": "16:9",
|
|
8
|
+
"width": 1920,
|
|
9
|
+
"height": 1080,
|
|
10
|
+
"tags": ["quote", "elegant", "serif", "wide", "16:9"],
|
|
11
|
+
"slots": [
|
|
12
|
+
{
|
|
13
|
+
"id": "quote",
|
|
14
|
+
"type": "text",
|
|
15
|
+
"label": "Quote text",
|
|
16
|
+
"required": true,
|
|
17
|
+
"description": "The main quote (without quotation marks)"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"id": "author",
|
|
21
|
+
"type": "text",
|
|
22
|
+
"label": "Author name",
|
|
23
|
+
"required": false,
|
|
24
|
+
"default": "",
|
|
25
|
+
"description": "Who said it"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"id": "role",
|
|
29
|
+
"type": "text",
|
|
30
|
+
"label": "Author role / context",
|
|
31
|
+
"required": false,
|
|
32
|
+
"default": "",
|
|
33
|
+
"description": "e.g. CEO, Philosopher, 1984"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"id": "image",
|
|
37
|
+
"type": "image",
|
|
38
|
+
"label": "Author portrait",
|
|
39
|
+
"required": false,
|
|
40
|
+
"default": "",
|
|
41
|
+
"description": "Optional author portrait. Shown as a circle beside the author name. File path or https:// URL."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "topic",
|
|
45
|
+
"type": "text",
|
|
46
|
+
"label": "Topic tag",
|
|
47
|
+
"required": false,
|
|
48
|
+
"default": "",
|
|
49
|
+
"description": "Short category label shown at top"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "bg",
|
|
53
|
+
"type": "color",
|
|
54
|
+
"label": "Background",
|
|
55
|
+
"required": false,
|
|
56
|
+
"default": "#faf7f2",
|
|
57
|
+
"description": "Card background"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "ink",
|
|
61
|
+
"type": "color",
|
|
62
|
+
"label": "Text color",
|
|
63
|
+
"required": false,
|
|
64
|
+
"default": "#1a1714",
|
|
65
|
+
"description": "Main text color"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "accent",
|
|
69
|
+
"type": "color",
|
|
70
|
+
"label": "Accent color",
|
|
71
|
+
"required": false,
|
|
72
|
+
"default": "#c0392b",
|
|
73
|
+
"description": "Color for quotation marks and rule"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|