Skip to content

Commit b658f15

Browse files
SplendidStrontiumSplendidStrontium
committed
add bordered post cards with thumbnails to homepage
1 parent 0bdd4e9 commit b658f15

3 files changed

Lines changed: 141 additions & 34 deletions

File tree

‎_sass/_post-cards.scss‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// _post-cards.scss
2+
// Bordered card layout for homepage blog post listings
3+
4+
.post-card {
5+
display: flex;
6+
gap: 1rem;
7+
padding: 1rem;
8+
border: 1px solid #a3a3a3;
9+
margin-bottom: 1rem;
10+
background-color: #d5d5d5;
11+
}
12+
13+
.post-card-thumbnail {
14+
width: 144px;
15+
height: 96px;
16+
flex-shrink: 0;
17+
overflow: hidden;
18+
background-color: #e5e5e5;
19+
20+
img {
21+
width: 100%;
22+
height: 100%;
23+
object-fit: cover;
24+
}
25+
}
26+
27+
.post-card-content {
28+
flex: 1;
29+
min-width: 0;
30+
}
31+
32+
.post-card-title {
33+
font-size: 1.125rem;
34+
line-height: 1.3;
35+
margin: 0 0 0.25rem 0;
36+
37+
a {
38+
text-decoration: none;
39+
40+
&:hover {
41+
text-decoration: underline;
42+
}
43+
}
44+
}
45+
46+
.post-card-meta {
47+
font-size: 0.75rem;
48+
color: #737373;
49+
margin-bottom: 0.5rem;
50+
}
51+
52+
.post-card-excerpt {
53+
font-size: 0.875rem;
54+
line-height: 1.5;
55+
margin-bottom: 0.5rem;
56+
}
57+
58+
.post-card-link {
59+
font-size: 0.875rem;
60+
text-decoration: none;
61+
62+
&:hover {
63+
text-decoration: underline;
64+
}
65+
}
66+
67+
// Pagination
68+
.pagination {
69+
display: flex;
70+
justify-content: space-between;
71+
align-items: center;
72+
margin-top: 2rem;
73+
padding-top: 1rem;
74+
border-top: 1px solid #a3a3a3;
75+
font-size: 0.875rem;
76+
}
77+
78+
.pagination-prev,
79+
.pagination-next {
80+
text-decoration: none;
81+
82+
&:hover {
83+
text-decoration: underline;
84+
}
85+
86+
&.disabled {
87+
color: #a3a3a3;
88+
pointer-events: none;
89+
}
90+
}
91+
92+
.pagination-info {
93+
color: #737373;
94+
}
95+
96+
// Mobile: stack vertically
97+
@media (max-width: 480px) {
98+
.post-card {
99+
flex-direction: column;
100+
gap: 0.75rem;
101+
}
102+
103+
.post-card-thumbnail {
104+
width: 100%;
105+
height: 128px;
106+
}
107+
}

‎css/main.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,11 @@ $on-laptop: 800px;
9999

100100
// Import partials from `sass_dir` (defaults to `_sass`)
101101
@import
102-
"base",
103-
"layout",
104-
"syntax-highlighting",
105-
"comments"
102+
"base",
103+
"layout",
104+
"syntax-highlighting",
105+
"comments",
106+
"post-cards"
106107
;
107108

108109
.post-preview {

‎index.html‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -24,38 +24,37 @@
2424
<div class="recent-posts">
2525
<h2>Latest Updates</h2>
2626

27-
{% assign blog_posts = site.posts | where: "categories", "blog" %}
28-
{% assign tce_posts = site.posts | where: "categories", "tce" %}
29-
{% assign combined_posts = blog_posts | concat: tce_posts | sort: "date" | reverse | limit: 5 %}
27+
{% assign counter = 0 %}
28+
{% for post in site.posts %}
29+
{% if post.categories contains 'tce' or post.categories contains 'blog' %}
30+
{% if counter < 5 %}
31+
<article class="post-card">
32+
{% if post.card_thumbnail %}
33+
<div class="post-card-thumbnail">
34+
<img src="/assets/tb/cards/{{ post.card_thumbnail }}" alt="">
35+
</div>
36+
{% endif %}
3037

31-
{% for post in combined_posts %}
32-
<article class="post-preview">
33-
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
34-
35-
<p class="post-meta">
36-
{{ post.date | date: "%A, %B %d, %Y" }}
37-
{% if post.categories and post.categories.size > 0 %}
38-
| {{ post.categories | join: ", " }}
39-
{% endif %}
40-
</p>
41-
42-
{% if post.excerpt %}
43-
<div class="excerpt">
44-
{{ post.excerpt | strip_html | truncatewords: 40 }}
45-
</div>
46-
{% else %}
47-
<div class="excerpt">
48-
{{ post.content | strip_html | truncatewords: 30 }}
49-
</div>
38+
<div class="post-card-content">
39+
<h3 class="post-card-title">
40+
<a href="{{ post.url }}">{{ post.title }}</a>
41+
</h3>
42+
<p class="post-card-meta">
43+
{{ post.date | date: "%A, %B %d, %Y" }}
44+
{% if post.categories.size > 0 %}
45+
| {{ post.categories | join: ", " }}
5046
{% endif %}
51-
52-
<p><a href="{{ post.url }}" class="read-more">Continue reading →</a></p>
53-
</article>
54-
{% endfor %}
55-
56-
{% if combined_posts.size == 0 %}
57-
<p>New content coming soon.</p>
58-
{% endif %}
47+
</p>
48+
<p class="post-card-excerpt">
49+
{{ post.excerpt | strip_html | truncatewords: 30 }}
50+
</p>
51+
<a href="{{ post.url }}" class="post-card-link">Continue reading →</a>
52+
</div>
53+
</article>
54+
{% assign counter = counter | plus: 1 %}
55+
{% endif %}
56+
{% endif %}
57+
{% endfor %}
5958
</div>
6059

6160
<hr>

0 commit comments

Comments
 (0)