diff options
Diffstat (limited to 'examples/blog/src/components/BlogPost.astro')
-rw-r--r-- | examples/blog/src/components/BlogPost.astro | 130 |
1 files changed, 65 insertions, 65 deletions
diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro index 9f7ac9efe..2dba32c3d 100644 --- a/examples/blog/src/components/BlogPost.astro +++ b/examples/blog/src/components/BlogPost.astro @@ -2,87 +2,87 @@ import Author from './Author.astro'; export interface Props { - title: string; - author: string; - publishDate: string; - heroImage: string; - alt: string; + 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> + <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; -} + .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; - } -} + @media (max-width: 50em) { + .hero-image { + height: 260px; + margin-top: 0; + margin-bottom: 2rem; + } + } -.content { - margin-bottom: 8rem; -} + .content { + margin-bottom: 8rem; + } -.content :global(main > * + *) { - margin-top: 1rem; -} + .content :global(main > * + *) { + margin-top: 1rem; + } -.content :global(h2) { - margin-top: 4rem; -} + .content :global(h2) { + margin-top: 4rem; + } -header { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; + 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); -} + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } -.title, -.author, -.publish-date { - margin: 0; -} + .title, + .author, + .publish-date { + margin: 0; + } -.publish-date, -.author { - color: var(--theme-text-lighter); -} + .publish-date, + .author { + color: var(--theme-text-lighter); + } -.title { - font-size: 2.25rem; - font-weight: 700; -} + .title { + font-size: 2.25rem; + font-weight: 700; + } </style> |