aboutsummaryrefslogtreecommitdiff
path: root/src/css/_partial
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/_partial')
-rw-r--r--src/css/_partial/_404.scss25
-rw-r--r--src/css/_partial/_archive.scss101
-rw-r--r--src/css/_partial/_back-to-top.scss24
-rw-r--r--src/css/_partial/_categories.scss43
-rw-r--r--src/css/_partial/_footer.scss10
-rw-r--r--src/css/_partial/_footer/_copyright.scss23
-rw-r--r--src/css/_partial/_footer/_social.scss19
-rw-r--r--src/css/_partial/_header.scss19
-rw-r--r--src/css/_partial/_header/_logo.scss18
-rw-r--r--src/css/_partial/_header/_menu.scss35
-rw-r--r--src/css/_partial/_iconfont.scss96
-rw-r--r--src/css/_partial/_mobile.scss77
-rw-r--r--src/css/_partial/_pagination.scss36
-rw-r--r--src/css/_partial/_post.scss23
-rw-r--r--src/css/_partial/_post/_code.scss177
-rw-r--r--src/css/_partial/_post/_content.scss101
-rw-r--r--src/css/_partial/_post/_copyright.scss17
-rw-r--r--src/css/_partial/_post/_footer.scss74
-rw-r--r--src/css/_partial/_post/_header.scss39
-rw-r--r--src/css/_partial/_post/_reward.scss48
-rw-r--r--src/css/_partial/_post/_toc.scss46
-rw-r--r--src/css/_partial/_slideout.scss33
-rw-r--r--src/css/_partial/_tags.scss46
23 files changed, 1130 insertions, 0 deletions
diff --git a/src/css/_partial/_404.scss b/src/css/_partial/_404.scss
new file mode 100644
index 0000000..63eb465
--- /dev/null
+++ b/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/src/css/_partial/_archive.scss b/src/css/_partial/_archive.scss
new file mode 100644
index 0000000..9019225
--- /dev/null
+++ b/src/css/_partial/_archive.scss
@@ -0,0 +1,101 @@
+// ==============================
+// 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 {
+ display: none;
+ 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/src/css/_partial/_back-to-top.scss b/src/css/_partial/_back-to-top.scss
new file mode 100644
index 0000000..ee67aa2
--- /dev/null
+++ b/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/src/css/_partial/_categories.scss b/src/css/_partial/_categories.scss
new file mode 100644
index 0000000..f9c413d
--- /dev/null
+++ b/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/src/css/_partial/_footer.scss b/src/css/_partial/_footer.scss
new file mode 100644
index 0000000..1f8cdae
--- /dev/null
+++ b/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/src/css/_partial/_footer/_copyright.scss b/src/css/_partial/_footer/_copyright.scss
new file mode 100644
index 0000000..7d33fe3
--- /dev/null
+++ b/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/src/css/_partial/_footer/_social.scss b/src/css/_partial/_footer/_social.scss
new file mode 100644
index 0000000..a23eb69
--- /dev/null
+++ b/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/src/css/_partial/_header.scss b/src/css/_partial/_header.scss
new file mode 100644
index 0000000..d81f17c
--- /dev/null
+++ b/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/src/css/_partial/_header/_logo.scss b/src/css/_partial/_header/_logo.scss
new file mode 100644
index 0000000..cd6435f
--- /dev/null
+++ b/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/src/css/_partial/_header/_menu.scss b/src/css/_partial/_header/_menu.scss
new file mode 100644
index 0000000..7209c80
--- /dev/null
+++ b/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/src/css/_partial/_iconfont.scss b/src/css/_partial/_iconfont.scss
new file mode 100644
index 0000000..3f3c794
--- /dev/null
+++ b/src/css/_partial/_iconfont.scss
@@ -0,0 +1,96 @@
+// ==============================
+// Iconfont
+// ==============================
+
+@font-face {
+ font-family: 'iconfont'; /* project id 96542 */
+ src: url('//at.alicdn.com/t/font_96542_d5q5xyswt0kq33di.eot');
+ src: url('//at.alicdn.com/t/font_96542_d5q5xyswt0kq33di.eot?#iefix') format('embedded-opentype'),
+ url('//at.alicdn.com/t/font_96542_d5q5xyswt0kq33di.woff') format('woff'),
+ url('//at.alicdn.com/t/font_96542_d5q5xyswt0kq33di.ttf') format('truetype'),
+ url('//at.alicdn.com/t/font_96542_d5q5xyswt0kq33di.svg#iconfont') format('svg');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -webkit-text-stroke-width: 0.2px;
+ -moz-osx-font-smoothing: grayscale;
+ cursor: pointer;
+}
+
+.icon-douban:before {
+ content: "\e610";
+}
+.icon-tumblr:before {
+ content: "\e69f";
+ font-size: .85em;
+ position: relative;
+ top: -4px;
+}
+.icon-linkedin:before {
+ content: "\e60d";
+ position: relative;
+ top: -4px;
+}
+.icon-twitter:before {
+ content: "\e600";
+}
+.icon-weibo:before {
+ content: "\e602";
+}
+.icon-stack-overflow:before {
+ content: "\e603";
+ font-size: .85em;
+ position: relative;
+ top: -4px;
+}
+.icon-email:before {
+ content: "\e605";
+ position: relative;
+ top: -2px;
+}
+.icon-facebook:before {
+ content: "\e601";
+ font-size: .95em;
+ position: relative;
+ top: -2px;
+}
+.icon-github:before {
+ content: "\e606";
+ position: relative;
+ top: -3px;
+}
+.icon-rss:before {
+ content: "\e604";
+}
+.icon-google:before {
+ content: "\e609";
+}
+.icon-zhihu:before {
+ content: "\e607";
+ font-size: .9em;
+ position: relative;
+ top: -2px;
+}
+.icon-pocket:before {
+ content: "\e856";
+}
+
+/* Generic Icon */
+.icon-heart:before {
+ content: "\e608";
+}
+.icon-right:before {
+ content: "\e60a";
+}
+.icon-left:before {
+ content: "\e60b";
+}
+.icon-up:before {
+ content: "\e60c";
+}
+.icon-close:before {
+ content: "\e60f";
+}
diff --git a/src/css/_partial/_mobile.scss b/src/css/_partial/_mobile.scss
new file mode 100644
index 0000000..26e4c76
--- /dev/null
+++ b/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/src/css/_partial/_pagination.scss b/src/css/_partial/_pagination.scss
new file mode 100644
index 0000000..c58f8db
--- /dev/null
+++ b/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/src/css/_partial/_post.scss b/src/css/_partial/_post.scss
new file mode 100644
index 0000000..4109d95
--- /dev/null
+++ b/src/css/_partial/_post.scss
@@ -0,0 +1,23 @@
+// ==============================
+// 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';
+} \ No newline at end of file
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;
+ }
+}
diff --git a/src/css/_partial/_slideout.scss b/src/css/_partial/_slideout.scss
new file mode 100644
index 0000000..2dc757d
--- /dev/null
+++ b/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/src/css/_partial/_tags.scss b/src/css/_partial/_tags.scss
new file mode 100644
index 0000000..e32a90e
--- /dev/null
+++ b/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