diff options
Diffstat (limited to 'examples/blog/src/components/BlogPostPreview.astro')
-rw-r--r-- | examples/blog/src/components/BlogPostPreview.astro | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro new file mode 100644 index 000000000..9e698fb6e --- /dev/null +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -0,0 +1,57 @@ +--- +export interface Props { + post: any; +} + +const { post } = Astro.props; +--- +<article class="post-preview"> + <header> + <h3 class="publish-date">{post.publishDate}</h3> + <a href={post.url}><h1 class="title">{post.title}</h1></a> + </header> + <main> + <p>{post.description}</p> + <a href={post.url}>Read more</a> + </main> +</article> + +<style> +.content :global(main > * + *) { + margin-top: 1rem; +} + +.post-preview { + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); +} + +header { + display: flex; + flex-direction: column; + text-align: left; + align-items: flex-start; + justify-content: center; + + padding-bottom: 2rem; +} + +.title, +.author, +.publish-date { + margin: 0; +} + +.publish-date, +.author { + font-size: 1.25rem; + color: var(--theme-text-lighter); +} + +.title { + font-size: 2.25rem; + font-weight: 700; + color: var(--theme-text); +} +</style> |