init

23 files changed, 1098 insertions, 0 deletions

diff --git a/themes/even/src/css/_partial/_404.scss b/themes/even/src/css/_partial/_404.scss
new file mode 100644
index 0000000..63eb465
--- /dev/null
+++ b/themes/even/src/css/_partial/_404.scss
@@ -0,0 +1,25 @@
+// ==============================
+// Archive
+// =============================
+
+.not-found {
+  text-align: center;
+
+  .error-emoji {
+    color: #363636;
+    font-size: 3rem;
+  }
+
+  .error-text {
+    color: #797979;
+    font-size: 1.25rem;
+  }
+
+  .error-link {
+    margin-top: 2rem;
+
+    a {
+      color: $theme-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_archive.scss b/themes/even/src/css/_partial/_archive.scss
new file mode 100644
index 0000000..f1431c4
--- /dev/null
+++ b/themes/even/src/css/_partial/_archive.scss
@@ -0,0 +1,100 @@
+// ==============================
+// Archive
+// =============================
+
+.archive {
+  margin: $archive-margin;
+  max-width: $archive-max-width;
+
+  .archive-title {
+    font-family: $global-serif-font-family;
+
+    &.tag,
+    &.category {
+      margin: 15px 0;
+    }
+
+    .archive-name {
+      margin: 0;
+      display: inline-block;
+      font-weight: 400;
+      font-size: $archive-name-font-size;
+      line-height: $archive-name-font-size + 2px;
+    }
+
+    .archive-post-counter {
+      color: $dark-gray;
+    }
+  }
+
+  .collection-title {
+    font-family: $global-serif-font-family;
+  
+    .archive-year {
+      margin: 15px 0;
+      font-weight: 400;
+      font-size: $collection-title-font-size;
+      line-height: $collection-title-font-size + 2px;
+    }
+  }
+
+  .archive-post {
+    padding: $archive-post-padding;
+    border-left: $archive-post-border-left;
+
+    .archive-post-time {
+      margin-right: 10px;
+      color: $dark-gray;
+    }
+
+    .archive-post-title {
+      
+      .archive-post-link {
+        color: $theme-color;
+      }
+    }
+
+    &::first-child {
+      margin-top: 10px;
+    }
+
+    &:hover {
+      border-left: $archive-post-hover-border-left;
+      transition: $archive-post-hover-transition;
+      transform: $archive-post-hover-transform;
+
+      .archive-post-time {
+        color: darken($dark-gray, 10%);
+      }
+
+      .archive-post-title .archive-post-link {
+        color: darken($theme-color, 10%);
+      }
+    }
+  }
+}
+
+@include max-screen() {
+  .archive {
+    margin-left: auto;
+    margin-right: auto;
+
+    .archive-title .archive-name {
+      font-size: $archive-name-font-size - 4px;
+    }
+
+    .collection-title .archive-year {
+      margin: 10px 0;
+      font-size: $collection-title-font-size - 4px;
+    }
+
+    .archive-post {
+      padding: $archive-post-mobile-padding;
+
+      .archive-post-time {
+        font-size: $archive-post-mobile-time-font-size;
+        display: block;
+      }
+    }
+  }
+}
diff --git a/themes/even/src/css/_partial/_back-to-top.scss b/themes/even/src/css/_partial/_back-to-top.scss
new file mode 100644
index 0000000..ee67aa2
--- /dev/null
+++ b/themes/even/src/css/_partial/_back-to-top.scss
@@ -0,0 +1,24 @@
+// ==============================
+// Back to top
+// =============================
+
+.back-to-top {
+  display: none;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transition-duration: 0.3s;
+  z-index: 10;
+
+  &:hover {
+    transform: translateY(-5px); 
+  }
+}
+
+@include max-screen() {
+  .back-to-top {
+    display: none !important;
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_categories.scss b/themes/even/src/css/_partial/_categories.scss
new file mode 100644
index 0000000..f9c413d
--- /dev/null
+++ b/themes/even/src/css/_partial/_categories.scss
@@ -0,0 +1,43 @@
+
+.categories {
+  margin: 2em 0 3em;
+  text-align: center;
+  font-family: $global-serif-font-family;
+
+  .categories-title {
+    display: inline-block;
+    font-size: $categories-title-size;
+    color: $theme-color;
+    border-bottom: $categories-title-border-bottom;
+  }
+
+  .categories-tags {
+    margin: 10px 0;
+
+    .category-link {
+      display: inline-block;
+      position: relative;
+      margin: $categories-tags-link-margin;
+      word-wrap: break-word;
+      transition-duration: 0.2s;
+      transition-property: transform;
+      transition-timing-function: ease-out;
+
+      .category-count {
+        display: inline-block;
+        position: relative;
+        top: -8px;
+        right: -2px;
+        color: $theme-color;
+        font-size: $category-count-font-size;
+      }
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $theme-color;
+        transform: scale(1.1);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_footer.scss b/themes/even/src/css/_partial/_footer.scss
new file mode 100644
index 0000000..1f8cdae
--- /dev/null
+++ b/themes/even/src/css/_partial/_footer.scss
@@ -0,0 +1,10 @@
+// ==============================
+// Post footer
+// =============================
+
+.footer {
+  margin-top: $footer-margin-top;
+
+  @import "_footer/social";
+  @import "_footer/copyright";
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_footer/_copyright.scss b/themes/even/src/css/_partial/_footer/_copyright.scss
new file mode 100644
index 0000000..7d33fe3
--- /dev/null
+++ b/themes/even/src/css/_partial/_footer/_copyright.scss
@@ -0,0 +1,23 @@
+// ==============================
+// Copyright
+// =============================
+
+.copyright {
+  margin: $copyright-margin;
+  color: $dark-gray;
+  text-align: center;
+  font-family: $global-serif-font-family;
+
+  .hexo-link,
+  .theme-link {
+    color: $theme-color;
+  }
+
+  .copyright-year {
+    display: block;
+
+    .heart {
+      font-size: 14px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_footer/_social.scss b/themes/even/src/css/_partial/_footer/_social.scss
new file mode 100644
index 0000000..a23eb69
--- /dev/null
+++ b/themes/even/src/css/_partial/_footer/_social.scss
@@ -0,0 +1,19 @@
+// ==============================
+// Social
+// =============================
+
+.social-links {
+  text-align: center;
+
+  .iconfont {
+    font-size: $social-icon-font-size;
+
+    & + .iconfont {
+      margin-left: $social-link-margin-left;
+    } 
+
+    &:hover {
+      color: $theme-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_header.scss b/themes/even/src/css/_partial/_header.scss
new file mode 100644
index 0000000..d81f17c
--- /dev/null
+++ b/themes/even/src/css/_partial/_header.scss
@@ -0,0 +1,19 @@
+// ==============================
+// Header
+// ==============================
+
+.header {
+  @include clearfix; 
+  padding: $header-padding;
+
+  @import '_header/logo';
+  @import '_header/menu';
+}
+
+
+@include max-screen() {
+  .header {
+    padding: 50px 0 0;
+    text-align: center;
+  }
+}
diff --git a/themes/even/src/css/_partial/_header/_logo.scss b/themes/even/src/css/_partial/_header/_logo.scss
new file mode 100644
index 0000000..cd6435f
--- /dev/null
+++ b/themes/even/src/css/_partial/_header/_logo.scss
@@ -0,0 +1,18 @@
+// ==============================
+// Logo
+// =============================
+
+.logo-wrapper {
+  float: left;
+
+  .logo {
+    font-size: $logo-font-size;
+    font-family: $logo-font-family;
+  }
+}
+
+@include max-screen() {
+  .logo-wrapper {
+    display: none;
+  }
+}
diff --git a/themes/even/src/css/_partial/_header/_menu.scss b/themes/even/src/css/_partial/_header/_menu.scss
new file mode 100644
index 0000000..7209c80
--- /dev/null
+++ b/themes/even/src/css/_partial/_header/_menu.scss
@@ -0,0 +1,35 @@
+// ==============================
+// Menu
+// =============================
+
+.site-navbar {
+  float: right;
+
+  .menu {
+    display: inline-block;
+    position: relative;
+    padding-left: 0;
+    padding-right: 25px;
+    font-family: $global-serif-font-family;
+
+    .menu-item {
+      display: inline-block;
+
+      & + .menu-item {
+        margin-left: $menu-item-margin-left;;
+      }
+
+      @include underline-from-center;
+    }
+
+    .menu-item-link {
+      font-size: $menu-link-font-size;
+    }
+  }
+}
+
+@include max-screen() {
+  .site-navbar {
+    display: none;
+  }
+}
diff --git a/themes/even/src/css/_partial/_mobile.scss b/themes/even/src/css/_partial/_mobile.scss
new file mode 100644
index 0000000..26e4c76
--- /dev/null
+++ b/themes/even/src/css/_partial/_mobile.scss
@@ -0,0 +1,77 @@
+// ==============================
+// Mobile Navbar
+// ==============================
+
+.mobile-navbar {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $mobile-navbar-height;
+  background: $white;
+  box-shadow: 0px 2px 2px $gray;
+  text-align: center;
+  transition: transform 300ms ease;
+  z-index: 99;
+
+  &.fixed-open {
+    transform: translate3d(180px, 0px, 0px);
+  }
+
+  .mobile-header-logo {
+    display: inline-block;
+    margin-right: 50px;
+
+    .logo {
+      font-size: 22px;
+      line-height: $mobile-navbar-height;
+      font-family: $logo-font-family;
+    }
+  }
+
+  .mobile-navbar-icon {
+    color: $theme-color;
+    height: $mobile-navbar-height;
+    width: $mobile-navbar-height;
+    font-size: 24px;
+    text-align: center;
+    float: left;
+    position: relative;
+    transition: background 0.5s;
+
+    @include mobile-menu-icon();
+  }
+}
+
+.mobile-menu {
+  background-color: rgba($deputy-color, 0.5);
+
+  .mobile-menu-list {
+    position: relative;
+    list-style: none;
+    margin-top: 50px;
+    padding: 0;
+    border-top: 1px solid $deputy-color;
+
+    .mobile-menu-item {
+      padding: 10px 30px;
+      border-bottom: 1px solid $deputy-color;
+    }
+
+    a {
+      font-size: 18px;
+      font-family: $global-serif-font-family;
+
+      &:hover {
+        color: $theme-color;
+      }
+    }
+  }
+}
+
+@include max-screen() {
+  .mobile-navbar {
+    display: block;
+  }
+}
diff --git a/themes/even/src/css/_partial/_pagination.scss b/themes/even/src/css/_partial/_pagination.scss
new file mode 100644
index 0000000..c58f8db
--- /dev/null
+++ b/themes/even/src/css/_partial/_pagination.scss
@@ -0,0 +1,36 @@
+// ==============================
+// Pagination
+// ==============================
+
+.pagination {
+  margin: $pagination-margin;
+  @include clearfix;
+
+  .prev,
+  .next {
+    font-weight: 600;
+    font-size: $pagination-font-size;
+    font-family: $global-serif-font-family;
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 0.3s;
+  }
+
+  .prev {
+    float: left;
+
+    &:hover {
+      color: $theme-color;
+      transform: translateX(-4px); 
+    }
+  }
+
+  .next {
+    float: right;
+
+    &:hover {
+      color: $theme-color;
+      transform: translateX(4px); 
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_post.scss b/themes/even/src/css/_partial/_post.scss
new file mode 100644
index 0000000..a980b29
--- /dev/null
+++ b/themes/even/src/css/_partial/_post.scss
@@ -0,0 +1,24 @@
+// ==============================
+// Post
+// ==============================
+
+.posts {
+  margin-bottom: $post-list-margin-bottom;
+  border-bottom: $post-border;
+}
+
+.post {
+  padding: $post-padding;
+
+  & + .post {
+    border-top: $post-border;
+  }
+
+  @import '_post/header';
+  @import '_post/toc';
+  @import '_post/content';
+  @import '_post/copyright';
+  @import '_post/reward';
+  @import '_post/footer';
+  @import '_post/outdated';
+}
diff --git a/themes/even/src/css/_partial/_post/_code.scss b/themes/even/src/css/_partial/_post/_code.scss
new file mode 100644
index 0000000..2a23a77
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_code.scss
@@ -0,0 +1,140 @@
+code, pre {
+  padding: 7px;
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+  background: $code-background;
+}
+
+code {
+  padding: 3px 5px;
+  border-radius: 4px;
+  color: $code-color;
+}
+
+figure.highlight {
+  margin: 1em 0;
+  border-radius: 5px;
+  overflow-x: auto;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  position: relative;
+
+  table {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      padding: 2px 7px;
+      font-size: $code-font-size;
+      font-weight: bold;
+      color: darken($gray, 10%);
+      background: darken($code-background, 3%);
+      content: 'Code';
+    }
+  }
+
+  @each $sign, $text in $code-type-list {
+    &.#{$sign} > table::after {
+      content: $text;
+    }
+  }
+
+  .code {
+    pre {
+      margin: 0;
+      padding: 30px 10px 10px;
+    }
+  }
+
+  .gutter {
+    width: 10px;
+    color: $gray;
+
+    pre {
+      margin: 0;
+      padding: 30px 7px 10px;
+    }
+  }
+
+  .line {
+    // Fix code block null line height and
+    // Synchronous gutter and code line highly.
+    height: round($code-font-size * 1.5);
+  }
+
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .code {
+    .hljs-comment,
+    .hljs-quote {
+      color: map-get($code-highlight-color, comment);
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-addition {
+      color: map-get($code-highlight-color, keyword);
+    }
+
+    .hljs-number,
+    .hljs-string,
+    .hljs-meta .hljs-meta-string,
+    .hljs-literal,
+    .hljs-doctag,
+    .hljs-regexp {
+      color: map-get($code-highlight-color, number);
+    }
+
+    .hljs-title,
+    .hljs-section,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: map-get($code-highlight-color, title);
+    }
+
+    .hljs-attribute,
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-class .hljs-title,
+    .hljs-type {
+      color: map-get($code-highlight-color, attribute);
+    }
+
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-subst,
+    .hljs-meta,
+    .hljs-meta .hljs-keyword,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-link {
+      color: map-get($code-highlight-color, symbol);
+    }
+
+    .hljs-built_in,
+    .hljs-deletion {
+      color: map-get($code-highlight-color, built_in);
+    }
+
+    .hljs-formula {
+      background: map-get($code-highlight-color, formula);
+    }
+    
+    .hljs-emphasis {
+      font-style: italic;
+    }
+    
+    .hljs-strong {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/themes/even/src/css/_partial/_post/_content.scss b/themes/even/src/css/_partial/_post/_content.scss
new file mode 100644
index 0000000..87c788b
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_content.scss
@@ -0,0 +1,143 @@
+// ==============================
+// Post content
+// ==============================
+
+.post-content {
+  word-wrap: break-word;
+
+  @for $i from 1 through 6 {
+    h#{$i} {
+      font-weight: 400;
+      font-family: $global-serif-font-family;
+    }
+  }
+
+  a {
+    color: $theme-color;
+    word-break: break-all;
+
+    &:hover {
+      border-bottom: $content-link-border;
+    }
+
+    &.fancybox {
+      border: 0;
+    }
+  }
+
+  blockquote {
+    margin: 2em 0;
+    padding: 10px 20px;
+    position: relative;
+    color: rgba(#34495e, 0.8);
+    background-color: $content-blockquote-backgroud;
+    border-left: $content-blockquote-border-left;
+    box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+
+    p {
+      margin: 0;
+    }
+  }
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  > table {
+    max-width: 100%;
+    margin: 10px 0;
+    border-spacing: 0;
+    box-shadow: 2px 2px 3px rgba(0,0,0,.125);
+
+    thead {
+      background: $deputy-color;
+    }
+
+    th, td {
+      padding: 5px 15px;
+      border: 1px double $content-table-border-color;
+    }
+
+    tr:hover {
+      background-color: $deputy-color;
+    }
+  }
+
+  @import 'code';
+
+  .post-summary {
+    margin-bottom: 1em;
+  }
+
+  .read-more {
+    .read-more-link {
+      color: $theme-color;
+      font-size: 1.1em;
+      font-family: $global-serif-font-family;
+    
+      &:hover {
+        border-bottom: $post-readMore-border-bottom;
+      }
+    }
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 0.25em;
+    background-color: #fafafa;
+    border: 1px solid #dbdbdb;
+    border-bottom-color: #b5b5b5;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #b5b5b5;
+    font-size: 0.8em;
+    line-height: 1.25;
+    font-family: "SFMono-Regular","Liberation Mono","Roboto Mono",Menlo,Monaco,Consolas,"Courier New",Courier,monospace;
+    color: #4a4a4a;
+  }
+
+  dl dt::after {
+    content: ':';
+  }
+
+  figure {
+    &.center {
+      text-align: center;
+    }
+
+    &.right {
+      text-align: right;
+    }
+
+    &.left {
+      text-align: left;
+    }
+
+    figcaption h4 {
+      color: #b5b5b5;
+      font-size: 0.9rem;
+    }
+  }
+
+  .task-list {
+    list-style: none;
+    padding-left: 1.5rem;
+  }
+
+  .align-center {
+    text-align: center;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .align-left {
+    text-align: left;
+  }
+
+  .MJXc-display {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
diff --git a/themes/even/src/css/_partial/_post/_copyright.scss b/themes/even/src/css/_partial/_post/_copyright.scss
new file mode 100644
index 0000000..374061f
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_copyright.scss
@@ -0,0 +1,29 @@
+.post-copyright {
+  margin-top: 20px;
+  padding-top: 10px;
+  border-top: 1px dashed $light-gray;
+
+  .copyright-item {
+    margin: 5px 0;
+
+    a {
+      color: $theme-color;
+      word-wrap: break-word;
+
+      &:hover {
+        border-bottom: $content-link-border;
+      }
+    }
+
+    .item-title {
+      display: inline-block;
+      min-width: 5rem;
+      margin-right: .5rem;
+      text-align: right;
+
+      &:after {
+        content: " :";
+      }
+    }
+  }
+}
diff --git a/themes/even/src/css/_partial/_post/_footer.scss b/themes/even/src/css/_partial/_post/_footer.scss
new file mode 100644
index 0000000..012110f
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_footer.scss
@@ -0,0 +1,74 @@
+// ==============================
+// Post footer
+// ==============================
+
+.post-footer {
+  margin-top: $post-footer-margin-top;
+  border-top: $post-footer-border-top;
+  font-family: $global-serif-font-family;
+
+  .post-tags {
+    padding: $post-tags-padding;
+
+    a {
+      margin-right: 5px;
+      color: $theme-color;
+      word-break: break-all;
+
+      &::before {
+        content: '#';
+      }
+    }
+  }
+
+  .post-nav {
+    margin: 1em 0;
+    @include clearfix;
+
+    .prev,
+    .next {
+      font-weight: 600;
+      font-size: $post-nav-font-size;
+      font-family: $global-serif-font-family;
+      transition-property: transform;
+      transition-timing-function: ease-out;
+      transition-duration: 0.3s;
+    }
+
+    .prev {
+      float: left;
+
+      &:hover {
+        color: $theme-color;
+        transform: translateX(-4px); 
+      }
+    }
+
+    .next {
+      float: right;
+
+      &:hover {
+        color: $theme-color;
+        transform: translateX(4px); 
+      }
+    }
+
+    .nav-mobile {
+      display: none;
+    }
+  }
+}
+
+@include max-screen() {
+  .post-footer {
+    .post-nav {
+      .nav-default {
+        display: none;
+      }
+
+      .nav-mobile {
+        display: inline;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_post/_header.scss b/themes/even/src/css/_partial/_post/_header.scss
new file mode 100644
index 0000000..7faf4e3
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_header.scss
@@ -0,0 +1,46 @@
+.post-header {
+  margin-bottom: 20px;
+
+  .post-title {
+    margin: 0;
+    font-size: $post-title-font-size;
+    font-weight: $post-title-font-weight;
+    font-family: $global-serif-font-family;
+  }
+
+  .post-link {
+    @include underline-from-center;
+  }
+
+  .post-meta {
+    font-size: 14px;
+    color: $post-meta-font-color;
+
+    .post-time {
+      font-size: 15px;
+    }
+
+    .post-category {
+      display: inline;
+
+      a {
+        color: inherit;
+
+        &::before {
+          content: '·';
+        }
+
+        &:hover {
+          color: $theme-color;
+        }
+      }
+    }
+
+    .more-meta {
+      &::before {
+        content: '·';
+      }
+    }
+
+  }
+}
diff --git a/themes/even/src/css/_partial/_post/_outdated.scss b/themes/even/src/css/_partial/_post/_outdated.scss
new file mode 100644
index 0000000..be7b5ea
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_outdated.scss
@@ -0,0 +1,25 @@
+.post-outdated {
+  .hint {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid rgb(66, 172, 243);
+    background-color: rgb(239, 245, 255);
+    border-color: rgb(66, 172, 243);
+  }
+
+  .warn {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid #f9cf63;
+    background-color: #ffffc0;
+    border-color: #f9cf63;
+  }
+}
+
+
+
+
diff --git a/themes/even/src/css/_partial/_post/_reward.scss b/themes/even/src/css/_partial/_post/_reward.scss
new file mode 100644
index 0000000..3a03a9f
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_reward.scss
@@ -0,0 +1,54 @@
+.post-reward {
+  margin-top: 20px;
+  padding-top: 10px;
+  text-align: center;
+  border-top: 1px dashed $light-gray;
+
+  .reward-button {
+    margin: 15px 0;
+    padding: 3px 7px;
+    display: inline-block;
+    color: $theme-color;
+    border: 1px solid $theme-color;
+    border-radius: 5px;
+    cursor: pointer;
+
+    &:hover {
+      color: $white;
+      background-color: $theme-color;
+      transition: 0.5s;
+    }
+  }
+
+  #reward:checked {
+    & ~ .qr-code {
+      display: block;
+    }
+
+    & ~ .reward-button {
+      display: none;
+    }
+  }
+
+  .qr-code {
+    display: none;
+
+    .qr-code-image {
+      display: inline-block;
+      min-width: 200px;
+      width: 40%;
+      margin-top: 15px;
+
+      span {
+        display: inline-block;
+        width: 100%;
+        margin: 8px 0;
+      }
+    }
+
+    .image {
+      width: 200px;
+      height: 200px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/even/src/css/_partial/_post/_toc.scss b/themes/even/src/css/_partial/_post/_toc.scss
new file mode 100644
index 0000000..8327055
--- /dev/null
+++ b/themes/even/src/css/_partial/_post/_toc.scss
@@ -0,0 +1,55 @@
+.post-toc {
+  position: absolute;
+  width: $post-toc-width;
+  margin-left: $post-toc-margin-left;
+  padding: 10px;
+  font-family: $global-serif-font-family;
+  border-radius: 5px;
+  background: $post-toc-backgroud;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  word-wrap: break-word;
+  box-sizing: border-box;
+
+  .post-toc-title {
+    margin: 0 10px;
+    font-size: $post-toc-title-size;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+
+  .post-toc-content {
+    font-size: $post-toc-content;
+
+    &.always-active ul {
+      display: block;
+    }
+
+    >nav>ul {
+      margin: 10px 0;
+    }
+
+    ul {
+      padding-left: 20px;
+      list-style: $post-toc-list-style;
+
+      ul {
+        padding-left: 15px;
+        display: none;
+      }
+
+      .has-active > ul {
+        display: block;
+      }
+    }
+
+    .toc-link.active {
+      color: $theme-color;
+    }
+  }
+}
+
+@include max-screen($toc-max-sreen-width) {
+  .post-toc {
+    display: none;
+  }
+}
diff --git a/themes/even/src/css/_partial/_slideout.scss b/themes/even/src/css/_partial/_slideout.scss
new file mode 100644
index 0000000..2dc757d
--- /dev/null
+++ b/themes/even/src/css/_partial/_slideout.scss
@@ -0,0 +1,33 @@
+// ==============================
+// slideout (https://github.com/mango/slideout)
+// ==============================
+
+.slideout-menu {
+  position: fixed;
+  top: 0;
+  left: 0px;
+  bottom: 0;
+  width: 180px;
+  min-height: 100vh;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  z-index: 0;
+  display: none;
+}
+
+.slideout-panel {
+  position: relative;
+  z-index: 1;
+  background-color: $white;
+  min-height: 100vh;
+}
+
+.slideout-open,
+.slideout-open body,
+.slideout-open .slideout-panel {
+  overflow: hidden;
+}
+
+.slideout-open .slideout-menu {
+  display: block;
+}
diff --git a/themes/even/src/css/_partial/_tags.scss b/themes/even/src/css/_partial/_tags.scss
new file mode 100644
index 0000000..e32a90e
--- /dev/null
+++ b/themes/even/src/css/_partial/_tags.scss
@@ -0,0 +1,46 @@
+// ==============================
+// Tags
+// =============================
+
+.tag-cloud {
+  margin: 2em 0 3em;
+  text-align: center;
+  font-family: $global-serif-font-family;
+
+  .tag-cloud-title {
+    display: inline-block;
+    font-size: $tag-cloud-title-size;
+    color: $theme-color;
+    border-bottom: $tag-cloud-title-border-bottom;
+  }
+
+  .tag-cloud-tags {
+    margin: 10px 0;
+
+    a {
+      display: inline-block;
+      position: relative;
+      margin: $tag-cloud-tags-link-margin;
+      word-wrap: break-word;
+      transition-duration: 0.2s;
+      transition-property: transform;
+      transition-timing-function: ease-out;
+
+      .tag-count {
+        display: inline-block;
+        position: relative;
+        top: -8px;
+        right: -2px;
+        color: $theme-color;
+        font-size: $category-count-font-size;
+      }
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $theme-color;
+        transform: scale(1.1);
+      }
+    }
+  }
+}
\ No newline at end of file