Move the preview image of the post to the top

_layouts/post.html

@@ -10,6 +10,16 @@ tail_includes:
 
 {% include lang.html %}
 
+{% if page.image.src %}
+  {% capture bg %}
+    {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+  {% endcapture %}
+  <img src="{{ page.image.src }}" class="preview-img {{ bg | strip }}"
+      alt="{{ page.image.alt | default: "Preview Image" }}"
+      {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
+      {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
+{% endif %}
+
 <h1 data-toc-skip>{{ page.title }}</h1>
 
 <div class="post-meta text-muted d-flex flex-column">
@@ -47,17 +57,7 @@ tail_includes:
 </div> <!-- .post-meta -->
 
 <div class="post-content">
-
-  {% if page.image.src %}
-  <img src="{{ page.image.src }}"
-      class="preview-img"
-      alt="{{ page.image.alt | default: "Preview Image" }}"
-      {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
-      {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
-  {% endif %}
-
   {{ content }}
-
 </div>
 
 <div class="post-tail-wrapper text-muted">

_sass/addon/commons.scss

@@ -196,6 +196,33 @@ i { // fontawesome icons
   }
 }
 
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+img[data-src] {
+  margin: 0.5rem 0;
+
+  &[data-loaded=true] {
+    animation: fade-in linear 0.5s;
+  }
+
+  &.left {
+    float: left;
+    margin: 0.75rem 1rem 1rem 0;
+  }
+
+  &.right {
+    float: right;
+    margin: 0.75rem 0 1rem 1rem;
+  }
+
+  &.shadow {
+    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+  }
+}
+
 /* --- Panels --- */
 
 .access {
@@ -332,23 +359,6 @@ i { // fontawesome icons
   }
 }
 
-.post {
-  h1 {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-  }
-
-  em { /* MarkDown italic */
-    padding-right: 0.2rem;
-  }
-
-  a:hover {
-    code {
-      @extend %link-hover;
-    }
-  }
-}
-
 /* --- Begin of Markdown table style --- */
 
 .table-wrapper { // it will be created by Liquid
@@ -390,6 +400,39 @@ i { // fontawesome icons
 
 /* --- post --- */
 
+.post {
+  h1 {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  em { // MarkDown italic
+    padding-right: 0.2rem;
+  }
+
+  a {
+    &.img-link {
+      @extend %no-cursor;
+    }
+
+    &.popup { // created by `_includes/img-extra.html`
+      cursor: zoom-in;
+
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
+    }
+
+    &:hover {
+      code {
+        @extend %link-hover;
+      }
+    }
+
+  } // a
+
+}
+
 .pageviews .fa-spinner {
   font-size: 80%;
 }
@@ -418,47 +461,6 @@ i { // fontawesome icons
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  img[data-src] {
-    margin: 0.5rem 0;
-
-    &[data-loaded=true] {
-      animation: fade-in linear 0.5s;
-    }
-
-    &.left {
-      float: left;
-      margin: 0.75rem 1rem 1rem 0;
-    }
-
-    &.right {
-      float: right;
-      margin: 0.75rem 0 1rem 1rem;
-    }
-
-    &.shadow {
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    }
-
-    @include caption;
-
-  }
-
   a {
     &:not(.img-link) {
       @extend %link-underline;
@@ -468,22 +470,17 @@ i { // fontawesome icons
       }
     }
 
-    &.popup { // created by `_includes/img-extra.html`
-      cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
-        @include align-center;
-      }
+    &.img-link + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
     }
 
-    &.img-link {
-      @include caption;
-
-      @extend %no-cursor;
   }
 
-  } // a
-
   ul {
     // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {

_sass/colors/dark-typography.scss

@@ -67,6 +67,7 @@
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-wrapper-bg);
+  --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
 
   /* tags */
   --tag-border: rgb(59, 79, 88);

_sass/colors/light-typography.scss

@@ -66,6 +66,7 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
+  --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);

_sass/layout/post.scss

@@ -31,12 +31,13 @@ h1 + .post-meta {
   }
 }
 
-.post-content {
-  .preview-img {
-    @include align-center;
+img.preview-img {
+  margin-top: 3.75rem;
+  margin-bottom: 0;
+  border-radius: 6px;
 
-    margin-top: 0;
-    margin-bottom: 2.5rem !important;
+  &.bg[data-loaded=true] {
+    background: var(--preview-img-bg);
   }
 }
 
@@ -321,6 +322,10 @@ nav[data-toggle=toc] {
 } // .license-wrapper
 
 @media all and (max-width: 576px) {
+  .preview-img[data-src] {
+    margin-top: 2.2rem;
+  }
+
   .post-tail-bottom {
     -ms-flex-wrap: wrap-reverse !important;
     flex-wrap: wrap-reverse !important;