jekyll-theme-chirpy 4.1.0 → 4.3.0

data/_sass/addon/commons.scss

@@ -7,16 +7,9 @@
   @if $dark-mode {
     @include dark-scheme;
 
-    .mode-toggle {
-      transform: rotateY(180deg);
-    }
-
   } @else {
     @include light-scheme;
 
-    .mode-toggle {
-      transform: none;
-    }
   }
 
 }
@@ -53,6 +46,45 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
+/* --- Scrollbar --- */
+
+$scrollbar-size: 7px;
+
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+}
+
+::-webkit-scrollbar-track {
+  @at-root body#{&} {
+    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  border-radius: calc(#{$scrollbar-size} / 2);
+}
+
+.highlight {
+  border-color: transparent;
+  transition: border-color 0.5s ease;
+
+  &:hover {
+    border-color: var(--scrollbar-thumb-bg);
+    transition: border-color 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /* add border to act as background-color */
+    border-right-style: inset;
+    border-right-width: calc(100vw + 100vh);
+    border-color: inherit;
+    background-color: var(--highlight-bg-color);
+  }
+
+}
+
 /* --- Typography --- */
 
 h1 {
@@ -460,10 +492,6 @@ footer {
     padding-left: 2rem;
 
     li {
-      + li {
-        margin-top: 0.3rem;
-      }
-
       ol,
       ul { // sub list
         padding-left: 2rem;
@@ -629,31 +657,31 @@ $sidebar-display: "sidebar-display";
   scrollbar-width: none;  /* Firefox */
 
   a {
-    @include sidebar-links;
+    @extend %sidebar-links;
 
     &:hover {
       @include no-text-decoration;
 
-      color: #fff;
+      color: var(--sidebar-active-color) !important;
     }
   }
 
   #avatar {
-    &:hover > a {
-      border-color: #fff;
-    }
-
     > a {
       display: block;
       width: 6rem;
       height: 6rem;
       border-radius: 50%;
-      border: 2px solid #b6b6b6;
+      border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
       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 {
@@ -674,15 +702,18 @@ $sidebar-display: "sidebar-display";
 
   .site-title {
     a {
+      @extend %clickable-transition;
+
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
+      color: rgba(134, 133, 133, 99%);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: #828282;
+    color: var(--sidebar-muted-color);
     line-height: 1.2rem;
     word-spacing: 1px;
     margin: 0.5rem 1.5rem 0.5rem 1.5rem;
@@ -703,16 +734,16 @@ $sidebar-display: "sidebar-display";
     text-align: center;
     display: table;
     height: $tab-height;
-    &:hover {
-      .nav-link {
-        color: #f8f9facf;
-      }
-    }
+
     &.active {
       .nav-link {
-        color: #fcfcfc;
+        color: var(--sidebar-active-color);
       }
     }
+
+    &:not(.active) > a {
+      @extend %clickable-transition;
+    }
   }
 
   ul {
@@ -787,36 +818,35 @@ $sidebar-display: "sidebar-display";
 
     a {
       @extend %icon;
+      @extend %clickable-transition;
+    }
+
+    i {
+      line-height: 1.75rem; // default line-height in body
+      vertical-align: middle;
     }
 
     #mode-toggle-wrapper {
       @extend %icon;
 
       i {
-        @include sidebar-links;
-
-        margin: 0;
-        font-size: 1.05rem;
-        text-align: center;
-        position: relative;
-        bottom: 1px;
+        @extend %sidebar-links;
+        @extend %cursor-pointer;
+        @extend %clickable-transition;
       }
 
     }
 
     .icon-border {
-      background-color: #525354;
+      background-color: var(--sidebar-muted-color);
       content: "";
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      position: relative;
-      top: 12px;
     }
 
-    a:hover,
-    #mode-toggle-wrapper i:hover {
-      color: #fff;
+    #mode-toggle-wrapper:hover > i {
+      color: var(--sidebar-active-color);
     }
 
   } // .sidebar-bottom
@@ -857,7 +887,6 @@ $sidebar-display: "sidebar-display";
   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);
   background-color: var(--topbar-wrapper-bg);
 }
 
@@ -895,15 +924,19 @@ $sidebar-display: "sidebar-display";
   display: flex;
   width: 85%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-bg);
+  border: 1px solid var(--search-wrapper-border-color);
   background: var(--search-wrapper-bg);
   padding: 0 0.5rem;
+
   i {
     z-index: 2;
     font-size: 0.9rem;
     color: var(--search-icon-color);
   }
+
   .fa-times-circle { /* button 'clean up' */
+    @extend %cursor-pointer;
+
     visibility: hidden;
   }
 }
@@ -912,6 +945,8 @@ $sidebar-display: "sidebar-display";
   color: var(--link-color);
   margin-left: 1rem;
   display: none;
+
+  @extend %cursor-pointer;
 }
 
 #search-input {
@@ -1066,18 +1101,27 @@ $sidebar-display: "sidebar-display";
 /* --- button back-to-top --- */
 
 #back-to-top {
+  $size: 2.7em;
+
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
-  height: 2.6em;
-  width: 2.7em;
+  padding: 0;
+  width: $size;
+  height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
-  transition: 0.2s ease-out;
-  -webkit-transition: 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+
+  i {
+    line-height: $size;
+    position: relative;
+    bottom: 2px;
+  }
 }
 
 #back-to-top:hover {
