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