diff --git a/_includes/related-posts.html b/_includes/related-posts.html index 69e9970..0981d08 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -85,20 +85,18 @@ {% for entry in index_list %} {% assign index = entry | plus: 0 %} {% assign post = site.posts[index] %} -
- -
- {% include datetime.html date=post.date class="small" lang=include.lang %} -

{{ post.title }}

-
-

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

-
+ +
+ {% include datetime.html date=post.date class="small" lang=include.lang %} +

{{ post.title }}

+
+

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

- -
+
+ {% endfor %}
diff --git a/_layouts/home.html b/_layouts/home.html index 0fda074..1844f62 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -43,7 +43,7 @@ refactor: true
{% for post in posts %} -
+
{% if post.image %} {% if post.image.lqip %} {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 3bc5ff4..b03bd7f 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -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; } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index ba3d54b..64dc4a5 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -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; diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 83faba1..7b1ae11 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -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 */ diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 2f0adb5..439c2f3 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -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; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index bd9a0e9..f953832 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -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; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index ad3d043..1ebf312 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -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 { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index fa691f8..ea6ecfc 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -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); - } } }