@@ -1575,19 +1619,10 @@ $sidebar-display: "sidebar-display";
 
         .nav-link {
           > span {
-            letter-spacing: 3px;
+            letter-spacing: 2px;
           }
 
           > i {
-            @include icon-round(1.65rem);
-
-            line-height: 1.5rem;
-            font-size: 0.6rem;
-            padding-top: 1px;
-            padding-left: 1px;
-            position: relative;
-            bottom: 1px;
-
             &.unloaded {
               display: inline-block !important;
             }
@@ -1601,35 +1636,40 @@ $sidebar-display: "sidebar-display";
       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;
       }
 
-      a {
-        font-size: 1rem;
-        width: 3rem;
-      }
-
-      i {
-        @include icon-round(2rem);
+      > span,
+      > a {
+        @include ml-mr(0.15rem);
 
-        padding-top: 0.44rem;
-        margin-top: .7rem; // multi line space
-        bottom: 0;
+        height: $icon-block-size;
+        margin-bottom: 0.5rem; // wrap line
       }
 
-      #mode-toggle-wrapper {
-        width: 3rem;
+      i {
+        background-color: var(--sidebar-btn-bg);
+        font-size: 1rem;
+        width: $icon-block-size;
+        height: $icon-block-size;
+        border-radius: 50%;
+        position: relative;
 
-        i {
-          top: 11px;
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
         }
       }
 
       .icon-border {
-        top: 26px;
+        top: 0.9rem;
       }
 
     } // .sidebar-bottom

data/_sass/addon/module.scss

@@ -35,6 +35,10 @@
   border-bottom: 1px solid var(--link-underline-color);
 }
 
+%clickable-transition {
+  transition: color 0.35s ease-in-out;
+}
+
 %no-bottom-border {
   border-bottom: none;
 }
@@ -51,25 +55,21 @@
   margin-top: -2.5rem;
 }
 
+%cursor-pointer {
+  cursor: pointer;
+}
+
 /* ---------- scss mixin --------- */
 
 @mixin no-text-decoration {
   text-decoration: none;
 }
 
-@mixin sidebar-links($color: rgba(255, 255, 255, 0.5)) {
-  color: $color;
-  transition: color 0.35s ease-in-out;
+%sidebar-links {
+  color: rgba(117, 117, 117, 0.9);
   user-select: none;
 }
 
-@mixin icon-round($diameter) {
-  border: 1px solid;
-  border-radius: 50%;
-  width: $diameter;
-  height: $diameter;
-}
-
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;

data/_sass/addon/syntax.scss

@@ -27,16 +27,18 @@ html[mode=dark] {
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 6px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 1.5rem;
+  padding: 1.2rem;
 }
 
 div > pre {
@@ -86,12 +88,10 @@ div > pre {
   }
 
   .lineno {
-    margin-left: 0.2rem;
     padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -135,7 +135,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.5rem 1.5rem 1.5rem 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -152,7 +152,8 @@ div {
   &[class^='highlighter-rouge'],
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
     pre.lineno {
       display: none;
     }
@@ -162,25 +163,100 @@ div {
   }
 }
 
-div[class^='language-']::before {
-  content: attr(lang);
-  position: absolute;
-  right: 2rem;
-  margin-top: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--highlight-lineno-color);
-  text-transform: uppercase;
-}
+.code-header {
+  background: var(--code-header-bg);
+  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%;
+    }
+  }
+
+  // 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);
+    }
+
+    i {
+      margin: 0 0.5rem;
+    }
+
+    @at-root [file] #{&} > i {
+      position: relative;
+      top: 1px; // center the file icon
+      margin-left: 0.25rem;
+    }
 
