blog preview styling pass
MODIFY
src/assets/scss/_blog_preview.scss
src/assets/scss/_blog_preview.scss
-.posts {
+.posts-grid {
display: grid;
+ margin: auto;
max-width: 78rem;
- width: 98vw;
+ width: 100%;
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, 25rem);
grid-template-rows: auto-fit;
justify-content: center;
}
+
+@media (max-width: 400px) {
+ .posts-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+.posts-grid__item {
+ display: flex;
+ max-width: 25rem;
+}
+
.blogPreview {
border-radius: 0.75rem;
- min-width: 20rem;
- max-width: 25rem;
display: flex;
flex-flow: column;
align-items: center;
}
.blogPreview h2 a:focus,
.blogPreview h2 a:hover {
- background-color: var(--brand-light);
+ text-decoration: underline solid;
}
.blogPreview p {
margin: 1rem 0 0;
text-decoration: none;
font-size: var(--p-small);
margin-left: 0.5rem;
+ color: var(--light-grey);
}
.blogPreview .blurb {
padding: 3rem 2rem 2rem;
flex-flow: column;
height: calc(100% - 248px);
}
+.blogPreview .blurb:only-child {
+ height: 100%;
+ padding-top: 1.5rem;
+}
.blogPreview > * {
flex: 0 1 auto;
}

MODIFY
src/components/blog/post-preview.svelte
src/components/blog/post-preview.svelte
</h2>
<p class="excerpt">{post.excerpt}</p>
<p>
- <span
- ><Author author={post.author} showIconOnly />
+ <span>
+ <Author author={post.author} showIconOnly />
<a href="/blog/{post.slug}" class="date" sveltekit:prefetch>
{new Date(Date.parse(post.date)).toLocaleDateString(undefined, {
year: "numeric",

MODIFY
src/routes/blog/index.svelte
src/routes/blog/index.svelte
h2 {
margin-bottom: var(--small);
}
+
+ .blog-layout {
+ @apply pb-10;
+ }
</style>
+<div class="blog-layout">
<OpenGraph
data={{
description:
<section>
<h1>Blog</h1>
</section>
-<div class="posts">
+ <div class="posts-grid">
{#each posts.slice(0, 6) as post}
+ <div class="posts-grid__item">
<PostPreview {post} isMostRecent />
+ </div>
{/each}
</div>
<section>
<h2>Previous posts</h2>
</section>
-<div class="posts previous">
+ <div class="posts-grid previous">
{#each posts.slice(6) as post}
+ <div class="posts-grid__item">
<PostPreview {post} />
+ </div>
{/each}
</div>
+</div>

blog preview styling pass