jekyll-theme-chirpy 4.3.1 → 5.0.0

data/_sass/addon/module.scss

@@ -10,6 +10,46 @@
   font-family: 'Lato', 'Microsoft Yahei', sans-serif;
 }
 
+%section {
+  #core-wrapper & {
+    margin-top: 2.5rem;
+    margin-bottom: 2rem;
+  }
+}
+
+%anchor {
+  .anchor {
+    font-size: 1rem;
+    margin-left: 0.5rem;
+  }
+
+  @media (hover: hover) {
+    .anchor {
+      border-bottom: none !important;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
+    }
+
+    &:hover {
+      .anchor {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
+      }
+    }
+  }
+}
+
+%anchor-relative {
+  @extend %anchor;
+
+  .anchor {
+    position: relative;
+    bottom: 1px;
+  }
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -39,26 +79,22 @@
   transition: color 0.35s ease-in-out;
 }
 
-%no-bottom-border {
-  border-bottom: none;
-}
-
-%section {
-  #post-wrapper & {
-    line-height: 1.2;
-    margin-bottom: 1rem;
-  }
+%no-cursor {
+  user-select: none;
 }
 
-%anchor {
-  padding-top: 3.5rem;
-  margin-top: -2.5rem;
+%no-bottom-border {
+  border-bottom: none;
 }
 
 %cursor-pointer {
   cursor: pointer;
 }
 
+%normal-font-style {
+  font-style: normal;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
@@ -84,28 +120,12 @@
   opacity: 0.6;
 }
 
-@mixin semi-bold {
-  font-weight: 600;
-}
-
 @mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
   color: $color;
   font-size: $font-size;
   font-weight: $font-weight;
 }
 
