_sass/addon/commons.scss in jekyll-theme-chirpy-4.0.2 vs _sass/addon/commons.scss in jekyll-theme-chirpy-4.1.0

@@ -105,10 +105,11 @@
   @extend %link-color;
 }
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 blockquote {
   border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
@@ -361,13 +362,33 @@
   line-height: 1.8;
   margin-top: 2rem;
   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 .5s;
+    }
+
     &.left {
       float: left;
       margin: 0.75rem 1rem 1rem 0;
     }
 
@@ -378,10 +399,12 @@
 
     &.shadow {
       filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
     }
 
+    @include caption;
+
   }
 
   a {
     blockquote & {
       color: var(--link-color);
@@ -402,18 +425,11 @@
         @include align-center;
       }
     }
 
     &.img-link {
-      + em {
-        display: block;
-        text-align: center;
-        font-style: normal;
-        font-size: 80%;
-        padding: 0;
-        color: #6d6c6c;
-      }
+      @include caption;
     }
 
   } // a
 
   ul {
@@ -587,23 +603,21 @@
   text-align: center;
 }
 
 /* --- sidebar layout --- */
 
-$tab-count: 5 !default;
-
 $sidebar-display: "sidebar-display";
 
 #sidebar {
   @include pl-pr(0);
 
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   overflow-y: auto;
-  width: $sidebar-width-medium;
+  width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
 
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
@@ -708,11 +722,10 @@
 
     li {
       width: 100%;
 
       &:last-child {
-        $cursor-width: 3px;
 
         a {
           position: relative;
           left: $cursor-width / 2;
           width: 100%;
@@ -738,16 +751,16 @@
       visibility: visible;
     }
 
     @for $i from 1 through $tab-count {
       $offset: $tab-count - $i;
-      $top: -$offset * $tab-height + $tab-cursor-height / 2;
+      $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
 
       @if $i < $tab-count {
         > li.active:nth-child(#{$i}),
         > li.nav-item:nth-child(#{$i}):hover {
-          ~li:last-child::after {
+          ~ li:last-child::after {
             @include fix-cursor($top);
           }
         }
       } @else {
         > li.active:nth-child(#{$i}):last-child::after,
@@ -837,11 +850,11 @@
 
 #topbar-wrapper {
   height: $topbar-height;
   position: fixed;
   top: 0;
-  left: 260px; /* same as sidebar width */
+  left: $sidebar-width; /* same as sidebar width */
   right: 0;
   transition: top 0.2s ease-in-out;
   z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
@@ -878,11 +891,11 @@
   display: none;
 }
 
 #search-wrapper {
   display: flex;
-  width: 95%;
+  width: 85%;
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-bg);
   background: var(--search-wrapper-bg);
   padding: 0 0.5rem;
   i {
@@ -1081,11 +1094,11 @@
 
 */
 
 @media all and (max-width: 576px) {
 
-  $footer-height: 6rem; // overwrite
+  $footer-height: $footer-height-mobile; // overwrite
 
   #main > div.row:first-child > div:first-child {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
   }
 
@@ -1155,20 +1168,20 @@
       transform: translateX(0);
     }
 
     #topbar-wrapper,
     #main-wrapper {
-      transform: translateX(#{$sidebar-width-medium});
+      transform: translateX(#{$sidebar-width});
     }
 
   }
 
   #sidebar {
     @extend %slide;
 
-    transform: translateX(-#{$sidebar-width-medium}); // hide
-    -webkit-transform: translateX(-#{$sidebar-width-medium});
+    transform: translateX(-#{$sidebar-width}); // hide
+    -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
       -webkit-transition: none;
       -moz-transition: none;
       transition: none;
@@ -1262,10 +1275,10 @@
   html {
     overflow-y: scroll;
   }
 
   #main-wrapper {
-    margin-left: $sidebar-width-medium;
+    margin-left: $sidebar-width;
   }
 
   .profile-wrapper {
     margin-top: 3rem;
   }