🏗️ First time sync the css & js files from hexo theme NexT

.gitignore

@@ -0,0 +1,6 @@
+# Ignore files in Hugo NexT theme
+
+.hugo_build.lock
+
+exampleSite/public
+exampleSite/resources

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 hugo-next
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,9 @@
+# Hugo theme of NexT
+
+![hugo-next-primary](https://lisenhui.gitee.io/imgs/hugo-next/logo/hugo-next-primary.png)
+
+Start a new journey for Hugo's theme of NexT.
+
+# Our Vision
+
+Make `NexT` theme is easily & powerful.

archetypes/default.md

@@ -0,0 +1,21 @@
+---
+title: '{{ replace .Name "-" " " | title }}'
+description: 'Short description of the article.'
+keywords: 'Key words'
+isCJKLanguage: true
+
+author: 'Author of the article'
+lastmod: '{{ .Date }}'
+publishDate: '{{ .Date }}'
+weight: 1
+
+categories:
+ -
+tags:
+ -
+ -
+
+toc: false
+draft: true
+url: '{{ lower .Name }}.html'
+---

assets/css/_colors.scss

@@ -0,0 +1,76 @@
+:root {
+  // https://sass-lang.com/documentation/breaking-changes/css-vars
+  --body-bg-color: #{$body-bg-color};
+  --content-bg-color: #{$content-bg-color};
+  --card-bg-color: #{$card-bg-color};
+  --text-color: #{$text-color};
+  --blockquote-color: #{$blockquote-color};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
+  --brand-color: #{$brand-color};
+  --brand-hover-color: #{$brand-hover-color};
+  --table-row-odd-bg-color: #{$table-row-odd-bg-color};
+  --table-row-hover-bg-color: #{$table-row-hover-bg-color};
+  --menu-item-bg-color: #{$menu-item-bg-color};
+  --theme-color: #{$theme-color};
+
+  --btn-default-bg: #{$btn-default-bg};
+  --btn-default-color: #{$btn-default-color};
+  --btn-default-border-color: #{$btn-default-border-color};
+  --btn-default-hover-bg: #{$btn-default-hover-bg};
+  --btn-default-hover-color: #{$btn-default-hover-color};
+  --btn-default-hover-border-color: #{$btn-default-hover-border-color};
+
+  --highlight-background: #{$highlight-background};
+  --highlight-foreground: #{$highlight-foreground};
+  --highlight-gutter-background: #{$highlight-gutter-background};
+  --highlight-gutter-foreground: #{$highlight-gutter-foreground};
+
+  color-scheme: light;
+}
+
+@if hexo-config('darkmode') {
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --body-bg-color: #{$body-bg-color-dark};
+      --content-bg-color: #{$content-bg-color-dark};
+      --card-bg-color: #{$card-bg-color-dark};
+      --text-color: #{$text-color-dark};
+      --blockquote-color: #{$blockquote-color-dark};
+      --link-color: #{$link-color-dark};
+      --link-hover-color: #{$link-hover-color-dark};
+      --brand-color: #{$brand-color-dark};
+      --brand-hover-color: #{$brand-hover-color-dark};
+      --table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
+      --table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
+      --menu-item-bg-color: #{$menu-item-bg-color-dark};
+      --theme-color: #{$theme-color-dark};
+
+      --btn-default-bg: #{$btn-default-bg-dark};
+      --btn-default-color: #{$btn-default-color-dark};
+      --btn-default-border-color: #{$btn-default-border-color-dark};
+      --btn-default-hover-bg: #{$btn-default-hover-bg-dark};
+      --btn-default-hover-color: #{$btn-default-hover-color-dark};
+      --btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
+
+      --highlight-background: #{$highlight-background-dark};
+      --highlight-foreground: #{$highlight-foreground-dark};
+      --highlight-gutter-background: #{$highlight-gutter-background-dark};
+      --highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
+
+      color-scheme: dark;
+    }
+
+    img {
+      opacity: .75;
+
+      &:hover {
+        opacity: .9;
+      }
+    }
+
+    iframe {
+      color-scheme: light;
+    }
+  }
+}

assets/css/_common/components/back-to-top.scss

@@ -0,0 +1,45 @@
+@if hexo-config('back2top.enable') {
+  .back-to-top {
+    font-size: $b2t-font-size;
+
+    @if not hexo-config('back2top.scrollpercent') {
+      span {
+        display: none;
+      }
+    }
+
+    @if hexo-config('back2top.sidebar') {
+      margin: 20px - $sidebar-offset -10px -20px;
+      opacity: 0;
+      transition: opacity $transition-ease;
+
+      &.back-to-top-on {
+        cursor: pointer;
+        opacity: $b2t-opacity;
+
+        &:hover {
+          opacity: $b2t-opacity-hover;
+        }
+      }
+    } @else {
+      bottom: $b2t-position-bottom;
+      box-sizing: border-box;
+      color: $b2t-color;
+      padding: 0 6px;
+      transition: bottom $transition-ease;
+      @include sidebar-toggle();
+
+      @if not hexo-config('back2top.scrollpercent') {
+        width: 24px;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+
+      &.back-to-top-on {
+        bottom: $b2t-position-bottom-on;
+      }
+    }
+  }
+}

assets/css/_common/components/index.scss

@@ -0,0 +1,20 @@
+.noscript-warning {
+  background-color: lighten($red, 20%);
+  color: white;
+  font-family: sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  left: 0;
+  position: fixed;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  z-index: $zindex-5;
+}
+
+@import 'back-to-top';
+@import 'reading-progress';
+
+@import 'post';
+@import 'pages';
+@import 'third-party';

assets/css/_common/components/pages/breadcrumb.scss

@@ -0,0 +1,21 @@
+ul.breadcrumb {
+  font-size: $font-size-smallest;
+  list-style: none;
+  margin: 1em 0;
+  padding: 0 2em;
+  text-align: center;
+
+  li {
+    display: inline;
+  }
+
+  li:not(:first-child)::before {
+    content: '/\00a0';
+    font-weight: normal;
+    padding: .5em;
+  }
+
+  li:last-child {
+    font-weight: bold;
+  }
+}

assets/css/_common/components/pages/categories.scss

@@ -0,0 +1,35 @@
+.category-all-page {
+  .category-all-title {
+    text-align: center;
+  }
+
+  .category-all {
+    margin-top: 20px;
+  }
+
+  .category-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .category-list-item {
+    margin: 5px 10px;
+  }
+
+  .category-list-count {
+    color: $grey;
+
+    &::before {
+      content: ' (';
+    }
+
+    &::after {
+      content: ') ';
+    }
+  }
+
+  .category-list-child {
+    padding-left: 10px;
+  }
+}

assets/css/_common/components/pages/index.scss

@@ -0,0 +1,5 @@
+// Page specific styles
+@import 'categories';
+@import 'schedule';
+@import 'breadcrumb';
+@import 'tag-cloud';

assets/css/_common/components/pages/schedule.scss

@@ -0,0 +1,102 @@
+@keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.8);
+  }
+}
+
+.event-list {
+  hr {
+    background: $black-deep;
+    margin: 20px 0 45px;
+
+    &::after {
+      background: $black-deep;
+      color: white;
+      content: 'NOW';
+      display: inline-block;
+      font-weight: bold;
+      padding: 0 5px;
+    }
+  }
+
+  .event {
+    --event-background: #{$black-deep};
+    --event-foreground: #{$grey};
+    --event-title: white;
+    background: var(--event-background);
+    padding: 15px;
+
+    .event-summary {
+      border-bottom: 0;
+      color: var(--event-title);
+      margin: 0;
+      padding: 0 0 0 35px;
+      position: relative;
+
+      &::before {
+        animation: dot-flash 1s alternate infinite ease-in-out;
+        background: var(--event-title);
+        left: 0;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        @include round-icon(12px);
+      }
+    }
+
+    &:nth-of-type(odd) .event-summary::before {
+      animation-delay: .5s;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    .event-relative-time {
+      color: var(--event-foreground);
+      display: inline-block;
+      font-size: 12px;
+      font-weight: normal;
+      padding-left: 12px;
+    }
+
+    .event-details {
+      color: var(--event-foreground);
+      display: block;
+      line-height: 18px;
+      padding: 6px 0 6px 35px;
+
+      &::before {
+        color: var(--event-foreground);
+        display: inline-block;
+        margin-right: 9px;
+        width: 14px;
+        @include font-family-icons();
+      }
+
+      &.event-location::before {
+        content: '\f041';
+      }
+
+      &.event-duration::before {
+        content: '\f017';
+      }
+
+      &.event-description::before {
+        content: '\f024';
+      }
+    }
+  }
+
+  .event-past {
+    --event-background: #{$whitesmoke};
+    --event-foreground: #{$grey-dark};
+    --event-title: #{$black-deep};
+  }
+}

assets/css/_common/components/pages/tag-cloud.scss

@@ -0,0 +1,28 @@
+.tag-cloud {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
+@for $tag-cloud from 0 through 10 {
+  $tag-cloud-color : mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
+  .tag-cloud-#{$tag-cloud} {
+    border-bottom-color: $tag-cloud-color;
+    color: $tag-cloud-color;
+  }
+}
+
+@if hexo-config('darkmode') {
+  @media (prefers-color-scheme: dark) {
+    @for $tag-cloud from 0 through 10 {
+      $tag-cloud-color : mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
+      .tag-cloud-#{$tag-cloud} {
+        border-bottom-color: $tag-cloud-color;
+        color: $tag-cloud-color;
+      }
+    }
+  }
+}

assets/css/_common/components/post/index.scss

