feat: support LQIP for images

_sass/addon/commons.scss

@@ -184,16 +184,27 @@ i { /* fontawesome icons */
 }
 
 img[data-src] {
-  margin: 0.5rem 0;
-
-  &.lazyload,
-  &.lazyloading {
-    opacity: 0;
+  @at-root #main #{&} {
+    margin: 0.5rem 0;
   }
 
-  &.lazyloaded {
-    opacity: 1;
-    transition: opacity 0.5s;
+  &[data-lqip="true"] {
+    &.lazyload,
+    &.lazyloading {
+      filter: blur(20px);
+    }
+  }
+
+  &:not([data-lqip="true"]) {
+    &.lazyload,
+    &.lazyloading {
+      opacity: 0;
+    }
+
+    &.lazyloaded {
+      opacity: 1;
+      transition: opacity 0.5s;
+    }
   }
 
   &.left {
@@ -395,6 +406,10 @@ img[data-src] {
     margin-bottom: 1.5rem;
   }
 
+  img[data-src]:not(.normal):not(.left):not(.right) {
+    @include align-center;
+  }
+
   a {
     &.img-link {
       @extend %no-cursor;
@@ -403,10 +418,6 @@ img[data-src] {
     /* created by `_includes/img-extra.html` */
     &.popup {
       cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
-        @include align-center;
-      }
     }
 
     &:hover {

_sass/colors/dark-typography.scss

@@ -96,8 +96,10 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   .post img[data-src] {
-    -webkit-filter: brightness(95%);
-    filter: brightness(95%);
+    &.lazyloaded {
+      -webkit-filter: brightness(95%);
+      filter: brightness(95%);
+    }
   }
 
   hr {

_sass/layout/post.scss

@@ -30,7 +30,7 @@ img.preview-img {
   margin: 0;
   border-radius: 6px;
 
-  &.bg {
+  &:not(.no-bg) {
     background: var(--preview-img-bg);
   }
 }