hexo-theme-shokax 0.0.1-alpha1

package/source/css/_common/components/post/expand.styl

@@ -0,0 +1,264 @@
+
+@keyframes rainbow {
+  to {
+    background-position: -2000vw;
+  }
+}
+
+.md {
+  p,
+  table,
+  pre,
+  blockquote,
+  img,
+  .tabs,
+  .links {
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul, dd, ol {
+    ul, ol {
+      margin-top: 0;
+    }
+  }
+
+  a {
+    color: var(--primary-color); //原始链接颜色
+
+    &:hover {
+      color: var(--color-blue); //鼠标经过颜色
+    }
+  }
+
+  for headline in (1 .. 6) {
+    h{headline} {
+      font-size: $font-size-headings-base - $font-size-headings-step * headline;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    padding-top: .625rem;
+
+    &:hover .anchor {
+      &::before, &::after {
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  h1::after {
+    content: "";
+    display: block;
+    box-sizing: unset;
+    width: 100%;
+    height: .0625rem;
+    background: var(--grey-3);
+    padding-right: 1.25rem;
+    margin-left: -1.25rem;
+    margin-top: .3125rem;
+  }
+
+  .anchor {
+    border-bottom-style: none;
+    color: var(--grey-4);
+    float: right;
+    margin-left: .625rem;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  .anchor::before,
+  .anchor::after {
+    color: var(--grey-4);
+    position: absolute;
+    font-weight: normal;
+    the-transition(, ease-out);
+  }
+
+  .active .anchor::before,
+  .active .anchor::after {
+    color: var(--primary-color);
+  }
+
+  p {
+    margin: 0 0 .8rem;
+  }
+
+  blockquote {
+    font-size: 90%;
+    background-color: var(--grey-2);
+    margin: 1.25rem 0;
+    border-radius: .1875rem;
+
+    ul {
+      margin: .625rem 0 !important;
+    }
+
+    ul > li::before {
+      width: .375rem !important;
+      height: .375rem !important;
+      top: .6875rem !important;
+    }
+
+    p, ol, ul {
+      &:last-child {
+        margin-bottom: 0!important;
+      }
+    }
+  }
+
+  >blockquote {
+    border-left-color: var(--primary-color);
+  }
+
+  iframe {
+    margin-bottom: 1.25rem;
+  }
+
+  .image-info {
+    display: block;
+    text-align: center;
+    font-size: $font-size-smaller;
+    color: var(--grey-4);
+  }
+
+  .video-container {
+    height: 0;
+    margin-bottom: 1.25rem;
+    overflow: hidden;
+    padding-top: 75%;
+    position: relative;
+    width: 100%;
+
+    iframe,
+    object,
+    embed {
+      height: 100%;
+      left: 0;
+      margin: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .kbd, kbd {
+    background-color: var(--grey-1);
+    background-image: linear-gradient(var(--grey-2), var(--grey-0), var(--grey-2));
+    border: .0625rem solid var(--grey-4);
+    border-radius: .2rem;
+    box-shadow: .1rem .1rem .2rem var(--grey-9-a1);
+    font-family: inherit;
+    padding: .1rem .3rem;
+    white-space: nowrap;
+  }
+
+  mark {
+    background-color: #dbfdad;
+  }
+
+  ins {
+    --line-color: var(--note-hover, var(--primary-color));
+    text-decoration: none;
+    border-bottom: .125rem solid var(--line-color);
+
+    &.wavy {
+      text-decoration-style: wavy;
+      text-decoration-line: underline;
+      text-decoration-color: var(--line-color);
+      border-bottom: none;
+    }
+
+    &.dot {
+      border-bottom: .2rem dotted var(--line-color);
+    }
+  }
+
+  s {
+    color: var(--grey-5);
+    text-decoration-color: var(--note-hover, var(--grey-5));
+  }
+
+  ruby {
+    padding: 0 .3125rem;
+  }
+
+  .katex-display {
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  .spoiler:not(.bulr) {
+    background-color: var(--text-color);
+    color: var(--text-color);
+    text-shadow: none;
+    transition: color .3s;
+    padding:0 .1875rem;
+
+    &:hover {
+      color: #FFF;
+    }
+  }
+
+  .bulr {
+    text-shadow: rgba(0, 0, 0, .7) 0rem 0rem .625rem;
+    color: transparent;
+  }
+
+  .rainbow {
+    background-image: linear-gradient( to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
+    background-size: 110vw;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow 60s linear infinite;
+  }
+}
+
+
+.article .md {
+
+  .anchor::before,
+  .anchor::after {
+    content: "H";
+    font-family: $font-family-posts;
+    left: -1.875rem;
+    top: 1rem;
+    width: 1.25rem;
+    height: 1.5625rem;
+    text-align: right;
+    visibility: visible;
+    font-size: 80%;
+
+    +mobile-small() {
+      left: -.625rem;
+    }
+  }
+
+  .anchor::after {
+    font-size: 50%;
+    left: -1.375rem;
+    line-height: 3;
+
+    +mobile-small() {
+      left: -.1875rem;
+    }
+  }
+
+  for headline in (1 .. 6) {
+    h{headline} .anchor::after {
+      content: \"headline\";
+    }
+  }
+}
+

package/source/css/_common/components/post/footer.styl

@@ -0,0 +1,11 @@
+.post footer {
+  &::before {
+    content: "";
+    width: 100%;
+    height: .0625rem;
+    background: var(--grey-3);
+    display: block;
+    margin: 1.25rem auto 0;
+  }
+
+}

package/source/css/_common/components/post/header.styl

@@ -0,0 +1,79 @@
+.post header {
+  font-size: $font-size-large;
+  margin-bottom: .625rem;
+
+
+  .title {
+    font-size: $font-size-largest;
+    margin: initial;
+    text-align: center;
+    word-wrap();
+    padding-bottom: .625rem;
+  }
+
+
+  .link {
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+
+    .i-link-alt {
+      font-size: $font-size-small;
+      margin-left: .3125rem;
+    }
+  }
+
+  .meta {
+    text-align: center;
+    border-top: .0625rem dashed var(--grey-9-a1);
+    font-family: $font-family-posts;
+  }
+
+}
+
+
+.post .meta {
+    color: var(--grey-5);
+    font-size: $font-size-smallest;
+    text-align: right;
+
+    .item {
+      //border-radius: .625rem;
+      //padding: 0 .625rem;
+      display: inline-block;
+      //margin-bottom: .3125rem;
+      margin-right: .625rem;
+      //the-transition();
+    }
+
+    /*.item:nth-child(1) {
+      background-color: var(--color-red-a1);
+      color: var(--color-red);
+      &:hover {
+        background-color: var(--color-red-a3);
+      }
+    }
+    .item:nth-child(2) {
+      background-color: alpha($blue,.15);
+      color: $blue;
+      &:hover {
+        background-color: alpha($blue,.3);
+      }
+    }
+    .item:nth-child(3) {
+      background-color: alpha($orange,.15);
+      color: $orange;
+      &:hover {
+        background-color: alpha($orange ,.3);
+      }
+    }*/
+
+    .icon {
+      margin-right: .1875rem;
+
+      +tablet-mobile() {
+        display: inline-block;
+      }
+    }
+
+  }

package/source/css/_common/components/post/nav.styl

@@ -0,0 +1,63 @@
+.post-nav {
+  display: flex;
+  margin-bottom: 1rem;
+
+  +mobile() {
+    flex-direction: column;
+  }
+
+  .item {
+    width: 50%;
+    +mobile() {
+      width: 100%;
+    }
+
+    a {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      color: var(--header-text-color);
+      padding: 1.25rem 2.5rem;
+      background-size: cover;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg,#434343,#000);
+        opacity: .5;
+        the-transition();
+        z-index: -1;
+        top: 0;
+        left: 0;
+      }
+
+      &:hover {
+        &::before {
+          opacity: .4;
+        }
+      }
+    }
+
+    span {
+      font-size: $font-size-smaller;
+    }
+
+    &.left {
+      span, h3 {
+        align-self: flex-start;
+      }
+    }
+
+    &.right {
+      span, h3 {
+        align-self: flex-end;
+        text-align: right;
+      }
+    }
+
+  }
+
+}

package/source/css/_common/components/post/post.styl

@@ -0,0 +1,29 @@
+.post.block {
+  padding: 0 2rem;
+}
+
+.md {
+  font-family: $font-family-posts;
+  word-wrap();
+
+  .exturl .ic {
+    font-size: $font-size-small;
+    margin-left: .25rem;
+  }
+
+  .button {
+    margin-top: 2.5rem;
+    text-align: center;
+  }
+}
+
+
+@import 'breadcrumb';
+@import 'header';
+@import 'nav';
+@import 'expand';
+@import 'rtl';
+@import 'footer';
+@import 'tags';
+@import 'reward';
+@import 'copyright';

package/source/css/_common/components/post/reward.styl

@@ -0,0 +1,50 @@
+.reward {
+  margin: 1.25rem auto;
+  padding: .625rem 0;
+  text-align: center;
+
+  button {
+    background: var(--primary-color);
+    border: 0;
+    border-radius: .3125rem;
+    color: var(--grey-0);
+    cursor: pointer;
+    line-height: 2;
+    outline: 0;
+    padding: 0 .9375rem;
+    vertical-align: text-top;
+
+    &:hover {
+      background: var(--primary-color);
+    }
+
+    i {
+      margin-right: .3125rem;
+    }
+  }
+
+  p {
+    font-size: $font-size-smaller;
+    color: var(--grey-5);
+    margin: 0;
+  }
+}
+
+#qr {
+  padding-top: 1.25rem;
+  display: none;
+
+  a {
+    border: 0;
+  }
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  p {
+    text-align: center;
+  }
+
+}

package/source/css/_common/components/post/rtl.styl

@@ -0,0 +1,12 @@
+.rtl {
+  &.body {
+    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
+      direction: rtl;
+      font-family: UKIJ Ekran;
+    }
+  }
+
+  &.title {
+    font-family: UKIJ Ekran;
+  }
+}

package/source/css/_common/components/post/tags.styl

@@ -0,0 +1,39 @@
+.post .tags {
+  text-align: left;
+  margin-top: .625rem;
+  font-size: $font-size-smallest;
+
+  a {
+    display: inline-block;
+    position: relative;
+    padding: 0 .3125rem;
+    border-radius: .3125rem;
+    background: var(--note-bg);
+    color: var(--note-text);
+
+    &:not(:last-child) {
+      margin-right: .625rem;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      height: 100%;
+      width: 0;
+      right: 0;
+      background: var(--color-red-a1);
+      border-radius: .25rem;
+      the-transition();
+    }
+
+    &:hover {
+      color: var(--primary-color);
+
+      &:before {
+        width: 104%;
+        left: -2%;
+      }
+    }
+  }
+}

package/source/css/_common/components/tags/collapse.styl

@@ -0,0 +1,72 @@
+::-webkit-details-marker {
+  display: none;
+}
+
+details{
+  > summary:first-of-type {
+    list-style-type: none;
+  }
+
+  summary {
+    outline: none;
+    cursor: pointer;
+    padding: .625rem;
+    background: var(--note-bg, none);
+    border-radius: .25rem;
+    transition: all .4s ease;
+
+    &::before {
+      font-family-icons();
+      @extend .i-angle-right:before;
+      color: var(--grey-4);
+      margin-right: .5rem;
+    }
+  }
+
+  > div {
+    padding: .625rem;
+  }
+
+  &.primary, &.info, &.success, &.warning, &.danger {
+    margin: 0 0 .8rem;
+    summary {
+      color: var(--note-text);
+      &::before {
+        color: var(--note-text);
+      }
+    }
+  }
+}
+
+details[open] {
+  background: var(--note-bg, none);
+  border-radius: .25rem;
+  color: var(--grey-6);
+
+  summary {
+    background: var(--note-hover, var(--grey-2));
+    border-radius: .25rem;
+
+    &::before {
+      @extend .i-angle-down:before;
+      color: var(--primary-color);
+    }
+  }
+
+  > div {
+    margin: 0 0 .8rem;
+    @extend .fade-in;
+  }
+
+  &.primary, &.info, &.success, &.warning, &.danger {
+    color: var(--note-text);
+    > summary {
+      color: #FFF;
+      border-radius: .25rem .25rem 0 0;
+
+      &::before {
+        color: #FFF;
+      }
+    }
+  }
+}

package/source/css/_common/components/tags/container.styl

@@ -0,0 +1,49 @@
+.md {
+  .note, details {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: .1875rem;
+      border-bottom: initial;
+      margin-bottom: 0;
+      padding-top: 0;
+    }
+
+    p {
+      line-height: 1.8;
+    }
+
+    a {
+      &:not(.btn) {
+        color: var(--note-hover);
+        border-bottom: .0625rem dashed var(--note-text);
+
+        &:hover {
+          color: var(--note-text);
+          border-bottom-color: var(--note-text);
+        }
+      }
+    }
+
+    ul {
+      li::before {
+        background: var(--note-text);
+      }
+    }
+
+    ol {
+      li:before {
+        background: var(--note-text, var(--primary-color)) !important;
+        width: .8rem;
+        height: .8rem;
+        font-size: .45rem;
+        line-height: .8rem;
+        top: .4rem;
+        left: -1.2rem
+      }
+    }
+  }
+}
+

package/source/css/_common/components/tags/label.styl

@@ -0,0 +1,12 @@
+span.label {
+  display: inline;
+  border-radius: .3rem;
+  border: .0625rem solid;
+  padding: .2rem .3rem;
+  font-family: $font-family-monospace;
+  font-size: $font-size-medium;
+
+  background: var(--note-bg, var(--grey-2));
+  border-color: var(--note-border, var(--grey-4));
+  color: var(--note-text, var(--grey-6));
+}