@@ -0,0 +1,53 @@
+.rtl {
+  &.post-body {
+    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
+      direction: rtl;
+      font-family: UKIJ Ekran;
+    }
+  }
+
+  &.post-title {
+    font-family: UKIJ Ekran;
+  }
+}
+
+.post-button {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.use-motion {
+  @if hexo-config('motion.transition.post_block') {
+    .post-block, .pagination, .comments {
+      visibility: hidden;
+    }
+  }
+
+  @if hexo-config('motion.transition.post_header') {
+    .post-header {
+      visibility: hidden;
+    }
+  }
+
+  @if hexo-config('motion.transition.post_body') {
+    .post-body {
+      visibility: hidden;
+    }
+  }
+
+  @if hexo-config('motion.transition.coll_header') {
+    .collection-header {
+      visibility: hidden;
+    }
+  }
+}
+
+@import 'post-collapse';
+@import 'post-body';
+@import 'post-gallery';
+@import 'post-header';
+@import 'post-nav';
+@import 'post-footer';
+@import 'post-widgets';
+@import 'post-reward';
+@import 'post-followme';

assets/css/_common/components/post/post-body.scss

@@ -0,0 +1,79 @@
+.post-body {
+  font-family: $font-family-posts;
+  @include word-wrap();
+
+  @include desktop-large() {
+    font-size: $font-size-large;
+  }
+
+  @include desktop() {
+    text-align: unquote(hexo-config('text_align.desktop'));
+  }
+
+  @include tablet-mobile() {
+    text-align: unquote(hexo-config('text_align.mobile'));
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    // Supported plugins: hexo-renderer-markdown-it hexo-renderer-marked
+    .header-anchor, .headerlink {
+      border-bottom-style: none;
+      color: inherit;
+      float: right;
+      font-size: $font-size-small;
+      margin-left: 10px;
+      opacity: 0;
+
+      &::before {
+        @include font-family-icons('\f0c1');
+      }
+    }
+
+    &:hover {
+      .header-anchor, .headerlink {
+        opacity: .5;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .exturl .fa {
+    font-size: $font-size-small;
+    margin-left: 4px;
+  }
+
+  // For fancybox and pandoc
+  .image-caption, img + figcaption, .fancybox + figcaption {
+    color: $grey-dark;
+    font-size: $font-size-small;
+    font-weight: bold;
+    line-height: 1;
+    margin: -15px auto 15px;
+    text-align: center;
+  }
+
+  iframe, img, video, embed {
+    margin-bottom: 20px;
+  }
+
+  .video-container {
+    height: 0;
+    margin-bottom: 20px;
+    overflow: hidden;
+    padding-top: 75%;
+    position: relative;
+    width: 100%;
+
+    iframe, object, embed {
+      height: 100%;
+      left: 0;
+      margin: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}

assets/css/_common/components/post/post-collapse.scss

@@ -0,0 +1,109 @@
+.posts-collapse .post-content {
+  margin-bottom: $posts-collapse-margin;
+  margin-left: $posts-collapse-margin;
+  position: relative;
+
+  @include mobile() {
+    margin-left: $posts-collapse-margin-mobile;
+    margin-right: $posts-collapse-margin-mobile;
+  }
+
+  .collection-title {
+    font-size: $font-size-large;
+    position: relative;
+
+    &::before {
+      background: $grey-dark;
+      border: 1px solid white;
+      margin-left: -6px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      @include round-icon(10px);
+    }
+  }
+
+  .collection-year {
+    font-size: $font-size-largest;
+    font-weight: bold;
+    margin: 60px 0;
+    position: relative;
+
+    &::before {
+      background: $grey;
+      margin-left: -4px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      @include round-icon(8px);
+    }
+  }
+
+  .collection-header {
+    display: block;
+    margin-left: 20px;
+
+    small {
+      color: $grey;
+      margin-left: 5px;
+    }
+  }
+
+  .post-header {
+    border-bottom: 1px dashed $grey-light;
+    // 2px is equal to half the width of .posts-collapse::before
+    margin: 30px 2px 0;
+    padding-left: 15px;
+    position: relative;
+    transition: border $transition-ease;
+
+    &::before {
+      background: $grey;
+      border: 1px solid white;
+      left: -6px;
+      position: absolute;
+      top: $font-size-smallest;
+      transition: background $transition-ease;
+      @include round-icon(6px);
+    }
+
+    &:hover {
+      border-bottom-color: $grey-dim;
+
+      &::before {
+        background: $black-deep;
+      }
+    }
+  }
+
+  .post-meta-container {
+    display: inline;
+    font-size: $font-size-smallest;
+    margin-right: 10px;
+  }
+
+  .post-title {
+    display: inline;
+
+    a {
+      border-bottom: 0;
+      color: var(--link-color);
+    }
+
+    .fa-external-link-alt {
+      font-size: $font-size-small;
+      margin-left: 5px;
+    }
+  }
+
+  &::before {
+    background: $whitesmoke;
+    content: ' ';
+    height: 100%;
+    margin-left: -2px;
+    position: absolute;
+    // To do: 1.25em is inaccurate when .collection-title has line breaks on mobile
+    top: 1.25em;
+    width: 4px;
+  }
+}

assets/css/_common/components/post/post-followme.scss

@@ -0,0 +1,35 @@
+@if hexo-config('follow_me') {
+  .followme {
+    color: $grey;
+    padding: 1em 1.5em;
+    text-align: center;
+    @include post-card();
+
+    .social-list {
+      @include flex-wrap();
+
+      .social-item {
+        margin: .5em 2em;
+
+        @include tablet-mobile() {
+          margin: .5em .75em;
+        }
+      }
+
+      .social-link {
+        border: 0;
+        display: inline-block;
+        text-align: center;
+
+        .icon {
+          font-size: 1.75em;
+        }
+
+        .label {
+          display: block;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

assets/css/_common/components/post/post-footer.scss

@@ -0,0 +1,41 @@
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-footer through the `order` CSS property
+// Fix issue #16
+// To do: use `gap` instead of `margin`
+// See https://caniuse.com/flexbox-gap
+.post-footer {
+  @include flex-column();
+}
+
+.post-eof {
+  background: $grey-light;
+  height: 1px;
+  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
+  width: 8%;
+
+  .post-block:last-of-type & {
+    display: none;
+  }
+}
+
+@if hexo-config('creative_commons.post') {
+  .post-copyright ul {
+    list-style: none;
+    padding: .5em 1em;
+    @include post-card();
+  }
+}
+
+.post-tags {
+  margin-top: 40px;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    font-size: $font-size-smaller;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}

assets/css/_common/components/post/post-gallery.scss

@@ -0,0 +1,33 @@
+.post-gallery {
+  display: flex;
+  min-height: 200px;
+
+  .post-gallery-image {
+    flex: 1;
+
+    &:not(:first-child) {
+      clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
+      margin-left: -20px;
+    }
+
+    &:not(:last-child) {
+      margin-right: -20px;
+    }
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      // Override darkmode image opacity.
+      opacity: 1;
+      width: 100%;
+    }
+  }
+}
+
+.posts-expand .post-gallery {
+  margin-bottom: 60px;
+}
+
+.posts-collapse .post-gallery {
+  margin: 15px 0;
+}

assets/css/_common/components/post/post-header.scss

@@ -0,0 +1,120 @@
+.posts-expand .post-header {
+  font-size: $font-size-large;
+  margin-bottom: 60px;
+  text-align: center;
+}
+
+.posts-expand .post-title {
+  font-size: $font-size-largest;
+  font-weight: normal;
+  margin: initial;
+  @include word-wrap();
+
+  @if hexo-config('post_edit.enable') {
+    .post-edit-link {
+      border-bottom: 0;
+      color: $grey;
+      float: right;
+      font-size: $font-size-larger;
+      margin-left: -1.2em;
+      transition: color $transition-ease-in;
+
+      @include mobile-small() {
+        margin-left: initial;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+    }
+  }
+}
+
+.posts-expand .post-title-link {
+  border-bottom: 0;
+  color: var(--link-color);
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    background: var(--link-color);
+    bottom: 0;
+    content: '';
+    height: 2px;
+    // Fix issue #75
+    left: 0;
+    position: absolute;
+    transform: scaleX(0);
+    transition: transform $transition-ease;
+    width: 100%;
+  }
+
+  &:hover::before {
+    transform: scaleX(1);
+  }
+
+  .fa-external-link-alt {
+    font-size: $font-size-small;
+    margin-left: 5px;
+  }
+}
+
+.post-sticky-flag {
+  display: inline-block;
+  // Fix issue #80 #140
+  margin-right: 8px;
+  transform: rotate(30deg);
+}
+
+.posts-expand .post-meta-container {
+  color: $grey-dark;
+  font-family: $font-family-posts;
+  font-size: $font-size-smallest;
+  margin-top: 3px;
+
+  .post-description {
+    font-size: $font-size-small;
+    margin-top: 2px;
+  }
+
+  time {
+    border-bottom: 1px dashed $grey-dark;
+  }
+}
+
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-meta through the `order` CSS property
+.post-meta {
+  @include flex-wrap();
+}
+
+// .post-meta-item exists in .post-meta and footer
+:not(.post-meta-break) + .post-meta-item::before {
+  content: '|';
+  margin: 0 .5em;
+}
+
+.post-meta-item-icon {
+  margin-right: 3px;
+}
+
+.post-meta-item-text {
+  @if not hexo-config('post_meta.item_text') {
+    display: none;
+  }
+
+  @include tablet-mobile() {
+    display: none;
+  }
+}
+
+.post-meta-break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+@if hexo-config('busuanzi_count.enable') and hexo-config('busuanzi_count.post_views') {
+  #busuanzi_container_page_pv {
+    display: none;
+  }
+}

assets/css/_common/components/post/post-nav.scss

@@ -0,0 +1,41 @@
+.post-nav {
+  border-top: 1px solid $gainsboro;
+  display: flex;
+  gap: 30px;
+  justify-content: space-between;
+  margin-top: 1em;
+  padding: 10px 5px 0;
+}
+
+.post-nav-item {
+  flex: 1;
+
+  a {
+    border-bottom: 0;
+    display: block;
+    font-size: $font-size-small;
+    line-height: 1.6;
+
+    &:active {
+      top: 2px;
+    }
+  }
+
+  .fa {
+    font-size: $font-size-smallest;
+  }
+
+  &:first-child {
+    .fa {
+      margin-right: 5px;
+    }
+  }
+
+  &:last-child {
+    text-align: right;
+
+    .fa {
+      margin-left: 5px;
+    }
+  }
+}

assets/css/_common/components/post/post-reward.scss

@@ -0,0 +1,56 @@
+.reward-container {
+  margin: $post-card-margin;
+  padding: 1em 0;
+  text-align: center;
+
+  button {
+    @include button($sidebar-highlight);
+    border: 2px solid $sidebar-highlight;
+    border-radius: 2px;
+    outline: 0;
+    transition: all $transition-ease;
+    vertical-align: text-top;
+  }
+}
+
+.post-reward {
+  display: none;
+  padding-top: 20px;
+
+  &.active {
+    display: block;
+  }
+
+  div {
+    display: inline-block;
+
+    span {
+      display: block;
+    }
+
+    @if hexo-config('reward_settings.animation') {
+      &:hover span {
+        animation: next-roll .1s infinite linear;
+        // The animation may affect :hover of img in dark mode
+        pointer-events: none;
+      }
+    }
+  }
+
+  img {
+    display: inline-block;
+    margin: .8em 2em 0;
+    max-width: 100%;
+    width: 180px;
+  }
+}
+
+@keyframes next-roll {
+  from {
+    transform: rotateZ(30deg);
+  }
+
+  to {
+    transform: rotateZ(-30deg);
+  }
+}

assets/css/_common/components/post/post-widgets.scss

@@ -0,0 +1,20 @@
+.post-widgets {
+  border-top: 1px solid $gainsboro;
+  margin-top: 15px;
+  text-align: center;
+}
+
+.wpac-rating-container {
+  height: 20px;
+  line-height: 20px;
+  margin-top: 10px;
+  padding-top: 6px;
+  text-align: center;
+}
+
+.social-like {
+  display: flex;
+  font-size: $font-size-small;
+  justify-content: center;
+  text-align: center;
+}

assets/css/_common/components/reading-progress.scss

@@ -0,0 +1,27 @@
+@if hexo-config('reading_progress.enable') {
+  .reading-progress-bar {
+    --progress: 0;
+    background: convert(hexo-config('reading_progress.color'));
+    height: convert(hexo-config('reading_progress.height'));
+    position: fixed;
+    z-index: $zindex-5;
+
+    @if hexo-config('reading_progress.reversed') {
+      width: calc(100% - var(--progress));
+    } @else {
+      width: var(--progress);
+    }
+
+    @if hexo-config('reading_progress.start_at') == 'right' {
+      right: 0;
+    } @else {
+      left: 0;
+    }
+
+    @if hexo-config('reading_progress.position') == 'bottom' {
+      bottom: 0;
+    } @else {
+      top: 0;
+    }
+  }
+}

assets/css/_common/components/third-party/disqusjs.styl

@@ -0,0 +1,39 @@
+if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) {
+  @media (prefers-color-scheme:dark) {
+    html #dsqjs a {
+      color: var(--link-color)
+    }
+
+    html #dsqjs a:focus,html #dsqjs a:hover {
+      color: var(--link-hover-color)
+    }
+
+    html #dsqjs .dsqjs-nav,html #dsqjs footer {
+      border-color: var(--card-bg-color)
+    }
+
+    html #dsqjs .dsqjs-load-more,html #dsqjs .dsqjs-load-more:hover,html #dsqjs .dsqjs-nav-tab,html #dsqjs .dsqjs-no-comment,html #dsqjs .dsqjs-post-content {
+      color: var(--text-color)
+    }
+
+    html #dsqjs .dsqjs-order-label {
+      background-color: #3e4b5e
+    }
+
+    html #dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
+      background-color: var(--content-bg-color)
+    }
+
+    html #dsqjs .dsqjs-tab-active>span:after {
+      background-color: #2e9fff!important
+    }
+
+    html #dsqjs .dsqjs-footer,html #dsqjs .dsqjs-meta {
+      color: var(--text-color)
+    }
+
+    html #dsqjs .dsqjs-post-body blockquote {
+      border-color: var(--content-bg-color)
+    }
+  }
+}

assets/css/_common/components/third-party/gitalk.scss

@@ -0,0 +1,9 @@
+@if hexo-config('gitalk.enable') {
+  .gt-header a, .gt-comments a, .gt-popup a {
+    border-bottom: 0;
+  }
+
+  .gt-container .gt-popup .gt-action.is--active::before {
+    top: .7em;
+  }
+}

assets/css/_common/components/third-party/gitter.styl

@@ -0,0 +1,7 @@
+if (hexo-config('gitter.enable')) {
+  .gitter-open-chat-button {
+    $alignment = sidebar-toggle-alignment(false);
+    {$alignment[0]}: auto !important;
+    {$alignment[1]}: 10px !important;
+  }
+}

assets/css/_common/components/third-party/index.scss

@@ -0,0 +1,18 @@
+@import 'disqusjs';
+@import 'gitalk';
+@import 'utterances';
+@import 'search';
+@import 'related-posts';
+@import 'math';
+@import 'gitter';
+
+.use-motion .animated {
+  // Fix issue #48 #55
+  animation-fill-mode: none;
+  // Fix issue #46 .animated in .sidebar
+  visibility: inherit;
+}
+
+.use-motion .sidebar .animated {
+  animation-fill-mode: both;
+}

assets/css/_common/components/third-party/math.scss

@@ -0,0 +1,9 @@
+@if hexo-config('math.mathjax.enable') {
+  mjx-container[jax='CHTML'][display='true'], .has-jax {
+    overflow: auto hidden;
+  }
+
+  mjx-container[display='true'] + br {
+    display: none;
+  }
+}

assets/css/_common/components/third-party/related-posts.scss

@@ -0,0 +1,23 @@
+@if hexo-config('related_posts.enable') {
+  .popular-posts-header {
+    border-bottom: 1px solid $gainsboro;
+    font-size: $font-size-large;
+    margin-bottom: 10px;
+    margin-top: $post-eof-margin-bottom;
+  }
+
+  .popular-posts {
+    padding: 0;
+
+    .popular-posts-item {
+      margin-left: 2em;
+
+      .popular-posts-title {
+        font-size: $font-size-small;
+        font-weight: normal;
+        line-height: $line-height-base * 1.2;
+        margin: 0;
+      }
+    }
+  }
+}

assets/css/_common/components/third-party/search.scss

@@ -0,0 +1,179 @@
+@if hexo-config('local_search.enable') or hexo-config('algolia_search.enable') {
+  .search-active {
+    overflow: hidden;
+  }
+
+  .search-pop-overlay {
+    background: rgba(0, 0, 0, 0);
+    display: flex;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    transition: visibility .4s, background .4s;
+    visibility: hidden;
+    width: 100%;
+    z-index: $zindex-4;
+
+    .search-active & {
+      background: rgba(0, 0, 0, .3);
+      visibility: visible;
+    }
+  }
+
+  .search-popup {
+    background: var(--card-bg-color);
+    border-radius: 5px;
+    height: 80%;
+    margin: auto;
+    transform: scale(0);
+    transition: transform .4s;
+    width: 700px;
+
+    .search-active & {
+      transform: scale(1);
+    }
+
+    @include mobile() {
+      border-radius: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .search-icon, .popup-btn-close {
+      color: $grey-dark;
+      font-size: 18px;
+      padding: 0 10px;
+    }
+
+    .popup-btn-close {
+      cursor: pointer;
+
+      &:hover .fa {
+        color: $black-deep;
+      }
+    }
+
+    .search-header {
+      background: $gainsboro;
+      if (hexo-config('darkmode')) {
+        @media (prefers-color-scheme: dark) {
+          background: $grey-dim;
+        }
+      }
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      display: flex;
+      padding: 5px;
+    }
+
+    input.search-input {
+      background: transparent;
+      border: 0;
+      outline: 0;
+      width: 100%;
+
+      &::-webkit-search-cancel-button {
+        display: none;
+      }
+    }
+
+    .search-result-container {
+      height: calc(100% - 55px);
+      overflow: auto;
+      padding: 5px 25px;
+
+      hr {
+        margin: 5px 0 10px;
+
+        &:first-child {
+          display: none;
+        }
+      }
+    }
+
+    .search-result-list {
+      margin: 0 5px;
+      padding: 0;
+    }
+
+    a.search-result-title {
+      font-weight: bold;
+    }
+
+    p.search-result {
+      border-bottom: 1px dashed $grey-light;
+      padding: 5px 0;
+    }
+  }
+}
+
+@if hexo-config('algolia_search.enable') {
+  .search-input-container {
+    flex-grow: 1;
+
+    form {
+      padding: 2px;
+    }
+  }
+
+  .search-stats {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      height: 1em;
+      margin: 0;
+    }
+  }
+
+  .algolia-pagination {
+    // Override default style of ul
+    margin: 40px 0;
+    opacity: 1;
+    padding: 0;
+
+    .pagination-item {
+      display: inline-block;
+    }
+
+    .current .page-number {
+      @extend %page-number-current;
+      cursor: default;
+    }
+
+    .disabled-item {
+      visibility: hidden;
+    }
+  }
+}
+
+@if hexo-config('local_search.enable') {
+  .search-popup {
+    .search-input-container {
+      flex-grow: 1;
+      padding: 2px;
+    }
+
+    .no-result {
+      display: flex;
+    }
+
+    .search-result-list {
+      width: 100%;
+    }
+
+    .search-result-icon {
+      color: $grey-light;
+      margin: auto;
+    }
+  }
+
+  mark.search-keyword {
+    background: transparent;
+    border-bottom: 1px dashed $red;
+    color: $red;
+    font-weight: bold;
+  }
+}

assets/css/_common/components/third-party/utterances.scss

@@ -0,0 +1,5 @@
+@if hexo-config('utterances.enable') {
+  .utterances {
+    max-width: unset;
+  }
+}

assets/css/_common/outline/footer/index.scss

