hexo-theme-shokax 0.0.1-alpha1

package/source/css/_common/scaffolding/animate.styl

@@ -0,0 +1,318 @@
+// animation: name duration timing-function delay iteration-count direction;
+
+.rotate {
+  animation: rotate 6s linear infinite;
+}
+
+.beat {
+  animation: beat 1.33s ease-in-out infinite;
+}
+
+.flash {
+  animation: flash 6s cubic-bezier(.22, .61, .36, 1) infinite;
+}
+
+.shake {
+  animation: shake 1s;
+}
+
+.fade-in {
+  animation: fadeIn .5s;
+}
+
+.fade-out {
+  animation: fadeOut .3s;
+}
+
+.up-down {
+  animation: UpDown 2s infinite;
+}
+
+.down-up {
+  animation: DownUp 2s infinite;
+}
+
+.slide {
+  animation: slide .5s;
+}
+
+.slide-up-in {
+  animation: slideUpIn .3s;
+}
+
+.slide-up-big-in {
+  animation: slideUpBigIn .5s;
+}
+
+.slide-right-in {
+  animation: slideRightIn .3s;
+}
+
+.slide-left-in {
+  animation: slideLeftIn .3s;
+}
+
+.slide-down-in {
+  animation: slideDownIn .3s;
+}
+
+.blur {
+  animation: blur .8s ease-in-out forwards;
+}
+
+.elastic {
+  animation: elastic 1s;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(720deg);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+@keyframes rotate-needle-pause {
+    0% {
+        transform: rotateZ(-35deg)
+    }
+    100% {
+        transform: rotateZ(-60deg)
+    }
+}
+
+
+@keyframes rotate-needle-resume {
+    0% {
+        transform: rotateZ(-60deg)
+    }
+
+    100% {
+        transform: rotateZ(-35deg)
+    }
+}
+
+@keyframes beat {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  10%,
+  30% {
+    transform: scale(.9);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: scale(1.1);
+  }
+
+  50%,
+  70% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes flash {
+
+  0%,
+  50%,
+  to {
+    opacity: 1
+  }
+
+  25%,
+  75% {
+    opacity: 0
+  }
+}
+
+@keyframes shake {
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes blur {
+    0% {
+        filter: blur(10px)
+    }
+
+    to {
+        filter: blur(0)
+    }
+}
+
+@keyframes blur-dark {
+    0% {
+        filter: blur(10px) brightness(.9)
+    }
+
+    to {
+        filter: blur(0) brightness(.9)
+    }
+}
+
+@keyframes UpDown {
+  0%, 100% {
+    opacity: .8;
+    transform: translateY(10px);
+  }
+  50% {
+    opacity: .4;
+    transform: translateY(0);
+  }
+}
+
+@keyframes DownUp {
+  0%, 100% {
+    opacity: .8;
+    transform: rotate(180deg) translateY(0);
+  }
+  50% {
+    opacity: .4;
+    transform: rotate(180deg) translateY(-10px);
+  }
+}
+
+@keyframes slide {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideRightIn {
+    0% {
+      opacity: 0;
+      transform: translateX(50%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+}
+
+@keyframes slideLeftIn {
+    0% {
+      opacity: 0;
+      transform: translateX(-50%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+}
+
+@keyframes slideUpIn {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+}
+
+@keyframes slideUpBigIn {
+    0% {
+        opacity: 0;
+        transform: translateY(80px)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slideDownIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-18px)
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0)
+  }
+}
+
+@keyframes elastic {
+    0% {
+        transform: scale(0)
+    }
+
+    55% {
+        transform: scale(1)
+    }
+
+    70% {
+        transform: scale(.98)
+    }
+
+    100% {
+        transform: scale(1)
+    }
+}
+

package/source/css/_common/scaffolding/base.styl

@@ -0,0 +1,172 @@
+::selection {
+  background: var(--color-orange);
+  color: var(--grey-2);
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
+  color: var(--text-color);
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+
+  &.loaded {
+    overflow: auto;
+    @extend $big-scrollbar;
+
+    #main .wrap {
+      @extend .slide-up-big-in;
+    }
+
+    #sidebar .panel.active {
+      @extend .slide-up-big-in;
+      display: block;
+    }
+
+    #brand .pjax {
+      @extend .slide-down-in;
+    }
+  }
+
+  +tablet-mobile() {
+    // Remove the padding of body when the sidebar is open.
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  &.fullscreen {
+    overflow: hidden;
+
+    #tool, #sidebar>.inner {
+      z-index: 0;
+    }
+  }
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-headings;
+  font-weight: bold;
+  line-height: 1.5;
+  margin: 1.25rem 0 .9375rem;
+  &.title {
+    font-family: $font-family-title;
+  }
+}
+
+a {
+  border: none;
+  color: currentColor;
+  outline: 0;
+  text-decoration: none;
+  word-wrap();
+  the-transition();
+
+  &:hover {
+    border-bottom-color: var(--color-blue);
+    color: var(--color-blue);
+  }
+
+  &::before, &::after {
+    the-transition(.4s);
+  }
+
+  cursor: pointer;
+}
+
+a, li, div {
+  -webkit-tap-highlight-color: transparent;
+}
+
+li {
+  list-style: none;
+}
+
+iframe, img, video {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+
+hr {
+  background-image: repeating-linear-gradient(-45deg, var(--grey-3), var(--grey-4) .25rem, transparent .25rem, transparent .5rem);
+  border: none;
+  height: .125rem;
+  margin: 1.5rem 0;
+}
+
+blockquote {
+  border-left: .25rem solid var(--grey-4);
+  color: var(--grey-6);
+  margin: 1.25rem 0;
+  padding: .625rem 1.25rem;
+
+  cite::before {
+    content: '-';
+    padding: 0 .3125rem;
+  }
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+input, textarea {
+  color: var(--text-color);
+}
+@font-face {
+  font-family: 'ic';
+  src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot');
+  src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_' + $iconfont + '.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_' + $iconfont + '.woff') format('woff'),
+  url('//at.alicdn.com/t/font_' + $iconfont + '.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_' + $iconfont + '.svg#ic') format('svg');
+}
+
+@font-face {
+    font-family: 'jetbrains-mono';
+    font-display: swap;
+    src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.242/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
+}
+
+.ic {
+  font-family: "ic" !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  width: 1.25em;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+.ic em {
+  font-size: 0;
+}
+
+.ic-lg {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.0667em;
+}
+//.weather {
+//      color: var(--text-color) !important;
+//}

package/source/css/_common/scaffolding/buttons.styl

@@ -0,0 +1,48 @@
+.button {
+  display: inline-block;
+  cursor: pointer;
+  touch-action: manipulation;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  border-radius: .3rem;
+  border: .0625rem solid var(--grey-3);
+
+  color: var(--grey-6);
+  font-size: $font-size-small;
+  font-weight: 400;
+  line-height: 1.5;
+
+  background: transparent;
+  margin-bottom: 0;
+  min-height: 1em;
+  padding: .5em 1.25em;
+  user-select: none;
+  outline: none;
+  will-change: auto;
+  the-transition();
+
+  &+.button {
+    margin-left: 1.25em
+  }
+
+  &:active,
+  &:hover {
+    color: var(--grey-0);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+
+  &:disabled {
+    border-color: var(--grey-4);
+    color: var(--grey-4);
+    background-color: var(--grey-2);
+    cursor: not-allowed
+  }
+
+  .ic {
+    text-align: left;
+    width: (18em / 14);
+  }
+}

package/source/css/_common/scaffolding/divider.styl

@@ -0,0 +1,36 @@
+.divider {
+  margin: 1rem 0;
+  line-height: 1;
+  height: 0;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .05rem;
+  user-select: none;
+  color: var(--grey-4);
+
+  display: table;
+  white-space: nowrap;
+  height: auto;
+  line-height: 1;
+  text-align: center;
+
+  &::after,
+  &::before {
+    content: '';
+    display: table-cell;
+    position: relative;
+    top: 50%;
+    width: 50%;
+    background-repeat: no-repeat;
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC")
+  }
+
+  &::before {
+    background-position: right 1rem top 50%
+  }
+
+  &::after {
+    background-position: left 1rem top 50%
+  }
+
+}