mirror of
https://github.com/Pantonius/pantosite-astro.git
synced 2026-04-26 09:24:38 +00:00
Added phtography section
This commit is contained in:
103
src/layouts/GalleryPhoto.astro
Normal file
103
src/layouts/GalleryPhoto.astro
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user