mirror of
https://github.com/Pantonius/pantosite-astro.git
synced 2026-04-26 09:24:38 +00:00
104 lines
1.8 KiB
Plaintext
104 lines
1.8 KiB
Plaintext
|
---
|
||
|
|
import type { CollectionEntry } from "astro:content";
|
||
|
|
import BaseHead from "../components/BaseHead.astro";
|
||
|
|
import Header from "../components/Header.astro";
|
||
|
|
import Main from "../components/Main.astro";
|
||
|
|
import Footer from "../components/Footer.astro";
|
||
|
|
import FormattedDate from "../components/FormattedDate.astro";
|
||
|
|
|
||
|
|
type Props = CollectionEntry<"photography">["data"];
|
||
|
|
|
||
|
|
const { title, description, pubDate, src } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<BaseHead title={title} description={description} image={src} />
|
||
|
|
<style>
|
||
|
|
article {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1::after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
/* width: 100%; */
|
||
|
|
height: 2px;
|
||
|
|
background-color: var(--primary);
|
||
|
|
margin: 0.5rem auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2::after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
/* width: 100%; */
|
||
|
|
height: 2px;
|
||
|
|
background-color: var(--primary);
|
||
|
|
margin: 0.5rem auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-image {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-image img {
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prose {
|
||
|
|
width: 720px;
|
||
|
|
max-width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
padding: 1em;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin-bottom: 1em;
|
||
|
|
padding: 1em 0;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title h1 {
|
||
|
|
margin: 0 0 0.5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
margin-bottom: 0.5em;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<Header />
|
||
|
|
<Main>
|
||
|
|
<article>
|
||
|
|
<div class="hero-image">
|
||
|
|
<img
|
||
|
|
width={1020}
|
||
|
|
height={510}
|
||
|
|
src={src}
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="prose">
|
||
|
|
<div class="title">
|
||
|
|
<div class="date">
|
||
|
|
<FormattedDate date={pubDate} />
|
||
|
|
</div>
|
||
|
|
<h1>{title}</h1>
|
||
|
|
</div>
|
||
|
|
<p>
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</Main>
|
||
|
|
<Footer />
|
||
|
|
</body>
|
||
|
|
</html>
|