ebby
eb96f9d85b
All checks were successful
Build and Deploy Astro App / build_and_deploy (push) Successful in 49s
81 lines
1.7 KiB
Text
81 lines
1.7 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import BackNav from "../components/BackNav.astro";
|
|
import { findImageByPath } from "../lib/findImage";
|
|
import type { Post } from "../types/global";
|
|
import Main from "./Main.astro";
|
|
import { formatLocalizedDateString } from "../lib/formatDate";
|
|
|
|
interface Props {
|
|
frontmatter: Post;
|
|
}
|
|
|
|
const { frontmatter } = Astro.props;
|
|
|
|
const titleImg = findImageByPath(frontmatter.image.path);
|
|
const localeDate = formatLocalizedDateString(frontmatter.date);
|
|
---
|
|
|
|
<Main>
|
|
<article class="markdown-content">
|
|
<Image
|
|
id="titleImg"
|
|
src={titleImg}
|
|
alt={frontmatter.image.alt}
|
|
class="rounded"
|
|
/>
|
|
<h1 class="headline">{frontmatter.title}</h1>
|
|
<div class="bottom-info">
|
|
<span>Autor: {frontmatter.author}</span>
|
|
<span>{localeDate}</span>
|
|
</div>
|
|
<slot />
|
|
<BackNav />
|
|
<p class="disclaimer">
|
|
Disclaimer: Dieser Artikel ist ausschließlich privat und wird nicht durch
|
|
Produktplatzierung, Affiliate-Links oder ähnliches Unterstützt. Links
|
|
dienen allein dem Zweck der Information.
|
|
</p>
|
|
</article>
|
|
</Main>
|
|
|
|
<style>
|
|
article {
|
|
max-width: 900px;
|
|
padding: 0 clamp(8px, 32px, 64px);
|
|
}
|
|
|
|
.markdown-content {
|
|
font-size: 1.5rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.markdown-content img {
|
|
width: 100%;
|
|
}
|
|
|
|
#titleImg {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.bottom-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.disclaimer {
|
|
margin: 32px 0 64px 0;
|
|
font-size: smaller;
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.markdown-content {
|
|
font-size: 1.25rem;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
</style>
|