108 lines
1.7 KiB
Plaintext
108 lines
1.7 KiB
Plaintext
---
|
|
import BaseHead from '../../components/BaseHead.astro';
|
|
import Header from '../../components/Header.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
import { getCollection } from 'astro:content';
|
|
import { actions } from 'astro:actions';
|
|
import { Image } from 'astro:assets';
|
|
|
|
|
|
const albums = await getCollection('album');
|
|
|
|
|
|
|
|
|
|
// console.log(albums)
|
|
|
|
---
|
|
|
|
<!--
|
|
albums.map(album => (
|
|
<h1>{album.data.title}</h1>
|
|
<img src=\"{album.data.cover}\" alt="">
|
|
-->
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<BaseHead title="photo albums" description="a collection of nice photos ive taken" />
|
|
</head>
|
|
<body>
|
|
<Header />
|
|
<main>
|
|
<section>
|
|
<h1>Albums</h1>
|
|
{( albums.map(album =>
|
|
<div class="album">
|
|
<a href={"pictures/" + album.id}>
|
|
<div class="album-text">
|
|
<h1>{album.data.title}</h1>
|
|
<p>{album.data.description}</p>
|
|
</div>
|
|
|
|
<Image src={album.data.cover} alt="" class="album-image"/>
|
|
</a>
|
|
</div>
|
|
<hr/>
|
|
))}
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<style>
|
|
|
|
.album {
|
|
/* display: flex; */
|
|
margin-bottom: 2em;
|
|
width: fit-content;
|
|
transition: 250ms;
|
|
}
|
|
|
|
.album:hover {
|
|
transform: translateY(-1em);
|
|
}
|
|
|
|
.album-image {
|
|
border-style: solid;
|
|
}
|
|
|
|
.album-text {
|
|
position: absolute;
|
|
max-width: 20em;
|
|
margin-left: 1em;
|
|
margin-top: 1em;
|
|
background-color: rgba(250, 235, 215, 0.2);
|
|
rotate: -3deg;
|
|
transition: 250ms;
|
|
}
|
|
|
|
.album-text h1 {
|
|
color: black;
|
|
}
|
|
|
|
.album-text p {
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
|
|
.album-text {
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.album-text h1 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.album-text p {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style> |