_sass/addon/commons.scss in jekyll-theme-chirpy-6.1.0 vs _sass/addon/commons.scss in jekyll-theme-chirpy-6.2.0

@@ -173,29 +173,25 @@
 }
 
 footer {
   font-size: 0.8rem;
   background-color: var(--main-bg);
+  height: $footer-height;
+  border-top: 1px solid var(--main-border-color);
 
-  div.d-flex {
-    height: $footer-height;
-    line-height: 1.2rem;
-    padding-bottom: 1rem;
-    border-top: 1px solid var(--main-border-color);
-    flex-wrap: wrap;
-  }
+  @extend %text-color;
 
   a {
-    @extend %text-color;
+    @extend %text-highlight;
 
     &:hover {
       @extend %link-hover;
     }
   }
 
   p {
-    width: 100%;
+    line-height: 1.75;
     text-align: center;
     margin-bottom: 0;
   }
 }
 
@@ -218,34 +214,36 @@
   &:only-child {
     position: -webkit-sticky;
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
     &:not(:last-child) {
       margin-bottom: 4rem;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
 }
 
 #panel-wrapper {
   /* the headings */
   .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
     @include label(inherit);
   }
 
   .post-tag {
     line-height: 1.05rem;
     font-size: 0.85rem;
-    border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
 
     &:hover {
@@ -370,11 +368,14 @@
       opacity: 0.3;
     }
   }
 }
 
-.post {
+main {
+  line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
+
   h1 {
     margin-top: 2rem;
     margin-bottom: 1.5rem;
   }
 
@@ -384,10 +385,18 @@
       &:not(.normal):not(.left):not(.right) {
         @include align-center;
       }
     }
   }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-meta {
   font-size: 0.85rem;
 
@@ -400,11 +409,11 @@
   em {
     @extend %normal-font-style;
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
 
   a {
@@ -482,23 +491,24 @@
   }
 
   ::marker {
     color: var(--text-muted-color);
   }
-} /* .post-content */
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
 }
 
 .post-tag {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--btn-border-color);
   padding: 0 0.4rem;
-  color: inherit;
+  color: var(--text-muted-color);
   line-height: 1.3rem;
 
   &:not(:last-child) {
     margin-right: 0.2rem;
   }
@@ -600,11 +610,11 @@
 .flex-grow-1 {
   flex-grow: 1 !important;
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
+  box-shadow: var(--card-shadow);
 }
 
 /* overwrite bootstrap muted */
 .text-muted {
   color: var(--text-muted-color) !important;
@@ -692,10 +702,11 @@
   height: 100%;
   overflow-y: auto;
   width: $sidebar-width;
   z-index: 99;
   background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border-color);
 
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
     display: none;
   }
@@ -739,27 +750,29 @@
     padding-right: 1.25rem;
     width: 100%;
   }
 
   .site-title {
+    font-family: inherit;
     font-weight: 900;
     font-size: 1.75rem;
     line-height: 1.2;
     letter-spacing: 0.25px;
-    color: rgba(134, 133, 133, 0.99);
     margin-top: 1.25rem;
     margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
       @extend %sidebar-link-hover;
+
+      color: var(--site-title-color);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: var(--sidebar-muted-color);
+    color: var(--site-subtitle-color);
     margin-top: 0.25rem;
     word-spacing: 1px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -830,10 +843,11 @@
       background-color: var(--sidebar-btn-bg);
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
+      box-shadow: var(--sidebar-border-color) 0 0 0 1px;
 
       &:hover {
         background-color: var(--sidebar-hover-bg);
       }
     }
@@ -863,11 +877,11 @@
 
     .icon-border {
       @extend %no-cursor;
       @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
 
-      background-color: var(--sidebar-muted-color);
+      background-color: var(--sidebar-btn-color);
       content: '';
       width: $btn-border-width;
       height: $btn-border-width;
       border-radius: 50%;
       margin-bottom: $btn-mb;
@@ -893,11 +907,11 @@
   display: none;
   height: 100%;
   width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
 
 /* --- top-bar --- */
@@ -906,18 +920,17 @@
   height: $topbar-height;
   background-color: var(--topbar-bg);
 }
 
 #topbar {
-  /* icons */
-  i {
+  button i {
     color: #999999;
   }
 
   #breadcrumb {
     font-size: 1rem;
-    color: gray;
+    color: var(--text-muted-color);
     padding-left: 0.5rem;
 
     a:hover {
       @extend %link-hover;
     }
@@ -931,34 +944,73 @@
       }
     }
   }
 } /* #topbar */
 
