commons.scss in jekyll-theme-chirpy-5.3.1

- old
+ new

@@ -3,39 +3,39 @@
 */
 
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-scheme;
     }
 
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-scheme;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-scheme;
     }
 
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-scheme;
     }
   }
 
   font-size: 16px;
 }
 
 body {
-  line-height: 1.75rem;
   background: var(--body-bg);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
-  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
+  font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
+  line-height: 1.75;
 }
 
 /* --- Typography --- */
 
 h1 {
@@ -74,18 +74,10 @@
   @extend %anchor;
 
   font-size: 1.1rem;
 }
 
-ol,
-ul {
-  ol,
-  ul {
-    margin-bottom: 1rem;
-  }
-}
-
 a {
   @extend %link-color;
 }
 
 img {
@@ -100,31 +92,32 @@
 
   &[class^="prompt-"] {
     display: flex;
     border-left: 0;
     border-radius: 6px;
-    padding: 0.75rem 1.2rem;
+    padding: 1rem;
     color: var(--prompt-text-color);
 
     &::before {
-      margin-right: 1rem;
       font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;
+      margin-right: 0.75rem;
     }
 
-    p:last-child {
-      margin-bottom: 0rem;
+    > div {
+      max-width: calc(100% - 2rem);
+
+      > :last-child {
+        margin-bottom: 0;
+      }
     }
   }
 
   @include prompt("tip", "\f0eb", 400);
-
   @include prompt("info", "\f06a");
-
   @include prompt("warning", "\f06a");
-
   @include prompt("danger", "\f071");
 }
 
 mjx-container {
   overflow-x: auto;
@@ -146,15 +139,14 @@
   border: solid 1px var(--kbd-wrap-color);
   box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
 
 footer {
-  @include pl-pr(1.5rem);
-
   font-size: 0.8rem;
+  background-color: var(--main-bg);
 
-  > div.d-flex {
+  div.d-flex {
     height: $footer-height;
     line-height: 1.2rem;
     padding-bottom: 1rem;
     border-top: 1px solid var(--main-border-color);
 
@@ -170,11 +162,10 @@
       @include no-text-decoration;
     }
 
     &:hover {
       @extend %link-hover;
-
       @include no-text-decoration;
     }
   }
 
   .footer-right {
@@ -187,19 +178,25 @@
   &.fas {
     @extend %no-cursor;
   }
 }
 
+@-webkit-keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
 img[data-src] {
   margin: 0.5rem 0;
 
-  &[data-loaded=true] {
+  &[data-loaded="true"] {
+    -webkit-animation: fade-in linear 0.5s;
     animation: fade-in linear 0.5s;
   }
 
   &.left {
     float: left;
@@ -210,10 +207,11 @@
     float: right;
     margin: 0.75rem 0 1rem 1rem;
   }
 
   &.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;
@@ -226,11 +224,11 @@
   transition: top 0.2s ease-in-out;
   margin-top: 3rem;
   margin-bottom: 4rem;
 
   &:only-child {
-    position: -webkit-sticky; /* Safari */
+    position: -webkit-sticky;
     position: sticky;
   }
 
   > div {
     padding-left: 1rem;
@@ -242,11 +240,10 @@
   }
 
   .post-content {
     font-size: 0.9rem;
   }
-
 }
 
 #panel-wrapper {
   /* the headings */
   .panel-heading {
@@ -264,16 +261,16 @@
     margin: 0 0.35rem 0.5rem 0;
 
     &:hover {
       background-color: #2a408e;
       border-color: #2a408e;
-      color: #fff;
+      color: #ffffff;
       transition: none;
     }
   }
 
-  [data-topbar-visible=true] & > div {
+  [data-topbar-visible="true"] & > div {
     top: 6rem;
   }
 }
 
 #access-lastmod {
@@ -294,11 +291,10 @@
 
     @extend %no-bottom-border;
 
     color: inherit;
   }
-
 }
 
 .footnotes > ol {
   padding-left: 2rem;
   margin-top: 0.5rem;
@@ -314,14 +310,15 @@
       margin-bottom: 0;
     }
 
     /* [scroll-focus] added by `smooth-scroll.js` */
     &:target:not([scroll-focus]),
-    &[scroll-focus=true] > p {
+    &[scroll-focus="true"] > p {
       background-color: var(--footnote-target-bg);
+      width: -moz-fit-content;
+      width: -webkit-fit-content;
       width: fit-content;
-      -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
       transition: background-color 1.5s ease-in-out;
     }
   }
 }
 
@@ -329,11 +326,10 @@
   @at-root a#{&} {
     @include ml-mr(1px);
     @include pl-pr(2px);
 
     border-bottom-style: none !important;
-    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
 
   /* [scroll-focus] added by `smooth-scroll.js` */
   @at-root sup:target:not([scroll-focus]),
@@ -419,11 +415,10 @@
       code {
         @extend %link-hover;
       }
     }
   } /* a */
