Merge branch 'release-0.5.0'v0.5.0

30 files changed, 664 insertions, 420 deletions

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index ac79534..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-	"presets": [
-		[ "env", {
-			"modules": false,
-			"targets": {
-				"browsers": [
-					"last 2 Chrome versions",
-					"last 2 Firefox versions",
-					"last 2 Safari versions",
-					"last 2 Edge versions",
-					"last 2 Opera versions",
-					"last 2 iOS versions",
-					"last 1 Android version",
-					"last 1 ChromeAndroid version",
-					"ie 11",
-					"> 1%"
-				]
-			}
-		} ]
-	],
-	"plugins": [],
-	"env": {
-		"default": {
-			"plugins": [
-				"transform-runtime"
-			]
-		},
-		"test": {
-			"presets": [ "env" ]
-		}
-	}
-}
diff --git a/README.md b/README.md
index cc223ba..34dd259 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,11 @@ The Techdoc is a Hugo Theme for technical documentation.
 * Modern, Simple layout
 * Responsive web design
 * Documentation menu (Select Menu style)
+* Table Of Contents for the page (selective)
 * Theme color
 * Edit link to documentation repository
 * Custom Shortcodes
+* Open Graph
 * Analytics with Google Analytics, Google Tag Manager
 
 ## Screenshot
@@ -64,18 +66,19 @@ exampleSite
 images
   |- screenshot.png
   |- tn.png
+  |- ...
 layouts
+  |- index.html
+  |- 404.html
   |- _default
   |    |- baseof.html
   |    |- list.html
   |    |- single.html
-  |- 404.html
   |- blog
   |    |- li.html
   |    |- list.html
   |    |- single.html
   |    |- summary.html
-  |- index.html
   |- partials
   |    |- content-footer.html
   |    |- custom-head.html
@@ -85,7 +88,9 @@ layouts
   |    |- global-menu.html
   |    |- head.html
   |    |- last-updated.html
-  |    |- menu.html
+  |    |- menu
+  |    |    |- open-menu.html
+  |    |    |- slide-menu.html
   |    |- meta
   |    |    |- chroma.html
   |    |    |- google-analytics-async.html
@@ -98,6 +103,7 @@ layouts
   |    |- sidebar-footer.html
   |    |- sidebar.html
   |    |- site-header.html
+  |    |- table-of-contents.html
   |- posts
   |    |- list.html
   |    |- single.html
@@ -107,23 +113,29 @@ layouts
 node_modules
 resources
 src
-  |- scss
-  |    |- foundation
-  |    |    |- _element.scss
-  |    |    |- _normalize.scss
-  |    |    |- _reset.scss
-  |    |    |- _stack.scss
-  |    |- _component.scss
-  |    |- _foundation.scss
-  |    |- _project.scss
-  |    |- _structure.scss
-  |    |- _variable.scss
-  |    |- chroma.scss
-  |    |- theme.scss
   |- js
-       |- jquery.backtothetop
-       |- functions.js
-       |- main.js
+  |    |- jquery.backtothetop
+  |    |- functions.js
+  |    |- main.js
+  |- scss
+       |- foundation
+       |    |- _element.scss
+       |    |- _normalize.scss
+       |    |- _reset.scss
+       |    |- _stack.scss
+       |- function
+       |    |- _calc-font-size.scss
+       |    |- _calc-stack.scss
+       |    |- _contrast-color.scss
+       |    |- _strip-unit.scss
+       |- _component.scss
+       |- _foundation.scss
+       |- _function.scss
+       |- _project.scss
+       |- _structure.scss
+       |- _variable.scss
+       |- chroma.scss
+       |- theme.scss
 static
   |- css
   |    |- chroma.css
@@ -137,6 +149,7 @@ static
 .gitignore
 gulpfile.js
 LICENSE.md
+package-lock.json
 package.json
 README.md
 theme.toml
@@ -183,7 +196,7 @@ Browse site on http://localhost:1313
 
 Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.
 
