hexo-theme-shokax 0.0.1-alpha1

package/source/css/_common/outline/header/waves.styl

@@ -0,0 +1,50 @@
+.waves {
+  width: 100%;
+  height: 15vh;
+  margin-bottom: -.6875rem;
+  min-height: 3.125rem;
+  max-height: 9.375rem;
+  position:relative;
+
+  +mobile() {
+    height: 10vh;
+  }
+}
+/* Animation */
+.parallax>use {
+  animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite;
+}
+
+.parallax>use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+  fill: var(--grey-1-a7);
+}
+
+.parallax>use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+  fill: var(--grey-1-a5);
+}
+
+.parallax>use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+  fill: var(--grey-1-a3);
+}
+
+.parallax>use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+  fill: var(--grey-1);
+}
+
+@keyframes wave {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}

package/source/css/_common/outline/mobile.styl

@@ -0,0 +1,46 @@
+/*
+// < 47.9375rem
++mobile() {
+
+}
+*/
+
++mobile-small() {
+  .post.block {
+    padding: initial !important;
+  }
+
+  .md {
+    // For headers narrow width.
+    h1, h2, h3, h4, h5, h6 {
+      padding-left: 1.25rem;
+    }
+
+    // Rewrite paddings & margins inside tags.
+    .note, .tabs .tab-content .tab-pane {
+      h1, h2, h3, h4, h5, h6 {
+        margin: 0 .3125rem;
+      }
+    }
+
+    img, video {
+      margin-bottom: .625rem !important;
+    }
+
+    .tabs .tab-content .tab-pane {
+      padding: .625rem .625rem 0 .625rem !important;
+    }
+  }
+
+  .post .eof {
+    margin: 2.5rem auto 1.25rem !important;
+  }
+
+}
+
+/*
+// < 25.8125rem
++mobile-smallest() {
+
+}
+*/

package/source/css/_common/outline/outline.styl

@@ -0,0 +1,78 @@
+#container {
+  min-height: 100%;
+  min-width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.inner {
+  margin: 0 auto;
+  width: 100%;
+}
+
+main {
+  background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
+
+  >.inner {
+    width: $content-desktop;
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+    if (hexo-config('sidebar.position') == 'left') {
+      flex-direction: row-reverse;
+    }
+
+    +desktop-large() {
+      width: $content-desktop-large;
+    }
+
+    +desktop-largest() {
+      width: $content-desktop-largest;
+    }
+  }
+
+}
+
+#main {
+  background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top;
+  box-shadow: 0 1.25rem 1rem .3125rem var(--body-bg-shadow);
+
+  width: $content-wrap;
+
+  min-height: 37.5rem;
+
+  .cat {
+    margin-top: 10rem;
+  }
+
+  .wrap {
+    position: relative;
+    padding: $content-desktop-padding;
+  }
+
+  .wrap:nth-child(1) {
+    margin-bottom: 1.25rem;
+  }
+
+  +tablet-mobile() {
+    width: 100%;
+
+    .wrap {
+      padding: $content-tablet-padding;
+    }
+  }
+
+  +mobile() {
+    .wrap {
+      padding: $content-mobile-padding;
+    }
+  }
+}
+
+@import 'header';
+@import 'sidebar';
+@import 'footer';
+
+@import 'mobile';

package/source/css/_common/outline/sidebar/author.styl

