2025-2-26-fixed

themes/next/source/css/_colors.styl

@@ -0,0 +1,53 @@
+:root {
+  --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;
+  --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;
+}
+
+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;
+      --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;
+    }
+
+    img {
+      opacity: .75;
+
+      &:hover {
+        opacity: .9;
+      }
+    }
+  }
+}

themes/next/source/css/_common/components/back-to-top-sidebar.styl

@@ -0,0 +1,20 @@
+.back-to-top {
+  background: transparent;
+  margin: 20px - $sidebar-offset -10px -20px;
+  opacity: 0;
+
+  if (!hexo-config('back2top.scrollpercent')) {
+    span {
+      display: none;
+    }
+  }
+
+  &.back-to-top-on {
+    cursor: pointer;
+    opacity: $b2t-opacity;
+
+    &:hover {
+      opacity: $b2t-opacity-hover;
+    }
+  }
+}

themes/next/source/css/_common/components/back-to-top.styl

@@ -0,0 +1,36 @@
+.back-to-top {
+  background: $b2t-bg-color;
+  bottom: $b2t-position-bottom;
+  box-sizing: border-box;
+  color: $b2t-color;
+  cursor: pointer;
+  left: $b2t-position-right;
+  opacity: $b2t-opacity;
+  padding: 0 6px;
+  position: fixed;
+  transition-property: bottom;
+  z-index: $zindex-3;
+
+  if (hexo-config('back2top.scrollpercent')) {
+    width: initial;
+  } else {
+    width: 24px;
+
+    span {
+      display: none;
+    }
+  }
+
+  &:hover {
+    color: $sidebar-highlight;
+  }
+
+  &.back-to-top-on {
+    bottom: $b2t-position-bottom-on;
+  }
+
+  +tablet-mobile() {
+    left: $b2t-position-right-mobile;
+    opacity: $b2t-opacity-hover;
+  }
+}

themes/next/source/css/_common/components/components.styl

@@ -0,0 +1,15 @@
+if (hexo-config('back2top.enable')) {
+  .back-to-top {
+    font-size: $b2t-font-size;
+    text-align: center;
+    the-transition();
+  }
+
+  @import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top');
+}
+
+@import 'reading-progress' if (hexo-config('reading_progress.enable'));
+
+@import 'post';
+@import 'pages';
+@import 'third-party';

themes/next/source/css/_common/components/pages/breadcrumb.styl

@@ -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 + li::before {
+    content: '/\00a0';
+    font-weight: normal;
+    padding: .5em;
+  }
+
+  li + li:last-child {
+    font-weight: bold;
+  }
+}

themes/next/source/css/_common/components/pages/categories.styl

@@ -0,0 +1,37 @@
+.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: ' (';
+      display: inline;
+    }
+
+    &::after {
+      content: ') ';
+      display: inline;
+    }
+  }
+
+  .category-list-child {
+    padding-left: 10px;
+  }
+}

themes/next/source/css/_common/components/pages/pages.styl

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

themes/next/source/css/_common/components/pages/schedule.styl

@@ -0,0 +1,104 @@
+@keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.8);
+  }
+}
+
+.event-list {
+  padding: 0;
+
+  hr {
+    background: $black-deep;
+    margin: 20px 0 45px 0;
+
+    &::after {
+      background: $black-deep;
+      color: white;
+      content: 'NOW';
+      display: inline-block;
+      font-weight: bold;
+      padding: 0 5px;
+      text-align: right;
+    }
+  }
+
+  .event {
+    background: $black-deep;
+    margin: 20px 0;
+    min-height: 40px;
+    padding: 15px 0 15px 10px;
+
+    .event-summary {
+      color: white;
+      margin: 0;
+      padding-bottom: 3px;
+
+      &::before {
+        animation: dot-flash 1s alternate infinite ease-in-out;
+        color: white;
+        content: '\f111';
+        display: inline-block;
+        font-size: 10px;
+        margin-right: 25px;
+        vertical-align: middle;
+        font-family-icons();
+      }
+    }
+
+    .event-relative-time {
+      color: $grey;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: normal;
+      padding-left: 12px;
+    }
+
+    .event-details {
+      color: white;
+      display: block;
+      line-height: 18px;
+      margin-left: 56px;
+      padding-bottom: 6px;
+      padding-top: 3px;
+      text-indent: -24px;
+
+      &::before {
+        color: white;
+        display: inline-block;
+        margin-right: 9px;
+        text-align: center;
+        text-indent: 0;
+        width: 14px;
+        font-family-icons();
+      }
+
+      &.event-location::before {
+        content: '\f041';
+      }
+
+      &.event-duration::before {
+        content: '\f017';
+      }
+    }
+  }
+
+  .event-past {
+    background: $whitesmoke;
+
+    .event-summary, .event-details {
+      color: $grey;
+      opacity: .9;
+
+      &::before {
+        animation: none;
+        color: $grey;
+      }
+    }
+  }
+}

themes/next/source/css/_common/components/pages/tag-cloud.styl

@@ -0,0 +1,12 @@
+.tag-cloud {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    margin: 10px;
+
+    &:hover {
+      color: var(--link-hover-color) !important;
+    }
+  }
+}

themes/next/source/css/_common/components/post/post-collapse.styl

@@ -0,0 +1,121 @@
+.posts-collapse {
+  margin-left: $posts-collapse-margin;
+  position: relative;
+
+  +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;
+      border-radius: 50%;
+      content: ' ';
+      height: 10px;
+      left: 0;
+      margin-left: -6px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      width: 10px;
+    }
+  }
+
+  .collection-year {
+    font-size: $font-size-largest;
+    font-weight: bold;
+    margin: 60px 0;
+    position: relative;
+
+    &::before {
+      background: $grey;
+      border-radius: 50%;
+      content: ' ';
+      height: 8px;
+      left: 0;
+      margin-left: -4px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      width: 8px;
+    }
+  }
+
+  .collection-header {
+    display: block;
+    margin: 0 0 0 20px;
+
+    small {
+      color: $grey;
+      margin-left: 5px;
+    }
+  }
+
+  .post-header {
+    border-bottom: 1px dashed $grey-light;
+    margin: 30px 0;
+    padding-left: 15px;
+    position: relative;
+    transition-property: border;
+    the-transition();
+
+    &::before {
+      background: $grey;
+      border: 1px solid white;
+      border-radius: 50%;
+      content: ' ';
+      height: 6px;
+      left: 0;
+      margin-left: -4px;
+      position: absolute;
+      top: $font-size-smallest;
+      transition-property: background;
+      width: 6px;
+      the-transition();
+    }
+
+    &:hover {
+      border-bottom-color: $grey-dim;
+
+      &::before {
+        background: $black-deep;
+      }
+    }
+  }
+
+  .post-meta {
+    display: inline;
+    font-size: $font-size-smallest;
+    margin-right: 10px;
+  }
+
+  .post-title {
+    display: inline;
+
+    a, span.exturl {
+      border-bottom: none;
+      color: var(--link-color);
+    }
+
+    .fa-external-link-alt {
+      font-size: $font-size-small;
+      margin-left: 5px;
+    }
+  }
+
+  &::before {
+    background: $whitesmoke;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    margin-left: -2px;
+    position: absolute;
+    top: 1.25em;
+    width: 4px;
+  }
+}

themes/next/source/css/_common/components/post/post-copyright.styl

@@ -0,0 +1,7 @@
+.post-copyright {
+  background: var(--card-bg-color);
+  border-left: 3px solid $red;
+  list-style: none;
+  margin: 2em 0 0;
+  padding: .5em 1em;
+}

themes/next/source/css/_common/components/post/post-eof.styl

@@ -0,0 +1,11 @@
+.post-eof {
+  background: $grey-light;
+  height: 1px;
+  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
+  text-align: center;
+  width: 8%;
+
+  .post-block:last-of-type & {
+    display: none;
+  }
+}

themes/next/source/css/_common/components/post/post-expand.styl

@@ -0,0 +1,55 @@
+.content {
+  padding-top: 40px;
+}
+
+.post-body {
+  +desktop() {
+    text-align: unquote(hexo-config('text_align.desktop'));
+  }
+
+  +tablet-mobile() {
+    text-align: unquote(hexo-config('text_align.mobile'));
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    padding-top: 10px;
+
+    .header-anchor {
+      border-bottom-style: none;
+      color: $grey-light;
+      float: right;
+      margin-left: 10px;
+      visibility: hidden;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+
+    &:hover .header-anchor {
+      visibility: visible;
+    }
+  }
+
+  iframe, img, video {
+    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%;
+    }
+  }
+}

themes/next/source/css/_common/components/post/post-followme.styl

@@ -0,0 +1,41 @@
+.followme {
+  align-items: center;
+  background: var(--card-bg-color);
+  border-left: 3px solid $red;
+  color: $grey;
+  margin: 2em 0 1em 0;
+  padding: 1em 1.5em;
+  flex-column();
+
+  .social-list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    .social-item {
+      margin: .5em 2em;
+    }
+    +tablet-mobile() {
+      .social-item {
+        margin: .5em .75em;
+      }
+    }
+
+    .social-link {
+      border: 0;
+      display:inline-block;
+      text-align: center;
+
+      .icon {
+        font-size: 1.75em;
+        height: 1.75em;
+        width: 1.75em;
+      }
+
+      .label {
+        display: block;
+        font-size: 14px;
+      }
+    }
+  }
+}

themes/next/source/css/_common/components/post/post-gallery.styl

