🎉 first commit

7 files changed, 502 insertions, 0 deletions

diff --git a/src/css/_partial/_post/_code.scss b/src/css/_partial/_post/_code.scss
new file mode 100644
index 0000000..ff4439f
--- /dev/null
+++ b/src/css/_partial/_post/_code.scss
@@ -0,0 +1,177 @@
+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 {
+  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;
+    }
+
+    &.#{$sign} > figcaption > span::after {
+      content: ' · ' + $text;
+    }
+
+    &.#{$sign} figcaption + table {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  figcaption {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding: 2px 7px;
+    font-size: $code-font-size;
+    font-weight: bold;
+    color: darken($gray, 10%);
+    background: darken($code-background, 3%);
+    z-index: 20;
+    overflow-x: hidden;
+    box-sizing: border-box;
+
+    & > a {
+      position: absolute;
+      right: 0;
+      display: inline-box;
+      margin-right: 7px;
+      font-weight: 400;
+
+      &:hover {
+        text-decoration: none;
+        border: 0;
+      }
+    }
+  }
+
+  .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/src/css/_partial/_post/_content.scss b/src/css/_partial/_post/_content.scss
new file mode 100644
index 0000000..d680762
--- /dev/null
+++ b/src/css/_partial/_post/_content.scss
@@ -0,0 +1,101 @@
+// ==============================
+// 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);
+    
+    th, td {
+      padding: 5px 15px;
+      border: 1px double $content-table-border-color;
+    }
+  }
+
+  @import 'code';
+
+  .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 figcaption h4 {
+    color: #b5b5b5;
+    font-size: 0.9rem;
+    text-align: center;
+  }
+
+  .task-list {
+    list-style: none;
+    padding-left: 1.5rem;
+  }
+}
diff --git a/src/css/_partial/_post/_copyright.scss b/src/css/_partial/_post/_copyright.scss
new file mode 100644
index 0000000..29ac0c7
--- /dev/null
+++ b/src/css/_partial/_post/_copyright.scss
@@ -0,0 +1,17 @@
+.post-copyright {
+  margin-top: 20px;
+  padding-top: 10px;
+  border-top: 1px dashed $light-gray;
+
+  .copyright-item {
+    margin: 5px 0;
+    
+    &.lincese {
+      font-weight: bold;
+    }
+
+    a {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/css/_partial/_post/_footer.scss b/src/css/_partial/_post/_footer.scss
new file mode 100644
index 0000000..012110f
--- /dev/null
+++ b/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/src/css/_partial/_post/_header.scss b/src/css/_partial/_post/_header.scss
new file mode 100644
index 0000000..c9ac667
--- /dev/null
+++ b/src/css/_partial/_post/_header.scss
@@ -0,0 +1,39 @@
+.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 {
+    .post-time {
+      font-size: 15px;
+      color: $post-time-font-color;
+    }
+
+    .post-category {
+      display: inline;
+      font-size: 14px;
+      color: $post-category-font-color;
+
+      &::before {
+        content: '·';
+      }
+
+      a {
+        color: inherit;
+
+        &:hover {
+          color: $theme-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/css/_partial/_post/_reward.scss b/src/css/_partial/_post/_reward.scss
new file mode 100644
index 0000000..55728e7
--- /dev/null
+++ b/src/css/_partial/_post/_reward.scss
@@ -0,0 +1,48 @@
+.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;
+    margin-top: 15px;
+
+    .qr-code-image {
+      display: inline-block;
+      min-width: 200px;
+      width: 40%;
+    }
+
+    .image {
+      width: 200px;
+      height: 200px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/css/_partial/_post/_toc.scss b/src/css/_partial/_post/_toc.scss
new file mode 100644
index 0000000..b5958c0
--- /dev/null
+++ b/src/css/_partial/_post/_toc.scss
@@ -0,0 +1,46 @@
+.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;
+
+    >nav>ul {
+      margin: 10px 0;
+    }
+
+    ul {
+      padding-left: 20px;
+      list-style: $post-toc-list-style;
+  
+      ul {
+        padding-left: 15px;
+      }
+    }
+
+    .toc-link.active {
+      color: $theme-color;
+    }
+  }
+}
+
+@include max-screen($toc-max-sreen-width) {
+  .post-toc {
+    display: none;
+  }
+}