feat(ux): turn home page posts into clickable cards (#895)
Resolves #895
This commit is contained in:
Cotes Chung
parent
111b82838d
commit
b85f6330de
|
|
@ -3,10 +3,10 @@ layout: page
|
|||
# The Home page layout
|
||||
---
|
||||
|
||||
{% assign pinned = site.posts | where: "pin", "true" %}
|
||||
{% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
|
||||
{% assign pinned = site.posts | where: 'pin', 'true' %}
|
||||
{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
|
||||
|
||||
{% assign posts = "" | split: "" %}
|
||||
{% assign posts = '' | split: '' %}
|
||||
|
||||
<!-- Get pinned posts -->
|
||||
|
||||
|
|
@ -39,15 +39,15 @@ layout: page
|
|||
{% endif %}
|
||||
|
||||
<div id="post-list">
|
||||
|
||||
{% for post in posts %}
|
||||
|
||||
<div class="post-preview">
|
||||
<h1>
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
<div class="card post-preview">
|
||||
<a href="{{ post.url | relative_url }}">
|
||||
<div class="card-body">
|
||||
<h1 class="card-title">
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
|
||||
<div class="post-content">
|
||||
<div class="card-text post-content">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{{ content | markdownify | strip_html | truncate: 200 | escape }}
|
||||
|
|
@ -56,7 +56,6 @@ layout: page
|
|||
|
||||
<div class="post-meta text-muted d-flex">
|
||||
<div class="mr-auto">
|
||||
|
||||
<!-- posted date -->
|
||||
<i class="far fa-calendar fa-fw"></i>
|
||||
{% include datetime.html date=post.date %}
|
||||
|
|
@ -71,7 +70,6 @@ layout: page
|
|||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{% if post.pin %}
|
||||
|
|
@ -80,14 +78,15 @@ layout: page
|
|||
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- .post-meta -->
|
||||
|
||||
</div> <!-- .post-review -->
|
||||
|
||||
</div>
|
||||
<!-- .post-meta -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- .post-review -->
|
||||
{% endfor %}
|
||||
|
||||
</div> <!-- #post-list -->
|
||||
</div>
|
||||
<!-- #post-list -->
|
||||
|
||||
{% if paginator.total_pages > 0 %}
|
||||
{% include post-paginator.html %}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,8 @@
|
|||
--btn-share-color: #6c757d;
|
||||
--btn-share-hover-color: #bfc1ca;
|
||||
--relate-post-date: var(--text-muted-color);
|
||||
--card-bg: rgb(39, 40, 43);
|
||||
--card-bg: #212121;
|
||||
--card-hovor-bg: #3a3a3a;
|
||||
--card-border-color: rgb(53, 53, 60);
|
||||
--card-box-shadow: var(--main-bg);
|
||||
--kbd-wrap-color: #6a6a6a;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,8 @@
|
|||
/* Posts */
|
||||
--toc-highlight: #563d7c;
|
||||
--btn-share-hover-color: var(--link-color);
|
||||
--card-border-color: #f1f1f1;
|
||||
--card-hovor-bg: #eeeeee;
|
||||
--card-border-color: #ececec;
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.76);
|
||||
--label-color: #616161;
|
||||
--relate-post-date: rgba(30, 55, 70, 0.4);
|
||||
|
|
|
|||
|
|
@ -53,16 +53,26 @@
|
|||
} /* .pagination */
|
||||
|
||||
#post-list {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1.75rem;
|
||||
padding-right: 0.5rem;
|
||||
|
||||
.post-preview {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
|
||||
a:hover {
|
||||
@extend %link-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--card-border-color);
|
||||
background: var(--card-bg);
|
||||
|
||||
&:hover {
|
||||
background: var(--card-hovor-bg);
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -103,7 +113,6 @@
|
|||
color: var(--post-list-text-color);
|
||||
|
||||
> p {
|
||||
/* Make preview shorter on the homepage */
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -115,8 +124,19 @@
|
|||
} /* .post-preview */
|
||||
} /* #post-list */
|
||||
|
||||
@media (hover: hover) {
|
||||
.post-preview {
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
.post-preview {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: space-evenly;
|
||||
|
||||
|
|
@ -131,9 +151,12 @@
|
|||
/* Sidebar is visible */
|
||||
@media all and (min-width: 831px) {
|
||||
#post-list {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
|
||||
.post-preview .post-meta {
|
||||
.post-preview {
|
||||
padding: 0.5rem;
|
||||
|
||||
.post-meta {
|
||||
.pin {
|
||||
background: var(--pin-bg);
|
||||
border-radius: 5px;
|
||||
|
|
@ -149,6 +172,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-size: 0.85rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue