Use easing gradients

Author: MrWillCom

.changeset/sparkly-papers-flow.md

@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': minor
+---
+
+Turn linear gradient masks in cover images to the easing ones.

source/css/post.scss

@@ -61,7 +61,26 @@ body {
 
     & > .cover-img {
       --h: 300px;
-      mask-image: linear-gradient(to bottom, #000, transparent);
+      /* https://larsenwork.com/easing-gradients/ */
+      mask-image: linear-gradient(
+        to bottom,
+        hsl(0, 0%, 0%) 0%,
+        hsla(0, 0%, 0%, 0.987) 8.1%,
+        hsla(0, 0%, 0%, 0.951) 15.5%,
+        hsla(0, 0%, 0%, 0.896) 22.5%,
+        hsla(0, 0%, 0%, 0.825) 29%,
+        hsla(0, 0%, 0%, 0.741) 35.3%,
+        hsla(0, 0%, 0%, 0.648) 41.2%,
+        hsla(0, 0%, 0%, 0.55) 47.1%,
+        hsla(0, 0%, 0%, 0.45) 52.9%,
+        hsla(0, 0%, 0%, 0.352) 58.8%,
+        hsla(0, 0%, 0%, 0.259) 64.7%,
+        hsla(0, 0%, 0%, 0.175) 71%,
+        hsla(0, 0%, 0%, 0.104) 77.5%,
+        hsla(0, 0%, 0%, 0.049) 84.5%,
+        hsla(0, 0%, 0%, 0.013) 91.9%,
+        hsla(0, 0%, 0%, 0) 100%
+      );
       mask-composite: destination-in;
       height: var(--h);
       margin-bottom: calc(var(--h) * -0.6);