skyfall/skyfalldev
1
0
Fork 0
mirror of https://github.com/SkyfallWasTaken/skyfalldev.git synced 2024-11-10 04:09:38 +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> <style>
main { main {
width: calc(100% - 2em); 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 { .prose {
width: 720px;
max-width: calc(100% - 2em); max-width: calc(100% - 2em);
margin: auto;
padding: 1em;
color: rgb(var(--gray-dark)); color: rgb(var(--gray-dark));
} }
.title { .title {
margin-bottom: 1em;
padding: 1em 0; padding: 1em 0;
text-align: center;
line-height: 1; line-height: 1;
} }
.title h1 { .title h1 {
@ -48,26 +32,23 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: rgb(var(--gray)); color: rgb(var(--gray));
} }
.last-updated-on {
font-style: italic;
}
</style> </style>
</head> </head>
<body> <body>
<Header /> <Header />
<main> <main class="max-w-full m-0">
<article> <article>
<div class="hero-image"> <div class="w-full">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />} {heroImage && <img width={1020} height={510} src={heroImage} class="block m-0 rounded-md shadow-sm" alt="" />}
</div> </div>
<div class="prose"> <div class="w-[720px] m-auto p-1">
<div class="title"> <div class="mb-1 text-center">
<div class="date"> <div class="date">
<FormattedDate date={pubDate} /> <FormattedDate date={pubDate} />
{ {
updatedDate && ( updatedDate && (
<div class="last-updated-on"> <div class="italic">
Last updated on <FormattedDate date={updatedDate} /> Last updated on <FormattedDate date={updatedDate} />
</div> </div>
) )