-
 }
 
 .pageviews .fa-spinner {
   font-size: 80%;
 }
@@ -447,14 +442,12 @@
   }
 }
 
 .post-content {
   font-size: 1.08rem;
-  line-height: 1.8;
   margin-top: 2rem;
   overflow-wrap: break-word;
-  word-wrap: break-word;
 
   a {
     &:not(.img-link) {
       @extend %link-underline;
 
@@ -464,61 +457,63 @@
     }
 
     &.img-link {
       @extend %img-caption;
     }
+  }
 
+  > ol,
+  > ul {
+    -webkit-padding-start: 1.75rem;
+    padding-inline-start: 1.75rem;
+
+    li {
+      margin: 0.25rem 0;
+      padding-left: 0.25rem;
+    }
+
+    ol,
+    ul {
+      -webkit-padding-start: 1rem;
+      padding-inline-start: 1rem;
+      margin: 0.5rem 0;
+    }
   }
 
-  ul {
-    /* attribute 'hide-bullet' was added by liquid */
-    .task-list-item[hide-bullet] {
+  ul.task-list {
+    -webkit-padding-start: 1.25rem;
+    padding-inline-start: 1.25rem;
+
+    li {
       list-style-type: none;
+      padding-left: 0;
 
       > i { /* checkbox icon */
-        margin: 0 0.4rem 0.2rem -1.4rem;
-        vertical-align: middle;
+        width: 2rem;
+        margin-left: -1.25rem;
         color: var(--checkbox-color);
 
         &.checked {
           color: var(--checkbox-checked-color);
         }
       }
 
+      ul {
+        -webkit-padding-start: 1.75rem;
+        padding-inline-start: 1.75rem;
+      }
     }
 
-    input[type=checkbox] {
+    input[type="checkbox"] {
       margin: 0 0.5rem 0.2rem -1.3rem;
       vertical-align: middle;
     }
-
   } /* ul */
 
-  > ol,
-  > ul {
-    padding-left: 2rem;
-
-    li {
-      ol,
-      ul { /* sub list */
-        padding-left: 2rem;
-        margin-top: 0.3rem;
-      }
-    }
-
-  }
-
-  > ol {
-    li {
-      padding-left: 0.25em;
-    }
-  }
-
   dl > dd {
     margin-left: 1rem;
   }
-
 } /* .post-content */
 
 .tag:hover {
   @extend %tag-hover;
 }
@@ -579,11 +574,10 @@
 .hidden {
   visibility: hidden !important;
 }
 
 .flex-grow-1 {
-  -ms-flex-positive: 1 !important;
   flex-grow: 1 !important;
 }
 
 .btn-box-shadow {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
@@ -671,54 +665,55 @@
       width: 6rem;
       height: 6rem;
       border-radius: 50%;
       border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
+      -webkit-transform: translateZ(0);
       transform: translateZ(0); /* fixed the zoom in Safari */
-      -webkit-transition: border-color 0.35s ease-in-out;
-      -moz-transition: border-color 0.35s ease-in-out;
       transition: border-color 0.35s ease-in-out;
 
       &:hover {
         border-color: white;
       }
     }
 
     img {
       width: 100%;
       height: 100%;
-      -webkit-transition: transform 0.5s;
-      -moz-transition: transform 0.5s;
+      transition: -webkit-transform 0.5s;
       transition: transform 0.5s;
+      transition: transform 0.5s, -webkit-transform 0.5s;
 
       &:hover {
-        -ms-transform: scale(1.2);
-        -moz-transform: scale(1.2);
         -webkit-transform: scale(1.2);
         transform: scale(1.2);
       }
     }
   } /* #avatar */
 
   .site-title {
+    margin-top: 0.55rem;
+
     a {
       @extend %clickable-transition;
 
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 99%);
+      color: rgba(134, 133, 133, 0.99);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
     color: var(--sidebar-muted-color);
-    line-height: 1.2rem;
+    line-height: 1.25rem;
     word-spacing: 1px;
-    margin: 0.5rem 1.5rem 0.5rem 1.5rem;
+    margin: 0.2rem 1.5rem 0.5rem 1.5rem;
     min-height: 3rem; /* avoid vertical shifting in multi-line words */
+    -webkit-user-select: none;
+    -moz-user-select: none;
     user-select: none;
   }
 
   .nav-link {
     border-radius: 0;
@@ -795,13 +790,11 @@
         > li.active:nth-child(#{$i}):last-child::after,
         > li.nav-item:nth-child(#{$i}):last-child:hover::after {
           @include fix-cursor($top);
         }
       }
-
     } /* @for */
-
   } /* ul */
 
   .sidebar-bottom {
     margin-bottom: 2.1rem;
 
@@ -848,20 +841,15 @@
       content: "";
       width: 3px;
       height: 3px;
       border-radius: 50%;
     }
-
   } /* .sidebar-bottom */
