perf(core): replace lazysizes with browser-level lazy loading (#1267)

_sass/addon/commons.scss

@@ -71,54 +71,13 @@ a {
 img {
   max-width: 100%;
   height: auto;
-  transition: all 0.35s ease-in-out;
+  transition: all 0.7s ease-in-out;
 
-  &[data-src] {
-    &[data-lqip='true'] {
-      &.lazyload,
-      &.lazyloading {
-        -webkit-filter: blur(20px);
-        filter: blur(20px);
-      }
-    }
+  &[data-lqip='true'] {
+    $blur: 20px;
 
-    &:not([data-lqip='true']) {
-      &.lazyload,
-      &.lazyloading {
-        background: var(--img-bg);
-      }
-
-      &.lazyloaded {
-        -webkit-animation: fade-in 0.35s ease-in;
-        animation: fade-in 0.35s ease-in;
-      }
-    }
-
-    &.shadow {
-      -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-      box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
-    }
-
-    @extend %img-caption;
-  }
-
-  @-webkit-keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+    -webkit-filter: blur($blur);
+    filter: blur($blur);
   }
 }
 
@@ -349,6 +308,29 @@ sup {
 
 /* --- post --- */
 
+.preview-img {
+  aspect-ratio: 40 / 21;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  @extend %rounded;
+
+  &:not(.no-bg) {
+    img {
+      background: var(--img-bg);
+    }
+  }
+
+  img {
+    height: 100%;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %rounded;
+  }
+}
+
 .post-preview {
   @extend %rounded;
 
@@ -384,7 +366,6 @@ main {
   }
 
   p {
-    > img[data-src],
     > a.popup {
       &:not(.normal):not(.left):not(.right) {
         @include align-center;
@@ -538,8 +519,8 @@ main {
     background: var(--shimmer-bg);
     height: 100%;
     width: 100%;
-    -webkit-animation: shimmer 1s infinite;
-    animation: shimmer 1s infinite;
+    -webkit-animation: shimmer 1.3s infinite;
+    animation: shimmer 1.3s infinite;
   }
 
   @-webkit-keyframes shimmer {

_sass/layout/home.scss

@@ -6,8 +6,6 @@
   margin-top: 2rem;
 
   .card-wrapper {
-    display: block;
-
     &:hover {
       text-decoration: none;
     }
@@ -18,27 +16,23 @@
   }
 
   .card {
+    border: 0;
+    background: none;
+
     %img-radius {
       border-radius: $base-radius $base-radius 0 0;
     }
 
     .preview-img {
-      height: 10rem;
-
       @extend %img-radius;
 
       img {
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-
         @extend %img-radius;
       }
     }
 
     .card-body {
-      min-height: 10.5rem;
+      height: 100%;
       padding: 1rem;
 
       .card-title {
@@ -136,20 +130,13 @@
 
 /* Tablet */
 @media all and (min-width: 768px) {
+  %img-radius {
+    border-radius: 0 $base-radius $base-radius 0;
+  }
+
   #post-list {
-    %img-radius {
-      border-radius: 0 $base-radius $base-radius 0;
-    }
-
     .card {
-      .preview-img {
-        width: 20rem;
-        height: 11.55rem; // can hold 2 lines each for title and content
-      }
-
       .card-body {
-        min-height: 10.75rem;
-        width: 60%;
         padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
         .card-text {

_sass/layout/post.scss

@@ -26,26 +26,6 @@
   color: var(--text-color);
 }
 
-.preview-img {
-  overflow: hidden;
-  aspect-ratio: 40 / 21;
-
-  @extend %rounded;
-
-  &:not(.no-bg) {
-    img.lazyloaded {
-      background: var(--img-bg);
-    }
-  }
-
-  img {
-    -o-object-fit: cover;
-    object-fit: cover;
-
-    @extend %rounded;
-  }
-}
-
 h1 + .post-meta {
   > span + span::before {
     @include dot;
@@ -368,10 +348,6 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 576px) {
-  .preview-img[data-src] {
-    margin-top: 2.2rem;
-  }
-
   .post-tail-bottom {
     flex-wrap: wrap-reverse !important;
 
@@ -396,9 +372,4 @@ h1 + .post-meta {
     margin-left: -0.5rem;
     margin-right: -0.5rem;
   }
-
-  .preview-img[data-src] {
-    max-width: 100vw;
-    border-radius: 0;
-  }
 }