mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-30 21:52:05 +02:00
61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
|
---
|
||
|
import LayoutBase from '@layouts/Base/index.astro'
|
||
|
import PostTeaser from '@components/PostTeaser/index.astro'
|
||
|
import { loadAndFormatCollection } from '@lib/astro'
|
||
|
import PhotoTeaser from '@components/PhotoTeaser.astro'
|
||
|
import type { CollectionEntry } from 'astro:content'
|
||
|
import More from '@components/More.astro'
|
||
|
|
||
|
const articles = (await loadAndFormatCollection('articles')).slice(
|
||
|
0,
|
||
|
4
|
||
|
) as CollectionEntry<'articles'>[]
|
||
|
// const links = await loadAndFormatCollection('links')
|
||
|
const photos = (await loadAndFormatCollection('photos')).slice(
|
||
|
0,
|
||
|
12
|
||
|
) as CollectionEntry<'photos'>[]
|
||
|
---
|
||
|
|
||
|
<style>
|
||
|
.section:not(:first-of-type) {
|
||
|
margin-top: calc(var(--spacer) * 1.5);
|
||
|
}
|
||
|
|
||
|
.sectionTitle {
|
||
|
margin-top: 0;
|
||
|
color: var(--text-color-light);
|
||
|
}
|
||
|
|
||
|
.photos {
|
||
|
display: grid;
|
||
|
gap: var(--spacer);
|
||
|
grid-template-columns: repeat(2, 1fr);
|
||
|
}
|
||
|
|
||
|
@media (min-width: 40rem) {
|
||
|
.photos {
|
||
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<LayoutBase title={''}>
|
||
|
<section class="section">
|
||
|
<h2 class="sectionTitle">Articles</h2>
|
||
|
<div class="articles">
|
||
|
{articles.map((article) => <PostTeaser post={article} hideDate />)}
|
||
|
</div>
|
||
|
<More href="/archive/1">All Articles & Links</More>
|
||
|
</section>
|
||
|
|
||
|
<section class="section">
|
||
|
<h2 class="sectionTitle">Photos</h2>
|
||
|
<div class="photos">
|
||
|
{photos.map((photo) => <PhotoTeaser post={photo} />)}
|
||
|
</div>
|
||
|
|
||
|
<More href="/photos/1">All Photos</More>
|
||
|
</section>
|
||
|
</LayoutBase>
|