Add jekyll-text-theme YAML files

94 files changed, 4812 insertions, 0 deletions

diff --git a/_data/authors.yml b/_data/authors.yml
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/_data/authors.yml
diff --git a/_data/licenses.yml b/_data/licenses.yml
new file mode 100644
index 0000000..6729af5
--- /dev/null
+++ b/_data/licenses.yml
@@ -0,0 +1,16 @@
+CC-BY-4.0:
+  name: Attribution 4.0 International
+  url: https://creativecommons.org/licenses/by/4.0/
+  image: https://i.creativecommons.org/l/by/4.0/88x31.png
+CC-BY-SA-4.0:
+  name: Attribution-ShareAlike 4.0 International
+  url: https://creativecommons.org/licenses/by-sa/4.0/
+  image: https://i.creativecommons.org/l/by-sa/4.0/88x31.png
+CC-BY-NC-4.0:
+  name: Attribution-NonCommercial 4.0 International
+  url: https://creativecommons.org/licenses/by-nc/4.0/
+  image: https://i.creativecommons.org/l/by-nc/4.0/88x31.png
+CC-BY-ND-4.0:
+  name: Attribution-NoDerivatives 4.0 International
+  url: https://creativecommons.org/licenses/by-nd/4.0/
+  image: https://i.creativecommons.org/l/by-nd/4.0/88x31.png
diff --git a/_data/locale.yml b/_data/locale.yml
new file mode 100644
index 0000000..6adca98
--- /dev/null
+++ b/_data/locale.yml
@@ -0,0 +1,147 @@
+# @start locale config
+## => English
+########################
+en: &EN
+  SUBSCRIBE               : "Subscribe"
+  READMORE                : "Read more"
+  SEARCH                  : "Search"
+  CANCEL                  : "Cancel"
+  VIEWS                   : "views"
+  LAST_UPDATED            : "Last updated"
+  PREVIOUS                : "PREVIOUS"
+  NEXT                    : "NEXT"
+  ARTICLE_DATE_FORMAT     : "%b %d, %Y"
+  ARTICLE_LIST_DATE_FORMAT: "%b %d"
+  STATISTICS              : "[POST_COUNT] post articles, [PAGE_COUNT] pages."
+  LICENSE_ANNOUNCE        : "This work is licensed under a [LICENSE] license."
+  POST_ON_GITHUB          : "Edit on Github"
+  FOLLOW_ME               : "Follow me on [NAME]."
+  FOLLOW_US               : "Follow us on [NAME]."
+  EMAIL_ME                : "Send me an Email."
+  EMAIL_US                : "Send us an Email."
+  COPYRIGHT_DATES         : "2020"
+
+en-GB:
+  <<: *EN
+en-US:
+  <<: *EN
+en-CA:
+  <<: *EN
+en-AU:
+  <<: *EN
+
+## => Simplified Chinese
+########################
+zh-Hans: &ZH_HANS
+  SUBSCRIBE               : "订阅"
+  READMORE                : "阅读更多"
+  SEARCH                  : "搜索"
+  CANCEL                  : "取消"
+  VIEWS                   : "阅读"
+  LAST_UPDATED            : "更新于"
+  PREVIOUS                : "上篇"
+  NEXT                    : "下篇"
+  ARTICLE_DATE_FORMAT     : "%Y年 %m月%d日"
+  ARTICLE_LIST_DATE_FORMAT: "%m月%d日"
+  STATISTICS              : "共计 [POST_COUNT] 篇文章，[PAGE_COUNT] 页。"
+  LICENSE_ANNOUNCE        : "本文遵守 [LICENSE] 许可协议。"
+  POST_ON_GITHUB          : "在 Github 上修改"
+  FOLLOW_ME               : "在 [NAME] 上关注我。"
+  FOLLOW_US               : "在 [NAME] 上关注我们。"
+  EMAIL_ME                : "给我发邮件。"
+  EMAIL_US                : "给我们发邮件。"
+  COPYRIGHT_DATES         : "2020"
+
+zh:
+  <<: *ZH_HANS
+zh-CN:
+  <<: *ZH_HANS
+zh-SG:
+  <<: *ZH_HANS
+
+## => Traditional Chinese
+########################
+zh-Hant: &ZH_HANT
+  SUBSCRIBE               : "訂閱"
+  READMORE                : "閱讀更多"
+  SEARCH                  : "搜索"
+  CANCEL                  : "取消"
+  VIEWS                   : "閱讀"
+  LAST_UPDATED            : "更新於"
+  PREVIOUS                : "上篇"
+  NEXT                    : "下篇"
+  ARTICLE_DATE_FORMAT     : "%Y年 %m月%d日"
+  ARTICLE_LIST_DATE_FORMAT: "%m月%d日"
+  STATISTICS              : "共計 [POST_COUNT] 篇文章，[PAGE_COUNT] 頁。"
+  LICENSE_ANNOUNCE        : "本文遵守 [LICENSE] 許可協議。"
+  POST_ON_GITHUB          : "在 Github 上修改"
+  FOLLOW_ME               : "在 [NAME] 上關注我。"
+  FOLLOW_US               : "在 [NAME] 上關注我們。"
+  EMAIL_ME                : "給我發郵件。"
+  EMAIL_US                : "給我們發郵件。"
+  COPYRIGHT_DATES         : "2020"
+
+zh-TW:
+  <<: *ZH_HANT
+zh-HK:
+  <<: *ZH_HANT
+
+## => Korean
+########################
+ko: &KO
+  SUBSCRIBE               : "구독하기"
+  READMORE                : "더보기"
+  SEARCH                  : "검색"
+  CANCEL                  : "취소"
+  VIEWS                   : "조회"
+  LAST_UPDATED            : "마지막 수정"
+  PREVIOUS                : "이전"
+  NEXT                    : "다음"
+  ARTICLE_DATE_FORMAT     : "%Y년 %m월 %d일"
+  ARTICLE_LIST_DATE_FORMAT: "%m월 %d일"
+  STATISTICS              : "전체 글 [POST_COUNT]개, [PAGE_COUNT] 페이지"
+  LICENSE_ANNOUNCE        : "이 글의 저작권은 [LICENSE] 라이센스를 따릅니다."
+  POST_ON_GITHUB          : "Github에서 확인하기"
+  FOLLOW_ME               : "[NAME]에서 팔로우하기"
+  FOLLOW_US               : "[NAME]에서 팔로우하기"
+  EMAIL_ME                : "이메일 보내기"
+  EMAIL_US                : "이메일 보내기"
+  COPYRIGHT_DATES         : "2020"
+
+ko-KR:
+  <<: *KO
+
+## => French
+########################
+fr: &FR
+  SUBSCRIBE               : "S'abonner"
+  READMORE                : "Plus"
+  SEARCH                  : "Recherche"
+  CANCEL                  : "Annuler"
+  VIEWS                   : "vues"
+  LAST_UPDATED            : "Dernière modification"
+  PREVIOUS                : "PRÉCÉDENT"
+  NEXT                    : "SUIVANT"
+  ARTICLE_DATE_FORMAT     : "%d %b, %Y"
+  ARTICLE_LIST_DATE_FORMAT: "%d %b"
+  STATISTICS              : "[POST_COUNT] articles, [PAGE_COUNT] pages."
+  LICENSE_ANNOUNCE        : "Ce travail est sous licence [LICENSE]."
+  POST_ON_GITHUB          : "Modifier sur Github"
+  FOLLOW_ME               : "Suivez-moi sur [NAME]."
+  FOLLOW_US               : "Suivez-nous sur [NAME]."
+  EMAIL_ME                : "Envoyez-moi un courriel."
+  EMAIL_US                : "Envoyez-nous un courriel"
+  COPYRIGHT_DATES         : "2020"
+  DONATE                  : "Faites un don de [NAME]."
+
+fr-BE:
+  <<: *FR
+fr-CA:
+  <<: *FR
+fr-CH:
+  <<: *FR
+fr-FR:
+  <<: *FR
+fr-LU:
+  <<: *FR
+# @end locale config
diff --git a/_data/navigation.yml b/_data/navigation.yml
new file mode 100644
index 0000000..0eac74d
--- /dev/null
+++ b/_data/navigation.yml
@@ -0,0 +1,18 @@
+header:
+  - title: About Me
+    url: /about
+  - title: Education
+    url: /education
+  - title: Experience
+    url: /experience
+  - title: CV
+    url: /cv
+  - title: Interests
+    url: /interests
+
+test:
+  - title: About Me
+    url: /about
+
+sidebar:
+  nav: test
diff --git a/_data/variables.yml b/_data/variables.yml
new file mode 100644
index 0000000..15fdb04
--- /dev/null
+++ b/_data/variables.yml
@@ -0,0 +1,64 @@
+default:
+  text_skin: default
+  highlight_theme: default
+  lang: en
+  paths:
+    root: /
+    home: /
+    archive:  /archive.html
+    rss:  /feed.xml
+  mathjax: false
+  mathjax_autoNumber: false
+  mermaid: false
+  chart: false
+  toc:
+    selectors: 'h1,h2,h3'
+  sources: bootcdn
+
+  page:
+    mode: normal
+    type: webpage
+    article_header:
+      align: left
+      theme: light
+    articles:
+      show_cover: true
+      show_excerpt: false
+      show_readmore: false
+      show_info: false
+    show_title: true
+    show_edit_on_github: false
+    show_date: true
+    show_tags: true
+    show_author_profile: false
+    show_subscribe: false
+    full_width: false
+    sharing: false
+    comment: true
+    license: false
+    pageview: false
+    search: default
+
+sources:
+  bootcdn:
+    font_awesome: 'https://use.fontawesome.com/releases/v5.0.13/css/all.css'
+    jquery: 'https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'
+    leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js'
+    chart: 'https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js'
+    gitalk:
+      js: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.js'
+      css: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.css'
+    valine: 'https://unpkg.com/valine/dist/Valine.min.js' # bootcdn not available
+    mathjax: 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
+    mermaid: 'https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js'
+  unpkg:
+    font_awesome: 'https://use.fontawesome.com/releases/v5.0.13/css/all.css'
+    jquery: 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'
+    leancloud_js_sdk: '//cdn.jsdelivr.net/npm/leancloud-storage@3.13.2/dist/av-min.js'
+    chart: 'https://unpkg.com/chart.js@2.7.2/dist/Chart.min.js'
+    gitalk:
+      js: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.min.js'
+      css: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.css'
+    valine: 'https//unpkg.com/valine/dist/Valine.min.js'
+    mathjax: 'https://unpkg.com/mathjax@2.7.4/unpacked/MathJax.js?config=TeX-MML-AM_CHTML'
+    mermaid: 'https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js'
diff --git a/_layouts/404.html b/_layouts/404.html
new file mode 100644
index 0000000..4dd94a6
--- /dev/null
+++ b/_layouts/404.html
@@ -0,0 +1,13 @@
+---
+layout: page
+title: 404
+show_title: false
+---
+<div class="layout--404">
+  <div class="sign">
+    <h1>404</h1>
+    <p>Page not found :(</p>
+  </div>
+</div>
+
+{{ content }}
diff --git a/_layouts/archive.html b/_layouts/archive.html
new file mode 100644
index 0000000..02412a6
--- /dev/null
+++ b/_layouts/archive.html
@@ -0,0 +1,39 @@
+---
+layout: page
+titles:
+  # @start locale config
+  en      : &EN       Archive
+  en-GB   : *EN
+  en-US   : *EN
+  en-CA   : *EN
+  en-AU   : *EN
+  zh-Hans : &ZH_HANS  归档
+  zh      : *ZH_HANS
+  zh-CN   : *ZH_HANS
+  zh-SG   : *ZH_HANS
+  zh-Hant : &ZH_HANT  歸檔
+  zh-TW   : *ZH_HANT
+  zh-HK   : *ZH_HANT
+  ko      : &KO       아카이브
+  ko-KR   : *KO
+  fr      : &FR       Archives
+  fr-BE   : *FR
+  fr-CA   : *FR
+  fr-CH   : *FR
+  fr-FR   : *FR
+  fr-LU   : *FR
+  # @end locale config
+---
+
+<div class="layout--archive js-all">
+  {%- include tags.html -%}
+  <div class="js-result layout--archive__result d-none">
+    {%- include article-list.html articles=site.posts type='brief' show_info=true reverse=true group_by='year' -%}
+  </div>
+</div>
+
+<script>
+  {%- include scripts/archieve.js -%}
+</script>
+
+{{ content }}
diff --git a/_layouts/article.html b/_layouts/article.html
new file mode 100644
index 0000000..80f3b3c
--- /dev/null
+++ b/_layouts/article.html
@@ -0,0 +1,29 @@
+---
+layout: page
+type: article
+---
+
+{%- include snippets/assign.html
+  target = site.data.variables.default.page.sharing
+  source0=layout.sharing source1=page.sharing -%}
+{%- assign _sharing = __return -%}
+
+<div class="layout--article">
+  {%- include article/top/custom.html -%}
+
+  <div class="article__content" itemprop="articleBody">{{ content }}</div>
+
+  {%- if _sharing -%}
+    <section class="article__sharing d-print-none">{%- include sharing.html -%}</section>
+  {%- endif -%}
+
+  <div class="d-print-none">
+    {%- include article-footer.html -%}
+    {%- include article-section-navigator.html -%}
+  </div>
+
+</div>
+
+<script>
+  {%- include scripts/article.js -%}
+</script>
diff --git a/_layouts/articles.html b/_layouts/articles.html
new file mode 100644
index 0000000..00738a1
--- /dev/null
+++ b/_layouts/articles.html
@@ -0,0 +1,89 @@
+---
+layout: page
+---
+
+{%- assign _page_articles_data_source = page.articles.data_source | default: layout.articles.data_source -%}
+
+{%- if _page_articles_data_source -%}
+{%- assign _keys = _page_articles_data_source | split: '.' -%}
+{%- endif -%}
+
+{%- assign _articles = nil -%}
+{%- for _key in _keys -%}
+  {%- if forloop.first -%}
+    {%- case _key -%}
+      {%- when 'site' -%}
+        {%- assign _articles = site -%}
+      {%- when 'page' -%}
+        {%- assign _articles = page -%}
+      {%- when 'layout' -%}
+        {%- assign _articles = layout -%}
+      {%- when 'paginator' -%}
+        {%- assign _articles = paginator -%}
+      {%- else -%}
+        {%- assign _articles = site[_key] -%}
+      {%- else -%}
+    {%- endcase -%}
+  {%- else -%}
+    {%- assign _articles = _articles[_key] -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- assign _type = page.articles.type | default: layout.articles.type -%}
+
+{%- if _articles -%}
+
+  <div class="layout--articles">
+
+    {%- if _type == 'grid' -%}
+      {%- if page.articles.size == 'sm' -%}
+        {%- include article-list.html articles=_articles type='grid' size='sm' -%}
+      {%- else -%}
+        {%- include article-list.html articles=_articles type='grid' -%}
+      {%- endif -%}
+
+    {%- elsif _type == 'brief' -%}
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_info
+        source0=layout.articles.show_info source1=page.articles.show_info -%}
+      {%- assign _show_info = __return -%}
+
+      {%- include article-list.html articles=_articles type='brief' show_info=_show_info -%}
+
+    {%- else -%}
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_cover
+        source0=layout.articles.show_cover source1=page.articles.show_cover -%}
+      {%- assign _show_cover = __return -%}
+
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_excerpt
+        source0=layout.articles.show_excerpt source1=page.articles.show_excerpt -%}
+      {%- assign _show_excerpt = __return -%}
+
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_readmore
+        source0=layout.articles.show_readmore source1=page.articles.show_readmore -%}
+      {%- assign _show_readmore = __return -%}
+
+      {%- include snippets/assign.html
+        target=site.data.variables.default.page.articles.show_info
+        source0=layout.articles.show_info source1=page.articles.show_info -%}
+      {%- assign _show_info = __return -%}
+
+      {%- assign _article_type = page.articles.article_type | default: layout.articles.article_type -%}
+      {%- assign _cover_size = page.articles.cover_size | default: layout.articles.cover_size -%}
+      {%- assign _excerpt_type = page.articles.excerpt_type | default: layout.articles.excerpt_type -%}
+
+      {%- include article-list.html articles=_articles type='item'
+        article_type=_article_type
+        show_cover=_show_cover cover_size=_cover_size
+        show_excerpt=_show_excerpt excerpt_type=_excerpt_type
+        show_readmore=_show_readmore show_info=_show_info -%}
+
+    {%- endif -%}
+
+  </div>
+{%- endif -%}
+
+{{ content }}
diff --git a/_layouts/base.html b/_layouts/base.html
new file mode 100644
index 0000000..8a02572
--- /dev/null
+++ b/_layouts/base.html
@@ -0,0 +1,25 @@
+---
+layout: none
+---
+<!DOCTYPE html>
+{%- include snippets/get-lang.html -%}
+<html lang="{{ __return }}">
+  <head>
+    {%- include analytics.html -%}
+    {%- include head.html -%}
+    <script>
+      {%- include scripts/utils/utils.js -%}
+      {%- include scripts/lib/throttle.js -%}
+      {%- include scripts/lib/lazyload.js -%}
+    </script>
+    {%- include scripts/variables.html -%}
+  </head>
+  <body>
+    <div class="root" data-is-touch="false">
+      {{ content }}
+    </div>
+    <script>
+      {%- include scripts/common.js -%}
+    </script>
+  </body>
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..e587d6f
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,42 @@
+---
+layout: articles
+titles:
+  # @start locale config
+  en      : &EN       Home
+  en-GB   : *EN
+  en-US   : *EN
+  en-CA   : *EN
+  en-AU   : *EN
+  zh-Hans : &ZH_HANS  主页
+  zh      : *ZH_HANS
+  zh-CN   : *ZH_HANS
+  zh-SG   : *ZH_HANS
+  zh-Hant : &ZH_HANT  主頁
+  zh-TW   : *ZH_HANT
+  zh-HK   : *ZH_HANT
+  ko      : &KO       홈
+  ko-KR   : *KO
+  fr      : &FR       Accueil
+  fr-BE   : *FR
+  fr-CA   : *FR
+  fr-CH   : *FR
+  fr-FR   : *FR
+  fr-LU   : *FR
+  # @end locale config
+show_title: false
+articles:
+  data_source: paginator.posts
+  article_type: BlogPosting
+  show_cover: false
+  show_excerpt: true
+  show_readmore: true
+  show_info: true
+---
+<div class="layout--home">
+  {%- include paginator.html -%}
+</div>
+<script>
+  {%- include scripts/home.js -%}
+</script>
+
+{{ content }}
diff --git a/_layouts/landing.html b/_layouts/landing.html
new file mode 100644
index 0000000..306067b
--- /dev/null
+++ b/_layouts/landing.html
@@ -0,0 +1,178 @@
+---
+layout: page
+header: false
+full_width: true
+article_header:
+  type: overlay
+  align: center
+  height: 80vh
+---
+<div class="layout--landing">
+  <div class="heros">
+  {%- for _section in page.data.sections -%}
+    {%- include snippets/get-nav-url.html path=_section.background_image.src -%}
+    {%- assign _url = __return -%}
+    {%- if _section.theme == 'light' -%}
+      <section class="hero hero--center hero--light" id="hero-{{ forloop.index }}"
+    {%- elsif _section.theme == 'dark' -%}
+      <section class="hero hero--center hero--dark" id="hero-{{ forloop.index }}"
+    {%- else -%}
+      <section class="hero hero--center" id="hero-{{ forloop.index }}"
+    {%- endif -%}
+    {%- if _section.background_color -%}
+        style="background-image: url({{ _url }}); background-color: {{ _section.background_color }};">
+    {%- else -%}
+        style="background-image: url({{ _url }});">
+    {%- endif -%}
+
+        <div class="hero__content">
+          <div class="mb-5">
+
+            <h3>{{ _section.title }}</h3>
+              {%- if _section.excerpt-%}
+            <p>{{ _section.excerpt }}</p>
+            {%- endif -%}
+
+            {%- if _section.actions -%}
+              <ul class="menu">
+              {%- for _action in _section.actions -%}
+                {%- include snippets/get-nav-url.html path=_action.url -%}
+                {%- assign _url = __return -%}
+                {%- assign _type = _action.type | default: 'outline-info' -%}
+                <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
+              {%- endfor -%}
+              </ul>
+            {%- endif -%}
+
+          </div>
+
+          {%- if _section.children -%}
+            {%- assign _size = _section.children | size  -%}
+            <div class="grid--container">
+              <div class="grid grid--p-3">
+
+                {%- for child in _section.children -%}
+
+                  {%- if _size >= 2 -%}
+                    {%- assign _cell_md_col = 6 -%}
+                  {%- else -%}
+                    {%- assign _cell_md_col = 12 | divided_by: _size -%}
+                  {%- endif -%}
+
+                  {%- if _size >= 4 -%}
+                    {%- assign _cell_lg_col = 3 -%}
+                  {%- else -%}
+                    {%- assign _cell_lg_col = 12 | divided_by: _size -%}
+                  {%- endif -%}
+
+                  <div class="cell cell--12 cell--md-{{ _cell_md_col }} cell--lg-{{ _cell_lg_col }} ">
+
+                    <div class="mb-5">
+                      <h4>{{ child.title }}</h4>
+
+                      {%- if child.excerpt-%}
+                        <p>{{ child.excerpt }}</p>
+                      {%- endif -%}
+
+                      {%- if child.actions -%}
+                        <ul class="menu">
+                          {%- for _action in child.actions -%}
+                            {%- include snippets/get-nav-url.html path=_action.url -%}
+                            {%- assign _url = __return -%}
+                            {%- assign _type = _action.type | default: 'outline-info' -%}
+                            <li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
+                          {%- endfor -%}
+                        </ul>
+                      {%- endif -%}
+                    </div>
+
+                    {%- if child.image and child.image.src -%}
+
+                      {%- if child.image.url -%}
+                        {%- include snippets/get-nav-url.html path=child.image.url -%}
+                        {%- assign _item_image_url = __return -%}
+                      {%- else -%}
+                        {%- assign _item_image_url = nil -%}
+                      {%- endif -%}
+
+                      {%- include snippets/get-nav-url.html path=child.image.src -%}
+                      {%- assign _item_image_src = __return -%}
+
+                      {%- if child.image.is_row -%}
+                        <div class="mb-5">
+                      {%- endif -%}
+                          <div class="mx-auto" style="{{ child.image.style }}">
+                      {%- if _item_image_url -%}
+                            <a href="{{ _item_image_url }}">
+                      {%- endif -%}
+                              <img src="{{ _item_image_src }}"/>
+                      {%- if _item_image_url -%}
+                            </a>
+                      {%- endif -%}
+                          </div>
+                      {%- if child.image.is_row -%}
+                        </div>
+                      {%- endif -%}
+                    {%- endif -%}
+
+                    {%- if child.content-%}
+                      <p>{{ child.content }}</p>
+                    {%- endif -%}
+
+                  </div>
+                {%- endfor-%}
+
+              </div>
+            </div>
+          {%- endif -%}
+
+      {%- if _section.image.full_width == true -%}
+        </div> {% comment %} end hero__content {% endcomment %}
+      {%- endif -%}
+
+          {%- if _section.image and _section.image.src -%}
+
+            {%- if _section.image.url -%}
+              {%- include snippets/get-nav-url.html path=_section.image.url -%}
+              {%- assign _section_image_url = __return -%}
+            {%- else -%}
+              {%- assign _section_image_url = nil -%}
+            {%- endif -%}
+
+            {%- include snippets/get-nav-url.html path=_section.image.src -%}
+            {%- assign _section_image_src = __return -%}
+
+            {%- if _section.image.is_row -%}
+              <div class="mb-5">
+            {%- endif -%}
+                <div class="mx-auto" style="{{ _section.image.style }}">
+            {%- if _section_image_url -%}
+                  <a href="{{ _section_image_url }}">
+            {%- endif -%}
+                    {%- if _section.image.full_width == true -%}
+                      <img class="hero__cover hero__cover--full-width" src="{{ _section_image_src }}"/>
+                    {%- else -%}
+                      <img class="hero__cover" src="{{ _section_image_src }}"/>
+                    {%- endif -%}
+            {%- if _section_image_url -%}
+                  </a>
+            {%- endif -%}
+                </div>
+            {%- if _section.image.is_row -%}
+              </div>
+            {%- endif -%}
+          {%- endif -%}
+
+      {%- if _section.image.full_width != true -%}
+        </div> {% comment %} end hero__content {% endcomment %}
+      {%- endif -%}
+
+      {%- if _section.content-%}
+        <p>{{ _section.content }}</p>
+      {%- endif -%}
+      </section>
+  {%- endfor -%}
+  </div>
+</div>
+
+{{ content }}
diff --git a/_layouts/none.html b/_layouts/none.html
new file mode 100644
index 0000000..cddd070
--- /dev/null
+++ b/_layouts/none.html
@@ -0,0 +1 @@
+{{ content }}
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..de6b7b2
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,270 @@
+---
+layout: base
+---
+{%- assign _page_mode = page.mode | default: layout.mode | default: site.data.variables.default.page.mode -%}
+{%- assign _page_type = page.type | default: layout.type | default: site.data.variables.default.page.type -%}
+{%- assign _article_header_type = page.article_header.type | default: layout.article_header.type -%}
+
+{%- include snippets/assign.html
+  target=layout.header source0=page.header -%}
+{%- assign _header = __return -%}
+
+{%- include snippets/assign.html
+  target=layout.footer source0=page.footer -%}
+{%- assign _footer = __return -%}
+
+{%- include snippets/assign.html
+  target=layout.lightbox source0=page.lightbox -%}
+{%- assign _lightbox = __return -%}
+
+{%- include snippets/assign.html
+  target = site.data.variables.default.page.full_width
+  source0=layout.full_width source1=page.full_width -%}
+{%- assign _full_width = __return -%}
+
+{%- include snippets/assign.html
+  target = site.data.variables.default.page.comment
+  source0=layout.comment source1=page.comment -%}
+{%- assign _comment = __return -%}
+
+
+{%- assign _article_header_excerpt_truncate = include.excerpt_truncate | default: 200 -%}
+
+{%- if page.sidebar -%}
+<div class="layout--page layout--page--sidebar clearfix js-page-root">
+  <div class="page__mask d-print-none js-page-mask js-sidebar-hide"></div>
+  <div class="page__viewport">
+    <div class="page__actions d-print-none">
+      <div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
+        <i class="fas fa-bars icon--show"></i>
+      </div>
+    </div>
+
+    <div class="grid page__grid">
+
+      <div class="page__sidebar d-print-none">
+        {%- include sidebar/toc.html -%}
+      </div>
+
+{%- else -%}
+<div class="layout--page js-page-root">
+{%- endif -%}
+
+    {%- assign _page_main_class = 'page__main js-page-main' -%}
+    {%- if _page_mode == 'immersive' -%}
+      {%- assign _page_main_class = _page_main_class | append: ' page__main--immersive' -%}
+    {%- endif -%}
+    {%- unless page.sidebar -%}
+      {%- assign _page_main_class = _page_main_class | append: ' page__viewport' -%}
+    {%- endunless -%}
+    {%- if _footer == false -%}
+      {%- assign _page_main_class = _page_main_class | append: ' hide-footer' -%}
+    {%- endif -%}
+    {%- if page.aside -%}
+      {%- assign _page_main_class = _page_main_class | append: ' has-aside' -%}
+    {%- elsif _full_width -%}
+      {%- assign _page_main_class = _page_main_class | append: ' full-width' -%}
+    {%- endif -%}
+    <div class="{{ _page_main_class }} cell cell--auto">
+
+      <div class="page__main-inner">
+      {%- if _header != false -%}
+        <div class="page__header d-print-none">
+        {%- assign _header_theme = page.header.theme | default: layout.header.theme -%}
+        {%- if _header_theme == 'dark'-%}
+          {%- include header.html theme='dark' background=page.header.background -%}
+        {%- elsif _header_theme == 'light' -%}
+          {%- include header.html theme='light' background=page.header.background -%}
+        {%- else -%}
+          {%- include header.html -%}
+        {%- endif -%}
+        </div>
+      {%- endif -%}
+
+
+        <div class="page__content">
+        {%- if _article_header_type == 'overlay' or _article_header_type == 'cover' -%}
+
+          {%- if _article_header_type == 'overlay' -%}
+
+            {%- assign _article_header_height = page.article_header.height | default: layout.article_header.height -%}
+            {%- assign _article_header_align = page.article_header.align | default: layout.article_header.align | default: site.data.variables.default.page.article_header.align -%}
+            {%- assign _article_header_theme = page.article_header.theme | default: layout.article_header.theme | default: site.data.variables.default.page.article_header.theme -%}
+
+            {%- if page.article_header.background_image.src -%}
+              {%- assign _header_background_image_src = page.article_header.background_image.src -%}
+            {%- elsif page.article_header.background_image != false and page.cover -%}
+              {%- assign _header_background_image_src = page.cover -%}
+            {%- endif -%}
+
+            {%- if page.article_header.background_image.gradient -%}
+              {%- assign _header_background_image = page.article_header.background_image.gradient -%}
+              {%- if _header_background_image_src -%}
+                {%- assign _header_background_image = _header_background_image | append: ',' -%}
+              {%- endif -%}
+            {%- endif -%}
+
+            {%- if _header_background_image_src -%}
+              {%- include snippets/get-nav-url.html path=_header_background_image_src -%}
+              {%- assign _header_background_image_src = __return -%}
+              {%- assign _header_background_image = _header_background_image
+                | append: 'url(' | append: _header_background_image_src  | append: ')'-%}
+            {%- endif -%}
+
+            {%- assign _header_style = 'background-image:' | append: _header_background_image | append: ';' -%}
+
+            {%- if page.article_header.background_color -%}
+              {%- assign _header_style = _header_style | append: 'background-color:' | append: page.article_header.background_color | append: ';' -%}
+            {%- endif -%}
+
+            {%- if _article_header_height -%}
+              {%- assign _header_style = _header_style | append: 'min-height:' | append: _article_header_height | append: ';' -%}
+            {%- endif -%}
+
+            <div class="article__header--overlay">
+
+            {%- if _article_header_theme == 'light' -%}
+              {%- if _article_header_align == 'center' -%}
+                <div class="hero hero--center hero--light overlay" style="{{ _header_style }}">
+              {%- else -%}
+                <div class="hero hero--light overlay" style="{{ _header_style }}">
+              {%- endif -%}
+            {%- elsif _article_header_theme == 'dark' -%}
+              {%- if _article_header_align == 'center' -%}
+                <div class="hero hero--center hero--dark overlay" style="{{ _header_style }}">
+              {%- else -%}
+                <div class="hero hero--dark overlay" style="{{ _header_style }}">
+              {%- endif -%}
+            {%- else -%}
+              {%- if _article_header_align == 'center' -%}
+                <div class="hero hero--center overlay" style="{{ _header_style }}">
+              {%- else -%}
+                <div class="hero overlay" style="{{ _header_style }}">
+              {%- endif -%}
+            {%- endif -%}
+                <div class="hero__content">
+                  {%- if _full_width == false -%}
+                    <div class ="main">
+                  {%- endif -%}
+                    {%- include article-info.html article=page semantic=false -%}
+                    {%- include article-header.html article=page semantic=false -%}
+                    {%- if page.excerpt -%}
+                      <p class="overlay__excerpt">{{ page.excerpt | strip_html | strip_newlines | strip | truncate: _article_header_excerpt_truncate }}</p>
+                    {%- endif -%}
+                    {%- if page.article_header.actions -%}
+                      <ul class="menu">
+                        {%- for _action in page.article_header.actions -%}
+                          {%- include snippets/get-nav-url.html path=_action.url -%}
+                          {%- assign _url = __return -%}
+                          {%- assign _type = _action.type | default: 'info' -%}
+                          <li><a class="button button--{{ _type }} button--rounded button--xl" href="{{ _url }}">{{ _action.text }}</a></li>
+                        {%- endfor -%}
+                      </ul>
+                    {%- endif -%}
+                  {%- if _full_width == false -%}
+                    </div>
+                  {%- endif -%}
+                </div>
+              </div>
+            </div>
+          {%- elsif _article_header_type == 'cover' -%}
+            {%- if page.article_header.image.src -%}
+              {%- include snippets/get-nav-url.html path=page.article_header.image.src -%}
+              {%- assign _header_image_src = __return -%}
+              <img class="article__header--cover" src="{{ _header_image_src }}"></img>
+            {%- endif -%}
+          {%- endif -%}
+
+        {%- endif -%}
+
+
+        {%- if _full_width == false -%}
+          <div class ="main">
+        {%- endif -%}
+            <div class="grid grid--reverse">
+
+              <div class="col-aside d-print-none js-col-aside">
+                {%- if page.aside -%}
+                  <aside class="page__aside js-page-aside">
+                    {%- include aside/toc.html -%}
+                  </aside>
+                {%- endif -%}
+              </div>
+
+              <div class="col-main cell cell--auto">
+                {%- include main/top/custom.html -%}
+                {%- if _page_type == 'article' -%}
+                  <article itemscope itemtype="http://schema.org/Article">
+                {%- elsif _page_type == 'webpage' -%}
+                  <article itemscope itemtype="http://schema.org/WebPage">
+                {%- else -%}
+                  <article>
+                {%- endif -%}
+
+                {%- if _article_header_type == 'overlay' or page.article_header == false -%}
+                  {%- include article-header.html article=page html=false -%}
+                  {%- include article-info.html article=page html=false -%}
+                {%- else -%}
+                  {%- include article-header.html article=page -%}
+                  {%- include article-info.html article=page -%}
+                {%- endif -%}
+
+                    <div class="js-article-content">{{ content }}</div>
+                    {%- if _comment != false -%}
+                      <section class="page__comments d-print-none">{%- include comments.html -%}</section>
+                    {%- endif -%}
+                </article>
+                {%- include main/bottom/custom.html -%}
+              </div>
+            </div>
+
+        {%- if _full_width == false -%}
+          </div>
+        {%- endif -%}
+        </div>
+
+        {%- if _footer != false -%}
+          <div class="page__footer d-print-none">{%- include footer.html -%}</div>
+        {%- endif -%}
+      </div>
+    </div> {%- comment -%} end page__main {%- endcomment -%}
+{%- if page.sidebar -%}
+    </div> {%- comment -%} end grid {%- endcomment -%}
+  </div> {%- comment -%} end page__viewport {%- endcomment -%}
+{%- endif -%}
+
+<script>{%- include scripts/lib/modal.js -%}</script>
+{%- if _lightbox == true -%}
+  <div class="modal d-print-none js-page-gallery-modal"><div class="gallery"></div></div>
+{%- endif -%}
+{%- if _header != false -%}
+  <div class="modal modal--overflow page__search-modal d-print-none js-page-search-modal">{%- include search.html -%}</div>
+{%- endif -%}
+</div>
+
+
+<script>
+  {%- include scripts/lib/scroll-to.js -%}
+  {%- include scripts/lib/affix.js -%}
+  {%- include scripts/lib/toc.js -%}
+  {%- if _lightbox == true -%}
+    {%- include scripts/lib/gallery.js -%}
+    {%- include scripts/components/lightbox.js -%}
+  {%- endif -%}
+  {%- include scripts/page.js -%}
+</script>
+
+{%- if page.sidebar -%}
+<script>{%- include scripts/components/sidebar.js -%}</script>
+{%- endif -%}
+
+{%- if page.aside -%}
+<script>
+  /* toc must before affix, since affix need to konw toc' height. */
+  {%- if page.aside.toc -%}{%- include scripts/aside/toc.js -%}{%- endif -%}
+  {%- include scripts/aside/affix.js -%}
+</script>
+{%- endif -%}
+
+{%- include markdown-enhancements.html -%}
+{%- include pageview.html -%}
diff --git a/_sass/additional/_alert.scss b/_sass/additional/_alert.scss
new file mode 100644
index 0000000..fa5651f
--- /dev/null
+++ b/_sass/additional/_alert.scss
@@ -0,0 +1,29 @@
+.article__content {
+  p.success {
+    padding: map-get($spacers, 2) map-get($spacers, 3);
+    background-color: rgba($green, .1);
+    border: 1px solid $green;
+    border-radius: map-get($base, border-radius);
+  }
+
+  p.info {
+    padding: map-get($spacers, 2) map-get($spacers, 3);
+    background-color: rgba($blue, .1);
+    border: 1px solid $blue;
+    border-radius: map-get($base, border-radius);
+  }
+
+  p.warning {
+    padding: map-get($spacers, 2) map-get($spacers, 3);
+    background-color: rgba($yellow, .1);
+    border: 1px solid $yellow;
+    border-radius: map-get($base, border-radius);
+  }
+
+  p.error {
+    padding: map-get($spacers, 2) map-get($spacers, 3);
+    background-color: rgba($red, .1);
+    border: 1px solid $red;
+    border-radius: map-get($base, border-radius);
+  }
+}
diff --git a/_sass/additional/_photo-frame.scss b/_sass/additional/_photo-frame.scss
new file mode 100644
index 0000000..55a30c7
--- /dev/null
+++ b/_sass/additional/_photo-frame.scss
@@ -0,0 +1,17 @@
+.article__content {
+  img.shadow, .shadow > img {
+    @include box-shadow();
+  }
+
+  img.border, .border > img {
+    border: 1px solid $border-color-l;
+  }
+
+  img.rounded, .rounded > img {
+    border-radius: map-get($base, border-radius);
+  }
+
+  img.circle, .circle > img {
+    border-radius: 50%;
+  }
+}
diff --git a/_sass/additional/_tag.scss b/_sass/additional/_tag.scss
new file mode 100644
index 0000000..6a418ed
--- /dev/null
+++ b/_sass/additional/_tag.scss
@@ -0,0 +1,21 @@
+.article__content {
+  code.success {
+    color: $text-color-function;
+    background-color: $green;
+  }
+
+  code.info {
+    color: $text-color-function;
+    background-color: $blue;
+  }
+
+  code.warning {
+    color: $text-color-function;
+    background-color: $yellow;
+  }
+
+  code.error {
+    color: $text-color-function;
+    background-color: $red;
+  }
+}
diff --git a/_sass/animate/_fade-in-down.scss b/_sass/animate/_fade-in-down.scss
new file mode 100644
index 0000000..a32a4e7
--- /dev/null
+++ b/_sass/animate/_fade-in-down.scss
@@ -0,0 +1,10 @@
+@include keyframes(fade-in-down) {
+  from {
+    opacity: 0;
+    @include transform(translateY(-2rem));
+  }
+  to {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+}
diff --git a/_sass/animate/_fade-in-up.scss b/_sass/animate/_fade-in-up.scss
new file mode 100644
index 0000000..920a0bb
--- /dev/null
+++ b/_sass/animate/_fade-in-up.scss
@@ -0,0 +1,10 @@
+@include keyframes(fade-in-up) {
+  from {
+    opacity: 0;
+    @include transform(translateY(2rem));
+  }
+  to {
+    opacity: 1;
+    @include transform(translateY(0));
+  }
+}
diff --git a/_sass/animate/_fade-in.scss b/_sass/animate/_fade-in.scss
new file mode 100644
index 0000000..03fdea8
--- /dev/null
+++ b/_sass/animate/_fade-in.scss
@@ -0,0 +1,8 @@
+@include keyframes(fade-in) {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/_sass/common/_classes.scss b/_sass/common/_classes.scss
new file mode 100644
index 0000000..b5615d8
--- /dev/null
+++ b/_sass/common/_classes.scss
@@ -0,0 +1,24 @@
+/* stylelint-disable at-rule-name-space-after, at-rule-semicolon-space-before  */
+@charset "utf-8";
+@import
+  "common/classes/animation",
+  "common/classes/transform",
+  "common/classes/transition",
+  "common/classes/user-select",
+
+  "common/classes/clearfix",
+  "common/classes/media",
+  "common/classes/clickable",
+  "common/classes/display",
+  "common/classes/flex",
+  "common/classes/horizontal-rules",
+  "common/classes/pseudo",
+  "common/classes/link",
+  "common/classes/text",
+  "common/classes/overflow",
+  "common/classes/shadow",
+  "common/classes/spacing",
+  "common/classes/split-line",
+  "common/classes/grid"
+;
+/* stylelint-enable */
diff --git a/_sass/common/_function.scss b/_sass/common/_function.scss
new file mode 100644
index 0000000..1de2492
--- /dev/null
+++ b/_sass/common/_function.scss
@@ -0,0 +1,15 @@
+@function get-color-theme($color) {
+  @if lightness($color) < 15% {
+    @return "dark";
+  } @else {
+    @return "light";
+  }
+}
+
+@function breakpoint-infix($name, $breakpoints: default) {
+  @if $breakpoints == default {
+    $breakpoints: $responsive;
+  }
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, "#{$name}-", "");
+}
diff --git a/_sass/common/_print.scss b/_sass/common/_print.scss
new file mode 100644
index 0000000..d798d87
--- /dev/null
+++ b/_sass/common/_print.scss
@@ -0,0 +1,20 @@
+@media print {
+  a {
+    @include plain() {
+      text-decoration: underline;
+    }
+    @include hover() {
+      text-decoration: underline;
+    }
+    @include active() {
+      text-decoration: underline;
+    }
+  }
+
+  img,
+  tr,
+  pre,
+  blockquote {
+    page-break-inside: avoid;
+  }
+}
diff --git a/_sass/common/_reset.scss b/_sass/common/_reset.scss
new file mode 100644
index 0000000..2062d37
--- /dev/null
+++ b/_sass/common/_reset.scss
@@ -0,0 +1,174 @@
+@mixin block-elements {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  hr,
+  blockquote,
+  figure,
+  pre,
+  .highlighter-rouge,
+  ul,
+  ol,
+  dl,
+  table,
+  .footnotes {
+    @content;
+  }
+}
+@mixin heading-elements {
+  h1, h2, h3, h4, h5, h6 {
+    @content;
+  }
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/**
+ * 1. Prevent adjustments of font size after orientation changes in iOS.
+ **/
+
+html {
+  font-size: map-get($base, font-size-root);
+  -webkit-text-size-adjust: 100%; /* 1 */
+  @media print {
+    font-size: map-get($base, font-size-root-sm);
+  }
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
+  ::-moz-selection {
+    background: $select-color;
+  }
+  ::-webkit-selection {
+    background: $select-color;
+  }
+  ::selection {
+    background: $select-color;
+  }
+}
+
+@include block-elements() {
+  padding: 0;
+  margin: map-get($spacers, 2) 0;
+}
+
+input, textarea, select, button {
+  font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
+  color: $text-color;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  font-weight: map-get($base, font-weight-bold);
+}
+
+h1 {
+  font-size: map-get($base, font-size-h1);
+  color: $text-color-d;
+  @include media-breakpoint-down(md) {
+    font-size: map-get($base, font-size-h1-sm);
+  }
+}
+
+h2 {
+  font-size: map-get($base, font-size-h2);
+  color: $text-color-d;
+  @include media-breakpoint-down(md) {
+    font-size: map-get($base, font-size-h2-sm);
+  }
+}
+
+h3 {
+  font-size: map-get($base, font-size-h3);
+  color: $text-color-d;
+  @include media-breakpoint-down(md) {
+    font-size: map-get($base, font-size-h3-sm);
+  }
+}
+
+h4 {
+  font-size: map-get($base, font-size-h4);
+  color: $text-color;
+  @include media-breakpoint-down(md) {
+    font-size: map-get($base, font-size-h4-sm);
+  }
+}
+
+h5 {
+  font-size: map-get($base, font-size-h5);
+  color: $text-color;
+  @include media-breakpoint-down(md) {
+    font-size: map-get($base, font-size-h5-sm);
+  }
+}
+
+h6 {
+  font-size: map-get($base, font-size-h6);
+  color: $text-color-l;
+  @include media-breakpoint-down(md) {
+    font-size: map-get($base, font-size-h6-sm);
+  }
+}
+
+a {
+  font-weight: map-get($base, font-weight-bold);
+  @include link-colors($main-color-1);
+}
+
+pre, code {
+  font-family: map-get($base, font-family-code);
+}
+
+code {
+  font-size: map-get($base, font-size-xs);
+  line-height: map-get($base, line-height-sm);
+}
+
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: map-get($base, font-size-sm);
+}
+
+button {
+  padding: 0;
+  margin: 0;
+  font-size: map-get($spacers, 3);
+  cursor: pointer;
+  background-color: transparent;
+  border-width: 0;
+  outline: none;
+}
+
+input {
+  &::-ms-clear {
+    display: none;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+// mermaid
+.mermaidTooltip {
+  display: none;
+}
diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
new file mode 100644
index 0000000..faf4e98
--- /dev/null
+++ b/_sass/common/_variables.scss
@@ -0,0 +1,150 @@
+$base: (
+  font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
+  font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
+
+  font-size-root:         16px,
+  font-size-root-sm:      14px,
+
+  font-size-xl:           1.5rem,
+  font-size-lg:           1.25rem,
+  font-size:              1rem,
+  font-size-sm:           .85rem,
+  font-size-xs:           .7rem,
+
+  font-size-h1-xl:        3.5rem,
+  font-size-h2-xl:        2.5rem,
+  font-size-h3-xl:        2rem,
+  font-size-h4-xl:        1.75rem,
+  font-size-h5-xl:        1.5rem,
+  font-size-h6-xl:        1.5rem,
+
+  font-size-h1-lg:        3rem,
+  font-size-h2-lg:        2rem,
+  font-size-h3-lg:        1.75rem,
+  font-size-h4-lg:        1.5rem,
+  font-size-h5-lg:        1.25rem,
+  font-size-h6-lg:        1.25rem,
+
+  font-size-h1:           2.5rem,
+  font-size-h2:           1.9rem,
+  font-size-h3:           1.5rem,
+  font-size-h4:           1.2rem,
+  font-size-h5:           1rem,
+  font-size-h6:           1rem,
+
+  font-size-h1-sm:        2rem,
+  font-size-h2-sm:        1.5rem,
+  font-size-h3-sm:        1.35rem,
+  font-size-h4-sm:        1.15rem,
+  font-size-h5-sm:        1rem,
+  font-size-h6-sm:        1rem,
+
+  font-size-h1-xs:        1.05rem,
+  font-size-h2-xs:        1rem,
+  font-size-h3-xs:        .95rem,
+  font-size-h4-xs:        .9rem,
+  font-size-h5-xs:        .85rem,
+  font-size-h6-xs:        .85rem,
+
+  font-weight:            400,
+  font-weight-bold:       700,
+
+  line-height-xl:         2,
+  line-height-lg:         1.8,
+  line-height:            1.6,
+  line-height-sm:         1.4,
+  line-height-xs:         1.2,
+
+  spacer:                 1rem,
+
+  border-radius-lg:       .8rem,
+  border-radius:          .4rem,
+  border-radius-sm:       .2rem
+);
+
+$spacers: (
+  0:                      0,
+  1:                      map-get($base, spacer) * .25,
+  2:                      map-get($base, spacer) * .5,
+  3:                      map-get($base, spacer),
+  4:                      map-get($base, spacer) * 1.5,
+  5:                      map-get($base, spacer) * 3
+);
+
+$z-indexes: (
+  actions: 996,
+  mask: 997,
+  sidebar: 998,
+  modal: 999
+);
+
+$layout: (
+  header-height:          5rem,
+  header-height-sm:       3rem,
+  content-max-width:      950px,
+  sidebar-width:          250px,
+  sidebar-header-height:  3rem,
+  aside-width:            220px
+);
+
+//     sm       md       lg
+// | ------ | ------ | ------ |
+// 0       500      1024      -
+
+$responsive: (
+  sm:                      0,
+  md:                      500px,
+  lg:                      1024px
+);
+
+$animation: (
+  duration:               .4s,
+  duration-sm:            .2s,
+  timing-function:        ease-in-out
+);
+
+$clickable: (
+  transition:             all .2s ease-in-out
+);
+
+$button-height-xl:        2.8rem;
+$button-height-lg:        2.3rem;
+$button-height:           1.9rem;
+$button-height-sm:        1.5rem;
+$button-height-xs:        1.2rem;
+
+$button: (
+  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
+  padding-x-xl:           $button-height-xl / 3,
+  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
+  padding-x-lg:           $button-height-lg / 3,
+  padding-y:              ($button-height - map-get($base, font-size)) / 2,
+  padding-x:              $button-height / 3,
+  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
+  padding-x-sm:           $button-height-sm / 3,
+  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
+  padding-x-xs:           $button-height-xs / 3,
+
+  pill-radius:            6rem,
+
+  circle-diameter-xl:     $button-height-xl,
+  circle-diameter-lg:     $button-height-lg,
+  circle-diameter:        $button-height,
+  circle-diameter-sm:     $button-height-sm,
+  circle-diameter-xs:     $button-height-xs,
+
+  font-weight:            map-get($base, font-weight-bold)
+);
+
+$image: (
+  width-xl:  20em,
+  width-lg:  16rem,
+  width:     12rem,
+  width-sm:  8rem,
+  width-xs:  4rem
+);
+
+$menu: (
+  horizontal-spacer: 1,
+  horizontal-item-vertical-spacer: 1
+);
diff --git a/_sass/common/classes/_animation.scss b/_sass/common/classes/_animation.scss
new file mode 100644
index 0000000..2dbc47d
--- /dev/null
+++ b/_sass/common/classes/_animation.scss
@@ -0,0 +1,13 @@
+@mixin animation($value) {
+  -webkit-animation: $value;
+  animation: $value;
+}
+
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
diff --git a/_sass/common/classes/_clearfix.scss b/_sass/common/classes/_clearfix.scss
new file mode 100644
index 0000000..caf3124
--- /dev/null
+++ b/_sass/common/classes/_clearfix.scss
@@ -0,0 +1,19 @@
+@mixin clearfix() {
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}
+
+.clearfix {
+  @include clearfix();
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
diff --git a/_sass/common/classes/_clickable.scss b/_sass/common/classes/_clickable.scss
new file mode 100644
index 0000000..af32eff
--- /dev/null
+++ b/_sass/common/classes/_clickable.scss
@@ -0,0 +1,159 @@
+@mixin clickable($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default, $ignore-path: default) {
+
+  @if $theme == default {
+    @if $bg-clr == null and $hover-bg-clr == null {
+      @if $hover-clr == default {
+        $theme: get-color-theme($clr);
+      } @else {
+        $theme: get-color-theme($hover-clr);
+      }
+    } @else {
+      @if $hover-bg-clr == default {
+        $theme: get-color-theme($bg-clr);
+      } @else {
+        $theme: get-color-theme($hover-bg-clr);
+      }
+    }
+  }
+
+  @if $ignore-path == default {
+    $ignore-path: false;
+  } @else {
+    $ignore-path: true;
+  }
+
+  @include transition(map-get($clickable, transition));
+  @if $ignore-path == false {
+    svg {
+      path {
+        @include transition(map-get($clickable, transition));
+      }
+    }
+  }
+
+  // hover
+  @if $hover-clr == default {
+    @if $hover-bg-clr == null {
+      @if $theme == "light" {
+        $hover-clr: darken($clr, 14%);
+      }
+      @if $theme == "dark" {
+        $hover-clr: lighten($clr, 18%);
+      }
+    } @else if $hover-bg-clr == default {
+      $hover-clr: $clr;
+    }
+  }
+
+  @if $hover-bg-clr == default {
+    @if $theme == "light" {
+      $hover-bg-clr: darken($bg-clr, 14%);
+    }
+    @if $theme == "dark" {
+      $hover-bg-clr: lighten($bg-clr, 18%);
+    }
+  }
+
+  // active
+  @if $active-clr == default {
+    @if $active-bg-clr == null {
+      @if $theme == "light" {
+        $active-clr: darken($hover-clr, 15%);
+      }
+      @if $theme == "dark" {
+        $active-clr: lighten($hover-clr, 16%);
+      }
+    } @else if $active-bg-clr == default {
+      $active-clr: $hover-clr;
+    }
+  }
+
+  @if $active-bg-clr == default {
+    @if $theme == "light" {
+      $active-bg-clr: darken($hover-bg-clr, 15%);
+    }
+    @if $theme == "dark" {
+      $active-bg-clr: lighten($hover-bg-clr, 16%);
+    }
+  }
+
+  // focus
+  @if $focus-clr == default {
+    @if $focus-bg-clr == null {
+      $focus-clr: $hover-clr;
+    } @else if $hover-bg-clr == default {
+      $focus-clr: $hover-clr;
+    }
+  }
+
+  @if $focus-bg-clr == default {
+    $focus-bg-clr: $hover-bg-clr;
+  }
+
+  @include plain() {
+    color: $clr;
+    @if $bg-clr {
+      background-color: $bg-clr;
+    }
+    @if $ignore-path == false {
+      svg path {
+        fill: $clr;
+      }
+    }
+  }
+  @include hover() {
+    color: $hover-clr;
+    @if $hover-bg-clr {
+      background-color: $hover-bg-clr;
+    }
+    @if $ignore-path == false {
+      svg path {
+        fill: $hover-clr;
+      }
+    }
+  }
+  @include active() {
+    color: $active-clr;
+    @if $active-bg-clr {
+      background-color: $active-bg-clr;
+    }
+    @if $ignore-path == false {
+      svg path {
+        fill: $active-clr;
+      }
+    }
+  }
+  @include focus() {
+    color: $focus-clr;
+    @if $focus-bg-clr{
+      background-color: $focus-bg-clr;
+      box-shadow: 0 0 0 2px rgba($focus-bg-clr, .4);
+    }
+    @if $ignore-path == false {
+      svg path {
+        fill: $focus-clr;
+      }
+    }
+  }
+  @include disabled() {
+    @if $theme == "light" {
+      color: rgba($clr, .2) !important;
+    }
+    @if $theme == "dark" {
+      color: rgba($clr, .4) !important;
+    }
+    @if $bg-clr {
+      background-color: $bg-clr !important;
+    }
+    @if $ignore-path == false {
+      svg path {
+        @if $theme == "light" {
+          fill: rgba($clr, .2) !important;
+        }
+        @if $theme == "dark" {
+          fill: rgba($clr, .4) !important;
+        }
+      }
+    }
+  }
+}
diff --git a/_sass/common/classes/_display.scss b/_sass/common/classes/_display.scss
new file mode 100644
index 0000000..411611e
--- /dev/null
+++ b/_sass/common/classes/_display.scss
@@ -0,0 +1,13 @@
+@each $breakpoint in map-keys($responsive) {
+  @include media-breakpoint-up($breakpoint) {
+    .d-#{breakpoint-infix($breakpoint)}none {
+      display: none !important;
+    }
+  }
+}
+
+.d-print-none {
+  @media print {
+    display: none !important;
+  }
+}
diff --git a/_sass/common/classes/_flex.scss b/_sass/common/classes/_flex.scss
new file mode 100644
index 0000000..59e1570
--- /dev/null
+++ b/_sass/common/classes/_flex.scss
@@ -0,0 +1,394 @@
+// Flexbox Mixins
+// http://philipwalton.github.io/solved-by-flexbox/
+// https://github.com/philipwalton/solved-by-flexbox
+//
+// Copyright (c) 2013 Brian Franco
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+// This is a set of mixins for those who want to mess around with flexbox
+// using the native support of current browsers. For full support table
+// check: http://caniuse.com/flexbox
+//
+// Basically this will use:
+//
+// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
+// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
+//
+// This was inspired by:
+//
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+//
+// With help from:
+//
+// * http://w3.org/tr/css3-flexbox/
+// * http://the-echoplex.net/flexyboxes/
+// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
+// * http://css-tricks.com/using-flexbox/
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
+
+//----------------------------------------------------------------------
+
+// Flexbox Containers
+//
+// The 'flex' value causes an element to generate a block-level flex
+// container box.
+//
+// The 'inline-flex' value causes an element to generate a inline-level
+// flex container box.
+//
+// display: flex | inline-flex
+//
+// http://w3.org/tr/css3-flexbox/#flex-containers
+//
+// (Placeholder selectors for each type, for those who rather @extend)
+
+@mixin flexbox {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+%flexbox { @include flexbox; }
+
+//----------------------------------
+
+@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+//----------------------------------------------------------------------
+
+// Flexbox Direction
+//
+// The 'flex-direction' property specifies how flex items are placed in
+// the flex container, by setting the direction of the flex container's
+// main axis. This determines the direction that flex items are laid out in.
+//
+// Values: row | row-reverse | column | column-reverse
+// Default: row
+//
+// http://w3.org/tr/css3-flexbox/#flex-direction-property
+
+@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -moz-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+// Shorter version:
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+//----------------------------------------------------------------------
+
+// Flexbox Wrap
+//
+// The 'flex-wrap' property controls whether the flex container is single-line
+// or multi-line, and the direction of the cross-axis, which determines
+// the direction new lines are stacked in.
+//
+// Values: nowrap | wrap | wrap-reverse
+// Default: nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-wrap-property
+
+@mixin flex-wrap($value: nowrap) {
+  // No Webkit Box fallback.
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Flow (shorthand)
+//
+// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
+// and 'flex-wrap' properties, which together define the flex container's
+// main and cross axes.
+//
+// Values: <flex-direction> | <flex-wrap>
+// Default: row nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-flow-property
+
+@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit Box fallback.
+  -webkit-flex-flow: $values;
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Order
+//
+// The 'order' property controls the order in which flex items appear within
+// their flex container, by assigning them to ordinal groups.
+//
+// Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#order-property
+
+@mixin order($int: 0) {
+  -ms-flex-order: $int;
+  -webkit-order: $int;
+  -moz-order: $int;
+  order: $int;
+  -webkit-box-ordinal-group: $int + 1;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Grow
+//
+// The 'flex-grow' property sets the flex grow factor. Negative numbers
+// are invalid.
+//
+// Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#flex-grow-property
+
+@mixin flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Shrink
+//
+// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
+// are invalid.
+//
+// Default: 1
+//
+// http://w3.org/tr/css3-flexbox/#flex-shrink-property
+
+@mixin flex-shrink($int: 1) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex-negative: $int;
+  flex-shrink: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Basis
+//
+// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
+//
+// Values: Like "width"
+// Default: auto
+//
+// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
+
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  -moz-flex-basis: $value;
+  -ms-flex-preferred-size: $value;
+  flex-basis: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox "Flex" (shorthand)
+//
+// The 'flex' property specifies the components of a flexible length: the
+// flex grow factor and flex shrink factor, and the flex basis. When an
+// element is a flex item, 'flex' is consulted instead of the main size
+// property to determine the main size of the element. If an element is
+// not a flex item, 'flex' has no effect.
+//
+// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
+// Default: See individual properties (1 1 0).
+//
+// http://w3.org/tr/css3-flexbox/#flex-property
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so let's grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == "list" {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box-flex: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -moz-box-flex: $fg-boxflex;
+  -moz-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Justify Content
+//
+// The 'justify-content' property aligns flex items along the main axis
+// of the current line of the flex container. This is done after any flexible
+// lengths and any auto margins have been resolved. Typically it helps distribute
+// extra free space leftover when either all the flex items on a line are
+// inflexible, or are flexible but have reached their maximum size. It also
+// exerts some control over the alignment of items when they overflow the line.
+//
+// Note: 'space-*' values not supported in older syntaxes.
+//
+// Values: flex-start | flex-end | center | space-between | space-around
+// Default: flex-start
+//
+// http://w3.org/tr/css3-flexbox/#justify-content-property
+
+@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+// Shorter version:
+@mixin flex-just($args...) { @include justify-content($args...); }
+
+//----------------------------------------------------------------------
+
+// Flexbox Align Items
+//
+// Flex items can be aligned in the cross axis of the current line of the
+// flex container, similar to 'justify-content' but in the perpendicular
+// direction. 'align-items' sets the default alignment for all of the flex
+// container's items, including anonymous flex items. 'align-self' allows
+// this default alignment to be overridden for individual flex items. (For
+// anonymous flex items, 'align-self' always matches the value of 'align-items'
+// on their associated flex container.)
+//
+// Values: flex-start | flex-end | center | baseline | stretch
+// Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-items-property
+
+@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+//----------------------------------
+
+// Flexbox Align Self
+//
+// Values: auto | flex-start | flex-end | center | baseline | stretch
+// Default: auto
+
+@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Align Content
+//
+// The 'align-content' property aligns a flex container's lines within the
+// flex container when there is extra space in the cross-axis, similar to
+// how 'justify-content' aligns individual items within the main-axis. Note,
+// this property has no effect when the flexbox has only a single line.
+//
+// Values: flex-start | flex-end | center | space-between | space-around | stretch
+// Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-content-property
+
+@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
diff --git a/_sass/common/classes/_grid.scss b/_sass/common/classes/_grid.scss
new file mode 100644
index 0000000..655c254
--- /dev/null
+++ b/_sass/common/classes/_grid.scss
@@ -0,0 +1,80 @@
+$grid-columns: 12;
+
+.grid-container {
+  @include overflow(hidden);
+}
+.cell {
+  min-width: 0;
+}
+
+@mixin make-cell($columns) {
+  @if $columns == "auto" {
+    @include flex(1 1 0);
+    width: auto;
+  } @else if $columns == "shrink" {
+    @include flex(0 0 auto);
+    width: auto;
+  } @else if $columns == "stretch" {
+    @include flex(1);
+  } @else {
+    @include flex(none);
+    width: percentage($columns / $grid-columns);
+  }
+}
+
+@mixin make-grid-cell($columns, $breakpoint) {
+  @include media-breakpoint-up($breakpoint) {
+    .cell--#{breakpoint-infix($breakpoint)}#{$columns} {
+      @include make-cell($columns);
+    }
+  }
+}
+
+.grid {
+  @include flexbox();
+  @include flex-wrap(wrap);
+  & > {
+    @each $breakpoint in map-keys($responsive) {
+      @for $i from 1 through $grid-columns {
+        @include make-grid-cell($i, $breakpoint);
+      }
+      @include make-grid-cell("auto", $breakpoint);
+      @include make-grid-cell("shrink", $breakpoint);
+      @include make-grid-cell("stretch", $breakpoint);
+    }
+  }
+}
+
+.grid--reverse {
+  flex-direction: row-reverse;
+}
+
+@mixin make-grid() {
+  $types: ("p");
+  $directions: ("x", "y", "");
+  $spacers: (0, 1, 2, 3, 4, 5);
+
+  @each $type in $types {
+    @each $direction in $directions {
+      @each $spacer in $spacers {
+        @if $direction == "" {
+          .grid--#{$type}-#{$spacer} {
+            @include make-spacing("m", "", $spacer, true);
+            .cell {
+              @include make-spacing($type, "", $spacer);
+            }
+          }
+        } @else {
+          .grid--#{$type}#{$direction}-#{$spacer} {
+            @include make-spacing("m", $direction, $spacer, true);
+            .cell {
+              @include make-spacing($type, $direction, $spacer);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include make-grid();
diff --git a/_sass/common/classes/_horizontal-rules.scss b/_sass/common/classes/_horizontal-rules.scss
new file mode 100644
index 0000000..74882cf
--- /dev/null
+++ b/_sass/common/classes/_horizontal-rules.scss
@@ -0,0 +1,14 @@
+@mixin horizontal-rules() {
+  &::before {
+    display: block;
+    font-size: map-get($base, font-size-h2);
+    color: $text-color-l;
+    text-align: center;
+    letter-spacing: map-get($spacers, 4);
+    content: "...";
+  }
+}
+
+.horizontal-rules {
+  @include horizontal-rules();
+}
diff --git a/_sass/common/classes/_link.scss b/_sass/common/classes/_link.scss
new file mode 100644
index 0000000..5e0cb48
--- /dev/null
+++ b/_sass/common/classes/_link.scss
@@ -0,0 +1,12 @@
+@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default, $ignore-path: false) {
+  @include plain() {
+    text-decoration: none;
+  }
+  @include hover() {
+    text-decoration: underline;
+  }
+  @include active() {
+    text-decoration: none;
+  }
+  @include clickable($clr, null, $hover-clr, null, $active-clr, null, $focus-clr, null, $theme, $ignore-path);
+}
diff --git a/_sass/common/classes/_media.scss b/_sass/common/classes/_media.scss
new file mode 100644
index 0000000..e17544e
--- /dev/null
+++ b/_sass/common/classes/_media.scss
@@ -0,0 +1,17 @@
+@mixin media-breakpoint-down($name, $breakpoints: default) {
+  @if $breakpoints == default {
+    $breakpoints: $responsive;
+  }
+  @media (max-width: map-get($breakpoints, $name) - 1) {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: default) {
+  @if $breakpoints == default {
+    $breakpoints: $responsive;
+  }
+  @media (min-width: map-get($breakpoints, $name)) {
+    @content;
+  }
+}
diff --git a/_sass/common/classes/_overflow.scss b/_sass/common/classes/_overflow.scss
new file mode 100644
index 0000000..6529bf0
--- /dev/null
+++ b/_sass/common/classes/_overflow.scss
@@ -0,0 +1,26 @@
+@mixin overflow($overflow: auto, $direction: default) {
+  @if $direction == default {
+    overflow: $overflow;
+  } @else if $direction == "x" {
+    @if $overflow == auto {
+      overflow: hidden;
+    }
+    overflow-x: $overflow;
+  } @else if $direction == "y" {
+    @if $overflow == auto {
+      overflow: hidden;
+    }
+    overflow-y: $overflow;
+  }
+  @if $overflow == auto {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.of-auto {
+  @include overflow(auto);
+}
+
+.of-hidden {
+  @include overflow(hidden);
+}
diff --git a/_sass/common/classes/_pseudo.scss b/_sass/common/classes/_pseudo.scss
new file mode 100644
index 0000000..53310a9
--- /dev/null
+++ b/_sass/common/classes/_pseudo.scss
@@ -0,0 +1,33 @@
+@mixin plain() {
+  &,
+  &:link,
+  &:visited {
+    @content;
+  }
+}
+
+@mixin hover() {
+  .root[data-is-touch="false"] &:hover {
+    @content;
+  }
+}
+
+@mixin active() {
+  .root[data-is-touch] &.active,
+  .root[data-is-touch] &:active {
+    @content;
+  }
+}
+
+@mixin focus() {
+  .root[data-is-touch] &.focus {
+    @content;
+  }
+}
+
+@mixin disabled() {
+  &.disabled,
+  &:disabled {
+    @content;
+  }
+}
diff --git a/_sass/common/classes/_shadow.scss b/_sass/common/classes/_shadow.scss
new file mode 100644
index 0000000..e28b9ca
--- /dev/null
+++ b/_sass/common/classes/_shadow.scss
@@ -0,0 +1,22 @@
+@mixin box-shadow($level: default, $color: default) {
+  @if $color == default {
+    $color: #000;
+  }
+  @if $level == 0 {
+    box-shadow: none;
+  }
+  @if $level == 1 or $level == default {
+    box-shadow: 0 4px 8px rgba($color, .23), 0 1px 3px rgba($color, .08), 0 6px 12px rgba($color, .02);
+  }
+  @if $level == 2 {
+    box-shadow: 0 8px 16px rgba($color, .23), 0 2px 6px rgba($color, .08), 0 12px 24px rgba($color, .02);
+  }
+}
+
+.box-shadow-1 {
+  @include box-shadow();
+}
+
+.box-shadow-2 {
+  @include box-shadow(2);
+}
diff --git a/_sass/common/classes/_spacing.scss b/_sass/common/classes/_spacing.scss
new file mode 100644
index 0000000..c07fdce
--- /dev/null
+++ b/_sass/common/classes/_spacing.scss
@@ -0,0 +1,81 @@
+@mixin make-spacing($property, $side, $spacer, $negative: false) {
+
+  $css_property: null;
+  $css_sides: null;
+
+  @if ($property == "m") {
+    $css_property: "margin";
+  } @else if ($property == "p") {
+    $css_property: "padding";
+  }
+
+  @if ($side == "t") {
+    $css_sides: ("top");
+  }
+  @else if ($side == "b") {
+    $css_sides: ("bottom");
+  }
+  @else if ($side == "l") {
+    $css_sides: ("left");
+  }
+  @else if ($side == "r") {
+    $css_sides: ("right");
+  }
+  @else if ($side == "x") {
+    $css_sides: ("left", "right");
+  }
+  @else if ($side == "y") {
+    $css_sides: ("top", "bottom");
+  }
+  @else if ($side == "") {
+    $css_sides: ("");
+  }
+
+  @each $side in $css_sides {
+    @if ($spacer == "auto") {
+      @if ($side == "") {
+        #{$css_property}: auto;
+      } @else {
+        #{$css_property}-#{$side}: auto;
+      }
+    } @else {
+      @if ($side == "") {
+        @if ($negative == true) {
+          #{$css_property}: - map-get($spacers, $spacer);
+        } @else {
+          #{$css_property}: map-get($spacers, $spacer);
+        }
+      } @else {
+        @if ($negative == true) {
+          #{$css_property}-#{$side}: - map-get($spacers, $spacer);
+        } @else {
+          #{$css_property}-#{$side}: map-get($spacers, $spacer);
+        }
+      }
+    }
+  }
+}
+
+@mixin make-spacings() {
+  $propertys: ("m", "p");
+  $sides: ("t", "b", "l", "r", "x", "y", "");
+  $spacers: (0, 1, 2, 3, 4, 5);
+
+  @each $property in $propertys {
+    @each $side in $sides {
+      @each $spacer in $spacers {
+        .#{$property}#{$side}-#{$spacer} {
+          @include make-spacing($property, $side, $spacer);
+        }
+      }
+    }
+  }
+
+  @each $side in $sides {
+    .m#{$side}-auto {
+      @include make-spacing("m", $side, "auto");
+    }
+  }
+}
+
+@include make-spacings();
diff --git a/_sass/common/classes/_split-line.scss b/_sass/common/classes/_split-line.scss
new file mode 100644
index 0000000..4434c6f
--- /dev/null
+++ b/_sass/common/classes/_split-line.scss
@@ -0,0 +1,24 @@
+@mixin split-line($direction: default, $width: default, $color: default) {
+  @if $direction == default {
+    $direction: top;
+  }
+  @if $color == default {
+    $color: $border-color-l;
+  }
+  @if $width == default {
+    $width: 1px;
+  }
+  border: 0 solid $color;
+  @if $direction == top {
+    border-top-width: $width;
+  }
+  @if $direction == right {
+    border-right-width: $width;
+  }
+  @if $direction == bottom {
+    border-bottom-width: $width;
+  }
+  @if $direction == left {
+    border-left-width: $width;
+  }
+}
diff --git a/_sass/common/classes/_text.scss b/_sass/common/classes/_text.scss
new file mode 100644
index 0000000..ac36726
--- /dev/null
+++ b/_sass/common/classes/_text.scss
@@ -0,0 +1,37 @@
+@mixin text-light {
+  color: $text-color-theme-light;
+  h1, h2, h3 {
+    color: $text-color-theme-light-d;
+  }
+  h4, h5 {
+    color: $text-color-theme-light;
+  }
+  h6 {
+    color: $text-color-theme-light-l;
+  }
+  a:not(.button) {
+    @include link-colors($text-color-theme-light, $main-color-1);
+  }
+}
+@mixin text-dark {
+  color: $text-color-theme-dark;
+  h1, h2, h3 {
+    color: $text-color-theme-dark-d;
+  }
+  h4, h5 {
+    color: $text-color-theme-dark;
+  }
+  h6 {
+    color: $text-color-theme-dark-l;
+  }
+  a:not(.button) {
+    @include link-colors($text-color-theme-dark, $main-color-1);
+  }
+}
+
+.text--light {
+  @include text-light();
+}
+.text--dark {
+  @include text-dark();
+}
diff --git a/_sass/common/classes/_transform.scss b/_sass/common/classes/_transform.scss
new file mode 100644
index 0000000..a552879
--- /dev/null
+++ b/_sass/common/classes/_transform.scss
@@ -0,0 +1,4 @@
+@mixin transform($value) {
+  -webkit-transform: $value;
+  transform: $value;
+}
diff --git a/_sass/common/classes/_transition.scss b/_sass/common/classes/_transition.scss
new file mode 100644
index 0000000..abbe08b
--- /dev/null
+++ b/_sass/common/classes/_transition.scss
@@ -0,0 +1,4 @@
+@mixin transition($value) {
+  -webkit-transition: $value;
+  transition: $value;
+}
diff --git a/_sass/common/classes/_user-select.scss b/_sass/common/classes/_user-select.scss
new file mode 100644
index 0000000..104cbb5
--- /dev/null
+++ b/_sass/common/classes/_user-select.scss
@@ -0,0 +1,6 @@
+@mixin user-select($value) {
+  -webkit-user-select: $value;
+  -moz-user-select: $value;
+  -ms-user-select: $value;
+  user-select: $value;
+}
diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
new file mode 100644
index 0000000..08ce7a9
--- /dev/null
+++ b/_sass/common/components/_button.scss
@@ -0,0 +1,163 @@
+@mixin button() {
+  display: inline-block;
+  font-weight: map-get($button, font-weight);
+  line-height: 1 !important;
+  text-decoration: none !important;
+  cursor: pointer;
+  outline: none;
+  @include user-select(none);
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  @include disabled() {
+    cursor: not-allowed;
+  }
+}
+
+.button {
+  @include button();
+}
+
+.button--primary {
+  @include clickable($text-color-1, $main-color-1);
+}
+
+.button--secondary {
+  @include clickable($text-color-3, $main-color-3);
+}
+
+.button--success {
+  @include clickable($text-color-function, $green);
+}
+
+.button--info {
+  @include clickable($text-color-function, $blue);
+}
+
+.button--warning {
+  @include clickable($text-color-function, $yellow);
+}
+
+.button--error {
+  @include clickable($text-color-function, $red);
+}
+
+.button--theme-light {
+  @include clickable($text-color-theme-dark, $main-color-theme-light);
+}
+
+.button--theme-dark {
+  @include clickable($text-color-theme-light, $main-color-theme-dark);
+}
+
+.button--outline-primary {
+  color: $main-color-1;
+  border: 1px solid $main-color-1;
+  @include clickable($main-color-1, transparent, $text-color-1, $main-color-1);
+}
+
+.button--outline-secondary {
+  color: $main-color-3;
+  border: 1px solid $main-color-3;
+  @include clickable($main-color-3, transparent, $text-color-3, $main-color-3);
+}
+
+.button--outline-success {
+  color: $green;
+  border: 1px solid $green;
+  @include clickable($green, transparent, $text-color-function, $green);
+}
+
+.button--outline-info {
+  color: $blue;
+  border: 1px solid $blue;
+  @include clickable($blue, transparent, $text-color-function, $blue);
+}
+
+.button--outline-warning {
+  color: $yellow;
+  border: 1px solid $yellow;
+  @include clickable($yellow, transparent, $text-color-function, $yellow);
+}
+
+.button--outline-error {
+  color: $red;
+  border: 1px solid $red;
+  @include clickable($red, transparent, $text-color-function, $red);
+}
+
+.button--outline-theme-light {
+  color: $main-color-theme-light;
+  border: 1px solid $main-color-theme-light;
+  @include clickable($main-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
+}
+
+.button--outline-theme-dark {
+  color: $main-color-theme-dark;
+  border: 1px solid $main-color-theme-dark;
+  @include clickable($main-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
+}
+
+.button--pill {
+  border-radius: map-get($button, pill-radius);
+  @extend .button--md;
+}
+
+.button--rounded {
+  border-radius: map-get($base, border-radius);
+  @extend .button--md;
+}
+
+.button--circle {
+  @include inline-flex();
+  @include justify-content(center);
+  @include align-items(center);
+  border-radius: 50%;
+  @extend .button--md;
+}
+
+.button--md {
+  padding: map-get($button, padding-y) map-get($button, padding-x);
+  font-size: map-get($base, font-size);
+  &.button--circle {
+    width: map-get($button, circle-diameter);
+    height: map-get($button, circle-diameter);
+  }
+}
+
+.button--xs {
+  padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs);
+  font-size: map-get($base, font-size-xs);
+  &.button--circle {
+    width: map-get($button, circle-diameter-xs);
+    height: map-get($button, circle-diameter-xs);
+  }
+}
+
+.button--sm {
+  padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
+  font-size: map-get($base, font-size-sm);
+  &.button--circle {
+    width: map-get($button, circle-diameter-sm);
+    height: map-get($button, circle-diameter-sm);
+  }
+}
+
+.button--lg {
+  padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
+  font-size: map-get($base, font-size-lg);
+  &.button--circle {
+    width: map-get($button, circle-diameter-lg);
+    height: map-get($button, circle-diameter-lg);
+  }
+}
+
+.button--xl {
+  padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl);
+  font-size: map-get($base, font-size-xl);
+  &.button--circle {
+    width: map-get($button, circle-diameter-xl);
+    height: map-get($button, circle-diameter-xl);
+  }
+}
diff --git a/_sass/common/components/_card.scss b/_sass/common/components/_card.scss
new file mode 100644
index 0000000..2431461
--- /dev/null
+++ b/_sass/common/components/_card.scss
@@ -0,0 +1,103 @@
+
+.card {
+  max-width: 18rem;
+  border-radius: map-get($base, border-radius);
+  @include box-shadow();
+  @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+  & > :first-child {
+    border-top-left-radius: map-get($base, border-radius);
+    border-top-right-radius: map-get($base, border-radius);
+  }
+  & > :last-child {
+    border-bottom-right-radius: map-get($base, border-radius);
+    border-bottom-left-radius: map-get($base, border-radius);
+  }
+}
+
+.cell {
+  & > .card {
+    max-width: unset;
+  }
+}
+
+.card__content {
+  padding: map-get($spacers, 2) map-get($spacers, 3);
+}
+
+.card__header, .card__header > a {
+  @include link-colors($text-color-d, $main-color-1);
+}
+
+.card__image {
+  position: relative;
+  width: 100%;
+  & > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: inherit;
+  }
+  & > .overlay {
+    position: absolute;
+    width: 100%;
+    max-height: 100%;
+    padding: map-get($spacers, 2);
+    a {
+      text-decoration: none !important;
+    }
+  }
+  & > .overlay, & > .overlay--top {
+    top: 0;
+    bottom: auto;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  & > .overlay--bottom {
+    top: auto;
+    bottom: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  & > .overlay--full {
+    top: 0;
+    bottom: 0;
+  }
+  & > .overlay, & > .overlay--dark {
+    @extend .text--dark;
+    background-color: rgba(#000, .4);
+  }
+  & > .overlay--light {
+    @extend .text--light;
+    background: rgba(#fff, .4);
+  }
+}
+
+.card--clickable {
+  cursor: pointer;
+  @include hover() {
+    @include box-shadow(2);
+    .card__image {
+      & > img {
+        height: inherit;
+      }
+    }
+  }
+  @include transition(map-get($clickable, transition));
+}
+
+.card--flat {
+  @include box-shadow(0);
+  .card__image {
+    & > img {
+      border-radius: map-get($base, border-radius);
+    }
+  }
+  .card__content {
+    padding-top: 0;
+    padding-left: 0;
+  }
+}
diff --git a/_sass/common/components/_gallery.scss b/_sass/common/components/_gallery.scss
new file mode 100644
index 0000000..689eeae
--- /dev/null
+++ b/_sass/common/components/_gallery.scss
@@ -0,0 +1,21 @@
+.gallery {
+  height: 100%;
+  @include flexbox();
+  @include flex-direction(column);
+}
+
+.gallery__swiper {
+  @include flex(1);
+}
+
+.gallery-item {
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(center);
+  height: 100%;
+  overflow: hidden;
+}
+
+.gallery-item__main {
+  display: block;
+}
diff --git a/_sass/common/components/_hero.scss b/_sass/common/components/_hero.scss
new file mode 100644
index 0000000..81a72cc
--- /dev/null
+++ b/_sass/common/components/_hero.scss
@@ -0,0 +1,70 @@
+.hero {
+  background-position: 50% 50%;
+  @include flexbox();
+  @include flex-direction(column);
+  @include justify-content(center);
+  h1 { font-size: map-get($base, font-size-h1-xl); }
+  h2 { font-size: map-get($base, font-size-h2-xl); }
+  h3 { font-size: map-get($base, font-size-h3-xl); }
+  h4 { font-size: map-get($base, font-size-h4-xl); }
+  h5 { font-size: map-get($base, font-size-h5-xl); }
+  h6 { font-size: map-get($base, font-size-h6-xl); }
+  p  { font-size: map-get($base, font-size-xl); }
+  @include media-breakpoint-down(lg) {
+    h1 { font-size: map-get($base, font-size-h1-lg); }
+    h2 { font-size: map-get($base, font-size-h2-lg); }
+    h3 { font-size: map-get($base, font-size-h3-lg); }
+    h4 { font-size: map-get($base, font-size-h4-lg); }
+    h5 { font-size: map-get($base, font-size-h5-lg); }
+    h6 { font-size: map-get($base, font-size-h6-lg); }
+    p  { font-size: map-get($base, font-size-lg); }
+  }
+  @include media-breakpoint-down(md) {
+    h1 { font-size: map-get($base, font-size-h1-sm); }
+    h2 { font-size: map-get($base, font-size-h2-sm); }
+    h3 { font-size: map-get($base, font-size-h3-sm); }
+    h4 { font-size: map-get($base, font-size-h4-sm); }
+    h5 { font-size: map-get($base, font-size-h5-sm); }
+    h6 { font-size: map-get($base, font-size-h6-sm); }
+    p  { font-size: map-get($base, font-size); }
+  }
+  background-size: cover;
+
+}
+
+.hero--center {
+  text-align: center;
+  .menu {
+    @extend .menu--center;
+  }
+}
+
+.hero--light {
+  @extend .text--light;
+}
+
+.hero--dark {
+  @extend .text--dark;
+}
+
+.hero__content {
+  margin: map-get($spacers, 5);
+  @include media-breakpoint-down(lg) {
+    margin: map-get($spacers, 5) map-get($spacers, 4);
+  }
+  @include media-breakpoint-down(md) {
+    margin: map-get($spacers, 4) map-get($spacers, 3);
+  }
+}
+
+.heros {
+  & > .hero {
+    margin: map-get($spacers, 5);
+    @include media-breakpoint-down(lg) {
+      margin: map-get($spacers, 3);
+    }
+    @include media-breakpoint-down(md) {
+      margin: map-get($spacers, 2) 0;
+    }
+  }
+}
diff --git a/_sass/common/components/_image.scss b/_sass/common/components/_image.scss
new file mode 100644
index 0000000..9d1a220
--- /dev/null
+++ b/_sass/common/components/_image.scss
@@ -0,0 +1,19 @@
+.image {
+  max-width: 100%;
+  @extend .image--md;
+}
+.image--md {
+  width: map-get($image, width);
+}
+.image--xl {
+  width: map-get($image, width-xl);
+}
+.image--lg {
+  width: map-get($image, width-lg);
+}
+.image--sm {
+  width: map-get($image, width-sm);
+}
+.image--xs {
+  width: map-get($image, width-xs);
+}
diff --git a/_sass/common/components/_item.scss b/_sass/common/components/_item.scss
new file mode 100644
index 0000000..a1a9fd0
--- /dev/null
+++ b/_sass/common/components/_item.scss
@@ -0,0 +1,100 @@
+.item {
+  @include flexbox();
+  @include media-breakpoint-down(md) {
+    @include flex-direction(column);
+  }
+}
+
+.item__image {
+  margin-right: map-get($spacers, 3);
+  & + .item__content {
+    & > :first-child {
+      margin-top: 0;
+      & > :first-child {
+        margin-top: 0;
+      }
+    }
+  }
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+}
+
+.item__content {
+  @include flex(1);
+  min-width: 0;
+}
+
+a > .item__header, a.item__header, .item__header > a {
+  @include link-colors($text-color-d, $main-color-1);
+}
+
+.item__meta {
+  color: $text-color-l;
+}
+
+.item__description {
+  &, .article__content {
+    font-size: map-get($base, font-size-sm);
+    line-height: map-get($base, line-height);
+    @include block-elements() {
+      margin-top: map-get($spacers, 2);
+      margin-bottom: map-get($spacers, 2);
+    }
+    @include heading-elements() {
+      margin-top: map-get($spacers, 3);
+    }
+    h1, h2, h3 {
+      color: $text-color;
+    }
+    h1, h2 {
+      padding: 0;
+      border: none;
+    }
+    h1 {
+      font-size: map-get($base, font-size-h1-xs);
+    }
+    h2 {
+      font-size: map-get($base, font-size-h2-xs);
+    }
+    h3 {
+      font-size: map-get($base, font-size-h3-xs);
+    }
+    h4 {
+      font-size: map-get($base, font-size-h4-xs);
+    }
+    h5 {
+      font-size: map-get($base, font-size-h5-xs);
+    }
+    h6 {
+      font-size: map-get($base, font-size-h6-xs);
+    }
+    img {
+      max-height: 32rem;
+      @include media-breakpoint-down(md) {
+        max-height: 14rem;
+      }
+    }
+  }
+}
+
+.items {
+  & > .item {
+    &:not(:last-child) {
+      margin-bottom: map-get($spacers, 2);
+    }
+  }
+}
+
+.items--divided {
+  & > .item {
+    &:not(:first-child) {
+      padding-top: map-get($spacers, 4);
+    }
+    &:not(:last-child) {
+      padding-bottom: map-get($spacers, 4);
+      @include split-line(bottom);
+    }
+    list-style-type: none;
+  }
+}
diff --git a/_sass/common/components/_menu.scss b/_sass/common/components/_menu.scss
new file mode 100644
index 0000000..222676a
--- /dev/null
+++ b/_sass/common/components/_menu.scss
@@ -0,0 +1,67 @@
+@mixin menu-direction($direction: default) {
+  @if $direction == default {
+    $direction: "horizontal";
+  }
+  @if $direction == "vertical" {
+    @include flex-direction(column);
+  } @else {
+    @include flex-direction(row);
+  }
+}
+
+@mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) {
+  @if $horizontal-spacer == default {
+    $horizontal-spacer: map-get($menu, horizontal-spacer);
+  }
+  @if $horizontal-item-vertical-spacer == default {
+    $horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer);
+  }
+  @if $wrap == default {
+    $wrap: wrap;
+  }
+  @include flexbox();
+  @include flex-wrap($wrap);
+  margin-top: 0;
+  margin-bottom: 0;
+  & > li {
+    @if $horizontal-item-vertical-spacer {
+      margin-top: map-get($spacers, $horizontal-item-vertical-spacer);
+      margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer);
+    }
+    margin-right: map-get($spacers, $horizontal-spacer);
+    list-style-type: none;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.menu {
+  @include menu();
+  @include menu-direction();
+  @include align-items(center);
+}
+
+.menu--vertical {
+  @include menu-direction("vertical");
+  @include align-items(normal);
+  & > li {
+    margin-right: 0;
+  }
+}
+
+.menu--inline {
+  @include inline-flex();
+}
+
+.menu--center {
+  @include justify-content(center);
+}
+
+.menu--nowrap {
+  @include flex-wrap(nowrap);
+}
+
+.menu--grow {
+  @include flex-grow(1);
+}
diff --git a/_sass/common/components/_modal.scss b/_sass/common/components/_modal.scss
new file mode 100644
index 0000000..cd71628
--- /dev/null
+++ b/_sass/common/components/_modal.scss
@@ -0,0 +1,39 @@
+@mixin modal($z-index: default, $color: default, $background-color: default) {
+  @if $z-index == default {
+    $z-index: map-get($z-indexes, modal);
+  }
+  @if $color == default {
+    $color: $text-color-theme-dark;
+  }
+  @if $background-color == default {
+    $background-color: $mask-color;
+  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index;
+  width: 100%;
+  height: 100%;
+  color: $color;
+  touch-action: none;
+  background-color: $background-color;
+  opacity: 0;
+  @include transform(translate(100%, 0));
+  @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function),
+  transform 0s map-get($animation, duration) map-get($animation, timing-function)});
+}
+@mixin modal--show() {
+  opacity: 1;
+  @include transform(translate(0, 0));
+  @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)});
+}
+
+.modal {
+  @include modal();
+}
+.modal--show {
+  @include modal--show();
+}
+.modal--overflow {
+  @include overflow(auto);
+}
diff --git a/_sass/common/components/_swiper.scss b/_sass/common/components/_swiper.scss
new file mode 100644
index 0000000..3493a62
--- /dev/null
+++ b/_sass/common/components/_swiper.scss
@@ -0,0 +1,48 @@
+.swiper {
+  position: relative;
+  @include overflow(hidden);
+}
+
+.swiper__wrapper, .swiper__slide {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper__wrapper {
+  @include flexbox();
+}
+
+.swiper__wrapper--animation {
+  @include transition(transform map-get($animation, duration) map-get($animation, timing-function));
+}
+
+.swiper__slide {
+  @include flex-shrink(0);
+  & > img {
+    max-width: 100%;
+  }
+}
+
+.swiper__button {
+  position: absolute;
+  top: 50%;
+  @extend .button, .button--circle;
+  @include transform(translate(0, -50%));
+  @include clickable($text-color-d, rgba($main-color-3, .4));
+}
+
+.swiper--light .swiper__button {
+  @include clickable($text-color-theme-light, rgba($main-color-theme-dark, .4));
+}
+
+.swiper--dark .swiper__button {
+  @include clickable($text-color-theme-dark, rgba($main-color-theme-light, .4));
+}
+
+.swiper__button--prev {
+  left: 10px;
+}
+
+.swiper__button--next {
+  right: 10px;
+}
diff --git a/_sass/common/components/_toc.scss b/_sass/common/components/_toc.scss
new file mode 100644
index 0000000..9fd1421
--- /dev/null
+++ b/_sass/common/components/_toc.scss
@@ -0,0 +1,124 @@
+ul.toc {
+  display: block;
+  margin: 0;
+  color: $text-color;
+  list-style-type: none;
+  & > li {
+    margin: map-get($spacers, 1) / 2 0;
+    a {
+      display: inline-block;
+      margin: map-get($spacers, 1) / 4 0;
+      text-decoration: none !important;
+    }
+  }
+  .toc-h1,
+  .toc-h2,
+  .toc-h3,
+  .toc-h4,
+  .toc-h5,
+  .toc-h6 {
+    a {
+      @include link-colors($text-color, $main-color-1);
+    }
+    &.active {
+      a {
+        @include link-colors($main-color-1);
+      }
+    }
+  }
+
+  .toc-h2,
+  .toc-h3,
+  .toc-h4,
+  .toc-h5,
+  .toc-h6 {
+    &, a {
+      font-size: map-get($base, font-size-xs);
+      font-weight: map-get($base, font-weight);
+      line-height: map-get($base, line-height-xs);
+    }
+  }
+  .toc-h1 {
+    @include split-line(bottom);
+    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
+    margin-bottom: map-get($spacers, 2);
+    color: $text-color-d;
+    &, a {
+      font-size: map-get($base, font-size-sm);
+      font-weight: map-get($base, font-weight-bold);
+      line-height: map-get($base, line-height-sm);
+    }
+    a {
+      @include link-colors($text-color-d, $main-color-1);
+    }
+  }
+  .toc-h2 {
+    &, a {
+      font-weight: map-get($base, font-weight-bold);
+    }
+  }
+  .toc-h3 {
+    margin-left: map-get($spacers, 3);
+  }
+  .toc-h4 {
+    margin-left: map-get($spacers, 3) * 2;
+  }
+  .toc-h5,
+  .toc-h6 {
+    margin-left: map-get($spacers, 3) * 3;
+  }
+  .toc-h6 {
+    color: $text-color-l;
+    a {
+      @include link-colors($text-color-l, $main-color-1);
+    }
+  }
+}
+
+ul.toc--ellipsis {
+  & > li {
+    @include overflow(hidden);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+ul.toc--navigator {
+  & > li {
+    a {
+      padding-left: map-get($spacers, 2);
+      margin: map-get($spacers, 1) 0;
+    }
+    &.active {
+      a {
+        margin-left: -4px;
+        @include split-line(left, 4px, $main-color-1);
+      }
+    }
+  }
+  .toc-h2,
+  .toc-h3,
+  .toc-h4 {
+    color: $text-color-l;
+    a {
+      @include link-colors($text-color-l);
+    }
+  }
+  .toc-h1 {
+    &, a {
+      font-size: map-get($base, font-size);
+      line-height: map-get($base, line-height);
+    }
+    color: $text-color;
+    a {
+      @include link-colors($text-color-d);
+    }
+  }
+  .toc-h2 {
+    &, a {
+      font-size: map-get($base, font-size-sm);
+      font-weight: map-get($base, font-weight-bold);
+      line-height: map-get($base, line-height-sm);
+    }
+  }
+}
diff --git a/_sass/components/_article-content.scss b/_sass/components/_article-content.scss
new file mode 100644
index 0000000..6dbda0d
--- /dev/null
+++ b/_sass/components/_article-content.scss
@@ -0,0 +1,221 @@
+.article__content {
+  line-height: map-get($base, line-height-lg);
+  word-wrap: break-word;
+  @media print {
+    line-height: map-get($base, line-height);
+  }
+  @include block-elements() {
+    margin: map-get($spacers, 3) 0;
+    @media print {
+      margin: map-get($spacers, 2) 0;
+    }
+  }
+  @include heading-elements() {
+    position: relative;
+    margin-top: map-get($spacers, 4);
+    @media print {
+      margin-top: map-get($spacers, 3);
+    }
+    & > .anchor {
+      @include link-colors($border-color, $main-color-1);
+      margin-left: map-get($spacers, 1);
+      text-decoration: none;
+      visibility: hidden;
+      opacity: 0;
+      & > i {
+        font-size: map-get($base, font-size-sm);
+      }
+    }
+    @include hover() {
+      & > .anchor {
+        cursor: pointer;
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+  h1,
+  h2 {
+    @include split-line(bottom);
+  }
+  hr {
+    border: none;
+    @include horizontal-rules();
+  }
+  blockquote {
+    padding-left: map-get($spacers, 3);
+    font-size: map-get($base, font-size-sm);
+    color: $text-color-l;
+    @include split-line(left, 4px, $border-color);
+    p {
+      margin: map-get($spacers, 2) 0;
+    }
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
+  img:not(.emoji) {
+    max-width: 100%;
+    vertical-align: middle;
+  }
+  .emoji {
+    display: inline-block;
+    width: map-get($base, line-height-lg) * .7rem;
+    height: map-get($base, line-height-lg) * .7rem;
+    vertical-align: text-bottom;
+  }
+  .footnotes {
+    @include split-line();
+    margin-top: map-get($spacers, 5);
+    @media print {
+      margin-top: map-get($spacers, 2) * 2;
+    }
+  }
+  code {
+    padding: map-get($spacers, 1) map-get($spacers, 2);
+    background-color: $text-background-color;
+    border-radius: map-get($base, border-radius);
+    span {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  pre {
+    @include overflow(auto);
+    & > code {
+      padding: 0;
+      word-wrap: normal;
+      background-color: transparent;
+      &.language-mermaid, &.language-chart {
+        svg {
+          width: 100%;
+        }
+        display: none;
+        &[data-processed] {
+          display: block;
+        }
+      }
+    }
+  }
+  .highlighter-rouge > .highlight, figure.highlight {
+    & > pre {
+      padding: map-get($spacers, 3) 0 map-get($spacers, 3) map-get($spacers, 3);
+      margin: 0;
+      background-color: $text-background-color;
+      border-radius: map-get($base, border-radius);
+      & > code {
+        display: block;
+      }
+    }
+  }
+  figure.highlight {
+    &::before {
+      display: block;
+      padding: map-get($spacers, 2) map-get($spacers, 3) map-get($spacers, 2) 0;
+      font-weight: map-get($base, font-weight-bold);
+      color: $decorate-color;
+      text-align: right;
+      text-transform: uppercase;
+      content: attr(data-lang);
+      background-color: $text-background-color;
+      border-top-left-radius: map-get($base, border-radius);
+      border-top-right-radius: map-get($base, border-radius);
+    }
+    & > pre {
+      padding-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      & > code {
+        & > .rouge-table {
+          width: auto;
+          margin: 0 0 #{- map-get($spacers, 3)} #{- map-get($spacers, 3)};
+          tbody, tr, td {
+            padding-top: 0;
+            padding-bottom: 0;
+            border: none;
+          }
+          & > tbody {
+            @include flexbox;
+            & > tr {
+              width: 100%;
+              @include flexbox;
+              & > .code {
+                padding: 0 0 map-get($spacers, 3) map-get($spacers, 2);
+                @include overflow(auto);
+              }
+            }
+          }
+          tbody td {
+            &.gl {
+              padding-left: map-get($spacers, 3);
+            }
+            & > pre {
+              display: block;
+              margin: 0;
+              border-radius: 0;
+              @include overflow(auto);
+              &.lineno {
+                color: $text-color-l;
+                @include user-select(none);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  ul, ol {
+    margin-left: map-get($spacers, 4);
+    ul, ol {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    li {
+      p {
+        margin: map-get($spacers, 2);
+        @media print {
+          margin: map-get($spacers, 1);
+        }
+      }
+    }
+  }
+  dl {
+    dt, dd {
+      p {
+        margin: map-get($spacers, 2);
+        @media print {
+          margin: map-get($spacers, 1);
+        }
+      }
+    }
+    dt {
+      font-weight: map-get($base, font-weight-bold);
+    }
+    dd {
+      margin-left: 2rem;
+    }
+  }
+  ul.task-list {
+    margin-left: 0;
+    list-style-type: none;
+    ul, ol {
+      margin-left: map-get($spacers, 4);
+    }
+  }
+  table {
+    display: block;
+    width: 100%;
+    border-collapse: collapse;
+    @include overflow(auto);
+    thead, tfoot {
+      background-color: $text-background-color;
+    }
+    th, td {
+      padding: map-get($spacers, 2);
+      border: 1px solid $border-color-l;
+    }
+    th {
+      font-weight: map-get($base, font-weight-bold);
+    }
+  }
+}
diff --git a/_sass/components/_article-footer.scss b/_sass/components/_article-footer.scss
new file mode 100644
index 0000000..575bc8d
--- /dev/null
+++ b/_sass/components/_article-footer.scss
@@ -0,0 +1,17 @@
+.article__footer {
+  margin: map-get($spacers, 4) 0;
+  font-size: map-get($base, font-size-sm);
+}
+
+.article__license, .article__subscribe {
+  a {
+    @include link-colors($text-color, $main-color-1);
+  }
+}
+
+.article__license {
+  color: $text-color-l;
+  img {
+    height: map-get($base, font-size) * 1.6;
+  }
+}
diff --git a/_sass/components/_article-header.scss b/_sass/components/_article-header.scss
new file mode 100644
index 0000000..002cc8c
--- /dev/null
+++ b/_sass/components/_article-header.scss
@@ -0,0 +1,50 @@
+.article__header {
+  margin-top: map-get($spacers, 5);
+  margin-bottom: map-get($spacers, 4);
+  @include media-breakpoint-down(md) {
+    margin-top: map-get($spacers, 4);
+  }
+  header, h1 {
+    display: inline;
+  }
+  h1 {
+    word-wrap: break-word;
+  }
+  .split-space {
+    @include user-select(none);
+  }
+  .edit-on-github {
+    text-decoration: none !important;
+  }
+}
+
+.article__header--overlay {
+  .overlay {
+    min-height: 36rem;
+    padding-top: map-get($spacers, 5) * 2;
+    padding-bottom: map-get($spacers, 5) * 2;
+    @include media-breakpoint-down(md) {
+      min-height: 29rem;
+      padding-top: map-get($spacers, 5);
+      padding-bottom: map-get($spacers, 5);
+    }
+  }
+  .overlay__excerpt {
+    font-size: map-get($base, font-size-h3-xl);
+    @include media-breakpoint-down(lg) {
+      font-size: map-get($base, font-size-h3-lg);
+    }
+    @include media-breakpoint-down(md) {
+      font-size: map-get($base, font-size-h3-sm);
+    }
+    font-weight: map-get($base, font-weight-bold);
+  }
+
+  .article__header {
+    margin-top: 0;
+  }
+}
+
+.article__header--cover {
+  width: 100%;
+}
diff --git a/_sass/components/_article-info.scss b/_sass/components/_article-info.scss
new file mode 100644
index 0000000..bebf9b5
--- /dev/null
+++ b/_sass/components/_article-info.scss
@@ -0,0 +1,25 @@
+.article__info {
+  font-size: map-get($base, font-size-sm);
+  color: $text-color-l;
+  .left-col {
+    float: left;
+    @include media-breakpoint-down(md) {
+      float: none;
+    }
+  }
+  .right-col {
+    float: right;
+    margin-left: map-get($button, padding-x-sm);
+    @include media-breakpoint-down(md) {
+      float: none;
+    }
+    & > li {
+      &:not(:last-child) {
+        @include split-line(right, default, $text-color-l);
+        padding-right: map-get($spacers, 2);
+        margin-right: map-get($spacers, 2);
+        line-height: map-get($base, line-height-xs);
+      }
+    }
+  }
+}
diff --git a/_sass/components/_article-list.scss b/_sass/components/_article-list.scss
new file mode 100644
index 0000000..c59550d
--- /dev/null
+++ b/_sass/components/_article-list.scss
@@ -0,0 +1,18 @@
+.article-list {
+  .item__meta {
+    padding: 0 map-get($spacers, 3) 0 0;
+    font-family: map-get($base, font-family-code);
+    font-size: map-get($base, font-size-sm);
+    white-space: nowrap;
+  }
+  &.grid--sm {
+    .card__header {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+.article-list__group-header {
+  margin-top: map-get($spacers, 3);
+}
diff --git a/_sass/components/_author-links.scss b/_sass/components/_author-links.scss
new file mode 100644
index 0000000..efe09c2
--- /dev/null
+++ b/_sass/components/_author-links.scss
@@ -0,0 +1,43 @@
+.author-links {
+  & > ul {
+    margin: 0;
+    & > li > {
+      .mail-button {
+        @include clickable($text-color-1, $mail-color);
+      }
+      .facebook-button {
+        @include clickable($text-color-1, $facebook-color);
+      }
+      .twitter-button {
+        @include clickable($text-color-1, $twitter-color);
+      }
+      .weibo-button {
+        @include clickable($text-color-1, $weibo-color);
+      }
+      .googlepluse-button {
+        @include clickable($text-color-1, $google-plus-color);
+      }
+      .telegram-button {
+        @include clickable($text-color-1, $telegram-color);
+      }
+      .medium-button {
+        @include clickable($text-color-1, $medium-color);
+      }
+      .zhihu-button {
+        @include clickable($text-color-1, $zhihu-color);
+      }
+      .douban-button {
+        @include clickable($text-color-1, $douban-color);
+      }
+      .linkedin-button {
+        @include clickable($text-color-1, $linkedin-color);
+      }
+      .github-button {
+        @include clickable($text-color-1, $github-color);
+      }
+      .npm-button {
+        @include clickable($text-color-1, $npm-color);
+      }
+    }
+  }
+}
diff --git a/_sass/components/_author-profile.scss b/_sass/components/_author-profile.scss
new file mode 100644
index 0000000..b506715
--- /dev/null
+++ b/_sass/components/_author-profile.scss
@@ -0,0 +1,26 @@
+.author-profile {
+  max-width: 25rem;
+  padding: map-get($spacers, 2) map-get($spacers, 3);
+  margin: map-get($spacers, 4) 0;
+  font-size: map-get($base, font-size-sm);
+  background-color: $text-background-color;
+  @include media-breakpoint-down(md) {
+    text-align: center;
+  }
+}
+.author-profile__avatar {
+  width: 5rem;
+  height: 5rem;
+  margin-top: map-get($spacers, 2);
+  border-radius: 50%;
+}
+.author-profile__name {
+  font-size: map-get($base, font-size-lg);
+  font-weight: map-get($base, font-weight-bold);
+  a {
+    @include link-colors($text-color, $main-color-1);
+  }
+}
+.author-profile__links {
+  @include overflow(auto);
+}
diff --git a/_sass/components/_extensions.scss b/_sass/components/_extensions.scss
new file mode 100644
index 0000000..7c83f75
--- /dev/null
+++ b/_sass/components/_extensions.scss
@@ -0,0 +1,35 @@
+.extensions {
+  margin: map-get($spacers, 3) 0;
+  @extend .d-print-none;
+}
+
+.extensions--video, .extensions--slide, .extensions--demo {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  & > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.extensions--video {
+  padding-top: percentage(315 / 560);
+}
+
+.extensions--slide {
+  padding-top: percentage(487 / 599);
+}
+
+.extensions--demo {
+  min-height: 340px;
+  padding-top: percentage(315 / 560);
+}
+
+.extensions--audio {
+  display: block;
+  max-width: 100% !important;
+}
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
new file mode 100644
index 0000000..63ed8fe
--- /dev/null
+++ b/_sass/components/_footer.scss
@@ -0,0 +1,33 @@
+/**
+ * Site Info
+ */
+
+.footer {
+  @include flexbox();
+  @include align-items(center);
+  color: $footer-text-color;
+  background: $footer-background;
+  a {
+    @include link-colors ($footer-text-color, $main-color-1);
+  }
+  .site-info {
+    font-size: map-get($base, font-size-xs);
+    text-align: center;
+    .menu {
+      line-height: map-get($base, line-height-xs);
+      & > * {
+        &:not(:last-child) {
+          @include split-line(right, default, $footer-text-color);
+          padding-right: map-get($spacers, 1);
+          margin-right: map-get($spacers, 1);
+        }
+      }
+    }
+  }
+}
+.footer__author-links {
+  @include overflow(auto);
+  .author-links {
+    text-align: center;
+  }
+}
diff --git a/_sass/components/_header.scss b/_sass/components/_header.scss
new file mode 100644
index 0000000..44d108d
--- /dev/null
+++ b/_sass/components/_header.scss
@@ -0,0 +1,123 @@
+.header {
+  background: $header-background;
+  a {
+    font-weight: map-get($base, font-weight);
+    text-decoration: none !important;
+    @include link-colors($header-text-color, $main-color-1);
+  }
+  .main {
+    @include flexbox();
+    @include media-breakpoint-down(md) {
+      @include flex-direction(column);
+    }
+  }
+}
+
+.header--dark {
+  @extend .text--dark;
+  background: rgba(#000, .15);
+  .navigation__item--active {
+    &::after {
+      @include split-line(bottom, 4px, $text-color-theme-dark);
+    }
+  }
+}
+
+.header--light {
+  @extend .text--light;
+  background: rgba(#fff, .15);
+  .navigation__item--active {
+    &::after {
+      @include split-line(bottom, 4px, $text-color-theme-light);
+    }
+  }
+}
+
+.header__title {
+  @include menu(3, 0);
+  @include align-items(center);
+  @include flex-wrap(nowrap);
+  @include flex(1);
+  height: map-get($layout, header-height);
+  margin-right: map-get($spacers, 3);
+  white-space: nowrap;
+  @include media-breakpoint-down(md) {
+    height: auto;
+    margin-right: 0;
+  }
+  & > .header__brand {
+    @include flex(1);
+    @include media-breakpoint-down(md) {
+      height: map-get($layout, header-height-sm);
+    }
+  }
+  & > .search-button {
+    display: none;
+    margin-left: map-get($spacers, 2);
+    @include media-breakpoint-down(md) {
+      @include flexbox();
+    }
+  }
+}
+
+.header__brand {
+  @include flexbox();
+  @include align-items(center);
+  & > svg {
+    width: map-get($base, font-size-h4) * 1.6;
+    height: map-get($base, font-size-h4) * 1.6;
+    margin-right: map-get($spacers, 3);
+    vertical-align: middle;
+    @include media-breakpoint-down(md) {
+      width: map-get($base, font-size-h4) * 1.2;
+      height: map-get($base, font-size-h4) * 1.2;
+    }
+  }
+  & > a {
+    display: inline-block;
+    font-size: map-get($base, font-size-h4);
+    @include media-breakpoint-down(md) {
+      font-size: map-get($base, font-size-h4-small);
+    }
+  }
+}
+
+.navigation {
+  @include overflow(auto, "x");
+  & > ul {
+    height: map-get($layout, header-height);
+    padding-bottom: 0;
+    margin: 0;
+    @include media-breakpoint-down(md) {
+      padding-bottom: 4px;
+      margin: -4px 0 0 0;
+    }
+    @include menu(3, 2, nowrap);
+    @include align-items(center);
+    @include media-breakpoint-down(md) {
+      height: auto;
+    }
+    .search-button {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+}
+
+.navigation__item {
+  &::after {
+    display: block;
+    margin-bottom: -4px;
+    content: "";
+    @include split-line(bottom, 4px, transparent);
+  }
+}
+.navigation__item--active {
+  a {
+    @include link-colors($main-color-1, $main-color-1);
+  }
+  &::after {
+    @include split-line(bottom, 4px, $main-color-1);
+  }
+}
diff --git a/_sass/components/_lightbox.scss b/_sass/components/_lightbox.scss
new file mode 100644
index 0000000..4dad32b
--- /dev/null
+++ b/_sass/components/_lightbox.scss
@@ -0,0 +1,7 @@
+.popup-image {
+  cursor: pointer;
+  @include hover() {
+    @include box-shadow(2);
+  }
+  @include transition(map-get($clickable, transition));
+}
diff --git a/_sass/components/_main.scss b/_sass/components/_main.scss
new file mode 100644
index 0000000..265c727
--- /dev/null
+++ b/_sass/components/_main.scss
@@ -0,0 +1,28 @@
+.main {
+  width: 100%;
+  max-width: map-get($layout, content-max-width);
+  padding: 0 map-get($spacers, 5);
+  margin: 0 auto;
+  @include media-breakpoint-down(lg) {
+    padding: 0 map-get($spacers, 4);
+  }
+  @include media-breakpoint-down(md) {
+    padding: 0 map-get($spacers, 3);
+  }
+}
+
+.has-aside {
+  .main {
+    max-width: map-get($layout, content-max-width) + map-get($layout, aside-width);
+    @include media-breakpoint-down(lg) {
+      max-width: map-get($layout, content-max-width);
+    }
+  }
+}
+
+.full-width {
+  .main {
+    width: 100%;
+    max-width: 100%;
+  }
+}
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
new file mode 100644
index 0000000..d28dabc
--- /dev/null
+++ b/_sass/components/_search.scss
@@ -0,0 +1,186 @@
+.search {
+  @include overflow(auto);
+
+}
+.search--google-custom-search-engine {
+  .main {
+    padding-top: map-get($spacers, 4);
+    padding-bottom: map-get($spacers, 4);
+    @include media-breakpoint-down(md) {
+      position: absolute;
+      padding: 0;
+    }
+  }
+}
+
+.search__header {
+  margin-top: map-get($spacers, 4);
+  font-size: map-get($base, font-size-h1);
+  font-weight: map-get($base, font-weight-bold);
+  color: $text-color-d;
+  .search--light & {
+    color: $text-color-theme-light-d;
+  }
+  .search--dark & {
+    color: $text-color-theme-dark-d;
+  }
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+}
+
+.search-bar {
+  @include flexbox();
+  margin: map-get($spacers, 3) 0 map-get($spacers, 4) 0;
+}
+
+.search-box {
+  position: relative;
+  width: 100%;
+  max-width: 22rem;
+  @include media-breakpoint-down(md) {
+    width: 100%;
+    max-width: none;
+  }
+  & > input {
+    display: inline-block;
+    width: 100%;
+    height: $button-height-lg;
+    padding: 0 2rem;
+    margin: 0;
+    line-height: 1 !important;
+    color: $text-color;
+    background-color: transparent;
+    border: 2px solid $border-color;
+    border-radius: map-get($button, pill-radius);
+    -webkit-appearance: none; /* fix iOS don't display box-shadow properly */
+    @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+    @include focus {
+      box-shadow: 0 0 0 2px rgba($border-color, .4);
+    }
+    .search--light & {
+      color: $text-color-theme-light;
+      border-color: $text-color-theme-light;
+      @include focus {
+        box-shadow: 0 0 0 2px rgba($text-color-theme-light, .4);
+      }
+    }
+    .search--dark & {
+      color: $text-color-theme-dark;
+      border-color: $text-color-theme-dark;
+      @include focus {
+        box-shadow: 0 0 0 2px rgba($text-color-theme-dark, .4);
+      }
+    }
+  }
+  & > .search-box__icon-search {
+    color: $text-color-l;
+    .search--light & {
+      color: $text-color-theme-light-l;
+    }
+    .search--dark & {
+      color: $text-color-theme-dark-l;
+    }
+  }
+  & > .search-box__icon-clear {
+    & > a {
+      @include link-colors($text-color);
+      .search--light & {
+        @include link-colors($text-color-theme-light);
+      }
+      .search--dark & {
+        @include link-colors($text-color-theme-dark);
+      }
+      cursor: pointer;
+    }
+  }
+  & > .search-box__icon-search, & > .search-box__icon-clear {
+    position: absolute;
+    width: $button-height-lg;
+    height: $button-height-lg;
+    line-height: $button-height-lg;
+    text-align: center;
+    vertical-align: middle;
+  }
+  &.not-empty > .search-box__icon-clear {
+    display: block;
+  }
+  & > .search-box__icon-clear {
+    top: 0;
+    right: 0;
+    display: none;
+  }
+  & > .search-box__icon-search {
+    top: 0;
+    left: 0;
+  }
+}
+
+.search__cancel {
+  margin-left: map-get($spacers, 2);
+  font-weight: map-get($base, font-weight-bold);
+  white-space: nowrap;
+}
+
+.search-result {
+  margin: map-get($spacers, 4) 0;
+  font-size: map-get($base, font-size-sm);
+  line-height: map-get($base, line-height-sm);
+}
+
+.search-result__header {
+  margin: map-get($spacers, 3) 0 map-get($spacers, 2) 0;
+  font-size: map-get($base, font-size-lg);
+  font-weight: map-get($base, font-weight-bold);
+  color: $text-color-l;
+  text-transform: uppercase;
+  .search--light & {
+    color: $text-color-theme-light-l;
+  }
+  .search--dark & {
+    color: $text-color-theme-dark-l;
+  }
+}
+
+.search-result__item {
+  list-style-type: none;
+  a {
+    padding: map-get($spacers, 1) map-get($spacers, 3);
+    @include transition(none);
+    @include clickable($text-color, transparent, $text-color-3, $main-color-3);
+    .search--light & {
+      @include clickable($text-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
+    }
+    .search--dark & {
+      @include clickable($text-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
+    }
+  }
+  &.active {
+    a {
+      @include plain() {
+        color: $text-color-3;
+        background-color: $main-color-3;
+        .search--light & {
+          color: $text-color-theme-dark;
+          background-color: $main-color-theme-light;
+        }
+        .search--dark & {
+          color: $text-color-theme-light;
+          background-color: $main-color-theme-dark;
+        }
+      }
+      @include active() {
+        @include transition(map-get($clickable, transition));
+      }
+    }
+  }
+}
+
+// google search
+.gsc-control-cse {
+  *,
+  ::before,
+  ::after {
+    box-sizing: initial;
+  }
+}
diff --git a/_sass/components/_tags.scss b/_sass/components/_tags.scss
new file mode 100644
index 0000000..946b1b6
--- /dev/null
+++ b/_sass/components/_tags.scss
@@ -0,0 +1,24 @@
+.site-tags {
+  .tag-button {
+    @include clickable($text-color-3, $main-color-3, default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+    & > .tag-button__count {
+      display: inline-block;
+      margin-left: map-get($spacers, 1);
+      font-size: map-get($base, font-size-xs);
+      line-height: 1;
+      vertical-align: top;
+    }
+  }
+  .tag-button-1 {
+    @include clickable($text-color-1, rgba($main-color-1, .4), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+  .tag-button-2 {
+    @include clickable($text-color-1, rgba($main-color-1, .55), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+  .tag-button-3 {
+    @include clickable($text-color-1, rgba($main-color-1, .7), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+  .tag-button-4 {
+    @include clickable($text-color-1, rgba($main-color-1, .9), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+  }
+}
diff --git a/_sass/custom.scss b/_sass/custom.scss
new file mode 100644
index 0000000..aa7b944
--- /dev/null
+++ b/_sass/custom.scss
@@ -0,0 +1,3 @@
+/* start custom scss snippet */
+
+/* end custom scss snippet */
diff --git a/_sass/layout/_404.scss b/_sass/layout/_404.scss
new file mode 100644
index 0000000..e206f76
--- /dev/null
+++ b/_sass/layout/_404.scss
@@ -0,0 +1,14 @@
+.layout--404 {
+  .sign {
+    display: table;
+    margin: map-get($spacers, 4) auto;
+    margin-top: map-get($spacers, 5);
+    h1 {
+      font-size: map-get($base, font-size-xl) * 4;
+      line-height: 1;
+    }
+    p {
+      font-size: map-get($base, font-size-xl) * 1.2;
+    }
+  }
+}
diff --git a/_sass/layout/_archive.scss b/_sass/layout/_archive.scss
new file mode 100644
index 0000000..7dc417f
--- /dev/null
+++ b/_sass/layout/_archive.scss
@@ -0,0 +1,5 @@
+.layout--archive {
+  & > .layout--archive__result {
+    margin: map-get($spacers, 4) 0;
+  }
+}
diff --git a/_sass/layout/_article.scss b/_sass/layout/_article.scss
new file mode 100644
index 0000000..dd83384
--- /dev/null
+++ b/_sass/layout/_article.scss
@@ -0,0 +1,29 @@
+.article__sharing {
+  margin: map-get($spacers, 4) 0;
+}
+.article__section-navigator {
+  padding-top: map-get($spacers, 3);
+  margin: map-get($spacers, 4) 0 map-get($spacers, 3) 0;
+  word-wrap: break-word;
+  @include split-line(top, 4px);
+  & > .previous, & > .next {
+    width: 50%;
+    & > span {
+      font-weight: map-get($base, font-weight-bold);
+      color: $text-color-l;
+    }
+    & > a {
+      display: block;
+      @include link-colors($text-color, $main-color-1);
+    }
+  }
+  & > .previous {
+    float: left;
+    padding-right: map-get($spacers, 2);
+  }
+  & > .next {
+    float: right;
+    padding-left: map-get($spacers, 2);
+    text-align: right;
+  }
+}
diff --git a/_sass/layout/_articles.scss b/_sass/layout/_articles.scss
new file mode 100644
index 0000000..85f258c
--- /dev/null
+++ b/_sass/layout/_articles.scss
@@ -0,0 +1,17 @@
+.layout--articles {
+  margin: map-get($spacers, 4) 0;
+  margin-top: map-get($spacers, 5);
+  @include media-breakpoint-down(md) {
+    margin-top: map-get($spacers, 4);
+  }
+  .card__header {
+    font-size: map-get($base, font-size);
+  }
+  .card__image {
+    & > .overlay {
+      &, .card__header {
+        font-size: map-get($base, font-size-sm);
+      }
+    }
+  }
+}
diff --git a/_sass/layout/_base.scss b/_sass/layout/_base.scss
new file mode 100644
index 0000000..6200ec5
--- /dev/null
+++ b/_sass/layout/_base.scss
@@ -0,0 +1,6 @@
+.icon {
+  display: block;
+  > svg {
+    display: block;
+  }
+}
diff --git a/_sass/layout/_home.scss b/_sass/layout/_home.scss
new file mode 100644
index 0000000..298e6b9
--- /dev/null
+++ b/_sass/layout/_home.scss
@@ -0,0 +1,15 @@
+.layout--home {
+  .pagination {
+    margin: map-get($spacers, 4) 0;
+  }
+  .pagination__menu {
+    max-width: 100%;
+    @include overflow(auto);
+  }
+  .pagination__omit {
+    color: $text-color-l;
+  }
+  .items {
+    margin-top: map-get($spacers, 4) * 1.5;
+  }
+}
diff --git a/_sass/layout/_landing.scss b/_sass/layout/_landing.scss
new file mode 100644
index 0000000..752d4e7
--- /dev/null
+++ b/_sass/layout/_landing.scss
@@ -0,0 +1,23 @@
+.layout--landing {
+  .heros {
+    max-width: map-get($layout, content-max-width) * 2;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .hero {
+    img {
+      display: block;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+  .hero__content {
+    margin-bottom: 0;
+  }
+  .hero__cover {
+    max-width: map-get($layout, content-max-width);
+  }
+  .hero__cover--full-width {
+    max-width: none;
+  }
+}
diff --git a/_sass/layout/_page.scss b/_sass/layout/_page.scss
new file mode 100644
index 0000000..bb42331
--- /dev/null
+++ b/_sass/layout/_page.scss
@@ -0,0 +1,165 @@
+body,
+html,
+.root,
+.layout--page {
+  height: 100%;
+}
+
+.layout--page {
+  &.layout--page--sidebar {
+    .page__viewport,
+    .page__grid {
+      height: 100%;
+    }
+    @include media-breakpoint-down(lg) {
+      .page__main {
+        @include overflow(unset);
+      }
+    }
+  }
+}
+
+.page__main {
+  height: 100%;
+  color: $text-color;
+  .col-aside {
+    display: none;
+    & > aside {
+      position: absolute;
+      width: map-get($layout, aside-width);
+      @include overflow(hidden);
+    }
+  }
+}
+
+.page__main-inner {
+  position: relative;
+  @include flexbox();
+  @include flex-direction(column);
+  min-height: 100%;
+  background-color: $background-color;
+}
+
+.page__content {
+  @include flex(1);
+  width: 100%;
+  margin: 0 auto;
+  @media print {
+    padding-bottom: 0;
+  }
+}
+.hide-footer {
+  .page__content {
+    padding-bottom: 0;
+  }
+}
+
+.page__comments {
+  margin: map-get($spacers, 4) 0;
+}
+
+.page__aside {
+  .toc-aside {
+    padding: map-get($spacers, 5) 0 map-get($spacers, 3) map-get($spacers, 5);
+  }
+}
+
+.page__actions {
+  position: fixed;
+  bottom: map-get($spacers, 5);
+  left: map-get($spacers, 3);
+  z-index: map-get($z-indexes, actions);
+  display: none;
+}
+
+.page__sidebar {
+  z-index: map-get($z-indexes, sidebar);
+  display: block;
+  width: 80%;
+  max-width: map-get($layout, sidebar-width);
+  height: 100%;
+  background-color: $background-color;
+  @include split-line(right);
+  @include transition(transform map-get($animation, duration));
+  @include overflow(auto);
+  .sidebar-toc {
+    padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);
+  }
+}
+.sidebar-button {
+  @include clickable($text-color-d, rgba($main-color-3, .75));
+}
+
+.page__mask {
+  @include modal(map-get($z-indexes, mask));
+  cursor: pointer;
+}
+.layout--page--sidebar {
+  .page__main {
+    @include overflow(auto);
+    @media print {
+      @include overflow(unset);
+    }
+  }
+}
+
+.has-aside {
+  .col-aside {
+    position: relative;
+    display: block;
+    width: map-get($layout, aside-width);
+    & > aside {
+      &.fixed {
+        position: fixed;
+        -webkit-font-smoothing: subpixel-antialiased;
+      }
+    }
+    @include media-breakpoint-down(lg) {
+      display: none;
+    }
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .page__sidebar {
+    position: fixed;
+    @include transform(translate(- map-get($layout, sidebar-width), 0));
+  }
+
+  .page__actions {
+    display: block;
+  }
+
+  .show-sidebar {
+    .page__actions {
+      visibility: hidden;
+    }
+    .page__sidebar {
+      @include transform(translate(0));
+    }
+    .page__mask {
+      @include modal--show();
+    }
+  }
+}
+
+.hero--light {
+  .article__info {
+    color: $text-color-theme-light;
+  }
+}
+.hero--dark {
+  .article__info {
+    color: $text-color-theme-dark;
+  }
+}
+
+.page__main--immersive {
+  .page__header {
+    position: absolute;
+    width: 100%;
+  }
+  .hero__content {
+    padding-top: map-get($layout, header-height);
+  }
+}
diff --git a/_sass/skins/_chocolate.scss b/_sass/skins/_chocolate.scss
new file mode 100644
index 0000000..b2098d5
--- /dev/null
+++ b/_sass/skins/_chocolate.scss
@@ -0,0 +1,74 @@
+///
+// Skin: Chocolate
+// Author: Tian Qi
+// Email: kitian616@outlook.com
+///
+
+// main colors
+$main-color-1:     #563a20;
+$text-color-1:     rgba(#fff, .85);
+
+$main-color-2:     #8a2827;
+$text-color-2:     rgba(#fff, .85);
+
+$main-color-3:     #b49b92;
+$text-color-3:     rgba(#fff, .85);
+
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
+// page background
+$background-color: #d2c2bc;
+
+// text colors
+$text-color-theme-light-d: rgba(#000, .95);
+$text-color-theme-light:   rgba(#000, .85);
+$text-color-theme-light-l: rgba(#000, .5);
+
+$text-color-theme-dark-d:  #fff;
+$text-color-theme-dark:    rgba(#fff, .95);
+$text-color-theme-dark-l:  rgba(#fff, .85);
+
+$text-color-d:     $text-color-theme-light-d;
+$text-color:       $text-color-theme-light;
+$text-color-l:     $text-color-theme-light-l;
+
+$text-background-color: rgba(#000, .05);
+
+// header and footer colors
+$header-text-color: $text-color-3;
+$header-background: $main-color-3;
+
+$footer-text-color: $text-color-3;
+$footer-background: $main-color-3;
+
+// border and shadow colors
+$border-color:     $main-color-3;
+$border-color-l:   mix(#000, $background-color, 10%);
+$decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .9);
+$select-color:     rgba($main-color-3, .5);
+
+// function colors
+$green:           #5baa34;
+$blue:            #1c7cd4;
+$yellow:          #c9771f;
+$red:             #da3d45;
+$text-color-function: rgba(#fff, .85);
+
+// logo colors
+$mail-color:       #0072c5;
+$facebook-color:   #4267b2;
+$twitter-color:    #1da1f2;
+$weibo-color:      #e6162d;
+$google-plus-color:#ea4335;
+$telegram-color:   #32afed;
+$medium-color:     #000;
+$zhihu-color:      #0084ff;
+$douban-color:     #42bd56;
+$linkedin-color:   #1074af;
+$github-color:     #000;
+$npm-color:        #fff;
+
+// highlight colors
+@import "skins/highlight/tomorrow-night-eighties";
diff --git a/_sass/skins/_dark.scss b/_sass/skins/_dark.scss
new file mode 100644
index 0000000..7250a87
--- /dev/null
+++ b/_sass/skins/_dark.scss
@@ -0,0 +1,74 @@
+///
+// Skin: Dark
+// Author: Tian Qi
+// Email: kitian616@outlook.com
+///
+
+// main colors
+$main-color-1:     #ff9500;
+$text-color-1:     rgba(#fff, .8);
+
+$main-color-2:     #ff006a;
+$text-color-2:     rgba(#fff, .8);
+
+$main-color-3:     #202020;
+$text-color-3:     rgba(#fff, .8);
+
+$main-color-theme-light: rgba(#000, .8);
+$main-color-theme-dark:  rgba(#fff, .8);
+
+// page background
+$background-color: #121212;
+
+// text colors
+$text-color-theme-light-d: #000;
+$text-color-theme-light:   #222;
+$text-color-theme-light-l: #888;
+
+$text-color-theme-dark-d:  rgba(#fff, .8);
+$text-color-theme-dark:    rgba(#fff, .7);
+$text-color-theme-dark-l:  rgba(#fff, .5);
+
+$text-color-d:     $text-color-theme-dark-d;
+$text-color:       $text-color-theme-dark;
+$text-color-l:     $text-color-theme-dark-l;
+
+$text-background-color: rgba(#fff, .05);
+
+// header and footer colors
+$header-text-color: $text-color-3;
+$header-background: $main-color-3;
+
+$footer-text-color: $text-color-3;
+$footer-background: $main-color-3;
+
+// border and shadow colors
+$border-color:     mix(#fff, $background-color, 20%);
+$border-color-l:   mix(#fff, $background-color, 10%);
+$decorate-color:   rgba(#fff, .1);
+$mask-color:       rgba(#000, .9);
+$select-color:     rgba($main-color-1, .5);
+
+// function colors
+$green:           #5baa34;
+$blue:            #1c7cd4;
+$yellow:          #c9771f;
+$red:             #da3d45;
+$text-color-function: rgba(#fff, .8);
+
+// logo colors
+$mail-color:       #0072c5;
+$facebook-color:   #4267b2;
+$twitter-color:    #1da1f2;
+$weibo-color:      #e6162d;
+$google-plus-color:#ea4335;
+$telegram-color:   #32afed;
+$medium-color:     #000;
+$zhihu-color:      #0084ff;
+$douban-color:     #42bd56;
+$linkedin-color:   #1074af;
+$github-color:     #000;
+$npm-color:        #fff;
+
+// highlight colors
+@import "skins/highlight/tomorrow-night";
diff --git a/_sass/skins/_default.scss b/_sass/skins/_default.scss
new file mode 100644
index 0000000..fc28935
--- /dev/null
+++ b/_sass/skins/_default.scss
@@ -0,0 +1,74 @@
+///
+// Skin: Default
+// Author: Tian Qi
+// Email: kitian616@outlook.com
+///
+
+// main colors
+$main-color-1:     #fc4d50;
+$text-color-1:     #fff;
+
+$main-color-2:     #fca24d;
+$text-color-2:     #fff;
+
+$main-color-3:     #f2f2f2;
+$text-color-3:     #333;
+
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
+// page background
+$background-color: #fff;
+
+// text colors
+$text-color-theme-light-d: #000;
+$text-color-theme-light:   #222;
+$text-color-theme-light-l: #888;
+
+$text-color-theme-dark-d:  #fff;
+$text-color-theme-dark:    rgba(#fff, .95);
+$text-color-theme-dark-l:  rgba(#fff, .85);
+
+$text-color-d:     $text-color-theme-light-d;
+$text-color:       $text-color-theme-light;
+$text-color-l:     $text-color-theme-light-l;
+
+$text-background-color: rgba(#000, .05);
+
+// header and footer colors
+$header-text-color: $text-color-3;
+$header-background: $main-color-3;
+
+$footer-text-color: $text-color-3;
+$footer-background: $main-color-3;
+
+// border and shadow colors
+$border-color:     mix(#000, $background-color, 20%);
+$border-color-l:   mix(#000, $background-color, 10%);
+$decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .9);
+$select-color:     rgba($main-color-1, .5);
+
+// function colors
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
+$text-color-function: #fff;
+
+// logo colors
+$mail-color:       #0072c5;
+$facebook-color:   #4267b2;
+$twitter-color:    #1da1f2;
+$weibo-color:      #e6162d;
+$google-plus-color:#ea4335;
+$telegram-color:   #32afed;
+$medium-color:     #000;
+$zhihu-color:      #0084ff;
+$douban-color:     #42bd56;
+$linkedin-color:   #1074af;
+$github-color:     #000;
+$npm-color:        #fff;
+
+// highlight colors
+@import "skins/highlight/tomorrow";
diff --git a/_sass/skins/_forest.scss b/_sass/skins/_forest.scss
new file mode 100644
index 0000000..df2c63a
--- /dev/null
+++ b/_sass/skins/_forest.scss
@@ -0,0 +1,74 @@
+///
+// Skin: Forest
+// Author: Tian Qi
+// Email: kitian616@outlook.com
+///
+
+// main colors
+$main-color-1:     #bb6170;
+$text-color-1:     #fff;
+
+$main-color-2:     #f3c584;
+$text-color-2:     #fff;
+
+$main-color-3:     #7cc7bb;
+$text-color-3:     #fff;
+
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
+// page background
+$background-color: #f8fcfb;
+
+// text colors
+$text-color-theme-light-d: #325f74;
+$text-color-theme-light:   #3e758f;
+$text-color-theme-light-l: #619dbb;
+
+$text-color-theme-dark-d:  #fff;
+$text-color-theme-dark:    rgba(#fff, .95);
+$text-color-theme-dark-l:  rgba(#fff, .85);
+
+$text-color-d:     $text-color-theme-light-d;
+$text-color:       $text-color-theme-light;
+$text-color-l:     $text-color-theme-light-l;
+
+$text-background-color: rgba(#000, .05);
+
+// header and footer colors
+$header-text-color: $text-color-3;
+$header-background: $main-color-3;
+
+$footer-text-color: $text-color-3;
+$footer-background: $main-color-3;
+
+// border and shadow colors
+$border-color:     #3e758f;
+$border-color-l:   mix(#000, $background-color, 10%);
+$decorate-color:   rgba(#bb6170, .15);
+$mask-color:       rgba(#000, .9);
+$select-color:     rgba($main-color-1, .5);
+
+// function colors
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
+$text-color-function: #fff;
+
+// logo colors
+$mail-color:       #0072c5;
+$facebook-color:   #4267b2;
+$twitter-color:    #1da1f2;
+$weibo-color:      #e6162d;
+$google-plus-color:#ea4335;
+$telegram-color:   #32afed;
+$medium-color:     #000;
+$zhihu-color:      #0084ff;
+$douban-color:     #42bd56;
+$linkedin-color:   #1074af;
+$github-color:     #000;
+$npm-color:        #fff;
+
+// highlight colors
+@import "skins/highlight/tomorrow";
diff --git a/_sass/skins/_ocean.scss b/_sass/skins/_ocean.scss
new file mode 100644
index 0000000..c4da252
--- /dev/null
+++ b/_sass/skins/_ocean.scss
@@ -0,0 +1,74 @@
+///
+// Skin: Ocean
+// Author: Tian Qi
+// Email: kitian616@outlook.com
+///
+
+// main colors
+$main-color-1:     #0366d6;
+$text-color-1:     #fff;
+
+$main-color-2:     #a5917f;
+$text-color-2:     #fff;
+
+$main-color-3:     #f1f8ff;
+$text-color-3:     #0366d6;
+
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
+// page background
+$background-color: #fff;
+
+// text colors
+$text-color-theme-light-d: rgba(#000, .95);
+$text-color-theme-light:   rgba(#000, .85);
+$text-color-theme-light-l: rgba(#000, .5);
+
+$text-color-theme-dark-d:  #fff;
+$text-color-theme-dark:    rgba(#fff, .95);
+$text-color-theme-dark-l:  rgba(#fff, .85);
+
+$text-color-d:     $text-color-theme-light-d;
+$text-color:       $text-color-theme-light;
+$text-color-l:     $text-color-theme-light-l;
+
+$text-background-color: rgba(#000, .05);
+
+// header and footer colors
+$header-text-color: $text-color-3;
+$header-background: $main-color-3;
+
+$footer-text-color: $text-color-3;
+$footer-background: $main-color-3;
+
+// border and shadow colors
+$border-color:     mix(#000, $background-color, 20%);
+$border-color-l:   mix(#000, $background-color, 10%);
+$decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .9);
+$select-color:     rgba($main-color-1, .5);
+
+// function colors
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
+$text-color-function: #fff;
+
+// logo colors
+$mail-color:       #0072c5;
+$facebook-color:   #4267b2;
+$twitter-color:    #1da1f2;
+$weibo-color:      #e6162d;
+$google-plus-color:#ea4335;
+$telegram-color:   #32afed;
+$medium-color:     #000;
+$zhihu-color:      #0084ff;
+$douban-color:     #42bd56;
+$linkedin-color:   #1074af;
+$github-color:     #000;
+$npm-color:        #fff;
+
+// highlight colors
+@import "skins/highlight/tomorrow-night-blue";
diff --git a/_sass/skins/_orange.scss b/_sass/skins/_orange.scss
new file mode 100644
index 0000000..4ffdbb1
--- /dev/null
+++ b/_sass/skins/_orange.scss
@@ -0,0 +1,74 @@
+///
+// Skin: Orange
+// Author: Tian Qi
+// Email: kitian616@outlook.com
+///
+
+// main colors
+$main-color-1:     #f92651;
+$text-color-1:     #fff;
+
+$main-color-2:     #fdb824;
+$text-color-2:     #fff;
+
+$main-color-3:     #ff8a64;
+$text-color-3:     #fff;
+
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
+// page background
+$background-color: #fffdfa;
+
+// text colors
+$text-color-theme-light-d: rgba(#000, .95);
+$text-color-theme-light:   rgba(#000, .85);
+$text-color-theme-light-l: rgba(#000, .5);
+
+$text-color-theme-dark-d:  rgba(#fff, .95);
+$text-color-theme-dark:    rgba(#fff, .85);
+$text-color-theme-dark-l:  rgba(#fff, .65);
+
+$text-color-d:     $text-color-theme-light-d;
+$text-color:       $text-color-theme-light;
+$text-color-l:     $text-color-theme-light-l;
+
+$text-background-color: rgba(#000, .05);
+
+// header and footer colors
+$header-text-color: $text-color-3;
+$header-background: linear-gradient(60deg, #ffa650 0%, #ff7b50 100%);
+
+$footer-text-color: $text-color-3;
+$footer-background: linear-gradient(60deg, #ffa650 0%, #ff7b50 100%);
+
+// border and shadow colors
+$border-color:     mix($main-color-1, $background-color, 50%);
+$border-color-l:   mix(#000, $background-color, 10%);
+$decorate-color:   rgba(#000, .1);
+$mask-color:       rgba(#000, .9);
+$select-color:     rgba($main-color-3, .5);
+
+// function colors
+$green:           #52c41a;
+$blue:            #1890ff;
+$yellow:          #fa8c16;
+$red:             #f5222d;
+$text-color-function: #fff;
+
+// logo colors
+$mail-color:       #0072c5;
+$facebook-color:   #4267b2;
+$twitter-color:    #1da1f2;
+$weibo-color:      #e6162d;
+$google-plus-color:#ea4335;
+$telegram-color:   #32afed;
+$medium-color:     #000;
+$zhihu-color:      #0084ff;
+$douban-color:     #42bd56;
+$linkedin-color:   #1074af;
+$github-color:     #000;
+$npm-color:        #fff;
+
+// highlight colors
+@import "skins/highlight/tomorrow-night-eighties";
diff --git a/_sass/skins/highlight/_default.scss b/_sass/skins/highlight/_default.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/_sass/skins/highlight/_default.scss
diff --git a/_sass/skins/highlight/_tomorrow-night-blue.scss b/_sass/skins/highlight/_tomorrow-night-blue.scss
new file mode 100644
index 0000000..473cbff
--- /dev/null
+++ b/_sass/skins/highlight/_tomorrow-night-blue.scss
@@ -0,0 +1,2 @@
+@import "./tomorrow/night-blue";
+@import "./tomorrow/highlight";
diff --git a/_sass/skins/highlight/_tomorrow-night-bright.scss b/_sass/skins/highlight/_tomorrow-night-bright.scss
new file mode 100644
index 0000000..05af36c
--- /dev/null
+++ b/_sass/skins/highlight/_tomorrow-night-bright.scss
@@ -0,0 +1,2 @@
+@import "./tomorrow/night-bright";
+@import "./tomorrow/highlight";
diff --git a/_sass/skins/highlight/_tomorrow-night-eighties.scss b/_sass/skins/highlight/_tomorrow-night-eighties.scss
new file mode 100644
index 0000000..4144a5e
--- /dev/null
+++ b/_sass/skins/highlight/_tomorrow-night-eighties.scss
@@ -0,0 +1,2 @@
+@import "./tomorrow/night-eighties";
+@import "./tomorrow/highlight";
diff --git a/_sass/skins/highlight/_tomorrow-night.scss b/_sass/skins/highlight/_tomorrow-night.scss
new file mode 100644
index 0000000..2cb5d72
--- /dev/null
+++ b/_sass/skins/highlight/_tomorrow-night.scss
@@ -0,0 +1,2 @@
+@import "./tomorrow/night";
+@import "./tomorrow/highlight";
diff --git a/_sass/skins/highlight/_tomorrow.scss b/_sass/skins/highlight/_tomorrow.scss
new file mode 100644
index 0000000..90aaf3b
--- /dev/null
+++ b/_sass/skins/highlight/_tomorrow.scss
@@ -0,0 +1,2 @@
+@import "./tomorrow/default";
+@import "./tomorrow/highlight";
diff --git a/_sass/skins/highlight/tomorrow/_default.scss b/_sass/skins/highlight/tomorrow/_default.scss
new file mode 100644
index 0000000..c739cf7
--- /dev/null
+++ b/_sass/skins/highlight/tomorrow/_default.scss
@@ -0,0 +1,10 @@
+$highlight-background   : #f7f7f7;
+$highlight-foreground   : #4d4d4c;
+$highlight-comment      : #8e908c;
+$highlight-red          : #c82829;
+$highlight-orange       : #f5871f;
+$highlight-yellow       : #eab700;
+$highlight-green        : #718c00;
+$highlight-aqua         : #3e999f;
+$highlight-blue         : #4271ae;
+$highlight-purple       : #8959a8;
diff --git a/_sass/skins/highlight/tomorrow/_highlight.scss b/_sass/skins/highlight/tomorrow/_highlight.scss
new file mode 100644
index 0000000..c026a44
--- /dev/null
+++ b/_sass/skins/highlight/tomorrow/_highlight.scss
@@ -0,0 +1,74 @@
+figure.highlight::before {
+  color: $highlight-comment !important;
+  background-color: $highlight-background !important;
+}
+pre.lineno {
+  color: $highlight-comment !important;
+}
+.highlight > pre {
+  color: $highlight-foreground;
+  background-color: $highlight-background !important;
+  .c   { color: $highlight-comment; } /* Comment */
+  .err { color: $highlight-red; } /* Error */
+  .k   { color: $highlight-purple; } /* Keyword */
+  .l   { color: $highlight-orange; } /* Literal */
+  .n   { color: $highlight-foreground; } /* Name */
+  .o   { color: $highlight-aqua; } /* Operator */
+  .p   { color: $highlight-foreground; } /* Punctuation */
+  .cm  { color: $highlight-comment; } /* Comment.Multiline */
+  .cp  { color: $highlight-comment; } /* Comment.Preproc */
+  .c1  { color: $highlight-comment; } /* Comment.Single */
+  .cs  { color: $highlight-comment; } /* Comment.Special */
+  .gd  { color: $highlight-red; } /* Generic.Deleted */
+  .ge  { font-style: italic; } /* Generic.Emph */
+  .gh  { font-weight: bold; color: $highlight-foreground; } /* Generic.Heading */
+  .gi  { color: $highlight-green; } /* Generic.Inserted */
+  .gp  { font-weight: bold; color: $highlight-comment; } /* Generic.Prompt */
+  .gs  { font-weight: bold; } /* Generic.Strong */
+  .gu  { font-weight: bold; color: $highlight-aqua; } /* Generic.Subheading */
+  .kc  { color: $highlight-purple; } /* Keyword.Constant */
+  .kd  { color: $highlight-purple; } /* Keyword.Declaration */
+  .kn  { color: $highlight-aqua; } /* Keyword.Namespace */
+  .kp  { color: $highlight-purple; } /* Keyword.Pseudo */
+  .kr  { color: $highlight-purple; } /* Keyword.Reserved */
+  .kt  { color: $highlight-yellow; } /* Keyword.Type */
+  .ld  { color: $highlight-green; } /* Literal.Date */
+  .m   { color: $highlight-orange; } /* Literal.Number */
+  .s   { color: $highlight-green; } /* Literal.String */
+  .na  { color: $highlight-blue; } /* Name.Attribute */
+  .nb  { color: $highlight-foreground; } /* Name.Builtin */
+  .nc  { color: $highlight-yellow; } /* Name.Class */
+  .no  { color: $highlight-red; } /* Name.Constant */
+  .nd  { color: $highlight-aqua; } /* Name.Decorator */
+  .ni  { color: $highlight-foreground; } /* Name.Entity */
+  .ne  { color: $highlight-red; } /* Name.Exception */
+  .nf  { color: $highlight-blue; } /* Name.Function */
+  .nl  { color: $highlight-foreground; } /* Name.Label */
+  .nn  { color: $highlight-yellow; } /* Name.Namespace */
+  .nx  { color: $highlight-blue; } /* Name.Other */
+  .py  { color: $highlight-foreground; } /* Name.Property */
+  .nt  { color: $highlight-aqua; } /* Name.Tag */
+  .nv  { color: $highlight-red; } /* Name.Variable */
+  .ow  { color: $highlight-aqua; } /* Operator.Word */
+  .w   { color: $highlight-foreground; } /* Text.Whitespace */
+  .mf  { color: $highlight-orange; } /* Literal.Number.Float */
+  .mh  { color: $highlight-orange; } /* Literal.Number.Hex */
+  .mi  { color: $highlight-orange; } /* Literal.Number.Integer */
+  .mo  { color: $highlight-orange; } /* Literal.Number.Oct */
+  .sb  { color: $highlight-green; } /* Literal.String.Backtick */
+  .sc  { color: $highlight-foreground; } /* Literal.String.Char */
+  .sd  { color: $highlight-comment; } /* Literal.String.Doc */
+  .s2  { color: $highlight-green; } /* Literal.String.Double */
+  .se  { color: $highlight-orange; } /* Literal.String.Escape */
+  .sh  { color: $highlight-green; } /* Literal.String.Heredoc */
+  .si  { color: $highlight-orange; } /* Literal.String.Interpol */
+  .sx  { color: $highlight-green; } /* Literal.String.Other */
+  .sr  { color: $highlight-green; } /* Literal.String.Regex */
+  .s1  { color: $highlight-green; } /* Literal.String.Single */
+  .ss  { color: $highlight-green; } /* Literal.String.Symbol */
+  .bp  { color: $highlight-foreground; } /* Name.Builtin.Pseudo */
+  .vc  { color: $highlight-red; } /* Name.Variable.Class */
+  .vg  { color: $highlight-red; } /* Name.Variable.Global */
+  .vi  { color: $highlight-red; } /* Name.Variable.Instance */
+  .il  { color: $highlight-orange; } /* Literal.Number.Integer.Long */
+}
diff --git a/_sass/skins/highlight/tomorrow/_night-blue.scss b/_sass/skins/highlight/tomorrow/_night-blue.scss
new file mode 100644
index 0000000..74fbf7f
--- /dev/null
+++ b/_sass/skins/highlight/tomorrow/_night-blue.scss
@@ -0,0 +1,10 @@
+$highlight-background   :#002451;
+$highlight-foreground   :#fff;
+$highlight-comment      :#7285b7;
+$highlight-red          :#ff9da4;
+$highlight-orange       :#ffc58f;
+$highlight-yellow       :#ffeead;
+$highlight-green        :#d1f1a9;
+$highlight-aqua         :#9ff;
+$highlight-blue         :#bbdaff;
+$highlight-purple       :#ebbbff;
diff --git a/_sass/skins/highlight/tomorrow/_night-bright.scss b/_sass/skins/highlight/tomorrow/_night-bright.scss
new file mode 100644
index 0000000..39d6cfc
--- /dev/null
+++ b/_sass/skins/highlight/tomorrow/_night-bright.scss
@@ -0,0 +1,10 @@
+$highlight-background   :#000;
+$highlight-foreground   :#eaeaea;
+$highlight-comment      :#969896;
+$highlight-red          :#d54e53;
+$highlight-orange       :#e78c45;
+$highlight-yellow       :#e7c547;
+$highlight-green        :#b9ca4a;
+$highlight-aqua         :#70c0b1;
+$highlight-blue         :#7aa6da;
+$highlight-purple       :#c397d8;
diff --git a/_sass/skins/highlight/tomorrow/_night-eighties.scss b/_sass/skins/highlight/tomorrow/_night-eighties.scss
new file mode 100644
index 0000000..4bd0ddb
--- /dev/null
+++ b/_sass/skins/highlight/tomorrow/_night-eighties.scss
@@ -0,0 +1,10 @@
+$highlight-background   :#2d2d2d;
+$highlight-foreground   :#ccc;
+$highlight-comment      :#999;
+$highlight-red          :#f2777a;
+$highlight-orange       :#f99157;
+$highlight-yellow       :#fc6;
+$highlight-green        :#9c9;
+$highlight-aqua         :#6cc;
+$highlight-blue         :#69c;
+$highlight-purple       :#c9c;
diff --git a/_sass/skins/highlight/tomorrow/_night.scss b/_sass/skins/highlight/tomorrow/_night.scss
new file mode 100644
index 0000000..98a0294
--- /dev/null
+++ b/_sass/skins/highlight/tomorrow/_night.scss
@@ -0,0 +1,10 @@
+$highlight-background   : #1d1f21;
+$highlight-foreground   : #c5c8c6;
+$highlight-comment      : #969896;
+$highlight-red          : #c66;
+$highlight-orange       : #de935f;
+$highlight-yellow       : #f0c674;
+$highlight-green        : #b5bd68;
+$highlight-aqua         : #8abeb7;
+$highlight-blue         : #81a2be;
+$highlight-purple       : #b294bb;