diff options
author | 2021-12-22 16:11:05 -0500 | |
---|---|---|
committer | 2021-12-22 16:11:05 -0500 | |
commit | 6ddd7678ffb6598ae6e263706813cb5e94535f02 (patch) | |
tree | d4b45f7590b59c3574bd6593b17d8066f71007c6 /examples/blog-multiple-authors/src/components/PostPreview.astro | |
parent | 305ce4182fbe89abcfb88008ddce178bd8863b6a (diff) | |
download | astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.tar.gz astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.tar.zst astro-6ddd7678ffb6598ae6e263706813cb5e94535f02.zip |
Use accessible indentation (#2253)
Diffstat (limited to 'examples/blog-multiple-authors/src/components/PostPreview.astro')
-rw-r--r-- | examples/blog-multiple-authors/src/components/PostPreview.astro | 97 |
1 files changed, 48 insertions, 49 deletions
diff --git a/examples/blog-multiple-authors/src/components/PostPreview.astro b/examples/blog-multiple-authors/src/components/PostPreview.astro index 19e1362e5..81e80ba6c 100644 --- a/examples/blog-multiple-authors/src/components/PostPreview.astro +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro @@ -1,66 +1,65 @@ --- export interface Props { - post: any; - author: string; + post: any; + author: string; } const { post, author } = Astro.props; function formatDate(date) { - return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY + return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY } --- +<article class="post"> + <div class="data"> + <h2>{post.title}</h2> + <a class="author" href={`/authors/${post.author}`}>{author.name}</a> + <time class="date" datetime={post.date}>{formatDate(post.date)}</time> + <p class="description"> + {post.description} + <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> + </p> + </div> +</article> + <style lang="scss"> -.post { - padding-top: 6rem; - padding-bottom: 6rem; - border-bottom: 1px solid rgba(black, 0.25); - text-align: center; -} + .post { + padding-top: 6rem; + padding-bottom: 6rem; + border-bottom: 1px solid rgba(black, 0.25); + text-align: center; + } -.author { - text-transform: uppercase; -} + .author { + text-transform: uppercase; + } -.date { - font-style: italic; -} + .date { + font-style: italic; + } -.description { - font-size: 1.25em; -} + .description { + font-size: 1.25em; + } -.link { - text-transform: uppercase; - font-size: 0.8em; - margin-left: 1em; -} + .link { + text-transform: uppercase; + font-size: 0.8em; + margin-left: 1em; + } -h2 { - font-weight: 700; - font-size: 2.75em; - line-height: 1; - letter-spacing: -0.04em; - margin-top: 0; - margin-bottom: 0; -} + h2 { + font-weight: 700; + font-size: 2.75em; + line-height: 1; + letter-spacing: -0.04em; + margin-top: 0; + margin-bottom: 0; + } -time { - display: block; - margin-top: 0.25rem; - margin-bottom: 0.5em; -} + time { + display: block; + margin-top: 0.25rem; + margin-bottom: 0.5em; + } </style> - -<article class="post"> - - <div class="data"> - <h2>{post.title}</h2> - <a class="author" href={`/authors/${post.author}`}>{author.name}</a> - <time class="date" datetime={post.date}>{formatDate(post.date)}</time> - <p class="description"> - {post.description} - <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> - </p> - </div> -</article> |