Skip to content

Commit 12ce5a5

Browse files
gallaylgallayl
committed
fix viewing all posts
1 parent 03860d4 commit 12ce5a5

File tree

2 files changed

+148
-29
lines changed

2 files changed

+148
-29
lines changed

‎src/pages/index.astro‎

Lines changed: 75 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,19 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
5252
</div>
5353
</section>
5454

55+
<main id="main-content" class="main-content">
56+
<div class="inner">
57+
{
58+
featured && (
59+
<section class="featured-section reveal">
60+
<span class="section-label">Latest</span>
61+
<PostCard post={featured} large eager />
62+
</section>
63+
)
64+
}
65+
</div>
66+
</main>
67+
5568
<section class="features">
5669
<div class="inner">
5770
<div class="features-grid">
@@ -153,17 +166,8 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
153166
</div>
154167
</section>
155168

156-
<main id="main-content" class="main-content">
169+
<section class="posts-content">
157170
<div class="inner">
158-
{
159-
featured && (
160-
<section class="featured-section reveal">
161-
<span class="section-label">Latest</span>
162-
<PostCard post={featured} large eager />
163-
</section>
164-
)
165-
}
166-
167171
{
168172
displayedPosts.length > 0 && (
169173
<section class="posts-section">
@@ -177,7 +181,7 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
177181
</div>
178182
{rest.length > 6 && (
179183
<div class="view-all-wrapper">
180-
<a href="/tags/" class="btn btn-outline">
184+
<a href="/posts/" class="btn btn-outline">
181185
View all posts
182186
</a>
183187
</div>
@@ -186,7 +190,7 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
186190
)
187191
}
188192
</div>
189-
</main>
193+
</section>
190194
</BaseLayout>
191195

192196
<script>
@@ -216,6 +220,11 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
216220
text-align: center;
217221
overflow: hidden;
218222
}
223+
@media (min-width: 1080px) {
224+
.hero {
225+
padding: calc(64px + 2.5vw) 5vw 2.5vw;
226+
}
227+
}
219228

220229
.hero-aurora {
221230
position: absolute;
@@ -281,6 +290,12 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
281290
gap: 24px;
282291
margin: 0 auto 36px;
283292
}
293+
@media (min-width: 1080px) {
294+
.hero-brands {
295+
gap: 20px;
296+
margin-bottom: 24px;
297+
}
298+
}
284299
@media (max-width: 600px) {
285300
.hero-brands {
286301
flex-direction: column;
@@ -308,6 +323,13 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
308323
border-color: rgba(255, 255, 255, 0.14);
309324
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
310325
}
326+
@media (min-width: 1080px) {
327+
.hero-brand-card {
328+
flex-direction: row;
329+
gap: 16px;
330+
padding: 20px 28px;
331+
}
332+
}
311333
@media (max-width: 600px) {
312334
.hero-brand-card {
313335
flex-direction: row;
@@ -354,6 +376,12 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
354376
margin-bottom: 32px;
355377
font-weight: 400;
356378
}
379+
@media (min-width: 1080px) {
380+
.hero-description {
381+
font-size: 1.7rem;
382+
margin-bottom: 20px;
383+
}
384+
}
357385
@media (max-width: 600px) {
358386
.hero-description {
359387
font-size: 1.6rem;
@@ -436,6 +464,11 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
436464
border: 1px solid rgba(255, 255, 255, 0.08);
437465
border-radius: 8px;
438466
}
467+
@media (min-width: 1080px) {
468+
.quick-start {
469+
margin-top: 16px;
470+
}
471+
}
439472
.quick-start code {
440473
font-family: var(--font-mono);
441474
font-size: 1.4rem;
@@ -457,19 +490,7 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
457490
}
458491
}
459492
.features::before {
460-
content: '';
461-
position: absolute;
462-
top: -60px;
463-
left: 0;
464-
right: 0;
465-
height: 60px;
466-
background: linear-gradient(to bottom, var(--color-nav-bg), var(--color-whitegrey));
467-
pointer-events: none;
468-
}
469-
@media (prefers-color-scheme: dark) {
470-
.features::before {
471-
background: linear-gradient(to bottom, var(--color-nav-bg), var(--color-darkmode));
472-
}
493+
display: none;
473494
}
474495

475496
.features-grid {
@@ -545,17 +566,42 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
545566
}
546567
}
547568

548-
/* ── Main content ── */
569+
/* ── Main content (featured post) ── */
549570
.main-content {
550571
position: relative;
551-
flex-grow: 1;
552-
padding: 64px 5vw 80px;
572+
padding: 48px 5vw 0;
553573
background: var(--color-whitegrey);
554574
}
575+
.main-content::before {
576+
content: '';
577+
position: absolute;
578+
top: -60px;
579+
left: 0;
580+
right: 0;
581+
height: 60px;
582+
background: linear-gradient(to bottom, var(--color-nav-bg), var(--color-whitegrey));
583+
pointer-events: none;
584+
}
555585
@media (prefers-color-scheme: dark) {
556586
.main-content {
557587
background: var(--color-darkmode);
558588
}
589+
.main-content::before {
590+
background: linear-gradient(to bottom, var(--color-nav-bg), var(--color-darkmode));
591+
}
592+
}
593+
594+
/* ── Posts content (remaining posts) ── */
595+
.posts-content {
596+
position: relative;
597+
flex-grow: 1;
598+
padding: 48px 5vw 80px;
599+
background: var(--color-whitegrey);
600+
}
601+
@media (prefers-color-scheme: dark) {
602+
.posts-content {
603+
background: var(--color-darkmode);
604+
}
559605
}
560606

561607
.section-label {
@@ -569,7 +615,7 @@ const ogImage = `${SITE_URL}/images/blog-cover.png`;
569615
}
570616

571617
.featured-section {
572-
margin-bottom: 64px;
618+
margin-bottom: 0;
573619
}
574620

575621
.posts-section {

‎src/pages/posts/index.astro‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
import BaseLayout from '../../layouts/BaseLayout.astro';
3+
import PostCard from '../../components/PostCard.astro';
4+
import { getCollection } from 'astro:content';
5+
import { SITE_TITLE } from '../../consts';
6+
7+
const allPosts = await getCollection('posts', ({ data }) => !data.draft);
8+
const posts = allPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
9+
10+
const title = `All Posts - ${SITE_TITLE}`;
11+
const description = `Browse all ${posts.length} posts on ${SITE_TITLE}`;
12+
---
13+
14+
<BaseLayout title={title} description={description}>
15+
<header class="posts-header">
16+
<div class="posts-header-inner">
17+
<h1>All Posts</h1>
18+
<p>A collection of {posts.length} {posts.length === 1 ? 'post' : 'posts'}</p>
19+
</div>
20+
</header>
21+
22+
<main id="main-content" class="posts-main">
23+
<div class="inner">
24+
<div class="posts-grid">
25+
{posts.map((post, i) => <PostCard post={post} eager={i === 0} />)}
26+
</div>
27+
</div>
28+
</main>
29+
</BaseLayout>
30+
31+
<style>
32+
.posts-header {
33+
padding: calc(64px + 48px) 5vw 40px;
34+
background: var(--color-nav-bg);
35+
color: #fff;
36+
}
37+
38+
.posts-header-inner {
39+
max-width: 1120px;
40+
margin: 0 auto;
41+
}
42+
43+
.posts-header h1 {
44+
font-size: 3.6rem;
45+
font-weight: 800;
46+
color: #fff;
47+
letter-spacing: -0.03em;
48+
margin-bottom: 8px;
49+
}
50+
@media (max-width: 600px) {
51+
.posts-header h1 {
52+
font-size: 2.6rem;
53+
}
54+
}
55+
56+
.posts-header p {
57+
font-size: 1.6rem;
58+
color: rgba(255, 255, 255, 0.55);
59+
margin: 0;
60+
max-width: 500px;
61+
}
62+
63+
.posts-main {
64+
flex-grow: 1;
65+
padding: 40px 5vw 80px;
66+
background: var(--color-whitegrey);
67+
}
68+
@media (prefers-color-scheme: dark) {
69+
.posts-main {
70+
background: var(--color-darkmode);
71+
}
72+
}
73+
</style>

0 commit comments

Comments
 (0)