-
 } /* #sidebar */
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
-    -webkit-transition: top 0.5s ease;
-    -moz-transition: top 0.5s ease;
-    -o-transition: top 0.5s ease;
     transition: top 0.5s ease;
   }
 }
 
 .profile-wrapper {
@@ -891,18 +879,18 @@
   transition: top 0.2s ease-in-out;
   z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   background-color: var(--topbar-wrapper-bg);
 
-  [data-topbar-visible=false] & {
+  [data-topbar-visible="false"] & {
     top: -$topbar-height; /* same as topbar height. */
   }
 }
 
 #topbar {
   i { /* icons */
-    color: #999;
+    color: #999999;
   }
 
   #breadcrumb {
     font-size: 1rem;
     color: gray;
@@ -962,13 +950,12 @@
   &:focus {
     box-shadow: none;
     background: center;
 
     &.form-control {
-      &::-webkit-input-placeholder { @include input-placeholder; }
       &::-moz-placeholder { @include input-placeholder; }
-      &:-ms-input-placeholder { @include input-placeholder; }
+      &::-webkit-input-placeholder { @include input-placeholder; }
       &::placeholder { @include input-placeholder; }
     }
   }
 }
 
@@ -1050,19 +1037,21 @@
   word-break: keep-all;
   white-space: nowrap;
 }
 
 #core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-
   .categories,
   #tags,
   #archives {
     a:not(:hover) {
       @extend %no-bottom-border;
     }
   }
+
+  @at-root .row:only-child > #{&} {
+    padding-bottom: 3rem;
+  }
 }
 
 #mask {
   display: none;
   position: fixed;
@@ -1080,13 +1069,13 @@
 }
 
 /* --- main wrapper --- */
 
 #main-wrapper {
-  background-color: var(--main-wrapper-bg);
+  background-color: var(--main-bg);
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh - #{$footer-height});
 
   @include pl-pr(0);
 }
 
 #core-wrapper,
@@ -1114,11 +1103,13 @@
   padding: 0;
   width: $size;
   height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
+  transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   -webkit-transition: transform 0.2s ease-out;
 
   i {
     line-height: $size;
     position: relative;
@@ -1130,10 +1121,17 @@
   transform: translate3d(0, -5px, 0);
   -webkit-transform: translate3d(0, -5px, 0);
 }
 
 #notification {