@@ -0,0 +1,59 @@
+.overview .author {
+
+  &:hover .image {
+    @extend .shake;
+  }
+
+  .image {
+    border: .0625rem solid var(--body-bg-shadow);
+    display: block;
+    margin: 0 auto;
+    max-width: 10rem;
+    padding: .125rem;
+    box-shadow: 0 0 1rem .625rem var(--body-bg-shadow);
+    border-radius: 50%;
+  }
+
+
+  .name {
+    color: var(--grey-7);
+    font-weight: normal;
+    margin: .3125rem 0 0;
+    text-align: center;
+  }
+
+  .description {
+    color: var(--grey-5);
+    font-size: $font-size-medium;
+    margin-top: .3125rem;
+    text-align: center;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: scale(1);
+  }
+
+  10%,
+  20% {
+    transform: scale(.9) rotate(3deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/source/css/_common/outline/sidebar/dimmer.styl

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

package/source/css/_common/outline/sidebar/menu.styl

@@ -0,0 +1,63 @@
+.overview .menu {
+  padding: 1.25rem;
+  margin: 0;
+
+  background-color: transparent;
+
+  .item {
+    border-radius: .9375rem;
+    margin-bottom: .625rem;
+    display: block;
+    color: var(--grey-5);
+    the-transition();
+
+    a {
+      color: inherit;
+      display: block;
+      line-height: 3;
+    }
+
+    .submenu {
+      display: none;
+      padding: 0;
+      @extend .slide-down-in;
+    }
+
+    &:hover {
+      background-color: rgba(0,0,0,.1);
+      color: inherit;
+
+      .submenu {
+        display: block;
+      }
+    }
+
+    .ic {
+      margin-right: .625rem;
+    }
+
+    &.active {
+      @extend $color-btn;
+
+      &:hover {
+        box-shadow: 0 0 .75rem var(--color-pink);
+        color: var(--grey-0);
+      }
+
+      .item {
+        color: currentColor;
+      }
+    }
+
+
+    &.expand {
+      background-color: rgba(0,0,0,.05);
+
+      .submenu {
+        display: block;
+      }
+
+    }
+
+  }
+}

package/source/css/_common/outline/sidebar/quick.styl

@@ -0,0 +1,43 @@
+#quick {
+  display: none;
+  align-items: center;
+  flex-wrap: wrap;
+  width: $sidebar-desktop;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  bottom: .125rem;
+
+  li {
+    width: 25%;
+    min-height: 1.875rem;
+    the-transition();
+
+    i {
+      cursor: pointer;
+    }
+
+    a {
+      width: 100%;
+      display: block;
+    }
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  li.percent {
+    display: block;
+    background: var(--primary-color);
+    width: 0;
+    min-height: .125rem;
+  }
+}
+
+#sidebar.affix, #sidebar.on {
+  #quick {
+    display: flex;
+  }
+}
+

package/source/css/_common/outline/sidebar/related.styl

@@ -0,0 +1,56 @@
+.related {
+  font-size: $font-size-small;
+
+  ul {
+
+    padding: 0 .125rem .3125rem 1.25rem;
+    text-align: left;
+
+    li {
+      position: relative;
+      line-height: 1.8;
+      padding-bottom: .625rem;
+
+      a {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: 100%;
+        display: inline-block;
+      }
+
+      &.active a {
+        color: var(--primary-color);
+      }
+
+      &::before {
+        content: "";
+        width: .5rem;
+        height: .5rem;
+        background: var(--primary-color);
+        box-sizing: unset;
+        left: -1.25rem;
+        top: .3125rem;
+        border-radius: 100%;
+        position: absolute;
+        border: .1875rem solid var(--grey-1);
+        z-index: $zindex-1;
+        the-transition();
+      }
+
+      &:hover::before {
+        background: var(--color-blue);
+      }
+
+      &:not(:last-child)::after {
+        content: "";
+        height: 100%;
+        width: .125rem;
+        background: var(--color-red-a3);
+        position: absolute;
+        left: -.875rem;
+        top: .5rem;
+      }
+    }
+  }
+}

package/source/css/_common/outline/sidebar/sidebar.styl

@@ -0,0 +1,75 @@
+#sidebar {
+  position: static;
+  width: $sidebar-desktop;
+  top: 0;
+  bottom: 0;
+  the-transition();
+
+  +tablet-mobile() {
+    display: none;
+    position: fixed;
+    right: 0;
+    background: var(--grey-1);
+    box-shadow: 0 .375rem .9375rem .3125rem rgba(0, 0, 0, .2);
+    z-index: $zindex-3;
+  }
+
+  &.affix {
+    >.inner {
+      position: fixed;
+      top: 0;
+    }
+    .panels {
+      padding-top: 3.625rem;
+      height: 100vh;
+    }
+  }
+
+  >.inner {
+    position: relative;
+    width: $sidebar-desktop;
+    color: var(--grey-6);
+    text-align: center;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    z-index: $zindex-1;
+  }
+}
+
+.panels {
+  padding: 4.6875rem 0 2rem;
+  width: 100%;
+  overflow: hidden;
+
+  .inner {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    width: auto;
+    height: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .panel {
+    display: none;
+    padding: .875rem .9375rem 2rem;
+  }
+}
+
+
+@import 'dimmer';
+@import 'author';
+@import 'menu';
+@import 'social';
+
+@import 'quick';
+@import 'tab';
+
+@import 'toc';
+@import 'related';
+@import 'state';

package/source/css/_common/outline/sidebar/social.styl

@@ -0,0 +1,69 @@
+.social {
+  margin-top: .9375rem;
+  text-align: center;
+  .item {
+    display: inline-block;
+    width: 1.875rem;
+    height: 1.875rem;
+    line-height: 1.875rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    border-radius: 38%;
+
+    i {
+      font-size: 1.4em;
+      vertical-align: middle;
+      transform: scale(.8);
+    }
+
+
+    &::before {
+      top: 90%;
+      left: -110%;
+      content: "";
+      width: 120%;
+      height: 120%;
+      position: absolute;
+      transform: rotate(45deg);
+    }
+
+    &::before,
+    i {
+      the-transition(.35s, cubic-bezier(.31, -.105, .43, 1.59));
+    }
+
+    &:focus::before,
+    &:hover::before {
+      top: -10%;
+      left: -10%;
+    }
+
+    $social = hexo-config('social');
+
+    for type in $social {
+      for i in split(" || ", slice(type, 1)) {
+          color = slice(i, 1, -1)
+      }
+
+      &.{slice(type, 0, 1)} {
+
+        &::before {
+          background-color: unquote(color);
+        }
+        i {
+          color: unquote(color);
+        }
+
+      }
+    }
+
+
+    &:focus i,
+    &:hover i {
+      color: var(--grey-0);
+      transform: scale(1);
+    }
+
+  }
+}

package/source/css/_common/outline/sidebar/state.styl

@@ -0,0 +1,37 @@
+.state {
+  display: flex;
+  justify-content: center;
+  line-height: 1.4;
+  margin-top: .625rem;
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+
+
+  .item {
+    padding: 0 .9375rem;
+
+    &:not(:first-child) {
+      border-left: .0625rem solid var(--grey-4);
+    }
+
+    a {
+      border-bottom: none;
+    }
+
+    .count {
+      display: block;
+      font-size: $font-size-larger;
+      font-weight: 600;
+      text-align: center;
+    }
+
+    .name {
+      color: inherit;
+      font-size: $font-size-small;
+    }
+  }
+
+
+
+}

package/source/css/_common/outline/sidebar/tab.styl

@@ -0,0 +1,71 @@
+#sidebar .tab {
+  position: absolute;
+  display: inline-flex;
+  padding: 1.875rem 0 .625rem;
+  margin: 0;
+  min-height: 1.875rem;
+
+
+  .item {
+    cursor: pointer;
+    display: inline-flex;
+    font-size: $font-size-small;
+    padding: .3125rem .9375rem;
+    color: var(--grey-5);
+
+    border-radius: .625rem;
+    text-align: center;
+    text-decoration: none;
+    background-color: rgba(0, 0, 0, .08);
+
+    the-transition(.2s, ease-out);
+
+    &:nth-child(2) {
+      margin: auto .625rem;
+    }
+
+    span {
+      display: none;
+      word-break: keep-all;
+    }
+
+    &.active span {
+      display: inherit;
+    }
+
+    &:hover,
+    &.active {
+      @extend $color-btn;
+    }
+
+
+    &.active:hover {
+      box-shadow: 0 0 .75rem var(--color-pink);
+    }
+
+    &::before {
+      font-family-icons();
+    }
+
+    &.contents::before {
+      @extend .i-list-ol:before;
+    }
+
+    &.related::before {
+      @extend .i-sitemap:before;
+    }
+
+    &.overview::before {
+      @extend .i-home:before;
+    }
+
+    &.active::before {
+      margin-right: .3125rem;
+    }
+  }
+
+}
+
+#sidebar.affix .tab {
+  padding-top: .625rem;
+}

package/source/css/_common/outline/sidebar/toc.styl

@@ -0,0 +1,47 @@
+.contents {
+  ol {
+
+    padding: 0 .125rem .3125rem .625rem;
+    text-align: left;
+
+    >ol {
+      padding-left: 0;
+    }
+  }
+
+  .toc-item {
+    font-size: $font-size-medium;
+    line-height: 1.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .toc-child {
+    display: none;
+  }
+
+  .active>.toc-child {
+    display: block;
+  }
+
+  .current>.toc-child {
+    display: block;
+
+    >.toc-item {
+      display: block;
+    }
+  }
+
+  .active>a {
+    color: var(--primary-color);
+  }
+
+  .current>a {
+    color: var(--primary-color);
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}