jekyll-theme-chirpy 5.0.2 → 6.2.2

data/_sass/addon/module.scss

@@ -7,25 +7,27 @@
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+  font-family: $font-family-heading;
 }
 
 %section {
-  #core-wrapper & {
+  main & {
     margin-top: 2.5rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.25rem;
+
+    &:focus {
+      outline: none; /* avoid outline in Safari */
+    }
   }
 }
 
 %anchor {
   .anchor {
-    font-size: 1rem;
-    margin-left: 0.5rem;
+    font-size: 80%;
   }
 
   @media (hover: hover) {
     .anchor {
-      border-bottom: none !important;
       visibility: hidden;
       opacity: 0;
       transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
@@ -41,15 +43,6 @@
   }
 }
 
-%anchor-relative {
-  @extend %anchor;
-
-  .anchor {
-    position: relative;
-    bottom: 1px;
-  }
-}
-
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -76,10 +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;
 }
 
@@ -95,28 +91,69 @@
   font-style: normal;
 }
 
-/* ---------- scss mixin --------- */
+%rounded {
+  border-radius: $base-radius;
+}
 
-@mixin no-text-decoration {
-  text-decoration: none;
+%img-caption {
+  + em {
+    display: block;
+    text-align: center;
+    font-style: normal;
+    font-size: 80%;
+    padding: 0;
+    color: #6d6c6c;
+  }
 }
 
 %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;
   user-select: none;
 }
 
+%text-clip {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+%text-highlight {
+  color: inherit;
+  font-weight: 600;
+}
+
+/* ---------- scss mixin --------- */
+
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;
 }
 
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
 @mixin pl-pr($val) {
   padding-left: $val;
   padding-right: $val;
 }
 
