diff options
Diffstat (limited to 'examples/blog/src/layouts/BlogPost.astro')
| -rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 66 |
1 files changed, 49 insertions, 17 deletions
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index a9526d0d4..da1cafe58 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -14,13 +14,39 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; <head> <BaseHead title={title} description={description} /> <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 { - font-size: 2em; - margin: 0.25em 0 0; + margin-bottom: 1em; + padding: 1em 0; + text-align: center; + line-height: 1; + } + .title h1 { + margin: 0 0 .5em 0; } - hr { - border-top: 1px solid #ddd; - margin: 1rem 0; + .date { + margin-bottom: .5em; + color: rgb(var(--gray)); } .last-updated-on { font-style: italic; @@ -32,20 +58,26 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; <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 class="hero-image">{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}</div> + <div class="prose"> + <div class="title"> + <div class="date"> + <FormattedDate date={pubDate} /> + { + updatedDate && ( + <div class="last-updated-on"> + Last updated on <FormattedDate date={updatedDate} /> + </div> + ) + } </div> - ) - } - <hr /> - <slot /> + <h1>{title}</h1> + <hr /> + </div> + <slot /> + </div> </article> </main> <Footer /> </body> -</html> +</html>
\ No newline at end of file |