9 files changed, 973 insertions, 0 deletions
diff --git a/assets/sass/_partial/_post/_admonition.scss b/assets/sass/_partial/_post/_admonition.scss
new file mode 100644
index 0000000..75444d6
--- /dev/null
+++ b/assets/sass/_partial/_post/_admonition.scss
@@ -0,0 +1,210 @@
+.admonition {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+      0 1px 5px 0 rgba(0,0,0,.12),
+      0 3px 1px -2px rgba(0,0,0,.2);
+  position: relative;
+  margin: .9765em 0;
+  padding: 0 .75rem;
+  border-left: .25rem solid #448aff;
+  border-radius: .125rem;
+  overflow: auto;
+
+  .admonition-title {
+    margin: 0 -0.75rem;
+    padding: .5rem .75rem .5rem 2.5rem;
+    border-bottom: .1rem solid rgba(68,138,255,.1);
+    background-color: rgba(68,138,255,.1);
+    font-weight: 700;
+  }
+
+  .admonition-title:before {
+    @extend %base-iconfont;
+    cursor: auto;
+    position: absolute;
+    left: .75rem;
+    top: .75rem;
+  }
+
+  &.note {
+    border-left-color: #448aff;
+
+    .admonition-title:before {
+      color: #448aff;
+      content: "\e903";
+    }
+  }
+
+  &.abstract {
+    border-left-color: #00b0ff;
+
+    .admonition-title {
+      background-color: rgba(0,176,255,.1);
+    }
+
+    .admonition-title:before {
+      color: #00b0ff;
+      content: "\e9bb";
+    }
+  }
+
+  &.info {
+    border-left-color: #00b8d4;
+
+    .admonition-title {
+      background-color: rgba(0,184,212,.1);
+    }
+
+    .admonition-title:before {
+      color: #00b8d4;
+      content: "\ea0c";
+    }
+  }
+
+  &.tip {
+    border-left-color: #00bfa5;
+
+    .admonition-title {
+      background-color: rgba(0,191,165,.1);
+    }
+
+    .admonition-title:before {
+      color: #00bfa5;
+      content: "\e906";
+    }
+  }
+
+  &.success {
+    border-left-color: #00c853;
+
+    .admonition-title {
+      background-color: rgba(0,200,83,.1);
+    }
+
+    .admonition-title:before {
+      color: #00c853;
+      content: "\ea10";
+    }
+  }
+
+  &.question {
+    border-left-color: #64dd17;
+
+    .admonition-title {
+      background-color: rgba(100,221,23,.1);
+    }
+
+    .admonition-title:before {
+      color: #64dd17;
+      content: "\ea09";
+    }
+  }
+
+  &.warning {
+    border-left-color: #ff9100;
+
+    .admonition-title {
+      background-color: rgba(255,145,0,.1);
+    }
+
+    .admonition-title:before {
+      color: #ff9100;
+      content: "\ea07";
+    }
+  }
+
+  &.failure {
+    border-left-color: #ff5252;
+
+    .admonition-title {
+      background-color: rgba(255,82,82,.1);
+    }
+
+    .admonition-title:before {
+      color: #ff5252;
+      content: "\ea0f";
+    }
+  }
+
+  &.danger {
+    border-left-color: #ff1744;
+
+    .admonition-title {
+      background-color: rgba(255,23,68,.1);
+    }
+
+    .admonition-title:before {
+      color: #ff1744;
+      content: "\e905";
+    }
+  }
+
+  &.bug {
+    border-left-color: #f50057;
+
+    .admonition-title {
+      background-color: rgba(245,0,87,.1);
+    }
+
+    .admonition-title:before {
+      color: #f50057;
+      content: "\e907";
+    }
+  }
+
+  &.example {
+    border-left-color: #651fff;
+
+    .admonition-title {
+      background-color: rgba(101,31,255,.1);
+    }
+
+    .admonition-title:before {
+      color: #651fff;
+      content: "\e9b9";
+    }
+  }
+
+  &.quote {
+    border-left-color: #9e9e9e;
+
+    .admonition-title {
+      background-color: hsla(0,0%,62%,.1);
+    }
+
+    .admonition-title:before {
+      color: #9e9e9e;
+      content: "\e904";
+    }
+  }
+
+  &:last-child {
+    margin-bottom: .75rem;
+  }
+}
+
+details.admonition {
+  summary {
+    display: block;
+    outline: none;
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:after {
+      @extend %base-iconfont;
+      position: absolute;
+      top: .75rem;
+      right: .75rem;
+      color: rgba(0,0,0,.26);
+      content: "\e908";
+    }
+  }
+}
+
+details.admonition[open] {
+  > summary:after {
+    transform: rotate(180deg);
+  }
+}
diff --git a/assets/sass/_partial/_post/_code.scss b/assets/sass/_partial/_post/_code.scss
new file mode 100644
index 0000000..50fcdd2
--- /dev/null
+++ b/assets/sass/_partial/_post/_code.scss
@@ -0,0 +1,283 @@
+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;
+}
+
+// highlight.js
+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;
+    }
+  }
+}
+
+// chroma
+.highlight > .chroma {
+  margin: 1em 0;
+  border-radius: 5px;
+  overflow-x: auto;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  position: relative;
+  background: $code-background;
+
+  code {
+    padding: 0;
+  }
+
+  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;
+    }
+  }
+
+  .lntd {
+    // Fix code block null line height and
+    // Synchronous gutter and code line highly.
+    line-height: round($code-font-size * 1.5);
+
+    &:first-child {
+      width: 10px;
+
+      pre {
+        margin: 0;
+        padding: 30px 7px 10px;
+      }
+    }
+
+    &:last-child {
+      vertical-align: top;
+
+      pre {
+        margin: 0;
+        padding: 30px 10px 10px;
+      }
+    }
+  }
+
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  /* LineNumbersTable */  .lnt { color: $gray; }
+  /* LineHighlight */  .hl { display: block; width: 100%; background-color: #ffffcc }
+
+  /* Keyword */  .k { color: #859900 }
+  /* KeywordConstant */  .kc { color: #859900; font-weight: bold }
+  /* KeywordDeclaration */  .kd { color: #859900 }
+  /* KeywordNamespace */  .kn { color: #dc322f; font-weight: bold }
+  /* KeywordPseudo */  .kp { color: #859900 }
+  /* KeywordReserved */  .kr { color: #859900 }
+  /* KeywordType */  .kt { color: #859900; font-weight: bold }
+  /* Name */  .n { color: #268bd2 }
+  /* NameAttribute */  .na { color: #268bd2 }
+  /* NameBuiltin */  .nb { color: #cb4b16 }
+  /* NameBuiltinPseudo */  .bp { color: #268bd2 }
+  /* NameClass */  .nc { color: #cb4b16 }
+  /* NameConstant */  .no { color: #268bd2 }
+  /* NameDecorator */  .nd { color: #268bd2 }
+  /* NameEntity */  .ni { color: #268bd2 }
+  /* NameException */  .ne { color: #268bd2 }
+  /* NameFunction */  .nf { color: #268bd2 }
+  /* NameFunctionMagic */  .fm { color: #268bd2 }
+  /* NameLabel */  .nl { color: #268bd2 }
+  /* NameNamespace */  .nn { color: #268bd2 }
+  /* NameOther */  .nx { color: #268bd2 }
+  /* NameProperty */  .py { color: #268bd2 }
+  /* NameTag */  .nt { color: #268bd2; font-weight: bold }
+  /* NameVariable */  .nv { color: #268bd2 }
+  /* NameVariableClass */  .vc { color: #268bd2 }
+  /* NameVariableGlobal */  .vg { color: #268bd2 }
+  /* NameVariableInstance */  .vi { color: #268bd2 }
+  /* NameVariableMagic */  .vm { color: #268bd2 }
+  /* Literal */  .l { color: #2aa198 }
+  /* LiteralDate */  .ld { color: #2aa198 }
+  /* LiteralString */  .s { color: #2aa198 }
+  /* LiteralStringAffix */  .sa { color: #2aa198 }
+  /* LiteralStringBacktick */  .sb { color: #2aa198 }
+  /* LiteralStringChar */  .sc { color: #2aa198 }
+  /* LiteralStringDelimiter */  .dl { color: #2aa198 }
+  /* LiteralStringDoc */  .sd { color: #2aa198 }
+  /* LiteralStringDouble */  .s2 { color: #2aa198 }
+  /* LiteralStringEscape */  .se { color: #2aa198 }
+  /* LiteralStringHeredoc */  .sh { color: #2aa198 }
+  /* LiteralStringInterpol */  .si { color: #2aa198 }
+  /* LiteralStringOther */  .sx { color: #2aa198 }
+  /* LiteralStringRegex */  .sr { color: #2aa198 }
+  /* LiteralStringSingle */  .s1 { color: #2aa198 }
+  /* LiteralStringSymbol */  .ss { color: #2aa198 }
+  /* LiteralNumber */  .m { color: #2aa198; font-weight: bold }
+  /* LiteralNumberBin */  .mb { color: #2aa198; font-weight: bold }
+  /* LiteralNumberFloat */  .mf { color: #2aa198; font-weight: bold }
+  /* LiteralNumberHex */  .mh { color: #2aa198; font-weight: bold }
+  /* LiteralNumberInteger */  .mi { color: #2aa198; font-weight: bold }
+  /* LiteralNumberIntegerLong */  .il { color: #2aa198; font-weight: bold }
+  /* LiteralNumberOct */  .mo { color: #2aa198; font-weight: bold }
+  /* OperatorWord */  .ow { color: #859900 }
+  /* Comment */  .c { color: #93a1a1; font-style: italic }
+  /* CommentHashbang */  .ch { color: #93a1a1; font-style: italic }
+  /* CommentMultiline */  .cm { color: #93a1a1; font-style: italic }
+  /* CommentSingle */  .c1 { color: #93a1a1; font-style: italic }
+  /* CommentSpecial */  .cs { color: #93a1a1; font-style: italic }
+  /* CommentPreproc */  .cp { color: #93a1a1; font-style: italic }
+  /* CommentPreprocFile */  .cpf { color: #93a1a1; font-style: italic }
+  /* Generic */  .g { color: #d33682 }
+  /* GenericDeleted */  .gd { color: #b58900 }
+  /* GenericEmph */  .ge { color: #d33682 }
+  /* GenericError */  .gr { color: #d33682 }
+  /* GenericHeading */  .gh { color: #d33682 }
+  /* GenericInserted */  .gi { color: #859900 }
+  /* GenericOutput */  .go { color: #d33682 }
+  /* GenericPrompt */  .gp { color: #d33682 }
+  /* GenericStrong */  .gs { color: #d33682 }
+  /* GenericSubheading */  .gu { color: #d33682 }
+  /* GenericTraceback */  .gt { color: #d33682 }
+}
diff --git a/assets/sass/_partial/_post/_content.scss b/assets/sass/_partial/_post/_content.scss
new file mode 100644
index 0000000..688a924
--- /dev/null
+++ b/assets/sass/_partial/_post/_content.scss
@@ -0,0 +1,197 @@
+// ==============================
+// 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;
+
+      .anchor {
+        float: left;
+        line-height: 1;
+        margin-left: -20px;
+        padding-right: 4px;
+
+        &:hover {
+          border-bottom: initial;
+        }
+
+        .icon-link {
+          visibility: hidden;
+          font-size: 16px;
+
+          &:before {
+            vertical-align: middle;
+          }
+        }
+      }
+
+      &:hover {
+        .icon-link {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  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-wrapper {
+    overflow-x: auto;
+
+    > 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';
+  @import 'admonition';
+
+  .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;
+    }
+  }
+
+  hr {
+    margin: 1rem 0;
+    position: relative;
+    border-top: 2px dashed $theme-color;
+    border-bottom: none;
+  }
+
+  .footnote-ref {
+    > a {
+      font-weight: bold;
+      margin-left: 3px;
+
+      &:before {
+        content: "[";
+      }
+
+      &:after {
+        content: "]";
+      }
+    }
+  }
+
+  .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;
+    padding-right: 1px;
+  }
+}
diff --git a/assets/sass/_partial/_post/_copyright.scss b/assets/sass/_partial/_post/_copyright.scss
new file mode 100644
index 0000000..374061f
--- /dev/null
+++ b/assets/sass/_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/assets/sass/_partial/_post/_footer.scss b/assets/sass/_partial/_post/_footer.scss
new file mode 100644
index 0000000..012110f
--- /dev/null
+++ b/assets/sass/_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/assets/sass/_partial/_post/_header.scss b/assets/sass/_partial/_post/_header.scss
new file mode 100644
index 0000000..7faf4e3
--- /dev/null
+++ b/assets/sass/_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/assets/sass/_partial/_post/_outdated.scss b/assets/sass/_partial/_post/_outdated.scss
new file mode 100644
index 0000000..be7b5ea
--- /dev/null
+++ b/assets/sass/_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/assets/sass/_partial/_post/_reward.scss b/assets/sass/_partial/_post/_reward.scss
new file mode 100644
index 0000000..3a03a9f
--- /dev/null
+++ b/assets/sass/_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/assets/sass/_partial/_post/_toc.scss b/assets/sass/_partial/_post/_toc.scss
new file mode 100644
index 0000000..8327055
--- /dev/null
+++ b/assets/sass/_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;
+  }
+}