-@media (min-width: 768px) {
-  div[class^='language-']::before {
-    right: 3.1rem;
   }
+
+  // clipboard
+  button {
+    border: 1px solid var(--code-header-bg);
+    border-radius: $code-radius;
+    padding: 0;
+    width: 1.95rem;
+    background-color: inherit;
+
+    @extend %cursor-pointer;
+
+    &[timeout] {
+      &:hover {
+        border-color: var(--clipboard-checked-color);
+      }
+
+      i {
+        color: var(--clipboard-checked-color);
+      }
+    }
+
+    &:not([timeout]):hover {
+      background-color: rgba(128, 128, 128, 0.37);
+
+      i {
+        color: white;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+  }
+
 }
 
-@media (min-width: 1650px) {
-  div[class^='language-']::before {
-    right: 3.5rem;
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
+
+      border-radius: 0;
+
+      .highlight {
+        padding-left: 0.25rem;
+      }
+
+      .code-header {
+        border-radius: 0;
+        padding-left: 0.4rem;
+        padding-right: 0.5rem;
+      }
+    }
   }
 }

data/_sass/addon/variables.scss

@@ -11,10 +11,10 @@ $sidebar-width-large: 350px !default;  // screen width: >= 1650px
 /* tabs of sidebar */
 
 $tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
-$tab-height: 3.2rem !default;
+$tab-height: 3rem !default;
 $tab-cursor-height: 1.6rem !default;
 
-$cursor-width: 3px !default;    // the cursor width of the selected tab
+$cursor-width: 2px !default;    // the cursor width of the selected tab
 
 /* other framework sizes */
 

data/_sass/colors/dark-syntax.scss

@@ -3,20 +3,6 @@
  */
 
 @mixin dark-syntax {
-  /* -----  My styles ------ */
-  --highlight-bg-color: #252525;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #303435;
-  --inline-code-bg: #272822;
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  pre { color: #bfbfbf; } /* override Bootstrap */
-  kbd { background-color: black; }
-
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
   .highlight pre { background-color: var(--highlight-bg-color); }
   .highlight .hll { background-color: var(--highlight-bg-color); }
@@ -81,4 +67,22 @@
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
   .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
+
+  /* -----  custom styles ------ */
+
+  --highlight-bg-color: #252525;
+  --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;
+  --clipboard-checked-color: #2bcc2b;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
 }

data/_sass/colors/dark-typography.scss

@@ -3,26 +3,23 @@
  */
 
 @mixin dark-scheme {
-  /* framework */
-  --main-wrapper-bg: rgb(27, 27, 30);
+  /* Framework color */
   --body-bg: var(--main-wrapper-bg);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-icon-color: rgb(100, 102, 105);
-  --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
-  --footer-bg-color: var(--main-wrapper-bg);
+  --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 */
+  /* Common color */
   --text-color: rgb(175, 176, 177);
-  --heading-color: #cccccc;
   --text-muted-color: rgb(107, 116, 124);
+  --heading-color: #cccccc;
+  --blockquote-border-color: rgb(66, 66, 66);
+  --blockquote-text-color: rgb(117, 117, 117);
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(82, 108, 150);
-  --main-border-color: rgb(44, 45, 45);
   --button-bg: rgb(39, 40, 43);
-  --blockquote-border-color: rgb(66, 66, 66);
-  --blockquote-text-color: rgb(117, 117, 117);
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
@@ -33,21 +30,26 @@
   --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
-  --nav-cursor-color: rgb(183, 182, 182);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+  --sidebar-muted-color: #6d6c6b;
+  --sidebar-active-color: rgb(255 255 255 / 80%);
+  --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-btn-bg: rgb(117 116 116 / 20%);
 
-  /* Top Bar */
+  /* Topbar */
   --topbar-text-color: var(--text-color);
+  --topbar-wrapper-bg: rgb(39, 40, 43);
+  --search-wrapper-bg: rgb(34, 34, 39);
+  --search-wrapper-border-color: rgb(34, 34, 39);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
   --btn-patinator-text-color: var(--text-color);
   --btn-paginator-hover-color: rgb(64, 65, 66);
-  --btn-active-bg: rgba(28, 52, 94, 1);
-  --btn-active-border-color: rgb(66, 94, 138);
-  --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
-  --btn-paginator-shadow: var(--main-wrapper-bg);
+  --btn-text-color: var(--text-color);
   --pin-bg: rgb(34 35 37);
   --pin-color: inherit;
 
@@ -75,6 +77,7 @@
   /* categories */
   --categories-border: rgb(64, 66, 69);
   --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
@@ -82,6 +85,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
+  --footer-bg-color: var(--main-wrapper-bg);
   --footer-link: rgb(171, 171, 171);
 
   .post-content img {

data/_sass/colors/light-syntax.scss

@@ -70,6 +70,10 @@
   --highlight-bg-color: #f7f7f7;
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
   --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%);
+  --clipboard-checked-color: #43c743;
+
 } // light-syntax