asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(ux): turn home page posts into clickable cards (#895)

Browse source 
Resolves #895
This commit is contained in:
Cotes Chung 2023-03-18 00:31:52 +08:00
parent 111b82838d
commit b85f6330de
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
4 changed files with 96 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
_layouts/home.html
View file

@ -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 -->
@ -29,7 +29,7 @@ layout: page
{% assign default_beg = 0 %}
{% endif %}
{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_end = default_beg | plus: default_num | minus: 1 %}
{% if default_num > 0 %}
@ -39,55 +39,54 @@ layout: page
{% endif %}
<div id="post-list">
{% for post in posts %}
<div class="card post-preview">
<a href="{{ post.url | relative_url }}">
<div class="card-body">
<h1 class="card-title">
{{ post.title }}
</h1>
{% for post in posts %}
<div class="card-text post-content">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>
<div class="post-preview">
<h1>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</h1>
<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 %}
<div class="post-content">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw"></i>
<span>
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>
{% if post.pin %}
<div class="pin">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
</div>
{% endif %}
</div>
<!-- .post-meta -->
</div>
</a>
</div>
<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 %}
<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw"></i>
<span>
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>
{% if post.pin %}
<div class="pin">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
</div>
{% endif %}
</div> <!-- .post-meta -->
</div> <!-- .post-review -->
{% endfor %}
</div> <!-- #post-list -->
<!-- .post-review -->
{% endfor %}
</div>
<!-- #post-list -->
{% if paginator.total_pages > 0 %}
{% include post-paginator.html %}

3
_sass/colors/dark-typography.scss
View file

@ -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;

3
_sass/colors/light-typography.scss
View file

@ -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);

64
_sass/layout/home.scss
View file

@ -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 {
text-decoration: none;
}
a:hover {
@extend %link-hover;
.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,20 +151,24 @@
/* Sidebar is visible */
@media all and (min-width: 831px) {
#post-list {
margin-top: 1.5rem;
margin-top: 3rem;
.post-preview .post-meta {
.pin {
background: var(--pin-bg);
border-radius: 5px;
line-height: 1.4rem;
height: 1.3rem;
margin-top: 3px;
padding-left: 1px;
padding-right: 6px;
.post-preview {
padding: 0.5rem;
> span {
display: inline;
.post-meta {
.pin {
background: var(--pin-bg);
border-radius: 5px;
line-height: 1.4rem;
height: 1.3rem;
margin-top: 3px;
padding-left: 1px;
padding-right: 6px;
> span {
display: inline;
}
}
}
}