+  @-webkit-keyframes popup {
+    from {
+      opacity: 0;
+      bottom: 0;
+    }
+  }
+
   @keyframes popup {
     from {
       opacity: 0;
       bottom: 0;
     }
@@ -1144,11 +1142,11 @@
     border-bottom: none;
     color: inherit;
   }
 
   .toast-body {
-    font-family: 'Lato';
+    font-family: Lato, sans-serif;
     line-height: 1.25rem;
 
     button {
       font-size: 90%;
       min-width: 4rem;
@@ -1167,15 +1165,16 @@
       background-color: rgba(255, 255, 255, 0.5);
       color: #1b1b1eba;
       position: fixed;
       left: 50%;
       bottom: 20%;
+      -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
+      -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
     }
   }
-
 }
 
 /*
   Responsive Design:
 
@@ -1187,49 +1186,53 @@
 
 @media all and (max-width: 576px) {
   footer {
     height: $footer-height-mobile;
 
-    > div.d-flex {
+    div.d-flex {
       padding: 1.5rem 0;
       flex-wrap: wrap;
-      -ms-flex-pack: distribute !important;
       justify-content: space-around !important;
     }
 
     .footer-left,
     .footer-right {
       text-align: center;
     }
   }
 
+  #main-wrapper {
+    min-height: calc(100vh - #{$footer-height-mobile});
+  }
+
   #core-wrapper {
     min-height: calc(100vh - #{$topbar-height} - #{$footer-height-mobile}) !important;
 
     h1 {
       margin-top: 2.2rem;
       font-size: 1.75rem;
     }
 
     .post-content {
-      > blockquote[class^=prompt-] {
+      > blockquote[class^="prompt-"] {
+        @include pl-pr(1.25rem);
         @include ml-mr(-1.25rem);
+
         border-radius: 0;
+        max-width: none;
       }
     }
-
   }
 
   #avatar > a {
     width: 5rem;
     height: 5rem;
   }
 
   .site-subtitle {
     @include ml-mr(1.8rem);
   }
-
 }
 
 @media all and (max-width: 768px) {
   %full-width {
     max-width: 100%;
@@ -1247,31 +1250,37 @@
 
 /* hide sidebar and panel */
 @media all and (max-width: 849px) {
   @mixin slide($append: null) {
     $basic: transform 0.4s ease;
+
     @if $append {
-      -webkit-transition: $basic, $append;
       transition: $basic, $append;
     } @else {
-      -webkit-transition: $basic;
       transition: $basic;
     }
   }
 
   html,
   body {
     overflow-x: hidden;
   }
 
+  footer {
+    @include slide;
+  }
+
   [#{$sidebar-display}] {
     #sidebar {
+      -webkit-transform: translateX(0);
       transform: translateX(0);
     }
 
     #topbar-wrapper,
-    #main-wrapper {
+    #main-wrapper,
+    footer {
+      -webkit-transform: translateX(#{$sidebar-width});
       transform: translateX(#{$sidebar-width});
     }
   }
 
   #sidebar {
@@ -1279,12 +1288,10 @@
 
     transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
-      -webkit-transition: none;
-      -moz-transition: none;
       transition: none;
     }
   }
 
   #main-wrapper {
@@ -1292,11 +1299,12 @@
 
     padding-top: $topbar-height;
   }
 
   #topbar,
-  #main {
+  #main,
+  footer > .container {
     max-width: 100%;
   }
 
   #search-result-wrapper {
     width: 100%;
@@ -1327,34 +1335,31 @@
   #search-result-wrapper .post-content {
     letter-spacing: 0;
   }
 
   #tags {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 
   h1.dynamic-title {
     display: none;
 
     ~ .post-content {
       margin-top: 3rem;
     }
   }
-
 } /* max-width: 849px */
 
 @media all and (max-width: 849px) and (orientation: portrait) {
-  [data-topbar-visible=false] #topbar-wrapper {
+  [data-topbar-visible="false"] #topbar-wrapper {
     top: 0;
   }
 }
 
 /* Phone & Pad */
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer > .d-flex > div {
+  footer .d-flex > div {
     width: 312px;
   }
 }
 
 /* Sidebar is visible */