@@ -0,0 +1,100 @@
+// Footer Section
+// --------------------------------------------------
+.footer {
+  color: $grey-dark;
+  font-size: $font-size-small;
+  padding: 20px 0;
+
+  &.footer-fixed {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+}
+
+// Flexbox layout makes it possible to reorder the child
+// elements of .footer-inner through the `order` CSS property
+.footer-inner {
+  box-sizing: border-box;
+  text-align: center;
+  @include flex-column();
+  @include main-container();
+}
+
+.use-motion {
+  .footer {
+    opacity: 0;
+  }
+}
+
+@keyframes icon-animate {
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  10%, 30% {
+    transform: scale(.9);
+  }
+
+  20%, 40%, 60%, 80% {
+    transform: scale(1.1);
+  }
+
+  50%, 70% {
+    transform: scale(1.1);
+  }
+}
+
+.languages {
+  display: inline-block;
+  font-size: $font-size-large;
+  position: relative;
+
+  .lang-select-label span {
+    margin: 0 .5em;
+  }
+
+  .lang-select {
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+.with-love {
+  color: hexo-config('footer.icon.color');
+  display: inline-block;
+  margin: 0 5px;
+
+  @if hexo-config('footer.icon.animated') {
+    animation: icon-animate 1.33s ease-in-out infinite;
+  }
+}
+
+@if hexo-config('footer.beian.enable') and hexo-config('footer.beian.gongan_icon_url') {
+  .beian img {
+    display: inline-block;
+    margin: 0 3px;
+    vertical-align: middle;
+  }
+}
+
+@if hexo-config('busuanzi_count.enable') {
+  .busuanzi-count {
+    @if hexo-config('busuanzi_count.total_visitors') {
+      #busuanzi_container_site_uv {
+        display: none;
+      }
+    }
+
+    @if hexo-config('busuanzi_count.total_views') {
+      #busuanzi_container_site_pv {
+        display: none;
+      }
+    }
+  }
+}

assets/css/_common/outline/header/bookmark.scss

@@ -0,0 +1,24 @@
+@if hexo-config('bookmark.enable') {
+  .book-mark-link {
+    border-bottom: 0;
+    position: fixed;
+    top: -10px;
+    transition: top .3s;
+    @include sidebar-toggle-position(true);
+
+    @include tablet-mobile() {
+      display: none;
+    }
+
+    &::before {
+      color: convert(hexo-config('bookmark.color'));
+      font-size: 32px;
+      line-height: 1;
+      @include font-family-icons('\f02e');
+    }
+  }
+
+  .book-mark-link:hover, .book-mark-link-fixed {
+    top: -2px;
+  }
+}

assets/css/_common/outline/header/github-banner.scss

@@ -0,0 +1,59 @@
+@if hexo-config('github_banner.enable') {
+  @keyframes octocat-wave {
+    0%, 100% {
+      transform: rotate(0);
+    }
+
+    20%, 60% {
+      transform: rotate(-25deg);
+    }
+
+    40%, 80% {
+      transform: rotate(10deg);
+    }
+  }
+
+  .github-corner {
+    :hover .octo-arm {
+      animation: octocat-wave 560ms ease-in-out;
+    }
+
+    svg {
+      color: white;
+      fill: var(--theme-color);
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: $zindex-0;
+    }
+
+    @include tablet-mobile() {
+      @if hexo-config('local_search.enable') or hexo-config('algolia_search.enable') {
+        display: none;
+      }
+
+      svg {
+        @if ($scheme == 'Pisces') or ($scheme == 'Gemini') {
+          color: var(--theme-color);
+          fill: white;
+        }
+      }
+
+      .github-corner:hover .octo-arm {
+        animation: none;
+      }
+
+      .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+      }
+    }
+
+    @if $scheme == 'Mist' {
+      @include mobile() {
+        svg {
+          top: inherit;
+        }
+      }
+    }
+  }
+}

assets/css/_common/outline/header/index.scss

@@ -0,0 +1,38 @@
+// Header Section
+// --------------------------------------------------
+.headband {
+  background: $headband-bg;
+  height: $headband-height;
+
+  @include tablet-mobile() {
+    display: none;
+  }
+}
+
+// Fix issue #521
+header.header {
+  background: $head-bg;
+}
+
+.header-inner {
+  @include main-container();
+}
+
+.site-brand-container {
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 10px;
+}
+
+.use-motion {
+  header.header, .site-brand-container .toggle {
+    opacity: 0;
+  }
+}
+
+@import 'site-meta';
+@import 'site-nav';
+@import 'menu';
+
+@import 'bookmark';
+@import 'github-banner';

assets/css/_common/outline/header/menu.scss

@@ -0,0 +1,56 @@
+// Menu
+// --------------------------------------------------
+.menu {
+  margin: 0;
+  padding: 1em 0;
+  text-align: center;
+}
+
+.menu-item {
+  display: inline-block;
+  list-style: none;
+  margin: 0 10px;
+
+  @include mobile() {
+    display: block;
+    margin-top: 10px;
+
+    &.menu-item-search {
+      display: none;
+    }
+  }
+
+  a {
+    border-bottom: 0;
+    display: block;
+    font-size: $font-size-smaller;
+    transition: border-color $transition-ease;
+
+    &:hover, &.menu-item-active {
+      background: var(--menu-item-bg-color);
+    }
+  }
+
+  .fa, .fab, .far, .fas {
+    margin-right: 8px;
+  }
+
+  .badge {
+    display: inline-block;
+    font-weight: bold;
+    line-height: 1;
+    margin-left: .35em;
+    margin-top: .35em;
+    text-align: center;
+    white-space: nowrap;
+
+    @include mobile() {
+      float: right;
+      margin-left: 0;
+    }
+  }
+}
+
+.use-motion .menu-item {
+  visibility: hidden;
+}

assets/css/_common/outline/header/site-meta.scss

