zzstoatzz.io
powerpointproto
slides.waow.tech
slides
cleaner homepage layout, limit public gallery to 8 decks
+17
-26
src/routes/+page.svelte
+17
-26
src/routes/+page.svelte
···
25
25
const fetchPublicDecks = async () => {
26
26
loadingPublic = true;
27
27
try {
28
-
const res = await fetch("https://ufos-api.microcosm.blue/records?collection=tech.waow.slides.deck");
28
+
const res = await fetch("https://ufos-api.microcosm.blue/records?collection=tech.waow.slides.deck&limit=8");
29
29
if (!res.ok) return;
30
30
const records = await res.json();
31
31
···
276
276
</div>
277
277
{/if}
278
278
{:else}
279
-
<p class="login-prompt">login to create and save presentations</p>
280
-
281
279
{#if loadingPublic}
282
280
<div class="public-loading">
283
281
<svg class="loading-icon small" viewBox="0 0 32 32" width="24" height="24">
···
287
285
</div>
288
286
{:else if publicDecks.length > 0}
289
287
<div class="public-gallery">
290
-
<h3>recent presentations</h3>
291
288
<div class="gallery-grid">
292
289
{#each publicDecks as deck (deck.rkey)}
293
290
<a href="/view/{deck.did}/{deck.rkey}" class="gallery-card">
···
308
305
<span class="gallery-meta">
309
306
{deck.slideCount} slide{deck.slideCount !== 1 ? "s" : ""}
310
307
{#if deck.handle}
311
-
· <span class="gallery-author">@{deck.handle}</span>
308
+
· @{deck.handle}
312
309
{/if}
313
310
</span>
314
311
</div>
315
312
</a>
316
313
{/each}
317
314
</div>
315
+
<p class="login-cta">login to create your own →</p>
318
316
</div>
317
+
{:else}
318
+
<p class="login-cta">login to create presentations</p>
319
319
{/if}
320
320
{/if}
321
321
···
383
383
display: flex;
384
384
flex-direction: column;
385
385
align-items: center;
386
-
padding: 60px 20px;
386
+
padding: 80px 20px 40px;
387
387
min-height: 100vh;
388
388
}
389
389
390
390
.home h1 {
391
-
font-size: 48px;
391
+
font-size: 42px;
392
392
margin: 0;
393
393
font-weight: 300;
394
394
letter-spacing: -1px;
395
395
}
396
396
397
397
.subtitle {
398
-
color: #666;
399
-
margin: 8px 0 32px;
398
+
color: #555;
399
+
margin: 4px 0 0;
400
+
font-size: 15px;
400
401
}
401
402
402
-
.login-prompt {
403
-
color: #888;
404
-
margin-top: 40px;
403
+
.login-cta {
404
+
color: #666;
405
+
font-size: 14px;
406
+
margin-top: 24px;
407
+
text-align: center;
405
408
}
406
409
407
410
.actions {
···
645
648
}
646
649
647
650
.public-loading {
648
-
margin-top: 40px;
651
+
margin-top: 32px;
649
652
}
650
653
651
654
.loading-icon.small {
···
656
659
.public-gallery {
657
660
width: 100%;
658
661
max-width: 800px;
659
-
margin-top: 40px;
660
-
}
661
-
662
-
.public-gallery h3 {
663
-
font-size: 14px;
664
-
color: #666;
665
-
text-transform: uppercase;
666
-
margin-bottom: 16px;
667
-
text-align: center;
662
+
margin-top: 32px;
668
663
}
669
664
670
665
.gallery-grid {
···
727
722
.gallery-meta {
728
723
font-size: 12px;
729
724
color: #666;
730
-
}
731
-
732
-
.gallery-author {
733
-
color: #888;
734
725
}
735
726
736
727
@media (max-width: 600px) {