@@ -1362,11 +1367,12 @@
   /* Solved jumping scrollbar */
   html {
     overflow-y: scroll;
   }
 
-  #main-wrapper {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width;
   }
 
   .profile-wrapper {
     margin-top: 3rem;
@@ -1393,25 +1399,18 @@
   #back-to-top {
     bottom: 5.5rem;
     right: 5%;
   }
 
-  #topbar {
-    @include pl-pr(2rem);
-  }
-
   #topbar-title {
     text-align: left;
   }
-
 }
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
   #main .col-lg-11 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 96%;
     flex: 0 0 96%;
     max-width: 96%;
   }
 }
 
@@ -1436,11 +1435,11 @@
       }
     }
   }
 
   #topbar-wrapper {
-    left: 210px;
+    left: $sidebar-width-small;
   }
 
   #search-results > div {
     max-width: 700px;
   }
@@ -1454,33 +1453,31 @@
     @include ml-mr(1rem);
 
     font-size: 90%;
   }
 
-  #main-wrapper {
-    margin-left: 210px;
+  #main-wrapper,
+  footer {
+    margin-left: $sidebar-width-small;
   }
 
   #breadcrumb {
     width: 65%;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: keep-all;
     white-space: nowrap;
   }
-
 }
 
 /* panel hidden */
 @media all and (max-width: 1199px) {
   #panel-wrapper {
     display: none;
   }
 
   #main > div.row {
-    -webkit-box-pack: center !important;
-    -ms-flex-pack: center !important;
     justify-content: center !important;
   }
 }
 
 /* --- desktop mode, both sidebar and panel are visible --- */
@@ -1493,11 +1490,10 @@
   #search-wrapper {
     margin-right: 4rem;
   }
 
   #search-input {
-    -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
   }
 
   #search-results > div {
     width: 46%;
@@ -1518,24 +1514,26 @@
 
   .post-content {
     font-size: 1.03rem;
   }
 
-  footer > div.d-felx {
-    width: 85%;
+  footer {
+    div.d-felx {
+      width: 85%;
+    }
   }
-
 }
 
 @media all and (min-width: 1400px) {
   #back-to-top {
     right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
   }
 }
 
 @media all and (min-width: 1650px) {
-  #main-wrapper {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width-large;
   }
 
   #topbar-wrapper {
     left: $sidebar-width-large;
@@ -1544,11 +1542,12 @@
   #search-wrapper {
     margin-right: calc(#{$main-content-max-width} * 0.25 - #{$search-max-width});
   }
 
   #topbar,
-  #main {
+  #main,
+  footer > .container {
     max-width: $main-content-max-width;
   }
 
   #core-wrapper,
   #tail-wrapper {
@@ -1588,23 +1587,24 @@
       }
 
       .site-title {
         @extend %profile-ml;
 
+        margin-top: 0.4rem;
+
         a {
           font-size: 1.7rem;
           letter-spacing: 1px;
         }
       }
 
       .site-subtitle {
         @extend %profile-ml;
 
         word-spacing: 0;
-        margin-top: 0.3rem;
+        margin-top: 0;
       }
-
     } /* .profile-wrapper (min-width: 1650px) */
 
     ul {
       padding-left: 2.5rem;
 
@@ -1626,23 +1626,20 @@
             &.unloaded {
               display: inline-block !important;
             }
           }
         }
-
       }
     }
 
     .sidebar-bottom {
       padding-left: 3.5rem;
       width: 100%;
 
       $icon-block-size: 2rem;
 
       &.justify-content-center {
-        -webkit-box-pack: start !important;
-        -ms-flex-pack: start !important;
         justify-content: flex-start !important;
       }
 
       > span,
       > button.mode-toggle,
@@ -1663,18 +1660,16 @@
 
         &::before {
           position: absolute;
           top: 50%;
           left: 50%;
+          -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
         }
       }
 
       .icon-border {
         top: 0.9rem;
       }
-
     } /* .sidebar-bottom */
-
   } /* #sidebar */
-
 } /* min-width: 1650px */