first commit

2019-11-04 22:09:44 +09:00 · 2019-11-04 22:09:44 +09:00 · cc3078ede0
commit cc3078ede0
231 changed files with 41911 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+.idea/
+.vscode/
+node_modules/
--- a/.jsbeautifyrc
+++ b/.jsbeautifyrc
@ -0,0 +1,27 @@
+{
+    "indent_size": 4,
+    "indent_char": " ",
+    "indent_with_tabs": false,
+    "editorconfig": false,
+    "eol": "\n",
+    "end_with_newline": false,
+    "indent_level": 0,
+    "preserve_newlines": true,
+    "max_preserve_newlines": 10,
+    "space_in_paren": false,
+    "space_in_empty_paren": false,
+    "jslint_happy": false,
+    "space_after_anon_function": false,
+    "space_after_named_function": false,
+    "brace_style": "collapse",
+    "unindent_chained_methods": false,
+    "break_chained_methods": false,
+    "keep_array_indentation": false,
+    "unescape_strings": false,
+    "wrap_line_length": 0,
+    "e4x": false,
+    "comma_first": false,
+    "operator_position": "before-newline",
+    "indent_empty_lines": false,
+    "templating": ["auto"]
+}
--- a/LICENSE.md
+++ b/LICENSE.md
@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present George Cushen
+
+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.
--- a/README.md
+++ b/README.md
@ -0,0 +1,510 @@
+# Zzo theme for Hugo
+
+**Zzo** theme made for bloggers.
+
+It uses HTML5 with a modern CSS grid and flex layout. Recent versions of all the mayor browsers support it, see [Can I use css grid](http://caniuse.com/#search=grid).
+
+## Table of contents
+
+* [Features](#features)
+* [Reference](#reference)
+* [Dependency](#dependency)
+* [Minimum Hugo version](#minimum-hugo-version)
+* [Installation](#installation)
+* [Updating](#updating)
+* [Run example site](#run-example-site)
+* [Configuration](#configuration)
+* [Layout](#layout)
+* [Gallery](#gallery)
+* [Multi Language](#multi-language)
+* [Sub Theme](#sub-theme)
+* [Shortcodes](#shortcodes)
+
+
+## Features
+
+* Multiple sub themes(dark, light, solarized, hacker)
+* A mobile menu
+* CSS grid and flex for layout
+* HTML5
+* Hugo Pipes for js and sass
+* jQuery
+* Simple blog
+* Minify css
+* Meta tags and JSON-LD
+* Multilingual (i18n)
+* Responsive design
+* RSS and JSON feeds with full content
+* Search with Lunr
+* Gallery with Masonry, Photoswipe
+* Prism.js for highlight code
+* Lazy image load with lazysizes
+
+## Reference
+
+I have referenced:
+
+* [zen theme](https://github.com/frjo/hugo-theme-zen)
+* [docdock theme](https://github.com/vjeantet/hugo-theme-docdock)
+* [learn theme](https://github.com/matcornic/hugo-theme-learn/)
+* [overreacted.io](https://github.com/gaearon/overreacted.io)
+
+## Dependency
+
+Zzo theme is using this library.
+
+* jquery@3.4.1
+* mark.js
+* clipboard.js
+* fetch-inject
+* lazysizes
+* masonry
+* lunr
+* jquery.toc
+* photoswipe
+* prism
+* shave.js
+* perfect-scrollbar
+
+## Minimum Hugo version
+
+Hugo version 0.58.0 or higher is required.
+
+## Installation
+
+First of all, You need to add config files.
+Follow the [Configuration](#configuration) step.
+
+You can download and unpack the theme manually from Github but it's easier to use git to clone the repo.
+
+From the root of your site:
+
+```bash
+$ git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
+```
+
+If you use git to version control your site, highly recommended, it's best to add the zzo theme as a submodule.
+
+From the root of your site:
+
+```bash
+git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
+```
+
+## Updating
+
+From the root of your site:
+
+```bash
+git submodule update --remote --merge
+```
+
+## Run example site
+
+1. Add this folder to your project static folder
+
+```bash
+root
+├── static
+│   ├── gallery
+│   │   ├── cartoon
+│   │   ├── photo
+```
+
+2. From the root of your project, type this command:
+
+```bash
+hugo server --contentDir themes/zzo/exampleSite/content
+```
+
+## Configuration
+
+1. config folder structure
+
+```bash
+root
+├── config
+│   ├── _default
+│   │   ├── config.toml
+│   │   ├── languages.toml
+│   │   ├── menus.en.toml
+│   │   ├── menus.ko.toml
+│   │   ├── params.toml
+```
+
+2. config.toml
+
+```bash
+baseURL = "http://example.org/"
+title = "Hugo Zzo Theme"
+theme = "zzo"
+
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = false
+hasCJKLanguage = false
+
+summaryLength = 70
+
+googleAnalytics = ""
+copyright = "MIT©zzossig"
+timeout = 10000
+enableEmoji = true
+paginate = 7
+rssLimit = 100
+
+[outputs]
+  home = [ "HTML", "RSS", "JSON" ]
+
+[taxonomies]
+  category = "categories"
+  tag = "tags"
+  series = "series"
+
+```
+
+3. languages.toml
+
+```bash
+[en]
+  title = "Hugo Zzo Theme"
+  languageName = "English"
+  weight = 1
+
+[ko]
+  title = "Hugo Zzo Theme"
+  languageName = "한국어"
+  weight = 2
+```
+
+4. menus.en.toml
+
+This example file is the zzo theme's default menu options. You should edit yours.
+
+```bash
+[[main]]
+  identifier = "about"
+  name = "about"
+  url = "/about/"
+  weight = 1
+
+[[main]]
+    identifier = "archive"
+    name = "archive"
+    url = "/archive/"
+    weight = 2
+
+[[main]]
+  identifier = "gallery"
+  name = "gallery"
+  url = "/gallery"
+  weight = 3
+
+[[main]]
+    parent = "gallery"
+    name = "cartoon"
+    url = "/gallery/cartoon"
+
+[[main]]
+    parent = "gallery"
+    name = "photo"
+    url = "/gallery/photo"
+
+[[main]]
+    identifier = "posts"
+    name = "posts"
+    url = "/posts/"
+    weight = 4
+
+[[main]]
+  identifier = "notes"
+  name = "notes"
+  url = "/notes/"
+  weight = 5
+```
+
+5. params.toml
+
+```bash
+description = "The Zzo theme for Hugo example site."
+
+# body
+enableToc = true
+enableBreadcrumb = true
+enableCustomScrollbar = true
+enablePhotoSwipe = true
+enableSearch = true
+enableMark = true
+
+# sidebar
+enableSidebarTags = true
+enableSidebarSeries = true
+enableSidebarCategories = true
+
+# footer
+showPoweredBy = true
+showFeedLinks = true
+showSocialLinks = true
+enableLangChange = true
+enableThemeChange = true
+themeOptions = ["dark", "light", "hacker", "solarized"]
+[socialOptions]
+  facebook = "http://example.org/"
+  twitter = "http://example.org/"
+  github = "http://example.org/"
+  stack-overflow = ""
+  instagram = ""
+  google-plus = ""
+  youtube = ""
+  medium = ""
+  tumblr = ""
+  linkedin = ""
+  pinterest = "http://example.org/"
+  stack-exchange = ""
+```
+
+## Layout
+
+### CSS grid for layout
+
+Modern CSS grid is the easiest and cleanest way to layout your pages.
+
+The CSS grid layout are in `assets/sass/layout/_grid.scss`. A lot can be done by just reordering "grid-template-rows". 
+
+#### grid structure
+
+|  left 	|  right 	|
+|---	|---	|
+|  1	|  2	|
+|  3 	|  4	|
+|  5 	|  6	|
+|  7 	|  8	|
+
+* left, right column width ratio => 5 : 2
+* 1 => .navbar-main
+* 2 => .navbar-side
+* 1 + 2 => .navbar
+* 3 => .header-main
+* 4 => .header-side
+* 3 + 4 => .header
+* 5 => .main-main
+* 6 => .main-side
+* 5 + 6 => .main
+* 7 => .footer-main
+* 8 => .footer-side
+* 7 + 8 => .footer
+
+### grid structure example applied in home page
+
+```html
+<div class="navbar"></div>
+<div class="header"></div>
+<div>
+  <div class="main-main"></div>
+  <div class="main-side"></div>
+</div>
+<div class="footer></div>
+```
+
+## Gallery
+
+Follow the steps below if you want to make gallery
+
+1. Make a gallery folder under the content folder
+
+```bash
+root
+├── content
+│   ├── gallery
+```
+
+2. Make a sub folder under the gallery folder
+
+```bash
+root
+├── content
+│   ├── gallery
+│   │   ├── mygallery
+```
+
+3. Make a index.md file under the sub folder using this command
+
+```bash
+hugo new content/gallery/mygallery/index.md
+```
+
+4. Put your images in static folder
+
+```bash
+root
+├── static
+│   ├── gallery
+│   │   ├── mygallery
+│   │   │   ├── ...your images here
+```
+
+## Multi Language
+
+The default language of this theme is English. If you want to use another language, follow these steps
+
+1. Make a menu file.
+
+```bash 
+root
+├── config
+│   ├── _default
+│   │   ├── ...
+│   │   ├── menus.ko.toml
+```
+
+```bash
+config/_default/menus.ko.toml
+
+[[main]]
+  identifier = "about"
+  name = "about"
+  url = "/ko/about/"
+  weight = 1
+
+[[main]]
+    identifier = "archive"
+    name = "archive"
+    url = "/ko/archive/"
+    weight = 2
+...
+```
+
+2. Make a content file. Add your language code before the md extension.
+
+```bash
+hugo new about/index.ko.md
+hugo new posts/markdown-syntax.ko.md
+...
+```
+
+3. Make an i18n file.
+
+```bash
+i18n/ko.toml
+
+[search-placeholder]
+other = "검색..."
+
+[summary-dateformat]
+other = "2006년 01월 02일"
+
+[taxo-tags]
+other = "태그"
+
+...
+```
+
+## Sub Theme
+
+If you don't like the color that I choose, you can make your own sub theme.
+
+1. Make your theme file
+
+```bash
+root
+├── assets
+│   ├── sass
+│   │   ├── themes
+│   │   │   ├── _yourtheme.scss
+```
+
+```scss
+assets/sass/themes/_yourtheme.scss
+$yourtheme: (
+    footer-background-color: #403E41,
+    footer-color: #bdbdbd, 
+    link: #FFD866,
+    link-hover: #FF6188,
+    title-color: #ffd866,
+    meta-color: #FCFCFA,
+    ....
+);
+```
+
+2. Import your theme file inside _theme.scss file
+
+```scss
+@import 'dark';
+@import 'light';
+@import 'hacker';
+@import 'solarized';
+@import 'yourtheme';
+
+$themes: (
+  dark: $dark,
+  light: $light,
+  hacker: $hacker,  
+  solarized: $solarized,
+  yourtheme: $yourtheme,
+);
+```
+
+3. Edit config file to expose your theme in dropdown component.
+
+```bash
+config/_default/params.toml
+...
+themeOptions = ["yourtheme", "dark", "light", "hacker", "solarized"]
+...
+```
+
+4. [optional] Add prism file for highlighting code
+
+```bash
+root
+├── assets
+│   ├── sass
+│   │   ├── prism
+│   │   │   ├── _yourtheme.scss
+```
+
+```scss
+// assets/sass/prism/_yourtheme.scss
+
+.theme__yourtheme {
+  ...
+}
+
+// assets/sass/prism/_prism.scss
+
+@import 'dark';
+@import 'light';
+@import 'hacker';
+@import 'solarized';
+@import 'yourtheme';
+```
+
+## Shortcodes
+
+### warning
+
+```bash
+{{% alert theme="info" %}}**this** is a text{{% /alert %}}
+{{% alert theme="success" %}}**Yeahhh !** is a text{{% /alert %}}
+{{% alert theme="warning" %}}**Be carefull** is a text{{% /alert %}}
+{{% alert theme="danger" %}}**Beware !** is a text{{% /alert %}}
+```
+
+### expand
+
+```bash
+{{%expand "Expand me" %}}Good job{{% /expand%}}
+```
+
+### img
+
+```bash
+{{% img src="https://example.com" title="Image4" caption="Image description" alt="image alt" %}}
+```
+
+### notice
+
+```bash
+{{% notice note %}}
+A notice disclaimer
+{{% /notice %}}
+```
--- a/archetypes/about.md
+++ b/archetypes/about.md
@ -0,0 +1,12 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+desc: 
+type: about
+tags:
+-
+series:
+-
+categories:
+-
+---
--- a/archetypes/archive.md
+++ b/archetypes/archive.md
@ -0,0 +1,12 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+desc: 
+type: archive
+tags:
+-
+series:
+-
+categories:
+-
+---
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -0,0 +1,11 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+desc:
+tags:
+-
+series:
+-
+categories:
+-
+---
--- a/archetypes/gallery.md
+++ b/archetypes/gallery.md
@ -0,0 +1,12 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+desc: 
+type: gallery
+tags:
+-
+series:
+-
+categories:
+-
+---
--- a/assets/css/perfect-scrollbar.min.css
+++ b/assets/css/perfect-scrollbar.min.css
@ -0,0 +1,2 @@
+/* perfect-scrollbar v0.6.14 */
+.ps-container{-ms-touch-action:auto;touch-action:auto;overflow:hidden !important;-ms-overflow-style:none}@supports (-ms-overflow-style: none){.ps-container{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps-container{overflow:auto !important}}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:0px;height:15px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;bottom:2px;height:6px}.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x,.ps-container>.ps-scrollbar-x-rail:active>.ps-scrollbar-x{height:11px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;opacity:0;-webkit-transition:background-color .2s linear, opacity .2s linear;-o-transition:background-color .2s linear, opacity .2s linear;-moz-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:0;width:15px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;-o-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;-moz-transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;transition:background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;right:2px;width:6px}.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y,.ps-container>.ps-scrollbar-y-rail:active>.ps-scrollbar-y{width:11px}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#999;height:11px}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{background-color:#eee;opacity:.9}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#999;width:11px}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}
--- a/assets/css/photoswipe/custom-skin.css
+++ b/assets/css/photoswipe/custom-skin.css
@ -0,0 +1,581 @@
+/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+	Contents:
+	1. Buttons
+	2. Share modal and links
+	3. Index indicator ("1 of X" counter)
+	4. Caption
+	5. Loading indicator
+	6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+*/
+/*
+	
+	1. Buttons
+ */
+/* <button> css reset */
+.pswp__button {
+    width: 44px;
+    height: 44px;
+    position: relative;
+    background: none;
+    cursor: pointer;
+    overflow: visible;
+    -webkit-appearance: none;
+    display: block;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    float: right;
+    opacity: 0.75;
+    -webkit-transition: opacity 0.2s;
+    transition: opacity 0.2s;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.pswp__button:focus,
+.pswp__button:hover {
+    opacity: 1;
+}
+
+.pswp__button:active {
+    outline: none;
+    opacity: 0.9;
+}
+
+.pswp__button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
+.pswp__ui--over-close .pswp__button--close {
+    opacity: 1;
+}
+
+.pswp__button,
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+    background: url(/images/photoswipe/default-skin.png) 0 0 no-repeat;
+    background-size: 264px 88px;
+    width: 44px;
+    height: 44px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.1),
+(-webkit-min-device-pixel-ratio: 1.09375),
+(min-resolution: 105dpi),
+(min-resolution: 1.1dppx) {
+
+    /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+    .pswp--svg .pswp__button,
+    .pswp--svg .pswp__button--arrow--left:before,
+    .pswp--svg .pswp__button--arrow--right:before {
+        background-image: url(/images/photoswipe/default-skin.svg);
+    }
+
+    .pswp--svg .pswp__button--arrow--left,
+    .pswp--svg .pswp__button--arrow--right {
+        background: none;
+    }
+}
+
+.pswp__button--close {
+    background-position: 0 -44px;
+}
+
+.pswp__button--share {
+    background-position: -44px -44px;
+}
+
+.pswp__button--fs {
+    display: none;
+}
+
+.pswp--supports-fs .pswp__button--fs {
+    display: block;
+}
+
+.pswp--fs .pswp__button--fs {
+    background-position: -44px 0;
+}
+
+.pswp__button--zoom {
+    display: none;
+    background-position: -88px 0;
+}
+
+.pswp--zoom-allowed .pswp__button--zoom {
+    display: block;
+}
+
+.pswp--zoomed-in .pswp__button--zoom {
+    background-position: -132px 0;
+}
+
+/* no arrows on touch screens */
+.pswp--touch .pswp__button--arrow--left,
+.pswp--touch .pswp__button--arrow--right {
+    visibility: hidden;
+}
+
+/*
+	Arrow buttons hit area
+	(icon is added to :before pseudo-element)
+*/
+.pswp__button--arrow--left,
+.pswp__button--arrow--right {
+    background: none;
+    top: 50%;
+    margin-top: -50px;
+    width: 50px;
+    height: 100px;
+    position: absolute;
+    background-color: #212121;
+    border-radius: 0.25rem;
+}
+
+.pswp__button--arrow--left {
+    left: 0;
+}
+
+.pswp__button--arrow--right {
+    right: 0;
+}
+
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+    content: '';
+    top: 35px;
+    color: #fff;
+    height: 30px;
+    width: 32px;
+    position: absolute;
+}
+
+.pswp__button--arrow--left:before {
+    left: 6px;
+    background-position: -138px -44px;
+}
+
+.pswp__button--arrow--right:before {
+    right: 6px;
+    background-position: -94px -44px;
+}
+
+/*
+	2. Share modal/popup and links
+ */
+.pswp__counter,
+.pswp__share-modal {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.pswp__share-modal {
+    display: block;
+    background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    position: absolute;
+    z-index: 1600;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s ease-out;
+    transition: opacity 0.25s ease-out;
+    -webkit-backface-visibility: hidden;
+    will-change: opacity;
+}
+
+.pswp__share-modal--hidden {
+    display: none;
+}
+
+.pswp__share-tooltip {
+    z-index: 1620;
+    position: absolute;
+    background: #FFF;
+    top: 56px;
+    border-radius: 2px;
+    display: block;
+    width: auto;
+    right: 44px;
+    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+    -webkit-transform: translateY(6px);
+    -ms-transform: translateY(6px);
+    transform: translateY(6px);
+    -webkit-transition: -webkit-transform 0.25s;
+    transition: transform 0.25s;
+    -webkit-backface-visibility: hidden;
+    will-change: transform;
+}
+
+.pswp__share-tooltip a {
+    display: block;
+    padding: 8px 12px;
+    color: #000;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.pswp__share-tooltip a:hover {
+    text-decoration: none;
+    color: #000;
+}
+
+.pswp__share-tooltip a:first-child {
+    /* round corners on the first/last list item */
+    border-radius: 2px 2px 0 0;
+}
+
+.pswp__share-tooltip a:last-child {
+    border-radius: 0 0 2px 2px;
+}
+
+.pswp__share-modal--fade-in {
+    opacity: 1;
+}
+
+.pswp__share-modal--fade-in .pswp__share-tooltip {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+}
+
+/* increase size of share links on touch devices */
+.pswp--touch .pswp__share-tooltip a {
+    padding: 16px 12px;
+}
+
+a.pswp__share--facebook:before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: -12px;
+    right: 15px;
+    border: 6px solid transparent;
+    border-bottom-color: #FFF;
+    -webkit-pointer-events: none;
+    -moz-pointer-events: none;
+    pointer-events: none;
+}
+
+a.pswp__share--facebook:hover {
+    background: #3E5C9A;
+    color: #FFF;
+}
+
+a.pswp__share--facebook:hover:before {
+    border-bottom-color: #3E5C9A;
+}
+
+a.pswp__share--twitter:hover {
+    background: #55ACEE;
+    color: #FFF;
+}
+
+a.pswp__share--pinterest:hover {
+    background: #CCC;
+    color: #CE272D;
+}
+
+a.pswp__share--download:hover {
+    background: #DDD;
+}
+
+/*
+	3. Index indicator ("1 of X" counter)
+ */
+.pswp__counter {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 44px;
+    font-size: 13px;
+    line-height: 44px;
+    color: #FFF;
+    opacity: 0.75;
+    padding: 0 10px;
+}
+
+/*
+	
+	4. Caption
+ */
+.pswp__caption {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    min-height: 44px;
+}
+
+.pswp__caption small {
+    font-size: 11px;
+    color: #BBB;
+}
+
+.pswp__caption__center {
+    text-align: left;
+    max-width: 420px;
+    margin: 0 auto;
+    font-size: 13px;
+    padding: 10px;
+    line-height: 20px;
+    color: #CCC;
+}
+
+.pswp__caption--empty {
+    display: none;
+}
+
+/* Fake caption element, used to calculate height of next/prev image */
+.pswp__caption--fake {
+    visibility: hidden;
+}
+
+/*
+	5. Loading indicator (preloader)
+	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+ */
+.pswp__preloader {
+    width: 44px;
+    height: 44px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -22px;
+    opacity: 0;
+    -webkit-transition: opacity 0.25s ease-out;
+    transition: opacity 0.25s ease-out;
+    will-change: opacity;
+    direction: ltr;
+}
+
+.pswp__preloader__icn {
+    width: 20px;
+    height: 20px;
+    margin: 12px;
+}
+
+.pswp__preloader--active {
+    opacity: 1;
+}
+
+.pswp__preloader--active .pswp__preloader__icn {
+    /* We use .gif in browsers that don't support CSS animation */
+    background: url(/images/photoswipe/preloader.gif) 0 0 no-repeat;
+}
+
+.pswp--css_animation .pswp__preloader--active {
+    opacity: 1;
+}
+
+.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
+    -webkit-animation: clockwise 500ms linear infinite;
+    animation: clockwise 500ms linear infinite;
+}
+
+.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
+    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
+    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
+}
+
+.pswp--css_animation .pswp__preloader__icn {
+    background: none;
+    opacity: 0.75;
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    margin: 0;
+}
+
+.pswp--css_animation .pswp__preloader__cut {
+    /* 
+			The idea of animating inner circle is based on Polymer ("material") loading indicator 
+			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+		*/
+    position: relative;
+    width: 7px;
+    height: 14px;
+    overflow: hidden;
+}
+
+.pswp--css_animation .pswp__preloader__donut {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #FFF;
+    border-radius: 50%;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: none;
+    margin: 0;
+}
+
+@media screen and (max-width: 1024px) {
+    .pswp__preloader {
+        position: relative;
+        left: auto;
+        top: auto;
+        margin: 0;
+        float: right;
+    }
+}
+
+@-webkit-keyframes clockwise {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes clockwise {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes donut-rotate {
+    0% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    50% {
+        -webkit-transform: rotate(-140deg);
+        transform: rotate(-140deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+}
+
+@keyframes donut-rotate {
+    0% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    50% {
+        -webkit-transform: rotate(-140deg);
+        transform: rotate(-140deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+}
+
+/*
+	
+	6. Additional styles
+ */
+/* root element of UI */
+.pswp__ui {
+    -webkit-font-smoothing: auto;
+    visibility: visible;
+    opacity: 1;
+    z-index: 1550;
+}
+
+/* top black bar with buttons and "1 of X" indicator */
+.pswp__top-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 44px;
+    width: 100%;
+}
+
+.pswp__caption,
+.pswp__top-bar,
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+    -webkit-backface-visibility: hidden;
+    will-change: opacity;
+    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+}
+
+/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+    visibility: visible;
+}
+
+.pswp__top-bar,
+.pswp__caption {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
+.pswp__ui--fit .pswp__top-bar,
+.pswp__ui--fit .pswp__caption {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
+.pswp__ui--idle .pswp__top-bar {
+    opacity: 0;
+}
+
+.pswp__ui--idle .pswp__button--arrow--left,
+.pswp__ui--idle .pswp__button--arrow--right {
+    opacity: 0;
+}
+
+/*
+	pswp__ui--hidden class is added when controls are hidden
+	e.g. when user taps to toggle visibility of controls
+*/
+.pswp__ui--hidden .pswp__top-bar,
+.pswp__ui--hidden .pswp__caption,
+.pswp__ui--hidden .pswp__button--arrow--left,
+.pswp__ui--hidden .pswp__button--arrow--right {
+    /* Force paint & create composition layer for controls. */
+    opacity: 0.001;
+}
+
+/* pswp__ui--one-slide class is added when there is just one item in gallery */
+.pswp__ui--one-slide .pswp__button--arrow--left,
+.pswp__ui--one-slide .pswp__button--arrow--right,
+.pswp__ui--one-slide .pswp__counter {
+    display: none;
+}
+
+.pswp__element--disabled {
+    display: none !important;
+}
+
+.pswp--minimal--dark .pswp__top-bar {
+    background: none;
+}
--- a/assets/css/photoswipe/photoswipe.css
+++ b/assets/css/photoswipe/photoswipe.css
@ -0,0 +1,204 @@
+/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
+/*
+	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
+*/
+/* pswp = photoswipe */
+.pswp {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    -ms-touch-action: none;
+    touch-action: none;
+    z-index: 1500;
+    -webkit-text-size-adjust: 100%;
+    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
+    -webkit-backface-visibility: hidden;
+    outline: none;
+}
+
+.pswp * {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.pswp img {
+    max-width: none;
+}
+
+/* style is added when JS option showHideOpacity is set to true */
+.pswp--animate_opacity {
+    /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
+    opacity: 0.001;
+    will-change: opacity;
+    /* for open/close transition */
+    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+}
+
+.pswp--open {
+    display: block;
+}
+
+.pswp--zoom-allowed .pswp__img {
+    /* autoprefixer: off */
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+
+.pswp--zoomed-in .pswp__img {
+    /* autoprefixer: off */
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}
+
+.pswp--dragging .pswp__img {
+    /* autoprefixer: off */
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}
+
+/*
+	Background is added as a separate element.
+	As animating opacity is much faster than animating rgba() background-color.
+*/
+.pswp__bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    will-change: opacity;
+}
+
+.pswp__scroll-wrap {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.pswp__container,
+.pswp__zoom-wrap {
+    -ms-touch-action: none;
+    touch-action: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+}
+
+.pswp__zoom-wrap {
+    position: absolute;
+    width: 100%;
+    -webkit-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform-origin: left top;
+    /* for open/close transition */
+    -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
+    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
+}
+
+.pswp__bg {
+    will-change: opacity;
+    /* for open/close transition */
+    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+}
+
+.pswp--animated-in .pswp__bg,
+.pswp--animated-in .pswp__zoom-wrap {
+    -webkit-transition: none;
+    transition: none;
+}
+
+.pswp__container,
+.pswp__zoom-wrap {
+    -webkit-backface-visibility: hidden;
+}
+
+.pswp__item {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+}
+
+.pswp__img {
+    position: absolute;
+    width: auto;
+    height: auto;
+    top: 0;
+    left: 0;
+}
+
+/*
+	stretched thumbnail or div placeholder element (see below)
+	style is added to avoid flickering in webkit/blink when layers overlap
+*/
+.pswp__img--placeholder {
+    -webkit-backface-visibility: hidden;
+}
+
+/*
+	div element that matches size of large image
+	large image loads on top of it
+*/
+.pswp__img--placeholder--blank {
+    background: #222;
+}
+
+.pswp--ie .pswp__img {
+    width: 100% !important;
+    height: auto !important;
+    left: 0;
+    top: 0;
+}
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    line-height: 16px;
+    margin-top: -8px;
+    color: #CCC;
+}
+
+.pswp__error-msg a {
+    color: #CCC;
+    text-decoration: underline;
+}
--- a/assets/js/clipboard.min.js
+++ b/assets/js/clipboard.min.js
--- a/assets/js/enquire.min.js
+++ b/assets/js/enquire.min.js
@ -0,0 +1,6 @@
+/*!
+ * enquire.js v2.1.6 - Awesome Media Queries in JavaScript
+ * Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/enquire.js
+ * License: MIT */
+
+!function (a) { if ("object" == typeof exports && "undefined" != typeof module) module.exports = a(); else if ("function" == typeof define && define.amd) define([], a); else { var b; b = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : this, b.enquire = a() } }(function () { return function a(b, c, d) { function e(g, h) { if (!c[g]) { if (!b[g]) { var i = "function" == typeof require && require; if (!h && i) return i(g, !0); if (f) return f(g, !0); var j = new Error("Cannot find module '" + g + "'"); throw j.code = "MODULE_NOT_FOUND", j } var k = c[g] = { exports: {} }; b[g][0].call(k.exports, function (a) { var c = b[g][1][a]; return e(c ? c : a) }, k, k.exports, a, b, c, d) } return c[g].exports } for (var f = "function" == typeof require && require, g = 0; g < d.length; g++)e(d[g]); return e }({ 1: [function (a, b, c) { function d(a, b) { this.query = a, this.isUnconditional = b, this.handlers = [], this.mql = window.matchMedia(a); var c = this; this.listener = function (a) { c.mql = a.currentTarget || a, c.assess() }, this.mql.addListener(this.listener) } var e = a(3), f = a(4).each; d.prototype = { constuctor: d, addHandler: function (a) { var b = new e(a); this.handlers.push(b), this.matches() && b.on() }, removeHandler: function (a) { var b = this.handlers; f(b, function (c, d) { if (c.equals(a)) return c.destroy(), !b.splice(d, 1) }) }, matches: function () { return this.mql.matches || this.isUnconditional }, clear: function () { f(this.handlers, function (a) { a.destroy() }), this.mql.removeListener(this.listener), this.handlers.length = 0 }, assess: function () { var a = this.matches() ? "on" : "off"; f(this.handlers, function (b) { b[a]() }) } }, b.exports = d }, { 3: 3, 4: 4 }], 2: [function (a, b, c) { function d() { if (!window.matchMedia) throw new Error("matchMedia not present, legacy browsers require a polyfill"); this.queries = {}, this.browserIsIncapable = !window.matchMedia("only all").matches } var e = a(1), f = a(4), g = f.each, h = f.isFunction, i = f.isArray; d.prototype = { constructor: d, register: function (a, b, c) { var d = this.queries, f = c && this.browserIsIncapable; return d[a] || (d[a] = new e(a, f)), h(b) && (b = { match: b }), i(b) || (b = [b]), g(b, function (b) { h(b) && (b = { match: b }), d[a].addHandler(b) }), this }, unregister: function (a, b) { var c = this.queries[a]; return c && (b ? c.removeHandler(b) : (c.clear(), delete this.queries[a])), this } }, b.exports = d }, { 1: 1, 4: 4 }], 3: [function (a, b, c) { function d(a) { this.options = a, !a.deferSetup && this.setup() } d.prototype = { constructor: d, setup: function () { this.options.setup && this.options.setup(), this.initialised = !0 }, on: function () { !this.initialised && this.setup(), this.options.match && this.options.match() }, off: function () { this.options.unmatch && this.options.unmatch() }, destroy: function () { this.options.destroy ? this.options.destroy() : this.off() }, equals: function (a) { return this.options === a || this.options.match === a } }, b.exports = d }, {}], 4: [function (a, b, c) { function d(a, b) { var c = 0, d = a.length; for (c; c < d && b(a[c], c) !== !1; c++); } function e(a) { return "[object Array]" === Object.prototype.toString.apply(a) } function f(a) { return "function" == typeof a } b.exports = { isFunction: f, isArray: e, each: d } }, {}], 5: [function (a, b, c) { var d = a(2); b.exports = new d }, { 2: 2 }] }, {}, [5])(5) });
--- a/assets/js/fetch-inject.umd.min.js
+++ b/assets/js/fetch-inject.umd.min.js
@ -0,0 +1,2 @@
+/*! Fetch Inject v2.0.4 | Copyright (C) Josh Habdas <jhabdas@protonmail.com> (https://habd.as) | @license Zlib */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).fetchInject=t()}(this,function(){"use strict";const e=function(e,t,n,r,o,c,i){c=t.createElement(n),i=t.getElementsByTagName(n)[0],c.appendChild(t.createTextNode(r.text)),c.onload=o(r),i?i.parentNode.insertBefore(c,i):t.head.appendChild(c)};return function(t,n){if(!arguments.length)return Promise.reject(new ReferenceError("Failed to execute 'fetchInject': 1 argument required but only 0 present."));if(arguments[0]&&arguments[0].constructor!==Array)return Promise.reject(new TypeError("Failed to execute 'fetchInject': argument 1 must be of type 'Array'."));if(arguments[1]&&arguments[1].constructor!==Promise)return Promise.reject(new TypeError("Failed to execute 'fetchInject': argument 2 must be of type 'Promise'."));const r=[],o=n?[].concat(n):[],c=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>[e.clone().text(),e.blob()]).then(e=>Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})))),Promise.all(o).then(()=>(r.forEach(t=>{c.push({then:n=>{t.blob.type.includes("text/css")?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(c)))}});
--- a/assets/js/imagesloaded.pkgd.min.js
+++ b/assets/js/imagesloaded.pkgd.min.js
--- a/assets/js/jquery.mark.min.js
+++ b/assets/js/jquery.mark.min.js
--- a/assets/js/jquery.min.js
+++ b/assets/js/jquery.min.js
--- a/assets/js/jquery.shave.min.js
+++ b/assets/js/jquery.shave.min.js
@ -0,0 +1,8 @@
+/**
+  shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
+  @version v2.5.6
+  @link https://github.com/dollarshaveclub/shave#readme
+  @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
+  @license MIT
+**/
+!function (e) { "function" == typeof define && define.amd ? define(e) : e() }(function () { "use strict"; if ("undefined" != typeof window) { var e = window.$ || window.jQuery || window.Zepto; e && (e.fn.shave = function (e, t) { return function (e, t) { var n = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {}; if (void 0 === t || isNaN(t)) throw Error("maxHeight is required"); var i = "string" == typeof e ? document.querySelectorAll(e) : e; if (i) { var a = n.character || "…", o = n.classname || "js-shave", r = "boolean" != typeof n.spaces || n.spaces, s = '<span class="js-shave-char">'.concat(a, "</span>"); "length" in i || (i = [i]); for (var c = 0; c < i.length; c += 1) { var h = i[c], d = h.style, l = h.querySelector(".".concat(o)), f = void 0 === h.textContent ? "innerText" : "textContent"; l && (h.removeChild(h.querySelector(".js-shave-char")), h[f] = h[f]); var v = h[f], g = r ? v.split(" ") : v; if (!(g.length < 2)) { var u = d.height; d.height = "auto"; var p = d.maxHeight; if (d.maxHeight = "none", h.offsetHeight <= t) d.height = u, d.maxHeight = p; else { for (var m = g.length - 1, y = 0, j = void 0; y < m;)j = y + m + 1 >> 1, h[f] = r ? g.slice(0, j).join(" ") : g.slice(0, j), h.insertAdjacentHTML("beforeend", s), h.offsetHeight > t ? m = j - 1 : y = j; h[f] = r ? g.slice(0, m).join(" ") : g.slice(0, m), h.insertAdjacentHTML("beforeend", s); var w = r ? " ".concat(g.slice(m).join(" ")) : g.slice(m), x = document.createTextNode(w), H = document.createElement("span"); H.classList.add(o), H.style.display = "none", H.appendChild(x), h.insertAdjacentElement("beforeend", H), d.height = u, d.maxHeight = p } } } } }(this, e, t), this }) } });
--- a/assets/js/jquery.toc.min.js
+++ b/assets/js/jquery.toc.min.js
@ -0,0 +1,2 @@
+/*! Table of Contents jQuery Plugin - jquery.toc * Copyright (c) 2013-2016 Nikhil Dabas * http://www.apache.org/licenses/LICENSE-2.0 */
+!function(a){"use strict";var b=function(b){return this.each(function(){var c,d,e=a(this),f=e.data(),g=[e],h=this.tagName,i=0;c=a.extend({content:"body",headings:"h1,h2,h3"},{content:f.toc||void 0,headings:f.tocHeadings||void 0},b),d=c.headings.split(","),a(c.content).find(c.headings).attr("id",function(b,c){var d=function(a){0===a.length&&(a="?");for(var b=a.replace(/\s+/g,"_"),c="",d=1;null!==document.getElementById(b+c);)c="_"+d++;return b+c};return c||d(a(this).text())}).each(function(){var b=a(this),c=a.map(d,function(a,c){return b.is(a)?c:void 0})[0];if(c>i){var e=g[0].children("li:last")[0];e&&g.unshift(a("<"+h+"/>").appendTo(e))}else g.splice(0,Math.min(i-c,Math.max(g.length-1,0)));a("<li/>").appendTo(g[0]).append(a("<a/>").text(b.text()).attr("href","#"+b.attr("id"))),i=c})})},c=a.fn.toc;a.fn.toc=b,a.fn.toc.noConflict=function(){return a.fn.toc=c,this},a(function(){b.call(a("[data-toc]"))})}(window.jQuery);
--- a/assets/js/lazysizes.min.js
+++ b/assets/js/lazysizes.min.js
--- a/assets/js/lunr.min.js
+++ b/assets/js/lunr.min.js
--- a/assets/js/masonry.pkgd.min.js
+++ b/assets/js/masonry.pkgd.min.js
--- a/assets/js/perfect-scrollbar.jquery.min.js
+++ b/assets/js/perfect-scrollbar.jquery.min.js
--- a/assets/js/photoswipe-ui-default.min.js
+++ b/assets/js/photoswipe-ui-default.min.js
--- a/assets/js/photoswipe.min.js
+++ b/assets/js/photoswipe.min.js
--- a/assets/js/prism.min.js
+++ b/assets/js/prism.min.js
--- a/assets/js/zzo.js
+++ b/assets/js/zzo.js
@ -0,0 +1,87 @@
+
+
+$(document).ready(function() {  
+  // scroll
+  var position = $(window).scrollTop();
+  $(window).scroll(function () {
+    var navbar = $('.navbar');
+
+    var scroll = $(window).scrollTop();
+    if (scroll > position) { // scroll down 
+      if (!navbar.hasClass('navbar--hide')) {
+        navbar.addClass('navbar--hide');
+      } else if (navbar.hasClass('navbar--show')) {
+        navbar.removeClass('navbar--show');
+      }
+      
+      $(".single__contents :header").each(function () {
+        if ($(window).scrollTop() >= $(this).position().top) {
+          var id = $(this).attr('id');
+          $('.toc a').removeClass('active');
+          $('.toc a[href="#' + id + '"]').addClass('active');
+
+          $('#toc > li').each(function () {
+            $(this).find('ul').css('display', 'none');
+          });
+          $(`#toc [href="#${id}"]`).next().css('display', 'block');
+          $(`#toc [href="#${id}"]`).parents('ul').css('display', 'block');
+        }
+      });
+    } else { // scroll up
+      var navbar = $('.navbar');
+      if (navbar.hasClass('navbar--hide')) {
+        navbar.removeClass('navbar--hide');
+      } else if (!navbar.hasClass('navbar--show')) {
+        navbar.addClass('navbar--show');
+      }
+
+      $(".single__contents :header").each(function () {
+        if ($(window).scrollTop() >= $(this).position().top) {
+          var id = $(this).attr('id');
+          $('.toc a').removeClass('active');
+          $('.toc a[href="#' + id + '"]').addClass('active');
+
+          $('#toc > li').each(function () {
+            $(this).find('ul').css('display', 'none');
+          });
+          $(`#toc [href="#${id}"]`).next().css('display', 'block');
+          $(`#toc [href="#${id}"]`).parents('ul').css('display', 'block');
+        }
+      });
+    }
+    position = scroll;
+  });
+  
+  // media query
+  enquire.register("screen and (max-width:769px)", {
+    match: function () {
+      $('main').removeClass('main-main').removeClass('main').addClass('main');
+      $('aside').removeClass('main-side').removeClass('hide').addClass('hide');      
+    },
+    unmatch: function () {      
+      if ($('aside').length > 0) {
+        $('main').removeClass('main-main').removeClass('main').addClass('main-main');
+        $('aside').removeClass('main-side').removeClass('hide').addClass('main-side');
+      }
+      $('.navbar__burger').removeClass('is-active');
+      $('.navbar__menu').removeClass('is-active');
+    },
+    setup: function () { },
+    deferSetup: true,
+    destroy: function () { },
+  });
+
+  // navbar
+  $('.navbar__burger').click(function() {
+    if ($(this).hasClass('is-active')) {
+      $(this).removeClass('is-active');
+      $('.navbar__menu').removeClass('is-active');
+    } else {
+      $(this).addClass('is-active');
+      $('.navbar__menu').addClass('is-active');
+    }
+  });
+
+  // truncate
+  $('.summary__text').shave(160);
+});
--- a/assets/sass/abstracts/_flexbox.scss
+++ b/assets/sass/abstracts/_flexbox.scss
@ -0,0 +1,138 @@
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+
+// Flexbox display
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($values) {
+  -webkit-box-flex: $values;
+     -moz-box-flex: $values;
+      -webkit-flex: $values;
+  	  -ms-flex: $values;
+  	      flex: $values;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+@mixin flex-direction($direction) {
+  -webkit-flex-direction: $direction;
+     -moz-flex-direction: $direction;
+      -ms-flex-direction: $direction;
+          flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($wrap) {
+  -webkit-flex-wrap: $wrap;
+     -moz-flex-wrap: $wrap;
+      -ms-flex-wrap: $wrap;
+          flex-wrap: $wrap;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($flow) {
+  -webkit-flex-flow: $flow;
+     -moz-flex-flow: $flow;
+      -ms-flex-flow: $flow;
+          flex-flow: $flow;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($val) {
+  -webkit-box-ordinal-group: $val;  
+     -moz-box-ordinal-group: $val;     
+  	     -ms-flex-order: $val;     
+  	      -webkit-order: $val;  
+  		      order: $val;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($grow) {
+  -webkit-flex-grow: $grow;
+     -moz-flex-grow: $grow;
+      -ms-flex-grow: $grow;
+          flex-grow: $grow;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number> 
+@mixin flex-shrink($shrink) {
+  -webkit-flex-shrink: $shrink;
+     -moz-flex-shrink: $shrink;
+      -ms-flex-shrink: $shrink;
+          flex-shrink: $shrink;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width> 
+@mixin flex-basis($width) {
+  -webkit-flex-basis: $width;
+     -moz-flex-basis: $width;
+      -ms-flex-basis: $width;
+          flex-basis: $width;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around 
+@mixin justify-content($justify) {
+  -webkit-justify-content: $justify;
+     -moz-justify-content: $justify;
+      -ms-justify-content: $justify;
+          justify-content: $justify;
+            -ms-flex-pack: $justify;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch 
+@mixin align-content($align) {
+  -webkit-align-content: $align;
+     -moz-align-content: $align;
+      -ms-align-content: $align;
+          align-content: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch 
+@mixin align-items($align) {
+  -webkit-align-items: $align;
+     -moz-align-items: $align;
+      -ms-align-items: $align;
+       -ms-flex-align: $align;
+          align-items: $align;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch 
+@mixin align-self($align) {
+  -webkit-align-self: $align;
+     -moz-align-self: $align;
+      -ms-align-self: $align;
+          align-self: $align;
+}
--- a/assets/sass/abstracts/_functions.scss
+++ b/assets/sass/abstracts/_functions.scss
@ -0,0 +1,17 @@
+@function z($name) {
+  @if index($z-indexes, $name) {
+    @return (length($z-indexes) - index($z-indexes, $name)) + 1;
+  } @else {
+    @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
+    @return null;
+  }
+}
+
+@function ls($name) {
+  $value: map_get($ls, $name);
+  @return $value / 1000 * 1em;
+}
+
+@function themed($key) {   
+    @return map-get($theme-map, $key);
+}
--- a/assets/sass/abstracts/_mixins.scss
+++ b/assets/sass/abstracts/_mixins.scss
@ -0,0 +1,207 @@
+@mixin themify($themes) {
+  @each $theme, $map in $themes {
+    .theme__#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@mixin respond-to($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+}
+
+@mixin pseudo($display: block, $pos: absolute, $content: "") {
+  content: $content;
+  display: $display;
+  position: $pos;
+}
+
+@mixin responsive-ratio($x, $y, $pseudo: false) {
+  $padding: unquote(($y / $x) * 100 + "%");
+  @if $pseudo {
+    &:before {
+      @include pseudo($pos: relative);
+      width: 100%;
+      padding-top: $padding;
+    }
+  } @else {
+    padding-top: $padding;
+  }
+}
+
+@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) {
+  @include pseudo($pos: $position);
+  width: 0;
+  height: 0;
+  @if $round {
+    border-radius: 3px;
+  }
+  @if $direction == down {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $color;
+    margin-top: 0 - round($size / 2.5);
+  } @else if $direction == up {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-bottom: $size solid $color;
+    margin-bottom: 0 - round($size / 2.5);
+  } @else if $direction == right {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    margin-right: -$size;
+  } @else if $direction == left {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    margin-left: -$size;
+  }
+}
+
+@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) {
+  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+  @if $size {
+    font-size: $size;
+  }
+  @if $colour {
+    color: $colour;
+  }
+  @if $weight {
+    font-weight: $weight;
+  }
+  @if $lh {
+    line-height: $lh;
+  }
+}
+
+@mixin input-placeholder {
+  &.placeholder {
+    @content;
+  }
+  &:-moz-placeholder {
+    @content;
+  }
+  &::-moz-placeholder {
+    @content;
+  }
+  &:-ms-input-placeholder {
+    @content;
+  }
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+@mixin truncate($truncation-boundary) {
+  max-width: $truncation-boundary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow: inset $top $left $blur $size $color;
+    -moz-box-shadow: inset $top $left $blur $size $color;
+    box-shadow: inset $top $left $blur $size $color;
+  } @else {
+    -webkit-box-shadow: $top $left $blur $size $color;
+    -moz-box-shadow: $top $left $blur $size $color;
+    box-shadow: $top $left $blur $size $color;
+  }
+}
+
+@mixin on-event($self: false) {
+  @if $self {
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      @content;
+    }
+  } @else {
+    &:hover,
+    &:active,
+    &:focus {
+      @content;
+    }
+  }
+}
+
+@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
+  -webkit-transition: $what $time $how;
+  -moz-transition: $what $time $how;
+  -ms-transition: $what $time $how;
+  -o-transition: $what $time $how;
+  transition: $what $time $how;
+}
+
+// Browser Prefixes
+@mixin transform($transforms) {
+  -webkit-transform: $transforms;
+  -moz-transform: $transforms;
+  -ms-transform: $transforms;
+  transform: $transforms;
+}
+
+// Rotate
+@mixin rotate($deg) {
+  @include transform(rotate(#{$deg}deg));
+}
+
+// Scale
+@mixin scale($scale) {
+  @include transform(scale($scale));
+}
+
+@mixin scaleX($scale) {
+  @include transform(scaleX($scale));
+}
+
+@mixin scaleY($scale) {
+  @include transform(scaleY($scale));
+}
+
+// Translate
+@mixin translate($x, $y) {
+  @include transform(translate($x, $y));
+}
+
+@mixin translateX($x) {
+  @include transform(translateX($x));
+}
+
+@mixin translateY($y) {
+  @include transform(translateY($y));
+}
+
+// Skew
+@mixin skew($x, $y) {
+  @include transform(skew(#{$x}deg, #{$y}deg));
+}
+
+// Transform Origin
+@mixin transform-origin($origin) {
+  -webkit-transform-origin: $origin;
+  -moz-transform-origin: $origin;
+  -ms-transform-origin: $origin;
+  transform-origin: $origin;
+}
--- a/assets/sass/abstracts/_variables.scss
+++ b/assets/sass/abstracts/_variables.scss
@ -0,0 +1,27 @@
+@import "../themes/theme";
+
+$text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+  "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter",
+  "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
+  monospace !default;
+
+$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer");
+$ls: (
+  base: -10,
+  heading: 10,
+  button: 5,
+  slogan: -100
+);
+$breakpoints: (
+  'xs': 0,
+  'sm': 769px,
+  'md': 960px,
+  'lg': 1280px,
+  'xl': 1960px,
+);
+
+$max-width: 960px !default;
+$nav-height: 50px !default;
+$search-height: 35px !default;
+$main-main-width: 640px !default;
--- a/assets/sass/base/_fonts.scss
+++ b/assets/sass/base/_fonts.scss
@ -0,0 +1,74 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 26, 2019 */
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../fonts/montserrat-regular.woff2') format('woff2'),
+         url('../fonts/montserrat-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../fonts/montserrat-bold.woff2') format('woff2'),
+         url('../fonts/montserrat-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../fonts/montserrat-black.woff2') format('woff2'),
+         url('../fonts/montserrat-black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    src: url('../fonts/merriweather-regular.woff2') format('woff2'),
+         url('../fonts/merriweather-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    src: url('../fonts/merriweather-italic.woff2') format('woff2'),
+         url('../fonts/merriweather-italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    src: url('../fonts/merriweather-bold.woff2') format('woff2'),
+         url('../fonts/merriweather-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    src: url('../fonts/merriweather-bolditalic.woff2') format('woff2'),
+         url('../fonts/merriweather-bolditalic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Merriweather';
+    src: url('../fonts/merriweather-black.woff2') format('woff2'),
+         url('../fonts/merriweather-black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
--- a/assets/sass/base/_helpers.scss
+++ b/assets/sass/base/_helpers.scss
@ -0,0 +1,62 @@
+// -----------------------------------------------------------------------------
+// This file contains CSS helper classes.
+// -----------------------------------------------------------------------------
+
+/**
+ * Clear inner floats
+ */
+.clearfix::after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+/**
+ * Main content containers
+ * 1. Make the container full-width with a maximum width
+ * 2. Center it in the viewport
+ * 3. Leave some space on the edges, especially valuable on small screens
+ */
+.container {
+  max-width: $max-width; /* 1 */
+  margin-left: auto; /* 2 */
+  margin-right: auto; /* 2 */
+  width: 100%; /* 1 */
+  min-height: 100vh;
+  position: relative;
+  @include themify($themes) {
+    background-color: themed('body-background-color');
+  }
+ }
+
+/**
+ * Hide text while making it readable for screen readers
+ * 1. Needed in WebKit-based browsers because of an implementation bug;
+ *    See: https://code.google.com/p/chromium/issues/detail?id=457146
+ */
+.hide-text {
+  overflow: hidden;
+  padding: 0; /* 1 */
+  text-indent: 101%;
+  white-space: nowrap;
+}
+
+/**
+ * Hide element while making it readable for screen readers
+ * Shamelessly borrowed from HTML5Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.hide {
+  display: none;
+}
--- a/assets/sass/base/_reset.scss
+++ b/assets/sass/base/_reset.scss
@ -0,0 +1,139 @@
+// -----------------------------------------------------------------------------
+// This file contains very basic styles.
+// -----------------------------------------------------------------------------
+
+/**
+ * Set up a decent box model on the root element
+ */
+html {
+  box-sizing: border-box;
+}
+
+/**
+ * Make all elements from the DOM inherit from the parent box-sizing
+ * Since `*` has a specificity of 0, it does not override the `html` value
+ * making all elements inheriting from the root box-sizing value
+ * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/**
+ * Basic styles for links
+ */
+a {
+  @include themify($themes) {
+    text-decoration: none;
+    color: themed("link");
+
+    @include on-event {
+      color: themed("link-hover");
+      text-decoration: underline;
+    }
+  }
+}
+
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+// List
+ul {
+  list-style: none;
+}
+
+// Form
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+
+// Media
+img,
+video {
+  height: auto;
+  max-width: 100%;
+  object-fit: inherit;
+}
+
+// Iframe
+iframe {
+  border: 0;
+}
+
+// Table
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+  &:not([align]) {
+    text-align: left;
+  }
+}
+
+mark {
+  @include themify($themes) {
+    color: themed("mark-color");
+    background-color: themed("mark-background-color");
+  }
+}
+
+figcaption {  
+  font-style: italic;
+  font-size: 0.9rem;
+  @include themify($themes) {
+    color: themed("figcaption-color");
+    strong {
+      color: themed("figcaption-strong-color");
+    }
+  }
+}
+
+::-moz-selection {
+  /* Code for Firefox */
+  @include themify($themes) {
+    color: themed("mark-color");
+    background: themed("mark-background-color");
+  }
+}
+
+::selection {
+  @include themify($themes) {
+    color: themed("mark-color");
+    background: themed("mark-background-color");
+  }
+}
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@ -0,0 +1,47 @@
+/**
+ * Basic typography style for copy text
+ */
+body {
+  font: normal 125% / 1.4 $text-font-stack;
+}
+
+code,
+pre {
+  font: normal 125% / 1.8 $code-font-stack;
+}
+
+.h1 {
+  font-size: 4rem;
+}
+
+.h2 {
+  font-size: 3.5rem;
+}
+
+.h3 {
+  font-size: 3rem;
+}
+
+.h4 {
+  font-size: 2.5rem;
+}
+
+.h5 {
+  font-size: 2rem;
+}
+
+.h6 {
+  font-size: 1.5rem;
+}
+
+.p1 {
+  font-size: 1.2rem;
+}
+
+.p2 {
+  font-size: 1rem;
+}
+
+.caption {
+  font-size: 0.8rem;
+}
--- a/assets/sass/components/_alert.scss
+++ b/assets/sass/components/_alert.scss
@ -0,0 +1,30 @@
+.alert {
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.125rem;
+
+    &-info {
+        background-color: #d7eef9;
+        border: 2px solid #b2def4;
+        color: rgba(26, 128, 180, 0.9925);
+    }
+
+    &-success {
+        background-color: #d9efd6;
+        border: 2px solid #bce3b5;
+        color: rgba(70, 149, 57, 0.9925);
+    }
+
+    &-warning {
+        background-color: #fbf6e1;
+        border: 2px solid #f6ecbe;
+        color: rgba(180, 154, 26, 0.9925);
+    }
+
+    &-danger {
+        background-color: #f5dddd;
+        border: 2px solid #ecbdbd;
+        color: rgba(159, 46, 46, 0.9925);
+    }
+}
--- a/assets/sass/components/_attachment.scss
+++ b/assets/sass/components/_attachment.scss
@ -0,0 +1,57 @@
+section.attachments {
+    margin: 2rem 0;
+    position: relative;
+}
+
+section.attachments label {
+    font-weight: 400;
+    padding-left: 0.5em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+}
+
+section.attachments .attachments-files {
+    padding: 15px;
+    display: block;
+    font-size: 1rem;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+    color: #666;
+}
+
+section.attachments.orange label {
+    color: #fff;
+    background: #F0B37E;
+}
+
+section.attachments.orange .attachments-files {
+    background: #FFF2DB;
+}
+
+section.attachments.green label {
+    color: #fff;
+    background: rgba(92, 184, 92, 0.8);
+}
+
+section.attachments.green .attachments-files {
+    background: #E6F9E6;
+}
+
+section.attachments.blue label {
+    color: #fff;
+    background: #6AB0DE;
+}
+
+section.attachments.blue .attachments-files {
+    background: #E7F2FA;
+}
+
+section.attachments.grey label {
+    color: #fff;
+    background: #505d65;
+}
+
+section.attachments.grey .attachments-files {
+    background: #f4f4f4;
+}
--- a/assets/sass/components/_breadcrumb.scss
+++ b/assets/sass/components/_breadcrumb.scss
@ -0,0 +1,49 @@
+.breadcrumb {
+  margin: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  padding: auto;
+
+  @include truncate(100%);
+  @include themify($themes) {
+    background-color: themed('breadcrumb-background-color');
+  }   
+
+  ol {
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  li {
+    display: inline;
+    font-size: 1rem;
+    
+    a {
+      font-size: 0.9rem;
+      @include themify($themes) {
+        color: themed('breadcrumb-item-color');
+        @include on-event {
+          color: themed('link-hover');
+        }
+      }      
+    }    
+
+    &:last-child {
+      a {
+        @include themify($themes) {
+          color: themed('breadcrumb-item-active-color');
+        }
+        text-decoration: none;
+        cursor: default;
+      }      
+    }       
+  }
+
+  li+li:before {
+    padding: 0.5rem;    
+    content: "/\00a0";
+    @include themify($themes) {
+      color: themed('breadcrumb-item-color');
+    }
+  }
+}
--- a/assets/sass/components/_buttons.scss
+++ b/assets/sass/components/_buttons.scss
--- a/assets/sass/components/_expand.scss
+++ b/assets/sass/components/_expand.scss
@ -0,0 +1,25 @@
+.expand {
+  position: relative;
+  &-label {
+    cursor: pointer;
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  &-content {
+    display: none;
+  }
+
+  &-icon {    
+    padding-top: 0.4rem;
+    padding-right: 0.125rem;
+    @include transition(all, 0.1s, ease);
+    &__down {     
+      @include rotate(90);
+    }
+
+    &__right {
+      @include rotate(0);
+    }
+  }
+}
--- a/assets/sass/components/_notice.scss
+++ b/assets/sass/components/_notice.scss
@ -0,0 +1,73 @@
+div.notices {
+    margin: 2rem 0;
+    position: relative;
+
+    border-radius: .2rem;
+    color: #fff;
+    padding: .5rem 1rem .5rem 2rem;
+    position: relative
+}
+
+div.notices p {
+    padding: 0px;
+    display: block;
+    font-size: 1rem;
+    margin-top: 0rem;
+    margin-bottom: 0rem;
+}
+
+div.notices p:first-child:before {
+    position: absolute;
+    top: -27px;
+    color: #fff;
+    font-family: FontAwesome;
+    content: '💡';
+    left: 10px;
+}
+
+div.notices p:first-child:after {
+    position: absolute;
+    top: -27px;
+    color: #fff;
+    left: 2rem;
+}
+
+div.notices.info p:first-child:after {
+    content: 'Info';
+}
+
+div.notices.warning p:first-child:after {
+    content: 'Warning';
+}
+
+div.notices.note p:first-child:after {
+    content: 'Note';
+}
+
+div.notices.tip p:first-child:after {
+    content: 'Tip';
+}
+
+div.notices.note {
+    border-top: 30px solid #6bb1e0;
+    background: #e6f3fb;
+    color: rgba(47, 103, 141, 0.995) !important;
+}
+
+div.notices.info {
+    border-top: 30px solid #f1b37e;
+    background: #fefaf5;
+    color: rgba(150, 90, 38, 0.995) !important;
+}
+
+div.notices.tip {
+    border-top: 30px solid #84c578;
+    background: #e8f7e6;
+    color: rgba(72, 125, 63, 0.995) !important;
+}
+
+div.notices.warning {
+    border-top: 30px solid #d58181;
+    background: #fbeded;
+    color: rgba(132, 56, 56, 0.995) !important;
+}
--- a/assets/sass/components/_pagination.scss
+++ b/assets/sass/components/_pagination.scss
@ -0,0 +1,110 @@
+.pagination-single {
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(space-between);
+  width: 100%;
+  margin: 1rem 0;
+
+  &__left,
+  &__right {    
+    @include flex-basis(auto);
+    @include flex-grow(0);
+    @include flex-shrink(0);
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      background-color: themed('pagination-background-color');
+    }
+
+    border-radius: 0.125rem;
+  }
+
+  &__left {
+    @include align-items(center);
+    @include justify-content(center);
+    padding: 0 0.5rem 0 0.25rem;
+
+    &-title {
+      @include truncate(200px);
+      padding-bottom: 0.125rem;
+    }
+
+    &-title--icon {      
+      @include themify($themes) {
+        color: themed('social-icon-color');
+      }      
+    }
+  }
+
+  &__right {
+    @include align-items(center);
+    @include justify-content(center);
+    padding: 0 0.25rem 0 0.5rem;
+
+    &-title {
+      @include truncate(200px);
+      padding-bottom: 0.125rem;
+    }
+
+    &-title--icon {      
+      @include themify($themes) {
+        color: themed('social-icon-color');
+      }
+    }
+  }
+}
+
+.pagination-list {
+  border-radius: 0.25rem;
+  margin: 2rem 1rem;
+  padding: 0.5rem 0;
+
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(space-around);  
+  @include themify($themes) {
+    background-color: themed('pagination-background-color');
+  }  
+
+  &__item {
+    font-size: 0.95rem; 
+    text-decoration: none !important;
+
+    @include flexbox();
+    @include align-items(center);  
+
+    &--number {
+      @include themify($themes) {
+        color: themed('pagination-number-color');
+      }
+    }
+
+    .enable {
+      padding: 0 0.125rem;
+      @include themify($themes) {
+        color: themed('pagination-link-color');
+      }
+      @include on-event {
+        cursor: pointer;
+        border-radius: 0.1rem;
+        text-decoration: underline;
+        @include themify($themes) {        
+          color: themed('link-hover');
+        }
+      }
+    }
+
+    .disabled {
+      cursor: default;
+      @include themify($themes) {
+        color: themed('pagination-disabled-color');        
+      }            
+    }
+  }
+
+  .icon {
+    @include flexbox();
+    @include align-items(stretch);
+    @include justify-content(center);    
+  }
+}
--- a/assets/sass/components/_photoswipe.scss
+++ b/assets/sass/components/_photoswipe.scss
@ -0,0 +1,68 @@
+a.pswp__share--facebook:hover {
+    @include themify($themes) {
+        background: themed('photoswipe-hover-background-color');
+        color: themed('photoswipe-hover-color');
+    }
+}
+
+a.pswp__share--facebook:hover:before {
+    @include themify($themes) {
+        border-bottom-color: themed('photoswipe-hover-background-color');
+    }
+}
+
+a.pswp__share--twitter:hover {
+    @include themify($themes) {
+        background: themed('photoswipe-hover-background-color');
+        color: themed('photoswipe-hover-color');
+    }
+}
+
+a.pswp__share--pinterest:hover {
+    @include themify($themes) {
+        background: themed('photoswipe-hover-background-color');
+        color: themed('photoswipe-hover-color');
+    }
+}
+
+a.pswp__share--download:hover {
+    @include themify($themes) {
+        background: themed('photoswipe-hover-background-color');
+        color: themed('photoswipe-hover-color');
+    }
+}
+
+.pswp__share-tooltip {
+    @include themify($themes) {
+        background: themed('photoswipe-background-color');
+    }
+}
+
+.pswp__share-tooltip a {
+    @include themify($themes) {
+        color: themed('photoswipe-color');
+    }
+}
+
+.pswp__share-tooltip a:hover {
+    text-decoration: none;
+    @include themify($themes) {
+        color: themed('photoswipe-color');
+    }
+}
+
+a.pswp__share--facebook:before {
+    @include themify($themes) {
+        border-bottom-color: themed('photoswipe-background-color');
+    }    
+}
+
+
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+    background-color: rgba(189, 189, 189, 0.3);
+}
+
+.pswp__bg {
+    background: rgba(0, 0, 0, 0.8);
+}
--- a/assets/sass/components/_related.scss
+++ b/assets/sass/components/_related.scss
@ -0,0 +1,26 @@
+.related {
+  margin: 5rem 0;
+  padding: 0.5rem;
+  width: 100%;
+  @include flexbox();
+  @include align-items(center);
+  @include flex-direction(column);
+
+  &-title {
+    @include align-self(center);
+    @include themify($themes) {
+      color: themed('related-header-title-color');
+    }
+  }
+
+  &-ul {
+    @include align-self(center);
+    list-style-type: disc;
+  }
+
+  &-link {
+    @include themify($themes) {
+      color: themed('related-link-color');
+    }
+  }
+}
--- a/assets/sass/components/_search.scss
+++ b/assets/sass/components/_search.scss
@ -0,0 +1,110 @@
+.search {
+  position: relative;
+  border-radius: 0.25rem;
+  height: $search-height;
+  z-index: z('search');
+  
+  @include flexbox();
+  @include align-items(center);
+  @include themify($themes) {
+    background-color: themed("search-background-color");
+  }
+
+  .icon {
+    padding: 0.25rem;
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: themed("search-icon-color");
+    }
+  }
+
+  .input {
+    height: 2rem;
+    width: 100%;
+    font-size: 0.9rem;
+    border: none;
+    outline: none;
+    padding-right: 1rem;
+
+    @include truncate(100%);
+    @include themify($themes) {
+      color: themed("search-color");
+      background-color: themed("search-background-color");
+      @include input-placeholder {
+        font-family: "Montserrat", sans-serif;
+        color: themed("search-placeholder-color");
+      }
+    }
+  }
+
+  &-content {
+    margin-top: 0.25rem;
+    a {
+      text-decoration: none !important;
+    }
+  }
+}
+
+.menu-item {
+  padding: 0.25rem;
+
+  &__title {
+    font-size: 1rem;
+    @include themify($themes) {
+      color: themed('search-color');
+    }
+  }
+
+  &__desc {
+    font-size: 0.8rem;
+    @include truncate(100%);
+    @include themify($themes) {
+      color: themed('search-color');
+    }
+  }
+}
+
+#search-results {
+  &.dropdown {
+    display: none;
+    &.is-active {
+      display: inline-block;
+      margin-top: 0.25rem;
+      position: absolute;
+      top: $search-height;
+      width: 100%;
+      border-radius: 0.1rem;
+      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
+      @include themify($themes) {
+        color: themed('search-content-color');
+        background-color: themed('search-content-background-color');
+      }
+    }    
+  }  
+
+  .dropdown {
+    &-content {
+      @include flexbox();
+      @include flex-direction(column);
+    }
+
+    &-item {
+      font-size: 1rem;
+      padding: 0.125rem;
+      @include on-event {
+        @include themify($themes) {
+          background-color: themed('search-hover-background-color');
+        }
+        border-bottom-left-radius: 0.1rem;
+        border-bottom-right-radius: 0.1rem;        
+      }
+
+      &.is-active {
+        @include themify($themes) {
+          background-color: themed('search-hover-background-color');
+        }
+      }
+    }    
+  }
+}
--- a/assets/sass/components/_summary.scss
+++ b/assets/sass/components/_summary.scss
@ -0,0 +1,70 @@
+.summary {  
+  padding: 0 1rem;
+  .title {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 700;
+    a {
+      @include themify($themes) {
+          color: themed('title-color');
+          @include on-event {
+            color: themed('link-hover');
+          }
+      }
+    }
+  }
+
+  .subtitle {
+    font-family: "Merriweather", serif;
+    @include themify($themes) {
+      color: themed('meta-color');
+    }
+  }
+
+  &__content {
+    @include flexbox();
+    @include flex-direction(column);
+    @include justify-content(center);
+  }
+
+  &__text {
+    margin-top: 1rem;
+    line-height: 1.7rem;
+    font-family: "Merriweather", serif;
+  }
+
+  &__image-wrapper {
+    height: 100%;
+    width: auto;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .video {
+    padding: 0 1rem;
+  }
+
+  .video-js {
+    width: 100%;
+    max-height: 500px;
+    object-fit: contain;
+  }
+
+  hr {
+    margin-top: 1.5rem;
+  }
+  &:not(:last-child) {
+    hr {
+      margin-bottom: 4rem;      
+    }
+  }
+  &:last-child {
+    hr {
+      margin-bottom: 2rem;
+    }
+  }
+}
--- a/assets/sass/components/_taxo.scss
+++ b/assets/sass/components/_taxo.scss
@ -0,0 +1,73 @@
+.taxo {
+  padding: 0.25rem;
+  margin: 1.5rem 0;
+
+  &__title {
+    font-family: 'Montserrat', sans-serif;
+    @include themify($themes) {
+      color: themed('taxo-title-color');
+      &:hover {
+        color: themed('link-hover');
+      }
+    }
+  }
+
+  &__link {
+       
+  }
+
+  .title {
+    display: block;
+    margin: 0rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .tag {
+    margin: 0;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;        
+    font-size: 0.8rem;    
+    display: inline-block;
+
+    @include themify($themes) {
+      color: themed('taxo-title-color');
+    }
+  }
+
+  .is-tags {
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    @include themify($themes) {
+      color: themed('taxo-tags-color');
+      background-color: themed('taxo-tags-background-color');
+      @include on-event {
+        background-color: themed('taxo-background-color-hover');
+      }
+    }
+  }  
+
+  .is-categories {
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    @include themify($themes) {
+      color: themed('taxo-categories-color');
+      background-color: themed('taxo-categories-background-color');
+      @include on-event {
+        background-color: themed('taxo-background-color-hover');
+      }
+    }
+  }
+
+  .is-series {
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    @include themify($themes) {
+      color: themed('taxo-series-color');
+      background-color: themed('taxo-series-background-color');
+      @include on-event {
+        background-color: themed('taxo-background-color-hover');
+      }
+    }
+  }
+}
--- a/assets/sass/components/_toc.scss
+++ b/assets/sass/components/_toc.scss
@ -0,0 +1,64 @@
+.toc {
+  width: 100%;
+  max-width: 250px;
+  position: fixed;
+  top: 4.5rem;
+  font-size: 0.85rem;
+  padding-left: 0.5rem;
+  
+  #toc {
+    position: relative;
+  }
+
+  &__title {
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    @include themify($themes) {
+      color: themed('toc-label-color');
+    }
+  }
+
+  a {
+    color: inherit;     
+    position: relative;
+    &::before {
+      @include themify($themes) {        
+        background-color: themed('toc-vertical-line');
+      }      
+      content: '';
+      height: 100%;
+      left: -1rem;
+      margin-top: -1px;
+      position: absolute;
+      width: 2px;            
+      &:last-child {
+        background-color: transparent;
+      }
+    }    
+  }
+
+  ul {
+    @include themify($themes) {
+      li {        
+        li {
+          margin-left: 1rem;
+          color: themed('sidebar-li-color');      
+        }  
+      }
+      
+      a {
+        color: themed('toc-title-color');
+      }
+    }
+  }
+
+  .active {
+    @include themify($themes) {
+      color: themed('link-hover');
+      font-weight: 700;
+      &::before {        
+        background-color: themed('toc-vertical-line-active');
+      }
+    }
+  }
+}
--- a/assets/sass/components/_tooltip.scss
+++ b/assets/sass/components/_tooltip.scss
@ -0,0 +1,137 @@
+.tooltipped {
+    position: relative;
+}
+
+.tooltipped:after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    padding: 5px 8px;
+    font: normal normal 11px/1.5 "Lato", "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 3px;
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.tooltipped:before {
+    position: absolute;
+    z-index: 1000001;
+    display: none;
+    width: 0;
+    height: 0;
+    color: rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    content: "";
+    border: 5px solid transparent;
+}
+
+.tooltipped:hover:before,
+.tooltipped:hover:after,
+.tooltipped:active:before,
+.tooltipped:active:after,
+.tooltipped:focus:before,
+.tooltipped:focus:after {
+    display: inline-block;
+    text-decoration: none;
+}
+
+.tooltipped-s:after,
+.tooltipped-se:after,
+.tooltipped-sw:after {
+    top: 100%;
+    right: 50%;
+    margin-top: 5px;
+}
+
+.tooltipped-s:before,
+.tooltipped-se:before,
+.tooltipped-sw:before {
+    top: auto;
+    right: 50%;
+    bottom: -5px;
+    margin-right: -5px;
+    border-bottom-color: rgba(0, 0, 0, 0.8);
+}
+
+.tooltipped-se:after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+}
+
+.tooltipped-sw:after {
+    margin-right: -15px;
+}
+
+.tooltipped-n:after,
+.tooltipped-ne:after,
+.tooltipped-nw:after {
+    right: 50%;
+    bottom: 100%;
+    margin-bottom: 5px;
+}
+
+.tooltipped-n:before,
+.tooltipped-ne:before,
+.tooltipped-nw:before {
+    top: -5px;
+    right: 50%;
+    bottom: auto;
+    margin-right: -5px;
+    border-top-color: rgba(0, 0, 0, 0.8);
+}
+
+.tooltipped-ne:after {
+    right: auto;
+    left: 50%;
+    margin-left: -15px;
+}
+
+.tooltipped-nw:after {
+    margin-right: -15px;
+}
+
+.tooltipped-s:after,
+.tooltipped-n:after {
+    transform: translateX(50%);
+}
+
+.tooltipped-w:after {
+    right: 100%;
+    bottom: 50%;
+    margin-right: 5px;
+    transform: translateY(50%);
+}
+
+.tooltipped-w:before {
+    top: 50%;
+    bottom: 50%;
+    left: -5px;
+    margin-top: -5px;
+    border-left-color: rgba(0, 0, 0, 0.8);
+}
+
+.tooltipped-e:after {
+    bottom: 50%;
+    left: 100%;
+    margin-left: 5px;
+    transform: translateY(50%);
+}
+
+.tooltipped-e:before {
+    top: 50%;
+    right: -5px;
+    bottom: 50%;
+    margin-top: -5px;
+    border-right-color: rgba(0, 0, 0, 0.8);
+}
--- a/assets/sass/layout/_footer.scss
+++ b/assets/sass/layout/_footer.scss
@ -0,0 +1,178 @@
+.footer {
+  padding: 0 0.5rem;
+
+  @include themify($themes) {
+    color: themed('footer-color');
+    background-color: themed('footer-background-color');
+  }
+
+  &__wrapper {
+    @include flexbox();        
+    @include flex-direction(row);
+    @include respond-to(sm) {
+      @include flex-direction(column);
+    }
+  }
+
+  &__theme {
+    padding: 0.5rem 0;
+    @include flex-grow(1);
+    @include flexbox();
+    @include align-items(center);
+    @include flex-direction(column);
+  }
+
+  &__lang {
+    padding: 0.5rem 0;
+    @include flex-grow(1);
+    @include flexbox();
+    @include align-items(center);
+    @include flex-direction(column);
+  }
+
+  &__feed {
+    padding: 0.5rem 0;
+    @include flex-grow(1);
+    @include flexbox();
+    @include align-items(center);
+    @include flex-direction(column);
+  }
+
+  &__social {
+    padding: 0.5rem 0;
+    @include flex-grow(1);
+    @include flexbox();
+    @include align-items(center);
+    @include flex-direction(column);
+  }
+
+  &__poweredby {
+    @include flexbox();
+    @include align-items(center);
+    @include flex-direction(column);
+    padding: 0.5rem 0;
+
+    p {
+      padding: 0.125rem;
+    }
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;        
+    border-radius: 0.125rem;  
+    @include themify($themes) {
+      border: 1px solid themed('dropdown-border-color');
+    }
+
+    &-trigger {
+      border: none;
+      border-radius: 0.15rem;
+
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(center);      
+      @include themify($themes) {
+        color: themed('dropdown-footer-item-color');
+        background-color: themed('dropdown-title-background-color');
+      }
+    }
+
+    &-content {
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      display: none;
+      width: inherit;
+      height: auto;
+      z-index: z("dropdown");      
+      border-top-left-radius: 0.15rem;
+      border-top-right-radius: 0.15rem;
+
+      a {
+        font-size: 0.9rem;
+      }
+
+      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
+      @include themify($themes) {
+        border-bottom: 4px solid themed("dropdown-border-top-color");
+        background-color: themed("dropdown-content-background-color");
+      }
+
+      .is-active {
+        @include themify($themes) {
+        background-color: themed("dropdown-item-active-background-color");
+      }
+      }
+    }
+
+    &-item {
+      padding: 0.25rem 0.75rem;
+      height: 100%;
+      text-decoration: none;
+      display: block;
+      font-size: 1rem;
+
+      @include themify($themes) {
+        color: themed("dropdown-item-color");
+        @include on-event {
+          color: themed("dropdown-item-hover-color");
+          background-color: themed("dropdown-item-hover-background-color");
+          text-decoration: none;
+
+          &:first-child {
+            border-top-left-radius: 0.15rem;
+            border-top-right-radius: 0.15rem;
+          }
+        }
+      }
+    }
+  }
+
+  .label {
+    margin: 0.25rem;
+  }
+
+  .content {
+    font-family: "Montserrat", sans-serif;
+    //font-size: 0.8rem;
+  }
+
+  .select-theme {    
+    &__label {      
+      color: inherit;
+      text-transform: capitalize;            
+    }
+
+    &__item {
+      text-transform: capitalize;
+    }
+  }
+
+  .select-lang {
+    &__label {
+      color: inherit;
+      text-transform: capitalize;
+    }
+  }
+
+  .feed {
+  }
+
+  .social {
+    a {
+      @include themify($themes) {        
+        text-decoration: none;
+        color: themed('social-icon-color');
+        &:hover {
+          color: themed('social-icon-hover-color');
+          transition: color 0.2s ease;
+        }        
+      }   
+    }
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+}
--- a/assets/sass/layout/_forms.scss
+++ b/assets/sass/layout/_forms.scss
--- a/assets/sass/layout/_grid.scss
+++ b/assets/sass/layout/_grid.scss
@ -0,0 +1,55 @@
+.wrapper {
+    display: grid;
+    grid-template-columns: minmax(350px, 5fr) minmax(0PX, 2fr);
+    grid-template-rows: 50px auto 1fr auto;
+    grid-column-gap: 1.5rem;
+    grid-row-gap: 0px;
+}
+
+.header-main {
+    grid-area: 2 / 1 / 3 / 2;
+}
+
+.header-side {
+    grid-area: 2 / 2 / 3 / 3;
+}
+
+.header {
+    grid-area: 2 / 1 / 3 / 3;
+}
+
+.main-main {
+    grid-area: 3 / 1 / 4 / 2;
+}
+
+.main-side {
+    grid-area: 3 / 2 / 4 / 3;
+}
+
+.main {
+    grid-area: 3 / 1 / 4 / 3;
+}
+
+.footer-main {
+    grid-area: 4 / 1 / 5 / 2;
+}
+
+.footer-side {
+    grid-area: 4 / 2 / 5 / 3;
+}
+
+.footer {
+    grid-area: 4 / 1 / 5 / 3;
+}
+
+.navbar-main {
+    grid-area: 1 / 1 / 2 / 2;
+}
+
+.navbar-side {
+    grid-area: 1 / 2 / 2 / 3;
+}
+
+.navbar {
+    grid-area: 1 / 1 / 2 / 3;
+}
--- a/assets/sass/layout/_header.scss
+++ b/assets/sass/layout/_header.scss
@ -0,0 +1,12 @@
+.header {
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(center);
+  @include flex-direction(column);
+  margin: 1rem;  
+
+  .title {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 900;
+  }
+}
--- a/assets/sass/layout/_navigation.scss
+++ b/assets/sass/layout/_navigation.scss
@ -0,0 +1,248 @@
+.navbar {  
+  margin: auto;
+  width: inherit;
+  max-width: inherit;
+  height: $nav-height;
+  z-index: z('navbar');
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;  
+  
+  @include transition(all, 0.2s, ease);  
+  @include flexbox();
+  @include justify-content(space-between);
+  @include themify($themes) {
+    border-bottom: 1px solid themed('navbar-border-bottom-color');
+    background-color: themed('navbar-background-color');
+  }
+
+  &--hide {
+    top: -$nav-height;
+  }
+
+  &--show {
+    top: 0;
+  }
+
+  &__brand {
+    @include flexbox();
+    @include align-items(center);
+    @include flex-shrink(0);
+    height: $nav-height;
+  }
+
+  &__burger {        
+    display: none;
+    position: relative;
+
+    @include respond-to(sm) {
+      cursor: pointer;
+      margin-left: auto;
+      position: relative;
+      height: $nav-height;    
+      width: $nav-height;
+
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(flex-end);
+
+      span {
+        @include themify($themes) {
+          background-color: themed('burger-menu-color');
+        }        
+        
+        border-radius: 1rem;
+        display: block;
+        height: 2px;
+        left: calc(50% - 8px);
+        position: absolute;
+        transform-origin: center;
+        transition-duration: 86ms;
+        transition-property: background-color, opacity, transform;
+        transition-timing-function: ease-out;
+        width: 16px;
+        &:nth-child(1) {
+          top: calc(50% - 6px);
+        }      
+        &:nth-child(2) {
+          top: calc(50% - 1px);
+        } 
+        &:nth-child(3) {
+          top: calc(50% + 4px);
+        }      
+      }      
+          
+      &:hover {
+        span {
+          @include themify($themes) {
+            background-color: themed('link-hover');
+          }
+        }        
+      }
+
+      // Modifers
+      &.is-active {
+        display: block;
+        span {
+          &:nth-child(1) {
+            transform: translateY(5px) rotate(45deg);
+          }        
+          &:nth-child(2) {
+            opacity: 0;
+          }        
+          &:nth-child(3) {
+            transform: translateY(-5px) rotate(-45deg);
+          }        
+        }      
+      }
+    }    
+  }
+
+  &__logo {
+    width: 100%;
+    height: 100%;
+
+    &-link {
+      width: 40px;
+      height: 40px;
+      padding: 0.1rem;
+      margin: auto 0.25rem;
+      @include flex-shrink(0);
+      flex-shrink: 0;
+    }
+  }
+
+  &__title {
+    height: $nav-height;
+    @include flexbox();
+    @include align-items(center);
+
+    &-link {
+      @include themify($themes) {
+        color: themed("navbar-title-color");
+      }
+    }
+  }
+
+  &__menu {
+    @include flex-grow(1);
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(flex-end);
+    height: $nav-height;
+    position: relative;
+    
+    @include respond-to(sm) {
+      display: none;
+    }
+
+    &-item {            
+      height: $nav-height;      
+      padding: 0.5rem;
+      font-size: 1rem;
+      font-family: 'Montserrat', sans-serif;
+      font-weight: 400;
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(center);
+      @include themify($themes) {
+        color: themed('navbar-title-color');
+        @include on-event {
+          color: themed('navbar-title-hover-color');
+          background-color: themed('navbar-menu-hover-background-color');
+          text-decoration: none;
+        }
+      }
+
+      @include respond-to(sm) {
+        @include justify-content(flex-start);
+        width: 100%;
+        padding: 0 0.75rem;
+      }
+    }
+
+    &-icon {
+      margin-top: 0.4rem;
+    }
+
+    &.is-active {
+      position: absolute;
+      @include flexbox();
+      @include flex-direction(column);
+      @include align-items(flex-start);
+      top: 100%;
+      width: 100%;
+      height: auto;      
+      overflow: hidden; 
+      @include themify($themes) {        
+        border-top: 1px solid themed('navbar-dropdown-item-hover-background-color');
+        background-color: themed('navbar-background-color');
+      }
+    }
+  }
+
+  &__dropdown {
+    display: inline-block;
+    height: $nav-height;
+    @include respond-to(sm) {
+      width: 100%;
+      height: auto;
+    }
+
+    &--content {
+      position: absolute;
+      display: none;
+      width: inherit;      
+      z-index: z("dropdown");
+      border-bottom-left-radius: 0.15rem;
+      border-bottom-right-radius: 0.15rem;
+
+      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
+      @include themify($themes) {
+        border-top: 4px solid themed("dropdown-border-top-color");
+        background-color: themed("dropdown-content-background-color");
+      }
+      @include respond-to(sm) {
+        position: relative;
+        display: block;
+        box-shadow: none;
+        @include themify($themes) {
+          border-top: none;
+          background-color: themed("navbar-background-color");          
+        }
+      }      
+    }
+
+    &--item {
+      padding: 0.25rem 0.75rem;
+      height: auto;
+      margin: auto;
+      text-decoration: none;
+      display: block;
+      font-size: 1rem;
+
+      @include themify($themes) {
+        color: themed("dropdown-item-color");
+        @include on-event {
+          color: themed("navbar-dropdown-item-hover-color");
+          background-color: themed("navbar-menu-hover-background-color");
+          text-decoration: none;          
+
+          &:last-child {
+            border-bottom-left-radius: 0.15rem;
+            border-bottom-right-radius: 0.15rem;
+          }
+        }
+      }
+
+      @include respond-to(sm) {
+        padding-left: 2.5rem;
+      }
+    }
+  }
+}
+
+.navbar__dropdown:hover .navbar__dropdown--content {
+  display: block;
+}
--- a/assets/sass/layout/_sidebar.scss
+++ b/assets/sass/layout/_sidebar.scss
@ -0,0 +1,55 @@
+.sidebar {
+  margin-top: 1rem;
+  margin-right: 1rem;
+
+  &-home {
+    padding: 0.5rem;
+
+    &__title {
+      font-family: "Montserrat", sans-serif;
+      font-weight: 700;
+      @include themify($themes) {
+        color: themed('sidebar-title-color');
+        &:hover {
+          color: themed('link-hover');
+        }
+      }    
+    }
+
+    &__ul {
+      margin-left: 1rem;
+    }
+
+    &__a {    
+      @include themify($themes) {
+        color: themed('sidebar-li-color');
+      }
+    }
+  }
+
+  &-list {
+    padding: 0.5rem;
+
+    &__title {
+      font-family: "Montserrat", sans-serif;
+      font-weight: 700;
+      @include themify($themes) {
+        color: themed('sidebar-title-color');
+        &:hover {
+          color: themed('link-hover');
+        } 
+      }    
+    }
+
+    &__ul {
+      margin-left: 1rem;
+    }
+
+    &__a {
+      font-family: "Montserrat", sans-serif;
+      @include themify($themes) {
+        color: themed('sidebar-li-color');
+      }
+    }
+  }
+}
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -0,0 +1,43 @@
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'abstracts/functions';
+@import 'abstracts/flexbox';
+
+@import 'base/reset';
+@import 'base/fonts';
+@import 'base/helpers';
+@import 'base/typography';
+
+@import 'layout/navigation';
+@import 'layout/grid';
+@import 'layout/header';
+@import 'layout/footer';
+@import 'layout/sidebar';
+@import 'layout/forms';
+
+@import 'components/buttons';
+@import 'components/summary';
+@import 'components/toc';
+@import 'components/taxo';
+@import 'components/pagination';
+@import 'components/photoswipe';
+@import 'components/search';
+@import 'components/breadcrumb';
+@import 'components/related';
+@import 'components/notice';
+@import 'components/expand';
+@import 'components/alert';
+@import 'components/attachment';
+@import 'components/tooltip';
+
+@import 'pages/body';
+@import 'pages/home';
+@import 'pages/about';
+@import 'pages/contact';
+@import 'pages/gallery';
+@import 'pages/single';
+@import 'pages/list';
+@import 'pages/terms';
+@import 'pages/archive';
+
+@import 'prism/prism';
--- a/assets/sass/pages/_about.scss
+++ b/assets/sass/pages/_about.scss
--- a/assets/sass/pages/_archive.scss
+++ b/assets/sass/pages/_archive.scss
@ -0,0 +1,110 @@
+.archive {
+  position: relative;
+  margin-bottom: 5rem;
+  padding: 2rem;
+  width: 100%;
+  @include flexbox();
+  @include justify-content(flex-start);
+
+  &__ul {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 2.25rem;
+      top: 0;
+      width: 0.25rem;
+      height: 100%;
+      @include themify($themes) {
+        background-color: themed('toc-vertical-line');
+      }
+    }
+
+    @include respond-to(sm) {
+      &::before {
+        content: none;
+      }
+    }
+  }
+
+  &__li {
+    margin-bottom: 0.5rem;
+    margin-left: 4rem;    
+    @include transition(margin-left, 0.1s, ease);
+    @include flexbox();
+    @include align-items(center);
+    @include respond-to(sm) {
+      margin-left: 0;
+    }
+  }
+
+  &__key {
+    margin-right: 0.5rem;
+    border-radius: 2px;
+    height: 28px;
+    width: 75px;
+    padding: 0;
+    font-size: 0.8rem;
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('archive-key-color');
+      background-color: themed('archive-key-background-color');
+    }
+
+    &:not(:first-child) {
+      margin: 4rem 0 1rem 0;
+    }
+    &:first-child {
+      margin: 1rem 0;
+    }
+  }
+
+  &__type {
+    margin-right: 0.5rem;
+    border-radius: 2px;
+    height: 18px;
+    width: 75px;
+    padding: 0;
+    font-size: 0.8rem;
+    @include flexbox();
+    @include align-items(stretch);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('archive-type-color');
+      background-color: themed('archive-type-background-color');
+    }
+  }
+
+  &__title {
+    margin-right: 0.5rem;    
+
+    @include on-event {      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 2.25rem;        
+        top: inherit;
+        width: 0.25rem;
+        height: 23px;
+        @include themify($themes) {
+          background-color: themed('archive-hover-line-color');
+        }
+      }
+
+      @include respond-to(sm) {
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+
+  &__date {
+    font-size: 12px;
+    @include themify($themes) {
+      color: themed('archive-meta-color');
+    }
+  }
+}
--- a/assets/sass/pages/_body.scss
+++ b/assets/sass/pages/_body.scss
@ -0,0 +1,9 @@
+#body {
+  @include themify($themes) {
+      color: themed('body-color');
+      background-color: themed('backdrop-background-color');
+      hr {
+        border-color: themed('hr-color');
+      }
+  }  
+}
--- a/assets/sass/pages/_contact.scss
+++ b/assets/sass/pages/_contact.scss
--- a/assets/sass/pages/_gallery.scss
+++ b/assets/sass/pages/_gallery.scss
@ -0,0 +1,65 @@
+.grid {
+  position: relative;
+  margin-bottom: 1rem;
+
+  .full {
+    width: 100%;
+  }
+
+  .half {
+    width: 50%;
+  }
+
+  .third {
+    width: 33.3%;
+  }
+
+  .quarter {
+    width: 25%;
+  }
+
+  .fifth {
+    width: 20%;
+  }
+}
+
+/* clear fix */
+.grid:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+/* ---- .grid-item ---- */
+
+.grid-sizer,
+.grid-item {
+  width: 33.333%;
+  padding: 0.25rem;
+  
+  img {
+      border-radius: 0.25rem;
+  }
+}
+
+.grid-item {
+  float: left;
+}
+
+.grid-item img {
+  display: block;
+  max-width: 100%;
+}
+
+
+.gallery {
+  padding: 1rem;
+  
+  &__contents {
+      padding: 1rem;
+      width: 65%;
+      font-family: 'Merriweather', serif;
+      font-size: 1rem;
+      text-align: center;
+  }
+}
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
--- a/assets/sass/pages/_list.scss
+++ b/assets/sass/pages/_list.scss
@ -0,0 +1,22 @@
+.list {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.5rem;
+    font-family: 'Montserrat', sans-serif;
+
+    &--title {
+      @include themify($themes) {
+        color: themed('list-header-title-color');
+      }
+    }
+
+    &--desc {
+      font-family: 'Merriweather', serif;
+      font-weight: italic;
+      padding: 1rem;
+      line-height: 1.7rem;      
+    }
+  }
+}
--- a/assets/sass/pages/_single.scss
+++ b/assets/sass/pages/_single.scss
@ -0,0 +1,204 @@
+.single {
+  padding: 1rem;
+  position: relaitve;
+  width: 100%;
+
+  &__title {
+    font-weight: 900;
+    font-family: "Montserrat", sans-serif;
+    line-height: 3rem;
+    @include themify($themes) {
+      color: themed("single-header-title-color");
+    }
+  }
+
+  &__meta {
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  &__contents {
+    font-size: 1rem;
+    font-family: "Merriweather", serif;
+    margin: 1rem 0;
+    line-height: 1.7rem;
+    width: inheirt;
+    max-width: inherit;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      position: relative;
+      @include themify($themes) {
+        color: themed("single-contents-title-color");
+      }
+    }
+
+    h1 {
+      font-size: 2.6rem;
+      margin: 3.5rem 0 1.75rem 0;
+    }
+
+    h2 {
+      font-size: 2.2rem;
+      margin: 3.2rem 0 1.5rem 0;
+      padding: 0;
+      color: inherit;
+      font-weight: 900;
+      text-rendering: optimizeLegibility;
+      line-height: 1.1;
+    }
+
+    h3 {
+      font-size: 1.8rem;
+      margin: 2.8rem 0 1.25rem 0;
+    }
+
+    h4 {
+      font-size: 1.5rem;
+      margin: 2.4rem 0 1rem 0;
+    }
+
+    h5 {
+      font-size: 1.2rem;
+      margin: 2rem 0 0.8rem 0;
+    }
+
+    h6 {
+      font-size: 1rem;
+      margin: 1.5rem 0 0.5rem 0;
+    }
+
+    pre {
+      @include themify($themes) {        
+        background-color: themed("content-pre-background-color") !important;
+      }
+      border-radius: 0.5rem;
+      position: relative;
+      padding: 1rem;
+      margin: 2rem 0 2rem 0;
+      width: 100%;
+      line-height: 1rem;
+      overflow-x: auto;
+      white-space: pre;
+      word-wrap: normal;
+
+      code {        
+        @include themify($themes) {
+          color: themed('content-code-color');
+          background-color: transparent;
+        }
+      }
+    }
+
+    code {
+      border-radius: 0.25rem;
+      font-size: 0.9rem;
+      padding: 0.2rem;
+      overflow-x: auto;
+      @include themify($themes) {
+        background-color: themed("content-code-background-color");
+      }
+      a {
+        text-decoration: none;
+      }
+    }
+
+    code + .copy-to-clipboard {
+      margin-left: -1px;
+      border-left: 0 !important;
+      font-size: inherit !important;
+      vertical-align: middle;
+      height: 21px;
+      top: 0;
+    }
+
+    .copy-to-clipboard {
+      background-image: url(/images/clippy.svg);
+      background-position: 50% 50%;
+      background-size: 16px 16px;
+      background-repeat: no-repeat;
+      width: 27px;
+      height: 1.45rem;
+      top: -1px;
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;      
+      margin-left: -0.2rem;
+      cursor: pointer;
+      border-radius: 0 2px 2px 0;
+      margin-bottom: 1px;
+      @include transition(all, 0.2s, ease);
+    }
+    .copy-to-clipboard:hover {
+      @include translateY(-0.1rem);
+    }
+    pre .copy-to-clipboard {
+      position: absolute;
+      right: 4px;
+      top: 4px;      
+      border-radius: 2px;
+      @include transition(all, 0.2s, ease);
+    }
+    pre .copy-to-clipboard:hover {
+      @include translateY(-0.1rem);
+    }
+
+    blockquote {
+      margin: 0 1.75rem 1.75rem 1.5rem;
+      padding: 0 0 0 1.42188rem;
+      font-size: 1.20112rem;
+      line-height: 1.75rem;
+      color: inherit;
+      font-style: italic;
+      opacity: 0.8;
+      @include themify($themes) {
+        border-left: 0.32813rem solid themed("single-blockquote-border-color");
+      }
+    }
+
+    img {
+      display: block;
+      border-radius: 0.25rem;
+      margin: 0 auto;
+    }
+
+    p {
+      margin: 0 0 1.75rem 0;
+      padding: 0;
+    }
+
+    a {
+      text-decoration: underline;
+    }
+
+    ul {
+      margin-right: 0;
+      margin-top: 0;
+      padding: 0;
+      margin-bottom: 1.75rem;
+      list-style: disc outside none;
+    }
+
+    li {
+      margin-left: 2rem;
+      margin-bottom: calc(1.75rem / 2);
+    }
+
+    hr {
+      margin: 0 0 calc(1.75rem - 1px) 0;
+      padding: 0;
+      border: none;
+      height: 1px;
+      @include themify($themes) {
+        background: themed("single-hr-background-color");
+      }
+    }
+
+    .anchor {
+      cursor: pointer;
+    }
+  }
+}
--- a/assets/sass/pages/_terms.scss
+++ b/assets/sass/pages/_terms.scss
@ -0,0 +1,83 @@
+.terms {
+  @include flexbox();
+  @include align-items(center);
+  @include flex-direction(column);
+  width: 100%;
+  
+  &__title {
+    margin-top: 2rem;
+    @include themify($themes) {
+      color: themed('terms-title-color');
+      text-shadow: 1px 1px 0 darken(themed('terms-title-color'), 10%), 
+        2px 2px 0 darken(themed('terms-title-color'), 14%), 
+        3px 3px 0 darken(themed('terms-title-color'), 18%),
+        4px 4px 0 darken(themed('terms-title-color'), 22%); 
+    }    
+  }
+
+  &__list {
+    @include flexbox();
+    @include align-items(center);
+    @include flex-wrap(wrap);
+    width: 50%;
+  }
+
+  &__item {
+    display: inline-block;
+    margin-right: 1rem;  
+    text-decoration: none !important;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+
+    @include transition(all, 0.2s, ease);
+    @include on-event {
+      @include translateY(-0.25rem);
+    }
+  }
+
+  &__link {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &__tags {
+    @include themify($themes) {
+      color: themed('terms-tags-color');
+    }
+  }
+
+  &__categories {
+    @include themify($themes) {
+      color: themed('terms-categories-color');
+    }    
+  }
+
+  &__series {
+    @include themify($themes) {
+      color: themed('terms-series-color');
+    }
+  }
+
+  &__len {
+    @include themify($themes) {
+      color: themed('terms-len-color');
+    }
+  }
+
+  .is-small {
+    font-size: 1rem;
+  }
+
+  .is-normal {
+    font-size: 1.5rem;
+  }
+
+  .is-medium {
+    font-size: 2rem;
+  }
+
+  .is-large {
+    font-size: 2.5rem;
+  }
+}
--- a/assets/sass/prism/_dark.scss
+++ b/assets/sass/prism/_dark.scss
@ -0,0 +1,294 @@
+.theme__dark {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #d6deeb;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1;
+    min-width: 100%;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*="language-"]::-moz-selection,
+  pre[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection,
+  code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: rgba(29, 59, 83, 0.99);
+  }
+
+  pre[class*="language-"]::selection,
+  pre[class*="language-"] ::selection,
+  code[class*="language-"]::selection,
+  code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: rgba(29, 59, 83, 0.99);
+  }
+
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.cdata {
+    color: rgb(99, 119, 119);
+    font-style: italic;
+  }
+
+  .token.punctuation {
+    color: rgb(199, 146, 234);
+  }
+
+  .namespace {
+    color: rgb(178, 204, 214);
+  }
+
+  .token.deleted {
+    color: rgba(239, 83, 80, 0.56);
+    font-style: italic;
+  }
+
+  .token.symbol,
+  .token.property {
+    color: rgb(128, 203, 196);
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.keyword {
+    color: #ffa7c4;
+  }
+
+  .token.boolean {
+    color: rgb(240, 98, 146);
+  }
+
+  .token.number {
+    color: rgb(247, 140, 108);
+  }
+
+  .token.constant,
+  .token.function,
+  .token.builtin,
+  .token.char {
+    color: rgb(130, 170, 255);
+  }
+
+  .token.selector,
+  .token.doctype {
+    color: rgb(199, 146, 234);
+    font-style: italic;
+  }
+
+  .token.attr-name,
+  .token.inserted {
+    color: rgb(173, 219, 103);
+    font-style: italic;
+  }
+
+  .token.string,
+  .token.url,
+  .token.entity,
+  .language-css .token.string,
+  .style .token.string {
+    color: rgb(173, 219, 103);
+  }
+
+  .token.class-name,
+  .token.atrule,
+  .token.attr-value {
+    color: #ffa7c4;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: rgb(214, 222, 235);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .langague-cpp .token.string {
+    color: #8be9fd;
+  }
+
+  .langague-c .token.string {
+    color: #8be9fd;
+  }
+
+  .language-css .token.selector {
+    color: rgba(80, 250, 123, 1);
+  }
+
+  .language-css .token.property {
+    color: rgba(255, 184, 108, 1);
+  }
+
+  .language-java span.token.class-name {
+    color: #8be9fd;
+  }
+
+  .language-java .token.class-name {
+    color: #8be9fd;
+  }
+
+  .language-markup .token.attr-value {
+    color: rgba(102, 217, 239, 1);
+  }
+
+  .language-markup .token.tag {
+    color: rgba(80, 250, 123, 1);
+  }
+
+  .language-objectivec .token.property {
+    color: #66d9ef;
+  }
+
+  .language-objectivec .token.string {
+    color: #50fa7b;
+  }
+
+  .language-php .token.boolean {
+    color: #8be9fd;
+  }
+
+  .language-php .token.function {
+    color: #ff79c6;
+  }
+
+  .language-php .token.keyword {
+    color: #66d9ef;
+  }
+
+  .language-ruby .token.symbol {
+    color: #8be9fd;
+  }
+
+  .language-ruby .token.class-name {
+    color: #cfcfc2;
+  }
+
+  pre.line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+
+  pre.line-numbers > code {
+    position: relative;
+    white-space: inherit;
+  }
+
+  .line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em;
+    /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+  }
+
+  .line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+
+  div.code-toolbar {
+    position: relative;
+  }
+
+  div.code-toolbar > .toolbar {
+    position: absolute;
+    top: 0.3em;
+    right: 0.2em;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+  }
+
+  div.code-toolbar:hover > .toolbar {
+    opacity: 1;
+  }
+
+  div.code-toolbar > .toolbar .toolbar-item {
+    display: inline-block;
+    padding-right: 20px;
+  }
+
+  div.code-toolbar > .toolbar a {
+    cursor: pointer;
+  }
+
+  div.code-toolbar > .toolbar button {
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none;
+    /* for button */
+    -moz-user-select: none;
+    -ms-user-select: none;
+  }
+
+  div.code-toolbar > .toolbar a,
+  div.code-toolbar > .toolbar button,
+  div.code-toolbar > .toolbar span {
+    color: #ccc;
+    font-size: 1em;
+    padding: 0.5em;
+    background: rgba(98, 114, 164, 1);
+    border-radius: 0.5em;
+  }
+
+  div.code-toolbar > .toolbar a:hover,
+  div.code-toolbar > .toolbar a:focus,
+  div.code-toolbar > .toolbar button:hover,
+  div.code-toolbar > .toolbar button:focus,
+  div.code-toolbar > .toolbar span:hover,
+  div.code-toolbar > .toolbar span:focus {
+    color: inherit;
+    text-decoration: none;
+    background-color: var(--verde);
+  }
+}
--- a/assets/sass/prism/_hacker.scss
+++ b/assets/sass/prism/_hacker.scss
@ -0,0 +1,145 @@
+/* Generated with http://k88hudson.github.io/syntax-highlighting-theme-generator/www */
+/* http://k88hudson.github.io/react-markdocs */
+/**
+ * @author k88hudson
+ *
+ * Based on prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+/*********************************************************
+* General
+*/
+.theme__hacker {  
+  pre[class*="language-"],
+  code[class*="language-"] {
+    color: #f3ff6e;
+    font-size: 13px;
+    text-shadow: none;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  pre[class*="language-"]::selection,
+  code[class*="language-"]::selection,
+  pre[class*="language-"]::mozselection,
+  code[class*="language-"]::mozselection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  @media print {
+    pre[class*="language-"],
+    code[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    background: #202420;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: .1em .3em;
+    border-radius: .3em;
+    color: #1fff2a;
+    background: #202420;
+  }
+  /*********************************************************
+  * Tokens
+  */
+  .namespace {
+    opacity: .7;
+  }
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #93a1a1;
+  }
+  .token.punctuation {
+    color: #e08c48;
+  }
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #7b4d94;
+  }
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #3f8a16;
+  }
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #a67f59;
+    background: #202420;
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #8FFFE9;
+  }
+  .token.function {
+    color: #1fff2a;
+  }
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: #e08c48;
+  }
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  /*********************************************************
+  * Line highlighting
+  */
+  pre[data-line] {
+    position: relative;
+  }
+  pre[class*="language-"] > code[class*="language-"] {
+    position: relative;
+    z-index: 1;
+  }
+  .line-highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    padding: inherit 0;
+    margin-top: 1em;
+    background: #202420;
+    box-shadow: inset 5px 0 0 #f7d87c;
+    z-index: 0;
+    pointer-events: none;
+    line-height: inherit;
+    white-space: pre;
+  }
+}
--- a/assets/sass/prism/_light.scss
+++ b/assets/sass/prism/_light.scss
@ -0,0 +1,174 @@
+ /*
+Name:   Duotone Light
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+.theme__light {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+    font-size: 14px;
+    line-height: 1.375;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    background: #F5F2F0;
+    color: #728fcb;
+  }
+
+  pre > code[class*="language-"] {
+    font-size: 1em;
+  }
+
+  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #f5ede9;
+    color: #FF6188;
+  }
+
+  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+  code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #f5ede9;
+    color: #FF6188;
+  }
+
+  /* Code blocks */
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #b6ad9a;
+  }
+
+  .token.punctuation {
+    color: #b6ad9a;
+  }
+
+  .token.namespace {
+    opacity: .7;
+  }
+
+  .token.tag,
+  .token.operator,
+  .token.number {
+    color: #063289;
+  }
+
+  .token.property,
+  .token.function {
+    color: #b29762;
+  }
+
+  .token.tag-id,
+  .token.selector,
+  .token.atrule-id {
+    color: #2d2006;
+  }
+
+  code.language-javascript,
+  .token.attr-name {
+    color: #896724;
+  }
+
+  code.language-css,
+  code.language-scss,
+  .token.boolean,
+  .token.string,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .language-scss .token.string,
+  .style .token.string,
+  .token.attr-value,
+  .token.keyword,
+  .token.control,
+  .token.directive,
+  .token.unit,
+  .token.statement,
+  .token.regex,
+  .token.atrule {
+    color: #728fcb;
+  }
+
+  .token.placeholder,
+  .token.variable {
+    color: #93abdc;
+  }
+
+  .token.deleted {
+    text-decoration: line-through;
+  }
+
+  .token.inserted {
+    border-bottom: 1px dotted #2d2006;
+    text-decoration: none;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.important {
+    color: #896724;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  pre > code.highlight {
+    outline: .4em solid #896724;
+    outline-offset: .4em;
+  }
+
+  /* overrides color-values for the Line Numbers plugin
+  * http://prismjs.com/plugins/line-numbers/
+  */
+  .line-numbers .line-numbers-rows {
+    border-right-color: #ece8de;
+  }
+
+  .line-numbers-rows > span:before {
+    color: #cdc4b1;
+  }
+
+  /* overrides color-values for the Line Highlight plugin
+  * http://prismjs.com/plugins/line-highlight/
+  */
+  .line-highlight {
+    background: rgba(45, 32, 6, 0.2);
+    background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+    background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+  }
+}
--- a/assets/sass/prism/_prism.scss
+++ b/assets/sass/prism/_prism.scss
@ -0,0 +1,4 @@
+@import 'dark';
+@import 'light';
+@import 'hacker';
+@import 'solarized';
--- a/assets/sass/prism/_solarized.scss
+++ b/assets/sass/prism/_solarized.scss
@ -0,0 +1,165 @@
+/* Generated with http://k88hudson.github.io/syntax-highlighting-theme-generator/www */
+/* http://k88hudson.github.io/react-markdocs */
+/**
+ * @author k88hudson
+ *
+ * Based on prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+/*********************************************************
+* General
+*/
+.theme__solarized {
+  pre[class*="language-"],
+  code[class*="language-"] {
+      color: #5c6e74;
+      font-size: 13px;
+      text-shadow: none;
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      direction: ltr;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      line-height: 1.5;
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+  }
+
+  pre[class*="language-"]::selection,
+  code[class*="language-"]::selection,
+  pre[class*="language-"]::mozselection,
+  code[class*="language-"]::mozselection {
+      text-shadow: none;
+      background: #b3d4fc;
+  }
+
+  @media print {
+
+      pre[class*="language-"],
+      code[class*="language-"] {
+          text-shadow: none;
+      }
+  }
+
+  pre[class*="language-"] {
+      padding: 1em;
+      margin: .5em 0;
+      overflow: auto;
+      background: #FBF1D1;
+  }
+
+  :not(pre)>code[class*="language-"] {
+      padding: .1em .3em;
+      border-radius: .3em;
+      color: #db4c69;
+      background: #f8f5ec;
+  }
+
+  /*********************************************************
+* Tokens
+*/
+  .namespace {
+      opacity: .7;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+      color: #93a1a1;
+  }
+
+  .token.punctuation {
+      color: #999999;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+      color: #990055;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+      color: #669900;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+      color: #a67f59;
+      background: #FBF1D1;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+      color: #0077aa;
+  }
+
+  .token.function {
+      color: #dd4a68;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+      color: #ee9900;
+  }
+
+  .token.important,
+  .token.bold {
+      font-weight: bold;
+  }
+
+  .token.italic {
+      font-style: italic;
+  }
+
+  .token.entity {
+      cursor: help;
+  }
+
+  /*********************************************************
+* Line highlighting
+*/
+  pre[data-line] {
+      position: relative;
+  }
+
+  pre[class*="language-"]>code[class*="language-"] {
+      position: relative;
+      z-index: 1;
+  }
+
+  .line-highlight {
+      position: absolute;
+      left: 0;
+      right: 0;
+      padding: inherit 0;
+      margin-top: 1em;
+      background: #f7ebc6;
+      box-shadow: inset 5px 0 0 #f7d87c;
+      z-index: 0;
+      pointer-events: none;
+      line-height: inherit;
+      white-space: pre;
+  }
+}
--- a/assets/sass/themes/_dark.scss
+++ b/assets/sass/themes/_dark.scss
@ -0,0 +1,92 @@
+$dark: (
+    footer-background-color: #403E41,
+    footer-color: #bdbdbd, 
+    link: #FFD866,
+    link-hover: #FF6188,
+    title-color: #ffd866,
+    meta-color: #FCFCFA,
+    body-color: #FCFCFA,
+    hr-color: #fcfcfa,
+    body-background-color: #2D2A2E,
+    backdrop-background-color: #212121,
+    dropdown-border-color: #212121,
+    dropdown-border-top-color: #424242,
+    dropdown-item-active-background-color: #424242,
+    dropdown-title-background-color: #2D2A2E,
+    dropdown-content-background-color: #595B5C,
+    dropdown-footer-item-color: #bdbdbd,
+    dropdown-item-hover-background-color: #727072,
+    dropdown-item-hover-color: #FCFCFA,
+    dropdown-item-color: #FCFCFA,    
+    navbar-border-bottom-color: #2D2A2E,
+    navbar-background-color: #403E41,
+    navbar-title-color: #FCFCFA,
+    navbar-title-hover-color: #FFD866,
+    navbar-menu-hover-background-color: lighten(#403E41, 5%),
+    navbar-dropdown-item-hover-color: #FFD866,
+    navbar-dropdown-item-hover-background-color: #595B5C,
+    input-color: #FCFCFA,
+    input-background-color: #403E41,
+    input-border-color: #595B5C,
+    input-hover-border-color: #727072,
+    input-focus-border-color: #727072,
+    sidebar-title-color: #aed581,
+    sidebar-li-color: #FCFCFA,
+    taxo-title-color: #bdbdbd,
+    taxo-tags-background-color: #212121,
+    taxo-tags-color: #78DCE8,
+    taxo-series-background-color: #212121,
+    taxo-series-color: #EA9C77,
+    taxo-categories-background-color: #212121,
+    taxo-categories-color: #AB9DF2,
+    breadcrumb-item-color: #82aaff,
+    breadcrumb-background-color: #212121,
+    breadcrumb-item-active-color: #bdbdbd,
+    list-header-title-color: #FCFCFA,
+    figcaption-color: #bdbdbd,
+    figcaption-strong-color: #FCFCFA,
+    single-hr-background-color: #595B5C,
+    single-blockquote-border-color: #FCFCFA,
+    single-header-title-color: #FCFCFA,
+    single-contents-title-color: #aed581,
+    related-header-title-color: #FCFCFA,
+    related-link-color: #A9DC76,
+    content-pre-main-color: #FFA7C4,
+    content-pre-background-color: #011627,
+    content-code-color: #FCFCFA,
+    content-code-background-color: #595B5C,
+    burger-menu-color: #FCFCFA,
+    social-icon-color: #bdbdbd,
+    social-icon-hover-color: lighten(#bdbdbd, 20%),
+    pagination-link-color: #82aaff,
+    pagination-background-color: #212121,
+    pagination-disabled-color: #757575,
+    pagination-number-color: #FCFCFA,
+    photoswipe-hover-color: #FCFCFA,
+    photoswipe-color: #FCFCFA,
+    photoswipe-hover-background-color: #727072,
+    photoswipe-background-color: #403E41,
+    terms-title-color: #727072,
+    terms-tags-color: #78DCE8,
+    terms-categories-color: #AB9DF2,
+    terms-series-color: #EA9C77,
+    terms-len-color: #727072,
+    toc-label-color: #727072,
+    toc-title-color: #90a4ae,
+    toc-vertical-line: #727072,
+    toc-vertical-line-active: #FF6188,
+    search-placeholder-color: #727072,
+    search-color: #FCFCFA,
+    search-icon-color: #727072,
+    search-background-color: #212121,
+    search-content-background-color: #595B5C,
+    search-hover-background-color: #727072,
+    mark-color: #FCFCFA,
+    mark-background-color: #FF6188,
+    archive-key-color: #FCFCFA,
+    archive-type-color: #FCFCFA,
+    archive-meta-color: #aed581,
+    archive-key-background-color: #FF6188,
+    archive-type-background-color: #82aaff,
+    archive-hover-line-color: #FF6188,
+);
--- a/assets/sass/themes/_hacker.scss
+++ b/assets/sass/themes/_hacker.scss
@ -0,0 +1,92 @@
+$primary-color: #1FFF2A;
+$secondary-color: #C7BA00;
+
+$hacker: (
+    footer-background-color: #252526,
+    footer-color: $secondary-color,
+    link: $primary-color,
+    link-hover: #FF6188,
+    title-color: #A1AD64,
+    meta-color: #CDF5CC,
+    body-color: $primary-color,
+    hr-color: $secondary-color,
+    body-background-color: #151715,
+    backdrop-background-color: #333333,
+    dropdown-border-color: #7B4D94,
+    dropdown-border-top-color: #6B6B6B,
+    dropdown-item-active-background-color: lighten(#151715, 12%),
+    dropdown-title-background-color: #151715,
+    dropdown-content-background-color: lighten(#151715, 5%),
+    dropdown-footer-item-color: $primary-color,
+    dropdown-item-hover-background-color: lighten(#151715, 20%),
+    dropdown-item-hover-color: #FCFCFA,
+    dropdown-item-color: #FCFCFA,
+    navbar-border-bottom-color: #252526,
+    navbar-background-color: #252526,
+    navbar-title-color: #E3CD26,
+    navbar-title-hover-color: $primary-color,
+    navbar-menu-hover-background-color: lighten(#151715, 20%),
+    navbar-dropdown-item-hover-color: $primary-color,
+    navbar-dropdown-item-hover-background-color: lighten(#151715, 12%),
+    sidebar-title-color: #E3CD26,
+    sidebar-li-color: $primary-color,
+    taxo-title-color: #996287,
+    taxo-tags-background-color: lighten(#151715, 10%),
+    taxo-tags-color: $primary-color,
+    taxo-series-background-color: lighten(#151715, 10%),
+    taxo-series-color: $primary-color,
+    taxo-categories-background-color: lighten(#151715, 10%),
+    taxo-categories-color: $primary-color,
+    taxo-background-color-hover: lighten(#151715, 20%),
+    breadcrumb-item-color: #E08C48,
+    breadcrumb-background-color: #252526,
+    breadcrumb-item-active-color: #6B6B6B,
+    list-header-title-color: #A1AD64,
+    figcaption-color: $primary-color,
+    figcaption-strong-color: #FCFCFA,
+    single-hr-background-color: #E08C48,
+    single-blockquote-border-color: #E08C48,
+    single-header-title-color: #FCFCFA,
+    single-contents-title-color: #A1AD64,
+    related-header-title-color: #FCFCFA,
+    related-link-color: $secondary-color,
+    content-pre-main-color: $primary-color,
+    content-pre-background-color: #202420,
+    content-code-color: #f3ff6e,
+    content-code-background-color: lighten(#151715, 25%),
+    burger-menu-color: $primary-color,
+    social-icon-color: #9e9e9e,
+    social-icon-hover-color: darken(#9e9e9e, 20%),
+    pagination-link-color: #7B4D94,
+    pagination-background-color: #252526,
+    pagination-disabled-color: #424242,
+    pagination-number-color: #FCFCFA,
+    photoswipe-hover-color: #FCFCFA,
+    photoswipe-color: #FCFCFA,
+    photoswipe-hover-background-color: #727072,
+    photoswipe-background-color: #403E41,
+    terms-title-color: $secondary-color,
+    terms-tags-color: $primary-color,
+    terms-categories-color: $primary-color,
+    terms-series-color: $primary-color,
+    terms-len-color: #E08C48,
+    toc-label-color: #727072,
+    toc-title-color: #727072,
+    toc-vertical-line: #727072,
+    toc-vertical-line-active: #FF6188,
+    search-placeholder-color: #727072,
+    search-color: $primary-color,
+    search-icon-color: #727072,
+    search-background-color: #252526,
+    search-content-color: $primary-color,
+    search-content-background-color: lighten(#252526, 7%),
+    search-hover-background-color: lighten(#252526, 14%),
+    mark-color: #FCFCFA,
+    mark-background-color: #FF6188,
+    archive-key-color: #FCFCFA,
+    archive-type-color: #FCFCFA,
+    archive-meta-color: #E3CD26,
+    archive-key-background-color: #E08C48,
+    archive-type-background-color: #855E78,
+    archive-hover-line-color: #FF6188,
+);
--- a/assets/sass/themes/_light.scss
+++ b/assets/sass/themes/_light.scss
@ -0,0 +1,92 @@
+$primary-color: #607d8b;
+$secondary-color: #bdbdbd;
+
+$light: (
+    footer-background-color: #eeeeee,
+    footer-color: #424242,  
+    link: $primary-color,
+    link-hover: #FF6188,
+    title-color: $primary-color,
+    meta-color: #424242,
+    body-color: #424242,
+    hr-color: #fcfcfa,
+    body-background-color: #fafafa,
+    backdrop-background-color: #e0e0e0,
+    dropdown-border-color: #bdbdbd,
+    dropdown-border-top-color: #e0e0e0,    
+    dropdown-item-active-background-color: #e0e0e0,
+    dropdown-title-background-color: #fafafa,
+    dropdown-content-background-color: #fafafa,
+    dropdown-footer-item-color: #424242,
+    dropdown-item-hover-background-color: #bdbdbd,
+    dropdown-item-hover-color: #FCFCFA,
+    dropdown-item-color: #424242,    
+    navbar-border-bottom-color: #e0e0e0,
+    navbar-background-color: #eeeeee,
+    navbar-title-color: #424242,
+    navbar-title-hover-color: $primary-color,
+    navbar-menu-hover-background-color: darken(#eeeeee, 5%),
+    navbar-dropdown-item-hover-color: $primary-color,
+    navbar-dropdown-item-hover-background-color: #bdbdbd,
+    sidebar-title-color: #424242,
+    sidebar-li-color: #424242,
+    taxo-title-color: #424242,
+    taxo-tags-background-color: #9e9e9e,
+    taxo-tags-color: #eeeeee,
+    taxo-series-background-color: #9e9e9e,
+    taxo-series-color: #eeeeee,
+    taxo-categories-background-color: #9e9e9e,
+    taxo-categories-color: #eeeeee,
+    taxo-background-color-hover: darken(#9e9e9e, 5%),
+    breadcrumb-item-color: #424242,
+    breadcrumb-background-color: #eeeeee,
+    breadcrumb-item-active-color: #bdbdbd,
+    list-header-title-color: #424242,
+    figcaption-color: #bdbdbd,
+    figcaption-strong-color: #424242,
+    single-hr-background-color: #bdbdbd,
+    single-blockquote-border-color: #bdbdbd,
+    single-header-title-color: #424242,
+    single-contents-title-color: $primary-color,
+    related-header-title-color: #424242,
+    related-link-color: $primary-color,   
+    content-pre-main-color: $primary-color,
+    content-pre-background-color: #F5F2F0,
+    content-code-color: #212121,
+    content-code-background-color: #F5F2F0,
+    burger-menu-color: #9e9e9e,
+    social-icon-color: #9e9e9e,
+    social-icon-hover-color: darken(#9e9e9e, 20%),
+    pagination-link-color: #424242,
+    pagination-background-color: #eeeeee,
+    pagination-disabled-color: #bdbdbd,
+    pagination-number-color: #757575,
+    photoswipe-hover-color: #FCFCFA,
+    photoswipe-color: #FCFCFA,
+    photoswipe-hover-background-color: #727072,
+    photoswipe-background-color: #403E41,
+    terms-title-color: #9e9e9e,
+    terms-tags-color: #424242,
+    terms-categories-color: #424242,
+    terms-series-color: #424242,
+    terms-len-color: #727072,
+    toc-label-color: #727072,
+    toc-title-color: #727072,
+    toc-vertical-line: #727072,
+    toc-vertical-line-active: #FF6188,
+    search-placeholder-color: #eeeeee,
+    search-color: #FCFCFA,
+    search-icon-color: #eeeeee,
+    search-background-color: #9e9e9e,
+    search-content-color: #FCFCFA,
+    search-content-background-color: #9e9e9e,
+    search-hover-background-color: darken(#9e9e9e, 10%),
+    mark-color: #FCFCFA,
+    mark-background-color: #FF6188,
+    archive-key-color: #FCFCFA,
+    archive-meta-color: #424242,
+    archive-type-color: darken($secondary-color, 40%),
+    archive-key-background-color: $primary-color,
+    archive-type-background-color: $secondary-color,
+    archive-hover-line-color: #FF6188,
+);
--- a/assets/sass/themes/_solarized.scss
+++ b/assets/sass/themes/_solarized.scss
@ -0,0 +1,92 @@
+$primary-color: #B58900;
+$secondary-color: #ffb300;
+
+$solarized: (
+    footer-background-color: #EEE8D5,
+    footer-color: #424242,
+    link: $primary-color,
+    link-hover: #FF6188,
+    title-color: $primary-color,
+    meta-color: lighten($primary-color, 5%),
+    body-color: #424242,
+    hr-color: #ffb300,
+    body-background-color: #FDF7E3,
+    backdrop-background-color: #DDD6C7,
+    dropdown-border-color: $primary-color,
+    dropdown-border-top-color: lighten($primary-color, 10%),
+    dropdown-item-active-background-color: #FBF1D1,
+    dropdown-title-background-color: #fafafa,
+    dropdown-content-background-color: #fafafa,
+    dropdown-footer-item-color: #424242,
+    dropdown-item-hover-background-color: darken(#FBF1D1, 5%),
+    dropdown-item-hover-color: $primary-color,
+    dropdown-item-color: #424242,    
+    navbar-border-bottom-color: $primary-color,
+    navbar-background-color: #EEE8D5,
+    navbar-title-color: #424242,
+    navbar-title-hover-color: $primary-color,
+    navbar-menu-hover-background-color: darken(#FBF1D1, 5%),
+    navbar-dropdown-item-hover-color: $primary-color,
+    navbar-dropdown-item-hover-background-color: #bdbdbd,
+    sidebar-title-color: $secondary-color,
+    sidebar-li-color: #424242,
+    taxo-title-color: $primary-color,
+    taxo-tags-background-color: #FBF1D1,
+    taxo-tags-color: $primary-color,
+    taxo-series-background-color: #FBF1D1,
+    taxo-series-color: $primary-color,
+    taxo-categories-background-color: #FBF1D1,
+    taxo-categories-color: $primary-color,
+    taxo-background-color-hover: darken(#FBF1D1, 5%),
+    breadcrumb-item-color: #424242,
+    breadcrumb-background-color: #FBF1D1,
+    breadcrumb-item-active-color: #bdbdbd,
+    list-header-title-color: #424242,
+    figcaption-color: $secondary-color,
+    figcaption-strong-color: $primary-color,
+    single-hr-background-color: #bdbdbd,
+    single-blockquote-border-color: #bdbdbd,
+    single-header-title-color: #424242,
+    single-contents-title-color: $primary-color,
+    related-header-title-color: #424242,
+    related-link-color: $secondary-color,   
+    content-pre-main-color: $primary-color,
+    content-pre-background-color: #FBF1D1,
+    content-code-color: #424242,
+    content-code-background-color: #FBF1D1,
+    burger-menu-color: $primary-color,
+    social-icon-color: #9e9e9e,
+    social-icon-hover-color: darken(#9e9e9e, 20%),
+    pagination-link-color: #455a64,
+    pagination-background-color: #FBF1D1,
+    pagination-disabled-color: #bdbdbd,
+    pagination-number-color: #455a64,
+    photoswipe-hover-color: #FCFCFA,
+    photoswipe-color: #FCFCFA,
+    photoswipe-hover-background-color: #727072,
+    photoswipe-background-color: #403E41,
+    terms-title-color: lighten($primary-color, 7%),
+    terms-tags-color: $secondary-color,
+    terms-categories-color: $primary-color,
+    terms-series-color: $primary-color,
+    terms-len-color: #727072,
+    toc-label-color: #727072,
+    toc-title-color: #727072,
+    toc-vertical-line: #727072,
+    toc-vertical-line-active: #FF6188,
+    search-placeholder-color: $primary-color,
+    search-color: $primary-color,
+    search-icon-color: $primary-color,
+    search-background-color: #FBF1D1,
+    search-content-color: $primary-color,
+    search-content-background-color: #FBF1D1,
+    search-hover-background-color: darken(#FBF1D1, 10%),
+    mark-color: #FCFCFA,
+    mark-background-color: #FF6188,
+    archive-key-color: #FCFCFA,
+    archive-meta-color: #455a64,
+    archive-type-color: darken($secondary-color, 20%),
+    archive-key-background-color: $primary-color,
+    archive-type-background-color: $secondary-color,
+    archive-hover-line-color: #FF6188,
+);
--- a/assets/sass/themes/_theme.scss
+++ b/assets/sass/themes/_theme.scss
@ -0,0 +1,11 @@
+@import 'dark';
+@import 'light';
+@import 'hacker';
+@import 'solarized';
+
+$themes: (
+  dark: $dark,
+  light: $light,
+  hacker: $hacker,  
+  solarized: $solarized,
+);
--- a/config/_default/config.toml
+++ b/config/_default/config.toml
@ -0,0 +1,139 @@
+baseURL = "/"
+
+archetypeDir = "archetypes"
+assetDir = "assets"
+contentDir = "content"
+dataDir = "data"
+layoutDir = "layouts"
+publishDir = "public"
+staticDir = "static"
+themesDir = "themes"
+
+languageCode = "en-us"
+languageName = "English"
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = true
+hasCJKLanguage = false
+
+summaryLength = 70
+
+googleAnalytics = ""
+copyright = "MIT©zzossig"
+timeout = 10000
+
+buildDrafts = false
+buildExpired = false
+buildFuture = false
+canonifyURLs = false
+disableAliases = false
+disableHugoGeneratorInject = false
+disableKinds = []
+disableLiveReload = false
+disablePathToLower  = false
+enableEmoji = true
+enableGitInfo = false
+enableInlineShortcodes = true
+enableMissingTranslationPlaceholders = false
+enableRobotsTXT = true
+footnoteAnchorPrefix = ""
+footnoteReturnLinkContents = ""
+log = false
+logFile = ""
+newContentEditor = ""
+noChmod = false
+noTimes = false
+paginate = 7
+paginatePath = "page"
+pluralizeListTitles = true
+pygmentsCodeFencesGuessSyntax = true
+pygmentsUseClasses = true
+pygmentsStyle = "monokai"
+relativeURLs = false
+refLinksErrorLevel = "ERROR"
+rssLimit = 100
+sectionPagesMenu = ""
+titleCaseStyle = "AP"
+uglyURLs = false
+verbose = false
+verboseLog = false
+watch = false
+
+[outputs]
+  home = [ "HTML", "RSS", "JSON" ]
+
+[taxonomies]
+  category = "categories"
+  tag = "tags"
+  series = "series"
+
+[blackfriday]
+  taskLists = true
+  smartypants = true
+  smartypantsQuotesNBSP = false
+  angledQuotes = false
+  fractions = true
+  smartDashes = true
+  latexDashes = true
+  hrefTargetBlank = false
+  nofollowLinks = false
+  noreferrerLinks = false
+  plainIDAnchors = true
+  # enable extensions
+  extensions = ["noIntraEmphasis", "tables", "fencedCode", "autolink", "strikethrough", "spaceHeaders", "footnotes", "headerIds", "autoHeaderIds", "backslashLineBreak", "definitionLists", "joinLines"]
+  # disable extensions
+  extensionsmask = ["laxHtmlBlocks", "hardLineBreak", "tabSizeEight", "noEmptyLineBeforeBlock", "titleblock"]
+  skipHTML = false
+
+[caches]
+
+  [caches.getjson]
+    dir = ":cacheDir/:project"
+    maxAge = -1
+
+  [caches.getcsv]
+    dir = ":cacheDir/:project"
+    maxAge = -1
+
+  [caches.images]
+    dir = ":resourceDir/_gen"
+    maxAge = -1
+
+  [caches.assets]
+    dir = ":resourceDir/_gen"
+    maxAge = -1
+
+  [caches.modules]
+    dir = ":cacheDir/modules"
+    maxAge = -1
+
+[frontmatter]
+  date = ["date", "publishDate", "lastmod"]
+  lastmod = [":git", "lastmod", "date", "publishDate"]
+  publishDate = ["publishDate", "date"]
+  expiryDate = ["expiryDate"]
+
+[imaging]
+  resampleFilter = "box"
+  quality = 75
+  anchor = "smart"
+
+  [imaging.exif]
+    includeFields = ""
+    excludeFields = ""
+    disableDate = false
+    disableLatLong = false
+
+[module]
+  noProxy = "none"
+  private = "*.*"
+  proxy = "direct"
+
+  [module.hugoVersion]
+    extended = false
+    max = ""
+    min = ""
+
+[sitemap]
+  changefreq = "monthly"
+  filename = "sitemap.xml"
+  priority = 0.5
--- a/config/_default/languages.toml
+++ b/config/_default/languages.toml
@ -0,0 +1,9 @@
+[en]
+  title = "Hugo Zzo Theme"
+  languageName = "English"
+  weight = 1
+    
+[ko]
+  title = "Hugo Zzo Theme"
+  languageName = "한국어"
+  weight = 2
--- a/config/_default/menus.en.toml
+++ b/config/_default/menus.en.toml
@ -0,0 +1,39 @@
+[[main]]
+  identifier = "about"
+  name = "about"
+  url = "/en/about/"
+  weight = 1
+
+[[main]]
+    identifier = "archive"
+    name = "archive"
+    url = "/en/archive/"
+    weight = 2
+
+[[main]]
+  identifier = "gallery"
+  name = "gallery"
+  url = "/en/gallery"
+  weight = 3
+    
+[[main]]
+    parent = "gallery"
+    name = "cartoon"
+    url = "/en/gallery/cartoon"
+
+[[main]]
+    parent = "gallery"
+    name = "photo"
+    url = "/en/gallery/photo"
+
+[[main]]
+    identifier = "posts"
+    name = "posts"
+    url = "/en/posts/"
+    weight = 4
+
+[[main]]
+  identifier = "notes"
+  name = "notes"
+  url = "/en/notes/"
+  weight = 5
--- a/config/_default/menus.ko.toml
+++ b/config/_default/menus.ko.toml
@ -0,0 +1,39 @@
+[[main]]
+  identifier = "about"
+  name = "about"
+  url = "/ko/about/"
+  weight = 1
+
+[[main]]
+    identifier = "archive"
+    name = "archive"
+    url = "/ko/archive/"
+    weight = 2
+
+[[main]]
+  identifier = "gallery"
+  name = "gallery"
+  url = "/ko/gallery/"
+  weight = 3
+    
+[[main]]
+    parent = "gallery"
+    name = "cartoon"
+    url = "/ko/gallery/cartoon/"
+
+[[main]]
+    parent = "gallery"
+    name = "photo"
+    url = "/ko/gallery/photo/"
+
+[[main]]
+    identifier = "posts"
+    name = "posts"
+    url = "/ko/posts/"
+    weight = 4
+    
+[[main]]
+  identifier = "notes"
+  name = "notes"
+  url = "/ko/notes/"
+  weight = 5
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -0,0 +1,35 @@
+description = "The Zzo theme for Hugo example site."
+
+# body
+enableToc = true
+enableBreadcrumb = true
+enableCustomScrollbar = true
+enablePhotoSwipe = true
+enableSearch = true
+enableMark = true
+
+# sidebar
+enableSidebarTags = true
+enableSidebarSeries = true
+enableSidebarCategories = true
+
+# footer
+showPoweredBy = true
+showFeedLinks = true
+showSocialLinks = true
+enableLangChange = true
+enableThemeChange = true
+themeOptions = ["dark", "light", "hacker", "solarized"]
+[socialOptions]
+  facebook = "http://example.org/"
+  twitter = "http://example.org/"
+  github = "http://example.org/"
+  stack-overflow = ""
+  instagram = ""
+  google-plus = ""
+  youtube = ""
+  medium = ""
+  tumblr = ""
+  linkedin = ""
+  pinterest = "http://example.org/"
+  stack-exchange = ""
--- a/exampleSite/content/about/index.ko.md
+++ b/exampleSite/content/about/index.ko.md
@ -0,0 +1,6 @@
+---
+title: "About"
+date: 2019-10-09T11:44:14+09:00
+type: "about"
+---
+
--- a/exampleSite/content/about/index.md
+++ b/exampleSite/content/about/index.md
@ -0,0 +1,27 @@
+++
+title = "About"
+desc = "Hugo, the world’s fastest framework for building websites"
+type = "about"
+date = "2019-02-28"
+++
+
+Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
+
+Hugo makes use of a variety of open source projects including:
+
+* https://github.com/russross/blackfriday
+* https://github.com/alecthomas/chroma
+* https://github.com/muesli/smartcrop
+* https://github.com/spf13/cobra
+* https://github.com/spf13/viper
+
+Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
+
+Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
+
+Websites built with Hugo are extremelly fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
+
+Learn more and contribute on [GitHub](https://github.com/gohugoio).
+
+
+
--- a/exampleSite/content/archive/_index.ko.md
+++ b/exampleSite/content/archive/_index.ko.md
@ -0,0 +1,7 @@
+---
+title: "Archive"
+date: 2019-10-19T11:44:14+09:00
+type: "archive"
+---
+
+archive page
--- a/exampleSite/content/archive/_index.md
+++ b/exampleSite/content/archive/_index.md
@ -0,0 +1,7 @@
+---
+title: "Archive"
+date: 2019-10-19T11:44:14+09:00
+type: "archive"
+---
+
+archive page
--- a/exampleSite/content/gallery/cartoon/index.ko.md
+++ b/exampleSite/content/gallery/cartoon/index.ko.md
@ -0,0 +1,6 @@
+---
+title: "Cartoon"
+date: 2018-10-11T10:20:16+09:00
+type: "gallery"
+desc: "cartoon gallery"
+---
--- a/exampleSite/content/gallery/cartoon/index.md
+++ b/exampleSite/content/gallery/cartoon/index.md
@ -0,0 +1,6 @@
+---
+title: "Cartoon"
+date: 2018-10-11T10:20:16+09:00
+type: "gallery"
+desc: "cartoon gallery"
+---
--- a/exampleSite/content/gallery/photo/index.ko.md
+++ b/exampleSite/content/gallery/photo/index.ko.md
@ -0,0 +1,6 @@
+---
+title: "Photo"
+date: 2018-10-12T10:20:16+09:00
+type: "gallery"
+desc: "포토 갤러리"
+---
--- a/exampleSite/content/gallery/photo/index.md
+++ b/exampleSite/content/gallery/photo/index.md
@ -0,0 +1,6 @@
+---
+title: "Photo"
+date: 2018-10-12T10:20:16+09:00
+type: "gallery"
+desc: "photo gallery"
+---
--- a/exampleSite/content/notes/hugo/hugo-1.md
+++ b/exampleSite/content/notes/hugo/hugo-1.md
@ -0,0 +1,31 @@
+---
+title: "Hugo 1"
+date: 2017-10-11T10:33:41+09:00
+desc: "Hugo 1 Description"
+tags:
+- hugo
+series:
+-
+categories:
+- hugo
+---
+
+Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
+
+Veniam deserunt ex ullamco laboris et elit culpa enim. Irure ipsum dolore sint nisi aliquip labore fugiat magna esse ad nostrud in. Eu aliqua mollit tempor proident pariatur voluptate.
+
+Esse quis incididunt adipisicing minim nulla ipsum ea qui Lorem et officia sit aute. Labore nulla exercitation amet ex tempor non ullamco reprehenderit ea exercitation nisi reprehenderit in. Do eiusmod nostrud enim cillum culpa. Ut culpa officia deserunt nostrud dolore consequat nulla ullamco culpa occaecat. Ipsum consectetur minim id ut ea reprehenderit enim aliquip occaecat mollit velit adipisicing. Elit cupidatat voluptate quis deserunt in do consectetur.
+
+Nostrud non anim culpa quis ea ad nisi non sit ea aute. Laboris sunt ipsum sit ad ut sint cillum mollit nisi anim pariatur Lorem sint. Nostrud proident ea sit velit eiusmod laboris ullamco qui. Reprehenderit nulla nisi quis cillum do est quis cillum et incididunt. Pariatur deserunt aliqua dolor ex velit. Veniam consectetur consectetur eu amet Lorem nisi ex ex consectetur Lorem aute deserunt amet aute. Et deserunt exercitation magna velit.
+
+Velit labore pariatur tempor reprehenderit laboris sit adipisicing. Nisi exercitation nostrud magna ullamco fugiat laborum ipsum esse amet nostrud dolore exercitation et id. Eiusmod et elit dolor ipsum culpa excepteur fugiat velit nisi et ea.
+
+Culpa et incididunt ipsum cillum incididunt nostrud velit. Elit aute cillum Lorem ad exercitation eiusmod laborum anim duis dolor reprehenderit qui ad sint. Nulla reprehenderit duis commodo in velit eiusmod veniam fugiat et aliqua pariatur fugiat. Lorem velit ex ad cillum. Magna ullamco cillum ad deserunt non adipisicing aliqua tempor velit.
+
+Ipsum eiusmod eiusmod dolor irure sint. Sunt in nostrud ad sint labore aliquip tempor consectetur aliquip pariatur. Magna velit veniam tempor eu est eu sit est. Tempor in proident sunt veniam ullamco. Est veniam cupidatat est cillum magna pariatur deserunt aute est elit eu cillum nulla ex. Aute magna amet nisi ut nostrud pariatur sunt Lorem labore adipisicing eiusmod elit.
+
+Duis adipisicing eu duis proident laborum incididunt elit sit enim ipsum commodo Lorem. Amet aliquip nulla amet excepteur. Minim laborum laborum eiusmod nisi enim. Est Lorem nisi culpa dolor consequat. Consectetur cillum Lorem pariatur pariatur amet consequat mollit consequat magna commodo. Amet non commodo ex quis.
+
+Est labore dolor nostrud consectetur ullamco fugiat ad voluptate elit sit mollit esse ullamco adipisicing. Aute ea Lorem ipsum eiusmod aute fugiat velit eiusmod consequat. Ea enim enim cillum amet in commodo elit pariatur et incididunt enim non fugiat ex. Aliqua elit minim laborum cupidatat cillum consequat aute elit minim aliqua. Voluptate cillum id proident nostrud est incididunt magna id excepteur quis non ut qui id.
+
+Et ipsum aliqua commodo qui proident ea voluptate incididunt cillum. Tempor eu veniam non minim elit. In aliqua ipsum incididunt magna pariatur quis aliquip ut minim culpa.
--- a/exampleSite/content/notes/sublist/_index.md
+++ b/exampleSite/content/notes/sublist/_index.md
@ -0,0 +1,6 @@
+---
+title: "Sub List"
+date: 2012-10-09T11:44:14+09:00
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec. 
--- a/exampleSite/content/notes/sublist/go/go-1/go-1-1/go-1-1-1/go-5.md
+++ b/exampleSite/content/notes/sublist/go/go-1/go-1-1/go-1-1-1/go-5.md
@ -0,0 +1,15 @@
+---
+title: "Go 5"
+date: 2012-11-01T10:33:41+09:00
+desc: "Go 5 Description"
+tags:
+- 
+series:
+-
+categories:
+- 
+---
+
+Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
+
+Veniam deserunt ex ullamco laboris et elit culpa enim. Irure ipsum dolore sint nisi aliquip labore fugiat magna esse ad nostrud in. Eu aliqua mollit tempor proident pariatur voluptate.
--- a/exampleSite/content/notes/sublist/go/go-1/go-1-1/go-1.md
+++ b/exampleSite/content/notes/sublist/go/go-1/go-1-1/go-1.md
@ -0,0 +1,15 @@
+---
+title: "Go 1"
+date: 2012-11-01T10:33:41+09:00
+desc: "Go 1 Description"
+tags:
+- 
+series:
+-
+categories:
+- 
+---
+
+Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
+
+Veniam deserunt ex ullamco laboris et elit culpa enim. Irure ipsum dolore sint nisi aliquip labore fugiat magna esse ad nostrud in. Eu aliqua mollit tempor proident pariatur voluptate.
--- a/exampleSite/content/notes/sublist/go/go-1/go-2.md
+++ b/exampleSite/content/notes/sublist/go/go-1/go-2.md
@ -0,0 +1,15 @@
+---
+title: "Go 2"
+date: 2012-11-01T10:33:41+09:00
+desc: "Go 2 Description"
+tags:
+- 
+series:
+-
+categories:
+- 
+---
+
+Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
+
+Veniam deserunt ex ullamco laboris et elit culpa enim. Irure ipsum dolore sint nisi aliquip labore fugiat magna esse ad nostrud in. Eu aliqua mollit tempor proident pariatur voluptate.
--- a/exampleSite/content/notes/sublist/go/go-4.md
+++ b/exampleSite/content/notes/sublist/go/go-4.md
@ -0,0 +1,15 @@
+---
+title: "Go 4"
+date: 2012-11-01T10:33:41+09:00
+desc: "Go 4 Description"
+tags:
+- 
+series:
+-
+categories:
+- 
+---
+
+Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
+
+Veniam deserunt ex ullamco laboris et elit culpa enim. Irure ipsum dolore sint nisi aliquip labore fugiat magna esse ad nostrud in. Eu aliqua mollit tempor proident pariatur voluptate.
--- a/exampleSite/content/notes/sublist/post-1/index.md
+++ b/exampleSite/content/notes/sublist/post-1/index.md
@ -0,0 +1,27 @@
+---
+title: "Post-1"
+date: 2019-10-09T11:44:14+09:00
+series:
+- Go Web Dev
+tags:
+- Development
+- Go
+- fast
+- Blogging
+categories:
+- cTest
+featured_video: "1.mp4"
+featured_video_poster: "1.jpg"
+desc: "this is description"
+---
+
+post-1 content
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec. Quisque metus tellus, tincidunt eu consequat consequat, placerat sed ante. Cras pulvinar eros ex, vel luctus eros viverra sed. Donec nec quam aliquam, ultricies neque sed, sollicitudin lorem. Aenean faucibus, velit et facilisis semper, leo tellus pellentesque orci, non suscipit libero ipsum sed lacus. Fusce pharetra arcu sed tellus convallis, vel hendrerit turpis rhoncus.
+
+Vestibulum ac augue sed est feugiat cursus. Suspendisse at quam eu eros eleifend euismod. Integer at libero ut ex ultricies tincidunt sit amet id est. In pulvinar orci ac faucibus varius. Proin a mauris posuere, ullamcorper tellus quis, porttitor eros. Pellentesque sollicitudin leo id tellus interdum efficitur. Ut massa odio, auctor id ante a, suscipit tincidunt dolor. Cras vitae libero ut lorem tempus venenatis eu quis mi. Aenean scelerisque convallis nisi. Morbi porttitor imperdiet pretium. Cras vel felis urna. Aliquam dapibus mauris et pellentesque gravida. Maecenas arcu massa, tristique eget ipsum ac, faucibus cursus leo. Etiam ac est sed risus aliquam tempor. Mauris ut urna risus.
+
+Mauris molestie est nisl. Quisque facilisis condimentum magna et malesuada. Ut faucibus, arcu at euismod tempor, mauris est ultricies sapien, nec convallis lorem enim eget arcu. Maecenas magna dui, hendrerit id viverra nec, dictum a nulla. Ut maximus vestibulum sollicitudin. Vivamus in dapibus urna. Sed at vulputate enim. Donec in odio tempus, tincidunt sem quis, dictum risus. Aenean rhoncus urna lacus, vel ornare ante iaculis nec. Nunc iaculis commodo neque, vitae lobortis sem accumsan nec.
+
+Praesent leo libero, sollicitudin sed laoreet a, dapibus ac quam. Praesent vitae arcu ligula. Vestibulum turpis nunc, cursus sed ante semper, volutpat tempor magna. Nulla malesuada, elit vestibulum gravida imperdiet, mi tortor ultricies urna, in lacinia lectus ligula eget tellus. Vestibulum varius dictum augue, sed efficitur massa maximus eget. In hendrerit sollicitudin orci, nec posuere justo dignissim id. Proin vitae metus purus. Nullam cursus enim at orci scelerisque, vitae dignissim lectus condimentum. Nulla ultrices risus sit amet tortor convallis, ac tristique eros tristique. Fusce maximus fringilla pretium. Vivamus elementum, augue at suscipit tincidunt, quam ligula consectetur lorem, ut posuere nunc elit quis nibh. Nullam in blandit felis. Sed congue pellentesque iaculis.
+
+Donec vitae quam at risus dictum posuere efficitur et ex. Suspendisse augue nibh, mattis eu hendrerit nec, semper vitae nisl. Integer mollis tristique bibendum. Vestibulum rutrum sem vitae tempus fringilla. Nunc interdum purus dui, quis mollis velit convallis vitae. Ut lacinia diam ligula, a consequat lorem gravida eget. Sed semper leo sapien, ut accumsan lectus aliquam nec. Donec eleifend nisi libero, non pretium sem tempor ut. Suspendisse porttitor volutpat finibus. Morbi eget neque pretium, aliquam sapien sit amet, suscipit sapien.
--- a/exampleSite/content/notes/sublist/post-2.md
+++ b/exampleSite/content/notes/sublist/post-2.md
@ -0,0 +1,16 @@
+---
+title: "Post-2"
+date: 2019-10-09T11:44:14+09:00
+series:
+- Go Web Dev
+tags:
+- Go
+- fast
+- Blogging
+categories:
+- cTest
+featured_image: "tree.jpg"
+desc: "this is description2"
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec. 
--- a/exampleSite/content/notes/sublist/post-3.md
+++ b/exampleSite/content/notes/sublist/post-3.md
@ -0,0 +1,12 @@
+---
+title: "Post-3"
+date: 2019-10-09T11:44:14+09:00
+series:
+- Go Web Dev
+tags:
+- Development
+- Go
+- fast
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget enim lobortis, bibendum massa et, bibendum enim. Nunc eu augue quis ante porta sodales. Mauris vel faucibus magna, dictum sagittis dolor. Nam scelerisque malesuada efficitur. Donec consequat sodales justo, ut aliquam ligula maximus nec.
--- a/exampleSite/content/posts/_index.ko.md
+++ b/exampleSite/content/posts/_index.ko.md
@ -0,0 +1,6 @@
+++
+aliases = ["posts","articles","blog","showcase","docs"]
+title = "Posts"
+author = "Hugo Authors"
+tags = ["index"]
+++
--- a/exampleSite/content/posts/_index.md
+++ b/exampleSite/content/posts/_index.md
@ -0,0 +1,6 @@
+++
+aliases = ["posts","articles","blog","showcase","docs"]
+title = "Posts"
+author = "Hugo Authors"
+tags = ["index"]
+++
--- a/exampleSite/content/posts/emoji-support.md
+++ b/exampleSite/content/posts/emoji-support.md
@ -0,0 +1,47 @@
+++
+author = "Hugo Authors"
+title = "Emoji Support"
+date = "2019-03-05"
+description = "Guide to emoji usage in Hugo"
+tags = [
+    "emoji",
+]
+++
+
+Emoji can be enabled in a Hugo project in a number of ways. 
+<!--more-->
+The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 
+
+To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
+
+
+<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
+<br>
+
+The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
+
+***
+
+**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
+
+{{< highlight html >}}
+.emoji {
+font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+}
+{{< /highlight >}}
+
+{{< css.inline >}}
+<style>
+.emojify {
+	font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
+	font-size: 2rem;
+	vertical-align: middle;
+}
+@media screen and (max-width:650px) {
+    .nowrap {
+	display: block;
+	margin: 25px 0;
+}
+}
+</style>
+{{< /css.inline >}}
--- a/Show More
+++ b/Show More