add image-size-control shortcode

assets/css/common/footer.css

@@ -66,3 +66,11 @@
 #instantclick-bar {
     background: var(--tertiary-bg);
 }
+
+/* make zoom overlay and image higher than toc */
+.medium-zoom-overlay {
+    z-index: 2;
+}
+.medium-zoom-image--opened {
+    z-index: 3;
+}

assets/css/common/post-single.css

@@ -273,7 +273,7 @@ h6:hover .anchor {
 
 .post-content img {
     border-radius: 4px;
-    margin: 1rem 0;
+    margin: 1rem auto;
 }
 
 .post-content img[src*="#center"] {
@@ -520,3 +520,8 @@ h6:hover .anchor {
     padding: 1.5em;
     box-shadow: var(--shadow-elevation-low);
 }
+
+.image-size-control > img {
+    width: inherit;
+    height: inherit;
+}

layouts/shortcodes/image-size-control.html

@@ -0,0 +1,6 @@
+<div class="image-size-control" style="
+{{- with (.Get "width") }}width: {{ . }};{{ end -}}
+{{- with (.Get "height") }}height: {{ . }};{{ end -}}
+">
+  {{ .Inner | markdownify }}
+</div>