jekyll-theme-chirpy 6.1.0 → 6.2.0

data/_sass/addon/commons.scss

@@ -175,17 +175,13 @@ kbd {
 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;
@@ -193,7 +189,7 @@ footer {
   }
 
   p {
-    width: 100%;
+    line-height: 1.75;
     text-align: center;
     margin-bottom: 0;
   }
@@ -220,7 +216,7 @@ i {
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
@@ -229,7 +225,7 @@ i {
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
 }
@@ -237,13 +233,15 @@ i {
 #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;
@@ -372,7 +370,10 @@ i {
   }
 }
 
-.post {
+main {
+  line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
+
   h1 {
     margin-top: 2rem;
     margin-bottom: 1.5rem;
@@ -386,6 +387,14 @@ i {
       }
     }
   }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-meta {
@@ -402,7 +411,7 @@ i {
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
@@ -484,7 +493,7 @@ i {
   ::marker {
     color: var(--text-muted-color);
   }
-} /* .post-content */
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -494,9 +503,10 @@ i {
   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) {
@@ -602,7 +612,7 @@ i {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
+  box-shadow: var(--card-shadow);
 }
 
 /* overwrite bootstrap muted */
@@ -694,6 +704,7 @@ $btn-mb: 0.5rem;
   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 {
@@ -741,23 +752,25 @@ $btn-mb: 0.5rem;
   }
 
   .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;
@@ -832,6 +845,7 @@ $btn-mb: 0.5rem;
       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);
@@ -865,7 +879,7 @@ $btn-mb: 0.5rem;
       @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;
@@ -895,7 +909,7 @@ $btn-mb: 0.5rem;
   width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
@@ -908,14 +922,13 @@ $btn-mb: 0.5rem;
 }
 
 #topbar {
-  /* icons */
-  i {
+  button i {
     color: #999999;
   }
 
   #breadcrumb {
     font-size: 1rem;
-    color: gray;
+    color: var(--text-muted-color);
     padding-left: 0.5rem;
 
     a:hover {
@@ -933,16 +946,51 @@ $btn-mb: 0.5rem;
   }
 } /* #topbar */
 
-#sidebar-trigger,
-#search-trigger {
-  display: none;
+::-webkit-input-placeholder {
+  @include placeholder;
+}
+
+::-moz-placeholder {
+  @include placeholder;
+}
+
+:-ms-input-placeholder {
+  @include placeholder;
 }
 
-#search-wrapper {
+::-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;
 
@@ -953,10 +1001,14 @@ $btn-mb: 0.5rem;
   }
 }
 
+#sidebar-trigger,
+#search-trigger {
+  display: none;
+}
+
 /* 'Cancel' link */
 #search-cancel {
   color: var(--link-color);
-  margin-left: 0.75rem;
   display: none;
   white-space: nowrap;
 
@@ -973,24 +1025,6 @@ $btn-mb: 0.5rem;
 
   &: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;
-      }
-    }
   }
 }
 
@@ -1036,7 +1070,7 @@ $btn-mb: 0.5rem;
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
@@ -1074,18 +1108,6 @@ $btn-mb: 0.5rem;
   white-space: nowrap;
 }
 
-#core-wrapper {
-  line-height: 1.75;
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
@@ -1102,15 +1124,13 @@ $btn-mb: 0.5rem;
 /* --- 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);
 }
@@ -1118,19 +1138,17 @@ $btn-mb: 0.5rem;
 /* --- 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;
@@ -1142,7 +1160,7 @@ $btn-mb: 0.5rem;
   }
 
   i {
-    line-height: $size;
+    line-height: $back2top-size;
     position: relative;
     bottom: 2px;
   }
@@ -1208,14 +1226,10 @@ $btn-mb: 0.5rem;
 */
 
 @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;
@@ -1238,7 +1252,7 @@ $btn-mb: 0.5rem;
     @extend %full-width;
   }
 
-  #main {
+  #main-wrapper > .container {
     @extend %full-width;
     @include pl-pr(0);
   }
@@ -1256,21 +1270,15 @@ $btn-mb: 0.5rem;
     }
   }
 
-  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}] {
@@ -1278,8 +1286,7 @@ $btn-mb: 0.5rem;
       transform: translateX(0);
     }
 
-    #main-wrapper,
-    footer {
+    #main-wrapper {
       transform: translateX(#{$sidebar-width});
     }
 
@@ -1300,8 +1307,7 @@ $btn-mb: 0.5rem;
   }
 
   #topbar,
-  #main,
-  footer > .container {
+  #main-wrapper > .container {
     max-width: 100%;
   }
 
@@ -1310,7 +1316,7 @@ $btn-mb: 0.5rem;
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
@@ -1320,7 +1326,7 @@ $btn-mb: 0.5rem;
     left: 0;
   }
 
-  #core-wrapper,
+  main,
   #panel-wrapper {
     margin-top: 0;
   }
@@ -1331,7 +1337,7 @@ $btn-mb: 0.5rem;
     display: block;
   }
 
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
@@ -1342,19 +1348,12 @@ $btn-mb: 0.5rem;
   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 */
@@ -1362,26 +1361,8 @@ $btn-mb: 0.5rem;
     overflow-y: scroll;
   }
 
-  #main-wrapper,
-  footer {
-    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;
-        }
-      }
-    }
+    margin-left: $sidebar-width;
   }
 
   #sidebar {
@@ -1394,7 +1375,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #search-wrapper {
+  search {
     max-width: $search-max-width;
   }
 
@@ -1403,20 +1384,20 @@ $btn-mb: 0.5rem;
     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 {
@@ -1426,7 +1407,7 @@ $btn-mb: 0.5rem;
 
 /* 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%;
   }
@@ -1453,7 +1434,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #main > div.row {
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
@@ -1461,11 +1442,7 @@ $btn-mb: 0.5rem;
 /* --- 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;
   }
 
@@ -1473,8 +1450,8 @@ $btn-mb: 0.5rem;
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1490,15 +1467,9 @@ $btn-mb: 0.5rem;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
-
-  footer {
-    div.d-felx {
-      width: 85%;
-    }
-  }
 }
 
 @media all and (min-width: 1400px) {
@@ -1510,8 +1481,7 @@ $btn-mb: 0.5rem;
 @media all and (min-width: 1650px) {
   $icon-gap: 1rem;
 
-  #main-wrapper,
-  footer {
+  #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
@@ -1519,20 +1489,19 @@ $btn-mb: 0.5rem;
     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;
   }

data/_sass/addon/module.scss

@@ -11,7 +11,7 @@
 }
 
 %section {
-  #core-wrapper & {
+  main & {
     margin-top: 2.5rem;
     margin-bottom: 1.25rem;
 
@@ -107,7 +107,7 @@
 }
 
 %sidebar-links {
-  color: rgba(117, 117, 117, 0.9);
+  color: var(--sidebar-muted-color);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -122,6 +122,11 @@
   -webkit-box-orient: vertical;
 }
 
+%text-highlight {
+  color: inherit;
+  font-weight: 600;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin mt-mb($value) {
@@ -144,7 +149,11 @@
   padding-right: $val;
 }
 
-@mixin input-placeholder {
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
   opacity: 0.6;
 }