-@mixin panel-label {
-  @include label(inherit);
-
-  display: block;
-  line-height: 1.2;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  margin-top: 0;
-  margin-bottom: 0;
-  letter-spacing: -0.02em;
-}
-
 @mixin align-center {
   position: relative;
   left: 50%;

data/_sass/addon/syntax.scss

@@ -38,13 +38,8 @@ $code-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 1.2rem;
-}
-
-div > pre {
-  @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
-  @extend %code-snippet-padding;
+  padding-left: 1rem;
+  padding-right: 1.5rem;
 }
 
 .highlighter-rouge {
@@ -65,6 +60,8 @@ div > pre {
   }
 
   overflow: auto;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
 
   pre {
     margin-bottom: 0;
@@ -74,19 +71,12 @@ div > pre {
   }
 
   table {
-    padding: 0;
-    border: 0;
     td pre {
       overflow: visible;  /* Fixed iOS safari overflow-x */
       word-break: normal; /* Fixed iOS safari linenos code break */
     }
   }
 
-  td {
-    padding: 0;
-    border: 0;
-  }
-
   .lineno {
     padding-right: 0.5rem;
     min-width: 2.2rem;
@@ -120,22 +110,26 @@ code {
     background-color: var(--inline-code-bg);
   }
 
-  @at-root a > &.highlighter-rouge {
+  a > &.highlighter-rouge {
     padding-bottom: 0; // show link's underlinke
     color: inherit;
   }
 
-  @at-root a:hover > &.highlighter-rouge {
+  a:hover > &.highlighter-rouge {
     border-bottom: none;
   }
 
   blockquote &.highlighter-rouge {
     color: inherit;
   }
+
+  .highlight > & {
+    color: transparent;
+  }
 }
 
 td.rouge-code {
-  padding: 1.2rem 1.5rem 1.2rem 1rem;
+  @extend %code-snippet-padding;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -157,63 +151,82 @@ div {
     pre.lineno {
       display: none;
     }
+
     td.rouge-code {
-      @extend %code-snippet-padding;
+      padding-left: 1.5rem;
     }
   }
 }
 
 .code-header {
-  background: var(--code-header-bg);
+  @extend %no-cursor;
+
+  $code-header-height: 2.25rem;
+
   border-top-left-radius: $code-radius;
   border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  line-height: 1.85rem;
-
-  // icons
-  i {
-    font-size: 1rem;
-    color: var(--lang-badge-muted-color);
-
-    &.small {
-      font-size: 70%;
-    }
+  height: $code-header-height;
+
+  &::before {
+    $dot-size: 0.75rem;
+    $dot-margin: 0.5rem;
+
+    content: "";
+    display: inline-block;
+    margin-left: 1rem;
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    background-color: var(--code-header-muted-color);
+    box-shadow:
+      ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+      ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
   }
 
   // the label block
   span {
-    padding-left: 0.35rem;
-
-    &::after {
-      content: attr(text-data);
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--lang-badge-color);
-    }
-
+    // label icon
     i {
-      margin: 0 0.5rem;
+      font-size: 1rem;
+      margin-right: 0.4rem;
+      color: var(--code-header-icon-color);
+
+      &.small {
+        font-size: 70%;
+      }
     }
 
     @at-root [file] #{&} > i {
       position: relative;
       top: 1px; // center the file icon
-      margin-left: 0.25rem;
     }
 
+    // label text
+    &::after {
+      content: attr(label-text);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--code-header-text-color);
+    }
   }
 
   // clipboard
   button {
-    border: 1px solid var(--code-header-bg);
+    @extend %cursor-pointer;
+
+    border: 1px solid transparent;
     border-radius: $code-radius;
+    height: $code-header-height;
+    width: $code-header-height;
     padding: 0;
-    width: 1.95rem;
     background-color: inherit;
 
-    @extend %cursor-pointer;
+    i {
+      color: var(--code-header-icon-color);
+    }
 
     &[timeout] {
       &:hover {

data/_sass/addon/variables.scss

@@ -27,7 +27,7 @@ $main-content-max-width: 1150px !default;
 
 $panel-max-width: 300px !default;
 
-$post-extend-min-height: 35rem !default;
+$bottom-min-height: 35rem !default;
 
 /* syntax highlight */
 

data/_sass/colors/dark-syntax.scss

@@ -74,9 +74,9 @@
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
   --inline-code-bg: #272822;
-  --code-header-bg: #353535;
-  --lang-badge-color: #858586;
-  --lang-badge-muted-color: #6c6c6d;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: rgb(60 60 60);
+  --code-header-icon-color: rgb(86 86 86);
   --clipboard-checked-color: #2bcc2b;
 
   .highlight {
@@ -84,5 +84,4 @@
   }
 
   pre { color: #bfbfbf; } /* override Bootstrap */
-  kbd { background-color: black; }
 }

data/_sass/colors/dark-typography.scss

@@ -8,8 +8,6 @@
   --mask-bg: rgb(68, 69, 70);
   --main-wrapper-bg: rgb(27, 27, 30);
   --main-border-color: rgb(44, 45, 45);
-  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
-  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
   /* Common color */
   --text-color: rgb(175, 176, 177);
@@ -67,6 +65,10 @@
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-wrapper-bg);
+  --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
+  --kbd-wrap-color: #6a6a6a;
+  --kbd-text-color: #d3d3d3;
+  --kbd-bg-color: #242424;
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
@@ -84,12 +86,8 @@
   --timeline-color: rgb(63, 65, 68);
   --timeline-year-dot-color: var(--timeline-color);
 
-  /* Footer */
-  --footer-bg-color: var(--main-wrapper-bg);
-  --footer-link: rgb(171, 171, 171);
-
-  .post-content img {
-    filter: brightness(90%);
+  .post img[data-src] {
+    filter: brightness(95%);
   }
 
   hr {
@@ -116,11 +114,13 @@
     .card-header {
       background-color: var(--card-header-bg);
     }
+
     .list-group-item {
       border-left: none;
       border-right: none;
       padding-left: 2rem;
       border-color: var(--categories-border);
+
       &:last-child {
         border-bottom-color: var(--card-bg);
       }
@@ -128,13 +128,21 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image: linear-gradient(
-      to left,
-      rgb(26, 26, 30),
-      rgb(39, 39, 45),
-      rgb(39, 39, 45),
-      rgb(39, 39, 45),
-      rgb(26, 26, 30));
+    background-image:
+      linear-gradient(
+        to left,
+        rgb(26, 26, 30),
+        rgb(39, 39, 45),
+        rgb(39, 39, 45),
+        rgb(39, 39, 45),
+        rgb(26, 26, 30)
+      );
+  }
+
+  color-scheme: dark;
+
+  #disqus_thread {
+    color-scheme: none;
   }
 
 } // dark-scheme

data/_sass/colors/light-syntax.scss

@@ -71,9 +71,9 @@
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
   --inline-code-bg: #f3f3f3;
-  --code-header-bg: #eaeaea;
-  --lang-badge-color: rgb(128 128 128 / 87%);
-  --lang-badge-muted-color: rgb(128 128 128 / 36%);
+  --code-header-text-color: #a3a3b1;
+  --code-header-muted-color: #ebebeb;
+  --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
 } // light-syntax

data/_sass/colors/light-typography.scss

@@ -8,8 +8,6 @@
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
-  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
 
   /* Common color */
   --text-color: #34343c;
@@ -66,6 +64,10 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
+  --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
+  --kbd-wrap-color: #bdbdbd;
+  --kbd-text-color: var(--text-color);
+  --kbd-bg-color: white;
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);
@@ -76,7 +78,4 @@
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
 
-  /* Footer */
-  --footer-bg-color: #ffffff;
-  --footer-link: #424242;
 } // light-scheme

data/_sass/jekyll-theme-chirpy.scss

@@ -1,7 +1,7 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v4.3.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.0.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

data/_sass/layout/archives.scss

@@ -41,6 +41,7 @@
     &:not(:first-child) {
       position: relative;
       left: 4px;
+
       &::after {
         left: 67px;
       }
@@ -98,6 +99,7 @@
   .date {
     white-space: nowrap;
     display: inline-block;
+
     &.month {
       width: 1.4rem;
       text-align: center;
@@ -120,6 +122,7 @@
         z-index: 1;
       }
     }
+
     &.day {
       font-size: 85%;
       font-family: 'Lato', sans-serif;
@@ -127,7 +130,7 @@
       margin-right: -2px;
       width: 1.2rem;
       position: relative;
-      left: -.15rem;
+      left: -0.15rem;
     }
   } // #archives .date
 
@@ -136,6 +139,7 @@
 @media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;
+
     ul {
       letter-spacing: 0;
     }

data/_sass/layout/category-tag.scss

@@ -3,7 +3,7 @@
 */
 
 .dash {
-  margin: 0 .5rem .6rem .5rem;
+  margin: 0 0.5rem 0.6rem 0.5rem;
   border-bottom: 2px dotted var(--dash-color);
 }
 
@@ -60,8 +60,9 @@
   #page-tag {
     ul > li {
       &::before {
-        margin: 0 .5rem;
+        margin: 0 0.5rem;
       }
+
       > a {
         white-space: nowrap;
         overflow: hidden;

data/_sass/layout/home.scss

@@ -22,24 +22,29 @@
       border-radius: 50%;
       border: 1px solid var(--btn-paginator-border-color);
       background-color: var(--button-bg);
+
       &:hover {
         background-color: var(--btn-paginator-hover-color);
       }
     }
+
     &.active {
       .page-link {
         background-color: var(--btn-paginator-hover-color);
         color: var(--btn-text-color);
       }
     }
+
     &.disabled {
       cursor: not-allowed;
+
       .page-link {
         color: rgba(108, 117, 125, 0.57);
         border-color: var(--btn-paginator-border-color);
         background-color: var(--button-bg);
       }
     }
+
     &:first-child .page-link,
     &:last-child .page-link {
       border-radius: 50%;
@@ -69,9 +74,14 @@
     .post-meta {
       i {
         font-size: 0.73rem;
+
+        &:not(:first-child) {
+          margin-left: 1.2rem;
+        }
       }
-      span:not(:last-child) {
-        margin-right: 1.2rem;
+
+      em {
+        @extend %normal-font-style;
       }
     }
 
@@ -79,6 +89,7 @@
       margin-top: 0.6rem;
       margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
+
       > p {
         /* Make preview shorter on the homepage */
         margin: 0;
@@ -96,13 +107,13 @@
         padding-left: 3px;
         color: var(--pin-color);
       }
+
       > span {
         display: none;
       }
     }
 
   } // .post-preview
-
 } // #post-list
 
 /* Hide SideBar and TOC */
@@ -122,9 +133,9 @@
 
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
-
   #post-list {
     margin-top: 1.5rem;
+
     .post-preview .post-meta {
       .pin {
         background: var(--pin-bg);