docs: update site home recommand style

soluvas · Jun 7, 2021 · 7897bd7 · 7897bd7
1 parent a49d74a
commit 7897bd7
Showing 1 changed file with 20 additions and 5 deletions.
diff --git a/site/theme/template/Home/RecommendPage.less b/site/theme/template/Home/RecommendPage.less
@@ -1,5 +1,13 @@
 @import '../../../../components/style/themes/default.less';
 
+.linear-gradient(@mid-pos, @end-pos) {
+  background: linear-gradient(
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.25) @mid-pos,
+    rgba(0, 0, 0, 0.65) @end-pos
+  );
+}
+
 .recommend-block {
   position: relative;
   display: block;
@@ -37,16 +45,15 @@
   }
 
   &::before {
+    .linear-gradient(40%, 100%);
+
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background: linear-gradient(
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0, 0.25) 30%,
-      rgba(0, 0, 0, 0.5) 100%
-    );
+    opacity: 0.3;
+    transition: all 0.5s;
     content: '';
     pointer-events: none;
   }
@@ -107,9 +114,17 @@
   .recommend-block {
     &-main {
       height: 408px;
+
+      &::before {
+        .linear-gradient(70%, 100%);
+      }
     }
 
     &:hover {
+      &::before {
+        opacity: 1;
+      }
+
       .recommend-content {
         transform: translateY(0);