feat: support showing description of preview image

Also moved the image position to the metadata area

_layouts/post.html

@@ -11,10 +11,29 @@ tail_includes:
 
 {% include lang.html %}
 
+<h1 data-toc-skip>{{ page.title }}</h1>
+
+<div class="post-meta text-muted">
+    <!-- published date -->
+    <span>
+      {{ site.data.locales[lang].post.posted }}
+      {% include datetime.html date=page.date tooltip=true %}
+    </span>
+
+    <!-- lastmod date -->
+    {% if page.last_modified_at %}
+    <span>
+      {{ site.data.locales[lang].post.updated }}
+      {% include datetime.html date=page.last_modified_at tooltip=true %}
+    </span>
+    {% endif %}
+
   {% if page.image.path %}
     {% capture bg %}
       {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
     {% endcapture %}
+
+    <div class="mt-3 mb-3">
       <img src="{{ page.image.path }}" class="preview-img {{ bg | strip }}"
         alt="{{ page.image.alt | default: "Preview Image" }}"
 
@@ -29,27 +48,13 @@ tail_includes:
       {% elsif page.image.h %}
         height="{{ page.image.h }}"
       {% endif %}>
+
+      {% if page.image.alt %}
+        <figcaption class="pt-2 pb-2">{{ page.image.alt }}</figcaption>
       {% endif %}
 
-<h1 data-toc-skip>{{ page.title }}</h1>
-
-<div class="post-meta text-muted">
-
-  <div>
-    <!-- published date -->
-    <span>
-      {{ site.data.locales[lang].post.posted }}
-      {% include datetime.html date=page.date tooltip=true %}
-    </span>
-
-    <!-- lastmod date -->
-    {% if page.last_modified_at %}
-    <span>
-      {{ site.data.locales[lang].post.updated }}
-      {% include datetime.html date=page.last_modified_at tooltip=true %}
-    </span>
-    {% endif %}
     </div>
+  {% endif %}
 
   <div class="d-flex justify-content-between">
     <!-- author -->

_sass/addon/commons.scss

@@ -441,7 +441,7 @@ img[data-src] {
       margin-right: 2px;
     }
 
-    &:hover {
+    &:not([class]):hover {
       @extend %link-hover;
     }
   }

_sass/layout/post.scss

@@ -41,8 +41,7 @@ h1 + .post-meta {
 }
 
 img.preview-img {
-  margin-top: 3.75rem;
-  margin-bottom: 0;
+  margin: 0;
   border-radius: 6px;
 
   &.bg[data-loaded=true] {