Add cover image to the top of a post.

Author: MrWillCom

.changeset/better-dots-camp.md

@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': minor
+---
+
+Add cover image to the top of a post.

layout/post.ejs

@@ -6,6 +6,11 @@
   <%- partial('_partial/categories') %>
 <% } else { %>
 <article class="post">
+  <% if (page.cover_image) { %>
+  <div class="cover">
+    <img src="<%= page.cover_image %>" alt="<%= page.cover_image_alt %>" class="cover-img" data-pagefind-meta="image[src], image_alt[alt]" />
+  </div>
+  <% } %>
   <div class="meta">
     <% if (page.categories && page.categories.length) { %>
     <div class="categories<%= theme.uppercase_categories ? ' text-uppercase' : '' %>">

source/css/post.scss

@@ -1,3 +1,7 @@
+body {
+  margin-top: 0;
+}
+
 .post {
   margin-bottom: 64px;
 }
@@ -45,6 +49,45 @@
 @include meta('.title', '.date', '.categories');
 
 .post {
+  & > .cover {
+    max-width: 100%;
+    overflow: clip visible;
+
+    & > .cover-img {
+      --h: 300px;
+      mask-image: linear-gradient(to bottom, #000, transparent);
+      mask-composite: destination-in;
+      height: var(--h);
+      margin-bottom: calc(var(--h) * -0.6);
+      object-fit: cover;
+
+      @supports (animation-timeline: scroll()) {
+        --range: calc(var(--h) * 3);
+        --offset-coefficient: 0.4;
+
+        @keyframes cover-exit {
+          0% {
+          }
+
+          100% {
+            opacity: 0;
+            scale: 1.2;
+            margin-top: calc(var(--range) * var(--offset-coefficient));
+            margin-bottom: calc(var(--range) * -1 * var(--offset-coefficient));
+            filter: var(--filter-blur);
+          }
+        }
+
+        will-change: filter, margin-top, margin-bottom, opacity, scale;
+        animation-name: cover-exit;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: scroll();
+        animation-range: 0 var(--range);
+      }
+    }
+  }
+
   $content: '& > .content';
 
   #{$content} {