-#sidebar-trigger,
-#search-trigger {
-  display: none;
+::-webkit-input-placeholder {
+  @include placeholder;
 }
 
-#search-wrapper {
+::-moz-placeholder {
+  @include placeholder;
+}
+
+:-ms-input-placeholder {
+  @include placeholder;
+}
+
+::-ms-input-placeholder {
+  @include placeholder;
+}
+
+::placeholder {
+  @include placeholder;
+}
+
+:focus::-webkit-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-moz-placeholder {
+  @include placeholder-focus;
+}
+
+:focus:-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::-ms-input-placeholder {
+  @include placeholder-focus;
+}
+
+:focus::placeholder {
+  @include placeholder-focus;
+}
+
+search {
   display: flex;
   width: 100%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-border-color);
+  border: 1px solid var(--search-border-color);
   background: var(--main-bg);
   padding: 0 0.5rem;
 
   i {
     z-index: 2;
     font-size: 0.9rem;
     color: var(--search-icon-color);
   }
 }
 
+#sidebar-trigger,
+#search-trigger {
+  display: none;
+}
+
 /* 'Cancel' link */
 #search-cancel {
   color: var(--link-color);
-  margin-left: 0.75rem;
   display: none;
   white-space: nowrap;
 
   @extend %cursor-pointer;
 }
@@ -971,28 +1023,10 @@
   color: var(--text-color);
   height: auto;
 
   &:focus {
     box-shadow: none;
-
-    &.form-control {
-      &::-moz-placeholder {
-        @include input-placeholder;
-      }
-      &::-webkit-input-placeholder {
-        @include input-placeholder;
-      }
-      &:-ms-input-placeholder {
-        @include input-placeholder;
-      }
-      &::-ms-input-placeholder {
-        @include input-placeholder;
-      }
-      &::placeholder {
-        @include input-placeholder;
-      }
-    }
   }
 }
 
 #search-hints {
   padding: 0 1rem;
@@ -1034,11 +1068,11 @@
 
     font-size: 1.4rem;
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
       margin-bottom: 1rem;
     }
@@ -1072,22 +1106,10 @@
   text-overflow: ellipsis;
   word-break: keep-all;
   white-space: nowrap;
 }
 
-#core-wrapper {
-  line-height: 1.75;
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
   inset: 0 0 0 0;
   height: 100%;
@@ -1100,39 +1122,35 @@
 }
 
 /* --- main wrapper --- */
 
 #main-wrapper {
-  background-color: var(--main-bg);
   position: relative;
-  min-height: calc(100vh - $footer-height-mobile);
 
   @include pl-pr(0);
 }
 
 #topbar-wrapper.row,
-#main > .row,
+#main-wrapper > .container > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
 
 /* --- button back-to-top --- */
 
 #back-to-top {
-  $size: 3rem;
-
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
   right: 1rem;
-  bottom: 2rem;
+  bottom: calc($footer-height-large - $back2top-size / 2);
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
-  width: $size;
-  height: $size;
+  width: $back2top-size;
+  height: $back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: transform 0.2s ease-out;
   -webkit-transition: transform 0.2s ease-out;
 
@@ -1140,11 +1158,11 @@
     transform: translate3d(0, -5px, 0);
     -webkit-transform: translate3d(0, -5px, 0);
   }
 
   i {
-    line-height: $size;
+    line-height: $back2top-size;
     position: relative;
     bottom: 2px;
   }
 }
 
@@ -1206,18 +1224,14 @@
  {content} <= 849px screen width
 
 */
 
 @media all and (max-width: 576px) {
-  #main-wrapper {
-    min-height: calc(100vh - #{$footer-height-mobile});
-  }
-
-  #core-wrapper {
-    .post-content {
+  main {
+    .content {
       > blockquote[class^='prompt-'] {
-        @include ml-mr(-1.25rem);
+        @include ml-mr(-1rem);
 
         border-radius: 0;
         max-width: none;
       }
     }
@@ -1236,11 +1250,11 @@
 
   #topbar {
     @extend %full-width;
   }
 
-  #main {
+  #main-wrapper > .container {
     @extend %full-width;
     @include pl-pr(0);
   }
 }
 
@@ -1254,34 +1268,27 @@
     } @else {
       transition: $basic;
     }
   }
 
