summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_data/authors.yml0
-rw-r--r--_data/licenses.yml16
-rw-r--r--_data/locale.yml147
-rw-r--r--_data/navigation.yml18
-rw-r--r--_data/variables.yml64
-rw-r--r--_layouts/404.html13
-rw-r--r--_layouts/archive.html39
-rw-r--r--_layouts/article.html29
-rw-r--r--_layouts/articles.html89
-rw-r--r--_layouts/base.html25
-rw-r--r--_layouts/home.html42
-rw-r--r--_layouts/landing.html178
-rw-r--r--_layouts/none.html1
-rw-r--r--_layouts/page.html270
-rw-r--r--_sass/additional/_alert.scss29
-rw-r--r--_sass/additional/_photo-frame.scss17
-rw-r--r--_sass/additional/_tag.scss21
-rw-r--r--_sass/animate/_fade-in-down.scss10
-rw-r--r--_sass/animate/_fade-in-up.scss10
-rw-r--r--_sass/animate/_fade-in.scss8
-rw-r--r--_sass/common/_classes.scss24
-rw-r--r--_sass/common/_function.scss15
-rw-r--r--_sass/common/_print.scss20
-rw-r--r--_sass/common/_reset.scss174
-rw-r--r--_sass/common/_variables.scss150
-rw-r--r--_sass/common/classes/_animation.scss13
-rw-r--r--_sass/common/classes/_clearfix.scss19
-rw-r--r--_sass/common/classes/_clickable.scss159
-rw-r--r--_sass/common/classes/_display.scss13
-rw-r--r--_sass/common/classes/_flex.scss394
-rw-r--r--_sass/common/classes/_grid.scss80
-rw-r--r--_sass/common/classes/_horizontal-rules.scss14
-rw-r--r--_sass/common/classes/_link.scss12
-rw-r--r--_sass/common/classes/_media.scss17
-rw-r--r--_sass/common/classes/_overflow.scss26
-rw-r--r--_sass/common/classes/_pseudo.scss33
-rw-r--r--_sass/common/classes/_shadow.scss22
-rw-r--r--_sass/common/classes/_spacing.scss81
-rw-r--r--_sass/common/classes/_split-line.scss24
-rw-r--r--_sass/common/classes/_text.scss37
-rw-r--r--_sass/common/classes/_transform.scss4
-rw-r--r--_sass/common/classes/_transition.scss4
-rw-r--r--_sass/common/classes/_user-select.scss6
-rw-r--r--_sass/common/components/_button.scss163
-rw-r--r--_sass/common/components/_card.scss103
-rw-r--r--_sass/common/components/_gallery.scss21
-rw-r--r--_sass/common/components/_hero.scss70
-rw-r--r--_sass/common/components/_image.scss19
-rw-r--r--_sass/common/components/_item.scss100
-rw-r--r--_sass/common/components/_menu.scss67
-rw-r--r--_sass/common/components/_modal.scss39
-rw-r--r--_sass/common/components/_swiper.scss48
-rw-r--r--_sass/common/components/_toc.scss124
-rw-r--r--_sass/components/_article-content.scss221
-rw-r--r--_sass/components/_article-footer.scss17
-rw-r--r--_sass/components/_article-header.scss50
-rw-r--r--_sass/components/_article-info.scss25
-rw-r--r--_sass/components/_article-list.scss18
-rw-r--r--_sass/components/_author-links.scss43
-rw-r--r--_sass/components/_author-profile.scss26
-rw-r--r--_sass/components/_extensions.scss35
-rw-r--r--_sass/components/_footer.scss33
-rw-r--r--_sass/components/_header.scss123
-rw-r--r--_sass/components/_lightbox.scss7
-rw-r--r--_sass/components/_main.scss28
-rw-r--r--_sass/components/_search.scss186
-rw-r--r--_sass/components/_tags.scss24
-rw-r--r--_sass/custom.scss3
-rw-r--r--_sass/layout/_404.scss14
-rw-r--r--_sass/layout/_archive.scss5
-rw-r--r--_sass/layout/_article.scss29
-rw-r--r--_sass/layout/_articles.scss17
-rw-r--r--_sass/layout/_base.scss6
-rw-r--r--_sass/layout/_home.scss15
-rw-r--r--_sass/layout/_landing.scss23
-rw-r--r--_sass/layout/_page.scss165
-rw-r--r--_sass/skins/_chocolate.scss74
-rw-r--r--_sass/skins/_dark.scss74
-rw-r--r--_sass/skins/_default.scss74
-rw-r--r--_sass/skins/_forest.scss74
-rw-r--r--_sass/skins/_ocean.scss74
-rw-r--r--_sass/skins/_orange.scss74
-rw-r--r--_sass/skins/highlight/_default.scss0
-rw-r--r--_sass/skins/highlight/_tomorrow-night-blue.scss2
-rw-r--r--_sass/skins/highlight/_tomorrow-night-bright.scss2
-rw-r--r--_sass/skins/highlight/_tomorrow-night-eighties.scss2
-rw-r--r--_sass/skins/highlight/_tomorrow-night.scss2
-rw-r--r--_sass/skins/highlight/_tomorrow.scss2
-rw-r--r--_sass/skins/highlight/tomorrow/_default.scss10
-rw-r--r--_sass/skins/highlight/tomorrow/_highlight.scss74
-rw-r--r--_sass/skins/highlight/tomorrow/_night-blue.scss10
-rw-r--r--_sass/skins/highlight/tomorrow/_night-bright.scss10
-rw-r--r--_sass/skins/highlight/tomorrow/_night-eighties.scss10
-rw-r--r--_sass/skins/highlight/tomorrow/_night.scss10
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;