deploy: b780169745c17f9fc971299e923e5ca5669b5a22

51 files changed, 3495 insertions, 627 deletions

diff --git a/css/a11y-dark.min.css b/css/a11y-dark.min.css
deleted file mode 100644
index 7820d7db..00000000
--- a/css/a11y-dark.min.css
+++ /dev/null
@@ -1,7 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
-  Theme: a11y-dark
-  Author: @ericwbailey
-  Maintainer: @ericwbailey
-
-  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
-*/.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}
\ No newline at end of file
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 00000000..885373c3
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,43 @@
+div {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+  color: $color-text-primary;
+}
+input {
+  outline: none;
+  border: none;
+}
+body {
+  background-color: $color-background;
+}
+/* clears the 'X' from Internet Explorer */
+input[type=search]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+input[type=search]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+/* clears the 'X' from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
diff --git a/css/color.css b/css/color.css
new file mode 100644
index 00000000..a7ff3690
--- /dev/null
+++ b/css/color.css
@@ -0,0 +1,61 @@
+.highlight {
+  color: #657b83;
+}
+.highlight table {
+  background: #fdf6e3;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #93a1a1;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/color_mode/classic.css b/css/color_mode/classic.css
new file mode 100644
index 00000000..a7ff3690
--- /dev/null
+++ b/css/color_mode/classic.css
@@ -0,0 +1,61 @@
+.highlight {
+  color: #657b83;
+}
+.highlight table {
+  background: #fdf6e3;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #93a1a1;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/color_mode/dark.css b/css/color_mode/dark.css
new file mode 100644
index 00000000..3f60a6a2
--- /dev/null
+++ b/css/color_mode/dark.css
@@ -0,0 +1,63 @@
+.highlight {
+  background: #474949;
+  color: #d1d9e1;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #969896;
+  font-style: italic;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal,
+.highlight .code .type,
+.highlight .code .addition {
+  color: #c9c;
+}
+.highlight .code .number,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo {
+  color: #f99157;
+}
+.highlight .code .string,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #8abeb7;
+}
+.highlight .code .title,
+.highlight .code .name,
+.highlight .code .section,
+.highlight .code .built_in {
+  color: #b5bd68;
+}
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .selector-id,
+.highlight .code .class .title {
+  color: #fc6;
+}
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .link {
+  color: #f99157;
+}
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .attr,
+.highlight .code .attribute {
+  color: #81a2be;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/color_mode/default.css b/css/color_mode/default.css
new file mode 100644
index 00000000..a7ff3690
--- /dev/null
+++ b/css/color_mode/default.css
@@ -0,0 +1,61 @@
+.highlight {
+  color: #657b83;
+}
+.highlight table {
+  background: #fdf6e3;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #93a1a1;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/component/component.css b/css/component/component.css
new file mode 100644
index 00000000..dd96ae94
--- /dev/null
+++ b/css/component/component.css
@@ -0,0 +1,42 @@
+.h-line-primary {
+  background-color: $color-text-primary;
+  height: $line-third;
+}
+.h-line-secondary {
+  background-color: $color-text-secondary;
+  height: $line-third;
+}
+hr {
+  background-color: $color-text-third;
+  height: $line-third;
+  border: 0;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: $margin-m-0;
+}
+.tag-title {
+  margin: $margin-m-1 0;
+  color: $color-text-secondary;
+  font-size: $font-size-header;
+}
+.tag-title a {
+  color: $color-text-secondary;
+}
+.post-tag {
+  border: $line-third solid $color-text-primary;
+  margin-right: $margin-s-2;
+  margin-bottom: $margin-s-2;
+  padding: $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0;
+  border-radius: $margin-m-2;
+}
+.post-tag a {
+  background-image: none !important;
+}
+.post-tag:hover {
+  background-color: $color-text-primary;
+}
+.post-tag:hover a {
+  color: $color-background;
+}
diff --git a/css/component/icon.css b/css/component/icon.css
new file mode 100644
index 00000000..c7dbd0ab
--- /dev/null
+++ b/css/component/icon.css
@@ -0,0 +1,22 @@
+.icon {
+  display: block;
+  background-color: $color-text-primary;
+  width: $icon-size;
+  height: $icon-size;
+}
+.arrow-up {
+  -webkit-mask-image: url("../icon/arrow-up.svg");
+  mask-image: url("../icon/arrow-up.svg");
+}
+.arrow-left {
+  -webkit-mask-image: url("../icon/arrow-left.svg");
+  mask-image: url("../icon/arrow-left.svg");
+}
+.arrow-right {
+  -webkit-mask-image: url("../icon/arrow-right.svg");
+  mask-image: url("../icon/arrow-right.svg");
+}
+.close-btn {
+  -webkit-mask-image: url("../icon/close-btn.svg");
+  mask-image: url("../icon/close-btn.svg");
+}
diff --git a/css/font.css b/css/font.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/css/font.css
diff --git a/css/fonts.css b/css/fonts.css
deleted file mode 100644
index a3fe3512..00000000
--- a/css/fonts.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/* montserrat-regular - latin */
-
-@font-face
-{
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""),
-        url("../fonts/montserrat-v23-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url("../fonts/montserrat-v23-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* montserrat-600 - latin */
-
-@font-face
-{
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 600;
-    src: local(""),
-        url("../fonts/montserrat-v23-latin-600.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url("../fonts/montserrat-v23-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* montserrat-italic - latin */
-
-@font-face
-{
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 400;
-    src: local(""),
-        url("../fonts/montserrat-v23-latin-italic.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url("../fonts/montserrat-v23-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* montserrat-600italic - latin */
-
-@font-face
-{
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 600;
-    src: local(""),
-        url("../fonts/montserrat-v23-latin-600italic.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url("../fonts/montserrat-v23-latin-600italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
\ No newline at end of file
diff --git a/css/highlight/ascetic.css b/css/highlight/ascetic.css
new file mode 100644
index 00000000..21a98194
--- /dev/null
+++ b/css/highlight/ascetic.css
@@ -0,0 +1,37 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+
+*/
+.highlight {
+  color: #000;
+  background: #fff;
+}
+.highlight .code .string,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .section,
+.highlight .code .addition,
+.highlight .code .attribute,
+.highlight .code .link {
+  color: #888;
+}
+.highlight .code .comment,
+.highlight .code .quote,
+.highlight .code .meta,
+.highlight .code .deletion {
+  color: #ccc;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .type,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/brown-paper.css b/css/highlight/brown-paper.css
new file mode 100644
index 00000000..612de86a
--- /dev/null
+++ b/css/highlight/brown-paper.css
@@ -0,0 +1,55 @@
+/*
+
+Brown Paper style from goldblog.com.ua (c) Zaripov Yura <[email protected]>
+
+*/
+.highlight {
+  color: #363c69;
+  background: #b7a68e url("brown-papersq.png");
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal {
+  color: #059;
+  font-weight: bold;
+}
+.highlight .code .highlight,
+.highlight .code .subst {
+  color: #363c69;
+}
+.highlight .code .string,
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .type,
+.highlight .code .attribute,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .built_in,
+.highlight .code .addition,
+.highlight .code .variable,
+.highlight .code .template-tag,
+.highlight .code .template-variable,
+.highlight .code .link,
+.highlight .code .name {
+  color: #2c009f;
+}
+.highlight .code .comment,
+.highlight .code .quote,
+.highlight .code .meta,
+.highlight .code .deletion {
+  color: #802022;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .type,
+.highlight .code .name,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/dark.css b/css/highlight/dark.css
new file mode 100644
index 00000000..4ed0f763
--- /dev/null
+++ b/css/highlight/dark.css
@@ -0,0 +1,53 @@
+/*
+   
+   Dark style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
+   
+*/
+.highlight {
+  background: #444;
+  color: #ddd;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal,
+.highlight .code .section,
+.highlight .code .link {
+  color: #fff;
+}
+.highlight .code .subst {
+  color: #ddd;
+}
+.highlight .code .string,
+.highlight .code .title,
+.highlight .code .name,
+.highlight .code .type,
+.highlight .code .attribute,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .built_in,
+.highlight .code .addition,
+.highlight .code .variable,
+.highlight .code .template-tag,
+.highlight .code .template-variable {
+  color: #d88;
+}
+.highlight .code .comment,
+.highlight .code .quote,
+.highlight .code .deletion,
+.highlight .code .meta {
+  color: #777;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal,
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .doctag,
+.highlight .code .type,
+.highlight .code .name,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/darkula.css b/css/highlight/darkula.css
new file mode 100644
index 00000000..0dd553f6
--- /dev/null
+++ b/css/highlight/darkula.css
@@ -0,0 +1,58 @@
+/*
+   
+   Darkula color scheme from the JetBrains family of IDEs
+   
+*/
+.highlight {
+  background: #2b2b2b;
+  color: #bababa;
+}
+.highlight .code .strong,
+.highlight .code .emphasis {
+  color: #a8a8a2;
+}
+.highlight .code .bullet,
+.highlight .code .quote,
+.highlight .code .link,
+.highlight .code .number,
+.highlight .code .regexp,
+.highlight .code .literal {
+  color: #6896ba;
+}
+.highlight .code .code,
+.highlight .code .selector-class {
+  color: #a6e22e;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .section,
+.highlight .code .attribute,
+.highlight .code .name,
+.highlight .code .variable {
+  color: #cb7832;
+}
+.highlight .code .params {
+  color: #b9b9b9;
+}
+.highlight .code .string,
+.highlight .code .subst,
+.highlight .code .type,
+.highlight .code .built_in,
+.highlight .code .builtin-name,
+.highlight .code .symbol,
+.highlight .code .selector-id,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .template-tag,
+.highlight .code .template-variable,
+.highlight .code .addition {
+  color: #e0c46c;
+}
+.highlight .code .comment,
+.highlight .code .deletion,
+.highlight .code .meta {
+  color: #7f7f7f;
+}
diff --git a/css/highlight/foundation.css b/css/highlight/foundation.css
new file mode 100644
index 00000000..3d6a99e3
--- /dev/null
+++ b/css/highlight/foundation.css
@@ -0,0 +1,71 @@
+/*
+Description: Foundation 4 docs style for highlight.js
+Author: Dan Allen <[email protected]>
+Website: http://foundation.zurb.com/docs/
+Version: 1.0
+Date: 2013-04-02
+*/
+.highlight {
+  color: #000;
+  background: #eee;
+}
+.highlight .code .link,
+.highlight .code .emphasis,
+.highlight .code .attribute,
+.highlight .code .addition {
+  color: #070;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong,
+.highlight .code .string,
+.highlight .code .deletion {
+  color: #d14;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .quote,
+.highlight .code .comment {
+  color: #998;
+  font-style: italic;
+}
+.highlight .code .section,
+.highlight .code .title {
+  color: #900;
+}
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #458;
+}
+.highlight .code .variable,
+.highlight .code .template-variable {
+  color: #369;
+}
+.highlight .code .bullet {
+  color: #970;
+}
+.highlight .code .meta {
+  color: #34b;
+}
+.highlight .code .code,
+.highlight .code .number,
+.highlight .code .literal,
+.highlight .code .keyword,
+.highlight .code .selector-tag {
+  color: #099;
+}
+.highlight .code .regexp {
+  background-color: #fff0ff;
+  color: #808;
+}
+.highlight .code .symbol {
+  color: #990073;
+}
+.highlight .code .tag,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #070;
+}
diff --git a/css/highlight/github-gist.css b/css/highlight/github-gist.css
new file mode 100644
index 00000000..cb59a779
--- /dev/null
+++ b/css/highlight/github-gist.css
@@ -0,0 +1,57 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+.highlight {
+  padding: 0.5em;
+  color: #333;
+}
+.highlight .code .comment,
+.highlight .code .meta {
+  color: #969896;
+}
+.highlight .code .string,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .strong,
+.highlight .code .emphasis,
+.highlight .code .quote {
+  color: #df5000;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .type {
+  color: #a71d5d;
+}
+.highlight .code .literal,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .attribute {
+  color: #0086b3;
+}
+.highlight .code .section,
+.highlight .code .name {
+  color: #63a35c;
+}
+.highlight .code .tag {
+  color: #333;
+}
+.highlight .code .title,
+.highlight .code .attr,
+.highlight .code .selector-id,
+.highlight .code .selector-class,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo {
+  color: #795da3;
+}
+.highlight .code .addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+.highlight .code .deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+.highlight .code .link {
+  text-decoration: underline;
+}
diff --git a/css/highlight/github.css b/css/highlight/github.css
new file mode 100644
index 00000000..28777a5a
--- /dev/null
+++ b/css/highlight/github.css
@@ -0,0 +1,79 @@
+/*
+
+github.com style (c) Vasily Polovnyov <[email protected]>
+
+*/
+.highlight {
+  color: #333;
+  background: #f8f8f8;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #998;
+  font-style: italic;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .subst {
+  color: #333;
+  font-weight: bold;
+}
+.highlight .code .number,
+.highlight .code .literal,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .tag .attr {
+  color: #008080;
+}
+.highlight .code .string,
+.highlight .code .doctag {
+  color: #d14;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .selector-id {
+  color: #900;
+  font-weight: bold;
+}
+.highlight .code .subst {
+  font-weight: normal;
+}
+.highlight .code .type,
+.highlight .code .class .title {
+  color: #458;
+  font-weight: bold;
+}
+.highlight .code .tag,
+.highlight .code .name,
+.highlight .code .attribute {
+  color: #000080;
+  font-weight: normal;
+}
+.highlight .code .regexp,
+.highlight .code .link {
+  color: #009926;
+}
+.highlight .code .symbol,
+.highlight .code .bullet {
+  color: #990073;
+}
+.highlight .code .built_in,
+.highlight .code .builtin-name {
+  color: #0086b3;
+}
+.highlight .code .meta {
+  color: #999;
+  font-weight: bold;
+}
+.highlight .code .deletion {
+  background: #fdd;
+}
+.highlight .code .addition {
+  background: #dfd;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/highlight/googlecode.css b/css/highlight/googlecode.css
new file mode 100644
index 00000000..d84832ee
--- /dev/null
+++ b/css/highlight/googlecode.css
@@ -0,0 +1,72 @@
+/*
+
+Google Code style (c) Aahan Krish <[email protected]>
+
+*/
+.highlight {
+  color: #000;
+  background: #fff;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #800;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .section,
+.highlight .code .title,
+.highlight .code .name {
+  color: #008;
+}
+.highlight .code .variable,
+.highlight .code .template-variable {
+  color: #660;
+}
+.highlight .code .string,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .regexp {
+  color: #080;
+}
+.highlight .code .literal,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .meta,
+.highlight .code .number,
+.highlight .code .link {
+  color: #066;
+}
+.highlight .code .title,
+.highlight .code .doctag,
+.highlight .code .type,
+.highlight .code .attr,
+.highlight .code .built_in,
+.highlight .code .builtin-name,
+.highlight .code .params {
+  color: #606;
+}
+.highlight .code .attribute,
+.highlight .code .subst {
+  color: #000;
+}
+.highlight .code .formula {
+  background-color: #eee;
+  font-style: italic;
+}
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #9b703f;
+}
+.highlight .code .addition {
+  background-color: #baeeba;
+}
+.highlight .code .deletion {
+  background-color: #ffc8bd;
+}
+.highlight .code .doctag,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/idea.css b/css/highlight/idea.css
new file mode 100644
index 00000000..bc499b39
--- /dev/null
+++ b/css/highlight/idea.css
@@ -0,0 +1,78 @@
+/*
+
+Intellij Idea-like styling (c) Vasily Polovnyov <[email protected]>
+
+*/
+.highlight {
+  color: #000;
+  background: #fff;
+}
+.highlight .code .subst,
+.highlight .code .title {
+  font-weight: normal;
+  color: #000;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #808080;
+  font-style: italic;
+}
+.highlight .code .meta {
+  color: #808000;
+}
+.highlight .code .tag {
+  background: #efefef;
+}
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .literal,
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .type,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  font-weight: bold;
+  color: #000080;
+}
+.highlight .code .attribute,
+.highlight .code .number,
+.highlight .code .regexp,
+.highlight .code .link {
+  font-weight: bold;
+  color: #00f;
+}
+.highlight .code .number,
+.highlight .code .regexp,
+.highlight .code .link {
+  font-weight: normal;
+}
+.highlight .code .string {
+  color: #008000;
+  font-weight: bold;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .formula {
+  color: #000;
+  background: #d0eded;
+  font-style: italic;
+}
+.highlight .code .doctag {
+  text-decoration: underline;
+}
+.highlight .code .variable,
+.highlight .code .template-variable {
+  color: #660e7a;
+}
+.highlight .code .addition {
+  background: #baeeba;
+}
+.highlight .code .deletion {
+  background: #ffc8bd;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/highlight/rainbow.css b/css/highlight/rainbow.css
new file mode 100644
index 00000000..8e09431d
--- /dev/null
+++ b/css/highlight/rainbow.css
@@ -0,0 +1,68 @@
+/*
+   
+   Style with support for rainbow parens
+   
+*/
+.highlight {
+  background: #474949;
+  color: #d1d9e1;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #969896;
+  font-style: italic;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal,
+.highlight .code .type,
+.highlight .code .addition {
+  color: #c9c;
+}
+.highlight .code .number,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo {
+  color: #f99157;
+}
+.highlight .code .string,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #8abeb7;
+}
+.highlight .code .title,
+.highlight .code .name,
+.highlight .code .section,
+.highlight .code .built_in {
+  color: #b5bd68;
+}
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .selector-id,
+.highlight .code .class .title {
+  color: #fc6;
+}
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .link {
+  color: #f99157;
+}
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .attr,
+.highlight .code .attribute {
+  color: #81a2be;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/school-book.css b/css/highlight/school-book.css
new file mode 100644
index 00000000..16c8190a
--- /dev/null
+++ b/css/highlight/school-book.css
@@ -0,0 +1,57 @@
+/*
+
+School Book style from goldblog.com.ua (c) Zaripov Yura <[email protected]>
+
+*/
+.highlight {
+  background: #f6f6ae url("school-book.png");
+  border-top: solid 2px #d2e8b9;
+  border-bottom: solid 1px #d2e8b9;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal {
+  color: #059;
+  font-weight: bold;
+}
+.highlight .code .highlight,
+.highlight .code .subst {
+  color: #3e5915;
+}
+.highlight .code .string,
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .type,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .attribute,
+.highlight .code .built_in,
+.highlight .code .builtin-name,
+.highlight .code .addition,
+.highlight .code .variable,
+.highlight .code .template-tag,
+.highlight .code .template-variable,
+.highlight .code .link {
+  color: #2c009f;
+}
+.highlight .code .comment,
+.highlight .code .quote,
+.highlight .code .deletion,
+.highlight .code .meta {
+  color: #e60415;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .type,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/solarized-dark.css b/css/highlight/solarized-dark.css
new file mode 100644
index 00000000..94855f3f
--- /dev/null
+++ b/css/highlight/solarized-dark.css
@@ -0,0 +1,64 @@
+/*
+   
+   Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]>
+   
+*/
+.highlight {
+  background: #002b36;
+  color: #839496;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #586e75;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #073642;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/highlight/solarized-light.css b/css/highlight/solarized-light.css
new file mode 100644
index 00000000..835dc1d9
--- /dev/null
+++ b/css/highlight/solarized-light.css
@@ -0,0 +1,66 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]>
+
+*/
+.highlight {
+  color: #657b83;
+}
+.highlight table {
+  background: #fdf6e3;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #93a1a1;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/highlight/tomorrow.css b/css/highlight/tomorrow.css
new file mode 100644
index 00000000..3f5ceb48
--- /dev/null
+++ b/css/highlight/tomorrow.css
@@ -0,0 +1,51 @@
+.highlight {
+  color: #4d4d4c;
+  background: #fff;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #8e908c;
+}
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .tag,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class,
+.highlight .code .regexp,
+.highlight .code .deletion {
+  color: #c82829;
+}
+.highlight .code .number,
+.highlight .code .built_in,
+.highlight .code .builtin-name,
+.highlight .code .literal,
+.highlight .code .type,
+.highlight .code .params,
+.highlight .code .meta,
+.highlight .code .link {
+  color: #f5871f;
+}
+.highlight .code .attribute {
+  color: #eab700;
+}
+.highlight .code .string,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .addition {
+  color: #718c00;
+}
+.highlight .code .title,
+.highlight .code .section {
+  color: #4271ae;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag {
+  color: #8959a8;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/highlight/vs.css b/css/highlight/vs.css
new file mode 100644
index 00000000..2fdd7357
--- /dev/null
+++ b/css/highlight/vs.css
@@ -0,0 +1,58 @@
+/*
+
+Visual Studio-like style based on original C# coloring by Jason Diamond <[email protected]>
+
+*/
+.highlight {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fff;
+  color: #000;
+}
+.highlight .code .comment,
+.highlight .code .quote,
+.highlight .code .variable {
+  color: #008000;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .built_in,
+.highlight .code .name,
+.highlight .code .tag {
+  color: #00f;
+}
+.highlight .code .string,
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .attribute,
+.highlight .code .literal,
+.highlight .code .template-tag,
+.highlight .code .template-variable,
+.highlight .code .type,
+.highlight .code .addition {
+  color: #a31515;
+}
+.highlight .code .deletion,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .meta {
+  color: #2b91af;
+}
+.highlight .code .doctag {
+  color: #808080;
+}
+.highlight .code .attr {
+  color: #f00;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .link {
+  color: #00b0e8;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/highlight/xcode.css b/css/highlight/xcode.css
new file mode 100644
index 00000000..b2b5163c
--- /dev/null
+++ b/css/highlight/xcode.css
@@ -0,0 +1,74 @@
+/*
+
+XCode style (c) Angel Garcia <[email protected]>
+
+*/
+.highlight {
+  color: #000;
+  background: #fff;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #006a00;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .literal {
+  color: #aa0d91;
+}
+.highlight .code .name {
+  color: #008;
+}
+.highlight .code .variable,
+.highlight .code .template-variable {
+  color: #660;
+}
+.highlight .code .string {
+  color: #c41a16;
+}
+.highlight .code .regexp,
+.highlight .code .link {
+  color: #080;
+}
+.highlight .code .title,
+.highlight .code .tag,
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .number,
+.highlight .code .meta {
+  color: #1c00cf;
+}
+.highlight .code .section,
+.highlight .code .class .title,
+.highlight .code .type,
+.highlight .code .attr,
+.highlight .code .built_in,
+.highlight .code .builtin-name,
+.highlight .code .params {
+  color: #5c2699;
+}
+.highlight .code .attribute,
+.highlight .code .subst {
+  color: #000;
+}
+.highlight .code .formula {
+  background-color: #eee;
+  font-style: italic;
+}
+.highlight .code .addition {
+  background-color: #baeeba;
+}
+.highlight .code .deletion {
+  background-color: #ffc8bd;
+}
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #9b703f;
+}
+.highlight .code .doctag,
+.highlight .code .strong {
+  font-weight: bold;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
diff --git a/css/highlight/zenburn.css b/css/highlight/zenburn.css
new file mode 100644
index 00000000..4bb4abc4
--- /dev/null
+++ b/css/highlight/zenburn.css
@@ -0,0 +1,63 @@
+/*
+   
+   Zenburn style from voldmar.ru (c) Vladimir Epifanov <[email protected]>
+   based on dark.css by Ivan Sagalaev
+   
+*/
+.highlight {
+  background: #3f3f3f;
+  color: #dcdcdc;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .tag {
+  color: #e3ceab;
+}
+.highlight .code .template-tag {
+  color: #dcdcdc;
+}
+.highlight .code .number {
+  color: #8cd0d3;
+}
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .attribute {
+  color: #efdcbc;
+}
+.highlight .code .literal {
+  color: #efefaf;
+}
+.highlight .code .subst {
+  color: #8f8f8f;
+}
+.highlight .code .title,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class,
+.highlight .code .section,
+.highlight .code .type {
+  color: #efef8f;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .link {
+  color: #dca3a3;
+}
+.highlight .code .deletion,
+.highlight .code .string,
+.highlight .code .built_in,
+.highlight .code .builtin-name {
+  color: #cc9393;
+}
+.highlight .code .addition,
+.highlight .code .comment,
+.highlight .code .quote,
+.highlight .code .meta {
+  color: #7f9f7f;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 00000000..59a2bc30
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,24 @@
+body {
+  margin: 0;
+}
+.mask-border::before {
+  content: '';
+  width: 100%;
+  height: 100vh;
+  border: $line-primary $color-text-primary solid;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 8;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.main {
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+}
diff --git a/css/markdown.css b/css/markdown.css
deleted file mode 100644
index 30ba21e1..00000000
--- a/css/markdown.css
+++ /dev/null
@@ -1,170 +0,0 @@
-@charset "utf-8";
-
-.post-md
-{
-    width: 100%;
-    font-size: 16px;
-    letter-spacing: 0;
-}
-
-.post-md h1,
-.post-md h2,
-.post-md h3,
-.post-md h4,
-.post-md h5,
-.post-md h6
-{
-    color: var(--font-color-1);
-    margin: 12px 0;
-}
-.post-md h1
-{
-    font-size: 2.5rem;
-    line-height: 1.2;
-    padding: 24px 0;
-}
-.post-md h2
-{
-    font-size: 2rem;
-    line-height: 1.2;
-    padding: 20px 0;
-}
-.post-md h3
-{
-    font-size: 1.75rem;
-    line-height: 1.2;
-    padding: 18px 0;
-}
-.post-md h4
-{
-    font-size: 1.5rem;
-    line-height: 1.2;
-    padding: 16px 0;
-}
-.post-md h5
-{
-    font-size: 1.25rem;
-    line-height: 1.2;
-    padding: 14px 0;
-}
-.post-md h6
-{
-    font-size: 1.125rem;
-    line-height: 1.2;
-    padding: 12px 0;
-}
-.post-md a
-{
-    color: var(--font-color-2);
-    box-shadow: 0 2px 0 var(--line-1);
-    transition: color ease-in-out .65s, box-shadow ease-in-out .65s;
-}
-.post-md a:hover
-{
-    color: var(--font-color-0);
-    box-shadow: 0 2px 0 var(--font-color-0);
-    transition: color ease-in-out .65s, box-shadow ease-in-out .65s;
-}
-.post-md strong
-{
-    font-weight: 700;
-}
-.post-md em
-{
-    font-style: italic;
-}
-.post-md kbd
-{
-    padding: 2px 4px;
-    border-radius: 2px;
-    background: #eee;
-    border: 1px solid #ddd;
-}
-.post-md ol
-{
-    list-style: decimal;
-    padding-left: 24px;
-}
-.post-md ul
-{
-    list-style: disc;
-    padding-left: 24px;
-}
-.post-md img
-{
-    border-radius: 4px;
-}
-.post-md hr
-{
-    border: none;
-    height: 1px;
-    background: var(--line-1);
-    margin: 24px 0;
-}
-
-.post-md p,
-.post-md blockquote
-{
-    width: 100%;
-    margin: 12px 0;
-}
-.post-md blockquote
-{
-    border-left: 2px solid var(--line-2);
-    padding-left: 12px;
-    word-wrap: break-word;
-}
-
-.post-md .video-container
-{
-    background: #000;
-    border-radius: 4px;
-    overflow: hidden;
-}
-.post-md iframe,
-.post-md .video-container iframe
-{
-    width: 100%;
-    height: 100vh;
-    max-height: 360px;
-    margin: 12px 0;
-}
-
-.post-md>table
-{
-    width: 100%;
-    text-align: left;
-    border-spacing: 0;
-}
-.post-md>table th
-{
-    padding: 12px 0;
-    border-bottom: 2px solid var(--line-1);
-}
-.post-md>table tr:nth-child(odd) td
-{
-    padding: 12px 0;
-    border-bottom: 1px solid var(--line-1);
-    background: #fafafa;
-}
-.post-md>table tr:nth-child(even) td
-{
-    padding: 12px 0;
-    border-bottom: 1px solid var(--line-1);
-    background: #fff;
-}
-
-.post-md code
-{
-    border-radius: 4px;
-    background: #2b2b2b;
-    padding: 2px 4px;
-    color: #f8f8f2;
-    font-size: 1rem;
-}
-
-.post-md .hljs-ln-numbers
-{
-    opacity: .5;
-    padding-right: 12px;
-}
diff --git a/css/media.css b/css/media.css
new file mode 100644
index 00000000..803fdfbd
--- /dev/null
+++ b/css/media.css
@@ -0,0 +1,31 @@
+.flex-container {
+  width: 720px;
+  margin: 0 auto;
+}
+html {
+  font-size: 18px;
+}
+@media (max-width: 1600px) {
+  html {
+    font-size: 18px;
+  }
+  .flex-container {
+    width: 720px;
+  }
+}
+@media (max-width: 1200px) {
+  html {
+    font-size: 18px;
+  }
+  .flex-container {
+    width: 640px;
+  }
+}
+@media (max-width: 688px) {
+  .flex-container {
+    display: block;
+    width: calc(100% - 48px);
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
diff --git a/css/motion.css b/css/motion.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/css/motion.css
diff --git a/css/normalize.css b/css/normalize.css
new file mode 100644
index 00000000..22783054
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,269 @@
+/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15 /* 1 */;
+  -webkit-text-size-adjust: 100% /* 2 */;
+}
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box /* 1 */;
+  height: 0 /* 1 */;
+  overflow: visible /* 2 */;
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace /* 1 */;
+  font-size: 1em /* 2 */;
+}
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none /* 1 */;
+  text-decoration: underline /* 2 */;
+  text-decoration: underline dotted /* 2 */;
+}
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace /* 1 */;
+  font-size: 1em /* 2 */;
+}
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit /* 1 */;
+  font-size: 100% /* 1 */;
+  line-height: 1.15 /* 1 */;
+  margin: 0 /* 2 */;
+}
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  overflow: visible;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  text-transform: none;
+}
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]-moz-focusring,
+[type="reset"]-moz-focusring,
+[type="submit"]-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box /* 1 */;
+  color: inherit /* 2 */;
+  display: table /* 1 */;
+  max-width: 100% /* 1 */;
+  padding: 0 /* 3 */;
+  white-space: normal /* 1 */;
+}
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box /* 1 */;
+  padding: 0 /* 2 */;
+}
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield /* 1 */;
+  outline-offset: -2px /* 2 */;
+}
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button /* 1 */;
+  font: inherit /* 2 */;
+}
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
diff --git a/css/partials/footer.css b/css/partials/footer.css
new file mode 100644
index 00000000..7903aa5c
--- /dev/null
+++ b/css/partials/footer.css
@@ -0,0 +1,8 @@
+.footer {
+  margin-top: $margin-primary;
+  border: $line-secondary $color-text-primary solid;
+}
+.footer .footer-text {
+  margin-top: $margin-l-1;
+  margin-bottom: $margin-primary;
+}
diff --git a/css/partials/header.css b/css/partials/header.css
new file mode 100644
index 00000000..f9b7ba40
--- /dev/null
+++ b/css/partials/header.css
@@ -0,0 +1,72 @@
+.header {
+  border: $line-secondary solid $color-text-primary;
+}
+.header-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-top: $margin-l-0;
+  margin-bottom: $margin-m-0;
+}
+.header-inner #menu-btn {
+  display: none;
+}
+.header-inner .site-nav {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+.menu-list {
+  text-align: right;
+  display: flex;
+}
+.menu-list .menu-item {
+  position: relative;
+  margin-left: $margin-l-0;
+}
+.menu-list:before {
+  content: "";
+  flex-grow: 1;
+}
+.menu-item-active:after {
+  border-bottom: solid $line-secondary;
+  width: 100%;
+}
+.logo-img {
+  max-height: $line-height-heading-h1;
+  width: auto;
+  max-width: 100%;
+  display: flex;
+}
+@media (max-width: 688px) {
+  .header-inner {
+    flex-wrap: wrap;
+  }
+  .header-inner #menu-btn {
+    display: block !important;
+    text-align: right;
+    width: 50%;
+  }
+  .header-inner #menu-btn .icon {
+    float: right;
+  }
+  .header-inner .site-brand-container {
+    width: 50%;
+  }
+  .header-inner .site-nav {
+    width: 100%;
+  }
+  .header-inner .site-nav .menu-list {
+    height: 0;
+    overflow: hidden;
+  }
+  .header-inner .site-nav .menu-list .menu-item {
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: $margin-m-0;
+  }
+  .header-inner .site-nav .active {
+    margin-top: $margin-m-1;
+    height: auto;
+    flex-direction: column;
+  }
+}
diff --git a/css/partials/paginator.css b/css/partials/paginator.css
new file mode 100644
index 00000000..bf9bb2a6
--- /dev/null
+++ b/css/partials/paginator.css
@@ -0,0 +1,22 @@
+.paginator {
+  margin-top: $margin-primary;
+}
+.pagination {
+  margin-top: $margin-m-1;
+  display: flex;
+}
+.pagination:before {
+  content: "";
+  flex-grow: 1;
+}
+.page-number {
+  position: relative;
+  margin-left: $margin-l-0;
+}
+.pagination .current:after {
+  border-bottom: solid $line-secondary;
+  width: 100%;
+}
+.pagination .space {
+  margin-left: $margin-l-0;
+}
diff --git a/css/partials/post_gallery.css b/css/partials/post_gallery.css
new file mode 100644
index 00000000..663b46fe
--- /dev/null
+++ b/css/partials/post_gallery.css
@@ -0,0 +1,35 @@
+.post-gallery-list .h-line-secondary {
+  margin-top: $margin-m-1;
+}
+.post-gallery-list .h-line-secondary:last-child {
+  display: none;
+}
+.post-gallery-item {
+  display: flex;
+  margin-top: $margin-primary;
+  margin-bottom: $margin-m-1;
+}
+.post-gallery-item .post-info {
+  margin-right: $margin-l-0;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+.post-gallery-item .post-info .post-title {
+  margin-bottom: $margin-m-1;
+}
+.post-gallery-item .post-img {
+  width: 50%;
+}
+@media (max-width: 480px) {
+  .post-gallery-item {
+    flex-wrap: wrap;
+  }
+  .post-gallery-item .post-info {
+    width: 100%;
+  }
+  .post-gallery-item .post-img {
+    width: 100%;
+    margin-top: $margin-m-1;
+  }
+}
diff --git a/css/partials/post_list.css b/css/partials/post_list.css
new file mode 100644
index 00000000..b4771102
--- /dev/null
+++ b/css/partials/post_list.css
@@ -0,0 +1,34 @@
+.year-title {
+  margin-top: $margin-primary;
+  margin-bottom: $margin-m-1;
+}
+.post-list-item {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: $margin-m-1;
+  align-items: top;
+}
+.post-list-item .post-title {
+  flex-grow: 1;
+  font-variation-settings: 'wght' $font-weight-medium;
+}
+.post-list-item .post-date {
+  margin-left: $margin-l-0;
+  min-width: 8rem;
+  text-align: right;
+  line-height: $line-height-body;
+  color: $color-text-secondary;
+}
+@media (max-width: 480px) {
+  .post-list-item {
+    flex-wrap: wrap;
+  }
+  .post-list-item .post-title {
+    width: 100%;
+  }
+  .post-list-item .post-date {
+    margin-left: 0;
+    width: 100%;
+    text-align: left;
+  }
+}
diff --git a/css/partials/profile.css b/css/partials/profile.css
new file mode 100644
index 00000000..310500f0
--- /dev/null
+++ b/css/partials/profile.css
@@ -0,0 +1,36 @@
+.profile {
+  margin-top: $margin-primary;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.profile .profile-content {
+  width: 50%;
+  margin: 0 $margin-l-0 0 0;
+}
+.profile .profile-content .profile-title {
+  margin-top: 0;
+  margin-bottom: $margin-m-0;
+}
+.profile .profile-content .profile-body {
+  margin-top: 0;
+  margin-bottom: $margin-l-1;
+}
+.profile .profile-content .profile-link {
+  margin-top: 0;
+  margin-bottom: $margin-m-1;
+}
+.profile .profile-image {
+  width: 50%;
+}
+@media (max-width: 480px) {
+  .profile {
+    flex-wrap: wrap;
+  }
+  .profile .profile-content {
+    width: 100%;
+    margin-top: $margin-m-1;
+  }
+  .profile .profile-image {
+    width: 100%;
+  }
+}
diff --git a/css/partials/search.css b/css/partials/search.css
new file mode 100644
index 00000000..506f0cc4
--- /dev/null
+++ b/css/partials/search.css
@@ -0,0 +1,81 @@
+.search-popup {
+  visibility: hidden;
+}
+.search-activate {
+  visibility: visible;
+}
+.search-popup-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: $color-overlay;
+}
+.search-popup-window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: $color-background;
+  transform: translate(-50%, -50%);
+  width: 640px;
+  height: 60%;
+  border: $line-secondary solid $color-text-primary;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.search-result-container {
+  flex-grow: 1;
+  overflow: scroll;
+  padding: $margin-m-1 $margin-m-1;
+}
+.search-result-container .search-result-message {
+  color: $color-text-secondary;
+}
+.search-result-container .search-result-title {
+  color: $color-text-primary;
+}
+.search-result-container li {
+  padding-bottom: $margin-m-1;
+  padding-top: $margin-m-2;
+}
+.search-result-container .search-result {
+  color: $color-text-primary;
+  margin-top: $margin-m-0;
+  margin-bottom: $margin-m-0;
+}
+.search-result-container mark {
+  color: $color-text-primary;
+  background-color: $color-search-marker;
+}
+.search-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $margin-m-1 $margin-m-1;
+  border-bottom: $line-secondary solid $color-text-primary;
+}
+.search-header .search-input-container {
+  flex-grow: 1;
+}
+.search-header .search-input-container .search-input {
+  width: 100%;
+  color: $color-text-primary;
+  background-color: $color-background;
+}
+.search-header .search-input-container .search-input::placeholder {
+  color: $color-text-secondary;
+}
+.search-header .search-close-btn {
+  flex-grow: 0;
+  margin-left: $margin-m-1;
+  margin: auto;
+  cursor: pointer;
+}
+@media (max-width: 688px) {
+  .search-popup-window {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/css/post/code.css b/css/post/code.css
new file mode 100644
index 00000000..7bd8e748
--- /dev/null
+++ b/css/post/code.css
@@ -0,0 +1,22 @@
+.highlight {
+  margin: 0 0 $margin-m-2 0;
+}
+.highlight .line {
+  width: $margin-l-2;
+}
+td.gutter {
+  width: $margin-m-2;
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+}
+td.gutter pre {
+  overflow-x: visible;
+}
+td span {
+  line-height: $margin-s-2;
+}
+pre {
+  margin: 0;
+  overflow-x: auto;
+}
diff --git a/css/post/media.css b/css/post/media.css
new file mode 100644
index 00000000..c1dd9608
--- /dev/null
+++ b/css/post/media.css
@@ -0,0 +1,16 @@
+img {
+  width: 100%;
+  height: auto;
+}
+.video-container {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+}
+.video-container>iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/css/post/post_comment.css b/css/post/post_comment.css
new file mode 100644
index 00000000..a1523871
--- /dev/null
+++ b/css/post/post_comment.css
@@ -0,0 +1,11 @@
+.post-comment {
+  margin-top: $margin-primary;
+}
+.v[data-class="v"] .vsys {
+  display: none !important;
+}
+.vcontent p {
+  margin-top: 0 !important;
+  font-size: $font-size-comment !important;
+  color: $color-text-primary !important;
+}
diff --git a/css/post/post_content.css b/css/post/post_content.css
new file mode 100644
index 00000000..3f5b91a3
--- /dev/null
+++ b/css/post/post_content.css
@@ -0,0 +1,70 @@
+.post-content {
+  margin-top: $margin-l-1;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: $margin-l-0;
+  margin-bottom: $margin-m-1;
+}
+blockquote {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: $margin-m-2;
+  border-left: $margin-s-2 solid $color-text-secondary;
+}
+blockquote p {
+  margin-left: $margin-m-2;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: $margin-m-2;
+  padding-top: $margin-m-0;
+  padding-bottom: $margin-m-0;
+}
+blockquote blockquote {
+  margin-left: $margin-m-2;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.post-content li {
+  margin-top: $margin-m-0;
+}
+.post-content ol {
+  padding-left: $margin-l-0;
+  margin-left: $margin-m-1;
+  margin-right: $margin-m-1;
+  margin-top: $margin-m-2;
+}
+.post-content ol ol {
+  margin-top: $margin-m-0;
+}
+.post-content ul {
+  padding-left: $margin-l-0;
+  margin-left: $margin-m-1;
+  margin-right: $margin-m-1;
+  margin-top: $margin-m-2;
+}
+.post-content ul ul {
+  margin-top: $margin-m-0;
+}
+.post-content ul li {
+  list-style-type: disc;
+}
+.post-content .task-list {
+  padding-left: 0;
+}
+.post-content .task-list .task-list-item {
+  list-style: none;
+}
+dl dt {
+  padding: $margin-m-0 0;
+}
+dl dt::after {
+  content: " :";
+}
+dl dd {
+  margin: 0;
+}
diff --git a/css/post/post_footer.css b/css/post/post_footer.css
new file mode 100644
index 00000000..5ee366d0
--- /dev/null
+++ b/css/post/post_footer.css
@@ -0,0 +1,27 @@
+.post-footer {
+  margin-top: $margin-primary;
+}
+.post-nav {
+  margin-top: $margin-m-1;
+  display: flex;
+  flex-wrap: wrap;
+}
+.post-nav .prev-item {
+  display: flex;
+  text-align: left;
+  min-width: 50%;
+  align-items: center;
+}
+.post-nav .prev-item .arrow-left {
+  margin-right: $margin-s-2;
+}
+.post-nav .next-item {
+  display: flex;
+  flex-direction: row-reverse;
+  text-align: right;
+  min-width: 50%;
+  align-items: center;
+}
+.post-nav .next-item .arrow-right {
+  margin-left: $margin-s-2;
+}
diff --git a/css/post/post_head.css b/css/post/post_head.css
new file mode 100644
index 00000000..61715567
--- /dev/null
+++ b/css/post/post_head.css
@@ -0,0 +1,14 @@
+.post-head {
+  margin-top: $margin-primary;
+}
+.post-head .post-info {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.post-head .post-info .post-title {
+  margin-bottom: $margin-m-1;
+}
+.post-head .post-img {
+  margin-top: $margin-l-1;
+}
diff --git a/css/post/table.css b/css/post/table.css
new file mode 100644
index 00000000..bfefa58c
--- /dev/null
+++ b/css/post/table.css
@@ -0,0 +1,36 @@
+table,
+td,
+th {
+  border: $color-text-primary solid $line-third;
+  width: 100%;
+  text-align: left;
+}
+table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+td,
+th {
+  padding: $margin-m-1;
+}
+th {
+  font-variation-settings: 'wght' $font-weight-medium;
+}
+td {
+  font-variation-settings: 'wght' $font-weight-light;
+}
+table,
+tboby,
+tr,
+td {
+  background-color: inherit;
+}
+.highlight>table {
+  min-width: fit-content;
+}
+@media (max-width: 480px) {
+  .block-table {
+    display: block;
+    overflow-x: auto;
+  }
+}
diff --git a/css/post/tag_plugin.css b/css/post/tag_plugin.css
new file mode 100644
index 00000000..b15b7fe2
--- /dev/null
+++ b/css/post/tag_plugin.css
@@ -0,0 +1,46 @@
+.gist td {
+  border: 0;
+}
+.gist a {
+  color: $color-text-secondary;
+  background-image: none !important;
+}
+blockquote>footer {
+  margin: 0 $margin-m-2;
+  padding: $margin-m-0 0;
+  font-size: $font-size-blockquote-footer;
+  color: $color-text-secondary;
+}
+blockquote>footer cite {
+  margin-left: $margin-m-0;
+}
+blockquote>footer cite::before {
+  content: " — ";
+}
+blockquote>footer strong {
+  color: $color-text-secondary;
+  font-size: $font-size-blockquote-footer;
+}
+blockquote>footer a {
+  color: $color-text-secondary;
+  background-image: none !important;
+}
+figcaption {
+  font-family: roboto-mono, menlo, monospace;
+  font-size: $font-size-blockquote-footer;
+  padding: $margin-m-0 0;
+  color: $color-text-secondary;
+}
+figcaption span {
+  padding-right: $margin-m-0;
+}
+figcaption a {
+  color: $color-text-secondary;
+  background-image: none !important;
+}
+blockquote.pullquote.left {
+  float: left;
+}
+blockquote.pullquote.right {
+  float: right;
+}
diff --git a/css/post/task_list.css b/css/post/task_list.css
new file mode 100644
index 00000000..ee2ec895
--- /dev/null
+++ b/css/post/task_list.css
@@ -0,0 +1,44 @@
+ul li.task-list-item {
+  position: relative;
+}
+ul li.task-list-item>input[type=checkbox] {
+  list-style: none;
+  background: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: $margin-l-0;
+  display: inline-block;
+  border: none;
+  opacity: 1;
+}
+ul li.task-list-item>input[type=checkbox][checked]:before {
+  background: $color-text-primary;
+  -webkit-mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:before {
+  background: $color-text-primary;
+  -webkit-mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:after,
+ul li.task-list-item>input[type=checkbox]:before {
+  display: block;
+  position: absolute;
+  content: "X";
+  color: transparent;
+  left: 0;
+  top: 0;
+  width: $icon-size;
+  height: $line-height-body;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-x: 0;
+  background-position-y: center;
+  --webkit-touch-callout: none;
+}
diff --git a/css/reset.css b/css/reset.css
deleted file mode 100644
index 1d63f714..00000000
--- a/css/reset.css
+++ /dev/null
@@ -1,70 +0,0 @@
-@charset "utf-8";
-
-*,
-*::before,
-*::after
-{
-    box-sizing: border-box;
-}
-
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd
-{
-    margin: 0;
-}
-
-ul,
-ol
-{
-    list-style: none;
-}
-
-ul
-{
-    padding-inline-start: 0;
-}
-
-html,
-body
-{
-    scroll-behavior: smooth;
-}
-
-a:not([class])
-{
-    text-decoration-skip-ink: auto;
-}
-
-img,
-picture
-{
-    width: auto;
-    max-width: 100%;
-    display: block;
-}
-
-input,
-button,
-textarea,
-select
-{
-    font: inherit;
-}
-
-@media (prefers-reduced-motion: reduce)
-{
-    html:focus-within
-    {
-        scroll-behavior: auto;
-    }
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 81235acc..fe351c8d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,348 +1,1198 @@
-@charset "utf-8";
-
-:root
-{
-    --font-color-0: #04077e;
-    --font-color-1: #000;
-    --font-color-2: #666;
-    --font-color-3: #aaa;
-    --bg-color-1: #eee;
-    --line-1: #ccc;
-    --line-2: #ddd;
-}
-p
-{
-    word-wrap: break-word;
-    white-space: pre-wrap;
-}
-
-body
-{
-    font-family: "Montserrat", "SF UI Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-    font-size: 16px;
-    line-height: 1.75;
-    letter-spacing: 0.6px;
-    color: var(--font-color-2);
-    background: #111;
-}
-a
-{
-    text-decoration: none;
-    color: var(--font-color-1);
-}
-
-.paper
-{
-    padding: 4vw;
-}
-.paper-main
-{
-    width: 100%;
-    max-width: 880px;
-    margin: 0 auto;
-    padding: 72px 8vw 24px;
-    background: #fff;
-    border-radius: 24px;
-    background: #fff;
-}
-
-.header
-{
-    padding-bottom: 48px;
-    margin-bottom: 48px;
-    border-bottom: 1px solid var(--line-1);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: center;
-}
-.logo
-{
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--font-color-1);
-    margin-bottom: 16px;
-    flex: 0 0 100%;
-}
-.nav
-{
-    margin: 0 0 4px;
-    flex: 0 0 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: center;
-}
-.nav li
-{
-    padding: 2px 0;
-    margin-right: 24px;
+.flex-container {
+  width: 720px;
+  margin: 0 auto;
 }
-.nav li:last-of-type
-{
-    margin-right: 0;
+html {
+  font-size: 18px;
 }
-.nav li a
-{
-    color: var(--font-color-1);
-    opacity: .6;
-    transition: opacity ease-in-out .5s;
-}
-.nav li a:hover
-{
-    opacity: 1;
-    transition: opacity ease-in-out .5s;
-}
-
-.post-header
-{
-    margin-bottom: 48px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: center;
+@media (max-width: 1600px) {
+  html {
+    font-size: 18px;
+  }
+  .flex-container {
+    width: 720px;
+  }
 }
-.post-header .logo
-{
-    font-size: 1rem;
+@media (max-width: 1200px) {
+  html {
+    font-size: 18px;
+  }
+  .flex-container {
+    width: 640px;
+  }
 }
-.post-header .go-home
-{
+@media (max-width: 688px) {
+  .flex-container {
     display: block;
-    padding: 10px 20px 8px;
-    border-radius: 18px;
-    background: #fff;
-    border: 1px solid #eee;
-    margin: 8px 0;
-    transition: background ease-in-out .5s;
-}
-.post-header .go-home:hover
-{
-    background: var(--bg-color-1);
-    transition: background ease-in-out .5s;
-}
-.post-header .go-home svg
-{
-    transform: translateX(0);
-    transition: transform ease-in-out .5s;
-}
-.post-header .go-home:hover svg
-{
-    transform: translateX(-4px);
-    transition: transform ease-in-out .5s;
-}
-
-.post-list
-{
-    display: flex;
+    width: calc(100% - 48px);
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15 /* 1 */;
+  -webkit-text-size-adjust: 100% /* 2 */;
+}
+body {
+  margin: 0;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+hr {
+  box-sizing: content-box /* 1 */;
+  height: 0 /* 1 */;
+  overflow: visible /* 2 */;
+}
+pre {
+  font-family: monospace, monospace /* 1 */;
+  font-size: 1em /* 2 */;
+}
+a {
+  background-color: transparent;
+}
+abbr[title] {
+  border-bottom: none /* 1 */;
+  text-decoration: underline /* 2 */;
+  text-decoration: underline dotted /* 2 */;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp {
+  font-family: monospace, monospace /* 1 */;
+  font-size: 1em /* 2 */;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+img {
+  border-style: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit /* 1 */;
+  font-size: 100% /* 1 */;
+  line-height: 1.15 /* 1 */;
+  margin: 0 /* 2 */;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+button:-moz-focusring,
+[type="button"]-moz-focusring,
+[type="reset"]-moz-focusring,
+[type="submit"]-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+legend {
+  box-sizing: border-box /* 1 */;
+  color: inherit /* 2 */;
+  display: table /* 1 */;
+  max-width: 100% /* 1 */;
+  padding: 0 /* 3 */;
+  white-space: normal /* 1 */;
+}
+progress {
+  vertical-align: baseline;
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box /* 1 */;
+  padding: 0 /* 2 */;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield /* 1 */;
+  outline-offset: -2px /* 2 */;
+}
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button /* 1 */;
+  font: inherit /* 2 */;
+}
+details {
+  display: block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none;
+}
+.highlight {
+  color: #657b83;
+}
+.highlight table {
+  background: #fdf6e3;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #93a1a1;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
+body {
+  margin: 0;
+}
+.mask-border::before {
+  content: '';
+  width: 100%;
+  height: 100vh;
+  border: 4px #373633 solid;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 8;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.main {
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+}
+div {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+  color: #373633;
+}
+input {
+  outline: none;
+  border: none;
+}
+body {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  background-color: #fff;
+}
+input[type=search]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+input[type=search]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+.header {
+  border: 2px solid #373633;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.header-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.header-inner #menu-btn {
+  display: none;
+}
+.header-inner .site-nav {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+.menu-list {
+  text-align: right;
+  display: flex;
+}
+.menu-list .menu-item {
+  position: relative;
+  margin-left: 1.5rem;
+}
+.menu-list:before {
+  content: "";
+  flex-grow: 1;
+}
+.menu-item:after {
+  content: "";
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  border-bottom: solid 1px #373633;
+}
+.menu-item:hover:after {
+  width: 100%;
+}
+.menu-item-active:after {
+  border-bottom: solid 2px;
+  width: 100%;
+}
+.logo-img {
+  max-height: 2.25rem;
+  width: auto;
+  max-width: 100%;
+  display: flex;
+}
+@media (max-width: 688px) {
+  .header-inner {
+    flex-wrap: wrap;
+  }
+  .header-inner #menu-btn {
+    display: block !important;
+    text-align: right;
+    width: 50%;
+  }
+  .header-inner #menu-btn .icon {
+    float: right;
+  }
+  .header-inner .site-brand-container {
+    width: 50%;
+  }
+  .header-inner .site-nav {
+    width: 100%;
+  }
+  .header-inner .site-nav .menu-list {
+    height: 0;
+    overflow: hidden;
+  }
+  .header-inner .site-nav .menu-list .menu-item {
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: 0.5rem;
+  }
+  .header-inner .site-nav .active {
+    margin-top: 0.75rem;
+    height: auto;
     flex-direction: column;
+  }
+}
+.footer {
+  margin-top: 3.5rem;
+  border: 2px #373633 solid;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.footer .footer-text {
+  margin-top: 2rem;
+  margin-bottom: 3.5rem;
+}
+.post-list a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-list a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+.year-title {
+  margin-top: 3.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #e8e8e8;
+}
+.post-list-item {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: 0.75rem;
+  align-items: top;
+}
+.post-list-item .post-title {
+  flex-grow: 1;
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  font-variation-settings: 'wght' 500;
+}
+.post-list-item .post-date {
+  margin-left: 1.5rem;
+  min-width: 8rem;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+  line-height: 1.5rem;
+  color: #afaea9;
+}
+@media (max-width: 480px) {
+  .post-list-item {
     flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: stretch;
+  }
+  .post-list-item .post-title {
+    width: 100%;
+  }
+  .post-list-item .post-date {
+    margin-left: 0;
+    width: 100%;
+    text-align: left;
+  }
 }
-.post
-{
+.post-gallery-list .h-line-secondary {
+  margin-top: 0.75rem;
+}
+.post-gallery-list .h-line-secondary:last-child {
+  display: none;
+}
+.post-gallery-item {
+  display: flex;
+  margin-top: 3.5rem;
+  margin-bottom: 0.75rem;
+}
+.post-gallery-item .post-info {
+  margin-right: 1.5rem;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+.post-gallery-item .post-info .post-title {
+  margin-bottom: 0.75rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+.post-gallery-item .post-info .post-date {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.post-gallery-item .post-img {
+  width: 50%;
+}
+.post-gallery-item a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-gallery-item a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+@media (max-width: 480px) {
+  .post-gallery-item {
+    flex-wrap: wrap;
+  }
+  .post-gallery-item .post-info {
     width: 100%;
-    padding-bottom: 48px;
-    margin-bottom: 48px;
-    border-bottom: 1px dashed var(--line-2);
-}
-.post-title
-{
-    display: inline-block;
-    font-size: 1.6rem;
-    font-weight: 600;
-    line-height: 1.5;
-    margin-bottom: 12px;
-    color: var(--font-color-1);
-    /*transition: color ease-in-out .5s;*/
-}
-.post-title:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
-}
-.post-except
-{
-    word-break: break-all;
-    margin-bottom: 12px;
-}
-.read-more
-{
-    padding: 0 4px;
-    color: var(--font-color-0);   
-}
-.read-more:before,
-.read-more:after
-{
-    display: inline-block;
-    transition: transform ease-in-out .5s;
-}
-.read-more:before
-{
-    content: "{ ";
-}
-.read-more:after
-{
-    content: " }";
-}
-.read-more:hover:before
-{
-    transform: translateX(-4px);
-    transition: transform ease-in-out .25s;
-}
-.read-more:hover:after
-{
-    transform: translateX(4px);
-    transition: transform ease-in-out .25s;
-}
-.post-date
-{
-    font-size: 0.875rem;
-    color: var(--font-color-3);
-}
-
-.paginator
-{
-    font-size: 0.875rem;
+  }
+  .post-gallery-item .post-img {
     width: 100%;
-    margin: 0 auto 24px;
-    display: flex;
-    flex-direction: row;
+    margin-top: 0.75rem;
+  }
+}
+.paginator {
+  margin-top: 3.5rem;
+}
+.pagination {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+  display: flex;
+}
+.pagination:before {
+  content: "";
+  flex-grow: 1;
+}
+.page-number {
+  position: relative;
+  margin-left: 1.5rem;
+}
+.page-number:after {
+  content: "";
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  border-bottom: solid 1px #373633;
+}
+.page-number:hover:after {
+  width: 100%;
+}
+.pagination .current:after {
+  border-bottom: solid 2px;
+  width: 100%;
+}
+.pagination .space {
+  margin-left: 1.5rem;
+}
+.profile {
+  margin-top: 3.5rem;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.profile .profile-content {
+  width: 50%;
+  margin: 0 1.5rem 0 0;
+}
+.profile .profile-content .profile-title {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.profile .profile-content .profile-body {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+.profile .profile-content .profile-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+.profile .profile-content .profile-body {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+}
+.profile .profile-content .profile-link {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.profile .profile-image {
+  width: 50%;
+}
+@media (max-width: 480px) {
+  .profile {
     flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
+  }
+  .profile .profile-content {
+    width: 100%;
+    margin-top: 0.75rem;
+  }
+  .profile .profile-image {
+    width: 100%;
+  }
 }
-.paginator *
-{
-    display: block;
-    padding: 8px 16px;
-    border-radius: 18px;
-    background: #fff;
-    border: 1px solid #eee;
+.search-popup {
+  visibility: hidden;
+}
+.search-activate {
+  visibility: visible;
+}
+.search-popup-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0,0,0,0.2);
+}
+.search-popup-window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #fff;
+  transform: translate(-50%, -50%);
+  width: 640px;
+  height: 60%;
+  border: 2px solid #373633;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.search-result-container {
+  flex-grow: 1;
+  overflow: scroll;
+  padding: 0.75rem 0.75rem;
+}
+.search-result-container .search-result-message {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #e8e8e8;
+  text-transform: lowercase;
+  color: #afaea9;
+}
+.search-result-container .search-result-title {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  color: #373633;
+  color: #373633;
+}
+.search-result-container a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.search-result-container a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+.search-result-container li {
+  padding-bottom: 0.75rem;
+  padding-top: 1rem;
+}
+.search-result-container .search-result {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  color: #373633;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.search-result-container mark {
+  color: #373633;
+  background-color: #fff59b;
+}
+.search-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.75rem 0.75rem;
+  border-bottom: 2px solid #373633;
+}
+.search-header .search-input-container {
+  flex-grow: 1;
+}
+.search-header .search-input-container .search-input {
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+  color: #373633;
+  background-color: #fff;
+}
+.search-header .search-input-container .search-input::placeholder {
+  color: #afaea9;
+}
+.search-header .search-close-btn {
+  flex-grow: 0;
+  margin-left: 0.75rem;
+  margin: auto;
+  cursor: pointer;
+}
+@media (max-width: 688px) {
+  .search-popup-window {
+    width: 100%;
+    height: 100%;
+  }
+}
+.post-content {
+  margin-top: 2rem;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 2rem;
+  color: #373633;
+}
+h3 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #373633;
+}
+h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  color: #373633;
+}
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: #373633;
+}
+h6 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+p {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+}
+strong {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #373633;
+}
+em {
+  font-size: 1rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+  color: #373633;
+}
+del {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  text-decoration: line-through;
+  color: #373633;
+}
+.post-content a {
+  padding-bottom: 2px;
+  background-image: linear-gradient(#373633, #373633), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0 2px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-content a:hover {
+  background-size: 100% 1px, 100% 2px;
+}
+blockquote {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1rem;
+  border-left: 0.25rem solid #afaea9;
+}
+blockquote p {
+  margin-left: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+blockquote blockquote {
+  margin-left: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.post-content li {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  margin-top: 0.5rem;
+}
+.post-content ol {
+  padding-left: 1.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 1rem;
+}
+.post-content ol ol {
+  margin-top: 0.5rem;
+}
+.post-content ul {
+  padding-left: 1.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 1rem;
+}
+.post-content ul ul {
+  margin-top: 0.5rem;
+}
+.post-content ul li {
+  list-style-type: disc;
+}
+.post-content .task-list {
+  padding-left: 0;
+}
+.post-content .task-list .task-list-item {
+  list-style: none;
+}
+dl dt {
+  padding: 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #373633;
+}
+dl dt::after {
+  content: " :";
+}
+dl dd {
+  margin: 0;
+}
+.post-head {
+  margin-top: 3.5rem;
+}
+.post-head .post-info {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.post-head .post-info .post-title {
+  margin-bottom: 0.75rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+.post-head .post-info .post-date {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.post-head .post-img {
+  margin-top: 2rem;
+}
+.post-footer {
+  margin-top: 3.5rem;
+}
+.post-footer a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-footer a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+.post-nav {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.post-nav .prev-item {
+  display: flex;
+  text-align: left;
+  min-width: 50%;
+  align-items: center;
+}
+.post-nav .prev-item .arrow-left {
+  margin-right: 0.25rem;
+}
+.post-nav .next-item {
+  display: flex;
+  flex-direction: row-reverse;
+  text-align: right;
+  min-width: 50%;
+  align-items: center;
 }
-.paginator .space
-{
+.post-nav .next-item .arrow-right {
+  margin-left: 0.25rem;
+}
+.post-comment {
+  margin-top: 3.5rem;
+}
+.v[data-class="v"] .vsys {
+  display: none !important;
+}
+.vcontent p {
+  margin-top: 0 !important;
+  font-size: 0.875rem !important;
+  color: #373633 !important;
+}
+code {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #0177aa;
+}
+.code pre span {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #7d7c78;
+}
+.highlight {
+  margin: 0 0 1rem 0;
+}
+.highlight .line {
+  width: 3rem;
+}
+td.gutter {
+  width: 1rem;
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+}
+td.gutter span {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #bababa;
+}
+td.gutter pre {
+  overflow-x: visible;
+}
+td span {
+  line-height: 0.25rem;
+}
+pre {
+  margin: 0;
+  overflow-x: auto;
+}
+table,
+td,
+th {
+  border: #373633 solid 1px;
+  width: 100%;
+  text-align: left;
+}
+table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+td,
+th {
+  padding: 0.75rem;
+}
+th {
+  font-variation-settings: 'wght' 500;
+}
+td {
+  font-variation-settings: 'wght' 300;
+}
+table,
+tboby,
+tr,
+td {
+  background-color: inherit;
+}
+.highlight>table {
+  min-width: fit-content;
+}
+@media (max-width: 480px) {
+  .block-table {
     display: block;
-    padding: 8px 16px;
-    border-radius: 18px;
-    background: #fff;
-    border: none;
-}
-.paginator a
-{
-    margin: 4px;
-    color: var(--font-color-2);
-    transition: color ease-in-out .5s;
-}
-.paginator a:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
-}
-.paginator .current
-{
-    color: var(--font-color-0);
-    border: 1px solid var(--font-color-0);
-}
-
-.footer
-{
-    padding: 24px 0;
-    font-size: 0.875rem;
-    color: var(--font-color-3);
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-content: center;
-}
-.footer span
-{
-    text-align: center;
-    margin-bottom: 8px;
-}
-.footer a
-{
-    color: var(--font-color-3);
-    transition: color ease-in-out .5s;
-}
-.footer a:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
-}
-
-.post-main
-{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 24px;
-}
-.post-main-title
-{
-    flex: 0 0 100%;
-    margin-bottom: 12px;
-    font-size: 1.6rem;
-    font-weight: 600;
-    line-height: 1.5;
-    color: var(--font-color-1);
-}
-.post-meta
-{
-    font-size: 0.875rem;
-    color: var(--font-color-3);
-    flex: 0 0 100%;
-    margin-bottom: 32px;
-}
-
-.archive
-{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: normal;
-}
-.archive li
-{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-content: center;
-    padding: 12px 0;
-}
-.archive li:nth-child(odd)
-{
-    background: #fafafa;
-}
-.archive li:nth-child(even)
-{
-    background: #fff;
-}
-.archive li span
-{
-    width: 108px;
-    color: var(--font-color-2);
-}
-.archive-main
-{
-    flex: 0 1 calc( 100% - 108px );
-}
-.archive-title
-{
-    color: var(--font-color-1);
-    /*transition: color ease-in-out .5s;*/
-}
-.archive-title:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
+    overflow-x: auto;
+  }
+}
+img {
+  width: 100%;
+  height: auto;
+}
+.video-container {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+}
+.video-container>iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.gist td {
+  border: 0;
+}
+.gist a {
+  color: #afaea9;
+  background-image: none !important;
+}
+blockquote>footer {
+  margin: 0 1rem;
+  padding: 0.5rem 0;
+  font-size: 0.75rem;
+  color: #afaea9;
+}
+blockquote>footer cite {
+  margin-left: 0.5rem;
+}
+blockquote>footer cite::before {
+  content: " — ";
+}
+blockquote>footer strong {
+  color: #afaea9;
+  font-size: 0.75rem;
+}
+blockquote>footer a {
+  color: #afaea9;
+  background-image: none !important;
+}
+figcaption {
+  font-family: roboto-mono, menlo, monospace;
+  font-size: 0.75rem;
+  padding: 0.5rem 0;
+  color: #afaea9;
+}
+figcaption span {
+  padding-right: 0.5rem;
+}
+figcaption a {
+  color: #afaea9;
+  background-image: none !important;
+}
+blockquote.pullquote.left {
+  float: left;
+}
+blockquote.pullquote.right {
+  float: right;
+}
+ul li.task-list-item {
+  position: relative;
+}
+ul li.task-list-item>input[type=checkbox] {
+  list-style: none;
+  background: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 1.5rem;
+  display: inline-block;
+  border: none;
+  opacity: 1;
+}
+ul li.task-list-item>input[type=checkbox][checked]:before {
+  background: #373633;
+  -webkit-mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:before {
+  background: #373633;
+  -webkit-mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:after,
+ul li.task-list-item>input[type=checkbox]:before {
+  display: block;
+  position: absolute;
+  content: "X";
+  color: transparent;
+  left: 0;
+  top: 0;
+  width: 1.25rem;
+  height: 1.5rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-x: 0;
+  background-position-y: center;
+  --webkit-touch-callout: none;
+}
+.icon {
+  display: block;
+  background-color: #373633;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.arrow-up {
+  -webkit-mask-image: url("../icon/arrow-up.svg");
+  mask-image: url("../icon/arrow-up.svg");
+}
+.arrow-left {
+  -webkit-mask-image: url("../icon/arrow-left.svg");
+  mask-image: url("../icon/arrow-left.svg");
+}
+.arrow-right {
+  -webkit-mask-image: url("../icon/arrow-right.svg");
+  mask-image: url("../icon/arrow-right.svg");
+}
+.close-btn {
+  -webkit-mask-image: url("../icon/close-btn.svg");
+  mask-image: url("../icon/close-btn.svg");
+}
+.h-line-primary {
+  background-color: #373633;
+  height: 1px;
+}
+.h-line-secondary {
+  background-color: #afaea9;
+  height: 1px;
+}
+hr {
+  background-color: #e8e8e8;
+  height: 1px;
+  border: 0;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+.tag-title {
+  margin: 0.75rem 0;
+  color: #afaea9;
+  font-size: 0.875rem;
+}
+.tag-title a {
+  color: #afaea9;
+}
+.post-tag {
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  border: 1px solid #373633;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+  border-radius: 1rem;
+}
+.post-tag a {
+  background-image: none !important;
+}
+.post-tag:hover {
+  background-color: #373633;
+}
+.post-tag:hover a {
+  color: #fff;
 }
diff --git a/css/variable.css b/css/variable.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/css/variable.css