@@ -0,0 +1,20 @@
+.post-gallery {
+  align-items: center;
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin-bottom: 20px;
+
+  +mobile() {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  a {
+    // For fancybox
+    border: 0;
+  }
+
+  img {
+    margin: 0;
+  }
+}

themes/next/source/css/_common/components/post/post-header.styl

@@ -0,0 +1,107 @@
+.posts-expand .post-header {
+  font-size: $font-size-large;
+}
+
+.posts-expand .post-title {
+  font-size: $font-size-largest;
+  font-weight: normal;
+  margin: initial;
+  text-align: center;
+  word-wrap();
+
+  if (hexo-config('post_edit.enable')) {
+    .post-edit-link {
+      border-bottom: none;
+      color: $grey;
+      display: inline-block;
+      float: right;
+      font-size: $font-size-larger;
+      margin-left: -1.2em;
+      the-transition-ease-in();
+
+      +mobile-small() {
+        margin-left: initial;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+    }
+  }
+}
+
+.posts-expand .post-title-link {
+  border-bottom: none;
+  color: var(--link-color);
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+
+  &::before {
+    background: var(--link-color);
+    bottom: 0;
+    content: '';
+    height: 2px;
+    left: 0;
+    position: absolute;
+    transform: scaleX(0);
+    visibility: hidden;
+    width: 100%;
+    the-transition();
+  }
+
+  &:hover::before {
+    transform: scaleX(1);
+    visibility: visible;
+  }
+
+  .fa-external-link-alt {
+    font-size: $font-size-small;
+    margin-left: 5px;
+  }
+}
+
+.posts-expand .post-meta {
+  color: $grey-dark;
+  font-family: $font-family-posts;
+  font-size: $font-size-smallest;
+  margin: 3px 0 60px 0;
+  text-align: center;
+
+  .post-description {
+    font-size: $font-size-small;
+    margin-top: 2px;
+  }
+
+  time {
+    border-bottom: 1px dashed $grey-dark;
+    cursor: pointer;
+  }
+}
+
+.post-meta .post-meta-item + .post-meta-item::before {
+  content: '|';
+  margin: 0 .5em;
+}
+
+.post-meta-divider {
+  margin: 0 .5em;
+}
+
+.post-meta-item-icon {
+  margin-right: 3px;
+
+  +tablet-mobile() {
+    display: inline-block;
+  }
+}
+
+.post-meta-item-text {
+  if (!hexo-config('post_meta.item_text')) {
+    display: none;
+  }
+
+  +tablet-mobile() {
+    display: none;
+  }
+}

themes/next/source/css/_common/components/post/post-nav.styl

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

themes/next/source/css/_common/components/post/post-reward.styl

@@ -0,0 +1,59 @@
+.reward-container {
+  margin: 20px auto;
+  padding: 10px 0;
+  text-align: center;
+  width: 90%;
+
+  button {
+    background: transparent;
+    border: 1px solid #fc6423;
+    border-radius: 0;
+    color: #fc6423;
+    cursor: pointer;
+    line-height: 2;
+    outline: 0;
+    padding: 0 15px;
+    vertical-align: text-top;
+
+    &:hover {
+      background: #fc6423;
+      border: 1px solid transparent;
+      color: #fa9366
+    }
+  }
+}
+
+#qr {
+  padding-top: 20px;
+
+  a {
+    border: 0;
+  }
+
+  img {
+    display: inline-block;
+    margin: .8em 2em 0 2em;
+    max-width: 100%;
+    width: 180px;
+  }
+
+  p {
+    text-align: center;
+  }
+
+  if (hexo-config('reward_settings.animation')) {
+    > div:hover p {
+      animation: roll .1s infinite linear;
+    }
+
+    @keyframes roll {
+      from {
+        transform: rotateZ(30deg);
+      }
+
+      to {
+        transform: rotateZ(-30deg);
+      }
+    }
+  }
+}

themes/next/source/css/_common/components/post/post-rtl.styl

@@ -0,0 +1,12 @@
+.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;
+  }
+}

themes/next/source/css/_common/components/post/post-tags.styl

@@ -0,0 +1,13 @@
+.post-tags {
+  margin-top: 40px;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    font-size: $font-size-smaller;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}

themes/next/source/css/_common/components/post/post-widgets.styl

@@ -0,0 +1,20 @@
+.post-widgets {
+  border-top: 1px solid $gainsboro;
+  margin-top: 15px;
+  text-align: center;
+}
+
+.wp_rating {
+  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;
+}

themes/next/source/css/_common/components/post/post.styl

@@ -0,0 +1,73 @@
+.post-body {
+  font-family: $font-family-posts;
+  word-wrap();
+
+  +desktop-large() {
+    font-size: $font-size-large;
+  }
+
+  .exturl .fa {
+    font-size: $font-size-small;
+    margin-left: 4px;
+  }
+
+  .image-caption, .figure .caption {
+    color: $grey-dark;
+    font-size: $font-size-small;
+    font-weight: bold;
+    line-height: 1;
+    margin: -20px auto 15px;
+    text-align: center;
+  }
+}
+
+.post-sticky-flag {
+  display: inline-block;
+  transform: rotate(30deg);
+}
+
+.post-button {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.use-motion {
+  if (hexo-config('motion.transition.post_block')) {
+    .post-block, .pagination, .comments {
+      opacity: 0;
+    }
+  }
+
+  if (hexo-config('motion.transition.post_header')) {
+    .post-header {
+      opacity: 0;
+    }
+  }
+
+  if (hexo-config('motion.transition.post_body')) {
+    .post-body {
+      opacity: 0;
+    }
+  }
+
+  if (hexo-config('motion.transition.coll_header')) {
+    .collection-header {
+      opacity: 0;
+    }
+  }
+}
+
+@import 'post-collapse';
+@import 'post-eof';
+@import 'post-expand';
+@import 'post-gallery';
+@import 'post-header';
+@import 'post-nav';
+@import 'post-rtl';
+@import 'post-tags';
+@import 'post-widgets';
+@import 'post-reward';
+
+@import 'post-copyright' if (hexo-config('creative_commons.post'));
+
+@import 'post-followme' if (hexo-config('follow_me'));

themes/next/source/css/_common/components/reading-progress.styl

@@ -0,0 +1,15 @@
+.reading-progress-bar {
+  background: unquote(hexo-config('reading_progress.color'));
+  display: block;
+  height: unquote(hexo-config('reading_progress.height'));
+  left: 0;
+  position: fixed;
+  width: 0;
+  z-index: $zindex-5;
+
+  if (hexo-config('reading_progress.position') == 'bottom') {
+    bottom: 0;
+  } else {
+    top: 0;
+  }
+}

themes/next/source/css/_common/components/third-party/gitalk.styl

@@ -0,0 +1,7 @@
+.gt-header a, .gt-comments a, .gt-popup a {
+  border-bottom: none;
+}
+
+.gt-container .gt-popup .gt-action.is--active::before {
+  top: .7em;
+}

themes/next/source/css/_common/components/third-party/math.styl

@@ -0,0 +1,6 @@
+mjx-container[jax="CHTML"][display="true"], .has-jax {
+  overflow: auto hidden;
+}
+mjx-container + br {
+  display: none;
+}

themes/next/source/css/_common/components/third-party/related-posts.styl

@@ -0,0 +1,23 @@
+.popular-posts-header {
+  border-bottom: 1px solid $gainsboro;
+  display: block;
+  font-size: $font-size-large;
+  margin-bottom: 10px;
+  margin-top: $post-eof-margin-bottom;
+}
+
+.popular-posts {
+  padding: 0;
+
+  .popular-posts-item {
+    // list-style: none;
+    margin-left: 2em;
+
+    .popular-posts-title {
+      font-size: $font-size-small;
+      font-weight: normal;
+      line-height: $line-height-base * 1.2;
+      margin: 0;
+    }
+  }
+}

themes/next/source/css/_common/components/third-party/search.styl

@@ -0,0 +1,193 @@
+.search-pop-overlay {
+  background: rgba(0, 0, 0, 0);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  transition: visibility 0s linear .2s, background .2s;
+  visibility: hidden;
+  width: 100%;
+  z-index: $zindex-4;
+
+  &.search-active {
+    background: rgba(0, 0, 0, .3);
+    transition: background .2s;
+    visibility: visible;
+  }
+}
+
+.search-popup {
+  background: var(--card-bg-color);
+  border-radius: 5px;
+  height: 80%;
+  left: calc(50% - 350px);
+  position: fixed;
+  top: 10%;
+  transform: scale(0);
+  transition: transform .2s;
+  width: 700px;
+  z-index: $zindex-5;
+
+  .search-active & {
+    transform: scale(1);
+  }
+
+  +mobile() {
+    border-radius: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    top: 0;
+    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;
+    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;
+    }
+  }
+}
+
+if (hexo-config('algolia_search.enable')) {
+  .search-input-container {
+    flex-grow: 1;
+
+    form {
+      padding: 2px;
+    }
+  }
+
+  .algolia-powered {
+    float: right;
+
+    img {
+      display: inline-block;
+      height: 18px;
+      vertical-align: middle;
+    }
+  }
+
+  .algolia-results {
+    height: calc(100% - 55px);
+    overflow: auto;
+    padding: 5px 30px;
+
+    hr {
+      margin: 10px 0;
+    }
+  }
+
+  .algolia-hit-item {
+    margin: 15px 0;
+  }
+
+  .algolia-hit-item-link {
+    border-bottom: 1px dashed $grey-light;
+    display: block;
+    the-transition();
+  }
+
+  .algolia-pagination {
+    .pagination {
+      border-top: none;
+      margin: 40px 0;
+      opacity: 1;
+      padding: 0;
+    }
+
+    .pagination-item {
+      display: inline-block;
+    }
+
+    .page-number {
+      border-top: 1px solid transparent;
+      the-transition();
+
+      &:hover {
+        border-top: 1px solid $black-deep;
+      }
+    }
+
+    .current .page-number {
+      @extend .pagination .page-number.current;
+      cursor: default;
+
+      &:hover {
+        border-top-color: $pagination-active-border;
+      }
+    }
+
+    .disabled-item {
+      visibility: hidden;
+    }
+  }
+}
+
+if (hexo-config('local_search.enable')) {
+  .search-popup {
+    .search-input-container {
+      flex-grow: 1;
+      padding: 2px;
+    }
+
+    ul.search-result-list {
+      margin: 0 5px;
+      padding: 0;
+      width: 100%;
+    }
+
+    p.search-result {
+      border-bottom: 1px dashed $grey-light;
+      padding: 5px 0;
+    }
+
+    a.search-result-title {
+      font-weight: bold;
+    }
+
+    .search-keyword {
+      border-bottom: 1px dashed $red;
+      color: $red;
+      font-weight: bold;
+    }
+
+    #search-result {
+      display: flex;
+      height: calc(100% - 55px);
+      overflow: auto;
+      padding: 5px 25px;
+    }
+
+    #no-result {
+      color: $grey-light;
+      margin: auto;
+    }
+  }
+}

themes/next/source/css/_common/components/third-party/third-party.styl

@@ -0,0 +1,7 @@
+@import 'gitalk' if (hexo-config('gitalk.enable'));
+
+@import 'search' if (hexo-config('local_search.enable') || hexo-config('algolia_search.enable'));
+
+@import 'related-posts' if (hexo-config('related_posts.enable'));
+
+@import 'math' if (hexo-config('math.mathjax.enable'));

themes/next/source/css/_common/outline/footer/footer.styl

