Skip to content

Commit 14cd341

Browse files
hobbytphobbytp
committed
feat: Add numerous new content pages, shortcode documentation, and a PDF slide shortcode with supporting assets, and update README and AGENTS.md.
1 parent 2d266b6 commit 14cd341

File tree

4 files changed

+673
-4
lines changed

4 files changed

+673
-4
lines changed

‎assets/css/pdf-slide.css‎

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
/* PDF Slide Start - Preview Card */
2+
.pdf-slide-card {
3+
position: relative;
4+
width: 100%;
5+
max-width: 600px;
6+
margin: 2rem auto;
7+
border-radius: 12px;
8+
overflow: hidden;
9+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
10+
cursor: pointer;
11+
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
12+
background: #f8f9fa;
13+
border: 1px solid rgba(0, 0, 0, 0.05);
14+
}
15+
16+
.pdf-slide-card:hover {
17+
transform: translateY(-4px);
18+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
19+
}
20+
21+
.pdf-slide-preview {
22+
position: relative;
23+
width: 100%;
24+
/* Keep aspect ratio but allow content to fill */
25+
min-height: 200px;
26+
background-size: cover;
27+
background-position: center;
28+
background-color: #eee;
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
}
33+
34+
/* Ensure canvas fills the preview area */
35+
.pdf-preview-canvas {
36+
width: 100%;
37+
height: auto;
38+
display: block;
39+
}
40+
41+
.pdf-slide-overlay {
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: 100%;
47+
background: rgba(0, 0, 0, 0.2);
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
opacity: 0;
52+
transition: opacity 0.3s;
53+
z-index: 2;
54+
/* Ensure above canvas */
55+
}
56+
57+
/* If no canvas and using background image, we still want 16:9 ratio */
58+
.pdf-slide-preview:empty {
59+
padding-top: 56.25%;
60+
}
61+
62+
/* Logic: If canvas exists, we don't need padding-top hacks if canvas has height.
63+
But initially it might be empty. */
64+
65+
.pdf-slide-card:hover .pdf-slide-overlay {
66+
opacity: 1;
67+
}
68+
69+
.pdf-play-btn {
70+
width: 64px;
71+
height: 64px;
72+
background: rgba(255, 255, 255, 0.95);
73+
border-radius: 50%;
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
78+
transform: scale(0.9);
79+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
80+
}
81+
82+
.pdf-slide-card:hover .pdf-play-btn {
83+
transform: scale(1);
84+
}
85+
86+
.pdf-play-icon {
87+
width: 0;
88+
height: 0;
89+
border-style: solid;
90+
border-width: 12px 0 12px 20px;
91+
border-color: transparent transparent transparent #333;
92+
margin-left: 4px;
93+
/* Optical center adjustment */
94+
}
95+
96+
.pdf-slide-info {
97+
padding: 1rem 1.5rem;
98+
display: flex;
99+
justify-content: space-between;
100+
align-items: center;
101+
background: white;
102+
}
103+
104+
.pdf-slide-title {
105+
font-weight: 600;
106+
font-size: 1.1rem;
107+
color: #333;
108+
white-space: nowrap;
109+
overflow: hidden;
110+
text-overflow: ellipsis;
111+
}
112+
113+
.pdf-slide-badge {
114+
font-size: 0.8rem;
115+
padding: 0.25rem 0.75rem;
116+
background: #e7f5ff;
117+
color: #0077d8;
118+
border-radius: 20px;
119+
font-weight: 500;
120+
}
121+
122+
/* PDF Fullscreen Modal */
123+
.pdf-modal-backdrop {
124+
position: fixed;
125+
top: 0;
126+
left: 0;
127+
width: 100vw;
128+
height: 100vh;
129+
background: rgba(0, 0, 0, 0.9);
130+
z-index: 9999;
131+
display: flex;
132+
flex-direction: column;
133+
opacity: 0;
134+
visibility: hidden;
135+
transition: opacity 0.3s, visibility 0.3s;
136+
backdrop-filter: blur(5px);
137+
}
138+
139+
.pdf-modal-backdrop.active {
140+
opacity: 1;
141+
visibility: visible;
142+
}
143+
144+
/* Toolbar */
145+
.pdf-modal-toolbar {
146+
height: 60px;
147+
display: flex;
148+
justify-content: space-between;
149+
align-items: center;
150+
padding: 0 2rem;
151+
color: white;
152+
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
153+
z-index: 10001;
154+
}
155+
156+
.pdf-modal-title {
157+
font-size: 1.1rem;
158+
font-weight: 500;
159+
opacity: 0.9;
160+
}
161+
162+
.pdf-modal-close {
163+
background: none;
164+
border: none;
165+
color: white;
166+
font-size: 2rem;
167+
cursor: pointer;
168+
opacity: 0.7;
169+
transition: opacity 0.2s;
170+
line-height: 1;
171+
padding: 0 0.5rem;
172+
}
173+
174+
.pdf-modal-close:hover {
175+
opacity: 1;
176+
}
177+
178+
/* Canvas Area */
179+
.pdf-canvas-container {
180+
flex: 1;
181+
display: flex;
182+
justify-content: center;
183+
align-items: center;
184+
overflow: hidden;
185+
position: relative;
186+
width: 100%;
187+
}
188+
189+
.pdf-canvas-wrapper {
190+
position: relative;
191+
max-width: 90%;
192+
max-height: 90%;
193+
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
194+
}
195+
196+
#pdf-render-canvas {
197+
display: block;
198+
max-width: 100%;
199+
max-height: 85vh;
200+
/* Safe area for vertical screens */
201+
object-fit: contain;
202+
}
203+
204+
/* Navigation Controls */
205+
.pdf-nav-btn {
206+
position: absolute;
207+
top: 50%;
208+
transform: translateY(-50%);
209+
background: rgba(255, 255, 255, 0.1);
210+
border: none;
211+
color: white;
212+
width: 56px;
213+
height: 56px;
214+
border-radius: 50%;
215+
cursor: pointer;
216+
font-size: 1.5rem;
217+
backdrop-filter: blur(4px);
218+
transition: background 0.2s, transform 0.2s;
219+
display: flex;
220+
justify-content: center;
221+
align-items: center;
222+
z-index: 10002;
223+
outline: none;
224+
}
225+
226+
.pdf-nav-btn:hover {
227+
background: rgba(255, 255, 255, 0.25);
228+
transform: translateY(-50%) scale(1.1);
229+
}
230+
231+
.pdf-nav-btn:disabled {
232+
opacity: 0.3;
233+
pointer-events: none;
234+
}
235+
236+
.pdf-prev-btn {
237+
left: 2rem;
238+
}
239+
240+
.pdf-next-btn {
241+
right: 2rem;
242+
}
243+
244+
/* Page Indicator */
245+
.pdf-page-indicator {
246+
position: absolute;
247+
bottom: 2rem;
248+
left: 50%;
249+
transform: translateX(-50%);
250+
background: rgba(0, 0, 0, 0.6);
251+
color: white;
252+
padding: 0.5rem 1.2rem;
253+
border-radius: 20px;
254+
font-size: 0.9rem;
255+
backdrop-filter: blur(4px);
256+
z-index: 10002;
257+
font-feature-settings: "tnum";
258+
font-variant-numeric: tabular-nums;
259+
}
260+
261+
/* Loading Spinner */
262+
.pdf-loading-spinner {
263+
position: absolute;
264+
top: 50%;
265+
left: 50%;
266+
transform: translate(-50%, -50%);
267+
width: 50px;
268+
height: 50px;
269+
border: 4px solid rgba(255, 255, 255, 0.3);
270+
border-top: 4px solid white;
271+
border-radius: 50%;
272+
animation: pdf-spin 1s linear infinite;
273+
z-index: 10000;
274+
display: none;
275+
}
276+
277+
.pdf-loading-spinner.active {
278+
display: block;
279+
}
280+
281+
@keyframes pdf-spin {
282+
0% {
283+
transform: translate(-50%, -50%) rotate(0deg);
284+
}
285+
286+
100% {
287+
transform: translate(-50%, -50%) rotate(360deg);
288+
}
289+
}
290+
291+
/* Animation for page transition */
292+
.fade-in {
293+
animation: fadeIn 0.4s ease-out;
294+
}
295+
296+
@keyframes fadeIn {
297+
from {
298+
opacity: 0;
299+
transform: scale(0.98);
300+
}
301+
302+
to {
303+
opacity: 1;
304+
transform: scale(1);
305+
}
306+
}
307+
308+
/* Dark mode adjustments (basically redundant since modal is dark, but for card) */
309+
@media (prefers-color-scheme: dark) {
310+
.pdf-slide-card {
311+
background: #2d2d2d;
312+
border-color: #404040;
313+
}
314+
315+
.pdf-slide-info {
316+
background: #333;
317+
}
318+
319+
.pdf-slide-title {
320+
color: #ddd;
321+
}
322+
323+
.pdf-slide-badge {
324+
background: #1a3b5c;
325+
color: #64b5f6;
326+
}
327+
}
328+
329+
/* Mobile Responsiveness */
330+
@media (max-width: 768px) {
331+
.pdf-nav-btn {
332+
width: 44px;
333+
height: 44px;
334+
font-size: 1.2rem;
335+
background: rgba(0, 0, 0, 0.4);
336+
}
337+
338+
.pdf-prev-btn {
339+
left: 1rem;
340+
}
341+
342+
.pdf-next-btn {
343+
right: 1rem;
344+
}
345+
346+
.pdf-page-indicator {
347+
bottom: 1.5rem;
348+
}
349+
350+
.pdf-modal-toolbar {
351+
padding: 0 1rem;
352+
}
353+
}

0 commit comments

Comments
 (0)