perf(ui): improve hover effect for post preview cards

- home cards - navigator buttons at the bottom post
cotes2020 · May 12, 2023 · 7626e4d · 7626e4d
1 parent 34499f0
commit 7626e4d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 35 deletions.
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -395,6 +395,32 @@ i {
 
 /* --- post --- */
 
+.post-preview {
+  @extend %rounded;
+
+  border: 0;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+
+  &::before {
+    @extend %rounded;
+
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: var(--card-hovor-bg);
+    opacity: 0;
+    transition: opacity 0.35s ease-in-out;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.3;
+    }
+  }
+}
+
 .post {
   h1 {
     margin-top: 3rem;
@@ -636,22 +662,6 @@ i {
   @extend %no-decoration;
 }
 
-.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 muted */
 .text-muted {
   color: var(--text-muted-color) !important;
@@ -666,7 +676,7 @@ i {
 
 /* Overwrite bootstrap outline button */
 .btn.btn-outline-primary {
-  &:hover {
+  &:not(.disabled):hover {
     border-color: #007bff !important;
   }
 }

diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
@@ -67,8 +67,9 @@
   --btn-share-hover-color: #bfc1ca;
   --relate-post-date: var(--text-muted-color);
   --card-bg: #1e1e1e;
-  --card-hovor-bg: #3a3a3a;
-  --card-border-color: rgba(172, 169, 169, 0.17);
+  --card-hovor-bg: #464d51;
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 10px 0,
+    rgb(137, 135, 135, 0.3) 0 0 0 1px;
   --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
@@ -63,7 +63,8 @@
   --btn-share-hover-color: var(--link-color);
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
-  --card-border-color: rgba(172, 169, 169, 0.13);
+  --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
+    rgba(211, 209, 209, 0.15) 0 0 0 1px;
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;

diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
@@ -10,7 +10,7 @@
   }
 }
 
-@mixin btn-post-nav {
+%btn-post-nav {
   width: 50%;
   position: relative;
   border-color: var(--btn-border-color);
@@ -172,27 +172,25 @@ h1 + .post-meta {
   padding-bottom: 4rem;
 
   .btn {
-    @include btn-post-nav;
+    @extend %btn-post-nav;
 
-    color: var(--link-color);
+    &:not(:hover) {
+      color: var(--link-color);
+    }
 
     &:hover {
-      background: #2a408e;
-      color: #ffffff;
-      border-color: #2a408e;
+      &:not(.disabled)::before {
+        color: whitesmoke;
+      }
     }
 
     &.disabled {
-      @include btn-post-nav;
+      @extend %btn-post-nav;
 
       pointer-events: auto;
       cursor: not-allowed;
       background: none;
       color: gray;
-
-      &:hover {
-        border-color: none;
-      }
     }
 
     &.btn-outline-primary.disabled:focus {
@@ -207,14 +205,12 @@ h1 + .post-meta {
     }
 
     &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      border-radius: $card-radius 0 0 $card-radius;
       left: 0.5px;
     }
 
     &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-radius: 0 $card-radius $card-radius 0;
       right: 0.5px;
     }
   }
@@ -227,6 +223,15 @@ h1 + .post-meta {
   }
 } /* .post-navigation */
 
+@media (hover: hover) {
+  .post-navigation {
+    .btn,
+    .btn::before {
+      transition: all 0.35s ease-in-out;
+    }
+  }
+}
+
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;