custom-chirpy 5.5.2

data/_sass/addon/module.scss

@@ -0,0 +1,163 @@
+/*
+* Mainly scss modules, only imported to `assets/css/main.scss`
+*/
+
+/* ---------- scss placeholder --------- */
+
+%heading {
+  color: var(--heading-color);
+  font-weight: 400;
+  font-family: Lato, "Microsoft Yahei", sans-serif;
+}
+
+%section {
+  #core-wrapper & {
+    margin-top: 2.5rem;
+    margin-bottom: 1.25rem;
+
+    &:focus {
+      outline: none; /* avoid outline in Safari */
+    }
+  }
+}
+
+%anchor {
+  .anchor {
+    font-size: 80%;
+  }
+
+  @media (hover: hover) {
+    .anchor {
+      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;
+      }
+    }
+  }
+}
+
+%tag-hover {
+  background: var(--tag-hover);
+  transition: background 0.35s ease-in-out;
+}
+
+%table-cell {
+  padding: 0.4rem 1rem;
+  font-size: 95%;
+  white-space: nowrap;
+}
+
+%link-hover {
+  color: #d2603a !important;
+  border-bottom: 1px solid #d2603a;
+  text-decoration: none;
+}
+
+%link-color {
+  color: var(--link-color);
+}
+
+%link-underline {
+  border-bottom: 1px solid var(--link-underline-color);
+}
+
+%clickable-transition {
+  transition: color 0.35s ease-in-out;
+}
+
+%no-cursor {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+%no-bottom-border {
+  border-bottom: none;
+}
+
+%cursor-pointer {
+  cursor: pointer;
+}
+
+%normal-font-style {
+  font-style: normal;
+}
+
+%rounded {
+  border-radius: 6px;
+}
+
+%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);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+/* ---------- scss mixin --------- */
+
+@mixin no-text-decoration {
+  text-decoration: none;
+}
+
+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pl-pr($val) {
+  padding-left: $val;
+  padding-right: $val;
+}
+
+@mixin input-placeholder {
+  opacity: 0.6;
+}
+
+@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
+  color: $color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+}
+
+@mixin align-center {
+  position: relative;
+  left: 50%;
+  -webkit-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

@@ -0,0 +1,275 @@
+/*
+* The syntax highlight.
+*/
+
+@import "colors/light-syntax";
+@import "colors/dark-syntax";
+
+html {
+  @media (prefers-color-scheme: light) {
+    &:not([data-mode]),
+    &[data-mode="light"] {
+      @include light-syntax;
+    }
+
+    &[data-mode="dark"] {
+      @include dark-syntax;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:not([data-mode]),
+    &[data-mode="dark"] {
+      @include dark-syntax;
+    }
+
+    &[data-mode="light"] {
+      @include light-syntax;
+    }
+  }
+}
+
+/* -- code snippets -- */
+
+%code-snippet-bg {
+  background: var(--highlight-bg-color);
+}
+
+%code-snippet-padding {
+  padding-left: 1rem;
+  padding-right: 1.5rem;
+}
+
+.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 */
+}
+
+.highlight {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  @at-root figure#{&} {
+    @extend %code-snippet-bg;
+  }
+
+  overflow: auto;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
+
+  pre {
+    margin-bottom: 0;
+    font-size: $code-font-size;
+    line-height: 1.4rem;
+    word-wrap: normal; /* Fixed Safari overflow-x */
+
+    /* set the dollar sign to non-selectable */
+    >.gp:first-child {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
+  }
+
+  table {
+    td 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;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+} /* .highlight */
+
+code {
+  -webkit-hyphens: none;
+  hyphens: none;
+
+  &.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 */
+    color: inherit;
+  }
+
+  a:hover > &.highlighter-rouge {
+    border-bottom: none;
+  }
+
+  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.
+  */
+  a {
+    color: inherit !important;
+    border-bottom: none !important;
+    pointer-events: none;
+  }
+}
+
+/* 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 {
+    pre.lineno {
+      display: none;
+    }
+
+    td.rouge-code {
+      padding-left: 1.5rem;
+    }
+  }
+}
+
+.code-header {
+  @extend %no-cursor;
+
+  $code-header-height: 2.25rem;
+
+  display: flex;
+  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);
+  }
+
+  /* the label block */
+  span {
+    /* label icon */
+    i {
+      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 */
+    }
+
+    /* label text */
+    &::after {
+      content: attr(data-label-text);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--code-header-text-color);
+    }
+  }
+
+  /* clipboard */
+  button {
+    @extend %cursor-pointer;
+    @extend %rounded;
+
+    border: 1px solid transparent;
+    height: $code-header-height;
+    width: $code-header-height;
+    padding: 0;
+    background-color: inherit;
+
+    i {
+      color: var(--code-header-icon-color);
+    }
+
+    &[timeout] {
+      &:hover {
+        border-color: var(--clipboard-checked-color);
+      }
+
+      i {
+        color: var(--clipboard-checked-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:not([timeout]):hover {
+      background-color: rgba(128, 128, 128, 0.37);
+
+      i {
+        color: white;
+      }
+    }
+  }
+}
+
+@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

@@ -0,0 +1,30 @@
+/*
+ * The SCSS variables
+ */
+
+/* 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 */
+
+/* other framework sizes */
+
+$topbar-height: 3rem !default;
+$search-max-width: 210px !default;
+$footer-height: 5rem !default;
+$footer-height-mobile: 6rem !default;   /* screen width: <= 576px */
+
+$main-content-max-width: 1250px !default;
+$bottom-min-height: 35rem !default;
+
+/* syntax highlight */
+
+$code-font-size: 0.85rem !default;

data/_sass/colors/dark-syntax.scss

@@ -0,0 +1,87 @@
+/*
+ * The syntax dark mode styles.
+ */
+
+@mixin dark-syntax {
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --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;
+  --filepath-text-color: #bdbdbd;
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  /* 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); }
+  .highlight .c { color: #75715e; } /* Comment */
+  .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
+  .highlight .k { color: #66d9ef; } /* Keyword */
+  .highlight .l { color: #ae81ff; } /* Literal */
+  .highlight .n { color: #f8f8f2; } /* Name */
+  .highlight .o { color: #f92672; } /* Operator */
+  .highlight .p { color: #f8f8f2; } /* Punctuation */
+  .highlight .cm { color: #75715e; } /* Comment.Multiline */
+  .highlight .cp { color: #75715e; } /* Comment.Preproc */
+  .highlight .c1 { color: #75715e; } /* Comment.Single */
+  .highlight .cs { color: #75715e; } /* Comment.Special */
+  .highlight .ge { color: inherit; font-style: italic; } /* Generic.Emph */
+  .highlight .gs { font-weight: bold; } /* Generic.Strong */
+  .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
+  .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */
+  .highlight .kn { color: #f92672; } /* Keyword.Namespace */
+  .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
+  .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
+  .highlight .kt { color: #66d9ef; } /* Keyword.Type */
+  .highlight .ld { color: #e6db74; } /* Literal.Date */
+  .highlight .m { color: #ae81ff; } /* Literal.Number */
+  .highlight .s { color: #e6db74; } /* Literal.String */
+  .highlight .na { color: #a6e22e; } /* Name.Attribute */
+  .highlight .nb { color: #f8f8f2; } /* Name.Builtin */
+  .highlight .nc { color: #a6e22e; } /* Name.Class */
+  .highlight .no { color: #66d9ef; } /* Name.Constant */
+  .highlight .nd { color: #a6e22e; } /* Name.Decorator */
+  .highlight .ni { color: #f8f8f2; } /* Name.Entity */
+  .highlight .ne { color: #a6e22e; } /* Name.Exception */
+  .highlight .nf { color: #a6e22e; } /* Name.Function */
+  .highlight .nl { color: #f8f8f2; } /* Name.Label */
+  .highlight .nn { color: #f8f8f2; } /* Name.Namespace */
+  .highlight .nx { color: #a6e22e; } /* Name.Other */
+  .highlight .py { color: #f8f8f2; } /* Name.Property */
+  .highlight .nt { color: #f92672; } /* Name.Tag */
+  .highlight .nv { color: #f8f8f2; } /* Name.Variable */
+  .highlight .ow { color: #f92672; } /* Operator.Word */
+  .highlight .w { color: #f8f8f2; } /* Text.Whitespace */
+  .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
+  .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
+  .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
+  .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
+  .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
+  .highlight .sc { color: #e6db74; } /* Literal.String.Char */
+  .highlight .sd { color: #e6db74; } /* Literal.String.Doc */
+  .highlight .s2 { color: #e6db74; } /* Literal.String.Double */
+  .highlight .se { color: #ae81ff; } /* Literal.String.Escape */
+  .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
+  .highlight .si { color: #e6db74; } /* Literal.String.Interpol */
+  .highlight .sx { color: #e6db74; } /* Literal.String.Other */
+  .highlight .sr { color: #e6db74; } /* Literal.String.Regex */
+  .highlight .s1 { color: #e6db74; } /* Literal.String.Single */
+  .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */
+  .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
+  .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
+  .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
+  .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
+  .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 */
+}