diff options
Diffstat (limited to 'examples/blog/src/components/BlogPost.astro')
-rw-r--r-- | examples/blog/src/components/BlogPost.astro | 97 |
1 files changed, 0 insertions, 97 deletions
diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro deleted file mode 100644 index 55eaa66ed..000000000 --- a/examples/blog/src/components/BlogPost.astro +++ /dev/null @@ -1,97 +0,0 @@ ---- -import Author from "./Author.astro"; - -export interface Props { - title: string; - author: string; - publishDate: string; - heroImage: string; - alt: string; -} - -const { title, author, publishDate, heroImage, alt } = Astro.props; ---- - -<div class="layout"> - <article class="content"> - <div> - <header> - {heroImage && ( - <img - width="720" - height="420" - class="hero-image" - loading="lazy" - src={heroImage} - alt={alt} - /> - )} - <p class="publish-date">{publishDate}</p> - <h1 class="title">{title}</h1> - <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" /> - </header> - <main> - <slot /> - </main> - </div> - </article> -</div> - -<style> - .hero-image { - width: 100vw; - object-fit: cover; - object-position: center; - margin-top: 2rem; - margin-bottom: 4rem; - max-width: 1280px; - } - - @media (max-width: 50em) { - .hero-image { - height: 260px; - margin-top: 0; - margin-bottom: 2rem; - } - } - - .content { - margin-bottom: 8rem; - } - - .content :global(main > * + *) { - margin-top: 1rem; - } - - .content :global(h2) { - margin-top: 4rem; - } - - header { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; - - padding-bottom: 2rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); - } - - .title, - .author, - .publish-date { - margin: 0; - } - - .publish-date, - .author { - color: var(--theme-text-lighter); - } - - .title { - font-size: 2.25rem; - font-weight: 700; - } -</style> |