Skip to content

Commit

Permalink
feat(ux): turn home page posts into clickable cards (#895)
Browse files Browse the repository at this point in the history
Resolves #895
  • Loading branch information
cotes2020 committed Mar 17, 2023
1 parent 111b828 commit b85f633
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 75 deletions.
103 changes: 51 additions & 52 deletions _layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
# 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 -->

Expand All @@ -29,7 +29,7 @@
{% 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 %}
Expand All @@ -39,55 +39,54 @@
{% endif %}

<div id="post-list">

{% for post in posts %}

<div class="post-preview">
<h1>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</h1>

<div class="post-content">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
{% 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>

<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-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>
</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 %}
Expand Down
3 changes: 2 additions & 1 deletion _sass/colors/dark-typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion _sass/colors/light-typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
66 changes: 45 additions & 21 deletions _sass/layout/home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,26 @@
} /* .pagination */

#post-list {
margin-top: 1rem;
margin-top: 1.75rem;
padding-right: 0.5rem;

a:hover {
text-decoration: none;
}

.post-preview {
padding-top: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--main-border-color);
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);
}

a:hover {
@extend %link-hover;
&:not(:last-child) {
margin-bottom: 1.75rem;
}

h1 {
Expand Down Expand Up @@ -103,7 +113,6 @@
color: var(--post-list-text-color);

> p {
/* Make preview shorter on the homepage */
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -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;

Expand All @@ -131,20 +151,24 @@
/* Sidebar is visible */
@media all and (min-width: 831px) {
#post-list {
margin-top: 1.5rem;

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

> span {
display: inline;
margin-top: 3rem;

.post-preview {
padding: 0.5rem;

.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;
}
}
}
}
Expand Down

0 comments on commit b85f633

Please sign in to comment.