jekyll-theme-chirpy 5.6.1 → 6.0.1

data/_sass/addon/module.scss

@@ -7,7 +7,7 @@
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: Lato, 'Microsoft Yahei', sans-serif;
+  font-family: $font-family-heading;
 }
 
 %section {
@@ -69,12 +69,13 @@
 }
 
 %clickable-transition {
-  transition: color 0.35s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 %no-cursor {
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -91,7 +92,7 @@
 }
 
 %rounded {
-  border-radius: 6px;
+  border-radius: $base-radius;
 }
 
 %img-caption {
@@ -109,15 +110,20 @@
   color: rgba(117, 117, 117, 0.9);
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
-/* ---------- scss mixin --------- */
-
-@mixin no-text-decoration {
-  text-decoration: none;
+%text-clip {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
+/* ---------- scss mixin --------- */
+
 @mixin mt-mb($value) {
   margin-top: $value;
   margin-bottom: $value;
@@ -128,6 +134,11 @@
   margin-right: $value;
 }
 
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
 @mixin pl-pr($val) {
   padding-left: $val;
   padding-right: $val;
@@ -146,7 +157,6 @@
 @mixin align-center {
   position: relative;
   left: 50%;
-  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 

data/_sass/addon/syntax.scss

@@ -32,7 +32,7 @@ html {
 /* -- code snippets -- */
 
 %code-snippet-bg {
-  background: var(--highlight-bg-color);
+  background-color: var(--highlight-bg-color);
 }
 
 %code-snippet-padding {
@@ -41,9 +41,6 @@ html {
 }
 
 .highlighter-rouge {
-  @extend %code-snippet-bg;
-  @extend %rounded;
-
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -120,10 +117,6 @@ code {
   blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
@@ -140,13 +133,25 @@ td.rouge-code {
   }
 }
 
+div[class^='language-'] {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  box-shadow: var(--language-border-color) 0 0 0 1px;
+
+  .post-content > & {
+    @include ml-mr(-1.25rem);
+
+    border-radius: 0;
+  }
+}
+
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
   &.nolineno,
-  &.language-plaintext.highlighter-rouge,
-  &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-plaintext,
+  &.language-console,
+  &.language-terminal {
     pre.lineno {
       display: none;
     }
@@ -166,28 +171,15 @@ div {
   justify-content: space-between;
   align-items: center;
   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);
-  }
+  margin-left: 1rem;
+  margin-right: 0.5rem;
 
   /* the label block */
   span {
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.4rem;
+      margin-right: 0.5rem;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -248,21 +240,30 @@ div {
   }
 }
 
-@media all and (max-width: 576px) {
-  .post-content {
-    > div[class^='language-'] {
-      @include ml-mr(-1.25rem);
-
-      border-radius: 0;
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .post-content > & {
+      @include ml-mr(0);
 
-      .highlight {
-        padding-left: 0.25rem;
-      }
+      border-radius: $base-radius;
+    }
 
-      .code-header {
-        border-radius: 0;
-        padding-left: 0.4rem;
-        padding-right: 0.5rem;
+    .code-header {
+      @include ml-mr(0);
+
+      &::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);
       }
     }
   }

data/_sass/addon/variables.scss

@@ -5,26 +5,23 @@
 /* sidebar */
 
 $sidebar-width: 260px !default; /* the basic width */
-$sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
-$sidebar-width-large: 350px !default; /* screen width: >= 1650px */
-
-/* tabs of sidebar */
-
-$tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
-$tab-height: 3rem !default;
-$tab-cursor-height: 1.6rem !default;
-$cursor-width: 2px !default; /* the cursor width of the selected tab */
+$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
 $search-max-width: 210px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
-
+$footer-height-mobile: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
+$base-radius: 0.5rem;
 
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
+
+/* fonts */
+
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif;

data/_sass/colors/dark-syntax.scss

@@ -3,6 +3,7 @@
  */
 
 @mixin dark-syntax {
+  --language-border-color: rgba(84, 83, 83, 0.27);
   --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;

data/_sass/colors/dark-typography.scss

@@ -21,7 +21,7 @@
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --btn-box-shadow: var(--main-bg);
-  --card-header-bg: rgb(51, 50, 50);
+  --card-header-bg: rgb(48, 48, 48);
   --label-color: rgb(108, 117, 125);
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
@@ -36,15 +36,16 @@
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
   --sidebar-muted-color: #6d6c6b;
-  --sidebar-active-color: rgb(255, 255, 255, 0.8);
-  --nav-cursor-color: rgb(183, 182, 182);
-  --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
+  --sidebar-active-color: rgb(255, 255, 255, 0.95);
+  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
+  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-btn-color: #787878;
+  --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
+  --topbar-bg: rgb(27, 27, 30, 0.64);
   --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-wrapper-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 
@@ -54,8 +55,6 @@
   --btn-paginator-hover-color: rgb(64, 65, 66);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-text-color: var(--text-color);
-  --pin-bg: rgb(34, 35, 37);
-  --pin-color: inherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
@@ -68,19 +67,19 @@
   --btn-share-color: #6c757d;
   --btn-share-hover-color: #bfc1ca;
   --relate-post-date: var(--text-muted-color);
-  --card-bg: #212121;
-  --card-hovor-bg: #3a3a3a;
-  --card-border-color: rgb(53, 53, 60);
-  --card-box-shadow: var(--main-bg);
+  --card-bg: #1e1e1e;
+  --card-hovor-bg: #464d51;
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
+    rgb(137, 135, 135, 0.24) 0 0 0 1px;
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
   --prompt-text-color: rgb(216, 212, 212, 0.75);
-  --prompt-tip-bg: rgba(77, 187, 95, 0.2);
-  --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
+  --prompt-tip-bg: rgb(22, 60, 36, 0.64);
+  --prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
   --prompt-info-bg: rgb(7, 59, 104, 0.8);
   --prompt-info-icon-color: #0075d1;
-  --prompt-warning-bg: rgb(90, 69, 3, 0.95);
+  --prompt-warning-bg: rgb(90, 69, 3, 0.88);
   --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
   --prompt-danger-bg: rgb(86, 28, 8, 0.8);
   --prompt-danger-icon-color: #cd0202;
@@ -92,7 +91,7 @@
   --dash-color: rgb(63, 65, 68);
 
   /* categories */
-  --categories-border: rgb(64, 66, 69);
+  --categories-border: rgb(64, 66, 69, 0.5);
   --categories-hover-bg: rgb(73, 75, 76);
   --categories-icon-hover-color: white;
 
@@ -101,13 +100,6 @@
   --timeline-color: rgb(63, 65, 68);
   --timeline-year-dot-color: var(--timeline-color);
 
-  .post img[data-src] {
-    &.lazyloaded {
-      -webkit-filter: brightness(95%);
-      filter: brightness(95%);
-    }
-  }
-
   .light {
     display: none;
   }

data/_sass/colors/light-syntax.scss

@@ -67,10 +67,11 @@
   .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */
 
   /* --- custom light colors --- */
+  --language-border-color: rgba(172, 169, 169, 0.2);
   --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #2f2f2f;
+  --highlighter-rouge-color: #3f596f;
   --highlight-lineno-color: #c2c6cc;
-  --inline-code-bg: #f3f3f3;
+  --inline-code-bg: #f6f6f7;
   --code-header-text-color: #a3a3b1;
   --code-header-muted-color: #ebebeb;
   --code-header-icon-color: #d1d1d1;
@@ -78,6 +79,5 @@
 
   [class^='prompt-'] {
     --inline-code-bg: #fbfafa;
-    --highlighter-rouge-color: rgb(82, 82, 82);
   }
 } /* light-syntax */

data/_sass/colors/light-typography.scss

@@ -10,11 +10,11 @@
 
   /* Common color */
   --text-color: #34343c;
-  --text-muted-color: gray;
+  --text-muted-color: #8e8e8e;
   --heading-color: black;
   --blockquote-border-color: #eeeeee;
   --blockquote-text-color: #9a9a9a;
-  --link-color: #2a408e;
+  --link-color: #0153ab;
   --link-underline-color: #dee2e6;
   --button-bg: #ffffff;
   --btn-border-color: #e9ecef;
@@ -26,7 +26,7 @@
   --img-bg: radial-gradient(
     circle,
     rgb(255, 255, 255) 0%,
-    rgb(249, 249, 249) 100%
+    rgb(239, 239, 239) 100%
   );
   --shimmer-bg: linear-gradient(
     90deg,
@@ -36,20 +36,21 @@
   );
 
   /* Sidebar */
-  --sidebar-bg: #eeeeee;
+  --sidebar-bg: #f6f8fa;
   --sidebar-muted-color: #a2a19f;
-  --sidebar-active-color: #424242;
-  --nav-cursor-color: #757575;
+  --sidebar-active-color: #1d1d1d;
+  --sidebar-hover-bg: rgb(227, 227, 227, 0.64);
   --sidebar-btn-bg: white;
+  --sidebar-btn-color: #8e8e8e;
+  --avatar-border-color: white;
 
   /* Topbar */
+  --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --topbar-wrapper-bg: white;
-  --search-wrapper-bg: rgb(245, 245, 245, 0.5);
-  --search-wrapper-border-color: rgb(245, 245, 245);
+  --search-wrapper-border-color: rgb(240, 240, 240);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
-  --input-focus-border-color: var(--btn-border-color);
+  --input-focus-border-color: #b8b8b8;
 
   /* Home page */
   --post-list-text-color: dimgray;
@@ -57,15 +58,14 @@
   --btn-paginator-hover-color: var(--sidebar-bg);
   --btn-paginator-border-color: var(--sidebar-bg);
   --btn-text-color: #676666;
-  --pin-bg: #f5f5f5;
-  --pin-color: #999fa4;
 
   /* Posts */
   --toc-highlight: #563d7c;
   --btn-share-hover-color: var(--link-color);
-  --card-hovor-bg: #eeeeee;
-  --card-border-color: #ececec;
-  --card-box-shadow: rgba(234, 234, 234, 0.76);
+  --card-bg: white;
+  --card-hovor-bg: #e2e2e2;
+  --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
+    rgba(211, 209, 209, 0.15) 0 0 0 1px;
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
@@ -98,6 +98,7 @@
   }
 
   /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
   --categories-hover-bg: var(--btn-border-color);
   --categories-icon-hover-color: darkslategray;
 

data/_sass/jekyll-theme-chirpy.scss

@@ -1,24 +1,19 @@
 /*!
- * The styles for Jekyll theme Chirpy
- *
- * Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v6.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
 
-@import
-  "colors/light-typography",
-  "colors/dark-typography",
-
-  "addon/module",
-  "addon/variables",
-  "variables-hook",
-  "addon/syntax",
-  "addon/commons",
-
-  "layout/home",
-  "layout/post",
-  "layout/tags",
-  "layout/archives",
-  "layout/categories",
-  "layout/category-tag";
+@import 'colors/light-typography';
+@import 'colors/dark-typography';
+@import 'addon/variables';
+@import 'variables-hook';
+@import 'addon/module';
+@import 'addon/syntax';
+@import 'addon/commons';
+@import 'layout/home';
+@import 'layout/post';
+@import 'layout/tags';
+@import 'layout/archives';
+@import 'layout/categories';
+@import 'layout/category-tag';

data/_sass/layout/categories.scss

@@ -8,9 +8,24 @@
 
 .categories {
   margin-bottom: 2rem;
+  border-color: var(--categories-border);
+
+  &.card,
+  .list-group {
+    @extend %rounded;
+  }
 
   .card-header {
-    padding-right: 12px;
+    $radius: calc($base-radius - 1px);
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   i {
@@ -28,6 +43,10 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    &:last-child {
+      border-bottom: 0;
+    }
   }
 } /* .categories */
 
@@ -42,9 +61,7 @@
     position: relative;
     height: 0.7rem;
     width: 1rem;
-    transition: -webkit-transform 300ms ease;
     transition: transform 300ms ease;
-    transition: transform 300ms ease, -webkit-transform 300ms ease;
   }
 
   &:hover {
@@ -62,6 +79,5 @@
 }
 
 .rotate {
-  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }