sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 fix alot of styling regarding blogpages

Browse source
This commit is contained in:
SindreKjelsrud 2023-09-25 14:45:37 +02:00
parent 912519d0c6
commit abde34ee29
6 changed files with 54 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/layouts/BlogPost.astro
View file

@ -7,45 +7,28 @@ import FormattedDate from '../components/FormattedDate.astro';
type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
const { title, description, pubDate } = Astro.props;
---
<html lang="en">
<head>
<BaseHead title={title} description={description} />
<style>
.title {
font-size: 2em;
margin: 0.25em 0 0;
}
hr {
border-top: 1px solid #ddd;
margin: 1rem 0;
}
.last-updated-on {
font-style: italic;
}
</style>
</head>
<body>
<Header />
<main>
<article>
{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
<h1 class="title">{title}</h1>
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
<hr />
<slot />
</article>
</main>
<Footer />
<div class="flex flex-col">
<Header />
<main class="flex flex-col items-center mx-auto mt-8">
<article class="flex flex-col mx-auto mb-32">
<h1 class="text-4xl font-extrabold">{title}</h1>
<p class="italic">{description}</p>
<FormattedDate date={pubDate}/>
<div class="flex flex-col items-left w-full max-w-prose blog">
<slot />
</div>
</article>
</main>
<Footer />
</div>
</body>
</html>