@@ -0,0 +1,49 @@
+.site-meta {
+  flex-grow: 1;
+  text-align: center;
+
+  @include mobile() {
+    text-align: center;
+  }
+}
+
+.custom-logo-image {
+  margin-top: 20px;
+
+  @include tablet-mobile() {
+    display: none;
+  }
+}
+
+.brand {
+  border-bottom: 0;
+  color: var(--brand-color);
+  display: inline-block;
+  padding: 0 40px;
+
+  &:hover {
+    color: var(--brand-hover-color);
+  }
+}
+
+.site-title {
+  font-family: $font-family-logo;
+  font-size: $font-size-title;
+  font-weight: normal;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.site-subtitle {
+  color: $subtitle-color;
+  font-size: $font-size-subtitle;
+  margin: 10px 0;
+}
+
+.use-motion {
+  .site-title, .site-subtitle, .custom-logo-image {
+    opacity: 0;
+    position: relative;
+    top: -10px;
+  }
+}

assets/css/_common/outline/header/site-nav.scss

@@ -0,0 +1,24 @@
+.site-nav-toggle, .site-nav-right {
+  display: none;
+
+  @include mobile() {
+    @include flex-column();
+  }
+
+  .toggle {
+    color: var(--text-color);
+    padding: 10px;
+    width: 22px;
+
+    .toggle-line {
+      background: var(--text-color);
+      border-radius: 1px;
+    }
+  }
+}
+
+.site-nav {
+  @include mobile() {
+    @include site-nav-hide-by-default();
+  }
+}

assets/css/_common/outline/index.scss

@@ -0,0 +1,5 @@
+@import 'header';
+@import 'sidebar';
+@import 'footer';
+
+@import 'mobile';

assets/css/_common/outline/mobile.scss

@@ -0,0 +1,85 @@
+/*
+// < 767px
+@include mobile() {
+
+}
+*/
+
+@if hexo-config('mobile_layout_economy') {
+  @include mobile-small() {
+    // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini).
+    .main-inner {
+      padding: initial !important;
+    }
+
+    // For all schemes wider width.
+    .posts-expand {
+      .post-header {
+        margin-bottom: 10px !important;
+      }
+    }
+
+    .post-block {
+      margin-top: initial !important;
+      // Inside posts blocks content padding (default 40px).
+      padding: $content-mobile-padding 18px $content-mobile-padding !important;
+    }
+
+    .post-body {
+      // For headers narrow width.
+      h1, h2, h3, h4, h5, h6 {
+        margin: 20px 0 8px;
+      }
+
+      // Rewrite paddings & margins inside tags.
+      .note, .tabs .tab-content .tab-pane {
+        h1, h2, h3, h4, h5, h6 {
+          margin: 0 5px;
+        }
+      }
+
+      // For paragraphs narrow width.
+      > p {
+        margin: 0 0 10px;
+      }
+
+      // Rewrite paddings & margins inside tags.
+      .note > p, .tabs .tab-content .tab-pane > p {
+        padding: 0 5px;
+      }
+
+      img, video {
+        margin-bottom: 10px !important;
+      }
+
+      .note {
+        margin-bottom: 10px !important;
+        padding: 10px !important;
+
+        @if hexo-config('note.icons') {
+          &:not(.no-icon) {
+            padding-left: 35px !important;
+          }
+        }
+      }
+
+      .tabs .tab-content .tab-pane {
+        padding: 10px 10px 0 !important;
+      }
+    }
+
+    .post-eof {
+      margin: 40px auto 20px !important;
+    }
+
+    .pagination {
+      margin-top: 40px;
+    }
+  }
+}
+/*
+// < 413px
+@include mobile-smallest() {
+
+}
+*/

assets/css/_common/outline/sidebar/index.scss

@@ -0,0 +1,38 @@
+.sidebar-inner {
+  color: $grey-dark;
+  // Init Sidebar & TOC inner dimensions on all pages and for all schemes.
+  $offset : if(($scheme == 'Pisces') or ($scheme == 'Gemini'), $sidebar-offset, $sidebar-padding);
+  max-height: calc(100vh - #{$offset * 2});
+  padding: $sidebar-padding 10px;
+  text-align: center;
+  @include flex-column();
+}
+
+.site-overview-item:not(:first-child) {
+  margin-top: 10px;
+}
+
+.cc-license {
+  .cc-opacity {
+    border-bottom: 0;
+    opacity: .7;
+
+    &:hover {
+      opacity: .9;
+    }
+  }
+
+  img {
+    display: inline-block;
+  }
+}
+
+@import 'sidebar-author';
+@import 'sidebar-author-links';
+@import 'sidebar-button';
+@import 'sidebar-blogroll';
+@import 'sidebar-dimmer';
+@import 'sidebar-nav';
+@import 'sidebar-toggle';
+@import 'sidebar-toc';
+@import 'site-state';

assets/css/_common/outline/sidebar/sidebar-author-links.scss

@@ -0,0 +1,11 @@
+.links-of-author {
+  a {
+    font-size: $font-size-smaller;
+  }
+
+  @if not hexo-config('social_icons.icons_only') {
+    .fa, .fab, .far, .fas {
+      margin-right: 2px;
+    }
+  }
+}

assets/css/_common/outline/sidebar/sidebar-author.scss

@@ -0,0 +1,29 @@
+.site-author-image {
+  border: $site-author-image-border-width solid $site-author-image-border-color;
+  max-width: $site-author-image-width;
+  padding: 2px;
+
+  @if hexo-config('avatar.rounded') {
+    border-radius: 50%;
+  }
+
+  @if hexo-config('avatar.rotated') {
+    transition: transform 1s ease-out;
+
+    &:hover {
+      transform: rotateZ(360deg);
+    }
+  }
+}
+
+.site-author-name {
+  color: $site-author-name-color;
+  font-weight: $site-author-name-weight;
+  margin: $site-author-name-margin;
+}
+
+.site-description {
+  color: $site-description-color;
+  font-size: $site-description-font-size;
+  margin-top: $site-description-margin-top;
+}

assets/css/_common/outline/sidebar/sidebar-blogroll.scss

@@ -0,0 +1,15 @@
+.links-of-blogroll {
+  font-size: $font-size-smaller;
+}
+
+.links-of-blogroll-title {
+  font-size: $font-size-small;
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.links-of-blogroll-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

assets/css/_common/outline/sidebar/sidebar-button.scss

@@ -0,0 +1,15 @@
+.sidebar .sidebar-button {
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
+
+  button {
+    @include button($orange);
+    border: 1px solid $orange;
+    border-radius: 4px;
+
+    .fa, .fab, .far, .fas {
+      margin-right: 5px;
+    }
+  }
+}

assets/css/_common/outline/sidebar/sidebar-dimmer.scss

@@ -0,0 +1,24 @@
+.sidebar-dimmer {
+  display: none;
+}
+
+@include tablet-mobile() {
+  .sidebar-dimmer {
+    background: black;
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    transition: visibility .4s, opacity .4s;
+    visibility: hidden;
+    width: 100%;
+    z-index: $zindex-1;
+
+    .sidebar-active & {
+      opacity: .7;
+      visibility: visible;
+    }
+  }
+}

assets/css/_common/outline/sidebar/sidebar-nav.scss

@@ -0,0 +1,57 @@
+// Sidebar Navigation
+.sidebar-nav {
+  display: none;
+  margin: 0;
+  padding-bottom: 20px;
+  padding-left: 0;
+
+  .sidebar-nav-active & {
+    display: block;
+  }
+
+  li {
+    border-bottom: 1px solid transparent;
+    color: $sidebar-nav-color;
+    cursor: pointer;
+    display: inline-block;
+    font-size: $font-size-small;
+
+    &.sidebar-nav-overview {
+      margin-left: 10px;
+    }
+
+    &:hover {
+      color: $sidebar-nav-hover-color;
+    }
+  }
+}
+
+.sidebar-toc-active .sidebar-nav-toc, .sidebar-overview-active .sidebar-nav-overview {
+  border-bottom-color: $sidebar-highlight;
+  color: $sidebar-highlight;
+
+  &:hover {
+    color: $sidebar-highlight;
+  }
+}
+
+// Need for Sidebar/TOC inner scrolling if content taller then viewport.
+.sidebar-panel-container {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sidebar-panel {
+  display: none;
+}
+
+.sidebar-overview-active .site-overview-wrap {
+  // Flexbox layout makes it possible to reorder the child
+  // elements of .site-overview-item through the `order` CSS property
+  @include flex-column();
+}
+
+.sidebar-toc-active .post-toc-wrap {
+  display: block;
+}

assets/css/_common/outline/sidebar/sidebar-toc.scss

@@ -0,0 +1,61 @@
+@if hexo-config('toc.enable') {
+  .post-toc {
+    font-size: $font-size-small;
+
+    ol {
+      list-style: none;
+      margin: 0;
+      padding: 0 2px 5px 10px;
+      text-align: left;
+
+      > ol {
+        padding-left: 0;
+      }
+
+      a {
+        transition: all $transition-ease;
+      }
+    }
+
+    .nav-item {
+      line-height: 1.8;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      @if not hexo-config('toc.wrap') {
+        white-space: nowrap;
+      }
+    }
+
+    .nav {
+      .nav-child {
+        display: if(hexo-config('toc.expand_all'), block, none);
+      }
+
+      .active > .nav-child {
+        display: block;
+      }
+
+      .active-current > .nav-child {
+        display: block;
+
+        > .nav-item {
+          display: block;
+        }
+      }
+
+      .active > a {
+        border-bottom-color: $sidebar-highlight;
+        color: $sidebar-highlight;
+      }
+
+      .active-current > a {
+        color: $sidebar-highlight;
+
+        &:hover {
+          color: $sidebar-highlight;
+        }
+      }
+    }
+  }
+}

assets/css/_common/outline/sidebar/sidebar-toggle.scss

@@ -0,0 +1,21 @@
+.sidebar-toggle {
+  bottom: 45px;
+  height: 12px;
+  padding: 6px 5px;
+  width: 14px;
+  @include sidebar-toggle();
+}
+
+.sidebar-toggle:hover .toggle-line {
+  background: $sidebar-highlight;
+}
+
+@media (any-hover: hover) {
+  body:not(.sidebar-active) .sidebar-toggle:hover {
+    @include toggle-arrow(hexo-config('sidebar.position'));
+  }
+}
+
+.sidebar-active .sidebar-toggle {
+  @include toggle-close(hexo-config('sidebar.position'));
+}

assets/css/_common/outline/sidebar/site-state.scss

@@ -0,0 +1,28 @@
+@if hexo-config('site_state') {
+  .site-state {
+    @include flex-wrap();
+    line-height: 1.4;
+  }
+
+  .site-state-item {
+    // Fix issue #103
+    // The click area of the link becomes smaller
+    padding: 0 15px;
+
+    a {
+      border-bottom: 0;
+      display: block;
+    }
+  }
+
+  .site-state-item-count {
+    display: block;
+    font-size: $site-state-item-count-font-size;
+    font-weight: 600;
+  }
+
+  .site-state-item-name {
+    color: $site-state-item-name-color;
+    font-size: $site-state-item-name-font-size;
+  }
+}

assets/css/_common/scaffolding/base.scss

@@ -0,0 +1,99 @@
+::selection {
+  background: $selection-bg;
+  color: $selection-color;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: var(--body-bg-color);
+  box-sizing: border-box;
+  color: var(--text-color);
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  min-height: 100%;
+  position: relative;
+  transition: padding $transition-ease;
+
+  @if hexo-config('body_scrollbar.overlay') {
+    overflow-x: hidden;
+    @supports (overflow-x: clip) {
+      overflow-x: clip;
+    }
+    width: 100vw;
+  }
+
+  @if hexo-config('body_scrollbar.stable') {
+    overflow-y: scroll;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-headings;
+  font-weight: bold;
+  line-height: 1.5;
+  margin: 30px 0 15px;
+}
+
+@for $headline from 1 through 6 {
+  h#{$headline} {
+    font-size: $font-size-headings-base - $font-size-headings-step * $headline;
+  }
+}
+
+p {
+  margin: 0 0 20px;
+}
+
+a {
+  border-bottom: 1px solid $link-decoration-color;
+  color: var(--link-color);
+  // For a:not(:any-link)
+  cursor: pointer;
+  outline: 0;
+  text-decoration: none;
+  @include word-wrap();
+
+  &:hover {
+    border-bottom-color: var(--link-hover-color);
+    color: var(--link-hover-color);
+  }
+}
+
+iframe, img, video, embed {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+
+hr {
+  background-image: repeating-linear-gradient(-45deg, $grey-lighter, $grey-lighter 4px, transparent 4px, transparent 8px);
+  border: 0;
+  height: 3px;
+  margin: 40px 0;
+}
+
+blockquote {
+  border-left: 4px solid $grey-lighter;
+  color: var(--blockquote-color);
+  margin: 0;
+  padding: 0 15px;
+
+  cite::before {
+    content: '-';
+    padding: 0 5px;
+  }
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}

assets/css/_common/scaffolding/buttons.scss

@@ -0,0 +1,26 @@
+.btn {
+  background: var(--btn-default-bg);
+  border: 2px solid var(--btn-default-border-color);
+  border-radius: $btn-default-radius;
+  color: var(--btn-default-color);
+  display: inline-block;
+  font-size: $font-size-small;
+  line-height: 2;
+  padding: 0 20px;
+  transition: background-color $transition-ease;
+
+  &:hover {
+    background: var(--btn-default-hover-bg);
+    border-color: var(--btn-default-hover-border-color);
+    color: var(--btn-default-hover-color);
+  }
+
+  + .btn {
+    margin: 0 0 8px 8px;
+  }
+
+  .fa-fw {
+    text-align: left;
+    width: (18em / 14);
+  }
+}

assets/css/_common/scaffolding/comments.scss

@@ -0,0 +1,39 @@
+.comments {
+  margin-top: 60px;
+  overflow: hidden;
+}
+
+.comment-button-group {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  justify-content: center;
+  margin: 1em 0;
+
+  .comment-button {
+    margin: .1em .2em;
+
+    &.active {
+      background: var(--btn-default-hover-bg);
+      border-color: var(--btn-default-hover-border-color);
+      color: var(--btn-default-hover-color);
+    }
+  }
+}
+
+.comment-position {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.tabs-comment {
+  margin-top: 4em;
+  padding-top: 0;
+
+  .comments {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}

assets/css/_common/scaffolding/highlight/copy-code.scss

@@ -0,0 +1,55 @@
+.highlight:hover .copy-btn, pre:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn {
+  color: $black-dim;
+  cursor: pointer;
+  line-height: 1.6;
+  opacity: 0;
+  padding: 2px 6px;
+  position: absolute;
+  transition: opacity $transition-ease;
+
+  @if hexo-config('codeblock.copy_button.style') == 'flat' {
+    background: white;
+    border: 0;
+    font-size: $font-size-smaller;
+    right: 0;
+    top: 0;
+  } @else if hexo-config('codeblock.copy_button.style') == 'mac' {
+    color: var(--highlight-foreground);
+    font-size: 14px;
+    right: 0;
+    top: 2px;
+  } @else {
+    background-color: $gainsboro;
+    background-image: linear-gradient(#fcfcfc, $gainsboro);
+    border: 1px solid #d5d5d5;
+    border-radius: 3px;
+    font-size: $font-size-smaller;
+    right: 4px;
+    top: 8px;
+  }
+}
+
+@if hexo-config('codeblock.copy_button.style') == 'mac' {
+  figure.highlight {
+    border-radius: 5px;
+    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
+    padding-top: 30px;
+
+    .table-container {
+      border-radius: 0 0 5px 5px;
+    }
+
+    &::before {
+      background: #fc625d;
+      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+      left: 12px;
+      margin-top: -20px;
+      position: absolute;
+      @include round-icon(12px);
+    }
+  }
+}

assets/css/_common/scaffolding/highlight/index.scss

@@ -0,0 +1,140 @@
+// Use `@use` to fix issue #67
+@import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
+@import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
+@import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
+
+@media (prefers-color-scheme: dark) {
+  @import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null';
+  @import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null';
+}
+
+@import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
+
+// Placeholder: %code-inline %code-block
+%code-inline {
+  background: var(--highlight-background);
+  color: var(--highlight-foreground);
+}
+
+%code-block {
+  @extend %code-inline;
+  line-height: $line-height-code-block;
+  margin: 0 auto 20px;
+}
+
+%figcaption {
+  background: var(--highlight-gutter-background);
+  color: var(--highlight-foreground);
+  display: flow-root;
+  font-size: $table-font-size;
+  line-height: 1.2;
+  padding: .5em;
+
+  a {
+    color: var(--highlight-foreground);
+    float: right;
+
+    &:hover {
+      border-bottom-color: var(--highlight-foreground);
+    }
+  }
+}
+
+pre, code {
+  font-family: $code-font-family;
+}
+
+code {
+  @extend %code-inline;
+  border-radius: 3px;
+  font-size: $table-font-size;
+  padding: 2px 4px;
+  @include word-wrap();
+}
+
+kbd {
+  @extend %code-inline;
+  border: 2px solid $grey-light;
+  border-radius: .2em;
+  box-shadow: .1em .1em .2em rgba(0, 0, 0, .1);
+  font-family: inherit;
+  padding: .1em .3em;
+  white-space: nowrap;
+}
+
+// `highlight.line_number: false` and `highlight.wrap: false`
+// in Hexo config generates code.highlight elements
+figure.highlight {
+  @extend %code-block;
+  position: relative;
+
+  pre {
+    border: 0;
+    margin: 0;
+    padding: 10px 0;
+  }
+
+  table {
+    border: 0;
+    margin: 0;
+    width: auto;
+  }
+
+  td {
+    border: 0;
+    padding: 0;
+  }
+
+  figcaption {
+    @extend %figcaption;
+  }
+
+  .gutter {
+    @include disable-user-select();
+
+    pre {
+      background: var(--highlight-gutter-background);
+      color: var(--highlight-gutter-foreground);
+      padding-left: 10px;
+      padding-right: 10px;
+      text-align: right;
+    }
+  }
+
+  .code pre {
+    padding-left: 10px;
+    width: 100%;
+  }
+
+  // See https://github.com/next-theme/hexo-theme-next/discussions/410
+  .marked {
+    background: rgba(0, 0, 0, .3);
+  }
+}
+
+// See https://github.com/hexojs/hexo-util/pull/229
+pre .caption, pre figcaption {
+  @extend %figcaption;
+  margin-bottom: 10px;
+}
+
+.gist table {
+  width: auto;
+
+  td {
+    border: 0;
+  }
+}
+
+pre {
+  @extend %code-block;
+  overflow: auto;
+  padding: 10px;
+  position: relative;
+
+  code {
+    background: none;
+    padding: 0;
+    text-shadow: none;
+  }
+}

assets/css/_common/scaffolding/index.scss

@@ -0,0 +1,12 @@
+//
+// Scaffolding
+// ==================================================
+@import 'normalize';
+@import 'base';
+@import 'tables';
+@import 'buttons';
+@import 'toggles';
+@import 'highlight';
+@import 'tags';
+@import 'pagination';
+@import 'comments';

assets/css/_common/scaffolding/normalize.scss

@@ -0,0 +1,289 @@
+/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: .67em 0;
+}
+
+/* Grouping content
+========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b, strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code, kbd, samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+/* Embedded content
+========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button, input, optgroup, select, textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button, input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button, select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button, [type='button'], [type='reset'], [type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: .35em .75em .625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type='checkbox'], [type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type='search'] {
+  outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield; /* 1 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
+}
+
+/* Interactive
+========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}

assets/css/_common/scaffolding/pagination.scss

@@ -0,0 +1,55 @@
+%page-number-basic {
+  display: inline-block;
+  margin: -1px 10px 0;
+  padding: 0 10px;
+
+  @include mobile() {
+    margin: 0 5px;
+  }
+}
+
+%page-number-current {
+  background: $pagination-active-bg;
+  border-color: $pagination-active-border;
+  color: $pagination-active-color;
+}
+
+.pagination {
+  border-top: 1px solid $pagination-border;
+  margin: 120px 0 0;
+  text-align: center;
+
+  .prev, .next, .page-number {
+    @extend %page-number-basic;
+    border-bottom: 0;
+    border-top: 1px solid $pagination-link-border;
+    transition: border-color $transition-ease;
+
+    &:hover {
+      border-top-color: $pagination-link-hover-border;
+    }
+  }
+
+  @include mobile() {
+    border-top: 0;
+
+    .prev, .next, .page-number {
+      border-bottom: 1px solid $pagination-link-border;
+      border-top: 0;
+
+      &:hover {
+        border-bottom-color: $pagination-link-hover-border;
+      }
+    }
+  }
+
+  .space {
+    @extend %page-number-basic;
+    margin: 0;
+    padding: 0;
+  }
+
+  .page-number.current {
+    @extend %page-number-current;
+  }
+}

assets/css/_common/scaffolding/tables.scss

@@ -0,0 +1,39 @@
+.table-container {
+  overflow: auto;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: $table-font-size;
+  margin: 0 0 20px;
+  width: 100%;
+}
+
+tbody tr {
+  &:nth-of-type(odd) {
+    background: var(--table-row-odd-bg-color);
+  }
+
+  &:hover {
+    background: var(--table-row-hover-bg-color);
+  }
+}
+
+caption, th, td {
+  padding: 8px;
+}
+
+th, td {
+  border: 1px solid $table-border-color;
+  border-bottom: 3px solid $table-cell-border-bottom-color;
+}
+
+th {
+  font-weight: 700;
+  padding-bottom: 10px;
+}
+
+td {
+  border-bottom-width: 1px;
+}

assets/css/_common/scaffolding/tags/blockquote-center.scss

@@ -0,0 +1,34 @@
+// Blockquote with all children centered.
+.blockquote-center {
+  border-left: 0;
+  margin: 40px 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+
+  &::before, &::after {
+    left: 0;
+    line-height: 1;
+    opacity: .6;
+    position: absolute;
+    width: 100%;
+  }
+
+  &::before {
+    border-top: 1px solid $grey-light;
+    text-align: left;
+    top: -20px;
+    @include font-family-icons('\f10d');
+  }
+
+  &::after {
+    border-bottom: 1px solid $grey-light;
+    bottom: -20px;
+    text-align: right;
+    @include font-family-icons('\f10e');
+  }
+
+  p, div {
+    text-align: center;
+  }
+}

assets/css/_common/scaffolding/tags/group-pictures.scss

@@ -0,0 +1,20 @@
+.group-picture {
+  margin-bottom: 20px;
+
+  .group-picture-row {
+    display: flex;
+    gap: 3px;
+    margin-bottom: 3px;
+  }
+
+  .group-picture-column {
+    flex: 1;
+
+    img {
+      height: 100%;
+      margin: 0;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+}

assets/css/_common/scaffolding/tags/index.scss

@@ -0,0 +1,8 @@
+@import 'blockquote-center';
+@import 'group-pictures';
+@import 'label';
+@import 'link-grid';
+@import 'mermaid';
+@import 'note';
+@import 'pdf';
+@import 'tabs';

assets/css/_common/scaffolding/tags/label.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+
+.post-body .label {
+  color: $text-color;
+  padding: 0 2px;
+
+  @each $type in $note-types {
+    &.#{$type} {
+      background: map.get($label, $type);
+    }
+  }
+}

assets/css/_common/scaffolding/tags/link-grid.scss

@@ -0,0 +1,113 @@
+.post-body .link-grid {
+  display: grid;
+  // https://caniuse.com/mdn-css_properties_gap_grid_context
+  grid-gap: 1.5rem;
+  gap: 1.5rem;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 20px;
+  padding: 1rem;
+
+  @include mobile() {
+    grid-template-columns: 1fr;
+  }
+
+  .link-grid-container {
+    border: solid $grey-lighter;
+    box-shadow: 1rem 1rem .5rem rgba(0, 0, 0, .5);
+    min-height: 5rem;
+    // Fix issue #30
+    min-width: 0;
+    padding: .5rem;
+    position: relative;
+    transition: background .3s;
+
+    &:hover {
+      animation: next-shake .5s;
+      background: var(--card-bg-color);
+    }
+
+    &:active {
+      box-shadow: .5rem .5rem .25rem rgba(0, 0, 0, .5);
+      transform: translate(.2rem, .2rem);
+    }
+
+    .link-grid-image {
+      border: 1px solid $grey-lighter;
+      border-radius: 50%;
+      box-sizing: border-box;
+      height: 5rem;
+      padding: 3px;
+      position: absolute;
+      width: 5rem;
+    }
+
+    p {
+      margin: 0 1rem 0 6rem;
+
+      &:first-of-type {
+        font-size: 1.2em;
+      }
+
+      &:last-of-type {
+        font-size: .8em;
+        line-height: 1.3rem;
+        opacity: .7;
+      }
+    }
+
+    a {
+      border: 0;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+@keyframes next-shake {
+  0% {
+    transform: translate(1pt, 1pt) rotate(0deg);
+  }
+
+  10% {
+    transform: translate(-1pt, -2pt) rotate(-1deg);
+  }
+
+  20% {
+    transform: translate(-3pt, 0pt) rotate(1deg);
+  }
+
+  30% {
+    transform: translate(3pt, 2pt) rotate(0deg);
+  }
+
+  40% {
+    transform: translate(1pt, -1pt) rotate(1deg);
+  }
+
+  50% {
+    transform: translate(-1pt, 2pt) rotate(-1deg);
+  }
+
+  60% {
+    transform: translate(-3pt, 1pt) rotate(0deg);
+  }
+
+  70% {
+    transform: translate(3pt, 1pt) rotate(-1deg);
+  }
+
+  80% {
+    transform: translate(-1pt, -1pt) rotate(1deg);
+  }
+
+  90% {
+    transform: translate(1pt, 2pt) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(1pt, -2pt) rotate(-1deg);
+  }
+}

assets/css/_common/scaffolding/tags/mermaid.scss

@@ -0,0 +1,6 @@
+@if hexo-config('mermaid.enable') {
+  .mermaid {
+    margin-bottom: 20px;
+    text-align: center;
+  }
+}

assets/css/_common/scaffolding/tags/note.scss

@@ -0,0 +1,114 @@
+@use 'sass:map';
+
+@if hexo-config('note.style') != 'disabled' {
+  .post-body .note {
+    $note-icons : hexo-config('note.icons');
+    $note-style : hexo-config('note.style');
+
+    border-radius: $note-border-radius;
+    margin-bottom: 20px;
+    padding: 1em;
+    position: relative;
+
+    @if $note-style == 'simple' {
+      border: 1px solid $gainsboro;
+      border-left-width: 5px;
+    }
+
+    @if $note-style == 'modern' {
+      background: $whitesmoke;
+      border: 1px solid transparent;
+    }
+
+    @if $note-style == 'flat' {
+      background: lighten($gainsboro, 65%);
+      border: initial;
+      border-left: 3px solid $gainsboro;
+    }
+
+    summary {
+      cursor: pointer;
+      outline: 0;
+
+      p {
+        display: inline;
+      }
+    }
+
+    h2, h3, h4, h5, h6 {
+      border-bottom: initial;
+      margin: 0;
+      padding-top: 0;
+    }
+
+    p, ul, ol, table, pre, blockquote, img {
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    @if $note-icons {
+      &:not(.no-icon) {
+        padding-left: 2.5em;
+
+        &::before {
+          font-size: 1.5em;
+          left: .3em;
+          position: absolute;
+          top: calc(50% - 1em);
+        }
+      }
+    }
+
+    @each $type in $note-types {
+      &.#{$type} {
+        @if $note-style == 'flat' {
+          background: map.get($note-bg, $type);
+          @if hexo-config('darkmode') {
+            @media (prefers-color-scheme: dark) {
+              background: mix(map.get($note-bg, $type), $body-bg-color-dark, 10%);
+            }
+          }
+        }
+
+        @if $note-style == 'modern' {
+          background: map.get($note-modern-bg, $type);
+          border-color: map.get($note-modern-border, $type);
+          color: map.get($note-modern-text, $type);
+
+          a:not(.btn) {
+            border-bottom-color: map.get($note-modern-text, $type);
+            color: map.get($note-modern-text, $type);
+
+            &:hover {
+              border-bottom-color: map.get($note-modern-hover, $type);
+              color: map.get($note-modern-hover, $type);
+            }
+          }
+        }
+
+        @if $note-style != 'modern' {
+          border-left-color: map.get($note-border, $type);
+
+          h2, h3, h4, h5, h6 {
+            color: map.get($note-text, $type);
+          }
+        }
+
+        @if $note-icons {
+          &:not(.no-icon)::before {
+            @include font-family-icons(map.get($note-icon, $type));
+
+            @if $note-style != 'modern' {
+              color: map.get($note-text, $type);
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/css/_common/scaffolding/tags/pdf.scss

@@ -0,0 +1,8 @@
+@if hexo-config('pdf.enable') {
+  .pdfobject-container {
+    iframe, embed {
+      height: convert(hexo-config('pdf.height'));
+      width: 100%;
+    }
+  }
+}

assets/css/_common/scaffolding/tags/tabs.scss

@@ -0,0 +1,103 @@
+.post-body .tabs {
+  margin-bottom: 20px;
+}
+
+.post-body .tabs, .tabs-comment {
+  padding-top: 10px;
+
+  ul.nav-tabs {
+    background: if(($scheme == 'Muse') or ($scheme == 'Mist'), var(--body-bg-color), var(--content-bg-color));
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    // Fix issue #398
+    z-index: $zindex-0;
+
+    @include mobile-smallest() {
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    li.tab {
+      border-bottom: 1px solid $grey-lighter;
+      border-left: 1px solid transparent;
+      border-right: 1px solid transparent;
+      border-radius: $tbr $tbr 0 0;
+      border-top: 3px solid transparent;
+      flex-grow: 1;
+      list-style-type: none;
+
+      @include mobile-smallest() {
+        border-bottom: 1px solid transparent;
+        border-left: 3px solid transparent;
+        border-right: 1px solid transparent;
+        border-top: 1px solid transparent;
+      }
+
+      @include mobile-smallest() {
+        border-radius: $tbr;
+      }
+
+      @if hexo-config('tabs.transition.tabs') {
+        transition: all $transition-ease-out;
+      }
+
+      a {
+        border-bottom: initial;
+        display: block;
+        line-height: 1.8;
+        padding: .25em .75em;
+        text-align: center;
+
+        i {
+          width: (18em / 14);
+        }
+
+        @if hexo-config('tabs.transition.labels') {
+          transition: all $transition-ease-out;
+        }
+      }
+
+      &.active {
+        border-bottom-color: transparent;
+        border-left-color: $table-border-color;
+        border-right-color: $table-border-color;
+        border-top-color: $orange;
+
+        @include mobile-smallest() {
+          border-bottom-color: $table-border-color;
+          border-left-color: $orange;
+          border-right-color: $table-border-color;
+          border-top-color: $table-border-color;
+        }
+
+        a {
+          cursor: default;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    border: 1px solid $table-border-color;
+    border-radius: 0 0 $tbr $tbr;
+    border-top-color: transparent;
+
+    @include mobile-smallest() {
+      border-radius: $tbr;
+      border-top-color: $table-border-color;
+    }
+
+    .tab-pane {
+      padding: 20px 20px 0;
+
+      &:not(.active) {
+        display: none;
+      }
+    }
+  }
+}

assets/css/_common/scaffolding/toggles.scss

@@ -0,0 +1,26 @@
+.toggle {
+  line-height: 0;
+
+  .toggle-line {
+    background: white;
+    display: block;
+    height: 2px;
+    left: 0;
+    position: relative;
+    top: 0;
+    transition: all .4s;
+    width: 100%;
+
+    &:not(:first-child) {
+      margin-top: 3px;
+    }
+  }
+}
+
+.toggle.toggle-arrow {
+  @include toggle-arrow(hexo-config('sidebar.position'));
+}
+
+.toggle.toggle-close {
+  @include toggle-close(hexo-config('sidebar.position'));
+}

assets/css/_mixins.scss

@@ -0,0 +1,243 @@
+@mixin mobile-smallest() {
+  @media (max-width: 413px) {
+    @content;;
+  }
+}
+
+@mixin mobile-small() {
+  @media (max-width: 567px) {
+    @content;
+  }
+}
+
+@mixin mobile() {
+  @media (max-width: 767px) {
+    @content;
+  }
+}
+
+@mixin tablet-mobile() {
+  @media (max-width: 991px) {
+    @content;
+  }
+}
+
+@mixin tablet-desktop() {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin tablet() {
+  @media (min-width: 768px) and (max-width: 991px) {
+    @content;
+  }
+}
+
+@mixin desktop() {
+  @media (min-width: 992px) {
+    @content;
+  }
+}
+
+@mixin desktop-large() {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin desktop-largest() {
+  @media (min-width: 1600px) {
+    @content;
+  }
+}
+
+@mixin word-wrap() {
+  overflow-wrap: break-word;
+}
+
+@mixin disable-user-select() {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@mixin sidebar-inline-links-item() {
+  margin: 5px 0 0;
+
+  a {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@mixin flex-wrap() {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+@mixin flex-column() {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@mixin post-card() {
+  background: var(--card-bg-color);
+  border-left: 3px solid $red;
+  margin: $post-card-margin;
+}
+
+@mixin font-family-icons($icon : '') {
+  @if $icon {
+    content: $icon;
+  }
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}
+
+@mixin main-container() {
+  margin: 0 auto;
+  width: $content-desktop;
+
+  @include desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  @include desktop-largest() {
+    width: $content-desktop-largest;
+  }
+}
+
+@function sidebar-toggle-alignment($reverse) {
+  $condition : hexo-config('sidebar.position') == 'right';
+  @if ($scheme == 'Muse') or ($scheme == 'Mist') {
+    $condition : $condition == $reverse;
+  }
+  @return if($condition, ('left' 'right'), ('right' 'left'));
+}
+
+@mixin sidebar-toggle-position($reverse) {
+  $alignment : list.nth(sidebar-toggle-alignment($reverse), 0);
+  #{$alignment}: $b2t-position-right;
+  @include tablet-mobile() {
+    #{$alignment}: $b2t-position-right-mobile;
+  }
+}
+
+@mixin sidebar-toggle() {
+  background: $b2t-bg-color;
+  cursor: pointer;
+  opacity: $b2t-opacity;
+  position: fixed;
+  z-index: $zindex-3;
+  @include sidebar-toggle-position(false);
+
+  &:hover {
+    opacity: $b2t-opacity-hover;
+  }
+
+  @include tablet-mobile() {
+    opacity: $b2t-opacity-hover;
+  }
+}
+
+@mixin round-icon($diameter) {
+  border-radius: 50%;
+  content: ' ';
+  height: $diameter;
+  width: $diameter;
+}
+
+@mixin toggle-arrow($position) {
+  @if $position == 'right' {
+    .toggle-line:first-child {
+      top: 2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+
+    .toggle-line:last-child {
+      top: -2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+  } @else {
+    .toggle-line:first-child {
+      left: 50%;
+      top: 2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+
+    .toggle-line:last-child {
+      left: 50%;
+      top: -2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+  }
+}
+
+@mixin toggle-close($position) {
+  .toggle-line:nth-child(2) {
+    opacity: 0;
+  }
+
+  @if $position == 'right' {
+    .toggle-line:first-child {
+      top: 5px;
+      transform: rotate(-45deg);
+    }
+
+    .toggle-line:last-child {
+      top: -5px;
+      transform: rotate(45deg);
+    }
+  } @else {
+    .toggle-line:first-child {
+      top: 5px;
+      transform: rotate(45deg);
+    }
+
+    .toggle-line:last-child {
+      top: -5px;
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+@mixin site-nav-hide-by-default() {
+  --scroll-height: 0;
+  height: 0;
+  overflow: hidden;
+  transition: height $transition-ease;
+
+  body:not(.site-nav-on) & .animated {
+    animation: none;
+  }
+
+  body.site-nav-on & {
+    height: var(--scroll-height);
+  }
+}
+
+@mixin button($color) {
+  background: transparent;
+  color: $color;
+  cursor: pointer;
+  line-height: 2;
+  padding: 0 15px;
+
+  &:hover {
+    background: $color;
+    color: white;
+  }
+}

assets/css/_schemes/Gemini/index.scss

@@ -0,0 +1,130 @@
+@import '../Pisces/_layout';
+@import '../Pisces/_header';
+@import '../Pisces/_menu';
+@import '../Pisces/_sub-menu';
+@import '../Pisces/_sidebar';
+
+// ==================================================
+// Rewrite _layout.styl
+// ==================================================
+// Sidebar padding used as main desktop content padding for sidebar padding and post blocks padding too.
+
+// In `source/css/_variables/Pisces.styl` there are variable for main offset:
+// $sidebar-offset                   : 12px;
+// This value alse can be changed in main NexT config as `sidebar: offset: 12` option.
+
+// In `source/css/_variables/base.styl` there are variables for other resolutions:
+// $content-tablet-padding           : 10px;
+// $content-mobile-padding           : 8px;
+// P.S. If u want to change this paddings u may set this variables into `custom_file_path.variable` (in theme _config.yml).
+
+// So, it will 12px in Desktop, 10px in Tablets and 8px in Mobiles for all possible paddings.
+
+// ==================================================
+// Desktop layout styles.
+// ==================================================
+// Post blocks.
+.main-inner > {
+  .sub-menu, .post-block, .tabs-comment, .comments, .pagination {
+    background: var(--content-bg-color);
+    border-radius: $border-radius-inner;
+    box-shadow: $box-shadow-inner;
+
+    &:not(:first-child):not(.sub-menu) {
+      border-radius: $border-radius;
+      box-shadow: $box-shadow;
+      margin-top: $sidebar-offset;
+
+      @include tablet() {
+        margin-top: $content-tablet-padding;
+      }
+
+      @include mobile() {
+        margin-top: $content-mobile-padding;
+      }
+    }
+  }
+}
+
+// Post & Comments blocks.
+.post-block, .comments {
+  padding: $content-desktop-padding;
+}
+
+// Post delimiters.
+.post-eof {
+  display: none;
+}
+
+// Pagination.
+.pagination {
+  border-top: initial;
+  padding: 10px 0;
+}
+
+// ==================================================
+// Headers.
+// ==================================================
+.post-body {
+  h1, h2 {
+    border-bottom: 1px solid $body-bg-color;
+  }
+
+  h3 {
+    border-bottom: 1px dotted $body-bg-color;
+  }
+}
+
+// ==================================================
+// > 768px & < 991px
+// ==================================================
+@include tablet() {
+  // Posts in blocks.
+  .main-inner {
+    padding: $content-tablet-padding;
+  }
+
+  .posts-expand {
+    // Components inside Posts.
+    .post-button {
+      margin-top: ($content-tablet-padding * 2);
+    }
+  }
+
+  .post-block {
+    // Inside posts blocks content padding (default 40px).
+    padding: ($content-tablet-padding * 2);
+  }
+
+  .comments {
+    padding: $content-tablet-padding ($content-tablet-padding * 2);
+    // padding: initial;
+    // padding-top: $content-tablet-padding;
+  }
+}
+
+// ==================================================
+// < 767px
+// ==================================================
+@include mobile() {
+  // Posts in blocks.
+  .main-inner {
+    padding: $content-mobile-padding;
+  }
+
+  .posts-expand {
+    // Components inside Posts.
+    .post-button {
+      margin: $sidebar-offset 0;
+    }
+  }
+
+  .post-block {
+    // Inside posts blocks content padding (default 40px).
+    padding: $sidebar-offset;
+  }
+
+  .comments {
+    padding: 10px $sidebar-offset;
+  }
+}

assets/css/_schemes/Mist/_header.scss

@@ -0,0 +1,56 @@
+// Header
+// --------------------------------------------------
+.header-inner {
+  align-items: center;
+  display: flex;
+  padding: 20px 0;
+
+  @include mobile() {
+    display: block;
+    padding: 10px 0;
+  }
+}
+
+.site-meta {
+  line-height: normal;
+
+  .brand {
+    padding: 2px 1px;
+
+    @include mobile() {
+      display: block;
+    }
+  }
+
+  .site-title {
+    font-weight: bolder;
+  }
+}
+
+.logo-line {
+  background: var(--brand-color);
+  display: block;
+  height: 2px;
+  margin: 0 auto;
+  width: 75%;
+
+  @include mobile() {
+    display: none;
+  }
+}
+
+.use-motion {
+  .logo-line:first-of-type {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+
+  .logo-line:last-of-type {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}
+
+.site-subtitle {
+  display: none;
+}

assets/css/_schemes/Mist/_layout.scss

@@ -0,0 +1,43 @@
+// Tags
+// --------------------------------------------------
+hr {
+  height: 2px;
+  margin: 20px 0;
+}
+
+// Components
+// --------------------------------------------------
+.btn {
+  padding: 0 10px;
+}
+
+.headband {
+  display: none;
+}
+
+// Pagination
+// --------------------------------------------------
+.pagination {
+  text-align: left;
+
+  @include mobile() {
+    margin: 80px 0 0;
+    text-align: center;
+  }
+}
+
+// Footer
+// --------------------------------------------------
+.footer {
+  background: var(--content-bg-color);
+  color: var(--text-color);
+  padding: 10px 0;
+}
+
+.footer-inner {
+  text-align: left;
+
+  @include mobile() {
+    text-align: center;
+  }
+}

assets/css/_schemes/Mist/_menu.scss

@@ -0,0 +1,45 @@
+// Menu
+// --------------------------------------------------
+.site-nav {
+  flex-grow: 1;
+
+  @include mobile() {
+    padding: 0 10px 0;
+  }
+}
+
+.main-menu {
+  @include mobile() {
+    padding-top: 10px;
+  }
+}
+
+.menu {
+  padding: 0;
+
+  .menu-item {
+    margin: 0;
+
+    @include mobile() {
+      margin-top: 5px;
+    }
+
+    a {
+      border-radius: 2px;
+      padding: 0 10px;
+      transition-property: background;
+
+      @include mobile() {
+        text-align: left;
+      }
+    }
+
+    .badge {
+      background: white;
+      border-radius: 10px;
+      color: $black-light;
+      padding: 1px 4px;
+      text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+    }
+  }
+}

assets/css/_schemes/Mist/_posts-expand.scss

@@ -0,0 +1,72 @@
+// Post Expand
+// --------------------------------------------------
+.posts-expand {
+  &.index {
+    .post-header {
+      text-align: left;
+
+      @include mobile() {
+        text-align: center;
+      }
+    }
+
+    .post-meta-container {
+      margin-top: 5px;
+    }
+
+    .post-meta {
+      justify-content: flex-start;
+
+      @include mobile() {
+        justify-content: center;
+      }
+    }
+  }
+
+  .post-eof {
+    display: none;
+  }
+
+  .post-block:not(:first-of-type) {
+    margin-top: 120px;
+  }
+
+  .post-header {
+    margin-bottom: 20px;
+  }
+
+  .post-tags {
+    text-align: left;
+
+    a {
+      background: var(--content-bg-color);
+      border-bottom: 0;
+      padding: 1px 5px;
+
+      &:hover {
+        background: var(--menu-item-bg-color);
+      }
+    }
+  }
+
+  .post-nav {
+    margin-top: 40px;
+  }
+}
+
+.post-button {
+  margin-top: 20px;
+  text-align: left;
+
+  .btn {
+    background: none;
+    border: 0;
+    border-bottom: 2px solid var(--btn-default-border-color);
+    padding: 0;
+    transition-property: border;
+
+    &:hover {
+      border-bottom-color: var(--btn-default-hover-border-color);
+    }
+  }
+}

assets/css/_schemes/Mist/index.scss

@@ -0,0 +1,10 @@
+//
+// Mist scheme
+// ==================================================
+@import '_layout';
+@import '_header';
+@import '_menu';
+@import '_posts-expand';
+@import '../Muse/_layout';
+@import '../Muse/_sidebar';
+@import '../Muse/_sub-menu';

assets/css/_schemes/Muse/_header.scss

@@ -0,0 +1,18 @@
+.custom-logo-image {
+  background: white;
+  margin: 0 auto 10px;
+  max-width: 150px;
+  padding: 5px;
+}
+
+.brand {
+  background: var(--btn-default-bg);
+}
+
+.header-inner {
+  padding-top: 100px;
+
+  @include mobile() {
+    padding-top: 50px;
+  }
+}

assets/css/_schemes/Muse/_layout.scss

@@ -0,0 +1,28 @@
+.main-inner {
+  @include main-container();
+
+  @include mobile() {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.header-inner, .main-inner, .footer-inner {
+  @include mobile() {
+    width: auto;
+  }
+}
+
+// Page - Container
+// --------------------------------------------------
+.main-inner {
+  padding-bottom: $content-padding-bottom;
+}
+
+.post-block:first-of-type {
+  padding-top: $posts-first-padding;
+
+  @include mobile() {
+    padding-top: $posts-first-padding-mobile;
+  }
+}

assets/css/_schemes/Muse/_menu.scss

@@ -0,0 +1,56 @@
+.site-nav {
+  @include mobile() {
+    padding-top: 30px;
+  }
+}
+
+.main-menu {
+  @include mobile() {
+    border-bottom: 1px solid $grey-lighter;
+    border-top: 1px solid $grey-lighter;
+  }
+}
+
+.menu {
+  @include mobile() {
+    text-align: left;
+  }
+}
+
+.menu .menu-item {
+  @include mobile() {
+    margin: 0 10px;
+  }
+
+  a {
+    border-bottom: 1px solid transparent;
+
+    @include mobile() {
+      padding: 5px 10px;
+    }
+
+    &:hover, &.menu-item-active {
+      background: transparent;
+      border-bottom: 1px solid var(--link-hover-color);
+
+      @include mobile() {
+        border-bottom: 1px dotted $grey-lighter;
+      }
+    }
+  }
+
+  .fa, .fab, .far, .fas {
+    @include tablet-desktop() {
+      display: block;
+      line-height: 2;
+      margin-right: 0;
+      width: 100%;
+    }
+  }
+
+  .badge {
+    background: $gainsboro;
+    color: $black-light;
+    padding: 1px 4px;
+  }
+}

assets/css/_schemes/Muse/_sidebar.scss

@@ -0,0 +1,94 @@
+@if hexo-config('sidebar.position') == 'right' {
+  .sidebar-active {
+    @include desktop() {
+      padding-right: $sidebar-desktop;
+    }
+  }
+
+  .sidebar {
+    right: 0 - $sidebar-desktop;
+
+    .sidebar-active & {
+      right: 0;
+    }
+  }
+} @else {
+  .sidebar-active {
+    @include desktop() {
+      padding-left: $sidebar-desktop;
+    }
+  }
+
+  .sidebar {
+    left: 0 - $sidebar-desktop;
+
+    .sidebar-active & {
+      left: 0;
+    }
+  }
+}
+
+.sidebar {
+  background: $black-deep;
+  bottom: 0;
+  @if not hexo-config('back2top.sidebar') {
+    box-shadow: inset 0 2px 6px black;
+  }
+  position: fixed;
+  top: 0;
+  transition: all $transition-ease-out;
+  width: $sidebar-desktop;
+  z-index: $zindex-2;
+
+  a {
+    border-bottom-color: $black-light;
+    color: $grey-dark;
+
+    &:hover {
+      border-bottom-color: $gainsboro;
+      color: $gainsboro;
+    }
+  }
+}
+
+.links-of-author {
+  &:not(:first-child) {
+    margin-top: 15px;
+  }
+
+  a {
+    border-bottom-color: $black-light;
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
+
+    @if hexo-config('social_icons.transition') {
+      transition: all $transition-ease;
+    }
+
+    &::before {
+      background: rgb(random(255), random(255), random(255));
+      display: inline-block;
+      margin-right: 3px;
+      transform: translateY(-2px);
+      @include round-icon(4px);
+    }
+  }
+}
+
+.links-of-blogroll-item {
+  @if hexo-config('links_settings.layout') == 'inline' {
+    display: inline-block;
+  }
+  padding: 2px 10px;
+
+  a {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

assets/css/_schemes/Muse/_sub-menu.scss

@@ -0,0 +1,7 @@
+.sub-menu {
+  margin: 10px 0;
+
+  .menu-item {
+    display: inline-block;
+  }
+}

assets/css/_schemes/Muse/index.scss

@@ -0,0 +1,5 @@
+@import '_layout';
+@import '_header';
+@import '_menu';
+@import '_sub-menu';
+@import '_sidebar';

assets/css/_schemes/Pisces/_header.scss

@@ -0,0 +1,35 @@
+.site-brand-container {
+  background: var(--theme-color);
+
+  .site-nav-on & {
+    @include tablet-mobile() {
+      box-shadow: 0 0 16px rgba(0, 0, 0, .5);
+    }
+  }
+}
+
+.site-meta {
+  padding: 20px 0;
+}
+
+.brand {
+  padding: 0;
+}
+
+.site-subtitle {
+  margin: 10px 10px 0;
+}
+
+.site-nav-toggle, .site-nav-right {
+  @include tablet() {
+    @include flex-column();
+  }
+
+  .toggle {
+    color: white;
+
+    .toggle-line {
+      background: white;
+    }
+  }
+}

assets/css/_schemes/Pisces/_layout.scss

@@ -0,0 +1,54 @@
+.header-inner {
+  background: var(--content-bg-color);
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
+  width: $sidebar-desktop;
+
+  @include tablet-mobile() {
+    border-radius: initial;
+    width: auto;
+  }
+}
+
+.main {
+  // Make sure that .header and .main-inner are the same height
+  // Required for .sidebar `position: sticky;`
+  align-items: stretch;
+  display: flex;
+  justify-content: space-between;
+  @include main-container();
+
+  @if hexo-config('sidebar.position') == 'right' {
+    flex-direction: row-reverse;
+  }
+
+  @include tablet-mobile() {
+    display: block;
+    width: auto;
+  }
+}
+
+.main-inner {
+  border-radius: $border-radius-inner;
+  box-sizing: border-box;
+  width: $content-wrap;
+
+  @include tablet-mobile() {
+    border-radius: initial;
+    width: 100%;
+  }
+}
+
+.footer-inner {
+  @if hexo-config('sidebar.position') == 'right' {
+    padding-right: $sidebar-desktop + $sidebar-offset;
+  } @else {
+    padding-left: $sidebar-desktop + $sidebar-offset;
+  }
+
+  @include tablet-mobile() {
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
+  }
+}

assets/css/_schemes/Pisces/_menu.scss

@@ -0,0 +1,46 @@
+.site-nav {
+  @include tablet() {
+    @include site-nav-hide-by-default();
+  }
+}
+
+.menu .menu-item {
+  display: block;
+  margin: 0;
+
+  a {
+    padding: 5px 20px;
+    position: relative;
+    text-align: left;
+    transition-property: background-color;
+  }
+
+  @include tablet-mobile() {
+    &.menu-item-search {
+      display: none;
+    }
+  }
+
+  .badge {
+    background: $grey-light;
+    border-radius: 10px;
+    color: var(--content-bg-color);
+    float: right;
+    padding: 2px 5px;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+}
+
+@if not hexo-config('menu_settings.badges') {
+  .main-menu .menu-item-active::after {
+    background: $grey;
+    border-radius: 50%;
+    content: ' ';
+    height: 6px;
+    margin-top: -3px;
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    width: 6px;
+  }
+}

assets/css/_schemes/Pisces/_sidebar.scss

@@ -0,0 +1,92 @@
+.sidebar {
+  margin-top: $sidebar-offset;
+  // https://caniuse.com/css-sticky
+  position: -webkit-sticky;
+  position: sticky;
+  top: $sidebar-offset;
+  width: $sidebar-desktop;
+
+  @include tablet-mobile() {
+    display: none;
+  }
+
+  @if hexo-config('motion.enable') and hexo-config('motion.transition.sidebar') {
+    visibility: hidden;
+  }
+}
+
+.sidebar-toggle {
+  display: none;
+}
+
+.sidebar-inner {
+  background: var(--content-bg-color);
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  box-sizing: border-box;
+  color: var(--text-color);
+}
+
+.site-state-item {
+  padding: 0 10px;
+}
+
+.sidebar .sidebar-button {
+  border-bottom: 1px dotted $grey-light;
+  border-top: 1px dotted $grey-light;
+
+  button {
+    border: 0;
+    color: $orange;
+    display: block;
+    width: 100%;
+
+    &:hover {
+      background: none;
+      border: 0;
+      color: darken($orange, 20%);
+    }
+  }
+}
+
+.links-of-author {
+  @include flex-wrap();
+}
+
+.links-of-author-item {
+  @include sidebar-inline-links-item();
+
+  @if not hexo-config('social_icons.icons_only') {
+    width: 50%;
+  }
+
+  a {
+    border-bottom: 0;
+    border-radius: 4px;
+    display: block;
+
+    &:hover {
+      background: var(--body-bg-color);
+    }
+  }
+}
+
+.links-of-blogroll-item {
+  @if hexo-config('links_settings.layout') == 'inline' {
+    display: inline-block;
+    max-width: 100%;
+    @include sidebar-inline-links-item();
+  }
+}
+
+@if hexo-config('back2top.sidebar') {
+  // Only when back2top.sidebar is true, apply the following styles
+  .back-to-top {
+    background: var(--body-bg-color);
+    margin: 8px - $sidebar-offset -10px -18px;
+
+    &.back-to-top-on {
+      margin-top: 16px;
+    }
+  }
+}

assets/css/_schemes/Pisces/_sub-menu.scss

@@ -0,0 +1,28 @@
+.sub-menu {
+  margin: 0;
+  padding: 6px 0;
+
+  .menu-item {
+    display: inline-block;
+
+    a {
+      background: transparent;
+      margin: 5px 10px;
+      padding: initial;
+
+      &:hover {
+        background: transparent;
+        color: $sidebar-highlight;
+      }
+    }
+  }
+
+  .menu-item-active {
+    border-bottom-color: $sidebar-highlight;
+    color: $sidebar-highlight;
+
+    &:hover {
+      border-bottom-color: $sidebar-highlight;
+    }
+  }
+}

assets/css/_schemes/Pisces/index.scss

@@ -0,0 +1,30 @@
+@import '_layout';
+@import '_header';
+@import '_menu';
+@import '_sub-menu';
+@import '_sidebar';
+
+.main-inner {
+  background: var(--content-bg-color);
+  box-shadow: $box-shadow-inner;
+  padding: $content-desktop-padding;
+
+  @include tablet-mobile() {
+    padding: 20px;
+  }
+}
+
+// Sub-menu(s).
+.sub-menu {
+  border-bottom: 1px solid $table-border-color;
+}
+
+.post-block:first-of-type {
+  padding-top: 40px;
+}
+
+.pagination {
+  @include mobile() {
+    margin-bottom: 10px;
+  }
+}

assets/css/_variables/Gemini.scss

@@ -0,0 +1,18 @@
+// Variables of Gemini scheme
+// ==================================================
+
+@import 'Pisces';
+
+// Settings for some of the most global styles.
+// --------------------------------------------------
+$body-bg-color           : #eee;
+
+// Borders.
+// --------------------------------------------------
+$box-shadow-inner        : 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12);
+$box-shadow              : 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09);
+
+$border-radius-inner     : initial;
+$border-radius           : initial;
+// $border-radius-inner     : 0 0 3px 3px;
+// $border-radius           : 3px;

assets/css/_variables/Mist.scss

@@ -0,0 +1,25 @@
+// Variables of Mist scheme
+// ==================================================
+
+@import 'Muse';
+
+$content-padding-bottom     : 80px;
+$posts-first-padding        : 80px;
+$posts-first-padding-mobile : 60px;
+
+$link-decoration-color   : $grey-light;
+$content-bg-color        : $whitesmoke;
+$menu-item-bg-color      : $grey-lighter;
+
+$head-bg                 : var(--content-bg-color);
+$brand-color             : $black-deep;
+$brand-hover-color       : $brand-color;
+
+$posts-collapse-left     : 0;
+
+$btn-default-bg                 : transparent;
+$btn-default-color              : var(--link-color);
+$btn-default-hover-bg           : transparent;
+$btn-default-border-color       : var(--link-color);
+$btn-default-hover-color        : var(--link-hover-color);
+$btn-default-hover-border-color : var(--link-hover-color);

assets/css/_variables/Muse.scss

@@ -0,0 +1,9 @@
+// Variables of Muse scheme
+// ==================================================
+
+$sidebar-width           : if(type-of(hexo-config('sidebar.width')) == number, hexo-config('sidebar.width'), 320);
+$sidebar-desktop         : $sidebar-width * 1px;
+
+$content-padding-bottom     : 60px;
+$posts-first-padding        : 70px;
+$posts-first-padding-mobile : 35px;

assets/css/_variables/Pisces.scss

@@ -0,0 +1,68 @@
+// Variables of Pisces scheme
+// ==================================================
+
+// Settings for some of the most global styles.
+// --------------------------------------------------
+$body-bg-color                : #f5f7f9;
+
+$sidebar-width                : if(type-of(hexo-config('sidebar.width')) == number, hexo-config('sidebar.width'), 240);
+$sidebar-desktop              : $sidebar-width * 1px;
+$content-wrap                 : calc(100% - #{$sidebar-width + $sidebar-offset});
+
+$content-desktop              : calc(100% - #{$content-desktop-padding / 2});
+$content-desktop-large        : 1160px;
+$content-desktop-largest      : 73%;
+
+
+// Borders
+// --------------------------------------------------
+$box-shadow-inner                 : initial;
+$box-shadow                       : initial;
+
+$border-radius-inner              : initial;
+$border-radius                    : initial;
+
+
+// Header
+// --------------------------------------------------
+$subtitle-color                   : $grey-lighter;
+
+// Sidebar
+// --------------------------------------------------
+$sidebar-nav-color                : var(--text-color);
+$sidebar-nav-hover-color          : $orange;
+$sidebar-highlight                : $orange;
+
+$site-author-image-width          : 120px;
+$site-author-image-border-width   : 1px;
+$site-author-image-border-color   : $gainsboro;
+
+$site-author-name-margin          : 0;
+$site-author-name-color           : var(--text-color);
+$site-author-name-weight          : 600;
+
+$site-description-font-size       : $font-size-smaller;
+$site-description-color           : $grey-dark;
+$site-description-margin-top      : 0;
+
+$site-state-item-count-font-size  : $font-size-medium;
+$site-state-item-name-font-size   : $font-size-smaller;
+$site-state-item-name-color       : $grey-dark;
+
+
+// Components
+// --------------------------------------------------
+
+// Button
+$btn-default-radius           : 2px;
+$btn-default-bg               : white;
+$btn-default-color            : $text-color;
+$btn-default-border-color     : $text-color;
+$btn-default-hover-bg         : $black-deep;
+$btn-default-hover-color      : white;
+
+// Back to top
+$b2t-opacity                  : .6;
+$b2t-opacity-hover            : .8;
+$b2t-position-bottom          : -100px;
+$b2t-position-bottom-on       : 30px;

assets/css/_variables/base.scss

@@ -0,0 +1,394 @@
+@use 'sass:map';
+
+//
+// Variables
+// ==================================================
+
+
+// Color system
+// --------------------------------------------------
+$whitesmoke   : #f5f5f5;
+$gainsboro    : #eee;
+$grey-lighter : #ddd;
+$grey-light   : #ccc;
+$grey         : #bbb;
+$grey-dark    : #999;
+$grey-dim     : #666;
+$black-light  : #555;
+$black-dim    : #333;
+$black-deep   : #222;
+$red          : #ff2a2a;
+$blue-bright  : #87daff;
+$blue         : #0684bd;
+$blue-deep    : #262a30;
+$orange       : #fc6423;
+
+
+// Transition
+// --------------------------------------------------
+$transition-ease     : .2s ease-in-out;
+$transition-ease-in  : .2s ease-in;
+$transition-ease-out : .2s ease-out;
+
+
+// Scaffolding
+// Settings for some of the most global styles.
+// --------------------------------------------------
+// Global text color on <body>
+$text-color                   : $black-light;
+$text-color-dark              : $grey-light;
+
+// Global link color.
+$link-color                   : $black-light;
+$link-color-dark              : $grey-light;
+$link-hover-color             : $black-deep;
+$link-hover-color-dark        : $gainsboro;
+$link-decoration-color        : $grey-dark;
+
+$blockquote-color             : $grey-dim;
+$blockquote-color-dark        : $grey;
+
+// Global border color.
+$border-color                 : $grey-light;
+
+// Background color for <body>
+$body-bg-color                : white;
+$body-bg-color-dark           : #282828;
+$content-bg-color             : white;
+$content-bg-color-dark        : $black-dim;
+
+// Selection
+$selection-bg                 : $blue-deep;
+$selection-color              : $gainsboro;
+
+// Dark mode color
+$card-bg-color                : $whitesmoke;
+$card-bg-color-dark           : $black-light;
+
+$menu-item-bg-color           : $whitesmoke;
+$menu-item-bg-color-dark      : $black-light;
+
+$theme-color                  = convert(hexo-config('theme_color.light'));
+$theme-color-dark             = convert(hexo-config('theme_color.dark'));
+
+// Typography
+// Font, line-height, and elements colors.
+// --------------------------------------------------
+@function get-font-family($config) {
+  $custom-family : hexo-config('font.' + $config + '.family');
+  @return if(type-of($custom-family) == string, unquote($custom-family), null);
+}
+
+// Font families.
+$font-family-chinese      : 'PingFang SC', 'Microsoft YaHei';
+
+$font-family-base         : $font-family-chinese, sans-serif;
+@if get-font-family('global') {
+  $font-family-base       : join(get-font-family('global'), $font-family-base);
+}
+
+$font-family-logo         : $font-family-base;
+@if get-font-family('title') {
+  $font-family-logo       : join(get-font-family('title'), $font-family-logo);
+}
+
+$font-family-headings     : $font-family-base;
+@if get-font-family('headings') {
+  $font-family-headings   : join(get-font-family('headings'), $font-family-headings);
+}
+
+$font-family-posts        : $font-family-base;
+@if get-font-family('posts') {
+  $font-family-posts      : join(get-font-family('posts'), $font-family-posts);
+}
+
+$font-family-monospace    : consolas, Menlo, monospace, $font-family-chinese;
+@if get-font-family('codes') {
+  $font-family-monospace  : join(get-font-family('codes'), $font-family-monospace);
+}
+
+
+// Font size
+$font-size-base           : if((hexo-config('font.enable') and type-of(hexo-config('font.global.size')) == number), hexo-config('font.global.size') * 1em, 1em);
+$font-size-smallest       : .75em;
+$font-size-smaller        : .8125em;
+$font-size-small          : .875em;
+$font-size-medium         : 1em;
+$font-size-large          : 1.125em;
+$font-size-larger         : 1.25em;
+$font-size-largest        : 1.5em;
+
+
+// Headings font size
+$font-size-headings-step  : .125em;
+$font-size-headings-base  : if((hexo-config('font.enable') and type-of(hexo-config('font.headings.size')) == number), hexo-config('font.headings.size') * 1em, 1.625em);
+
+
+// Global line height
+$line-height-base         : 2;
+$line-height-code-block   : 1.6; // Can't be less than 1.3;
+
+
+// Z-index master list
+// --------------------------------------------------
+// Fix issue https://github.com/next-theme/theme-next-docs/issues/54
+$zindex-0       : 5;
+$zindex-1       : 10;
+$zindex-2       : 20;
+$zindex-3       : 30;
+$zindex-4       : 40;
+$zindex-5       : 50;
+
+
+// Table
+// --------------------------------------------------
+$table-border-color             : $grey-lighter;
+$table-font-size                : $font-size-small;
+$table-cell-border-bottom-color : $grey-lighter;
+$table-row-odd-bg-color         : #f9f9f9;
+$table-row-odd-bg-color-dark    : #282828;
+$table-row-hover-bg-color       : $whitesmoke;
+$table-row-hover-bg-color-dark  : #363636;
+
+
+// Code & Code Blocks
+// --------------------------------------------------
+$code-font-family               : $font-family-monospace;
+
+$highlight-background        : hexo-config('highlight.light.background');
+$highlight-foreground        : hexo-config('highlight.light.foreground');
+$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
+$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
+
+$highlight-background-dark        : hexo-config('highlight.dark.background');
+$highlight-foreground-dark        : hexo-config('highlight.dark.foreground');
+$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
+$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
+
+
+// Buttons
+// --------------------------------------------------
+$btn-default-radius                    : 0;
+$btn-default-bg                        : $black-deep;
+$btn-default-bg-dark                   : $black-deep;
+$btn-default-color                     : white;
+$btn-default-color-dark                : $text-color-dark;
+$btn-default-border-color              : $black-deep;
+$btn-default-border-color-dark         : $black-light;
+$btn-default-hover-bg                  : white;
+$btn-default-hover-bg-dark             : $grey-dim;
+$btn-default-hover-color               : $black-deep;
+$btn-default-hover-color-dark          : $text-color-dark;
+$btn-default-hover-border-color        : $black-deep;
+$btn-default-hover-border-color-dark   : $grey-dim;
+
+
+// Pagination
+// --------------------------------------------------
+$pagination-border              : $gainsboro;
+
+$pagination-link-bg             : transparent;
+$pagination-link-color          : $link-color;
+$pagination-link-border         : $gainsboro;
+
+$pagination-link-hover-bg       : transparent;
+$pagination-link-hover-color    : $link-color;
+$pagination-link-hover-border   : var(--link-hover-color);
+
+$pagination-active-bg           : $grey-light;
+$pagination-active-color        : var(--content-bg-color);
+$pagination-active-border       : $grey-light;
+
+
+// Layout sizes
+// --------------------------------------------------
+$content-desktop                : 700px;
+$content-desktop-large          : 800px;
+$content-desktop-largest        : 900px;
+
+$content-desktop-padding        : 40px;
+$content-tablet-padding         : 10px;
+$content-mobile-padding         : 8px;
+
+
+// Headband
+// --------------------------------------------------
+$headband-height                : 3px;
+$headband-bg                    : var(--theme-color);
+
+
+// Section Header
+// Variables for header section elements.
+// --------------------------------------------------
+$head-bg                        : transparent;
+
+// Site Meta
+$brand-color                    : white;
+$brand-hover-color              : white;
+$brand-color-dark               : $grey-lighter;
+$brand-hover-color-dark         : $grey-lighter;
+
+$font-size-title                : if((hexo-config('font.enable') and type-of(hexo-config('font.title.size')) == number), hexo-config('font.title.size') * 1em, 1.375em);
+$font-size-subtitle             : $font-size-smaller;
+$subtitle-color                 : $grey-dark;
+$site-subtitle-color            : $grey-dark;
+
+
+// Posts Collpase
+// --------------------------------------------------
+$posts-collapse-margin          : 35px;
+$posts-collapse-margin-mobile   : 0;
+
+
+// Tag Cloud
+// --------------------------------------------------
+$tag-cloud-start      : #aaa;
+$tag-cloud-end        : #111;
+$tag-cloud-start-dark : #555;
+$tag-cloud-end-dark   : #eee;
+
+
+// Sidebar
+// Variables for sidebar section elements.
+// --------------------------------------------------
+
+$sidebar-padding                      : if(type-of(hexo-config('sidebar.padding')) == number, hexo-config('sidebar.padding') * 1px, 18px);
+$sidebar-offset                       : if(type-of(hexo-config('sidebar.offset')) == number, hexo-config('sidebar.offset') * 1px, 12px);
+$sidebar-nav-color                    : $grey-dim;
+$sidebar-nav-hover-color              : $whitesmoke;
+$sidebar-highlight                    : $blue-bright;
+
+$site-author-image-width              : 96px;
+$site-author-image-border-width       : 2px;
+$site-author-image-border-color       : $black-dim;
+
+$site-author-name-margin              : 5px 0 0;
+$site-author-name-color               : $whitesmoke;
+$site-author-name-weight              : normal;
+
+$site-description-font-size           : $font-size-medium;
+$site-description-color               : $grey-dark;
+$site-description-margin-top          : 5px;
+
+$site-state-item-count-font-size      : $font-size-larger;
+$site-state-item-name-font-size       : $font-size-small;
+$site-state-item-name-color           : inherit;
+
+
+// Components
+// --------------------------------------------------
+// Back to top
+$b2t-opacity                  : .8;
+$b2t-opacity-hover            : 1;
+$b2t-position-bottom          : -100px;
+$b2t-position-bottom-on       : 19px;
+$b2t-position-right           : 30px;
+$b2t-position-right-mobile    : 20px;
+$b2t-font-size                : 12px;
+$b2t-color                    : white;
+$b2t-bg-color                 : $black-deep;
+
+//  .post-expand .post-eof
+//  In Muse scheme, margin above and below the post separator
+$post-eof-margin-top          : 80px; //  or 160px for more white space;
+$post-eof-margin-bottom       : 60px; //  or 120px for less white space;
+
+$post-card-margin             : 1em 0 0;
+
+
+// Note colors
+// --------------------------------------------------
+// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
+$lbg : if(type-of(hexo-config('note.light_bg_offset')) == number, hexo-config('note.light_bg_offset') * 1%, 0);
+$note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
+
+$note-border-radius : 3px;
+
+$note-border : (
+  'default' : #777,
+  'primary' : #6f42c1,
+  'info'    : #428bca,
+  'success' : #5cb85c,
+  'warning' : #f0ad4e,
+  'danger'  : #d9534f
+);
+
+$note-bg : (
+  'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 94% + $lbg),
+  'primary' : lighten(adjust-hue(map.get($note-border, 'primary'), 10), 92% + $lbg),
+  'info'    : lighten(adjust-hue(map.get($note-border, 'info'), -10), 91% + $lbg),
+  'success' : lighten(adjust-hue(map.get($note-border, 'success'), 10), 90% + $lbg),
+  'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 88% + $lbg),
+  'danger'  : lighten(adjust-hue(map.get($note-border, 'danger'), -10), 92% + $lbg)
+);
+
+$note-text : (
+  'default' : map.get($note-border, 'default'),
+  'primary' : map.get($note-border, 'primary'),
+  'info'    : map.get($note-border, 'info'),
+  'success' : map.get($note-border, 'success'),
+  'warning' : map.get($note-border, 'warning'),
+  'danger'  : map.get($note-border, 'danger')
+);
+
+$note-icon : (
+  'default' : '\f0a9',
+  'primary' : '\f055',
+  'info'    : '\f05a',
+  'success' : '\f058',
+  'warning' : '\f06a',
+  'danger'  : '\f056'
+);
+
+$note-modern-border : (
+  'default' : #e1e1e1,
+  'primary' : #e1c2ff,
+  'info'    : #b3e5ef,
+  'success' : #d0e6be,
+  'warning' : #fae4cd,
+  'danger'  : #ebcdd2
+);
+
+$note-modern-bg : (
+  'default' : lighten(adjust-hue(map.get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
+  'primary' : lighten(adjust-hue(map.get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
+  'info'    : lighten(adjust-hue(map.get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
+  'success' : lighten(adjust-hue(map.get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
+  'warning' : lighten(adjust-hue(map.get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
+  'danger'  : lighten(adjust-hue(map.get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
+);
+
+$note-modern-text : (
+  'default' : $grey-dim,
+  'primary' : #6f42c1,
+  'info'    : #31708f,
+  'success' : #3c763d,
+  'warning' : #8a6d3b,
+  'danger'  : #a94442
+);
+
+$note-modern-hover : (
+  'default' : darken(adjust-hue(map.get($note-modern-text, 'default'), -10), 32%),
+  'primary' : darken(adjust-hue(map.get($note-modern-text, 'primary'), -10), 22%),
+  'info'    : darken(adjust-hue(map.get($note-modern-text, 'info'), -10), 32%),
+  'success' : darken(adjust-hue(map.get($note-modern-text, 'success'), -10), 27%),
+  'warning' : darken(adjust-hue(map.get($note-modern-text, 'warning'), -10), 18%),
+  'danger'  : darken(adjust-hue(map.get($note-modern-text, 'danger'), -10), 22%)
+);
+
+
+// Tabs border radius
+// --------------------------------------------------
+$tbr                        : 0;
+
+
+// Label colors
+// --------------------------------------------------
+$label : (
+  'default' : lighten(adjust-hue(map.get($note-border, 'default'), 0), 89% + $lbg),
+  'primary' : lighten(adjust-hue(map.get($note-border, 'primary'), 10), 87% + $lbg),
+  'info'    : lighten(adjust-hue(map.get($note-border, 'info'), -10), 86% + $lbg),
+  'success' : lighten(adjust-hue(map.get($note-border, 'success'), 10), 85% + $lbg),
+  'warning' : lighten(adjust-hue(map.get($note-border, 'warning'), 10), 83% + $lbg),
+  'danger'  : lighten(adjust-hue(map.get($note-border, 'danger'), -10), 87% + $lbg)
+);

assets/css/main.scss

@@ -0,0 +1,42 @@
+// CSS Style Guide: https://codeguide.co/#css
+
+
+//$scheme : if(hexo-config('scheme'), hexo-config('scheme'), 'Muse');
+
+
+// Variables Layer
+// --------------------------------------------------
+@import '_variables/base';
+@import '"_variables/" + theme.scheme';
+@import 'theme.injects.variable';
+
+// Mixins Layer
+// --------------------------------------------------
+@import '_mixins';
+@import 'theme.injects.mixin';
+
+// Dark mode colors
+// --------------------------------------------------
+@import '_colors';
+
+// Common Layer
+// --------------------------------------------------
+
+// Scaffolding
+@import '_common/scaffolding';
+
+// Layout
+@import '_common/outline';
+
+// Components
+@import '_common/components';
+
+
+// Schemes Layer
+// --------------------------------------------------
+@import '"_schemes/" + theme.scheme';
+
+
+// Custom Layer
+// --------------------------------------------------
+@import 'theme.injects.style';

assets/css/noscript.scss

@@ -0,0 +1,30 @@
+body { margin-top: 2rem; }
+
+.use-motion .menu-item,
+.use-motion .sidebar,
+.use-motion .post-block,
+.use-motion .pagination,
+.use-motion .comments,
+.use-motion .post-header,
+.use-motion .post-body,
+.use-motion .collection-header {
+  visibility: visible;
+}
+
+.use-motion header.header,
+.use-motion .site-brand-container .toggle,
+.use-motion .footer { opacity: initial; }
+
+.use-motion .site-title,
+.use-motion .site-subtitle,
+.use-motion .custom-logo-image {
+  opacity: initial;
+  top: initial;
+}
+
+.use-motion .logo-line {
+  transform: scaleX(1);
+}
+
+.search-pop-overlay, .sidebar-nav { display: none; }
+.sidebar-panel { display: block; }

assets/js/bookmark.js

@@ -0,0 +1,56 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+
+  const doSaveScroll = () => {
+    localStorage.setItem('bookmark' + location.pathname, window.scrollY);
+  };
+
+  const scrollToMark = () => {
+    let top = localStorage.getItem('bookmark' + location.pathname);
+    top = parseInt(top, 10);
+    // If the page opens with a specific hash, just jump out
+    if (!isNaN(top) && location.hash === '') {
+      // Auto scroll to the position
+      window.anime({
+        targets  : document.scrollingElement,
+        duration : 200,
+        easing   : 'linear',
+        scrollTop: top
+      });
+    }
+  };
+  // Register everything
+  const init = function(trigger) {
+    // Create a link element
+    const link = document.querySelector('.book-mark-link');
+    // Scroll event
+    window.addEventListener('scroll', () => link.classList.toggle('book-mark-link-fixed', window.scrollY === 0), { passive: true });
+    // Register beforeunload event when the trigger is auto
+    if (trigger === 'auto') {
+      // Register beforeunload event
+      window.addEventListener('beforeunload', doSaveScroll);
+      document.addEventListener('pjax:send', doSaveScroll);
+    }
+    // Save the position by clicking the icon
+    link.addEventListener('click', () => {
+      doSaveScroll();
+      window.anime({
+        targets : link,
+        duration: 200,
+        easing  : 'linear',
+        top     : -30,
+        complete: () => {
+          setTimeout(() => {
+            link.style.top = '';
+          }, 400);
+        }
+      });
+    });
+    scrollToMark();
+    document.addEventListener('pjax:success', scrollToMark);
+  };
+
+  init(CONFIG.bookmark.save);
+});

assets/js/comments-buttons.js

@@ -0,0 +1,25 @@
+/* global CONFIG */
+
+(function() {
+  const commentButton = document.querySelectorAll('.comment-button');
+  commentButton.forEach(element => {
+    const commentClass = element.classList[2];
+    element.addEventListener('click', () => {
+      commentButton.forEach(active => active.classList.toggle('active', active === element));
+      document.querySelectorAll('.comment-position').forEach(active => active.classList.toggle('active', active.classList.contains(commentClass)));
+      if (CONFIG.comments.storage) {
+        localStorage.setItem('comments_active', commentClass);
+      }
+    });
+  });
+  let { activeClass } = CONFIG.comments;
+  if (CONFIG.comments.storage) {
+    activeClass = localStorage.getItem('comments_active') || activeClass;
+  }
+  if (activeClass) {
+    const activeButton = document.querySelector(`.comment-button.${activeClass}`);
+    if (activeButton) {
+      activeButton.click();
+    }
+  }
+})();

assets/js/comments.js

@@ -0,0 +1,21 @@
+/* global CONFIG */
+
+window.addEventListener('tabs:register', () => {
+  let { activeClass } = CONFIG.comments;
+  if (CONFIG.comments.storage) {
+    activeClass = localStorage.getItem('comments_active') || activeClass;
+  }
+  if (activeClass) {
+    const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+    if (activeTab) {
+      activeTab.click();
+    }
+  }
+});
+if (CONFIG.comments.storage) {
+  window.addEventListener('tabs:click', event => {
+    if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+    const commentClass = event.target.classList[1];
+    localStorage.setItem('comments_active', commentClass);
+  });
+}

assets/js/config.js

@@ -0,0 +1,66 @@
+if (!window.NexT) window.NexT = {};
+
+(function() {
+  const className = 'next-config';
+
+  const staticConfig = {};
+  let variableConfig = {};
+
+  const parse = text => JSON.parse(text || '{}');
+
+  const update = name => {
+    const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
+    if (!targetEle) return;
+    const parsedConfig = parse(targetEle.text);
+    if (name === 'main') {
+      Object.assign(staticConfig, parsedConfig);
+    } else {
+      variableConfig[name] = parsedConfig;
+    }
+  };
+
+  update('main');
+
+  window.CONFIG = new Proxy({}, {
+    get(overrideConfig, name) {
+      let existing;
+      if (name in staticConfig) {
+        existing = staticConfig[name];
+      } else {
+        if (!(name in variableConfig)) update(name);
+        existing = variableConfig[name];
+      }
+
+      // For unset override and mixable existing
+      if (!(name in overrideConfig) && typeof existing === 'object') {
+        // Get ready to mix.
+        overrideConfig[name] = {};
+      }
+
+      if (name in overrideConfig) {
+        const override = overrideConfig[name];
+
+        // When mixable
+        if (typeof override === 'object' && typeof existing === 'object') {
+          // Mix, proxy changes to the override.
+          return new Proxy({ ...existing, ...override }, {
+            set(target, prop, value) {
+              target[prop] = value;
+              override[prop] = value;
+              return true;
+            }
+          });
+        }
+
+        return override;
+      }
+
+      // Only when not mixable and override hasn't been set.
+      return existing;
+    }
+  });
+
+  document.addEventListener('pjax:success', () => {
+    variableConfig = {};
+  });
+})();

assets/js/motion.js

@@ -0,0 +1,125 @@
+/* global NexT, CONFIG */
+
+NexT.motion = {};
+
+NexT.motion.integrator = {
+  queue: [],
+  init : function() {
+    this.queue = [];
+    return this;
+  },
+  add: function(fn) {
+    const sequence = fn();
+    if (CONFIG.motion.async) this.queue.push(sequence);
+    else this.queue = this.queue.concat(sequence);
+    return this;
+  },
+  bootstrap: function() {
+    if (!CONFIG.motion.async) this.queue = [this.queue];
+    this.queue.forEach(sequence => {
+      const timeline = window.anime.timeline({
+        duration: 200,
+        easing  : 'linear'
+      });
+      sequence.forEach(item => {
+        if (item.deltaT) timeline.add(item, item.deltaT);
+        else timeline.add(item);
+      });
+    });
+  }
+};
+
+NexT.motion.middleWares = {
+  header: function() {
+    const sequence = [];
+
+    function getMistLineSettings(targets) {
+      sequence.push({
+        targets,
+        scaleX  : [0, 1],
+        duration: 500,
+        deltaT  : '-=200'
+      });
+    }
+
+    function pushToSequence(targets, sequenceQueue = false) {
+      sequence.push({
+        targets,
+        opacity: 1,
+        top    : 0,
+        deltaT : sequenceQueue ? '-=200' : '-=0'
+      });
+    }
+
+    pushToSequence('header.header');
+    CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
+    CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
+    pushToSequence('.site-title');
+    pushToSequence('.site-brand-container .toggle', true);
+    pushToSequence('.site-subtitle');
+    (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
+
+    document.querySelectorAll('.menu-item').forEach(targets => {
+      sequence.push({
+        targets,
+        complete: () => targets.classList.add('animated', 'fadeInDown'),
+        deltaT  : '-=200'
+      });
+    });
+
+    return sequence;
+  },
+
+  subMenu: function() {
+    const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
+    if (subMenuItem.length > 0) {
+      subMenuItem.forEach(element => {
+        element.classList.add('animated');
+      });
+    }
+    return [];
+  },
+
+  postList: function() {
+    const sequence = [];
+    const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
+
+    function animate(animation, selector) {
+      if (!animation) return;
+      document.querySelectorAll(selector).forEach(targets => {
+        sequence.push({
+          targets,
+          complete: () => targets.classList.add('animated', animation),
+          deltaT  : '-=100'
+        });
+      });
+    }
+
+    animate(post_block, '.post-block, .pagination, .comments');
+    animate(coll_header, '.collection-header');
+    animate(post_header, '.post-header');
+    animate(post_body, '.post-body');
+
+    return sequence;
+  },
+
+  sidebar: function() {
+    const sidebar = document.querySelector('.sidebar');
+    const sidebarTransition = CONFIG.motion.transition.sidebar;
+    // Only for Pisces | Gemini.
+    if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+      return [{
+        targets : sidebar,
+        complete: () => sidebar.classList.add('animated', sidebarTransition)
+      }];
+    }
+    return [];
+  },
+
+  footer: function() {
+    return [{
+      targets: document.querySelector('.footer'),
+      opacity: 1
+    }];
+  }
+};