diff options
Diffstat (limited to 'www/src/components/BlogPost.astro')
-rw-r--r-- | www/src/components/BlogPost.astro | 110 |
1 files changed, 0 insertions, 110 deletions
diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro deleted file mode 100644 index 580179c42..000000000 --- a/www/src/components/BlogPost.astro +++ /dev/null @@ -1,110 +0,0 @@ ---- -import Author from './Author.astro'; -import GithubStarButton from './GithubStarButton.astro'; -import GoogleAnalytics from './GoogleAnalytics.astro'; -import BackArrow from './BackArrow.astro'; - -export interface Props { - title: string; - author?: string; - publishDate: string; - heroImage?: string; - heroImageAlt?: string; -} - -const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props; ---- - -<div class="layout"> - <article> - <header> - <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage || '/social.jpg'} alt={heroImageAlt || ''} /> - <p class="publish-date">{publishDate}</p> - <h1 class="title">{title}</h1> - {author && <Author authorId={author} />} - <GithubStarButton /> - </header> - <main class="content"> - <slot /> - <BackArrow url={'/blog/'} title={'Back to all blog posts'} /> - </main> - </article> - <GoogleAnalytics /> -</div> - -<style lang="scss"> - .hero-image { - width: 100vw; - object-fit: cover; - object-position: center; - margin-top: 2rem; - margin-bottom: 4rem; - max-width: 1280px; - - @media (max-width: 50em) { - height: 260px; - margin-top: 0; - margin-bottom: 2rem; - } - } - - .content { - margin-bottom: 8rem; - - :global(> * + *) { - margin-top: 1rem; - } - - :global(h2) { - margin-top: 4rem; - } - - :global(img) { - max-width: 100%; - height: auto; - } - - :global(figure) { - background-color: var(--theme-bg-accent); - margin: 2.5rem 0; - padding: 1.5rem; - } - - // hack until <figcaption> parsing fixed - :global(figcaption *) { - display: inline; - - & + :global(*) { - margin-left: 0.3em; - } - } - } - - 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> |