Optimize post-gallery style

layout/_macro/post.njk

@@ -14,6 +14,15 @@
       <meta itemprop="name" content="{{ title }}">
     </span>
 
+    {# Gallery support #}
+    {%- if post.photos and post.photos.length %}
+      <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
+        {%- for photo in post.photos %}
+          <div class="post-gallery-image" style="background-image: url({{ url_for(photo) }});" itemprop="contentUrl"></div>
+        {%- endfor %}
+      </div>
+    {%- endif %}
+
     {%- if post.header !== false %}
       <header class="post-header">
         <{%- if is_index %}h2{% else %}h1{%- endif %} class="post-title{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="name headline">
@@ -163,16 +172,6 @@
     {### POST BODY ###}
     {#################}
     <div class="post-body{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="articleBody">
-
-      {# Gallery support #}
-      {%- if post.photos and post.photos.length %}
-        <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
-          {%- for photo in post.photos %}
-            <img src="{{ url_for(photo) }}" itemprop="contentUrl">
-          {%- endfor %}
-        </div>
-      {%- endif %}
-
       {%- if is_index %}
         {%- if post.description and theme.excerpt_description %}
           <p>{{ post.description }}</p>

source/css/_common/components/post/post-gallery.styl

@@ -1,20 +1,19 @@
 .post-gallery {
-  align-items: center;
-  display: grid;
-  gap: 10px;
-  grid-template-columns: 1fr 1fr 1fr;
-  margin-bottom: 20px;
+  display: flex;
+  margin-bottom: 60px;
 
-  +mobile() {
-    grid-template-columns: 1fr 1fr;
-  }
+  .post-gallery-image {
+    background-size: cover;
+    flex: 1;
+    height: 200px;
 
-  a {
-    // For fancybox
-    border: 0;
-  }
+    &:not(:first-child) {
+      clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
+      margin-left: -20px;
+    }
 
-  img {
-    margin: 0;
+    &:not(:last-child) {
+      margin-right: -20px;
+    }
   }
 }

source/css/_common/components/post/post-header.styl

@@ -1,12 +1,13 @@
 .posts-expand .post-header {
   font-size: $font-size-large;
+  margin-bottom: 60px;
+  text-align: center;
 }
 
 .posts-expand .post-title {
   font-size: $font-size-largest;
   font-weight: normal;
   margin: initial;
-  text-align: center;
   word-wrap();
 
   if (hexo-config('post_edit.enable')) {
@@ -62,8 +63,7 @@
   color: $grey-dark;
   font-family: $font-family-posts;
   font-size: $font-size-smallest;
-  margin: 3px 0 60px 0;
-  text-align: center;
+  margin-top: 3px;
 
   .post-description {
     font-size: $font-size-small;

source/css/_common/outline/mobile.styl

@@ -13,8 +13,8 @@
 
   // For all schemes wider width.
   .posts-expand {
-    .post-meta {
-      margin: 3px 0 10px 0 !important;
+    .post-header {
+      margin-bottom: 10px !important;
     }
   }
 

source/css/_schemes/Mist/_posts-expand.styl

@@ -2,7 +2,7 @@
 // --------------------------------------------------
 .posts-expand {
   &.index {
-    .post-title, .post-meta {
+    .post-header {
       text-align: $site-meta-text-align;
 
       +mobile() {
@@ -11,7 +11,7 @@
     }
 
     .post-meta {
-      margin: 5px 0 20px 0;
+      margin-top: 5px;
     }
   }
 
@@ -23,7 +23,8 @@
     margin-top: 120px;
   }
 
-  .post-title, .post-meta {
+  .post-header {
+    margin-bottom: 20px;
     text-align: center;
   }