From b85f6330dea666350631c4461b742cdb54c5f052 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 18 Mar 2023 00:31:52 +0800 Subject: [PATCH] feat(ux): turn home page posts into clickable cards (#895) Resolves #895 --- _layouts/home.html | 97 +++++++++++++++--------------- _sass/colors/dark-typography.scss | 3 +- _sass/colors/light-typography.scss | 3 +- _sass/layout/home.scss | 64 ++++++++++++++------ 4 files changed, 96 insertions(+), 71 deletions(-) diff --git a/_layouts/home.html b/_layouts/home.html index 9d9eae3..42b9fe2 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -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: '' %} @@ -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 %}
+ {% for post in posts %} +
+ +
+

+ {{ post.title }} +

-{% for post in posts %} +
+

+ {% include no-linenos.html content=post.content %} + {{ content | markdownify | strip_html | truncate: 200 | escape }} +

+
-
-

- {{ post.title }} -

+
+
+ + + {% include datetime.html date=post.date %} -
-

- {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: 200 | escape }} -

+ + {% if post.categories.size > 0 %} + + + {% for category in post.categories %} + {{ category }} + {%- unless forloop.last -%},{%- endunless -%} + {% endfor %} + + {% endif %} +
+ + {% if post.pin %} +
+ + {{ site.data.locales[site.lang].post.pin_prompt }} +
+ {% endif %} +
+ +
+
- -
-
- - - - {% include datetime.html date=post.date %} - - - {% if post.categories.size > 0 %} - - - {% for category in post.categories %} - {{ category }} - {%- unless forloop.last -%},{%- endunless -%} - {% endfor %} - - {% endif %} - -
- - {% if post.pin %} -
- - {{ site.data.locales[site.lang].post.pin_prompt }} -
- {% endif %} - -
- -
- -{% endfor %} - -
+ + {% endfor %} +
+ {% if paginator.total_pages > 0 %} {% include post-paginator.html %} diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 8db9c41..dc6f543 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -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; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index d2383af..f04629b 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -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); diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index fd0f146..cdf1f09 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -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; + } } } }