-1. Fork [Hugo Theme Techdoc](http://thingsym.github.io/hugo-theme-techdoc/) from GitHub repository
+1. Fork [Hugo Theme Techdoc](https://github.com/thingsym/hugo-theme-techdoc) from GitHub repository
 2. Create a feature branch: git checkout -b my-new-feature
 3. Commit your changes: git commit -am 'Add some feature'
 4. Push to the branch: git push origin my-new-feature
@@ -191,11 +204,16 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
 
 ## Changelog
 
+* Version 0.5.0 - 2019.12.08
+  * update Sample Document
+  * add table of contents
+  * add open graph
+  * add function and stack scss
 * Version 0.4.0 - 2019.11.02
-	* update Sample Document
-	* add Theme color
-	* add Menu style
-	* improve scss
+  * update Sample Document
+  * add Theme color
+  * add Menu style
+  * improve scss
 * Version 0.3.0 - 2019.10.06
   * fix archetypes
   * add prepend-body.html for Tag Manager noscript version
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index e54d896..f4b4fd7 100755
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -20,7 +20,7 @@ enableMissingTranslationPlaceholders = false
     # Souce Code repository section
     description = "put your description"
     github_repository = "https://github.com/thingsym/hugo-theme-techdoc"
-    version = "0.4.0"
+    version = "0.5.0"
 
     # Documentation repository section
     # documentation repository (set edit link to documentation repository)
@@ -31,6 +31,12 @@ enableMissingTranslationPlaceholders = false
     tag_manager_container_id = "" # Your Google Tag Manager container id
     google_site_verification = "" # Your Google Site Verification for Search Console
 
+    # Open Graph and Twitter Cards settings section
+    title = "Hugo Techdoc Theme"
+    images = ["og-image.png"]
+    # See https://gohugo.io/templates/internal/#open-graph
+    # See https://gohugo.io/templates/internal/#twitter-cards
+
     # Theme settings section
     # Theme color
     custom_font_color = ""
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 9e8a559..e5ca80f 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -2,6 +2,11 @@
 date: 2017-10-19T15:26:15Z
 lastmod: 2019-10-26T15:26:15Z
 publishdate: 2018-11-23T15:26:15Z
+
+title: Home title
+description: Text about this post
+images:
+- home-cover.png
 ---
 
 # Hugo Techdoc Theme
@@ -12,8 +17,9 @@ publishdate: 2018-11-23T15:26:15Z
 
 * Modern, Simple layout
 * Responsive web design
-* Documentation menu (Select Menu style)
-* Theme color
-* Edit link to documentation repository
-* Custom Shortcodes
+* Documentation menu (Select [Menu style](getting-started/screenshot/#menu-style))
+* [Table Of Contents](sample/table-of-contents/) for the page (selective)
+* [Theme color](getting-started/screenshot/#theme-color)
+* [Edit link](getting-started/screenshot/#edit-link) to documentation repository
+* [Custom Shortcodes](sample/custom-shortcodes/)
 * Analytics with Google Analytics, Google Tag Manager
diff --git a/exampleSite/content/getting-started/_index.md b/exampleSite/content/getting-started/_index.md
index 109d88f..05fee29 100644
--- a/exampleSite/content/getting-started/_index.md
+++ b/exampleSite/content/getting-started/_index.md
@@ -5,6 +5,10 @@ lastmod: 2018-12-08T15:26:15Z
 publishdate: 2018-11-23T15:26:15Z
 draft: false
 weight: 9
+
+description: Text about this post
+images:
+- post-cover.png
 ---
 
 ## [Installation](./installation)
diff --git a/exampleSite/content/getting-started/configuration.md b/exampleSite/content/getting-started/configuration.md
index 0be11bf..793e99c 100644
--- a/exampleSite/content/getting-started/configuration.md
+++ b/exampleSite/content/getting-started/configuration.md
@@ -15,7 +15,7 @@ For an example of `config.toml`, see [config.toml](https://github.com/thingsym/h
     # Souce Code repository section
     description = "put your description"
     github_repository = "https://github.com/thingsym/hugo-theme-techdoc"
-    version = "0.4.0"
+    version = "0.5.0"
 
     # Documentation repository section
     # documentation repository (set edit link to documentation repository)
@@ -65,7 +65,7 @@ default: `https://github.com/thingsym/hugo-theme-techdoc`
 
 The version of souce code
 
-default: `0.4.0`
+default: `0.5.0`
 
 #### `github_doc_repository`
 
@@ -109,9 +109,9 @@ default: `""`
 
 #### `menu_style`
 
-Documentation Menu style Open Menu or Slide Menu
+Documentation Menu style, Open Menu or Slide Menu
 
-default: `slide-menu`  
+default: `open-menu`  
 value: `open-menu` | `slide-menu`
 
 #### `dateformat`
diff --git a/exampleSite/content/getting-started/screenshot.md b/exampleSite/content/getting-started/screenshot.md
index 5056b8f..b3be413 100644
--- a/exampleSite/content/getting-started/screenshot.md
+++ b/exampleSite/content/getting-started/screenshot.md
@@ -7,6 +7,8 @@ weight: 30
 
 ### Theme color
 
+![Theme color](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot-theme-color.png)
+
 ### Menu style
 
 #### Open Menu
diff --git a/exampleSite/content/sample/table-of-contents.md b/exampleSite/content/sample/table-of-contents.md
new file mode 100644
index 0000000..5a1726c
--- /dev/null
+++ b/exampleSite/content/sample/table-of-contents.md
@@ -0,0 +1,101 @@
+---
+title: "Table of Contents"
+date: 2017-10-17T15:26:15Z
+draft: false
+weight: 10
+description: "calling custom Shortcodes into your content files."
+TableOfContents: true
+---
+
+{{% panel status="primary" title="Note" icon="far fa-lightbulb" %}}
+The `TableOfContents` field set to `true` in your content’s front matter will render a table of contents.
+
+```
+TableOfContents: true
+```
+{{% /panel %}}
+
+## Section 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Section 2
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+## Section 3
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Section 3 - 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Section 3 - 2
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Section 3 - 3
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Section 4
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Section 4 - 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Section 4 - 2
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+#### Section 4 - 2 - 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+#### Section 4 - 2 - 2
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+##### Section 4 - 2 - 2 - 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+##### Section 4 - 2 - 2 - 2
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+##### Section 4 - 2 - 2 - 3
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+###### Section 4 - 2 - 2 - 3 - 1
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+###### Section 4 - 2 - 2 - 3 - 2
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+###### Section 4 - 2 - 2 - 3 - 3
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+###### Section 4 - 2 - 2 - 3 - 4
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+#### Section 4 - 2 - 3
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Section 4 - 3
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Section 5
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 19d9496..2086d14 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,5 +1,6 @@
 {{- define "main" -}}
 <h1>{{ .Title }}</h1>
+{{- partial "table-of-contents.html" . -}}
 {{- .Content -}}
 {{- partial "edit-meta.html" . -}}
 {{- partial "pagination.html" . -}}
diff --git a/layouts/partials/custom-css.html b/layouts/partials/custom-css.html
index 1917867..849cc3d 100644
--- a/layouts/partials/custom-css.html
+++ b/layouts/partials/custom-css.html
@@ -1,6 +1,6 @@
 <style>
 :root {
-  {{ with .Site.Params.custom_font_color }}--custom-font-color: {{ . }};{{ end }}
-  {{ with .Site.Params.custom_background_color }}--custom-background-color: {{ . }};{{ end }}
+  {{- with .Site.Params.custom_font_color }}--custom-font-color: {{ . }};{{ end -}}
+  {{- with .Site.Params.custom_background_color }}--custom-background-color: {{ . }};{{ end -}}
 }
 </style>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6e4c6f5..78765d4 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -24,3 +24,6 @@
 {{- partial "meta/tag-manager.html" . -}}
 {{- partial "meta/google-site-verification.html" . -}}
 {{- partial "custom-css.html" . -}}
+{{- template "_internal/opengraph.html" . -}}
+{{- template "_internal/twitter_cards.html" . -}}
+{{- template "_internal/schema.html" . -}}
diff --git a/layouts/partials/meta/google-analytics-async.html b/layouts/partials/meta/google-analytics-async.html
index 144d54e..79d93af 100644
--- a/layouts/partials/meta/google-analytics-async.html
+++ b/layouts/partials/meta/google-analytics-async.html
@@ -1,6 +1,6 @@
-{{ if .Site.IsServer }}
+{{- if .Site.IsServer -}}
 <!-- only production, not generate Google Analytics with Hugo’s built-in server -->
-{{ else }}
+{{- else -}}
 {{- with .Site.Params.google_analytics_id -}}
 <!-- BEGIN: Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
diff --git a/layouts/partials/meta/google-site-verification.html b/layouts/partials/meta/google-site-verification.html
index 68bfaf9..5f5d0e5 100644
--- a/layouts/partials/meta/google-site-verification.html
+++ b/layouts/partials/meta/google-site-verification.html
@@ -1,6 +1,6 @@
-{{ if .Site.IsServer }}
+{{- if .Site.IsServer -}}
 <!-- only production, not generate google-site-verification with Hugo’s built-in server -->
-{{ else }}
+{{- else -}}
 {{- if .IsHome -}}
 {{- with .Site.Params.google_site_verification -}}
 <meta name="google-site-verification" content="{{ . }}">
diff --git a/layouts/partials/meta/tag-manager.html b/layouts/partials/meta/tag-manager.html
index 82a27fb..d527032 100644
--- a/layouts/partials/meta/tag-manager.html
+++ b/layouts/partials/meta/tag-manager.html
@@ -1,6 +1,6 @@
-{{ if .Site.IsServer }}
+{{- if .Site.IsServer -}}
 <!-- only production, not generate Tag Manager with Hugo’s built-in server -->
-{{ else }}
+{{- else -}}
 {{- with .Site.Params.tag_manager_container_id -}}
 <!-- BEGIN: Tag Manager -->
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
diff --git a/layouts/partials/table-of-contents.html b/layouts/partials/table-of-contents.html
new file mode 100644
index 0000000..b61e83c
--- /dev/null
+++ b/layouts/partials/table-of-contents.html
@@ -0,0 +1,8 @@
+{{ if .Params.TableOfContents }}
+<aside class="table_of_contents">
+<h5>Table of Contents</h5>
+{{- $toc := .TableOfContents -}}
+{{- $toc := replaceRE `<ul>\n<li>\n<ul>` `<ul>` $toc -}}
+{{- safeHTML $toc -}}
+</aside>
+{{ end }}
diff --git a/package-lock.json b/package-lock.json
index d1c8304..746301a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "hugo-theme-techdoc",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 890f25d..5ac4b0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hugo-theme-techdoc",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The Techdoc is a Hugo Theme for technical documentation.",
   "main": "gulpfile.js",
   "author": "Thingsym",
@@ -69,6 +69,43 @@
     },
     "rules": {}
   },
+  "babel": {
+    "presets": [
+      [
+        "env",
+        {
+          "modules": false,
+          "targets": {
+            "browsers": [
+              "last 2 Chrome versions",
+              "last 2 Firefox versions",
+              "last 2 Safari versions",
+              "last 2 Edge versions",
+              "last 2 Opera versions",
+              "last 2 iOS versions",
+              "last 1 Android version",
+              "last 1 ChromeAndroid version",
+              "ie 11",
+              "> 1%"
+            ]
+          }
+        }
+      ]
+    ],
+    "plugins": [],
+    "env": {
+      "default": {
+        "plugins": [
+          "transform-runtime"
+        ]
+      },
+      "test": {
+        "presets": [
+          "env"
+        ]
+      }
+    }
+  },
   "scripts": {
     "default": "gulp",
     "gulp": "gulp",
diff --git a/src/scss/_component.scss b/src/scss/_component.scss
index f04a4c2..65597f3 100644
--- a/src/scss/_component.scss
+++ b/src/scss/_component.scss
@@ -1,3 +1,34 @@
+main * {
+	@extend .stack-first;
+}
+
+main {
+	* {
+		+ h1, + h2, + h3, + h4, + h5, + h6,
+		+ p,
+		+ hr,
+		+ table,
+		+ ul,
+		+ ol,
+		+ dl,
+		+ blockquote,
+		+ pre,
+		+ figure {
+			@extend .stack;
+		}
+	}
+
+	li > ul,
+	li > ol {
+		@extend .stack-unset;
+	}
+}
+
+figure > figcaption {
+	@extend .stack-reset;
+}
+
+.table_of_contents,
 .edit-meta,
 .edit-page,
 .pagination,
@@ -14,7 +45,7 @@
 	@include grid($flex-wrap: nowrap, $justify-content: space-between);
 	font-weight: bold;
 	> * {
-		@extend .no-stack;
+		@extend .stack-reset;
 	}
 }
 .nav-prev {}
@@ -32,11 +63,12 @@
 }
 
 .panel {
-	padding: $default-padding;
+	padding: $default-layout-padding;
 }
 .panel-primary {
 	border: 1px solid $default-border-color;
 }
+
 .panel-notice {
 	color: #fff;
 	background: #4ba0e1;
@@ -107,7 +139,7 @@
 }
 
 .notification {
-	padding: .2rem $default-padding;
+	padding: .2rem $default-layout-padding;
 	text-align: center;
 	background: $sidebar-active-color;
 }
@@ -124,3 +156,37 @@ figure > figcaption h4 {
 	font-size: 80%;
 	font-weight: normal;
 }
+
+.table_of_contents {
+	font-size: 90%;
+	padding: $default-layout-padding;
+	border: 4px solid $default-border-color;
+
+	ul {
+		list-style: none;
+		padding-left: 0;
+	}
+	li {
+		border-top: 1px solid $default-border-color;
+	}
+	> nav > ul > li:first-child {
+		border-top: unset;
+	}
+
+	ul > li li a {
+		margin-left: 2rem * 1;
+	}
+	ul ul > li li a {
+		margin-left: 2rem * 2;
+	}
+	ul ul ul > li li a {
+		margin-left: 2rem * 3;
+	}
+	ul ul ul ul > li li a {
+		margin-left: 2rem * 4;
+	}
+	ul ul ul ul ul > li li a {
+		margin-left: 2rem * 5;
+	}
+
+}
diff --git a/src/scss/_function.scss b/src/scss/_function.scss
new file mode 100644
index 0000000..d1bb570
--- /dev/null
+++ b/src/scss/_function.scss
@@ -0,0 +1,4 @@
+@import 'function/calc-font-size';
+@import 'function/calc-stack';
+@import 'function/strip-unit';
+@import 'function/contrast-color';
diff --git a/src/scss/_project.scss b/src/scss/_project.scss
index 42b3a88..8408499 100644
--- a/src/scss/_project.scss
+++ b/src/scss/_project.scss
@@ -1,7 +1,7 @@
 header {
 	color: var(--custom-font-color, #fff);
 	background: var(--custom-background-color, #000);
-	padding: .5rem $default-padding;
+	padding: .5rem $default-layout-padding;
 
 	h1 {
 		font-size: 140%;
@@ -25,7 +25,7 @@ header {
 .global-menu {
 	color: var(--custom-font-color, #fff);
 	background: var(--custom-background-color, #000);
-	padding: .2rem $default-padding;
+	padding: .2rem $default-layout-padding;
 
 	ul {
 		list-style: none;
@@ -47,7 +47,7 @@ header {
 		z-index: 99999;
 
 		li {
-			padding: .2rem $default-padding;
+			padding: .2rem $default-layout-padding;
 			background: var(--custom-background-color, #000);
 			width: 140px;
 			font-size: 80%;
@@ -120,6 +120,7 @@ main {
 
 .sidebar {
 	font-size: 90%;
+	line-height: 1.8;
 	background: $sidebar-background-color;
 	border-right: 1px solid $sidebar-active-color;
 
@@ -149,7 +150,7 @@ main {
 		padding-left: 2rem;
 	}
 	nav > ul ul > li li a {
-		padding-left: 3rem;
+		padding-left: 2rem * 1 * 1.5;
 	}
 
 	@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) {
@@ -185,7 +186,7 @@ main {
 }
 
 .sidebar-footer {
-	padding: $default-padding;
+	padding: $default-layout-padding;
 }
 
 footer {
diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss
index f87e369..fc6ea3f 100644
--- a/src/scss/_variable.scss
+++ b/src/scss/_variable.scss
@@ -1,33 +1,33 @@
 $default-layout-width: 1024px;
-$default-layout-margin: 2%;
 
 $default-font-size: 100%;
+$default-line-space: 8px;
+$default-line-height: line-height($default-line-space, $default-font-size);
+$default-stack: stack($default-line-height, $default-font-size) * 4;
+
+$default-layout-margin: 0;
+$default-layout-padding: $default-stack;
+
 $default-font-color: #000;
 $default-font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-$default-line-height: 1.8;
-$default-margin: 2rem;
-$default-padding: 1.2rem;
-$default-stack: 1.8rem;
-
 // color
 $default-background-color: #fafafa;
+$default-border-color: #f0f0f0;
+
+$default-link-text-color: #2e7eb3;
+$default-link-text-hover-color: #38a0e4;
 
 $sidebar-background-color: #f9f9f9;
 $sidebar-hover-color: #eee;
 $sidebar-active-color: #eee;
 
-$default-link-text-color: #2e7eb3;
-$default-link-hover-text-color: #38a0e4;
-
-$default-border-color: #f0f0f0;
-
 // code
 $code-font-size: .95rem;
-$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
 $code-block-background-color: #f4f6f8;
 $code-border-color: #f0f0f0;
 $code-inline-background-color: #f0f0f0;
+$code-font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
 
 // breakpoint
 $default-breakpoints: (
diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss
index 4c68f6f..669318c 100644
--- a/src/scss/foundation/_element.scss
+++ b/src/scss/foundation/_element.scss
@@ -1,9 +1,21 @@
-body {
-	font-family: $default-font-family;
+/*-----------------------*
+		Element v1.0.0-custom
+*-----------------------*/
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	font-size: $default-font-size;
+	line-height: line-height($default-line-space, $default-font-size);
+	color: $default-font-color;
+	font-family: var(--custom-font-family-base, $default-font-family);
 	font-feature-settings : 'pwid';
-	line-height: $default-line-height;
-	background: $default-background-color;
-	margin: 0;
+}
+
+body {
+	background-color: $default-background-color;
+	margin: $default-layout-margin;
 }
 
 h1,
@@ -12,6 +24,7 @@ h3,
 h4,
 h5,
 h6 {
+	font-family: var(--custom-font-family-headings, $default-font-family);
 	font-weight: bold;
 	line-height: $default-line-height;
 
@@ -22,28 +35,40 @@ h6 {
 }
 
 h1 {
-	font-size: 220%;
-	line-height: 1.2;
+	font-size: 240%;
+	line-height: line-height($default-line-space, 240%);
 }
 h2 {
-	font-size: 160%;
-	line-height: 1.4;
+	font-size: 200%;
+	line-height: line-height($default-line-space, 200%);
 }
 h3 {
-	font-size: 140%;
+	font-size: 160%;
+	line-height: line-height($default-line-space, 160%);
 }
 h4 {
-	font-size: 120%;
+	font-size: 140%;
+	line-height: line-height($default-line-space, 140%);
 }
 h5 {
-	font-size: 100%;
+	font-size: 120%;
+	line-height: line-height($default-line-space, 120%);
 }
 h6 {
-	font-size: 80%;
+	font-size: 100%;
+	line-height: line-height($default-line-space, 100%);
 }
 
-p {
-	font-size: $default-font-size;
+a {
+	color: var(--custom-link-text-color, $default-link-text-color);
+	text-decoration: none;
+
+	&:focus,
+	&:active,
+	&:hover {
+		color: var(--custom-link-text-hover-color, $default-link-text-hover-color);
+		text-decoration: underline;
+	}
 }
 
 hr {
@@ -52,6 +77,21 @@ hr {
 	border: 0;
 }
 
+p {
+	font-size: $default-font-size;
+}
+
+img {
+	display: inline-block;
+	line-height: 0;
+}
+
+img,
+video {
+	height: auto;
+	max-width: 100%;
+}
+
 table {
 	border-collapse: collapse;
 	border: 1px solid $default-border-color;
@@ -61,88 +101,73 @@ th,
 td {
 	border-top: 1px solid $default-border-color;
 	border-right: 1px solid $default-border-color;
-	padding: .4rem;
-
 	tr:nth-child(even) & {
 		background: #f8f8f8;
 	}
+	padding: .6rem;
 }
 th {
 	background: #eee;
 	font-weight: bold;
+	text-align: left;
 }
 
-ul,
-ol {
-	font-size: $default-font-size;
-	margin: 0;
-	margin-left: 1.5rem;
+ul {
+	list-style-type: disc;
 }
+
 ul {
-	&.unstyled {
-		list-style: none;
-	}
-	&.inline {
-		list-style: none;
-	}
 	&.inline li {
 		display: inline;
+		list-style: disc;
 		padding-right: 2rem;
 	}
 }
-ul ul,
-ol ol,
-ul ol,
-ol ul {
-	font-size: 100%;
-}
-li li {
-	font-size: 100%;
-}
-dl {
-	font-size: $default-font-size;
-	margin: 0 $default-margin;
-}
+
 dt {
 	font-weight: bold;
 }
 dd {
-	margin: 0 0 .8rem $default-margin;
-}
-strong {
-	font-weight: bold;
+	margin-left: 2rem;
 }
+
 blockquote {
-	background: #f9f9f9;
-	color: #959595;
-	margin-left: 0;
-	padding: .1rem .8rem;
+	color: #999;
+	padding: $default-layout-padding;
+	background-color: #f4f4f4;
 	border-left: 4px solid $default-border-color;
-
-	p:last-child {
-		margin: 0;
-	}
+	border-radius: .2rem;
 }
 
 code,
 pre,
 kbd {
 	font-family: Menlo, Monaco, "Courier New", monospace;
-	font-size: 100%;
 }
+
+code,
+kbd {
+	padding: .2rem;
+	border-radius: .2rem;
+}
+code {
+	background-color: #f4f4f4;
+}
+kbd {
+	color: #fff;
+	background-color: #333;
+}
+
 pre {
+	background-color: #f4f4f4;
+	padding: $default-layout-padding;
 	overflow: auto;
-	padding: 1rem;
-	background: $code-block-background-color;
 	white-space: pre-wrap;
-	border: 1px solid $code-border-color;
 	border-radius: .2rem;
 
 	code {
-		color: inherit;
-		background-color: transparent;
 		padding: 0;
-		border: 0;
+		background-color: unset;
 	}
 
 	&.wrap {
@@ -155,83 +180,10 @@ pre {
 		max-height: 240px;
 		overflow-y: scroll;
 	}
-	&.prettyprint {}
-
-}
-code {
-	font-family: $code-font-family;
-	font-size: $code-font-size;
-	background: $code-inline-background-color;
-	padding: .2rem;
-	border-radius: .2rem;
-}
-kbd {
-	padding: .2rem;
-	color: #fff;
-	background-color: #333;
-	border-radius: .2rem;
-}
-abbr,
-acronym,
-dfn {
-	border-bottom: 1px dotted #666;
-	cursor: help;
-}
-address {
-	display: block;
-	margin: 0 0 $default-margin;
 }
-ins {
-	text-decoration: none;
-}
-sup,
-sub {
-	font-size: $default-font-size;
-	height: 0;
-	line-height: 1;
-	position: relative;
-	vertical-align: baseline;
-}
-sup {
-	bottom: .5ex;
-}
-sub {
-	top: .5ex;
-}
-figure {
-	img {
-		display: block;
-	}
-	figcaption {
-		color: #333;
-		font-size: $default-font-size;
-	}
-}
-
-/* Links */
-a {
-	color: $default-link-text-color;
-	text-decoration: underline;
 
-	&:focus,
-	&:active,
-	&:hover {
-		color: $default-link-hover-text-color;
-	}
-}
-
-img {
-	max-width: 100%;
-	height: auto;
-}
-
-input,
-textarea {
-	color: $default-font-color;
-	font-size: 100%;
-	font-weight: normal;
-	line-height: 1.225;
-}
-textarea {
-	line-height: $default-line-height;
+figcaption {
+	color: #333;
+	font-size: $default-font-size;
+	line-height: line-height($default-line-space, $default-font-size);
 }
diff --git a/src/scss/foundation/_stack.scss b/src/scss/foundation/_stack.scss
index 20fdef3..70f25a4 100644
--- a/src/scss/foundation/_stack.scss
+++ b/src/scss/foundation/_stack.scss
@@ -1,7 +1,7 @@
 /*-----------------------*
 		stack
 *-----------------------*/
-.stack-base {
+.stack-first {
 	margin-top: 0;
 	margin-bottom: 0;
 }
@@ -10,40 +10,19 @@
 	margin-top: $default-stack;
 }
 
-.no-stack {
-	margin-top: 0;
-}
-.unset-stack {
-	margin-top: unset;
-	margin-bottom: unset;
+.stack--by2 {
+	margin-top: $default-stack * 2;
 }
 
-main * {
-	@extend .stack-base;
+.stack--by4 {
+	margin-top: $default-stack * 4;
 }
 
-main {
-	* {
-		+ h1, + h2, + h3, + h4, + h5, + h6,
-		+ p,
-		+ hr,
-		+ table,
-		+ ul,
-		+ ol,
-		+ dl,
-		+ blockquote,
-		+ pre,
-		+ figure {
-			@extend .stack;
-		}
-	}
-
-	li > ul,
-	li > ol {
-		@extend .unset-stack;
-	}
+.stack-reset {
+	margin-top: 0;
 }
 
-figure > figcaption {
-	@extend .no-stack;
+.stack-unset {
+	margin-top: unset;
+	margin-bottom: unset;
 }
diff --git a/src/scss/function/_calc-font-size.scss b/src/scss/function/_calc-font-size.scss
new file mode 100644
index 0000000..963c762
--- /dev/null
+++ b/src/scss/function/_calc-font-size.scss
@@ -0,0 +1,43 @@
+@charset "utf-8";
+// ===================================================================
+// px to em
+// ===================================================================
+
+@function px2em($px, $base: 16) {
+	@return strip-unit($px) / strip-unit($base) * 1em;
+}
+
+@function px2rem($px, $base: 16) {
+	@return strip-unit($px) / strip-unit($base) * 1rem;
+}
+// ===================================================================
+// percent to px
+// ===================================================================
+
+@function percent2px($percent, $base: 16) {
+  @return strip-unit($base) * (strip-unit($percent) / 100) * 1px;
+}
+
+// ===================================================================
+// percent to em
+// ===================================================================
+
+@function percent2em($percent, $base: 16) {
+  @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1em;
+}
+
+@function percent2rem($percent, $base: 16) {
+  @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1rem;
+}
+
+// ===================================================================
+// em to px
+// ===================================================================
+
+@function em2px($em, $base: 16) {
+  @return strip-unit($em) * strip-unit($base) * 1px;
+}
+
+@function rem2px($rem, $base: 16) {
+  @return strip-unit($rem) * strip-unit($base) * 1px;
+}
diff --git a/src/scss/function/_calc-stack.scss b/src/scss/function/_calc-stack.scss
new file mode 100644
index 0000000..3647d85
--- /dev/null
+++ b/src/scss/function/_calc-stack.scss
@@ -0,0 +1,21 @@
+@charset "utf-8";
+
+@function stack($line-height: 1, $font-size: 16px, $base: 16px) {
+	$line-height: strip-unit($line-height) * strip-unit($base);
+	@return $line-height / strip-unit($font-size) * 1rem;
+}
+
+@function line-height($line-space: 4px, $font-size: 16px, $base: 16px) {
+	@if unit($font-size) == '%' {
+		$font-size: percent2px($font-size, $base);
+	} @else if unit($font-size) == 'em' {
+		$font-size: em2px($font-size, $base);
+	} @else if unit($font-size,) == 'rem' {
+		$font-size: rem2px($font-size, $base);
+	}
+
+	$font-size: strip-unit($font-size);
+	$line-space: strip-unit($line-space);
+
+	@return (($line-space * 2) + $font-size) / $font-size;
+}
diff --git a/src/scss/function/_contrast-color.scss b/src/scss/function/_contrast-color.scss
new file mode 100644
index 0000000..75f341c
--- /dev/null
+++ b/src/scss/function/_contrast-color.scss
@@ -0,0 +1,22 @@
+// ===================================================================
+// contrast color
+// ===================================================================
+
+@charset "utf-8";
+
+@function contrast-color($color: null, $dark: #000, $light: #fff) {
+	@if $color == null {
+		@return null;
+	}
+	@else {
+		$color-brightness: brightness($color);
+		$light-color-brightness: brightness($light);
+		$dark-color-brightness: brightness($dark);
+
+		@return if(abs($color-brightness - $light-color-brightness) > abs($color-brightness - $dark-color-brightness), $light, $dark);
+	}
+}
+
+@function brightness($color: null) {
+	@return ((red($color) * 299) + (green($color) * 587) + (blue($color) * 114)) / 1000;
+}
diff --git a/src/scss/function/_strip-unit.scss b/src/scss/function/_strip-unit.scss
new file mode 100644
index 0000000..b38fdfe
--- /dev/null
+++ b/src/scss/function/_strip-unit.scss
@@ -0,0 +1,13 @@
+@charset "utf-8";
+
+@function strip-unit($value) {
+	@if type-of($value) == 'number' and unitless($value) == false {
+		@return $value / ($value * 0 + 1);
+	} @else if type-of($value) == 'number' {
+		@return $value;
+	} @else {
+		@warn $value;
+		@warn type-of($value);
+		@error "error strip unit"
+	}
+}
diff --git a/src/scss/theme.scss b/src/scss/theme.scss
index e36cffc..e43d9b4 100644
--- a/src/scss/theme.scss
+++ b/src/scss/theme.scss
@@ -1,4 +1,6 @@
 @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
+@import 'function';
+
 @import 'variable';
 
 @import "foundation";
diff --git a/static/css/theme.css b/static/css/theme.css
index 3ae99d4..8a9c301 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -412,11 +412,23 @@ fieldset {
   padding: 0;
 }
 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+/*-----------------------*
+		Element v1.0.0-custom
+*-----------------------*/
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  font-size: 100%;
+  line-height: 2;
+  color: #000;
+  font-family: var(--custom-font-family-base, -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
   font-feature-settings: 'pwid';
-  line-height: 1.8;
-  background: #fafafa;
+}
+
+body {
+  background-color: #fafafa;
   margin: 0;
 }
 
@@ -426,8 +438,9 @@ h3,
 h4,
 h5,
 h6 {
+  font-family: var(--custom-font-family-headings, -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
   font-weight: bold;
-  line-height: 1.8;
+  line-height: 2;
 }
 
 h1 > small,
@@ -441,33 +454,43 @@ h6 > small {
 }
 
 h1 {
-  font-size: 220%;
-  line-height: 1.2;
+  font-size: 240%;
+  line-height: 1.41667;
 }
 
 h2 {
-  font-size: 160%;
-  line-height: 1.4;
+  font-size: 200%;
+  line-height: 1.5;
 }
 
 h3 {
-  font-size: 140%;
+  font-size: 160%;
+  line-height: 1.625;
 }
 
 h4 {
-  font-size: 120%;
+  font-size: 140%;
+  line-height: 1.71429;
 }
 
 h5 {
-  font-size: 100%;
+  font-size: 120%;
+  line-height: 1.83333;
 }
 
 h6 {
-  font-size: 80%;
+  font-size: 100%;
+  line-height: 2;
 }
 
-p {
-  font-size: 100%;
+a {
+  color: var(--custom-link-text-color, #2e7eb3);
+  text-decoration: none;
+}
+
+a:focus, a:active, a:hover {
+  color: var(--custom-link-text-hover-color, #38a0e4);
+  text-decoration: underline;
 }
 
 hr {
@@ -476,6 +499,21 @@ hr {
   border: 0;
 }
 
+p {
+  font-size: 100%;
+}
+
+img {
+  display: inline-block;
+  line-height: 0;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
 table {
   border-collapse: collapse;
   border: 1px solid #f0f0f0;
@@ -486,7 +524,7 @@ th,
 td {
   border-top: 1px solid #f0f0f0;
   border-right: 1px solid #f0f0f0;
-  padding: .4rem;
+  padding: .6rem;
 }
 
 tr:nth-child(even) th, tr:nth-child(even)
@@ -497,89 +535,67 @@ td {
 th {
   background: #eee;
   font-weight: bold;
+  text-align: left;
 }
 
-ul,
-ol {
-  font-size: 100%;
-  margin: 0;
-  margin-left: 1.5rem;
-}
-
-ul.unstyled {
-  list-style: none;
-}
-
-ul.inline {
-  list-style: none;
+ul {
+  list-style-type: disc;
 }
 
 ul.inline li {
   display: inline;
+  list-style: disc;
   padding-right: 2rem;
 }
 
-ul ul,
-ol ol,
-ul ol,
-ol ul {
-  font-size: 100%;
-}
-
-li li {
-  font-size: 100%;
-}
-
-dl {
-  font-size: 100%;
-  margin: 0 2rem;
-}
-
 dt {
   font-weight: bold;
 }
 
 dd {
-  margin: 0 0 0.8rem 2rem;
-}
-
-strong {
-  font-weight: bold;
+  margin-left: 2rem;
 }
 
 blockquote {
-  background: #f9f9f9;
-  color: #959595;
-  margin-left: 0;
-  padding: .1rem .8rem;
+  color: #999;
+  padding: 1.28rem;
+  background-color: #f4f4f4;
   border-left: 4px solid #f0f0f0;
-}
-
-blockquote p:last-child {
-  margin: 0;
+  border-radius: .2rem;
 }
 
 code,
 pre,
 kbd {
   font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 100%;
+}
+
+code,
+kbd {
+  padding: .2rem;
+  border-radius: .2rem;
+}
+
+code {
+  background-color: #f4f4f4;
+}
+
+kbd {
+  color: #fff;
+  background-color: #333;
 }
 
 pre {
+  background-color: #f4f4f4;
+  padding: 1.28rem;
   overflow: auto;
-  padding: 1rem;
-  background: #f4f6f8;
   white-space: pre-wrap;
-  border: 1px solid #f0f0f0;
   border-radius: .2rem;
 }
 
 pre code {
-  color: inherit;
-  background-color: transparent;
   padding: 0;
-  border: 0;
+  background-color: unset;
 }
 
 pre.wrap {
@@ -594,94 +610,16 @@ pre.scrollable {
   overflow-y: scroll;
 }
 
-code {
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 0.95rem;
-  background: #f0f0f0;
-  padding: .2rem;
-  border-radius: .2rem;
-}
-
-kbd {
-  padding: .2rem;
-  color: #fff;
-  background-color: #333;
-  border-radius: .2rem;
-}
-
-abbr,
-acronym,
-dfn {
-  border-bottom: 1px dotted #666;
-  cursor: help;
-}
-
-address {
-  display: block;
-  margin: 0 0 2rem;
-}
-
-ins {
-  text-decoration: none;
-}
-
-sup,
-sub {
-  font-size: 100%;
-  height: 0;
-  line-height: 1;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  bottom: .5ex;
-}
-
-sub {
-  top: .5ex;
-}
-
-figure img {
-  display: block;
-}
-
-figure figcaption {
+figcaption {
   color: #333;
   font-size: 100%;
-}
-
-/* Links */
-a {
-  color: #2e7eb3;
-  text-decoration: underline;
-}
-
-a:focus, a:active, a:hover {
-  color: #38a0e4;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-input,
-textarea {
-  color: #000;
-  font-size: 100%;
-  font-weight: normal;
-  line-height: 1.225;
-}
-
-textarea {
-  line-height: 1.8;
+  line-height: 2;
 }
 
 /*-----------------------*
 		stack
 *-----------------------*/
-.stack-base, main * {
+.stack-first, main * {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -695,7 +633,8 @@ main * + ol,
 main * + dl,
 main * + blockquote,
 main * + pre,
-main * + figure, .edit-meta,
+main * + figure, .table_of_contents,
+.edit-meta,
 .edit-page,
 .pagination,
 .highlight,
@@ -704,14 +643,22 @@ main * + figure, .edit-meta,
 .button,
 .gist,
 .twitter-tweet {
-  margin-top: 1.8rem;
+  margin-top: 1.28rem;
+}
+
+.stack--by2 {
+  margin-top: 2.56rem;
+}
+
+.stack--by4 {
+  margin-top: 5.12rem;
 }
 
-.no-stack, figure > figcaption, .pagination > * {
+.stack-reset, figure > figcaption, .pagination > * {
   margin-top: 0;
 }
 
-.unset-stack, main li > ul,
+.stack-unset, main li > ul,
 main li > ol {
   margin-top: unset;
   margin-bottom: unset;
@@ -788,7 +735,7 @@ main {
 }
 
 .panel {
-  padding: 1.2rem;
+  padding: 1.28rem;
 }
 
 .panel-primary {
@@ -874,7 +821,7 @@ main {
 }
 
 .notification {
-  padding: 0.2rem 1.2rem;
+  padding: 0.2rem 1.28rem;
   text-align: center;
   background: #eee;
 }
@@ -893,10 +840,49 @@ figure > figcaption h4 {
   font-weight: normal;
 }
 
+.table_of_contents {
+  font-size: 90%;
+  padding: 1.28rem;
+  border: 4px solid #f0f0f0;
+}
+
+.table_of_contents ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.table_of_contents li {
+  border-top: 1px solid #f0f0f0;
+}
+
+.table_of_contents > nav > ul > li:first-child {
+  border-top: unset;
+}
+
+.table_of_contents ul > li li a {
+  margin-left: 2rem;
+}
+
+.table_of_contents ul ul > li li a {
+  margin-left: 4rem;
+}
+
+.table_of_contents ul ul ul > li li a {
+  margin-left: 6rem;
+}
+
+.table_of_contents ul ul ul ul > li li a {
+  margin-left: 8rem;
+}
+
+.table_of_contents ul ul ul ul ul > li li a {
+  margin-left: 10rem;
+}
+
 header {
   color: var(--custom-font-color, #fff);
   background: var(--custom-background-color, #000);
-  padding: 0.5rem 1.2rem;
+  padding: 0.5rem 1.28rem;
 }
 
 header h1 {
@@ -917,7 +903,7 @@ header .github {
 .global-menu {
   color: var(--custom-font-color, #fff);
   background: var(--custom-background-color, #000);
-  padding: 0.2rem 1.2rem;
+  padding: 0.2rem 1.28rem;
 }
 
 .global-menu ul {
@@ -942,7 +928,7 @@ header .github {
 }
 
 .global-menu ul.sub-menu li {
-  padding: 0.2rem 1.2rem;
+  padding: 0.2rem 1.28rem;
   background: var(--custom-background-color, #000);
   width: 140px;
   font-size: 80%;
@@ -1013,6 +999,7 @@ main {
 
 .sidebar {
   font-size: 90%;
+  line-height: 1.8;
   background: #f9f9f9;
   border-right: 1px solid #eee;
 }
@@ -1077,7 +1064,7 @@ main {
 }
 
 .sidebar-footer {
-  padding: 1.2rem;
+  padding: 1.28rem;
 }
 
 .edit-meta {
diff --git a/static/css/theme.min.css b/static/css/theme.min.css
index 220bb0e..0c2ca4b 100644
--- a/static/css/theme.min.css
+++ b/static/css/theme.min.css
@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}a{text-decoration:none;color:inherit;cursor:pointer}input,button,textarea,select{font:inherit}button{background-color:transparent;color:inherit;border-width:0;padding:0;cursor:pointer}input::-moz-focus-inner{border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}cite{font-style:normal}fieldset{border-width:0;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"メイリオ",Meiryo,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:'pwid';line-height:1.8;background:#fafafa;margin:0}h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:1.8}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{font-size:75%;font-weight:normal}h1{font-size:220%;line-height:1.2}h2{font-size:160%;line-height:1.4}h3{font-size:140%}h4{font-size:120%}h5{font-size:100%}h6{font-size:80%}p{font-size:100%}hr{background-color:#ccc;height:2px;border:0}table{border-collapse:collapse;border:1px solid #f0f0f0;width:100%}th,td{border-top:1px solid #f0f0f0;border-right:1px solid #f0f0f0;padding:.4rem}tr:nth-child(even) th,tr:nth-child(even) td{background:#f8f8f8}th{background:#eee;font-weight:bold}ul,ol{font-size:100%;margin:0;margin-left:1.5rem}ul.unstyled{list-style:none}ul.inline{list-style:none}ul.inline li{display:inline;padding-right:2rem}ul ul,ol ol,ul ol,ol ul{font-size:100%}li li{font-size:100%}dl{font-size:100%;margin:0 2rem}dt{font-weight:bold}dd{margin:0 0 0.8rem 2rem}strong{font-weight:bold}blockquote{background:#f9f9f9;color:#959595;margin-left:0;padding:.1rem .8rem;border-left:4px solid #f0f0f0}blockquote p:last-child{margin:0}code,pre,kbd{font-family:Menlo, Monaco, "Courier New", monospace;font-size:100%}pre{overflow:auto;padding:1rem;background:#f4f6f8;white-space:pre-wrap;border:1px solid #f0f0f0;border-radius:.2rem}pre code{color:inherit;background-color:transparent;padding:0;border:0}pre.wrap{white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}pre.scrollable{max-height:240px;overflow-y:scroll}code{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:.95rem;background:#f0f0f0;padding:.2rem;border-radius:.2rem}kbd{padding:.2rem;color:#fff;background-color:#333;border-radius:.2rem}abbr,acronym,dfn{border-bottom:1px dotted #666;cursor:help}address{display:block;margin:0 0 2rem}ins{text-decoration:none}sup,sub{font-size:100%;height:0;line-height:1;position:relative;vertical-align:baseline}sup{bottom:.5ex}sub{top:.5ex}figure img{display:block}figure figcaption{color:#333;font-size:100%}a{color:#2e7eb3;text-decoration:underline}a:focus,a:active,a:hover{color:#38a0e4}img{max-width:100%;height:auto}input,textarea{color:#000;font-size:100%;font-weight:normal;line-height:1.225}textarea{line-height:1.8}.stack-base,main *{margin-top:0;margin-bottom:0}.stack,main *+h1,main *+h2,main *+h3,main *+h4,main *+h5,main *+h6,main *+p,main *+hr,main *+table,main *+ul,main *+ol,main *+dl,main *+blockquote,main *+pre,main *+figure,.edit-meta,.edit-page,.pagination,.highlight,.powered,.panel,.button,.gist,.twitter-tweet{margin-top:1.8rem}.no-stack,figure>figcaption,.pagination>*{margin-top:0}.unset-stack,main li>ul,main li>ol{margin-top:unset;margin-bottom:unset}html,body{height:100%}.container{width:100%;height:100%;display:flex;flex-flow:column nowrap;margin:auto}.content-container{flex:1 0 auto;display:flex}main{flex:0 0 75%;max-width:75%}.sidebar{flex:0 0 25%;order:-1;overflow-x:hidden;overflow-y:scroll}@media screen and (max-width: 480px){.content-container{display:flex;flex-flow:column nowrap}main{flex:0 0 auto;max-width:100%}.sidebar{flex:0 0 auto;order:1}}.pagination{display:flex;flex-wrap:nowrap;justify-content:space-between;font-weight:bold}.nav-next{margin-left:auto}@media screen and (max-width: 480px){.pagination{display:flex;flex-flow:column nowrap;align-items:center}.nav-next{margin-left:0}}.panel{padding:1.2rem}.panel-primary{border:1px solid #f0f0f0}.panel-notice{color:#fff;background:#4ba0e1}.panel-success{color:#fff;background:#609f43}.panel-caution{color:#fff;background:#de776d}.panel-warning{color:#fff;background:#e67e22}.panel-danger{color:#fff;background:#ce3426}.button{display:inline-block;font-size:120%;padding:.8rem;font-weight:bold;text-decoration:none;border-radius:12px;color:#fff;background:#4ba0e1}.button:hover{color:#fff;text-decoration:none;background:#3b89c5}.button-primary{border:1px solid #f0f0f0}.button-success{background:#369b08}.button-success:hover{background:#256905}.button-caution{background:#f56558}.button-caution:hover{background:#d45145}.button-warning{background:#f5811b}.button-warning:hover{background:#db7012}.button-danger{background:#ce3426}.button-danger:hover{background:#a0281d}.notification{padding:0.2rem 1.2rem;text-align:center;background:#eee}.backtothetop{display:none;font-size:200%}.fa-layers .fa-circle{color:#fff}figure>figcaption h4{font-size:80%;font-weight:normal}header{color:var(--custom-font-color, #fff);background:var(--custom-background-color, #000);padding:0.5rem 1.2rem}header h1{font-size:140%;display:inline-block}header .version{font-size:80%}header .github{color:currentColor;margin-left:.4rem;font-size:180%}.global-menu{color:var(--custom-font-color, #fff);background:var(--custom-background-color, #000);padding:0.2rem 1.2rem}.global-menu ul{list-style:none;padding:0;margin:0}.global-menu li{display:inline-block;margin-right:1.8rem;position:relative}.global-menu ul.sub-menu{display:none;margin:0;position:absolute;top:1.8rem;left:0;z-index:99999}.global-menu ul.sub-menu li{padding:0.2rem 1.2rem;background:var(--custom-background-color, #000);width:140px;font-size:80%}.global-menu ul.sub-menu li a{color:var(--custom-font-color, #fff)}.global-menu .fa-angle-right{margin-left:.4rem;font-size:80%}.global-menu li.parent:hover>ul.sub-menu{display:flex;flex-flow:column nowrap}@media screen and (max-width: 480px){.global-menu li{display:block;margin-right:0;border-bottom:1px solid currentColor}.global-menu li:last-child{border-bottom:none}.global-menu .fa-angle-right{display:none}.global-menu ul.sub-menu{display:block;position:static}.global-menu ul.sub-menu li{width:auto;background:transparent;padding:0 .4rem}.global-menu ul.sub-menu li+li{padding-top:.2rem}.global-menu ul.sub-menu li a{color:currentColor}}.global-menu a{display:block;color:currentColor;text-decoration:none}.global-menu a:hover{text-decoration:underline}main{padding:3rem}@media screen and (max-width: 480px){main{padding:1rem}}.sidebar{font-size:90%;background:#f9f9f9;border-right:1px solid #eee}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar a{position:relative;display:block;color:#404040;text-decoration:none;padding:.2rem 1rem;border-left:solid 4px #f9f9f9;border-bottom:solid 1px #eee}.sidebar a:hover{color:#404040;background:#eee;border-left:solid 4px #ccc}.sidebar nav>ul>li li a{padding-left:2rem}.sidebar nav>ul ul>li li a{padding-left:3rem}@media screen and (max-width: 480px){.sidebar nav>ul>li:first-child a{border-top:solid 1px #eee}}.sidebar .active>a{background:#eee;border-left:solid 4px #ccc}.sidebar .slide-menu .has-sub-menu:not(.parent) ul{display:none}.sidebar .slide-menu .has-sub-menu>a span.mark{position:absolute;top:0;right:0;display:inline-block;height:32px;width:32px;line-height:2;text-align:center;color:#979797;background:#f2f2f2;border-left:1px solid #e7e7e7}.sidebar-footer{padding:1.2rem}.edit-meta{font-size:80%;text-align:right}.edit-page{font-weight:bold}.powered{font-size:80%;text-align:right;color:#999}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}a{text-decoration:none;color:inherit;cursor:pointer}input,button,textarea,select{font:inherit}button{background-color:transparent;color:inherit;border-width:0;padding:0;cursor:pointer}input::-moz-focus-inner{border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}cite{font-style:normal}fieldset{border-width:0;margin:0;padding:0}*{box-sizing:border-box}:root{font-size:100%;line-height:2;color:#000;font-family:var(--custom-font-family-base, -apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"メイリオ",Meiryo,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:'pwid'}body{background-color:#fafafa;margin:0}h1,h2,h3,h4,h5,h6{font-family:var(--custom-font-family-headings, -apple-system,BlinkMacSystemFont,"游ゴシック体",YuGothic,"メイリオ",Meiryo,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-weight:bold;line-height:2}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{font-size:75%;font-weight:normal}h1{font-size:240%;line-height:1.41667}h2{font-size:200%;line-height:1.5}h3{font-size:160%;line-height:1.625}h4{font-size:140%;line-height:1.71429}h5{font-size:120%;line-height:1.83333}h6{font-size:100%;line-height:2}a{color:var(--custom-link-text-color, #2e7eb3);text-decoration:none}a:focus,a:active,a:hover{color:var(--custom-link-text-hover-color, #38a0e4);text-decoration:underline}hr{background-color:#ccc;height:2px;border:0}p{font-size:100%}img{display:inline-block;line-height:0}img,video{height:auto;max-width:100%}table{border-collapse:collapse;border:1px solid #f0f0f0;width:100%}th,td{border-top:1px solid #f0f0f0;border-right:1px solid #f0f0f0;padding:.6rem}tr:nth-child(even) th,tr:nth-child(even) td{background:#f8f8f8}th{background:#eee;font-weight:bold;text-align:left}ul{list-style-type:disc}ul.inline li{display:inline;list-style:disc;padding-right:2rem}dt{font-weight:bold}dd{margin-left:2rem}blockquote{color:#999;padding:1.28rem;background-color:#f4f4f4;border-left:4px solid #f0f0f0;border-radius:.2rem}code,pre,kbd{font-family:Menlo, Monaco, "Courier New", monospace}code,kbd{padding:.2rem;border-radius:.2rem}code{background-color:#f4f4f4}kbd{color:#fff;background-color:#333}pre{background-color:#f4f4f4;padding:1.28rem;overflow:auto;white-space:pre-wrap;border-radius:.2rem}pre code{padding:0;background-color:unset}pre.wrap{white-space:pre;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}pre.scrollable{max-height:240px;overflow-y:scroll}figcaption{color:#333;font-size:100%;line-height:2}.stack-first,main *{margin-top:0;margin-bottom:0}.stack,main *+h1,main *+h2,main *+h3,main *+h4,main *+h5,main *+h6,main *+p,main *+hr,main *+table,main *+ul,main *+ol,main *+dl,main *+blockquote,main *+pre,main *+figure,.table_of_contents,.edit-meta,.edit-page,.pagination,.highlight,.powered,.panel,.button,.gist,.twitter-tweet{margin-top:1.28rem}.stack--by2{margin-top:2.56rem}.stack--by4{margin-top:5.12rem}.stack-reset,figure>figcaption,.pagination>*{margin-top:0}.stack-unset,main li>ul,main li>ol{margin-top:unset;margin-bottom:unset}html,body{height:100%}.container{width:100%;height:100%;display:flex;flex-flow:column nowrap;margin:auto}.content-container{flex:1 0 auto;display:flex}main{flex:0 0 75%;max-width:75%}.sidebar{flex:0 0 25%;order:-1;overflow-x:hidden;overflow-y:scroll}@media screen and (max-width: 480px){.content-container{display:flex;flex-flow:column nowrap}main{flex:0 0 auto;max-width:100%}.sidebar{flex:0 0 auto;order:1}}.pagination{display:flex;flex-wrap:nowrap;justify-content:space-between;font-weight:bold}.nav-next{margin-left:auto}@media screen and (max-width: 480px){.pagination{display:flex;flex-flow:column nowrap;align-items:center}.nav-next{margin-left:0}}.panel{padding:1.28rem}.panel-primary{border:1px solid #f0f0f0}.panel-notice{color:#fff;background:#4ba0e1}.panel-success{color:#fff;background:#609f43}.panel-caution{color:#fff;background:#de776d}.panel-warning{color:#fff;background:#e67e22}.panel-danger{color:#fff;background:#ce3426}.button{display:inline-block;font-size:120%;padding:.8rem;font-weight:bold;text-decoration:none;border-radius:12px;color:#fff;background:#4ba0e1}.button:hover{color:#fff;text-decoration:none;background:#3b89c5}.button-primary{border:1px solid #f0f0f0}.button-success{background:#369b08}.button-success:hover{background:#256905}.button-caution{background:#f56558}.button-caution:hover{background:#d45145}.button-warning{background:#f5811b}.button-warning:hover{background:#db7012}.button-danger{background:#ce3426}.button-danger:hover{background:#a0281d}.notification{padding:0.2rem 1.28rem;text-align:center;background:#eee}.backtothetop{display:none;font-size:200%}.fa-layers .fa-circle{color:#fff}figure>figcaption h4{font-size:80%;font-weight:normal}.table_of_contents{font-size:90%;padding:1.28rem;border:4px solid #f0f0f0}.table_of_contents ul{list-style:none;padding-left:0}.table_of_contents li{border-top:1px solid #f0f0f0}.table_of_contents>nav>ul>li:first-child{border-top:unset}.table_of_contents ul>li li a{margin-left:2rem}.table_of_contents ul ul>li li a{margin-left:4rem}.table_of_contents ul ul ul>li li a{margin-left:6rem}.table_of_contents ul ul ul ul>li li a{margin-left:8rem}.table_of_contents ul ul ul ul ul>li li a{margin-left:10rem}header{color:var(--custom-font-color, #fff);background:var(--custom-background-color, #000);padding:0.5rem 1.28rem}header h1{font-size:140%;display:inline-block}header .version{font-size:80%}header .github{color:currentColor;margin-left:.4rem;font-size:180%}.global-menu{color:var(--custom-font-color, #fff);background:var(--custom-background-color, #000);padding:0.2rem 1.28rem}.global-menu ul{list-style:none;padding:0;margin:0}.global-menu li{display:inline-block;margin-right:1.8rem;position:relative}.global-menu ul.sub-menu{display:none;margin:0;position:absolute;top:1.8rem;left:0;z-index:99999}.global-menu ul.sub-menu li{padding:0.2rem 1.28rem;background:var(--custom-background-color, #000);width:140px;font-size:80%}.global-menu ul.sub-menu li a{color:var(--custom-font-color, #fff)}.global-menu .fa-angle-right{margin-left:.4rem;font-size:80%}.global-menu li.parent:hover>ul.sub-menu{display:flex;flex-flow:column nowrap}@media screen and (max-width: 480px){.global-menu li{display:block;margin-right:0;border-bottom:1px solid currentColor}.global-menu li:last-child{border-bottom:none}.global-menu .fa-angle-right{display:none}.global-menu ul.sub-menu{display:block;position:static}.global-menu ul.sub-menu li{width:auto;background:transparent;padding:0 .4rem}.global-menu ul.sub-menu li+li{padding-top:.2rem}.global-menu ul.sub-menu li a{color:currentColor}}.global-menu a{display:block;color:currentColor;text-decoration:none}.global-menu a:hover{text-decoration:underline}main{padding:3rem}@media screen and (max-width: 480px){main{padding:1rem}}.sidebar{font-size:90%;line-height:1.8;background:#f9f9f9;border-right:1px solid #eee}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar a{position:relative;display:block;color:#404040;text-decoration:none;padding:.2rem 1rem;border-left:solid 4px #f9f9f9;border-bottom:solid 1px #eee}.sidebar a:hover{color:#404040;background:#eee;border-left:solid 4px #ccc}.sidebar nav>ul>li li a{padding-left:2rem}.sidebar nav>ul ul>li li a{padding-left:3rem}@media screen and (max-width: 480px){.sidebar nav>ul>li:first-child a{border-top:solid 1px #eee}}.sidebar .active>a{background:#eee;border-left:solid 4px #ccc}.sidebar .slide-menu .has-sub-menu:not(.parent) ul{display:none}.sidebar .slide-menu .has-sub-menu>a span.mark{position:absolute;top:0;right:0;display:inline-block;height:32px;width:32px;line-height:2;text-align:center;color:#979797;background:#f2f2f2;border-left:1px solid #e7e7e7}.sidebar-footer{padding:1.28rem}.edit-meta{font-size:80%;text-align:right}.edit-page{font-weight:bold}.powered{font-size:80%;text-align:right;color:#999}