-  html,
-  body {
-    overflow-x: hidden;
+  main {
+    min-height: calc(100vh - $topbar-height - $footer-height-large);
   }
 
   footer {
     @include slide;
 
-    height: $footer-height-mobile;
-
-    div.d-flex {
-      padding: 1.5rem 0;
-      line-height: 1.65;
-      flex-wrap: wrap;
-    }
+    height: $footer-height-large;
+    padding: 1.5rem 0;
   }
 
   [#{$sidebar-display}] {
     #sidebar {
       transform: translateX(0);
     }
 
-    #main-wrapper,
-    footer {
+    #main-wrapper {
       transform: translateX(#{$sidebar-width});
     }
 
     #back-to-top {
       visibility: hidden;
@@ -1298,137 +1305,111 @@
   #main-wrapper {
     @include slide;
   }
 
   #topbar,
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: 100%;
   }
 
   #search-result-wrapper {
     width: 100%;
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
   #topbar-wrapper {
     @include slide(top 0.2s ease);
 
     left: 0;
   }
 
-  #core-wrapper,
+  main,
   #panel-wrapper {
     margin-top: 0;
   }
 
   #topbar-title,
   #sidebar-trigger,
   #search-trigger {
     display: block;
   }
 
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
   #tags {
     justify-content: center !important;
   }
 
   h1.dynamic-title {
     display: none;
 
-    ~ .post-content {
+    ~ .content {
       margin-top: 2.5rem;
     }
   }
 } /* max-width: 849px */
 
-/* Phone & Pad */
-@media all and (min-width: 577px) and (max-width: 1199px) {
-  footer .d-flex > div {
-    width: 312px;
-  }
-}
-
 /* Sidebar is visible */
 @media all and (min-width: 850px) {
   /* Solved jumping scrollbar */
   html {
     overflow-y: scroll;
   }
 
-  #main-wrapper,
-  footer {
+  #main-wrapper {
     margin-left: $sidebar-width;
   }
 
-  #main-wrapper {
-    min-height: calc(100vh - $footer-height);
-  }
-
-  footer {
-    p {
-      width: auto;
-      &:last-child {
-        &::before {
-          content: '-';
-          margin: 0 0.75rem;
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
   #sidebar {
     .profile-wrapper {
       margin-top: 3rem;
     }
   }
 
   #search-hints {
     display: none;
   }
 
-  #search-wrapper {
+  search {
     max-width: $search-max-width;
   }
 
   #search-result-wrapper {
     max-width: $main-content-max-width;
     justify-content: start !important;
   }
 
-  .post {
+  main {
     h1 {
       margin-top: 3rem;
     }
   }
 
-  div.post-content .table-wrapper > table {
+  div.content .table-wrapper > table {
     min-width: 70%;
   }
 
   /* button 'back-to-Top' position */
   #back-to-top {
-    bottom: 5.5rem;
     right: 5%;
+    bottom: calc($footer-height - $back2top-size / 2);
   }
 
   #topbar-title {
     text-align: left;
   }
 }
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
-  #main .col-lg-11 {
+  #main-wrapper > .container .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
   }
 }
 
@@ -1451,32 +1432,28 @@
 @media all and (max-width: 1199px) {
   #panel-wrapper {
     display: none;
   }
 
-  #main > div.row {
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
 
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #back-to-top {
-    bottom: 6.5rem;
-  }
-
-  #search-wrapper {
+  search {
     margin-right: 4rem;
   }
 
   #search-input {
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
     }
 
@@ -1488,19 +1465,13 @@
       position: relative;
       right: 24.3%;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
-
-  footer {
-    div.d-felx {
-      width: 85%;
-    }
-  }
 }
 
 @media all and (min-width: 1400px) {
   #back-to-top {
     right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
@@ -1508,32 +1479,30 @@
 }
 
 @media all and (min-width: 1650px) {
   $icon-gap: 1rem;
 
-  #main-wrapper,
-  footer {
+  #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
   #topbar-wrapper {
     left: $sidebar-width-large;
   }
 
-  #search-wrapper {
+  search {
     margin-right: calc(
       #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: $main-content-max-width;
     padding-left: 1.75rem !important;
     padding-right: 1.75rem !important;
   }
 
-  #core-wrapper,
+  main.col-12,
   #tail-wrapper {
     padding-right: 4.5rem !important;
   }
 
   #back-to-top {