💄 Finished the common style settings.

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: $cfg_footer_icon_color;
+  display: inline-block;
+  margin: 0 5px;
+
+  @if $cfg_footer_icon_animated {
+    animation: icon-animate 1.33s ease-in-out infinite;
+  }
+}
+
+@if $cfg_footer_beian_enable {
+  .beian img {
+    display: inline-block;
+    margin: 0 3px;
+    vertical-align: middle;
+  }
+}
+
+@if $cfg_busuanzi_enable {
+  .busuanzi-count {
+    @if $cfg_busuanzi_visitors {
+      #busuanzi_container_site_uv {
+        display: none;
+      }
+    }
+
+    @if $cfg_busuanzi_views {
+      #busuanzi_container_site_pv {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+@if $cfg_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($cfg_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 $cfg_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 $cfg_local_search_enable or $cfg_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 $cfg_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 $cfg_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 $cfg_social_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 $cfg_avatar_rounded {
+    border-radius: 50%;
+  }
+
+  @if $cfg_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 $cfg_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 $cfg_toc_wrap {
+        white-space: nowrap;
+      }
+    }
+
+    .nav {
+      .nav-child {
+        display: if($cfg_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($cfg_sidebar_position);
+  }
+}
+
+.sidebar-active .sidebar-toggle {
+  @include toggle-close($cfg_sidebar_position);
+}

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

@@ -0,0 +1,28 @@
+@if $cfg_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 $cfg_bd_scrollbar_overlay {
+    overflow-x: hidden;
+    @supports (overflow-x: clip) {
+      overflow-x: clip;
+    }
+    width: 100vw;
+  }
+
+  @if $cfg_bd_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 $cfg_codeblock_copy_btn_style == 'flat' {
+    background: white;
+    border: 0;
+    font-size: $font-size-smaller;
+    right: 0;
+    top: 0;
+  } @else if $cfg_codeblock_copy_btn_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 $cfg_codeblock_copy_btn_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,141 @@
+// Use `@use` to fix issue #67
+// TODO Not understand how to import dymatic variable
+// @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 $cfg_mermaid_enable {
+  .mermaid {
+    margin-bottom: 20px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,114 @@
+//@use 'sass:map';
+
+@if $cfg_note_style != 'disabled' {
+  .post-body .note {
+    $note-icons : $cfg_note_icons;
+    $note-style : $cfg_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 $cfg_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 $cfg_pdf_enable {
+  .pdfobject-container {
+    iframe, embed {
+      height: convert($cfg_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 $cfg_tabs_trans_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 $cfg_tabs_trans_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($cfg_sidebar_position);
+}
+
+.toggle.toggle-close {
+  @include toggle-close($cfg_sidebar_position);
+}