summaryrefslogtreecommitdiff
path: root/examples/blog/src/components/BlogPost.astro
diff options
context:
space:
mode:
Diffstat (limited to 'examples/blog/src/components/BlogPost.astro')
-rw-r--r--examples/blog/src/components/BlogPost.astro97
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>