@@ -0,0 +1,80 @@
+// Footer Section
+// --------------------------------------------------
+.footer {
+  color: $grey-dark;
+  font-size: $font-size-small;
+  padding: 20px 0;
+
+  &.footer-fixed {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+}
+
+.footer-inner {
+  box-sizing: border-box;
+  margin: 0 auto;
+  text-align: center;
+  width: $content-desktop;
+
+  +desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  +desktop-largest() {
+    width: $content-desktop-largest;
+  }
+}
+
+@keyframes iconAnimate {
+  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: unquote(hexo-config('footer.icon.color'));
+  display: inline-block;
+  margin: 0 5px;
+
+  if (hexo-config('footer.icon.animated')) {
+    animation: iconAnimate 1.33s ease-in-out infinite;
+  }
+}
+
+.powered-by, .theme-info {
+  display: inline-block;
+}

themes/next/source/css/_common/outline/header/bookmark.styl

@@ -0,0 +1,24 @@
+.book-mark-link {
+  border-bottom: none;
+  display: inline-block;
+  position: fixed;
+  right: $b2t-position-right;
+  top: -10px;
+  transition: .3s;
+
+  +tablet-mobile() {
+    display: none;
+  }
+
+  &::before {
+    color: unquote(hexo-config('bookmark.color'));
+    content: '\f02e';
+    font-size: 32px;
+    line-height: 1;
+    font-family-icons();
+  }
+}
+
+.book-mark-link:hover, .book-mark-link-fixed {
+  top: -2px;
+}

themes/next/source/css/_common/outline/header/github-banner.styl

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

themes/next/source/css/_common/outline/header/header.styl

@@ -0,0 +1,33 @@
+// Header Section
+// --------------------------------------------------
+.header {
+  background: $head-bg;
+}
+
+.header-inner {
+  margin: 0 auto;
+  width: $content-desktop;
+
+  +desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  +desktop-largest() {
+    width: $content-desktop-largest;
+  }
+}
+
+.site-brand-container {
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 10px;
+}
+
+@import 'headerband';
+@import 'site-meta';
+@import 'site-nav';
+@import 'menu';
+
+@import 'bookmark' if (hexo-config('bookmark.enable'));
+
+@import 'github-banner' if (hexo-config('github_banner.enable'));

themes/next/source/css/_common/outline/header/headerband.styl

@@ -0,0 +1,4 @@
+.headband {
+  background: $headband-bg;
+  height: $headband-height;
+}

themes/next/source/css/_common/outline/header/menu.styl

@@ -0,0 +1,64 @@
+// Menu
+// --------------------------------------------------
+.menu {
+  margin-top: 20px;
+  padding-left: 0;
+  text-align: center;
+}
+
+.menu-item {
+  display: inline-block;
+  list-style: none;
+  margin: 0 10px;
+
+  +mobile() {
+    display: block;
+    margin-top: 10px;
+
+    &.menu-item-search {
+      display: none;
+    }
+  }
+
+  a, span.exturl {
+    border-bottom: 0;
+    display: block;
+    font-size: $font-size-smaller;
+    transition-property: border-color;
+    the-transition();
+
+    // To prevent hover on external links with touch devices after click.
+    @media (hover: none) {
+      &:hover {
+        border-bottom-color: transparent !important;
+      }
+    }
+  }
+
+  .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;
+
+    +mobile() {
+      float: right;
+      margin-left: 0;
+    }
+  }
+}
+
+.menu-item-active a {
+  background: var(--menu-item-bg-color);
+}
+
+.use-motion .menu-item {
+  opacity: 0;
+}

themes/next/source/css/_common/outline/header/site-meta.styl

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

themes/next/source/css/_common/outline/header/site-nav.styl

@@ -0,0 +1,31 @@
+.site-nav-toggle, .site-nav-right {
+  display: none;
+
+  +mobile() {
+    flex-column();
+  }
+
+  .toggle {
+    color: var(--text-color);
+    padding: 10px;
+    width: 22px;
+
+    .toggle-line {
+      background: var(--text-color);
+      border-radius: 1px;
+    }
+  }
+}
+
+.site-nav {
+  display: block;
+
+  +mobile() {
+    clear: both;
+    display: none;
+  }
+
+  &.site-nav-on {
+    display: block;
+  }
+}

themes/next/source/css/_common/outline/mobile.styl

@@ -0,0 +1,89 @@
+/*
+// < 767px
++mobile() {
+
+}
+*/
+
++mobile-small() {
+  // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini).
+  .content-wrap {
+    padding: initial !important;
+  }
+
+  // For all schemes wider width.
+  .posts-expand {
+    .post-meta {
+      margin: 3px 0 10px 0 !important;
+    }
+  }
+
+  .post-block {
+    margin-top: initial !important;
+    // Inside posts blocks content padding (default 40px).
+    padding: $content-mobile-padding 18px $content-mobile-padding !important;
+  }
+
+  .posts-collapse {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .post-body {
+    // For headers narrow width.
+    h1, h2, h3, h4, h5, h6 {
+      margin: 10px 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 0;
+    }
+
+    // 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 10px !important;
+    }
+  }
+
+  .post-eof {
+    margin: 40px auto 20px !important;
+  }
+
+  .pagination {
+    margin-top: 40px;
+  }
+}
+
+/*
+// < 413px
++mobile-smallest() {
+
+}
+*/

themes/next/source/css/_common/outline/outline.styl

@@ -0,0 +1,29 @@
+.container {
+  min-height: 100%;
+  position: relative;
+}
+
+.main-inner {
+  margin: 0 auto;
+  width: $content-desktop;
+
+  +desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  +desktop-largest() {
+    width: $content-desktop-largest;
+  }
+}
+
+.content-wrap {
+  +mobile() {
+    padding: 0 20px;
+  }
+}
+
+@import 'header';
+@import 'sidebar';
+@import 'footer';
+
+@import 'mobile' if (hexo-config('mobile_layout_economy'));

themes/next/source/css/_common/outline/sidebar/sidebar-author-links.styl

@@ -0,0 +1,27 @@
+.links-of-author {
+  margin-top: 15px;
+
+  a, span.exturl {
+    border-bottom-color: $black-light;
+    display: inline-block;
+    font-size: $font-size-smaller;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
+
+    if (hexo-config('social_icons.transition')) {
+      the-transition();
+    }
+
+    &::before {
+      background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
+      border-radius: 50%;
+      content: ' ';
+      display: inline-block;
+      height: 4px;
+      margin-right: 3px;
+      vertical-align: middle;
+      width: 4px;
+    }
+  }
+}

themes/next/source/css/_common/outline/sidebar/sidebar-author.styl

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

themes/next/source/css/_common/outline/sidebar/sidebar-blogroll.styl

@@ -0,0 +1,16 @@
+.links-of-blogroll {
+  font-size: $font-size-smaller;
+  margin-top: 10px;
+}
+
+.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;
+}

themes/next/source/css/_common/outline/sidebar/sidebar-button.styl

@@ -0,0 +1,25 @@
+.sidebar-button {
+  margin-top: 15px;
+
+  a {
+    border: 1px solid $orange;
+    border-radius: 4px;
+    color: $orange;
+    display: inline-block;
+    padding: 0 15px;
+
+    .fa, .fab, .far, .fas {
+      margin-right: 5px;
+    }
+
+    &:hover {
+      background: $orange;
+      border: 1px solid $orange;
+      color: white;
+
+      .fa, .fab, .far, .fas {
+        color: white;
+      }
+    }
+  }
+}

themes/next/source/css/_common/outline/sidebar/sidebar-dimmer.styl

@@ -0,0 +1,23 @@
+#sidebar-dimmer {
+  display: none;
+}
+
++mobile() {
+  #sidebar-dimmer {
+    background: black;
+    display: block;
+    height: 100%;
+    left: 100%;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: $zindex-1;
+  }
+
+  .sidebar-active + #sidebar-dimmer {
+    opacity: .7;
+    transform: translateX(-100%);
+    transition: opacity .5s;
+  }
+}

themes/next/source/css/_common/outline/sidebar/sidebar-nav.styl

@@ -0,0 +1,41 @@
+// Sidebar Navigation
+.sidebar-nav {
+  margin: 0;
+  padding-bottom: 20px;
+  padding-left: 0;
+
+  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-nav-active {
+    border-bottom-color: $sidebar-highlight;
+    color: $sidebar-highlight;
+
+    &:hover {
+      color: $sidebar-highlight;
+    }
+  }
+}
+
+.sidebar-panel {
+  display: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sidebar-panel-active {
+  display: block;
+}

themes/next/source/css/_common/outline/sidebar/sidebar-toc.styl

@@ -0,0 +1,61 @@
+.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-property: all;
+      the-transition();
+    }
+  }
+
+  .nav-item {
+    line-height: 1.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    // text-align: justify;
+
+    if (!hexo-config('toc.wrap')) {
+      white-space: nowrap;
+    }
+  }
+
+  .nav {
+    .nav-child {
+      display: 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;
+      }
+    }
+  }
+}

themes/next/source/css/_common/outline/sidebar/sidebar-toggle.styl

@@ -0,0 +1,24 @@
+.sidebar-toggle {
+  background: $black-deep;
+  bottom: 45px;
+  cursor: pointer;
+  height: 14px;
+  left: $b2t-position-right;
+  padding: 5px;
+  position: fixed;
+  width: 14px;
+  z-index: $zindex-3;
+
+  +tablet-mobile() {
+    left: $b2t-position-right-mobile;
+    opacity: $b2t-opacity-hover;
+
+    if (!hexo-config('sidebar.onmobile')) {
+      display: none;
+    }
+  }
+}
+
+.sidebar-toggle:hover .toggle-line {
+  background: $sidebar-highlight;
+}

themes/next/source/css/_common/outline/sidebar/sidebar.styl

