michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Made blog index landmark elements more accessible (#1578)

Browse source 
* Made blog index landmark elements more accessible

* Fixed CSS

* Hopefully the CSS actually works now
This commit is contained in:
AsyncBanana 2021-10-18 13:33:13 -04:00 • committed by GitHub
parent 3e51037262
commit e9c377b84a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/blog/src/components/BlogPostPreview.astro
View file

@ -10,10 +10,8 @@ const { post } = Astro.props;
<p class="publish-date">{post.publishDate}</p> <p class="publish-date">{post.publishDate}</p>
<a href={post.url}><h1 class="title">{post.title}</h1></a> <a href={post.url}><h1 class="title">{post.title}</h1></a>
</header> </header>
<main> <p>{post.description}</p>
<p>{post.description}</p> <a href={post.url}>Read more</a>
<a href={post.url}>Read more</a>
</main>
</article> </article>
<style> <style>

6
examples/blog/src/pages/index.astro
View file

@ -76,15 +76,15 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
<body> <body>
<BlogHeader /> <BlogHeader />
<div class="layout"> <div class="layout">
<article class="content"> <main class="content">
<section class="intro"> <section class="intro">
<h1 class="latest">{title}</h1> <h1 class="latest">{title}</h1>
<p>{description}</p> <p>{description}</p>
</section> </section>
<section> <section aria-label="Blog post list">
{allPosts.map(p => <BlogPostPreview post={p} />)} {allPosts.map(p => <BlogPostPreview post={p} />)}
</section> </section>
</article> </main>
</div> </div>
</body> </body>
</html> </html>

4
www/src/components/BlogPostPreview.astro
View file

@ -14,9 +14,7 @@ const { title, publishDate, href } = Astro.props;
<p class="publish-date">{publishDate}</p> <p class="publish-date">{publishDate}</p>
<a href={href}><h1 class="title">{title}</h1></a> <a href={href}><h1 class="title">{title}</h1></a>
</header> </header>
<main> <slot />{' '}<a href={href}>Read more →</a>
<slot />{' '}<a href={href}>Read more →</a>
</main>
</article> </article>
<style> <style>

6
www/src/pages/blog/index.astro
View file

@ -61,12 +61,12 @@ let lang = 'en';
<body> <body>
<BlogHeader /> <BlogHeader />
<div class="layout"> <div class="layout">
<article class="content"> <main class="content">
<section class="intro"> <section class="intro">
<h1 class="latest">The Astro Blog</h1> <h1 class="latest">The Astro Blog</h1>
<p>{description}</p> <p>{description}</p>
</section> </section>
<section> <section aria-label="Blog post list">
<BlogPostPreview title="Astro 0.21 Preview: Vite + WASM = ⚡️" publishDate="October 6, 2021" href="/blog/astro-021-preview"> <BlogPostPreview title="Astro 0.21 Preview: Vite + WASM = ⚡️" publishDate="October 6, 2021" href="/blog/astro-021-preview">
<span>Get a sneak preview of what's next for Astro, including our new Vite build engine and WASM-powered Go compiler.</span> <span>Get a sneak preview of what's next for Astro, including our new Vite build engine and WASM-powered Go compiler.</span>
</BlogPostPreview> </BlogPostPreview>
@ -95,7 +95,7 @@ let lang = 'en';
<span>We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.</span> <span>We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.</span>
</BlogPostPreview> </BlogPostPreview>
</section> </section>
</article> </main>
</div> </div>
</body> </body>
</html> </html>

2
www/src/scss/blog.scss
View file

@ -116,7 +116,7 @@ body {
gap: 1em; gap: 1em;
} }
.layout > article { .layout > :is(main,article) {
grid-column: 2; grid-column: 2;
} }