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

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;
+  }
+}