@@ -0,0 +1,51 @@
+.sidebar {
+  background: $black-deep;
+  bottom: 0;
+  if (!hexo-config('back2top.sidebar')){
+    box-shadow: inset 0 2px 6px black;
+  }
+  position: fixed;
+  top: 0;
+
+  +tablet-mobile() {
+    if (!hexo-config('sidebar.onmobile')) {
+      display: none;
+    }
+  }
+}
+
+.sidebar-inner {
+  color: $grey-dark;
+  padding: $sidebar-padding 10px;
+  text-align: center;
+}
+
+.cc-license {
+  margin-top: 10px;
+  text-align: center;
+
+  .cc-opacity {
+    border-bottom: none;
+    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' if (hexo-config('toc.enable'));
+
+@import 'site-state' if (hexo-config('site_state'));

themes/next/source/css/_common/outline/sidebar/site-state.styl

@@ -0,0 +1,33 @@
+.site-state {
+  display: flex;
+  justify-content: center;
+  line-height: 1.4;
+  margin-top: 10px;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.site-state-item {
+  padding: 0 15px;
+
+  &:not(:first-child) {
+    border-left: 1px solid $site-state-item-border-color;
+  }
+
+  a {
+    border-bottom: none;
+  }
+}
+
+.site-state-item-count {
+  display: block;
+  font-size: $site-state-item-count-font-size;
+  font-weight: 600;
+  text-align: center;
+}
+
+.site-state-item-name {
+  color: $site-state-item-name-color;
+  font-size: $site-state-item-name-font-size;
+}

themes/next/source/css/_common/scaffolding/base.styl

@@ -0,0 +1,102 @@
+::selection {
+  background: $selection-bg;
+  color: $selection-color;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: var(--body-bg-color);
+  color: var(--text-color);
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+
+  +tablet-mobile() {
+    // Remove the padding of body when the sidebar is open.
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-headings;
+  font-weight: bold;
+  line-height: 1.5;
+  margin: 20px 0 15px;
+}
+
+for headline in (1 .. 6) {
+  h{headline} {
+    font-size: $font-size-headings-base - $font-size-headings-step * headline;
+  }
+}
+
+p {
+  margin: 0 0 20px 0;
+}
+
+a, span.exturl {
+  border-bottom: 1px solid $link-decoration-color;
+  color: var(--link-color);
+  outline: 0;
+  text-decoration: none;
+  word-wrap();
+
+  &:hover {
+    border-bottom-color: var(--link-hover-color);
+    color: var(--link-hover-color);
+  }
+
+  // For spanned external links.
+  cursor: pointer;
+}
+
+iframe, img, video {
+  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;
+}
+
+kbd {
+  background-color: $whitesmoke;
+  background-image: linear-gradient($gainsboro, white, $gainsboro);
+  border: 1px solid $grey-light;
+  border-radius: .2em;
+  box-shadow: .1em .1em .2em rgba(0, 0, 0, .1);
+  color: $code-foreground;
+  font-family: inherit;
+  padding: .1em .3em;
+  white-space: nowrap;
+}

themes/next/source/css/_common/scaffolding/buttons.styl

@@ -0,0 +1,28 @@
+.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;
+  text-decoration: none;
+  transition-property: background-color;
+  the-transition();
+
+  &: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);
+  }
+}

themes/next/source/css/_common/scaffolding/comments.styl

@@ -0,0 +1,42 @@
+.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 {
+  background: var(--content-bg-color);
+  margin-top: 4em;
+  padding-top: 0;
+
+  .comments {
+    border: 0;
+    box-shadow: none;
+    margin-top: 0;
+    padding-top: 0;
+  }
+}

themes/next/source/css/_common/scaffolding/highlight/copy-code.styl

@@ -0,0 +1,67 @@
+.highlight-container {
+  position: relative;
+}
+
+.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus {
+  opacity: 1;
+}
+
+.copy-btn {
+  color: $black-dim;
+  cursor: pointer;
+  line-height: 1.6;
+  opacity: 0;
+  padding: 2px 6px;
+  position: absolute;
+  the-transition();
+
+  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: white;
+    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') {
+  .highlight-container {
+    background: #21252b;
+    border-radius: 5px;
+    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
+    padding-top: 30px;
+
+    &::before {
+      background: #fc625d;
+      border-radius: 50%;
+      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+      content: ' ';
+      height: 12px;
+      left: 12px;
+      margin-top: -20px;
+      position: absolute;
+      width: 12px;
+    }
+
+    .highlight {
+      border-radius: 0 0 5px 5px;
+
+      .table-container {
+        border-radius: 0 0 5px 5px;
+      }
+    }
+  }
+}

themes/next/source/css/_common/scaffolding/highlight/diff.styl

@@ -0,0 +1,7 @@
+if ($highlight-theme == 'normal') {
+  $highlight-deletion = #fdd;
+  $highlight-addition = #dfd;
+} else {
+  $highlight-deletion = #800000;
+  $highlight-addition = #008000;
+}

themes/next/source/css/_common/scaffolding/highlight/highlight.styl

@@ -0,0 +1,151 @@
+// https://github.com/chriskempson/tomorrow-theme
+$highlight-theme = hexo-config('codeblock.highlight_theme');
+
+@import 'theme';
+@import 'diff';
+
+@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
+
+// Placeholder: $code-block
+$code-block {
+  background: $highlight-background;
+  color: $highlight-foreground;
+  line-height: $line-height-code-block;
+  margin: 0 auto 20px;
+}
+
+pre, code {
+  font-family: $code-font-family;
+}
+
+code {
+  background: $code-background;
+  border-radius: 3px;
+  color: $code-foreground;
+  padding: 2px 4px;
+  word-wrap();
+}
+
+.highlight {
+  @extend $code-block;
+
+  *::selection {
+    background: $highlight-selection;
+  }
+
+  pre {
+    border: 0;
+    margin: 0;
+    padding: 10px 0;
+  }
+
+  table {
+    border: 0;
+    margin: 0;
+    width: auto;
+  }
+
+  td {
+    border: 0;
+    padding: 0;
+  }
+
+  figcaption {
+    background: $highlight-gutter.bg-color;
+    color: $highlight-foreground;
+    display: flex;
+    font-size: $table-font-size;
+    justify-content: space-between;
+    line-height: 1.2;
+    padding: .5em;
+
+    a {
+      color: $highlight-foreground;
+
+      &:hover {
+        border-bottom-color: $highlight-foreground;
+      }
+    }
+  }
+
+  .gutter {
+    disable-user-select();
+
+    pre {
+      background: $highlight-gutter.bg-color;
+      color: $highlight-gutter.color;
+      padding-left: 10px;
+      padding-right: 10px;
+      text-align: right;
+    }
+  }
+
+  .code pre {
+    background: $highlight-background;
+    padding-left: 10px;
+    width: 100%;
+  }
+}
+
+.gist table {
+  width: auto;
+
+  td {
+    border: 0;
+  }
+}
+
+pre {
+  @extend $code-block;
+  overflow: auto;
+  padding: 10px;
+
+  code {
+    background: none;
+    color: $highlight-foreground;
+    font-size: $table-font-size;
+    padding: 0;
+    text-shadow: none;
+  }
+  // For diff highlight
+  .deletion {
+    background: $highlight-deletion;
+  }
+
+  .addition {
+    background: $highlight-addition;
+  }
+
+  .meta {
+    color: $highlight-yellow;
+    disable-user-select();
+  }
+
+  .comment {
+    color: $highlight-comment;
+  }
+
+  .variable, .attribute, .tag, .name, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
+    color: $highlight-red;
+  }
+
+  .number, .preprocessor, .built_in, .builtin-name, .literal, .params, .constant, .command {
+    color: $highlight-orange;
+  }
+
+  .ruby .class .title, .css .rules .attribute, .string, .symbol, .value, .inheritance, .header, .ruby .symbol, .xml .cdata, .special, .formula {
+    color: $highlight-green;
+  }
+
+  .title, .css .hexcolor {
+    color: $highlight-aqua;
+  }
+
+  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
+    color: $highlight-blue;
+  }
+
+  .keyword, .javascript .function {
+    color: $highlight-purple;
+  }
+}

themes/next/source/css/_common/scaffolding/highlight/theme.styl

@@ -0,0 +1,137 @@
+if ($highlight-theme == 'night') {
+  $highlight-background   = #1d1f21;
+  $highlight-current-line = #282a2e;
+  $highlight-selection    = #373b41;
+  $highlight-foreground   = #c5c8c6;
+  $highlight-comment      = #969896;
+  $highlight-red          = #cc6666;
+  $highlight-orange       = #de935f;
+  $highlight-yellow       = #f0c674;
+  $highlight-green        = #b5bd68;
+  $highlight-aqua         = #8abeb7;
+  $highlight-blue         = #81a2be;
+  $highlight-purple       = #b294bb;
+  $highlight-gutter       = {
+    color: lighten($highlight-background, 50%),
+    bg-color: darken($highlight-background, 100%)
+  };
+} else if ($highlight-theme == 'night eighties') {
+  $highlight-background   = #2d2d2d;
+  $highlight-current-line = #393939;
+  $highlight-selection    = #515151;
+  $highlight-foreground   = #cccccc;
+  $highlight-comment      = #999999;
+  $highlight-red          = #f2777a;
+  $highlight-orange       = #f99157;
+  $highlight-yellow       = #ffcc66;
+  $highlight-green        = #99cc99;
+  $highlight-aqua         = #66cccc;
+  $highlight-blue         = #6699cc;
+  $highlight-purple       = #cc99cc;
+  $highlight-gutter       = {
+    color: $highlight-comment,
+    bg-color: darken($highlight-background, 40%)
+  };
+} else if ($highlight-theme == 'night blue') {
+  $highlight-background   = #002451;
+  $highlight-current-line = #00346e;
+  $highlight-selection    = #003f8e;
+  $highlight-foreground   = #ffffff;
+  $highlight-comment      = #7285b7;
+  $highlight-red          = #ff9da4;
+  $highlight-orange       = #ffc58f;
+  $highlight-yellow       = #ffeead;
+  $highlight-green        = #d1f1a9;
+  $highlight-aqua         = #99ffff;
+  $highlight-blue         = #bbdaff;
+  $highlight-purple       = #ebbbff;
+  $highlight-gutter       = {
+    color: $highlight-comment,
+    bg-color: darken($highlight-background, 60%)
+  };
+} else if ($highlight-theme == 'night bright') {
+  $highlight-background   = #000000;
+  $highlight-current-line = #2a2a2a;
+  $highlight-selection    = #424242;
+  $highlight-foreground   = #eaeaea;
+  $highlight-comment      = #969896;
+  $highlight-red          = #d54e53;
+  $highlight-orange       = #e78c45;
+  $highlight-yellow       = #e7c547;
+  $highlight-green        = #b9ca4a;
+  $highlight-aqua         = #70c0b1;
+  $highlight-blue         = #7aa6da;
+  $highlight-purple       = #c397d8;
+  $highlight-gutter       = {
+    color: lighten($highlight-background, 40%),
+    bg-color: lighten($highlight-background, 16%)
+  };
+} else if ($highlight-theme == 'solarized') {
+  $highlight-background   = #fdf6e3;
+  $highlight-current-line = #eee8d5;
+  $highlight-selection    = #eee8d5;
+  $highlight-foreground   = #586e75;
+  $highlight-comment      = #93a1a1;
+  $highlight-red          = #dc322f;
+  $highlight-orange       = #cb4b16;
+  $highlight-yellow       = #b58900;
+  $highlight-green        = #859900;
+  $highlight-aqua         = #2aa198;
+  $highlight-blue         = #268bd2;
+  $highlight-purple       = #6c71c4;
+  $highlight-gutter       = {
+    color: $highlight-comment,
+    bg-color: $highlight-background
+  };
+} else if ($highlight-theme == 'solarized dark') {
+  $highlight-background   = #002b36;
+  $highlight-current-line = #073642;
+  $highlight-selection    = #073642;
+  $highlight-foreground   = #93a1a1;
+  $highlight-comment      = #586e75;
+  $highlight-red          = #dc322f;
+  $highlight-orange       = #cb4b16;
+  $highlight-yellow       = #b58900;
+  $highlight-green        = #859900;
+  $highlight-aqua         = #2aa198;
+  $highlight-blue         = #268bd2;
+  $highlight-purple       = #6c71c4;
+  $highlight-gutter       = {
+    color: $highlight-comment,
+    bg-color: $highlight-background
+  };
+} else if ($highlight-theme == 'galactic') {
+  $highlight-background   = #262626;
+  $highlight-current-line = #303030;
+  $highlight-selection    = #303030;
+  $highlight-foreground   = #9e9e9e;
+  $highlight-comment      = #6a6a6a;
+  $highlight-red          = #ff511a;
+  $highlight-orange       = #dd7202;
+  $highlight-yellow       = #a68f01;
+  $highlight-green        = #4ca340;
+  $highlight-aqua         = #07a38f;
+  $highlight-blue         = #3294ff;
+  $highlight-purple       = #cc62fe;
+  $highlight-gutter       = {
+    color: $highlight-comment,
+    bg-color: $highlight-background
+  };
+} else {
+  $highlight-background   = #f7f7f7;
+  $highlight-current-line = #efefef;
+  $highlight-selection    = #d6d6d6;
+  $highlight-foreground   = #4d4d4c;
+  $highlight-comment      = #8e908c;
+  $highlight-red          = #c82829;
+  $highlight-orange       = #f5871f;
+  $highlight-yellow       = #eab700;
+  $highlight-green        = #718c00;
+  $highlight-aqua         = #3e999f;
+  $highlight-blue         = #4271ae;
+  $highlight-purple       = #8959a8;
+  $highlight-gutter       = {
+    color: #869194,
+    bg-color: #eff2f3
+  };
+}

