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

perf(ui): improve related posts design

Browse source
This commit is contained in:
Cotes Chung 2023-03-21 07:20:32 +08:00
parent 97b8dfeed6
commit 2918da9f29
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
9 changed files with 48 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
_includes/related-posts.html
View file

@ -85,20 +85,18 @@
{% for entry in index_list %}
{% assign index = entry | plus: 0 %}
{% assign post = site.posts[index] %}
<div class="card">
<a href="{{ post.url | relative_url }}">
<div class="card-body">
{% include datetime.html date=post.date class="small" lang=include.lang %}
<h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
<div class="text-muted small">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>
<a href="{{ post.url | relative_url }}" class="card post-preview">
<div class="card-body">
{% include datetime.html date=post.date class="small" lang=include.lang %}
<h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
<div class="text-muted small">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>
</a>
</div>
</div>
</a>
{% endfor %}
</div>
<!-- .card-deck -->

2
_layouts/home.html
View file

@ -43,7 +43,7 @@ refactor: true
<div id="post-list">
{% for post in posts %}
<a href="{{ post.url | relative_url }}" class="card-wrapper">
<div class="card flex-md-row-reverse">
<div class="card post-preview flex-md-row-reverse">
{% if post.image %}
{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}

34
_sass/addon/commons.scss
View file

@ -204,12 +204,12 @@ footer {
@extend %text-color;
&:link {
@include no-text-decoration;
@extend %no-decoration;
}
&:hover {
@extend %link-hover;
@include no-text-decoration;
@extend %no-decoration;
}
}
@ -647,10 +647,26 @@ i {
}
.no-text-decoration {
@include no-text-decoration;
@extend %no-decoration;
}
/* Overrided BS4 Tooltip */
.card.post-preview {
border-radius: $card-radius;
border: 0;
background: var(--card-bg);
box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0,
var(--card-border-color) 0 0 0 1px;
&:hover {
background-color: var(--card-hovor-bg);
img {
filter: brightness(0.7) !important;
}
}
}
/* Overwrite bootstrap tooltip */
.tooltip-inner {
font-size: 0.7rem;
max-width: 220px;
@ -733,7 +749,7 @@ $sidebar-display: 'sidebar-display';
@extend %sidebar-links;
&:hover {
@include no-text-decoration;
@extend %no-decoration;
color: var(--sidebar-active-color) !important;
}
@ -930,6 +946,14 @@ $sidebar-display: 'sidebar-display';
} /* #sidebar */
@media (hover: hover) {
.card.post-preview {
transition: all 0.35s ease-in-out;
img {
transition: all 0.35s ease-in-out;
}
}
#sidebar ul > li:last-child::after {
transition: top 0.5s ease;
}

6
_sass/addon/module.scss
View file

@ -122,12 +122,12 @@
-webkit-box-orient: vertical;
}
/* ---------- scss mixin --------- */
@mixin no-text-decoration {
%no-decoration {
text-decoration: none;
}
/* ---------- scss mixin --------- */
@mixin mt-mb($value) {
margin-top: $value;
margin-bottom: $value;

2
_sass/addon/variables.scss
View file

@ -21,9 +21,9 @@ $topbar-height: 3rem !default;
$search-max-width: 210px !default;
$footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
$main-content-max-width: 1250px !default;
$bottom-min-height: 35rem !default;
$card-radius: 0.5rem;
/* syntax highlight */

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

@ -68,8 +68,7 @@
--relate-post-date: var(--text-muted-color);
--card-bg: #1e1e1e;
--card-hovor-bg: #3a3a3a;
--card-border-color: #2e2e2e;
--card-box-shadow: var(--main-bg);
--card-border-color: rgba(172, 169, 169, 0.17);
--kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424;

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

@ -63,8 +63,7 @@
--btn-share-hover-color: var(--link-color);
--card-bg: white;
--card-hovor-bg: #e2e2e2;
--card-border-color: #ececec;
--card-box-shadow: rgba(234, 234, 234, 0.76);
--card-border-color: rgba(172, 169, 169, 0.13);
--label-color: #616161;
--relate-post-date: rgba(30, 55, 70, 0.4);
--footnote-target-bg: lightcyan;

36
_sass/layout/home.scss
View file

@ -1,7 +1,6 @@
/*
Style for Homepage
*/
$card-radius: 0.5rem;
#post-list {
margin-top: 1.75rem;
@ -19,31 +18,6 @@ $card-radius: 0.5rem;
}
.card {
border-radius: $card-radius;
border: 0;
background: var(--card-bg);
box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0,
rgba(172, 169, 169, 0.08) 0 0 0 1px;
&::before {
content: '';
position: absolute;
background: var(--card-hovor-bg);
opacity: 0;
width: 100%;
height: 100%;
border-radius: $card-radius;
z-index: 1;
}
&:hover {
border-color: var(--card-hovor-bg);
&::before {
opacity: 0.5;
}
}
%img-radius {
border-radius: $card-radius $card-radius 0 0;
}
@ -168,16 +142,6 @@ $card-radius: 0.5rem;
} /* .page-item */
} /* .pagination */
@media (hover: hover) {
#post-list .card {
transition: border-color 0.35s ease-in-out;
&::before {
transition: opacity 0.35s ease-in-out;
}
}
}
/* Tablet */
@media all and (min-width: 768px) {
#post-list {

13
_sass/layout/post.scss
View file

@ -333,24 +333,13 @@ h1 + .post-meta {
}
a:hover {
text-decoration: none;
@extend %no-decoration;
}
.card {
border-color: var(--card-border-color);
background-color: var(--card-bg);
box-shadow: 0 0 5px 0 var(--card-box-shadow);
transition: all 0.3s ease-in-out;
h3 {
@extend %text-color;
}
&:hover {
-webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0);
box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
}
}
}