mirror of https://github.com/kremalicious/blog.git
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>
|