themes/next/source/css/_common/scaffolding/normalize.styl

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

themes/next/source/css/_common/scaffolding/pagination.styl

@@ -0,0 +1,68 @@
+$page-number-basic {
+  display: inline-block;
+  margin: 0 10px;
+  padding: 0 11px;
+  position: relative;
+  top: -1px;
+
+  +mobile() {
+    margin: 0 5px;
+  }
+}
+
+.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-property: border-color;
+    the-transition();
+
+    &:hover {
+      border-top-color: $pagination-link-hover-border;
+    }
+  }
+
+  .space {
+    @extend $page-number-basic;
+    margin: 0;
+    padding: 0;
+  }
+
+  .prev {
+    margin-left: 0;
+  }
+
+  .next {
+    margin-right: 0;
+  }
+
+  .page-number.current {
+    background: $pagination-active-bg;
+    border-top-color: $pagination-active-border;
+    color: $pagination-active-color;
+  }
+}
+
++mobile() {
+  .pagination {
+    border-top: none;
+  }
+
+  .pagination {
+    .prev, .next, .page-number {
+      border-bottom: 1px solid $pagination-link-border;
+      border-top: 0;
+      margin-bottom: 10px;
+      padding: 0 10px;
+
+      &:hover {
+        border-bottom-color: $pagination-link-hover-border;
+      }
+    }
+  }
+}

themes/next/source/css/_common/scaffolding/scaffolding.styl

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

themes/next/source/css/_common/scaffolding/tables.styl

@@ -0,0 +1,41 @@
+.table-container {
+  overflow: auto;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: $table-font-size;
+  margin: 0 0 20px 0;
+  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 {
+  font-weight: normal;
+  padding: 8px;
+  vertical-align: middle;
+}
+
+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;
+}

themes/next/source/css/_common/scaffolding/tags/blockquote-center.styl

@@ -0,0 +1,31 @@
+// Blockquote with all children centered.
+.blockquote-center {
+  border-left: none;
+  margin: 40px 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+
+  .fa {
+    display: block;
+    opacity: .6;
+    position: absolute;
+    width: 100%;
+  }
+
+  .fa-quote-left {
+    border-top: 1px solid $grey-light;
+    text-align: left;
+    top: -20px;
+  }
+
+  .fa-quote-right {
+    border-bottom: 1px solid $grey-light;
+    text-align: right;
+    bottom: -20px;
+  }
+
+  p, div {
+    text-align: center;
+  }
+}

themes/next/source/css/_common/scaffolding/tags/group-pictures.styl

@@ -0,0 +1,14 @@
+.post-body .group-picture img {
+  margin: 0 auto;
+  padding: 0 3px;
+}
+
+.group-picture-row {
+  margin-bottom: 6px;
+  overflow: hidden;
+}
+
+.group-picture-column {
+  float: left;
+  margin-bottom: 10px;
+}

themes/next/source/css/_common/scaffolding/tags/label.styl

@@ -0,0 +1,29 @@
+.post-body .label {
+  color: $text-color;
+  display: inline;
+  padding: 0 2px;
+
+  &.default {
+    background: $label-default;
+  }
+
+  &.primary {
+    background: $label-primary;
+  }
+
+  &.info {
+    background: $label-info;
+  }
+
+  &.success {
+    background: $label-success;
+  }
+
+  &.warning {
+    background: $label-warning;
+  }
+
+  &.danger {
+    background: $label-danger;
+  }
+}

themes/next/source/css/_common/scaffolding/tags/note.styl

@@ -0,0 +1,313 @@
+.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;
+  }
+
+  h2, h3, h4, h5, h6 {
+    if ($note-icons) {
+      margin-top: 3px;
+    } else {
+      margin-top: 0;
+    }
+
+    border-bottom: initial;
+    margin-bottom: 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: .4em;
+        position: absolute;
+        top: calc(50% - 1em);
+        font-family-icons();
+      }
+    }
+  }
+
+  &.default {
+    if ($note-style == 'flat') {
+      background: $note-default-bg;
+    }
+
+    if ($note-style == 'modern') {
+      background: $note-modern-default-bg;
+      border-color: $note-modern-default-border;
+      color: $note-modern-default-text;
+
+      a, span.exturl {
+        &:not(.btn) {
+          border-bottom: 1px solid $note-modern-default-text;
+          color: $note-modern-default-text;
+
+          &:hover {
+            border-bottom: 1px solid $note-modern-default-hover;
+            color: $note-modern-default-hover;
+          }
+        }
+      }
+    }
+
+    if ($note-style != 'modern') {
+      border-left-color: $note-default-border;
+
+      h2, h3, h4, h5, h6 {
+        color: $note-default-text;
+      }
+    }
+
+    if ($note-icons) {
+      &:not(.no-icon)::before {
+        content: $note-default-icon;
+
+        if ($note-style != 'modern') {
+          color: $note-default-text;
+        }
+      }
+    }
+  }
+
+  &.primary {
+    if ($note-style == 'flat') {
+      background: $note-primary-bg;
+    }
+
+    if ($note-style == 'modern') {
+      background: $note-modern-primary-bg;
+      border-color: $note-modern-primary-border;
+      color: $note-modern-primary-text;
+
+      a, span.exturl {
+        &:not(.btn) {
+          border-bottom: 1px solid $note-modern-primary-text;
+          color: $note-modern-primary-text;
+
+          &:hover {
+            border-bottom: 1px solid $note-modern-primary-hover;
+            color: $note-modern-primary-hover;
+          }
+        }
+      }
+    }
+
+    if ($note-style != 'modern') {
+      border-left-color: $note-primary-border;
+
+      h2, h3, h4, h5, h6 {
+        color: $note-primary-text;
+      }
+    }
+
+    if ($note-icons) {
+      &:not(.no-icon)::before {
+        content: $note-primary-icon;
+
+        if ($note-style != 'modern') {
+          color: $note-primary-text;
+        }
+      }
+    }
+  }
+
+  &.info {
+    if ($note-style == 'flat') {
+      background: $note-info-bg;
+    }
+
+    if ($note-style == 'modern') {
+      background: $note-modern-info-bg;
+      border-color: $note-modern-info-border;
+      color: $note-modern-info-text;
+
+      a, span.exturl {
+        &:not(.btn) {
+          border-bottom: 1px solid $note-modern-info-text;
+          color: $note-modern-info-text;
+
+          &:hover {
+            border-bottom: 1px solid $note-modern-info-hover;
+            color: $note-modern-info-hover;
+          }
+        }
+      }
+    }
+
+    if ($note-style != 'modern') {
+      border-left-color: $note-info-border;
+
+      h2, h3, h4, h5, h6 {
+        color: $note-info-text;
+      }
+    }
+
+    if ($note-icons) {
+      &:not(.no-icon)::before {
+        content: $note-info-icon;
+
+        if ($note-style != 'modern') {
+          color: $note-info-text;
+        }
+      }
+    }
+  }
+
+  &.success {
+    if ($note-style == 'flat') {
+      background: $note-success-bg;
+    }
+
+    if ($note-style == 'modern') {
+      background: $note-modern-success-bg;
+      border-color: $note-modern-success-border;
+      color: $note-modern-success-text;
+
+      a, span.exturl {
+        &:not(.btn) {
+          border-bottom: 1px solid $note-modern-success-text;
+          color: $note-modern-success-text;
+
+          &:hover {
+            border-bottom: 1px solid $note-modern-success-hover;
+            color: $note-modern-success-hover;
+          }
+        }
+      }
+    }
+
+    if ($note-style != 'modern') {
+      border-left-color: $note-success-border;
+
+      h2, h3, h4, h5, h6 {
+        color: $note-success-text;
+      }
+    }
+
+    if ($note-icons) {
+      &:not(.no-icon)::before {
+        content: $note-success-icon;
+
+        if ($note-style != 'modern') {
+          color: $note-success-text;
+        }
+      }
+    }
+  }
+
+  &.warning {
+    if ($note-style == 'flat') {
+      background: $note-warning-bg;
+    }
+
+    if ($note-style == 'modern') {
+      background: $note-modern-warning-bg;
+      border-color: $note-modern-warning-border;
+      color: $note-modern-warning-text;
+
+      a, span.exturl {
+        &:not(.btn) {
+          border-bottom: 1px solid $note-modern-warning-text;
+          color: $note-modern-warning-text;
+
+          &:hover {
+            border-bottom: 1px solid $note-modern-warning-hover;
+            color: $note-modern-warning-hover;
+          }
+        }
+      }
+    }
+
+    if ($note-style != 'modern') {
+      border-left-color: $note-warning-border;
+
+      h2, h3, h4, h5, h6 {
+        color: $note-warning-text;
+      }
+    }
+
+    if ($note-icons) {
+      &:not(.no-icon)::before {
+        content: $note-warning-icon;
+
+        if ($note-style != 'modern') {
+          color: $note-warning-text;
+        }
+      }
+    }
+  }
+
+  &.danger {
+    if ($note-style == 'flat') {
+      background: $note-danger-bg;
+    }
+
+    if ($note-style == 'modern') {
+      background: $note-modern-danger-bg;
+      border-color: $note-modern-danger-border;
+      color: $note-modern-danger-text;
+
+      a, span.exturl {
+        &:not(.btn) {
+          border-bottom: 1px solid $note-modern-danger-text;
+          color: $note-modern-danger-text;
+
+          &:hover {
+            border-bottom: 1px solid $note-modern-danger-hover;
+            color: $note-modern-danger-hover;
+          }
+        }
+      }
+    }
+
+    if ($note-style != 'modern') {
+      border-left-color: $note-danger-border;
+
+      h2, h3, h4, h5, h6 {
+        color: $note-danger-text;
+      }
+    }
+
+    if ($note-icons) {
+      &:not(.no-icon)::before {
+        content: $note-danger-icon;
+
+        if ($note-style != 'modern') {
+          color: $note-danger-text;
+        }
+      }
+    }
+  }
+}

themes/next/source/css/_common/scaffolding/tags/pdf.styl

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

