Skip to content

Commit b85f633

Browse files
cotes2020cotes2020
committed
feat(ux): turn home page posts into clickable cards (#895)
Resolves #895
1 parent 111b828 commit b85f633

File tree

4 files changed

+100
-75
lines changed

4 files changed

+100
-75
lines changed

‎_layouts/home.html‎

Lines changed: 51 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
# The Home page layout
44
---
55

6-
{% assign pinned = site.posts | where: "pin", "true" %}
7-
{% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
6+
{% assign pinned = site.posts | where: 'pin', 'true' %}
7+
{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
88

9-
{% assign posts = "" | split: "" %}
9+
{% assign posts = '' | split: '' %}
1010

1111
<!-- Get pinned posts -->
1212

@@ -29,7 +29,7 @@
2929
{% assign default_beg = 0 %}
3030
{% endif %}
3131

32-
{% assign default_num = paginator.posts | size | minus: pinned_num %}
32+
{% assign default_num = paginator.posts | size | minus: pinned_num %}
3333
{% assign default_end = default_beg | plus: default_num | minus: 1 %}
3434

3535
{% if default_num > 0 %}
@@ -39,55 +39,54 @@
3939
{% endif %}
4040

4141
<div id="post-list">
42-
43-
{% for post in posts %}
44-
45-
<div class="post-preview">
46-
<h1>
47-
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
48-
</h1>
49-
50-
<div class="post-content">
51-
<p>
52-
{% include no-linenos.html content=post.content %}
53-
{{ content | markdownify | strip_html | truncate: 200 | escape }}
54-
</p>
42+
{% for post in posts %}
43+
<div class="card post-preview">
44+
<a href="{{ post.url | relative_url }}">
45+
<div class="card-body">
46+
<h1 class="card-title">
47+
{{ post.title }}
48+
</h1>
49+
50+
<div class="card-text post-content">
51+
<p>
52+
{% include no-linenos.html content=post.content %}
53+
{{ content | markdownify | strip_html | truncate: 200 | escape }}
54+
</p>
55+
</div>
56+
57+
<div class="post-meta text-muted d-flex">
58+
<div class="mr-auto">
59+
<!-- posted date -->
60+
<i class="far fa-calendar fa-fw"></i>
61+
{% include datetime.html date=post.date %}
62+
63+
<!-- categories -->
64+
{% if post.categories.size > 0 %}
65+
<i class="far fa-folder-open fa-fw"></i>
66+
<span>
67+
{% for category in post.categories %}
68+
{{ category }}
69+
{%- unless forloop.last -%},{%- endunless -%}
70+
{% endfor %}
71+
</span>
72+
{% endif %}
73+
</div>
74+
75+
{% if post.pin %}
76+
<div class="pin">
77+
<i class="fas fa-thumbtack fa-fw"></i>
78+
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
79+
</div>
80+
{% endif %}
81+
</div>
82+
<!-- .post-meta -->
83+
</div>
84+
</a>
5585
</div>
56-
57-
<div class="post-meta text-muted d-flex">
58-
<div class="mr-auto">
59-
60-
<!-- posted date -->
61-
<i class="far fa-calendar fa-fw"></i>
62-
{% include datetime.html date=post.date %}
63-
64-
<!-- categories -->
65-
{% if post.categories.size > 0 %}
66-
<i class="far fa-folder-open fa-fw"></i>
67-
<span>
68-
{% for category in post.categories %}
69-
{{ category }}
70-
{%- unless forloop.last -%},{%- endunless -%}
71-
{% endfor %}
72-
</span>
73-
{% endif %}
74-
75-
</div>
76-
77-
{% if post.pin %}
78-
<div class="pin">
79-
<i class="fas fa-thumbtack fa-fw"></i>
80-
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
81-
</div>
82-
{% endif %}
83-
84-
</div> <!-- .post-meta -->
85-
86-
</div> <!-- .post-review -->
87-
88-
{% endfor %}
89-
90-
</div> <!-- #post-list -->
86+
<!-- .post-review -->
87+
{% endfor %}
88+
</div>
89+
<!-- #post-list -->
9190

9291
{% if paginator.total_pages > 0 %}
9392
{% include post-paginator.html %}

‎_sass/colors/dark-typography.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@
6868
--btn-share-color: #6c757d;
6969
--btn-share-hover-color: #bfc1ca;
7070
--relate-post-date: var(--text-muted-color);
71-
--card-bg: rgb(39, 40, 43);
71+
--card-bg: #212121;
72+
--card-hovor-bg: #3a3a3a;
7273
--card-border-color: rgb(53, 53, 60);
7374
--card-box-shadow: var(--main-bg);
7475
--kbd-wrap-color: #6a6a6a;

‎_sass/colors/light-typography.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
/* Posts */
6464
--toc-highlight: #563d7c;
6565
--btn-share-hover-color: var(--link-color);
66-
--card-border-color: #f1f1f1;
66+
--card-hovor-bg: #eeeeee;
67+
--card-border-color: #ececec;
6768
--card-box-shadow: rgba(234, 234, 234, 0.76);
6869
--label-color: #616161;
6970
--relate-post-date: rgba(30, 55, 70, 0.4);

‎_sass/layout/home.scss‎

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,26 @@
5353
} /* .pagination */
5454

5555
#post-list {
56-
margin-top: 1rem;
56+
margin-top: 1.75rem;
5757
padding-right: 0.5rem;
5858

59+
a:hover {
60+
text-decoration: none;
61+
}
62+
5963
.post-preview {
60-
padding-top: 1.5rem;
61-
padding-bottom: 1rem;
62-
border-bottom: 1px solid var(--main-border-color);
64+
padding: 0.25rem;
65+
border-radius: 0.75rem;
66+
border: 1px solid var(--card-border-color);
67+
background: var(--card-bg);
68+
69+
&:hover {
70+
background: var(--card-hovor-bg);
71+
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
72+
}
6373

64-
a:hover {
65-
@extend %link-hover;
74+
&:not(:last-child) {
75+
margin-bottom: 1.75rem;
6676
}
6777

6878
h1 {
@@ -103,7 +113,6 @@
103113
color: var(--post-list-text-color);
104114

105115
> p {
106-
/* Make preview shorter on the homepage */
107116
margin: 0;
108117
overflow: hidden;
109118
text-overflow: ellipsis;
@@ -115,8 +124,19 @@
115124
} /* .post-preview */
116125
} /* #post-list */
117126

127+
@media (hover: hover) {
128+
.post-preview {
129+
transition: all 0.35s ease-in-out;
130+
}
131+
}
132+
118133
/* Hide SideBar and TOC */
119134
@media all and (max-width: 830px) {
135+
.post-preview {
136+
margin-left: -0.5rem;
137+
margin-right: -0.5rem;
138+
}
139+
120140
.pagination {
121141
justify-content: space-evenly;
122142

@@ -131,20 +151,24 @@
131151
/* Sidebar is visible */
132152
@media all and (min-width: 831px) {
133153
#post-list {
134-
margin-top: 1.5rem;
135-
136-
.post-preview .post-meta {
137-
.pin {
138-
background: var(--pin-bg);
139-
border-radius: 5px;
140-
line-height: 1.4rem;
141-
height: 1.3rem;
142-
margin-top: 3px;
143-
padding-left: 1px;
144-
padding-right: 6px;
145-
146-
> span {
147-
display: inline;
154+
margin-top: 3rem;
155+
156+
.post-preview {
157+
padding: 0.5rem;
158+
159+
.post-meta {
160+
.pin {
161+
background: var(--pin-bg);
162+
border-radius: 5px;
163+
line-height: 1.4rem;
164+
height: 1.3rem;
165+
margin-top: 3px;
166+
padding-left: 1px;
167+
padding-right: 6px;
168+
169+
> span {
170+
display: inline;
171+
}
148172
}
149173
}
150174
}

0 commit comments

Comments
 (0)