taleem-slides 0.6.1 → 0.6.2-rc.1

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.
Files changed (2) hide show
  1. package/dist/taleem.css +282 -225
  2. package/package.json +1 -1
package/dist/taleem.css CHANGED
@@ -1,232 +1,289 @@
1
1
  /* =====================================================
2
2
  TALEEM — Single Public Stylesheet
3
- ===================================================== */
4
3
 
5
- /* -------------------------------
6
- Theme Contract (User Editable)
7
- ------------------------------- */
8
-
9
4
  /* -------------------------------
10
5
  Global Page Reset
11
6
  ------------------------------- */
12
- body {
13
- margin: 0;
14
- font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
15
- background: var(--backgroundColor, #0b1220);
16
- color: var(--primaryColor, #e6e9ff);
17
- }
18
-
19
- #app {
20
- position: relative;
21
- width: 100vw;
22
- min-height: 100vh;
23
- overflow: hidden;
24
- }
25
-
26
- /* -------------------------------
27
- Browser / Player Layers
28
- ------------------------------- */
29
- .taleem-browser-bg {
30
- position: absolute;
31
- inset: 0;
32
- z-index: 0;
33
- background-size: cover;
34
- background-position: center;
35
- }
36
-
37
- .taleem-browser-slide {
38
- position: relative;
39
- z-index: 1;
40
- }
41
-
42
- /* -------------------------------
43
- Base Slide Grammar
44
- ------------------------------- */
45
- .slide {
46
- height: 100vh;
47
- box-sizing: border-box;
48
-
49
- display: flex;
50
- flex-direction: column;
51
- justify-content: center;
52
- align-items: center;
53
-
54
- padding: 64px 80px;
55
- gap: 32px;
56
-
57
- overflow: hidden;
58
- background: transparent;
59
- color: var(--primaryColor, #e6e9ff);
60
-
61
- font-size: 2.4rem;
62
- line-height: 1.6;
63
- letter-spacing: 0.01em;
64
- text-align: center;
65
- }
66
-
67
- /* -------------------------------
68
- Global Image Safety
69
- ------------------------------- */
70
- .slide img {
71
- max-width: 100%;
72
- max-height: 100%;
73
- height: auto;
74
- width: auto;
75
- display: block;
76
- }
77
-
78
- /* -------------------------------
79
- Headings
80
- ------------------------------- */
81
- .slide h1 {
82
- margin: 0;
83
- letter-spacing: -0.015em;
84
- }
85
-
86
- /* -------------------------------
87
- Slide Types
88
- ------------------------------- */
89
- .slide.titleSlide h1 {
90
- font-size: 5.6rem;
91
- font-weight: 700;
92
- line-height: 1.2;
93
- }
94
-
95
- .slide.titleAndSubtitle h1 {
96
- font-size: 5.8rem;
97
- font-weight: 700;
98
- }
99
-
100
- .slide.titleAndSubtitle h2 {
101
- font-size: 3.8rem;
102
- font-weight: 400;
103
- opacity: 0.8;
104
- margin: 0;
105
- }
106
-
107
- .slide.titleAndPara h1 {
108
- font-size: 4.8rem;
109
- font-weight: 600;
110
- }
111
-
112
- .slide.titleAndPara p {
113
- font-size: 3rem;
114
- max-width: 70ch;
115
- opacity: 0.9;
116
- margin: 0;
117
- }
118
-
119
- /* -------------------------------
120
- Bullet List
121
- ------------------------------- */
122
- .slide.bulletList ul {
123
- list-style: disc;
124
- padding-left: 2rem;
125
- margin: 0;
126
- }
127
-
128
- .slide.bulletList li {
129
- font-size: 3.6rem;
130
- margin-bottom: 1rem;
131
- text-align: left;
132
- font-weight: 500;
133
- }
134
-
135
- /* -------------------------------
136
- Image Variants
137
- ------------------------------- */
138
- .slide.imageSlide {
139
- padding: 0;
140
- }
141
-
142
- .slide.imageSlide img {
143
- object-fit: contain;
144
- }
145
-
146
- .slide.imageWithTitle {
147
- position: relative;
148
- padding: 48px;
149
- }
150
-
151
- .slide.imageWithTitle img {
152
- height: calc(100vh - 96px);
153
- border-radius: 12px;
154
- }
155
-
156
- .slide.imageWithTitle h1 {
157
- position: absolute;
158
- bottom: 64px;
159
- left: 50%;
160
- transform: translateX(-50%);
161
- font-size: 4.6rem;
162
- background: rgba(0, 0, 0, 0.45);
163
- padding: 0.4em 0.8em;
164
- border-radius: 6px;
165
- }
166
-
167
- /* -------------------------------
168
- Two Column Text
169
- ------------------------------- */
170
- .slide.twoColumnText .columns {
171
- display: grid;
172
- grid-template-columns: 1fr 1fr;
173
- gap: 64px;
174
- max-width: 1200px;
175
- }
176
-
177
- .slide.twoColumnText p {
178
- font-size: 3rem;
179
- text-align: left;
180
- }
181
-
182
- /* -------------------------------
183
- Quote Slide
184
- ------------------------------- */
185
- .slide.quoteSlide blockquote {
186
- font-size: 3.8rem;
187
- font-style: italic;
188
- max-width: 60ch;
189
- }
190
-
191
- .slide.quoteSlide cite {
192
- font-size: 2.4rem;
193
- opacity: 0.75;
194
- }
195
-
196
- /* -------------------------------
197
- Big Number
198
- ------------------------------- */
199
- .slide.bigNumber .number {
200
- font-size: 9rem;
201
- font-weight: 700;
202
- }
203
-
204
- /* -------------------------------
205
- Fill Image (Full Bleed)
206
- ------------------------------- */
207
- .slide.fillImage {
208
- padding: 0;
209
- height: 100vh;
210
- display: block;
211
- }
212
7
 
213
- .slide.fillImage img {
214
- width: 100%;
215
- height: 100%;
216
- object-fit: cover;
217
- }
218
-
219
- /* -------------------------------
220
- Demo / Player UI (Optional)
221
- ------------------------------- */
222
- #timebar {
223
- position: fixed;
224
- bottom: 0;
225
- left: 0;
226
- right: 0;
227
- height: 32px;
228
- background: rgba(0, 0, 0, 0.6);
229
- backdrop-filter: blur(6px);
230
- z-index: 10;
231
- }
232
-
8
+ html,body {
9
+ height: 100%;
10
+ overflow: hidden;
11
+ margin: 0;
12
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
13
+ background: var(--backgroundColor, #0b1220);
14
+ color: var(--primaryColor, #e6e9ff);
15
+ }
16
+
17
+ #app {
18
+ position: relative;
19
+ width: 100vw;
20
+ min-height: 100vh;
21
+ overflow: hidden;
22
+ }
23
+
24
+ /* -------------------------------
25
+ Browser / Player Layers
26
+ ------------------------------- */
27
+ .taleem-browser-bg {
28
+ position: absolute;
29
+ inset: 0;
30
+ z-index: 0;
31
+ background-size: cover;
32
+ background-position: center;
33
+ }
34
+
35
+ .taleem-browser-slide {
36
+ position: relative;
37
+ z-index: 1;
38
+ }
39
+
40
+ /* -------------------------------
41
+ Base Slide Grammar
42
+ ------------------------------- */
43
+ .slide {
44
+ height: 100vh;
45
+ box-sizing: border-box;
46
+
47
+ display: flex;
48
+ flex-direction: column;
49
+ justify-content: center;
50
+ align-items: center;
51
+
52
+ padding: 64px 80px;
53
+ gap: 32px;
54
+
55
+ overflow: hidden;
56
+ background: transparent;
57
+ color: var(--primaryColor, #e6e9ff);
58
+
59
+ font-size: 2.4rem;
60
+ line-height: 1.6;
61
+ letter-spacing: 0.01em;
62
+ text-align: center;
63
+ }
64
+
65
+ /* -------------------------------
66
+ Global Image Safety
67
+ ------------------------------- */
68
+ .slide img {
69
+ max-width: 100%;
70
+ max-height: 100%;
71
+ height: auto;
72
+ width: auto;
73
+ display: block;
74
+ }
75
+
76
+ /* -------------------------------
77
+ Headings
78
+ ------------------------------- */
79
+ .slide h1 {
80
+ margin: 0;
81
+ letter-spacing: -0.015em;
82
+ }
83
+
84
+ /* -------------------------------
85
+ Slide Types
86
+ ------------------------------- */
87
+ .slide.titleSlide h1 {
88
+ font-size: 5.6rem;
89
+ font-weight: 700;
90
+ line-height: 1.2;
91
+ }
92
+
93
+ .slide.titleAndSubtitle h1 {
94
+ font-size: 5.8rem;
95
+ font-weight: 700;
96
+ }
97
+
98
+ .slide.titleAndSubtitle h2 {
99
+ font-size: 3.8rem;
100
+ font-weight: 400;
101
+ opacity: 0.8;
102
+ margin: 0;
103
+ }
104
+
105
+ .slide.titleAndPara h1 {
106
+ font-size: 4.8rem;
107
+ font-weight: 600;
108
+ }
109
+
110
+ .slide.titleAndPara p {
111
+ font-size: 3rem;
112
+ max-width: 70ch;
113
+ opacity: 0.9;
114
+ margin: 0;
115
+ }
116
+
117
+ /* -------------------------------
118
+ Bullet List
119
+ ------------------------------- */
120
+ .slide.bulletList ul {
121
+ list-style: disc;
122
+ padding-left: 2rem;
123
+ margin: 0;
124
+ }
125
+
126
+ .slide.bulletList li {
127
+ font-size: 3.6rem;
128
+ margin-bottom: 1rem;
129
+ text-align: left;
130
+ font-weight: 500;
131
+ }
132
+
133
+ /* -------------------------------
134
+ Image Variants
135
+ ------------------------------- */
136
+ .slide.imageSlide {
137
+ padding: 0;
138
+ }
139
+
140
+ .slide.imageSlide img {
141
+ object-fit: contain;
142
+ }
143
+
144
+ .slide.imageWithTitle {
145
+ position: relative;
146
+ padding: 48px;
147
+ }
148
+
149
+ .slide.imageWithTitle img {
150
+ height: calc(100vh - 96px);
151
+ border-radius: 12px;
152
+ }
153
+
154
+ .slide.imageWithTitle h1 {
155
+ position: absolute;
156
+ bottom: 64px;
157
+ left: 50%;
158
+ transform: translateX(-50%);
159
+ font-size: 4.6rem;
160
+ background: rgba(0, 0, 0, 0.45);
161
+ padding: 0.4em 0.8em;
162
+ border-radius: 6px;
163
+ }
164
+
165
+ .slide.imageWithCaption {
166
+ display: flex;
167
+ flex-direction: column;
168
+ justify-content: center;
169
+ gap: 32px;
170
+ height: 100vh;
171
+ overflow: hidden;
172
+ }
173
+
174
+ .slide.imageWithCaption img {
175
+ max-height: 55vh; /* reduce slightly */
176
+ object-fit: contain;
177
+ flex-shrink: 0;
178
+ }
179
+
180
+ .slide.imageWithCaption p {
181
+ max-height: 20vh; /* hard cap text */
182
+ overflow: hidden;
183
+ text-overflow: ellipsis;
184
+ }
185
+
186
+ /* -------------------------------
187
+ Two Column Text
188
+ ------------------------------- */
189
+ .slide.twoColumnText .columns {
190
+ display: grid;
191
+ grid-template-columns: 1fr 1fr;
192
+ gap: 64px;
193
+ max-width: 1200px;
194
+ }
195
+
196
+ .slide.twoColumnText p {
197
+ font-size: 3rem;
198
+ text-align: left;
199
+ }
200
+ .slide.quoteSlide {
201
+ display: flex;
202
+ flex-direction: column;
203
+ justify-content: center;
204
+ gap: 32px;
205
+ height: 100vh;
206
+ overflow: hidden;
207
+ }
208
+
209
+ .slide.quoteSlide blockquote {
210
+ max-height: 60vh;
211
+ overflow: hidden;
212
+ }
213
+
214
+ .slide.quoteSlide cite {
215
+ flex-shrink: 0;
216
+ }
217
+
218
+ /* -------------------------------
219
+ Quote Slide
220
+ ------------------------------- */
221
+ .slide.quoteSlide blockquote {
222
+ font-size: 3.8rem;
223
+ font-style: italic;
224
+ max-width: 60ch;
225
+ }
226
+
227
+ .slide.quoteSlide cite {
228
+ font-size: 2.4rem;
229
+ opacity: 0.75;
230
+ }
231
+
232
+ /* -------------------------------
233
+ Big Number
234
+ ------------------------------- */
235
+ .slide.bigNumber .number {
236
+ font-size: 9rem;
237
+ font-weight: 700;
238
+ }
239
+
240
+ /* -------------------------------
241
+ Fill Image (Full Bleed)
242
+ ------------------------------- */
243
+ .slide.fillImage {
244
+ padding: 0;
245
+ height: 100vh;
246
+ display: block;
247
+ }
248
+
249
+ .slide.fillImage img {
250
+ width: 100%;
251
+ height: 100%;
252
+ object-fit: cover;
253
+ }
254
+
255
+ /* -------------------------------
256
+ Demo / Player UI (Optional)
257
+ ------------------------------- */
258
+ #timebar {
259
+ position: fixed;
260
+ bottom: 0;
261
+ left: 0;
262
+ right: 0;
263
+ height: 32px;
264
+ background: rgba(0, 0, 0, 0.6);
265
+ backdrop-filter: blur(6px);
266
+ z-index: 10;
267
+ }
268
+
269
+
270
+
271
+ /* ///////fixes */
272
+
273
+ /* -------------------------------
274
+ Image + Bullets (Side by Side)
275
+ ------------------------------- */
276
+
277
+ .slide.imageRightBulletsLeft,
278
+ .slide.imageLeftBulletsRight {
279
+ display: flex;
280
+ flex-direction: row;
281
+ align-items: center;
282
+ gap: 64px;
283
+ text-align: left;
284
+ }
285
+
286
+ /* image on right */
287
+ .slide.imageRightBulletsLeft img {
288
+ order: 2;
289
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "taleem-slides",
3
- "version": "0.6.1",
3
+ "version": "0.6.2-rc.1",
4
4
  "type": "module",
5
5
  "description": "Convert Taleem schema into HTML slides",
6
6