themes/next/source/css/_common/scaffolding/tags/tabs.styl

@@ -0,0 +1,110 @@
+.post-body .tabs {
+  margin-bottom: 20px;
+}
+
+.post-body .tabs, .tabs-comment {
+  display: block;
+  padding-top: 10px;
+  position: relative;
+
+  ul.nav-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    margin-bottom: -1px;
+    padding: 0;
+
+    +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-top: 3px solid transparent;
+      flex-grow: 1;
+      list-style-type: none;
+
+      +mobile-smallest() {
+        border-bottom: 1px solid transparent;
+        border-left: 3px solid transparent;
+        border-right: 1px solid transparent;
+        border-top: 1px solid transparent;
+      }
+
+      border-radius: $tbr $tbr 0 0;
+
+      +mobile-smallest() {
+        border-radius: $tbr;
+      }
+
+      if (hexo-config('tabs.transition.tabs')) {
+        the-transition-ease-out();
+      }
+
+      a {
+        border-bottom: initial;
+        display: block;
+        line-height: 1.8;
+        outline: 0;
+        padding: .25em .75em;
+        text-align: center;
+
+        i {
+          width: (18em / 14);
+        }
+
+        if (hexo-config('tabs.transition.labels')) {
+          the-transition-ease-out();
+        }
+      }
+
+      &.active {
+        border-bottom: 1px solid transparent;
+        border-left: 1px solid $table-border-color;
+        border-right: 1px solid $table-border-color;
+        border-top: 3px solid $orange;
+
+        +mobile-smallest() {
+          border-bottom: 1px solid $table-border-color;
+          border-left: 3px solid $orange;
+          border-right: 1px solid $table-border-color;
+          border-top: 1px solid $table-border-color;
+        }
+
+        a {
+          color: var(--link-color);
+          cursor: default;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    .tab-pane {
+      border: 1px solid $table-border-color;
+      border-top: 0;
+      padding: 20px 20px 0 20px;
+
+      border-radius: $tbr;
+
+      &:not(.active) {
+        display: none;
+      }
+
+      &.active {
+        display: block;
+
+        &:nth-of-type(1) {
+          border-radius: 0 $tbr $tbr $tbr;
+
+          +mobile-smallest() {
+            border-radius: $tbr;
+          }
+        }
+      }
+    }
+  }
+}

themes/next/source/css/_common/scaffolding/tags/tags.styl

@@ -0,0 +1,8 @@
+@import 'blockquote-center';
+@import 'group-pictures';
+@import 'label';
+@import 'tabs';
+
+@import 'note' if (hexo-config('note.style') != 'disabled');
+
+@import 'pdf' if (hexo-config('pdf.enable'));

themes/next/source/css/_common/scaffolding/toggles.styl

@@ -0,0 +1,92 @@
+.toggle {
+  line-height: 0;
+
+  .toggle-line {
+    background: white;
+    display: inline-block;
+    height: 2px;
+    left: 0;
+    position: relative;
+    top: 0;
+    transition: all .4s;
+    vertical-align: top;
+    width: 100%;
+
+    &:not(:first-child) {
+      margin-top: 3px;
+    }
+  }
+}
+
+if (hexo-config('sidebar.position') == 'right') {
+  .toggle.toggle-arrow {
+    .toggle-line-first {
+      top: 2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+
+    .toggle-line-middle {
+      width: 90%;
+    }
+
+    .toggle-line-last {
+      top: -2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+  }
+
+  .toggle.toggle-close {
+    .toggle-line-first {
+      top: 5px;
+      transform: rotate(-45deg);
+    }
+
+    .toggle-line-middle {
+      opacity: 0;
+    }
+
+    .toggle-line-last {
+      top: -5px;
+      transform: rotate(45deg);
+    }
+  }
+} else {
+  .toggle.toggle-arrow {
+    .toggle-line-first {
+      left: 50%;
+      top: 2px;
+      transform: rotate(45deg);
+      width: 50%;
+    }
+
+    .toggle-line-middle {
+      left: 2px;
+      width: 90%;
+    }
+
+    .toggle-line-last {
+      left: 50%;
+      top: -2px;
+      transform: rotate(-45deg);
+      width: 50%;
+    }
+  }
+
+  .toggle.toggle-close {
+    .toggle-line-first {
+      transform: rotate(-45deg);
+      top: 5px;
+    }
+
+    .toggle-line-middle {
+      opacity: 0;
+    }
+
+    .toggle-line-last {
+      transform: rotate(45deg);
+      top: -5px;
+    }
+  }
+}

themes/next/source/css/_mixins.styl

@@ -0,0 +1,114 @@
+the-transition() {
+  transition-delay: 0s;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
+}
+
+the-transition-ease-in() {
+  transition-delay: 0s;
+  transition-duration: .2s;
+  transition-timing-function: ease-in;
+}
+
+the-transition-ease-out() {
+  transition-delay: 0s;
+  transition-duration: .2s;
+  transition-timing-function: ease-out;
+}
+
+mobile-smallest() {
+  @media (max-width: 413px) {
+    {block};
+  }
+}
+
+mobile-small() {
+  @media (max-width: 567px) {
+    {block};
+  }
+}
+
+mobile() {
+  @media (max-width: 767px) {
+    {block};
+  }
+}
+
+tablet-mobile() {
+  @media (max-width: 991px) {
+    {block};
+  }
+}
+
+tablet-desktop() {
+  @media (min-width: 768px) {
+    {block};
+  }
+}
+
+tablet() {
+  @media (min-width: 768px) and (max-width: 991px) {
+    {block};
+  }
+}
+
+desktop() {
+  @media (min-width: 992px) {
+    {block};
+  }
+}
+
+desktop-large() {
+  @media (min-width: 1200px) {
+    {block};
+  }
+}
+
+desktop-largest() {
+  @media (min-width: 1600px) {
+    {block};
+  }
+}
+
+random-color($min, $max) {
+  return floor(math(0, 'random') * ($max - $min + 1) + $min);
+}
+
+word-wrap() {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+disable-user-select() {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+sidebar-inline-links-item() {
+  margin: 5px 0 0;
+
+  a, span.exturl {
+    box-sizing: border-box;
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: 0;
+    max-width: 216px;
+    overflow: hidden;
+    padding: 0 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+flex-column() {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+font-family-icons() {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+}

themes/next/source/css/_schemes/Gemini/index.styl

@@ -0,0 +1,221 @@
+@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.
+// ==================================================
+// Read values from NexT config and set they as local variables to use as string variables (in any CSS section).
+$use-seo = hexo-config('seo');
+
+// ==================================================
+// Desktop layout styles.
+// ==================================================
+// Post blocks.
+.content-wrap {
+  background: initial;
+  box-shadow: initial;
+  padding: initial;
+}
+
+// Post & Comments blocks.
+.post-block {
+  background: var(--content-bg-color);
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
+  padding: $content-desktop-padding;
+
+  // When blocks are siblings (homepage).
+  & + .post-block {
+    border-radius: $border-radius;
+    // Rewrite shadows & borders because all blocks have offsets.
+    box-shadow: $box-shadow;
+    margin-top: $sidebar-offset;
+  }
+}
+
+// Comments blocks.
+.comments {
+  background: var(--content-bg-color);
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  margin-top: $sidebar-offset;
+  padding: $content-desktop-padding;
+}
+
+.tabs-comment {
+  margin-top: 1em;
+}
+
+// Top main padding from header to posts (default 40px).
+.content {
+  padding-top: initial;
+}
+
+// Post delimiters.
+.post-eof {
+  display: none;
+}
+
+// Pagination.
+.pagination {
+  .prev, .next, .page-number {
+    margin-bottom: initial;
+    top: initial;
+  }
+
+  background: var(--content-bg-color);
+  border-radius: $border-radius;
+  border-top: initial;
+  box-shadow: $box-shadow;
+  margin: $sidebar-offset 0 0;
+  padding: 10px 0 10px;
+}
+
+// Footer alignment.
+.main {
+  padding-bottom: initial;
+}
+
+.footer {
+  bottom: auto;
+}
+
+// Sub-menu(s).
+.sub-menu {
+  border-bottom: initial;
+  box-shadow: $box-shadow-inner;
+
+  // Adapt submenu(s) with post-blocks.
+  + .content .post-block {
+    box-shadow: $box-shadow;
+    margin-top: $sidebar-offset;
+
+    +tablet() {
+      margin-top: $content-tablet-padding;
+    }
+
+    +mobile() {
+      margin-top: $content-mobile-padding;
+    }
+  }
+}
+
+// ==================================================
+// Headers.
+// ==================================================
+.post-body {
+  h1, h2 {
+    border-bottom: 1px solid $body-bg-color;
+  }
+
+  h3 {
+    if ($use-seo) {
+      border-bottom: 1px solid $body-bg-color;
+    } else {
+      border-bottom: 1px dotted $body-bg-color;
+    }
+  }
+
+  h4 {
+    if ($use-seo) {
+      border-bottom: 1px dotted $body-bg-color;
+    }
+  }
+}
+
+// ==================================================
+// > 768px & < 991px
+// ==================================================
++tablet() {
+  // Posts in blocks.
+  .content-wrap {
+    padding: $content-tablet-padding;
+  }
+
+  .posts-expand {
+    // Components inside Posts.
+    .post-button {
+      margin-top: ($content-tablet-padding * 2);
+    }
+  }
+
+  .post-block {
+    border-radius: $border-radius;
+    // Rewrite shadows & borders because all blocks have offsets.
+    box-shadow: $box-shadow;
+    // Inside posts blocks content padding (default 40px).
+    padding: ($content-tablet-padding * 2);
+  }
+
+  // Only if blocks are siblings need bottom margin (homepage).
+  .post-block + .post-block {
+    margin-top: $content-tablet-padding;
+  }
+
+  .comments {
+    margin-top: $content-tablet-padding;
+    padding: $content-tablet-padding ($content-tablet-padding * 2);
+    // padding: initial;
+    // padding-top: $content-tablet-padding;
+  }
+
+  .pagination {
+    margin: $content-tablet-padding 0 0;
+  }
+}
+
+// ==================================================
+// < 767px
+// ==================================================
++mobile() {
+  // Posts in blocks.
+  .content-wrap {
+    padding: $content-mobile-padding;
+  }
+
+  .posts-expand {
+    // Components inside Posts.
+    .post-button {
+      margin: $sidebar-offset 0;
+    }
+  }
+
+  .post-block {
+    border-radius: $border-radius;
+    // Rewrite shadows & borders because all blocks have offsets.
+    box-shadow: $box-shadow;
+    min-height: auto;
+    // Inside posts blocks content padding (default 40px).
+    padding: $sidebar-offset;
+  }
+
+  // Only if blocks are siblings need bottom margin (homepage).
+  .post-block + .post-block {
+    margin-top: $content-mobile-padding;
+  }
+
+  .comments {
+    margin-top: $content-mobile-padding;
+    padding: 10px $sidebar-offset;
+  }
+
+  .pagination {
+    margin: $content-mobile-padding 0 0;
+  }
+}

themes/next/source/css/_schemes/Mist/_header.styl

@@ -0,0 +1,65 @@
+// Header
+// --------------------------------------------------
+.header {
+  background: var(--content-bg-color);
+}
+
+.header-inner {
+  align-items: center;
+  display: flex;
+  padding: 20px 0;
+
+  +mobile() {
+    display: block;
+    padding: 10px 0;
+    width: auto;
+  }
+}
+
+.site-meta {
+  line-height: normal;
+
+  .brand {
+    padding: 2px 1px;
+
+    +mobile() {
+      display: block;
+    }
+  }
+
+  .site-title {
+    font-weight: bolder;
+  }
+}
+
+.logo-line-before, .logo-line-after {
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  width: 75%;
+
+  +mobile() {
+    display: none;
+  }
+
+  i {
+    background: var(--brand-color);
+    display: block;
+    height: 2px;
+    position: relative;
+  }
+}
+
+.use-motion {
+  .logo-line-before i {
+    left: -100%;
+  }
+
+  .logo-line-after i {
+    right: -100%;
+  }
+}
+
+.site-subtitle {
+  display: none;
+}

themes/next/source/css/_schemes/Mist/_layout.styl

@@ -0,0 +1,63 @@
+// Tags
+// --------------------------------------------------
+hr {
+  height: 2px;
+  margin: 20px 0;
+}
+
+// Components
+// --------------------------------------------------
+.btn {
+  padding: 0 10px;
+}
+
+.headband {
+  display: none;
+}
+
+// Page - Container
+// --------------------------------------------------
+.main-inner {
+  padding-bottom: 80px;
+
+  +mobile() {
+    width: auto;
+  }
+}
+
+.content {
+  padding-top: 80px;
+
+  +mobile() {
+    padding-top: 60px;
+  }
+}
+
+// Pagination
+// --------------------------------------------------
+.pagination {
+  margin: 120px 0 0;
+  text-align: left;
+
+  +mobile() {
+    margin: 80px 10px 0;
+    text-align: center;
+  }
+}
+
+// Footer
+// --------------------------------------------------
+.footer {
+  background: var(--content-bg-color);
+  color: var(--text-color);
+  padding: 10px 0;
+}
+
+.footer-inner {
+  text-align: left;
+
+  +mobile() {
+    text-align: center;
+    width: auto;
+  }
+}

themes/next/source/css/_schemes/Mist/_menu.styl

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

themes/next/source/css/_schemes/Mist/_posts-expand.styl

@@ -0,0 +1,69 @@
+// Post Expand
+// --------------------------------------------------
+.posts-expand {
+  &.index {
+    .post-title, .post-meta {
+      text-align: $site-meta-text-align;
+
+      +mobile() {
+        text-align: center;
+      }
+    }
+
+    .post-meta {
+      margin: 5px 0 20px 0;
+    }
+  }
+
+  .post-eof {
+    display: none;
+  }
+
+  .post-block:not(:first-child) {
+    margin-top: 120px;
+  }
+
+  .post-title, .post-meta {
+    text-align: center;
+  }
+
+  .post-body img {
+    margin-left: 0;
+  }
+
+  .post-tags {
+    text-align: left;
+
+    a {
+      background: $whitesmoke;
+      border-bottom: none;
+      padding: 1px 5px;
+
+      &:hover {
+        background: $grey-light;
+      }
+    }
+  }
+
+  .post-nav {
+    margin-top: 40px;
+  }
+}
+
+.post-button {
+  margin-top: 20px;
+  text-align: left;
+
+  .btn {
+    // color: $grey-dim;
+    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);
+    }
+  }
+}

themes/next/source/css/_schemes/Mist/index.styl

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

themes/next/source/css/_schemes/Muse/_header.styl

@@ -0,0 +1,25 @@
+.custom-logo {
+  .site-meta-headline {
+    text-align: center;
+  }
+
+  .site-title {
+    color: $black-deep;
+    margin: 10px auto 0;
+
+    a {
+      border: 0;
+    }
+  }
+}
+
+.custom-logo-image {
+  background: white;
+  margin: 0 auto;
+  max-width: 150px;
+  padding: 5px;
+}
+
+.brand {
+  background: var(--btn-default-bg);
+}

themes/next/source/css/_schemes/Muse/_layout.styl

@@ -0,0 +1,30 @@
+.header-inner, .main-inner, .footer-inner {
+  +mobile() {
+    width: auto;
+  }
+}
+
+.header-inner {
+  padding-top: 100px;
+
+  +mobile() {
+    padding-top: 50px;
+  }
+}
+
+.main-inner {
+  padding-bottom: 60px;
+}
+
+.content {
+  padding-top: 70px;
+
+  +mobile() {
+    padding-top: 35px;
+  }
+}
+
+embed {
+  display: block;
+  margin: 0 auto 25px auto;
+}

themes/next/source/css/_schemes/Muse/_menu.styl

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

themes/next/source/css/_schemes/Muse/_sidebar.styl

@@ -0,0 +1,62 @@
+if (hexo-config('sidebar.position') == 'right') {
+  .sidebar {
+    right: 0 - $sidebar-desktop;
+
+    &.sidebar-active {
+      right: 0;
+    }
+  }
+
+  .sidebar-toggle, .back-to-top {
+    left: auto;
+    right: $b2t-position-right;
+
+    +tablet-mobile() {
+      right: $b2t-position-right-mobile;
+    }
+  }
+
+  .book-mark-link {
+    left: $b2t-position-right;
+  }
+} else {
+  .sidebar {
+    left: 0 - $sidebar-desktop;
+
+    &.sidebar-active {
+      left: 0;
+    }
+  }
+}
+
+.sidebar {
+  width: $sidebar-desktop;
+  z-index: $zindex-2;
+  the-transition-ease-out();
+
+  a, span.exturl {
+    border-bottom-color: $black-light;
+    color: $grey-dark;
+
+    &:hover {
+      border-bottom-color: $gainsboro;
+      color: $gainsboro;
+    }
+  }
+}
+
+.links-of-blogroll-item {
+  if (hexo-config('links_settings.layout') == 'inline') {
+    display: inline-block;
+  }
+  padding: 2px 10px;
+
+  a, span.exturl {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

themes/next/source/css/_schemes/Muse/_sub-menu.styl

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

themes/next/source/css/_schemes/Muse/index.styl

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

themes/next/source/css/_schemes/Pisces/_header.styl

@@ -0,0 +1,27 @@
+.site-brand-container {
+  background: $black-deep;
+
+  +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;
+}
+
+.custom-logo-image {
+  margin-top: 20px;
+
+  +tablet-mobile() {
+    display: none;
+  }
+}

themes/next/source/css/_schemes/Pisces/_layout.styl

@@ -0,0 +1,102 @@
+.header {
+  margin: 0 auto;
+  position: relative;
+  width: $content-desktop;
+
+  +desktop-large() {
+    width: $content-desktop-large;
+  }
+
+  +desktop-largest() {
+    width: $content-desktop-largest;
+  }
+
+  +tablet-mobile() {
+    width: auto;
+  }
+}
+
+.header-inner {
+  background: var(--content-bg-color);
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: $sidebar-desktop;
+
+  +desktop-large() {
+    width: $sidebar-desktop;
+  }
+
+  +tablet-mobile() {
+    border-radius: initial;
+    position: relative;
+    width: auto;
+  }
+}
+
+.main-inner {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+
+  if (hexo-config('sidebar.position') != 'right') {
+    flex-direction: row-reverse;
+  }
+  +tablet-mobile() {
+    width: auto;
+  }
+}
+
+.content-wrap {
+  background: var(--content-bg-color);
+  border-radius: $border-radius-inner;
+  box-shadow: $box-shadow-inner;
+  box-sizing: border-box;
+  padding: $content-desktop-padding;
+  width: $content-wrap;
+
+  +tablet-mobile() {
+    border-radius: initial;
+    padding: 20px;
+    width: 100%;
+  }
+}
+
+if (hexo-config('sidebar.position') == 'right') {
+  .header-inner {
+    right: 0;
+  }
+
+  .book-mark-link {
+    left: $b2t-position-right;
+  }
+
+  .footer-inner {
+    padding-right: 260px;
+  }
+} else {
+  .footer-inner {
+    padding-left: 260px;
+  }
+
+  .back-to-top {
+    left: auto;
+    right: $b2t-position-right;
+
+    +tablet-mobile() {
+      right: $b2t-position-right-mobile;
+    }
+  }
+}
+
+.footer-inner {
+
+  +tablet-mobile() {
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
+  }
+}

themes/next/source/css/_schemes/Pisces/_menu.styl

@@ -0,0 +1,65 @@
+.site-nav-toggle, .site-nav-right {
+  +tablet() {
+    flex-column();
+  }
+
+  .toggle {
+    color: white;
+
+    .toggle-line {
+      background: white;
+    }
+  }
+}
+
+.site-nav {
+  +tablet() {
+    display: none;
+  }
+}
+
+.menu .menu-item {
+  display: block;
+  margin: 0;
+
+  a, span.exturl {
+    padding: 5px 20px;
+    position: relative;
+    text-align: left;
+    transition-property: background-color;
+
+    &:hover {
+      @extend .menu-item-active a;
+    }
+  }
+
+  +tablet-mobile() {
+    &.menu-item-search {
+      display: none;
+    }
+  }
+
+  .badge {
+    background: $grey-light;
+    border-radius: 10px;
+    color: white;
+    float: right;
+    padding: 2px 5px;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
+    vertical-align: middle;
+  }
+}
+
+if (!hexo-config('menu_settings.badges')) {
+  .main-menu .menu-item-active a::after {
+    background: $grey;
+    border-radius: 50%;
+    content: ' ';
+    height: 6px;
+    margin-top: -3px;
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    width: 6px;
+  }
+}

themes/next/source/css/_schemes/Pisces/_sidebar.styl

@@ -0,0 +1,123 @@
+.sidebar {
+  background: var(--body-bg-color);
+  box-shadow: none;
+  margin-top: 100%;
+  position: static;
+  width: $sidebar-desktop;
+
+  +tablet-mobile() {
+    display: none;
+  }
+}
+
+.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);
+  width: $sidebar-desktop;
+
+  if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
+    opacity: 0;
+  }
+
+  &.affix {
+    position: fixed;
+    top: $sidebar-offset;
+  }
+
+  &.affix-bottom {
+    position: absolute;
+  }
+}
+
+.site-state-item {
+  padding: 0 10px;
+}
+
+.sidebar-button {
+  border-bottom: 1px dotted $grey-light;
+  border-top: 1px dotted $grey-light;
+  margin-top: 10px;
+  text-align: center;
+
+  a {
+    border: 0;
+    color: $orange;
+    display: block;
+
+    &:hover {
+      background: none;
+      border: 0;
+      color: darken($orange, 20%);
+
+      .fa, .fab, .far, .fas {
+        color: darken($orange, 20%);
+      }
+    }
+  }
+}
+
+.links-of-author {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.links-of-author-item {
+  sidebar-inline-links-item();
+
+  if (!hexo-config('social_icons.icons_only')) {
+    width: 50%;
+  }
+
+  a, span.exturl {
+    border-bottom: none;
+    display: block;
+    text-decoration: none;
+
+    &::before {
+      display: none;
+    }
+
+    &:hover {
+      background: var(--body-bg-color);
+      border-radius: 4px;
+    }
+  }
+
+  .fa, .fab, .far, .fas {
+    margin-right: 2px;
+  }
+}
+
+.links-of-blogroll-item {
+  padding: 0;
+
+  if (hexo-config('links_settings.layout') == 'inline') {
+    display: inline-block;
+    sidebar-inline-links-item();
+
+    if (!hexo-config('social_icons.icons_only')) {
+      width: unset;
+    }
+  }
+}
+
+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;
+    }
+  }
+}

themes/next/source/css/_schemes/Pisces/_sub-menu.styl

@@ -0,0 +1,30 @@
+.sub-menu {
+  background: var(--content-bg-color);
+  border-bottom: 1px solid $table-border-color;
+  margin: 0;
+  padding: 6px 0;
+
+  .menu-item {
+    display: inline-block;
+
+    a, span.exturl {
+      background: transparent;
+      margin: 5px 10px;
+      padding: initial;
+
+      &:hover {
+        background: transparent;
+        color: $sidebar-highlight;
+      }
+    }
+  }
+
+  .menu-item-active a {
+    border-bottom-color: $sidebar-highlight;
+    color: $sidebar-highlight;
+
+    &:hover {
+      border-bottom-color: $sidebar-highlight;
+    }
+  }
+}

themes/next/source/css/_schemes/Pisces/index.styl

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

themes/next/source/css/_variables/Gemini.styl

@@ -0,0 +1,18 @@
+// Variables of Gemini scheme
+// ==================================================
+
+@import "Pisces.styl";
+
+// 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;

themes/next/source/css/_variables/Mist.styl

@@ -0,0 +1,21 @@
+// Variables of Mist scheme
+// ==================================================
+
+@import "Muse.styl";
+
+$link-decoration-color   = $grey-light;
+$content-bg-color        = $whitesmoke;
+$menu-item-bg-color      = $grey-lighter;
+
+$brand-color             = $black-deep;
+$brand-hover-color       = $brand-color;
+
+$site-meta-text-align    = left;
+$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);

themes/next/source/css/_variables/Muse.styl

@@ -0,0 +1,5 @@
+// Variables of Muse scheme
+// ==================================================
+
+$sidebar-width           = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
+$sidebar-desktop         = unit($sidebar-width, 'px');

themes/next/source/css/_variables/Pisces.styl

@@ -0,0 +1,68 @@
+// Variables of Pisces scheme
+// ==================================================
+
+// Settings for some of the most global styles.
+// --------------------------------------------------
+$body-bg-color                = #f5f7f9;
+
+$sidebar-width                = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240;
+$sidebar-desktop              = unit($sidebar-width, 'px');
+$content-wrap                 = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px');
+
+$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');
+$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;
+$site-state-item-border-color     = $gainsboro;
+
+
+// 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-position-bottom          = -100px;
+$b2t-position-bottom-on       = 30px;

themes/next/source/css/_variables/base.styl

@@ -0,0 +1,353 @@
+//
+// Variables
+// ==================================================
+
+
+// Colors
+// colors for use across theme.
+// --------------------------------------------------
+$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;
+
+
+// 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;
+
+// Typography
+// Font, line-height, and elements colors.
+// --------------------------------------------------
+get_font_family(config) {
+  $custom-family = hexo-config('font.' + config + '.family');
+  return $custom-family is a 'string' ? $custom-family : null;
+}
+
+// Font families.
+$font-family-chinese      = "PingFang SC", "Microsoft YaHei";
+
+$font-family-base         = $font-family-chinese, sans-serif;
+$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');
+
+$font-family-logo         = $font-family-base;
+$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');
+
+$font-family-headings     = $font-family-base;
+$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');
+
+$font-family-posts        = $font-family-base;
+$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');
+
+$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
+$font-family-monospace    = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');
+
+
+// Font size
+$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 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  = (hexo-config('font.enable') and hexo-config('font.headings.size') is a 'unit') ? unit(hexo-config('font.headings.size'), em) : 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
+// --------------------------------------------------
+$zindex-0       = 1000;
+$zindex-1       = 1100;
+$zindex-2       = 1200;
+$zindex-3       = 1300;
+$zindex-4       = 1400;
+$zindex-5       = 1500;
+
+
+// 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;
+$code-foreground                = $black-light;
+$code-background                = $gainsboro;
+
+
+// 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   = $black-deep;
+
+$pagination-active-bg           = $grey-light;
+$pagination-active-color        = white;
+$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                    = $black-deep;
+
+
+// Section Header
+// Variables for header section elements.
+// --------------------------------------------------
+$head-bg                        = transparent;
+
+// Site Meta
+$site-meta-text-align           = center;
+$brand-color                    = white;
+$brand-hover-color              = white;
+$brand-color-dark               = $grey-lighter;
+$brand-hover-color-dark         = $grey-lighter;
+
+$font-size-title                = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 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   = 0px;
+
+
+// Sidebar
+// Variables for sidebar section elements.
+// --------------------------------------------------
+
+$sidebar-padding                      = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px;
+$sidebar-offset                       = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 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;
+$site-state-item-border-color         = $black-dim;
+
+
+// Components
+// --------------------------------------------------
+// Back to top
+$b2t-opacity                  = 1;
+$b2t-opacity-hover            = .8;
+$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;
+
+
+// Iconography
+// Icons SVG Base64
+// --------------------------------------------------
+// blockquote-center icon
+$center-quote-left            = '../images/quote-l.svg';
+$center-quote-right           = '../images/quote-r.svg';
+
+
+// Note colors
+// --------------------------------------------------
+// Read note light_bg_offset from NexT config and set in "$lbg%" to use it as string variable.
+$lbg = hexo-config('note.light_bg_offset') is a 'unit' ? unit(hexo-config('note.light_bg_offset'), "%") : 0;
+
+// Default
+$note-border-radius         = 3px;
+
+$note-default-border        = #777;
+$note-default-bg            = lighten(spin($note-default-border, 0), 94% + $lbg);
+$note-default-text          = $note-default-border;
+$note-default-icon          = "\f0a9";
+
+$note-modern-default-border = #e1e1e1;
+$note-modern-default-bg     = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
+$note-modern-default-text   = $grey-dim;
+$note-modern-default-hover  = darken(spin($note-modern-default-text, -10), 32%);
+
+// Primary
+$note-primary-border        = #6f42c1;
+$note-primary-bg            = lighten(spin($note-primary-border, 10), 92% + $lbg);
+$note-primary-text          = $note-primary-border;
+$note-primary-icon          = "\f055";
+
+$note-modern-primary-border = #e1c2ff;
+$note-modern-primary-bg     = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
+$note-modern-primary-text   = #6f42c1;
+$note-modern-primary-hover  = darken(spin($note-modern-primary-text, -10), 22%);
+
+// Info
+$note-info-border           = #428bca;
+$note-info-bg               = lighten(spin($note-info-border, -10), 91% + $lbg);
+$note-info-text             = $note-info-border;
+$note-info-icon             = "\f05a";
+
+$note-modern-info-border    = #b3e5ef;
+$note-modern-info-bg        = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
+$note-modern-info-text      = #31708f;
+$note-modern-info-hover     = darken(spin($note-modern-info-text, -10), 32%);
+
+// Success
+$note-success-border        = #5cb85c;
+$note-success-bg            = lighten(spin($note-success-border, 10), 90% + $lbg);
+$note-success-text          = $note-success-border;
+$note-success-icon          = "\f058";
+
+$note-modern-success-border = #d0e6be;
+$note-modern-success-bg     = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
+$note-modern-success-text   = #3c763d;
+$note-modern-success-hover  = darken(spin($note-modern-success-text, -10), 27%);
+
+// Warning
+$note-warning-border        = #f0ad4e;
+$note-warning-bg            = lighten(spin($note-warning-border, 10), 88% + $lbg);
+$note-warning-text          = $note-warning-border;
+$note-warning-icon          = "\f06a";
+
+$note-modern-warning-border = #fae4cd;
+$note-modern-warning-bg     = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
+$note-modern-warning-text   = #8a6d3b;
+$note-modern-warning-hover  = darken(spin($note-modern-warning-text, -10), 18%);
+
+// Danger
+$note-danger-border         = #d9534f;
+$note-danger-bg             = lighten(spin($note-danger-border, -10), 92% + $lbg);
+$note-danger-text           = $note-danger-border;
+$note-danger-icon           = "\f056";
+
+$note-modern-danger-border  = #ebcdd2;
+$note-modern-danger-bg      = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
+$note-modern-danger-text    = #a94442;
+$note-modern-danger-hover   = darken(spin($note-modern-danger-text, -10), 22%);
+
+// Tabs border radius
+// --------------------------------------------------
+$tbr                        = 0;
+
+// Label colors
+// --------------------------------------------------
+$label-default              = lighten(spin($note-default-border, 0), 89% + $lbg);
+$label-primary              = lighten(spin($note-primary-border, 10), 87% + $lbg);
+$label-info                 = lighten(spin($note-info-border, -10), 86% + $lbg);
+$label-success              = lighten(spin($note-success-border, 10), 85% + $lbg);
+$label-warning              = lighten(spin($note-warning-border, 10), 83% + $lbg);
+$label-danger               = lighten(spin($note-danger-border, -10), 87% + $lbg);

themes/next/source/css/main.styl

@@ -0,0 +1,47 @@
+// CSS Style Guide: http://codeguide.co/#css
+
+
+$scheme    = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';
+
+$variables = base $scheme;
+
+
+// Variables Layer
+// --------------------------------------------------
+for $variable in $variables
+  @import "_variables/" + $variable;
+for $inject_variable in hexo-config('injects.variable')
+  @import $inject_variable;
+
+// Mixins Layer
+// --------------------------------------------------
+@import "_mixins.styl";
+for $inject_mixin in hexo-config('injects.mixin')
+  @import $inject_mixin;
+
+// Dark mode colors
+// --------------------------------------------------
+@import "_colors.styl";
+
+// Common Layer
+// --------------------------------------------------
+
+// Scaffolding
+@import "_common/scaffolding";
+
+// Layout
+@import "_common/outline";
+
+// Components
+@import "_common/components";
+
+
+// Schemes Layer
+// --------------------------------------------------
+@import "_schemes/" + $scheme;
+
+
+// Custom Layer
+// --------------------------------------------------
+for $inject_style in hexo-config('injects.style')
+  @import $inject_style;