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