skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2024-09-19 23:57:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add tailwind to BlogPost

Browse source
This commit is contained in:
SkyfallWasTaken 2024-07-06 12:04:35 +01:00
parent 05fb14f224
commit 63b05fd5ef
1 changed files with 6 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/layouts/BlogPost.astro
View file

@ -16,29 +16,13 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 1em;
color: rgb(var(--gray-dark));
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
@ -48,26 +32,23 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on {
font-style: italic;
}
</style>
</head>
<body>
<Header />
<main>
<main class="max-w-full m-0">
<article>
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
<div class="w-full">
{heroImage && <img width={1020} height={510} src={heroImage} class="block m-0 rounded-md shadow-sm" alt="" />}
</div>
<div class="prose">
<div class="title">
<div class="w-[720px] m-auto p-1">
<div class="mb-1 text-center">
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
<div class="italic">
Last updated on <FormattedDate date={updatedDate} />
</div>
)