-@mixin input-placeholder {
+@mixin placeholder {
+  color: var(--text-muted-color) !important;
+}
+
+@mixin placeholder-focus {
   opacity: 0.6;
 }
 
@@ -129,7 +166,17 @@
 @mixin align-center {
   position: relative;
   left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
+
+@mixin prompt($type, $fa-content, $fa-style: 'solid') {
+  &.prompt-#{$type} {
+    background-color: var(--prompt-#{$type}-bg);
+
+    &::before {
+      content: $fa-content;
+      color: var(--prompt-#{$type}-icon-color);
+      font: var(--fa-font-#{$fa-style});
+    }
+  }
+}

data/_sass/addon/syntax.scss

@@ -2,39 +2,37 @@
 * The syntax highlight.
 */
 
-@import "colors/light-syntax";
-@import "colors/dark-syntax";
-
-html:not([mode]),
-html[mode=light] {
-  @include light-syntax;
-}
-
-html[mode=dark] {
-  @include dark-syntax;
-}
+@import 'colors/syntax-light';
+@import 'colors/syntax-dark';
+
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    &[data-mode='light'] {
+      @include light-syntax;
+    }
 
-@media (prefers-color-scheme: dark) {
-  html:not([mode]),
-  html[mode=dark] {
-    @include dark-syntax;
+    &[data-mode='dark'] {
+      @include dark-syntax;
+    }
   }
 
-  html[mode=light] {
-    @include light-syntax;
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode='dark'] {
+      @include dark-syntax;
+    }
+
+    &[data-mode='light'] {
+      @include light-syntax;
+    }
   }
 }
 
-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */
 
 %code-snippet-bg {
-  background: var(--highlight-bg-color);
-}
-
-%code-snippet-radius {
-  border-radius: $code-radius;
+  background-color: var(--highlight-bg-color);
 }
 
 %code-snippet-padding {
@@ -43,16 +41,13 @@ $code-radius: 6px;
 }
 
 .highlighter-rouge {
-  @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
-
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
   @extend %code-snippet-bg;
 
   @at-root figure#{&} {
@@ -60,8 +55,7 @@ $code-radius: 6px;
   }
 
   overflow: auto;
-  padding-top: 0.5rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
 
   pre {
     margin-bottom: 0;
@@ -71,47 +65,58 @@ $code-radius: 6px;
   }
 
   table {
-    td pre {
-      overflow: visible;  /* Fixed iOS safari overflow-x */
-      word-break: normal; /* Fixed iOS safari linenos code break */
+    td {
+      &:first-child {
+        display: inline-block;
+        margin-left: 1rem;
+        margin-right: 0.75rem;
+      }
+
+      &:last-child {
+        padding-right: 2rem !important;
+      }
+
+      pre {
+        overflow: visible; /* Fixed iOS safari overflow-x */
+        word-break: normal; /* Fixed iOS safari linenos code break */
+      }
     }
   }
 
   .lineno {
-    padding-right: 0.5rem;
-    min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
     -webkit-user-select: none;
-    -khtml-user-select: none;
     -moz-user-select: none;
-    -ms-user-select: none;
     -o-user-select: none;
+    -ms-user-select: none;
     user-select: none;
   }
-
-  /* set the dollar sign to non-selectable */
-  .gp {
-    user-select: none;
-  }
-
-} //.highlight
+} /* .highlight */
 
 code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
-  -moz-hyphens: none;
   hyphens: none;
+  color: var(--code-color);
 
   &.highlighter-rouge {
     font-size: $code-font-size;
     padding: 3px 5px;
+    word-break: break-word;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
 
+  &.filepath {
+    background-color: inherit;
+    color: var(--filepath-text-color);
+    font-weight: 600;
+    padding: 0;
+  }
+
   a > &.highlighter-rouge {
-    padding-bottom: 0; // show link's underlinke
+    padding-bottom: 0; /* show link's underlinke */
     color: inherit;
   }
 
@@ -119,41 +124,56 @@ code {
     border-bottom: none;
   }
 
-  blockquote &.highlighter-rouge {
+  blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
   @extend %code-snippet-padding;
 
-  // Prevent some browser extends from
-  // changing the URL string of code block.
+  /*
+    Prevent some browser extends from
+    changing the URL string of code block.
+  */
   a {
     color: inherit !important;
     border-bottom: none !important;
     pointer-events: none;
   }
+}
+
+div[class^='language-'] {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  box-shadow: var(--language-border-color) 0 0 0 1px;
+
+  .content > & {
+    @include ml-mr(-1rem);
+
+    border-radius: 0;
+  }
 
+  .highlight {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
-  &.language-plaintext.highlighter-rouge,
-  &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge,
-  &.nolineno {
-    pre.lineno {
-      display: none;
-    }
-
-    td.rouge-code {
-      padding-left: 1.5rem;
+  &.nolineno,
+  &.language-plaintext,
+  &.language-console,
+  &.language-terminal {
+    td:first-child {
+      padding: 0 !important;
+      margin-right: 0;
+
+      .lineno {
+        display: none;
+      }
     }
   }
 }
@@ -161,37 +181,21 @@ div {
 .code-header {
   @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;
   height: $code-header-height;
+  margin-left: 0.75rem;
+  margin-right: 0.5rem;
 
-  &::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
+  /* the label block */
   span {
-    // label icon
+    line-height: $code-header-height;
+
+    /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.4rem;
+      width: $code-icon-width;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -201,24 +205,24 @@ div {
 
     @at-root [file] #{&} > i {
       position: relative;
-      top: 1px; // center the file icon
+      top: 1px; /* center the file icon */
     }
 
-    // label text
+    /* label text */
     &::after {
-      content: attr(label-text);
+      content: attr(data-label-text);
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--code-header-text-color);
     }
   }
 
-  // clipboard
+  /* clipboard */
   button {
     @extend %cursor-pointer;
+    @extend %rounded;
 
     border: 1px solid transparent;
-    border-radius: $code-radius;
     height: $code-header-height;
     width: $code-header-height;
     padding: 0;
@@ -238,6 +242,10 @@ div {
       }
     }
 
+    &:focus {
+      outline: none;
+    }
+
     &:not([timeout]):hover {
       background-color: rgba(128, 128, 128, 0.37);
 
@@ -245,30 +253,39 @@ div {
         color: white;
       }
     }
-
-    &:focus {
-      outline: none;
-    }
-
   }
-
 }
 
-@media all and (max-width: 576px) {
-  .post-content {
-    > div[class^='language-'] {
-      @include ml-mr(-1.25rem);
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .content > & {
+      @include ml-mr(0);
 
-      border-radius: 0;
+      border-radius: $base-radius;
+    }
 
-      .highlight {
-        padding-left: 0.25rem;
+    .code-header {
+      @include ml-mr(0);
+
+      $dot-margin: calc($code-header-height / 2);
+
+      &::before {
+        content: '';
+        display: inline-block;
+        margin-left: $dot-margin;
+        width: $code-dot-size;
+        height: $code-dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow: ($code-dot-size + $code-dot-gap) 0 0
+            var(--code-header-muted-color),
+          ($code-dot-size + $code-dot-gap) * 2 0 0
+            var(--code-header-muted-color);
       }
 
-      .code-header {
-        border-radius: 0;
-        padding-left: 0.4rem;
-        padding-right: 0.5rem;
+      span {
+        // center the text of label
+        margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
       }
     }
   }

data/_sass/addon/variables.scss

@@ -4,31 +4,29 @@
 
 /* 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: 260px !default; /* the basic width */
+$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-
+$search-max-width: 200px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default;   // screen width: <= 576px
-
-$main-content-max-width: 1150px !default;
-
-$panel-max-width: 300px !default;
-
+$footer-height-large: 6rem !default; /* screen width: < 850px */
+$main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
+$base-radius: 0.5rem !default;
+$back2top-size: 2.75rem !default;
 
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
+$code-header-height: 2.25rem !default;
+$code-dot-size: 0.75rem !default;
+$code-dot-gap: 0.5rem !default;
+$code-icon-width: 1.75rem !default;
+
+/* fonts */
+
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;