first commit

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2020 zzossig
+
+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.

README.md

@@ -0,0 +1,358 @@
+## Zdoc theme for Hugo
+
+Thank you for click me!. Zdoc theme is a simple documentation theme powered by Hugo
+
+## Table of contents
+
+* [Features](#features)
+* [Minimum Hugo version](#minimum-hugo-version)
+* [Installation](#installation)
+* [Updating](#updating)
+* [Run example site](#run-example-site)
+* [Configuration](#configuration)
+* [How to make Doc](#how-to-make-doc)
+* [Multi Language](#multi-language)
+* [Favicon](#favicon)
+
+## Features
+
+* Dark mode
+* A mobile menu
+* Simple documentation
+* Search
+* Search Engine Optimization(SEO)
+* Multilingual (i18n)
+* Responsive design
+
+## Minimum Hugo version
+
+Hugo version 0.60.0 or higher is required.
+
+## Installation
+
+First of all, You need to add config files.
+Follow the [Configuration](#configuration) step.
+
+Then, 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-zdoc.git themes/zdoc
+```
+
+If you use git to version control your site, highly recommended, it's best to add the zdoc theme as a submodule.
+
+From the root of your site:
+
+```bash
+git submodule add https://github.com/zzossig/hugo-theme-zdoc.git themes/zdoc
+```
+
+## Updating
+
+From the root of your site:
+
+```bash
+git submodule update --remote --merge
+```
+
+## Run example site
+
+From the root of themes/zdoc/exampleSite:
+
+```bash
+hugo server --themesDir ../..
+```
+
+## Configuration
+
+0. From the root of your site: delete config.toml file and add the files below
+
+1. config folder structure. Keep in mind the underscore on the `_default` folder
+
+```bash
+root
+├── config
+│   ├── _default
+│   │   ├── config.toml
+│   │   ├── languages.toml
+│   │   ├── menus.en.toml
+│   │   ├── params.toml
+```
+
+2. config.toml
+
+```bash
+baseURL = "http://example.org"
+title = "Hugo ZDoc Theme"
+theme = "zdoc"
+
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = true
+hasCJKLanguage = true
+
+copyright = "©{year}, All Rights Reserved"
+timeout = 10000
+enableEmoji = true
+paginate = 13
+rssLimit = 100
+
+googleAnalytics = ""
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      hardWraps = true
+      unsafe = true
+      xHTML = true
+  [markup.highlight]
+    codeFences = true
+    lineNos = true
+    lineNumbersInTable = true
+    noClasses = false
+  [markup.tableOfContents]
+    endLevel = 4
+    ordered = false
+    startLevel = 2
+
+[outputs]
+  home = ["HTML", "RSS", "JSON"]
+
+[taxonomies]
+  tag = "tags"
+```
+
+3. languages.toml
+
+```bash
+[en]
+  title = "Hugo ZDoc Theme"
+  languageName = "English"
+  weight = 1
+
+[ko]
+  title = "Hugo ZDoc Theme"
+  languageName = "한국어"
+  weight = 2
+```
+
+4. menus.en.toml
+
+You shoud make your own menu.
+
+```bash
+[[main]]
+  identifier = "docs"
+  name = "Docs"
+  url = "docs"
+  weight = 1
+
+[[main]]
+  identifier = "updates"
+  name = "Updates"
+  url = "updates"
+  weight = 2
+
+[[main]]
+  identifier = "blog"
+  name = "Blog"
+  url = "blog"
+  weight = 3
+...
+```
+
+5. params.toml
+
+```bash
+logo = true # Logo that appears in the site navigation bar.
+logoText = "ZDoc" # Logo text that appears in the site navigation bar.
+logoType = "short" # long, short
+description = "The ZDoc theme for Hugo example site." # for SEO
+
+themeOptions = ["light", "dark"] # select options for site color theme
+
+useFaviconGenerator = true # https://www.favicon-generator.org/
+
+enableSearch = true
+enableLangChange = true
+enableDarkMode = true
+enableBreadcrumb = true
+enableToc = true
+enableMenu = true
+enableNavbar = true
+enableFooter = true
+showPoweredBy = true
+
+paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
+taxoPaginate = 13 # items per page
+taxoGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
+
+github = "https://github.com/zzossig/hugo-theme-zzo"
+```
+
+## How to make doc
+
+1. Make a folder in the `content` folder. The folder will be appeared in the menu. I'm going to make `doc` folder.
+
+2. Make a `_index.md` file in the `doc` folder.
+
+```yaml
+---
+title: "Documentation"
+description: "test doc index"
+date: 2020-01-11T14:09:21+09:00
+---
+
+The content here is appeared when you click the manu. So called overview page.
+```
+
+3. There are two types of pages. One is a single page and the other is collapsible page.
+
+- single page - Just make a md file in the `doc` folder
+
+    ```yaml
+    ---
+  title: "Content Formats"
+  description: "test post"
+  date: 2020-01-28T00:38:51+09:00
+  draft: false
+  weight: 1
+  ---
+
+  *Markdown here*
+
+  ```
+
+- collapsible page - We need to make a new folder inside the doc folder. I'll make a folder named `gettingstarted`. And then, make a `_index.md` file.
+
+    `root/content/doc/gettingstarted/_index.md`
+
+    ```yaml
+      ---
+    title: "Getting started"
+    description: "test post index"
+    date: 2020-01-28T00:36:39+09:00
+    draft: false
+    weight: 2
+    collapsible: true
+    ---
+
+    ```
+    
+    The weight defines the order of the post. If the `collapsible` param set `true`, you can see the menu that can be collapsible.
+
+- Make more pages in the collapsible section. Something like `Getting Started`, `Installation`, `Basic usage`, etc... For example, make a file at `root/content/doc/gettingstarted/installation.md`
+
+    ```yaml
+      ---
+    title: "Frontmatter"
+    description: "test post"
+    date: 2020-01-28T00:36:14+09:00
+    draft: false
+    ---
+
+    *Markdown here*
+
+    ```
+
+4. Finally, make a menu in the file at `root/config/_default/menus.en.toml`.
+
+You should make your own menu.
+
+```toml
+[[main]]
+  identifier = "docs"
+  name = "Docs"
+  url = "docs"
+  weight = 1
+
+[[main]]
+  identifier = "updates"
+  name = "Updates"
+  url = "updates"
+  weight = 2
+
+[[main]]
+  identifier = "blog"
+  name = "Blog"
+  url = "blog"
+  weight = 3
+```
+
+## 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 = "/about/"
+  weight = 1
+
+[[main]]
+    identifier = "archive"
+    name = "archive"
+    url = "/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일"
+
+[tags]
+other = "태그"
+
+...
+```
+
+4. Edit config.toml file.
+
+```bash
+defaultContentLanguage = "ko"
+defaultContentLanguageInSubdir = true
+hasCJKLanguage = true
+```
+
+## Favicon
+
+Put your `favicon.ico` file under the static folder. The filename should be `favicon` and the extension should be `ico`.
+
+### Using favicon-genarator
+
+If you want to support mobile favicon, use [favicon-generator](https://www.favicon-generator.org/).
+
+- Make favicons from favicon-generator site.
+- Make a folder at `root/static/favicon`
+- Unzip the generated favicon to that folder.
+- Set the config param `useFaviconGenerator` to `true`

archetypes/default.md

@@ -0,0 +1,5 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: false
+---

assets/js/helper/closest.js

@@ -0,0 +1,12 @@
+var closest = function(node, selector) {
+  return (node.closest || function (_selector) {
+    do {
+      if ((node.matches || node.msMatchesSelector).call(node, _selector)) {
+        return node;
+      }
+      node = node.parentElement || node.parentNode;
+    } while (node !== null && node.nodeType === 1);
+
+    return null;
+  }).call(node, selector);
+}

assets/js/helper/fadeinout.js

@@ -0,0 +1,41 @@
+var fadeOut = function(node, duration) {
+  node.style.opacity = 1;
+
+  var start = performance.now();
+
+  requestAnimationFrame(function tick(timestamp) {
+    var easing = (timestamp - start) / duration;
+    node.style.opacity = Math.max(1 - easing, 0);
+
+    if (easing < 1) {
+      requestAnimationFrame(tick);
+    } else {
+      node.style.opacity = '';
+      node.style.display = 'none';
+    }
+  });
+}
+
+var fadeIn = function (node, duration) {
+  if (getComputedStyle(node).display !== 'none') return;
+
+  if (node.style.display === 'none') {
+    node.style.display = '';
+  } else {
+    node.style.display = 'block';
+  }
+  node.style.opacity = 0;
+
+  var start = performance.now();
+
+  requestAnimationFrame(function tick(timestamp) {
+    var easing = (timestamp - start) / duration;
+    node.style.opacity = Math.min(easing, 1);
+
+    if (easing < 1) {
+      requestAnimationFrame(tick);
+    } else {
+      node.style.opacity = '';
+    }
+  });
+}

assets/js/helper/getParents.js

@@ -0,0 +1,58 @@
+/**
+ * Get all DOM element up the tree that contain a class, ID, or data attribute
+ * @param  {Node} elem The base element
+ * @param  {String} selector The class, id, data attribute, or tag to look for
+ * @return {Array} Null if no match
+ */
+var getParents = function (elem, selector) {
+
+  var parents = [];
+  var firstChar;
+  if (selector) {
+    firstChar = selector.charAt(0);
+  }
+
+  // Get matches
+  for (; elem && elem !== document; elem = elem.parentNode) {
+    if (selector) {
+
+      // If selector is a class
+      if (firstChar === '.') {
+        if (elem.classList.contains(selector.substr(1))) {
+          parents.push(elem);
+        }
+      }
+
+      // If selector is an ID
+      if (firstChar === '#') {
+        if (elem.id === selector.substr(1)) {
+          parents.push(elem);
+        }
+      }
+
+      // If selector is a data attribute
+      if (firstChar === '[') {
+        if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
+          parents.push(elem);
+        }
+      }
+
+      // If selector is a tag
+      if (elem.tagName.toLowerCase() === selector) {
+        parents.push(elem);
+      }
+
+    } else {
+      parents.push(elem);
+    }
+
+  }
+
+  // Return parents if any exist
+  if (parents.length === 0) {
+    return null;
+  } else {
+    return parents;
+  }
+
+};

assets/js/helper/next.js

@@ -0,0 +1,7 @@
+function next(node, selector) {
+  if (selector && document.querySelector(selector) !== node.nextElementSibling) {
+    return null;
+  }
+
+  return node.nextElementSibling;
+}

assets/js/helper/prev.js

@@ -0,0 +1,7 @@
+var prev = function(node, selector) {
+  if (selector && document.querySelector(selector) !== node.previousElementSibling) {
+    return null;
+  }
+
+  return node.previousElementSibling;
+}

assets/js/helper/prop.js

@@ -0,0 +1,6 @@
+var prop = function (node, name, value) {
+  if (typeof value === 'undefined') {
+    return node[name];
+  }
+  node[name] = value;
+};

assets/js/swipe.js

@@ -0,0 +1,828 @@
+/*!
+ * Swipe 2.2.14
+ *
+ * Brad Birdsall
+ * Copyright 2013, MIT License
+ *
+*/
+
+// if the module has no dependencies, the above pattern can be simplified to
+// eslint-disable-next-line no-extra-semi
+; (function (root, factory) {
+  // eslint-disable-next-line no-undef
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    // eslint-disable-next-line no-undef
+    define([], function () {
+      root.Swipe = factory();
+      return root.Swipe;
+    });
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory();
+  } else {
+    // Browser globals
+    root.Swipe = factory();
+  }
+}(this, function () {
+  // Establish the root object, `window` (`self`) in the browser, `global`
+  // on the server, or `this` in some virtual machines. We use `self`
+  // instead of `window` for `WebWorker` support.
+  var root = typeof self == 'object' && self.self === self && self ||
+    typeof global == 'object' && global.global === global && global ||
+    this;
+
+  var _document = root.document;
+
+  function Swipe(container, options) {
+
+    'use strict';
+
+    options = options || {};
+
+    // setup initial vars
+    var start = {};
+    var delta = {};
+    var isScrolling;
+
+    // setup auto slideshow
+    var delay = options.auto || 0;
+    var interval;
+
+    var disabled = false;
+
+    // utilities
+    // simple no operation function
+    var noop = function () { };
+    // offload a functions execution
+    var offloadFn = function (fn) { setTimeout(fn || noop, 0); };
+    // Returns a function, that, as long as it continues to be invoked, will not
+    // be triggered.
+    var throttle = function (fn, threshhold) {
+      threshhold = threshhold || 100;
+      var timeout = null;
+
+      function cancel() {
+        if (timeout) clearTimeout(timeout);
+      }
+
+      function throttledFn() {
+        var context = this;
+        var args = arguments;
+        cancel();
+        timeout = setTimeout(function () {
+          timeout = null;
+          fn.apply(context, args);
+        }, threshhold);
+      }
+
+      // allow remove throttled timeout
+      throttledFn.cancel = cancel;
+
+      return throttledFn;
+    };
+
+    function getScrollbarWidth() {
+      return root.innerWidth - _document.documentElement.clientWidth;
+    }
+
+    // check whether event is cancelable
+    var isCancelable = function (event) {
+      if (!event) return false;
+      return typeof event.cancelable !== 'boolean' || event.cancelable;
+    };
+
+    // check browser capabilities
+    var browser = {
+      addEventListener: !!root.addEventListener,
+      passiveEvents: (function () {
+        // Test via a getter in the options object to see if the passive property is accessed
+        var supportsPassive = false;
+        try {
+          var opts = Object.defineProperty({}, 'passive', {
+            // eslint-disable-next-line getter-return
+            get: function () {
+              supportsPassive = true;
+            }
+          });
+          root.addEventListener('testEvent', null, opts);
+          root.removeEventListener('testEvent', null, opts);
+        }
+        catch (e) {
+          supportsPassive = false;
+        }
+        return supportsPassive;
+      })(),
+      // eslint-disable-next-line no-undef
+      touch: ('ontouchstart' in root) || root.DocumentTouch && _document instanceof DocumentTouch,
+      transitions: (function (temp) {
+        var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
+        for (var i in props) {
+          if (temp.style[props[i]] !== undefined) {
+            return true;
+          }
+        }
+        return false;
+      })(_document.createElement('swipe'))
+    };
+
+    // quit if no root element
+    if (!container) return;
+
+    var element = container.children[0];
+    var slides, slidePos, width, length;
+    var index = parseInt(options.startSlide, 10) || 0;
+    var speed = options.speed || 300;
+    options.continuous = options.continuous !== undefined ? options.continuous : true;
+
+    // check text direction
+    var slideDir = (function (el, prop, dir) {
+      if (el.currentStyle) {
+        dir = el.currentStyle[prop];
+      } else if (root.getComputedStyle) {
+        dir = root.getComputedStyle(el, null).getPropertyValue(prop);
+      }
+      return 'rtl' === dir ? 'right' : 'left';
+    })(container, 'direction');
+
+    // AutoRestart option: auto restart slideshow after user's touch event
+    options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : false;
+
+    // throttled setup
+    var throttledSetup = throttle(setup);
+
+    // setup event capturing
+    var events = {
+
+      handleEvent: function (event) {
+        if (disabled) return;
+
+        switch (event.type) {
+          case 'mousedown':
+          case 'touchstart': this.start(event); break;
+          case 'mousemove':
+          case 'touchmove': this.move(event); break;
+          case 'mouseup':
+          case 'mouseleave':
+          case 'touchend': this.end(event); break;
+          case 'webkitTransitionEnd':
+          case 'msTransitionEnd':
+          case 'oTransitionEnd':
+          case 'otransitionend':
+          case 'transitionend': this.transitionEnd(event); break;
+          case 'resize': throttledSetup(); break;
+        }
+
+        if (options.stopPropagation) {
+          event.stopPropagation();
+        }
+      },
+
+      start: function (event) {
+        var touches;
+
+        if (isMouseEvent(event)) {
+          touches = event;
+          event.preventDefault(); // For desktop Safari drag
+        } else {
+          touches = event.touches[0];
+        }
+
+        // measure start values
+        start = {
+
+          // get initial touch coords
+          x: touches.pageX,
+          y: touches.pageY,
+
+          // store time to determine touch duration
+          time: +new Date()
+
+        };
+
+        // used for testing first move event
+        isScrolling = undefined;
+
+        // reset delta and end measurements
+        delta = {};
+
+        // attach touchmove and touchend listeners
+        if (isMouseEvent(event)) {
+          element.addEventListener('mousemove', this, false);
+          element.addEventListener('mouseup', this, false);
+          element.addEventListener('mouseleave', this, false);
+        } else {
+          element.addEventListener('touchmove', this, browser.passiveEvents ? { passive: false } : false);
+          element.addEventListener('touchend', this, false);
+        }
+
+      },
+
+      move: function (event) {
+        var touches;
+
+        if (isMouseEvent(event)) {
+          touches = event;
+        } else {
+          // ensure swiping with one touch and not pinching
+          if (event.touches.length > 1 || event.scale && event.scale !== 1) {
+            return;
+          }
+
+          // we can disable scrolling unless it is already in progress
+          if (options.disableScroll && isCancelable(event)) {
+            event.preventDefault();
+          }
+
+          touches = event.touches[0];
+        }
+
+        // measure change in x and y
+        delta = {
+          x: touches.pageX - start.x,
+          y: touches.pageY - start.y
+        };
+
+        // determine if scrolling test has run - one time test
+        if (typeof isScrolling === 'undefined') {
+          isScrolling = !!(isScrolling || Math.abs(delta.x) < Math.abs(delta.y));
+        }
+
+        // if user is not trying to scroll vertically
+        if (!isScrolling) {
+
+          // if it is not already scrolling
+          if (isCancelable(event)) {
+            // prevent native scrolling
+            event.preventDefault();
+          }
+
+          // stop slideshow
+          stop();
+
+          // increase resistance if first or last slide
+          if (options.continuous) { // we don't add resistance at the end
+
+            translate(circle(index - 1), delta.x + slidePos[circle(index - 1)], 0);
+            translate(index, delta.x + slidePos[index], 0);
+            translate(circle(index + 1), delta.x + slidePos[circle(index + 1)], 0);
+
+          } else {
+
+            delta.x =
+              delta.x /
+              ((!index && delta.x > 0 ||             // if first slide and sliding left
+                index === slides.length - 1 &&        // or if last slide and sliding right
+                delta.x < 0                           // and if sliding at all
+              ) ?
+                (Math.abs(delta.x) / width + 1)      // determine resistance level
+                : 1);                                 // no resistance if false
+
+            // translate 1:1
+            translate(index - 1, delta.x + slidePos[index - 1], 0);
+            translate(index, delta.x + slidePos[index], 0);
+            translate(index + 1, delta.x + slidePos[index + 1], 0);
+          }
+        }
+      },
+
+      end: function (event) {
+
+        // measure duration
+        var duration = +new Date() - start.time;
+
+        // determine if slide attempt triggers next/prev slide
+        var isValidSlide =
+          Number(duration) < 250 &&         // if slide duration is less than 250ms
+          Math.abs(delta.x) > 20 ||         // and if slide amt is greater than 20px
+          Math.abs(delta.x) > width / 2;      // or if slide amt is greater than half the width
+
+        // determine if slide attempt is past start and end
+        var isPastBounds =
+          !index && delta.x > 0 ||                      // if first slide and slide amt is greater than 0
+          index === slides.length - 1 && delta.x < 0;   // or if last slide and slide amt is less than 0
+
+        if (options.continuous) {
+          isPastBounds = false;
+        }
+
+        // OLD determine direction of swipe (true:right, false:left)
+        // determine direction of swipe (1: backward, -1: forward)
+        var direction = Math.abs(delta.x) / delta.x;
+
+        // if not scrolling vertically
+        if (!isScrolling) {
+
+          if (isValidSlide && !isPastBounds) {
+
+            // if we're moving right
+            if (direction < 0) {
+
+              if (options.continuous) { // we need to get the next in this direction in place
+
+                move(circle(index - 1), -width, 0);
+                move(circle(index + 2), width, 0);
+
+              } else {
+                move(index - 1, -width, 0);
+              }
+
+              move(index, slidePos[index] - width, speed);
+              move(circle(index + 1), slidePos[circle(index + 1)] - width, speed);
+              index = circle(index + 1);
+
+            } else {
+              if (options.continuous) { // we need to get the next in this direction in place
+
+                move(circle(index + 1), width, 0);
+                move(circle(index - 2), -width, 0);
+
+              } else {
+                move(index + 1, width, 0);
+              }
+
+              move(index, slidePos[index] + width, speed);
+              move(circle(index - 1), slidePos[circle(index - 1)] + width, speed);
+              index = circle(index - 1);
+            }
+
+            runCallback(getPos(), slides[index], direction);
+
+          } else {
+
+            if (options.continuous) {
+
+              move(circle(index - 1), -width, speed);
+              move(index, 0, speed);
+              move(circle(index + 1), width, speed);
+
+            } else {
+
+              move(index - 1, -width, speed);
+              move(index, 0, speed);
+              move(index + 1, width, speed);
+            }
+          }
+        }
+
+        // kill touchmove and touchend event listeners until touchstart called again
+        if (isMouseEvent(event)) {
+          element.removeEventListener('mousemove', events, false);
+          element.removeEventListener('mouseup', events, false);
+          element.removeEventListener('mouseleave', events, false);
+        } else {
+          element.removeEventListener('touchmove', events, browser.passiveEvents ? { passive: false } : false);
+          element.removeEventListener('touchend', events, false);
+        }
+
+      },
+
+      transitionEnd: function (event) {
+        var currentIndex = parseInt(event.target.getAttribute('data-index'), 10);
+        if (currentIndex === index) {
+          if (delay || options.autoRestart) restart();
+
+          runTransitionEnd(getPos(), slides[index]);
+        }
+      }
+    };
+
+    // trigger setup
+    setup();
+
+    // start auto slideshow if applicable
+    begin();
+
+    // Expose the Swipe API
+    return {
+      // initialize
+      setup: setup,
+
+      // go to slide
+      slide: function (to, speed) {
+        stop();
+        slide(to, speed);
+      },
+
+      // move to previous
+      prev: function () {
+        stop();
+        prev();
+      },
+
+      // move to next
+      next: function () {
+        stop();
+        next();
+      },
+
+      // Restart slideshow
+      restart: restart,
+
+      // cancel slideshow
+      stop: stop,
+
+      // return current index position
+      getPos: getPos,
+
+      // disable slideshow
+      disable: disable,
+
+      // enable slideshow
+      enable: enable,
+
+      // return total number of slides
+      getNumSlides: function () { return length; },
+
+      // completely remove swipe
+      kill: kill
+    };
+
+    // remove all event listeners
+    function detachEvents() {
+      if (browser.addEventListener) {
+        // remove current event listeners
+        element.removeEventListener('touchstart', events, browser.passiveEvents ? { passive: true } : false);
+        element.removeEventListener('mousedown', events, false);
+        element.removeEventListener('webkitTransitionEnd', events, false);
+        element.removeEventListener('msTransitionEnd', events, false);
+        element.removeEventListener('oTransitionEnd', events, false);
+        element.removeEventListener('otransitionend', events, false);
+        element.removeEventListener('transitionend', events, false);
+        root.removeEventListener('resize', events, false);
+      } else {
+        root.onresize = null;
+      }
+    }
+
+    // add event listeners
+    function attachEvents() {
+      if (browser.addEventListener) {
+
+        // set touchstart event on element
+        if (browser.touch) {
+          element.addEventListener('touchstart', events, browser.passiveEvents ? { passive: true } : false);
+        }
+
+        if (options.draggable) {
+          element.addEventListener('mousedown', events, false);
+        }
+
+        if (browser.transitions) {
+          element.addEventListener('webkitTransitionEnd', events, false);
+          element.addEventListener('msTransitionEnd', events, false);
+          element.addEventListener('oTransitionEnd', events, false);
+          element.addEventListener('otransitionend', events, false);
+          element.addEventListener('transitionend', events, false);
+        }
+
+        // set resize event on window
+        root.addEventListener('resize', events, false);
+
+      } else {
+        root.onresize = throttledSetup; // to play nice with old IE
+      }
+    }
+
+    // clone nodes when there is only two slides
+    function cloneNode(el) {
+      var clone = el.cloneNode(true);
+      element.appendChild(clone);
+
+      // tag these slides as clones (to remove them on kill)
+      clone.setAttribute('data-cloned', true);
+
+      // Remove id from element
+      clone.removeAttribute('id');
+    }
+
+    function setup(opts) {
+      // Overwrite options if necessary
+      if (opts != null) {
+        for (var prop in opts) {
+          options[prop] = opts[prop];
+        }
+      }
+
+      // cache slides
+      slides = element.children;
+      length = slides.length;
+
+      // slides length correction, minus cloned slides
+      for (var i = 0; i < slides.length; i++) {
+        if (slides[i].getAttribute('data-cloned')) length--;
+      }
+
+      // set continuous to false if only one slide
+      if (slides.length < 2) {
+        options.continuous = false;
+      }
+
+      // special case if two slides
+      if (browser.transitions && options.continuous && slides.length < 3) {
+        cloneNode(slides[0]);
+        cloneNode(slides[1]);
+
+        slides = element.children;
+      }
+
+      // adjust style on rtl
+      if ('right' === slideDir) {
+        for (var j = 0; j < slides.length; j++) {
+          slides[j].style.float = 'right';
+        }
+      }
+
+      // create an array to store current positions of each slide
+      slidePos = new Array(slides.length);
+
+      // determine width of each slide
+      //width = container.getBoundingClientRect().width || container.offsetWidth;
+      width = root.innerWidth - getScrollbarWidth();
+      element.style.width = (slides.length * width * 2) + 'px';
+      // stack elements
+      var pos = slides.length;
+      while (pos--) {
+        var slide = slides[pos];
+
+        slide.style.width = width + 'px';
+        slide.setAttribute('data-index', pos);
+
+        if (browser.transitions) {
+          slide.style[slideDir] = (pos * -width) + 'px';
+          move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
+        }
+      }
+
+      // reposition elements before and after index
+      if (options.continuous && browser.transitions) {
+        move(circle(index - 1), -width, 0);
+        move(circle(index + 1), width, 0);
+      }
+
+      if (!browser.transitions) {
+        element.style[slideDir] = (index * -width) + 'px';
+      }
+
+      container.style.visibility = 'visible';
+
+      // reinitialize events
+      detachEvents();
+      attachEvents();
+    }
+
+    function prev() {
+      if (disabled) return;
+
+      if (options.continuous) {
+        slide(index - 1);
+      } else if (index) {
+        slide(index - 1);
+      }
+    }
+
+    function next() {
+      if (disabled) return;
+      if (options.continuous) {
+        slide(index + 1);
+      } else if (index < slides.length - 1) {
+        slide(index + 1);
+      }
+    }
+
+    function runCallback(pos, index, dir) {
+      if (options.callback) {
+        options.callback(pos, index, dir);
+      }
+    }
+
+    function runTransitionEnd(pos, index) {
+      if (options.transitionEnd) {
+        options.transitionEnd(pos, index);
+      }
+    }
+
+    function circle(index) {
+
+      // a simple positive modulo using slides.length
+      return (slides.length + (index % slides.length)) % slides.length;
+    }
+
+    function getPos() {
+      // Fix for the clone issue in the event of 2 slides
+      var currentIndex = index;
+
+      if (currentIndex >= length) {
+        currentIndex = currentIndex - length;
+      }
+
+      return currentIndex;
+    }
+
+    function slide(to, slideSpeed) {
+
+      // ensure to is of type 'number'
+      to = typeof to !== 'number' ? parseInt(to, 10) : to;
+
+      // do nothing if already on requested slide
+      if (index === to) return;
+
+      if (browser.transitions) {
+
+        var direction = Math.abs(index - to) / (index - to); // 1: backward, -1: forward
+
+        // get the actual position of the slide
+        if (options.continuous) {
+          var natural_direction = direction;
+          direction = -slidePos[circle(to)] / width;
+
+          // if going forward but to < index, use to = slides.length + to
+          // if going backward but to > index, use to = -slides.length + to
+          if (direction !== natural_direction) {
+            to = -direction * slides.length + to;
+          }
+
+        }
+
+        var diff = Math.abs(index - to) - 1;
+
+        // move all the slides between index and to in the right direction
+        while (diff--) {
+          move(circle((to > index ? to : index) - diff - 1), width * direction, 0);
+        }
+
+        to = circle(to);
+
+        move(index, width * direction, slideSpeed || speed);
+        move(to, 0, slideSpeed || speed);
+
+        if (options.continuous) { // we need to get the next in place
+          move(circle(to - direction), -(width * direction), 0);
+        }
+
+      } else {
+
+        to = circle(to);
+        animate(index * -width, to * -width, slideSpeed || speed);
+        // no fallback for a circular continuous if the browser does not accept transitions
+      }
+
+      index = to;
+      offloadFn(function () {
+        runCallback(getPos(), slides[index], direction);
+      });
+    }
+
+    function move(index, dist, speed) {
+      translate(index, dist, speed);
+      slidePos[index] = dist;
+    }
+
+    function translate(index, dist, speed) {
+
+      var slide = slides[index];
+      var style = slide && slide.style;
+
+      if (!style) return;
+
+      style.webkitTransitionDuration =
+        style.MozTransitionDuration =
+        style.msTransitionDuration =
+        style.OTransitionDuration =
+        style.transitionDuration = speed + 'ms';
+
+      style.webkitTransform =
+        style.msTransform =
+        style.MozTransform =
+        style.OTransform =
+        style.transform = 'translateX(' + dist + 'px)';
+    }
+
+    function animate(from, to, speed) {
+
+      // if not an animation, just reposition
+      if (!speed) {
+        element.style[slideDir] = to + 'px';
+        return;
+      }
+
+      var start = +new Date();
+
+      var timer = setInterval(function () {
+        var timeElap = +new Date() - start;
+
+        if (timeElap > speed) {
+
+          element.style[slideDir] = to + 'px';
+
+          if (delay || options.autoRestart) restart();
+
+          runTransitionEnd(getPos(), slides[index]);
+
+          clearInterval(timer);
+
+          return;
+        }
+
+        element.style[slideDir] = (((to - from) * (Math.floor((timeElap / speed) * 100) / 100)) + from) + 'px';
+      }, 4);
+
+    }
+
+    function begin() {
+      delay = options.auto || 0;
+      if (delay) interval = setTimeout(next, delay);
+    }
+
+    function stop() {
+      delay = 0;
+      clearTimeout(interval);
+    }
+
+    function restart() {
+      stop();
+      begin();
+    }
+
+    function disable() {
+      stop();
+      disabled = true;
+    }
+
+    function enable() {
+      disabled = false;
+      restart();
+    }
+
+    function isMouseEvent(e) {
+      return /^mouse/.test(e.type);
+    }
+
+    function kill() {
+      // cancel slideshow
+      stop();
+
+      // remove inline styles
+      container.style.visibility = '';
+
+      // reset element
+      element.style.width = '';
+      element.style[slideDir] = '';
+
+      // reset slides
+      var pos = slides.length;
+      while (pos--) {
+
+        if (browser.transitions) {
+          translate(pos, 0, 0);
+        }
+
+        var slide = slides[pos];
+
+        // if the slide is tagged as clone, remove it
+        if (slide.getAttribute('data-cloned')) {
+          var _parent = slide.parentElement;
+          _parent.removeChild(slide);
+        }
+
+        // remove styles
+        slide.style.width = '';
+        slide.style[slideDir] = '';
+
+        slide.style.webkitTransitionDuration =
+          slide.style.MozTransitionDuration =
+          slide.style.msTransitionDuration =
+          slide.style.OTransitionDuration =
+          slide.style.transitionDuration = '';
+
+        slide.style.webkitTransform =
+          slide.style.msTransform =
+          slide.style.MozTransform =
+          slide.style.OTransform = '';
+
+        // remove custom attributes (?)
+        // slide.removeAttribute('data-index');
+      }
+
+      // remove all events
+      detachEvents();
+
+      // remove throttled function timeout
+      throttledSetup.cancel();
+    }
+  }
+
+  if (root.jQuery || root.Zepto) {
+    (function ($) {
+      $.fn.Swipe = function (params) {
+        return this.each(function () {
+          $(this).data('Swipe', new Swipe($(this)[0], params));
+        });
+      };
+    })(root.jQuery || root.Zepto);
+  }
+
+  return Swipe;
+}));

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;
+}

assets/sass/abstracts/_functions.scss

@@ -0,0 +1,12 @@
+@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 themed($key) {
+  @return map-get($theme-map, $key);
+}

assets/sass/abstracts/_mixins.scss

@@ -0,0 +1,230 @@
+@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 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) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: $truncation-boundary;
+}
+
+@mixin truncate2($truncation-boundary) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: $truncation-boundary;
+}
+
+@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;
+}
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }  
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }  
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};      
+}
+
+@mixin no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin webkit-scrollbars($foreground-color, $background-color) {
+  &::-webkit-scrollbar {
+      width:  0.45em;
+      height: 0.45em;
+  }
+
+  &::-webkit-scrollbar-thumb {
+      background: $foreground-color;
+  }
+
+  &::-webkit-scrollbar-track {
+      background: $background-color;
+  }
+}
+
+@mixin webkit-scrollbars2($foreground-color, $background-color) {
+  ::-webkit-scrollbar {
+      width:  0.45em;
+      height: 0.45em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+      background: $foreground-color;
+  }
+
+  ::-webkit-scrollbar-track {
+      background: $background-color;
+  }
+}
+
+@mixin moz-scrollbars($foreground-color, $background-color) {
+  scrollbar-width: thin;
+  scrollbar-color: $foreground-color $background-color;
+}
+
+@mixin clippy() {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
+<path style="stroke:none;fill-rule:nonzero;fill:rgb(100,100,100);fill-opacity:1;" d="M 4 2 C 2.894531 2 2 2.894531 2 4 L 2 17 C 2 17.550781 2.449219 18 3 18 C 3.550781 18 4 17.550781 4 17 L 4 4 L 17 4 C 17.550781 4 18 3.550781 18 3 C 18 2.449219 17.550781 2 17 2 Z M 8 6 C 6.894531 6 6 6.894531 6 8 L 6 20 C 6 21.105469 6.894531 22 8 22 L 20 22 C 21.105469 22 22 21.105469 22 20 L 22 8 C 22 6.894531 21.105469 6 20 6 Z M 8 8 L 20 8 L 20 20 L 8 20 Z M 8 8 "/></svg>');
+}

assets/sass/abstracts/_variables.scss

@@ -0,0 +1,39 @@
+@import "../themes/theme";
+
+$text-font-stack: 'Muli',
+              avenir,
+              'helvetica neue', helvetica,
+              ubuntu,
+              roboto, noto,
+              'segoe ui', arial,
+              sans-serif !default;
+$code-font-stack: Consolas, 
+              Monaco,
+              Menlo,
+              "DejaVu Sans Mono", 
+              "Bitstream Vera Sans Mono", 
+              "Courier New", 
+              "Lucida Console", 
+              "Lucida Sans Typewriter", 
+              "Liberation Mono", 
+              "Nimbus Mono L", 
+              Monaco, 
+              Courier, 
+              monospace !default;
+
+$z-indexes: ("drawer", "modal", "dropdown", "navbar", "header", "gtt", "clipboard", "grid", "search-btn", "search", "menu", "content", "footer", "taxo", "toc", "gallery-mask");
+
+$breakpoints: (
+  'xs': 0,
+  'sm': 600px,
+  'md': 960px,
+  'lg': 1280px,
+  'xl': 1960px,
+);
+
+$grid-max-width: 1289px;
+$grid-nav-height: 50px;
+$grid-body-width: 769px;
+$grid-side-width: 240px;
+$drawer-width: 240px;
+$menu-title-height: 30px;

assets/sass/base/_animation.scss

@@ -0,0 +1,26 @@
+// -- Slide Animations -- //
+
+@include keyframes(slide-in-down) {
+  0% {
+    transform: translate(0,-12%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0,0);
+    opacity: 1;
+  }
+}
+
+// Slide in Left to Center
+@include keyframes(slide-in-left) {
+  0% {
+    transform: translate(-12%,0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(0,0);
+    opacity: 1;
+  }
+}

assets/sass/base/_fonts.scss

@@ -0,0 +1,205 @@
+/*! 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;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@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;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@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;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* muli-200normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200;
+  src:
+    local('Muli Extra Light '),
+    local('Muli-Extra Light'),
+    url('../fonts/muli-latin-200.woff2') format('woff2'), 
+    url('../fonts/muli-latin-200.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-200italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 200;
+  src:
+    local('Muli Extra Light italic'),
+    local('Muli-Extra Lightitalic'),
+    url('../fonts/muli-latin-200italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-200italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-300normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src:
+    local('Muli Light '),
+    local('Muli-Light'),
+    url('../fonts/muli-latin-300.woff2') format('woff2'), 
+    url('../fonts/muli-latin-300.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-300italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 300;
+  src:
+    local('Muli Light italic'),
+    local('Muli-Lightitalic'),
+    url('../fonts/muli-latin-300italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-300italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-400normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local('Muli Regular '),
+    local('Muli-Regular'),
+    url('../fonts/muli-latin-400.woff2') format('woff2'), 
+    url('../fonts/muli-latin-400.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-400italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    local('Muli Regular italic'),
+    local('Muli-Regularitalic'),
+    url('../fonts/muli-latin-400italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-400italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-600normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    local('Muli SemiBold '),
+    local('Muli-SemiBold'),
+    url('../fonts/muli-latin-600.woff2') format('woff2'), 
+    url('../fonts/muli-latin-600.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-600italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 600;
+  src:
+    local('Muli SemiBold italic'),
+    local('Muli-SemiBolditalic'),
+    url('../fonts/muli-latin-600italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-600italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-700normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local('Muli Bold '),
+    local('Muli-Bold'),
+    url('../fonts/muli-latin-700.woff2') format('woff2'), 
+    url('../fonts/muli-latin-700.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-700italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 700;
+  src:
+    local('Muli Bold italic'),
+    local('Muli-Bolditalic'),
+    url('../fonts/muli-latin-700italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-700italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-800normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src:
+    local('Muli ExtraBold '),
+    local('Muli-ExtraBold'),
+    url('../fonts/muli-latin-800.woff2') format('woff2'), 
+    url('../fonts/muli-latin-800.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-800italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 800;
+  src:
+    local('Muli ExtraBold italic'),
+    local('Muli-ExtraBolditalic'),
+    url('../fonts/muli-latin-800italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-800italic.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-900normal - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local('Muli Black '),
+    local('Muli-Black'),
+    url('../fonts/muli-latin-900.woff2') format('woff2'), 
+    url('../fonts/muli-latin-900.woff') format('woff'); /* Modern Browsers */
+}
+/* muli-900italic - latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 900;
+  src:
+    local('Muli Black italic'),
+    local('Muli-Blackitalic'),
+    url('../fonts/muli-latin-900italic.woff2') format('woff2'), 
+    url('../fonts/muli-latin-900italic.woff') format('woff'); /* Modern Browsers */
+}

assets/sass/base/_helpers.scss

@@ -0,0 +1,17 @@
+.clearfix::after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.hide {
+  display: none;
+}
+
+.grow {
+  @include flex-grow(1);
+}

assets/sass/base/_reset.scss

@@ -0,0 +1,154 @@
+// -----------------------------------------------------------------------------
+// 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;
+}
+
+hr {
+  border: 0;
+}
+
+// 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;
+  }
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
+figcaption {  
+  font-style: italic;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  @include themify($themes) {
+    color: themed("figcaption-color");
+    strong {
+      color: themed("figcaption-strong-color");
+    }
+  }
+}
+
+pre {
+  white-space: pre;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+}
+
+::-moz-selection {
+  /* Code for Firefox */
+  @include themify($themes) {
+    color: themed("selection-color");
+    background: themed("selection-background-color");
+  }
+}
+
+::selection {
+  @include themify($themes) {
+    color: themed("selection-color");
+    background: themed("selection-background-color");
+  }
+}

assets/sass/base/_typography.scss

@@ -0,0 +1,56 @@
+/**
+ * Basic typography style for copy text
+ */
+
+ html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-size: 16px;
+  font-family: $text-font-stack;
+}
+
+code,
+pre {
+  font-size: 13.8px;
+  font-family: $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;
+}

assets/sass/components/_breadcrumb.scss

@@ -0,0 +1,43 @@
+.breadcrumb {
+  margin: 1.5rem 1rem 0 1rem;
+  padding-bottom: 1.5rem;
+
+  @include truncate($grid-body-width);
+  @include themify($themes) {
+    border-bottom: 1px solid themed('hr-color');
+    background-color: themed('breadcrumb-background-color');
+  }
+
+  ol {
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  li {
+    display: inline;
+    font-size: 0.9rem;
+    
+    a {
+      @include themify($themes) {
+        color: themed('breadcrumb-item-color');
+        @include on-event {
+          color: themed('link-hover');
+        }
+      }      
+    }    
+
+    &:last-child {
+      @include themify($themes) {
+        color: themed('breadcrumb-item-active-color');
+      }
+    }       
+  }
+
+  li+li:before {
+    padding: 0.5rem;    
+    content: "»";
+    @include themify($themes) {
+      color: themed('breadcrumb-item-color');
+    }
+  }
+}

assets/sass/components/_button.scss

@@ -0,0 +1,40 @@
+.button {
+  border: none;
+  outline: none;
+  padding: 0.75rem;
+  margin-top: 2.5rem;
+  margin-right: 0.5rem;
+  border-radius: 0.25rem;
+  text-decoration: none;
+  cursor: pointer;
+
+  @include transition(all, 0.15s, ease-in);
+
+  &[data-color="default"] {
+    @include themify($themes) {
+      color: themed('landing-button-default');
+      background-color: transparent;
+      border: 1px solid themed('landing-button-default');
+
+      @include on-event {
+        color: themed('body-background-color');
+        border: 1px solid darken(themed('landing-button-default'), 15%);
+        background-color: themed('landing-button-default');
+      }
+    }
+  }
+  
+  &[data-color="primary"] {
+    @include themify($themes) {
+      color: themed('landing-button-primary');
+      background-color: transparent;
+      border: 1px solid themed('landing-button-primary');
+
+      @include on-event {
+        color: themed('body-background-color');
+        border: 1px solid darken(themed('landing-button-primary'), 15%);
+        background-color: themed('landing-button-primary');
+      }
+    }
+  }
+}

assets/sass/components/_drawer.scss

@@ -0,0 +1,54 @@
+.drawer {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: z('drawer');
+  width: $drawer-width;
+  height: 100vh;
+
+  @include themify($themes) {
+    background-color: themed('body-background-color');
+  }
+
+  &__header {
+    height: $grid-nav-height;
+    width: 100%;
+
+    @include flexbox();
+    @include themify($themes) {
+      background-color: themed('navbar-background-color');
+      box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(60,65,70,0.1);
+    }
+
+    &--text {
+      width: 100%;
+      height: 100%;
+      padding: 1rem;
+
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(flex-start);
+    }
+  }
+
+  &__body {
+    height: calc(100vh - $grid-nav-height);
+    width: 100%;
+  }
+
+  &__close {
+    width: $grid-nav-height;
+    height: 100%;
+    cursor: pointer;
+
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('body-color');
+      @include on-event {
+        color: themed('active-font-color');
+      }
+    }
+  }
+}

assets/sass/components/_dropdown.scss

@@ -0,0 +1,22 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  z-index: z('dropdown');
+}
+
+.dropdown-content a {
+  padding: 0.3rem 0.5rem;
+  text-decoration: none;
+  display: block;
+  @include truncate2(120px);
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}

assets/sass/components/_language.scss

@@ -0,0 +1,56 @@
+.lang {
+  width: 100%;
+  font-size: 17.2px;
+
+  @include flexbox();
+  @include justify-content(space-between);
+  @include align-items(center);
+
+  &__dropdown {
+    outline: none;
+    cursor: pointer;
+    border: none;
+
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+
+    &--content {
+      padding: 0.25rem 0;
+      max-width: 120px;
+      border-radius: 0.175rem;
+
+      @include truncate(120px);
+      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
+      @include themify($themes) {
+        background-color: themed('dropdown-background-color');
+        a {
+          text-decoration: none;
+          color: themed('body-color');
+
+          @include on-event {
+            color: inherit;
+            background-color: themed('dropdown-hover-background-color');
+          }
+
+          &.active {
+            font-weight: bold;
+            color: themed('active-font-color');
+            background-color: themed('dropdown-item-active-background-color');
+          }
+        }
+      }
+    }
+
+    &--item {
+      padding: 0.25rem 0.75rem;
+      width: 100%;
+      height: 100%;
+      text-decoration: none;
+      display: block;
+      font-size: 1rem;
+
+      @include truncate(120px);
+    }
+  }
+}

assets/sass/components/_menu.scss

@@ -0,0 +1,149 @@
+.menu {
+  position: -webkit-sticky;
+  position: sticky;
+  top: $grid-nav-height;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  margin-top: 0;
+  padding-top: 0.85rem;
+  height: calc(100vh - $grid-nav-height);
+  overflow-y: auto;
+  z-index: z('menu');
+
+  &__label {
+    font-family: $title-font;
+    font-size: 1rem;
+    margin: 0.65rem 0;
+    padding-bottom: 0.5rem;
+    text-transform: capitalize;
+
+    @include themify($themes) {
+      color: themed('toc-label-color');
+    }
+
+    @media only screen and (max-width: 600px) {
+      text-align: center;
+      font-size: 1.125rem;
+    }
+  }
+
+  &__title {
+    cursor: pointer;
+    position: relative;
+    word-break: break-word;
+    font-size: 0.925rem;
+    height: $menu-title-height;
+    margin: 0.25rem 0;
+
+    @include no-select;
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: themed('body-color');
+      
+      @include on-event {
+        color: themed('no-active-font-color');
+      }
+
+      &.active {
+        font-weight: bold;
+        color: themed('active-font-color');
+      }
+    }
+
+    &--collapse {
+      cursor: pointer;
+      word-break: break-word;
+      font-size: 16px;
+      height: $menu-title-height;
+      margin: 0.25rem 0;
+
+      @include no-select;
+      @include flexbox();
+      @include align-items(center);
+      @include themify($themes) {
+        color: themed('body-color');
+
+        &.active {
+          font-weight: bold;
+          color: themed('active-font-color');
+
+          svg {
+            color: themed('active-font-color');
+          }
+        }
+      }
+
+      @include on-event {
+        @include themify($themes) {
+          color: themed('link-hover');
+          svg {
+            color: themed('link-hover');
+            @include translateX(0.125rem);
+          }
+        }
+      }
+    }
+
+    &--icon {
+      margin-top: 2px;
+
+      @include themify($themes) {
+        color: themed('menu-arrow-color');
+      }
+
+      &.down {
+        @include rotate(90);
+        @include transition(all, 0.15s, ease);
+      }
+
+      &.right {
+        @include rotate(0);
+        @include transition(all, 0.15s, ease);
+      }
+
+      svg {
+        display: block;
+        margin: auto 0;
+        @include transition(all, 0.15s, ease);
+      }
+    }
+  }
+
+  &__alone {
+    cursor: pointer;
+    @include no-select;
+  }
+
+  &__list {
+    max-height: 0;
+    overflow: hidden;
+    word-wrap: break-word;
+    
+    @include transition();
+
+    .active {
+      font-weight: bold;
+    }
+
+    li {
+      margin-left: 1.25rem;
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .active {
+    max-height: 100%;
+  }
+
+  li.active {
+    @include themify($themes) {
+      a {
+        font-weight: bold;
+      }
+    }
+  }
+}

assets/sass/components/_modal.scss

@@ -0,0 +1,15 @@
+.modal {
+  position: fixed;
+  z-index: z('modal');
+  left: -100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: hidden;
+  opacity: 1;
+  background: rgba(0,0,0,0.6);
+
+  @include transition(opacity, 0.25s, ease-in-out);
+}

assets/sass/components/_pagination.scss

@@ -0,0 +1,96 @@
+.pagination {
+  border-radius: 0.25rem;
+  margin: 2rem 1rem;
+  padding: 0.5rem 0;
+
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(center);
+
+  li {
+    border-radius: 0.25rem;
+    &.disabled {
+      a {
+        @include on-event {
+          @include themify($themes) {
+            color: themed('pagination-number-color');
+            text-decoration: none;
+          }      
+        }
+      }
+    }
+    
+    &.active {
+      font-weight: bold;
+      a {
+        @include themify($themes) {
+          color: themed('link-hover');
+          border-bottom: 5px solid themed('pagination-number-color');
+        }      
+      }
+    }
+  }
+
+  a {
+    font-size: 1.25rem;
+    padding: 0.5rem 0.75rem;    
+    @include themify($themes) {
+      color: themed('pagination-number-color');
+      @include on-event {
+        color: themed('link-hover');
+      }
+    }
+  }
+}
+
+.pagination-single {
+  margin: 1rem 0;
+  padding-top: 0.75rem;
+
+  @include flexbox();
+  @include align-items(center);
+  @include justify-content(center);
+  @include flex-wrap(wrap);
+
+  &__left,
+  &__right {
+    padding: 0.25rem;
+    border-radius: 0.125rem;
+
+    @include truncate($grid-body-width);
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('pagination-color');
+    }
+    
+    &-title {
+      font-size: 16.8px;
+      @include truncate($grid-body-width);
+    }
+  }
+
+  &__left {
+    @include on-event {
+      
+    }
+  }
+
+  &__right {
+    @include on-event {
+      
+    }
+  }
+
+  &__icon {
+    border-radius: 100%;
+    margin: 0 0.5rem;
+    color: inherit;
+
+    svg {
+      display: block;
+      margin: auto;
+    }
+  }
+}

assets/sass/components/_search.scss

@@ -0,0 +1,268 @@
+.search {
+  height: 30px;
+  width: 240px;
+  position: relative;
+  border-radius: 0.175rem;
+  z-index: z('search'); 
+  margin: 0 0.75rem;
+
+  @include box-shadow(0, 0, 0, 3px, transparent);
+  @include transition(all, 0.2s, ease-in);
+  @include flexbox();
+  @include align-items(center);
+  @include transition(all, 0.15s, ease);
+  @include themify($themes) {
+    border: 2px solid themed('search-border-color');
+    background-color: themed("search-background-color");
+    &:focus-within {
+      border: 2px solid themed('search-border-active-color');
+      @include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
+    }
+  }
+
+  @media only screen and (max-width: 1280px) {
+    width: 170px;
+  }
+
+  @media only screen and (max-width: 960px) {
+    display: none;
+  }
+
+  .icon {
+    padding: 0.45rem;
+    @include flexbox();
+    @include themify($themes) {
+      color: themed("search-placeholder-color");
+    }
+  }
+
+  .input {
+    width: 100%;
+    font-size: 0.9rem;
+    border: none;
+    outline: none;
+    padding-right: 1rem;
+
+    @include themify($themes) {
+      color: themed('body-color');
+      background-color: inherit;
+      @include input-placeholder {
+        color: themed("search-placeholder-color");
+      }
+    }
+  }
+
+  &-content {
+    margin-top: 0.25rem;
+    max-height: 350px;
+    width: 325px;
+    overflow: auto;
+    a {
+      text-decoration: none !important;
+    }
+  }
+
+  &__highlight {
+    @include themify($themes) {
+      color: themed('search-highlight-color');
+    }
+  }
+}
+
+.menu-item {
+  padding: 0.25rem;
+
+
+  &__title {
+    font-size: 1rem;
+    @include themify($themes) {
+      color: themed('body-color');
+    }
+  }
+
+  &__desc {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.5rem;
+
+    @include truncate(325px);
+    @include themify($themes) {
+      color: themed('search-color');
+    }
+  }
+}
+
+#search-results {
+  &.dd {
+    display: none;
+    &.is-active {
+      display: inline-block;
+      position: absolute;
+      top: 40px;
+      right: 0;
+      width: 325px;
+      border-radius: .175rem;
+      
+      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
+      @include themify($themes) {
+        background-color: themed('back-background-color');
+      }
+    }
+  }  
+
+  .dd {
+    &-content {
+      @include flexbox();
+      @include flex-direction(column);
+      @include themify($themes) {
+        background-color: themed('search-content-background-color');
+        @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+        @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      }
+    }
+
+    &-item {
+      width: 100%;
+      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');
+        }
+      }
+    }    
+  }
+}
+
+.mobile-search {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: z('modal');
+  overflow: hidden;
+
+  @include themify($themes) {
+    @include webkit-scrollbars2(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+  }
+
+  &__top {
+    width: 100%;
+    text-align: right;
+    position: relative;
+    height: $grid-nav-height;
+
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      background-color: themed('navbar-background-color');
+    }
+
+    &--icon {
+      width: 50px;
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(center);
+      @include themify($themes) {
+        color: themed('burger-menu-color');
+        @include on-event {
+          color: themed('active-font-color');
+        }
+      }
+    }
+
+    &--input {      
+      width: calc(100% - 70px);
+      height: 70%;
+      outline: none;
+      border: none;
+      border-radius: 0.25rem;
+      padding: 0 1rem;
+      font-size: 1.1rem;
+      @include themify($themes) {
+        color: themed('body-color');
+        background-color: themed('navbar-background-color');
+
+        @include input-placeholder {
+          color: themed("search-placeholder-color");
+        }
+      }
+    }
+  }
+
+  &__body {
+    width: 100%;
+    height: calc(100vh - $grid-nav-height);
+    overflow: auto;   
+
+    @include themify($themes) {
+      color: themed('body-color');
+      background-color: themed('body-background-color');
+
+      @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+    }
+  }
+
+  &__btn {
+    width: 100%;
+    z-index: z('search-btn');
+    background-color: transparent;
+    
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('burger-menu-color');  
+      @include on-event {
+        color: themed('active-font-color');   
+      }
+    }
+  }
+
+  &__content {
+    @include themify($themes) {
+      background-color: themed('search-content-background-color');
+    }
+    
+    a {
+      text-decoration: none !important;
+    }
+  }
+
+  &__item {   
+    padding: 0.5rem;   
+    &--title {
+      font-size: 1.2rem;      
+      @include themify($themes) {
+        color: themed('body-color');
+      }
+    }
+
+    &--desc {
+      font-size: 0.9rem;
+      padding: 0.25rem 0.5rem;
+      
+      @include truncate(960px);
+      @include themify($themes) {
+        color: themed('search-color');
+      }
+    }
+    
+    @include on-event {
+      @include themify($themes) {
+        background-color: themed('search-hover-background-color');
+      }
+    }
+  }
+}

assets/sass/components/_summary.scss

@@ -0,0 +1,113 @@
+.summary-card {
+  padding: 0.5rem;
+  padding-bottom: 0;
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+  position: relative;
+
+  @include themify($themes) {
+    background-color: themed('body-background-color');
+    border-bottom: 1px solid themed('hr-color');
+  }
+
+  .title {
+    a {
+      font-family: $title-font;
+      font-weight: 700;
+      word-break: break-word;
+
+      @include themify($themes) {
+        color: themed('title-color');
+        @include on-event {
+          color: themed('link-hover');
+        }
+      }
+    }
+  }
+
+  .subtitle {
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: themed('meta-color');
+    }
+  }
+
+  &__links {
+    font-size: 0.8rem;
+    
+    @include flexbox();
+    @include flex-wrap(wrap);
+    @include themify($themes) {
+      background-color: themed('body-background-color');
+    }
+  }
+
+  &__tag {
+    margin-right: 0.5rem;
+    margin-bottom: 0.35rem;
+    padding: 0.125rem 0.25rem;
+    border-top-left-radius: 0.15rem;
+    border-top-right-radius: 0.15rem;
+    cursor: pointer;
+    
+    @include themify($themes) {
+      border: 1px solid themed('hr-color');
+      border-bottom: none;
+    }
+  }
+
+  &__content {
+    margin-bottom: 1rem;
+
+    @include flexbox();
+    @include flex-direction(column);
+    @include justify-content(center);
+  }
+
+  &__text {
+    margin-top: 1rem;
+    line-height: 1.7rem;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    
+    &-wrapper {
+      height: 100%;
+      width: auto;
+      margin: 0 auto;
+      padding: 1rem;
+      padding-bottom: 0;
+    }
+  }
+
+  &__video {
+    width: 100%;
+    max-height: 500px;
+    object-fit: contain;
+
+    &-wrapper {
+      padding: 1rem;
+      padding-bottom: 0;
+    }
+  }
+
+  hr {
+    margin-top: 1.5rem;
+    @include themify($themes) {
+        border-top: 1px solid themed('hr-color');
+    }
+  }
+  &:not(:last-child) {
+    hr {
+      margin-bottom: 4rem;      
+    }
+  }
+  &:last-child {
+    hr {
+      margin-bottom: 2rem;
+    }
+  }
+}

assets/sass/components/_toc.scss

@@ -0,0 +1,74 @@
+.toc {
+  position: -webkit-sticky;
+  position: sticky;
+  top: $grid-nav-height;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  margin-top: 0;
+  padding-top: 0.85rem;
+  height: calc(100vh - $grid-nav-height);
+  overflow-y: auto;
+  font-size: 0.85rem;
+  z-index: z('toc');
+  @include no-select;
+  
+  #TableOfContents {
+    position: relative;
+  }
+
+  &__label {
+    font-family: $title-font;
+    font-size: 1rem;
+    margin-top: 0.65rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+
+    @include themify($themes) {
+      color: themed('toc-label-color');
+    }
+  }
+
+  @include themify($themes) {
+    a {
+      color: themed('toc-color');
+      position: relative;
+
+      @include on-event {
+        color: themed('link-hover');
+      }
+
+      &.active {
+        color: themed('active-font-color');
+        
+        &::before {
+          background-color: themed('active-font-color');
+          content: '';
+          height: 11px;
+          left: -8px;
+          margin: 0.25rem 0;
+          position: absolute;
+          width: 2px;            
+          &:last-child {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    li {
+      li {
+        margin-left: 0.85rem;
+      }
+    }
+  }
+}
+
+.expand__content {
+  #TableOfContents {
+    ul {
+      list-style-type: circle;
+    }
+  }
+}

assets/sass/layout/_footer.scss

@@ -0,0 +1,13 @@
+.bot {
+  @include themify($themes) {
+    background-color: themed('navbar-background-color');
+  }
+}
+.footer {
+  @include themify($themes) {
+    border-top: 1px solid themed('border-line-color');
+  }
+
+  padding: 0.5rem;
+  text-align: center;
+}

assets/sass/layout/_grid.scss

@@ -0,0 +1,75 @@
+#container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: $grid-nav-height auto 1fr auto;
+    grid-column-gap: 20px;
+    grid-row-gap: 0px;
+
+    @if $enable-navbar == true {
+        grid-template-rows: $grid-nav-height auto 1fr auto;
+    } @else {
+        grid-template-rows: 0 auto 1fr auto;
+    }
+
+    width: 100%;
+    max-width: 100%;
+    min-height: 100vh;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('body-color');
+  }  
+}
+
+.nav { grid-area: 1 / 1 / 2 / 2; }
+.top { grid-area: 2 / 1 / 3 / 2; }
+.mid { grid-area: 3 / 1 / 4 / 2; }
+.bot { grid-area: 4 / 1 / 5 / 2; }
+
+
+
+.divider {
+    display: grid;
+    height: 100%;
+    grid-template-columns: minmax(200px, 240px) minmax(350px, 769px) minmax(200px, 240px);
+    grid-template-rows: auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+
+    @include justify-content(center);
+    @media only screen and (max-width: 769px) {
+        grid-template-columns: minmax(0, $grid-side-width) minmax(0, $grid-body-width) minmax(0, $grid-side-width);
+    }
+}
+
+.l { grid-area: 1 / 1 / 2 / 2; } // left
+.m { grid-area: 1 / 2 / 2 / 3; } // middle
+.r { grid-area: 1 / 3 / 2 / 4; } // right
+.lm { grid-area: 1 / 1 / 2 / 3; } // left middle
+.mr { grid-area: 1 / 2 / 2 / 4; } // middle right
+.lmr { grid-area: 1 / 1 / 2 / 4; } // left middle right
+
+
+
+.sv { // single view
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+
+    &[data-view="full"] {
+        grid-template-columns: 769px;
+    }
+
+    &[data-view="mobile"] {
+        width: 100%;
+        grid-template-columns: 1fr;
+    }
+}
+
+.blog {
+    grid-area: 1 / 1 / 2 / 2;
+}

assets/sass/layout/_header.scss

@@ -0,0 +1,39 @@
+.header {
+  @include flexbox();
+  @include justify-content(center);
+  @include align-items(center);
+  @include flex-direction(column);
+
+  .title {
+    font-family: $title-font;
+    font-weight: 900;
+  }
+}
+
+.blog-header {
+  @include flexbox();
+  @include justify-content(center);
+  @include flex-direction(column);
+
+  &__title {
+    line-height: 1.1;
+    font-weight: 700;
+    font-family: $title-font;
+  }
+
+  &__subtitle {
+    line-height: 1.2;
+  }
+
+  &__align-left {
+    @include align-items(flex-start);
+  }
+
+  &__align-center {
+    @include align-items(center);
+  }
+
+  &__align-right {
+    @include align-items(flex-end);
+  }
+}

assets/sass/layout/_main.scss

@@ -0,0 +1,14 @@
+.mid {
+  @include themify($themes) {
+    background-color: themed('back-background-color');
+  }
+}
+.main {
+  width: 100%;
+
+  @include flexbox();
+  @include justify-content(center);
+  @include themify($themes) {
+    background-color: themed('back-background-color');
+  }
+}

assets/sass/layout/_navbar.scss

@@ -0,0 +1,250 @@
+.nav {
+  position: relative;
+}
+.navbar {
+  padding: 0 0.75rem;
+  height: 100%;
+
+  @include flexbox();
+  @include align-items(center);
+
+  &__wrapper {
+    width: 100%;
+    height: $grid-nav-height;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: z('navbar');
+    box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(60,65,70,0.1);
+
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: inherit;
+      background-color: themed('navbar-background-color');
+    }
+  }
+
+  &__menu {
+    height: 100%;
+    padding: 0 0.75rem;
+
+    @include flexbox();
+
+    &--wrapper {
+      height: 100%;
+      @include flexbox();
+      @include align-items(center);
+    }
+
+    &--item {
+      height: $grid-nav-height;
+      padding: 0rem 0.75rem;
+
+      & > a {
+        height: 100%;
+        font-family: $title-font;
+        font-size: 16.8px;
+        color: inherit;
+        text-decoration: none !important;
+        
+        @include flexbox();
+        @include align-items(center);
+        @include justify-content(center);
+      }
+
+      @include themify($themes) {
+        color: themed('body-color');
+        &.active {
+          font-weight: bold;
+          color: themed('active-font-color');
+        }
+      }
+    }
+
+    &--mobile-item {
+      width: 100%;
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(flex-start);
+      @include on-event {
+        @include themify($themes) {
+          background-color: themed('dropdown-hover-background-color');
+        }
+      }
+
+      & > a {
+        width: 100%;
+        font-size: 18px;
+        
+        @include themify($themes) {
+          color: themed('body-color');
+          
+          @include on-event {
+            text-decoration: none;  
+            color: themed('link-hover');
+          }
+
+          &.active {
+            font-weight: bold;
+            color: themed('active-font-color');
+            background-color: themed('dropdown-item-active-background-color');
+          }
+        }
+      }
+    }
+
+    &--btn {
+      height: $grid-nav-height;
+      font-size: 20px;
+      margin-left: 0.4rem;
+      margin-right: 0.5rem;
+      white-space: nowrap;
+      cursor: pointer;
+      border: none;
+
+      @include flexbox();
+      @include align-items(flex-end);
+      @include themify($themes) {
+        color: themed('body-color');
+        background: transparent;
+        @include on-event {
+          color: themed('active-font-color');
+        }
+      }
+    }
+  }
+
+  &__logo {
+    width: 100%;
+    height: 100%;
+    margin: 0 0.25rem;
+
+    &--wrapper {
+      height: 100%;
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(flex-start);
+      @include themify($themes) {
+        color: themed('body-color');
+        @include on-event {
+          color: themed('active-font-color');
+        }
+      }
+
+      a {
+        color: inherit;
+        @include on-event {
+          color: inherit;
+          text-decoration: none;
+        }
+      }
+    }
+
+    &--link {
+      width: 32.5px;
+      height: 32.5px;
+      
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(center);
+      @include flex-shrink(0);
+    }
+
+    &--text {
+      font-size: 20px;
+      margin-left: 0.5rem;
+      margin-right: 1rem;
+      white-space: nowrap;
+      cursor: pointer;
+
+      @include flexbox();
+      @include align-items(flex-end);
+      @include themify($themes) {
+        color: themed('body-color');
+      }
+    }
+  }
+
+  &__long {
+    &--link {
+      width: 100%;
+      height: 100%;
+      padding: 0.6rem 0.2rem;
+      margin: auto 0.25rem;
+      @include flex-shrink(0);
+    }
+  }
+
+  &__icons {
+    height: 100%;
+    @include flexbox();
+    @include align-items(center);
+    
+    &--icon {
+      width: 50px;
+      height: $grid-nav-height;
+      color: inherit;
+      background-color: transparent;
+      outline: none;
+      border: none;
+      cursor: pointer;
+
+      @include flex-shrink(0);
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(center);
+      @include themify($themes) {
+        color: themed('body-color');
+        @include on-event {
+          background-color: themed('dropdown-hover-background-color');
+        }
+
+        & > a {
+          height: 100%;
+          color: inherit;
+          
+          @include flexbox();
+          @include align-items(center);
+          @include justify-content(center);
+        }
+      }
+    }
+  }
+
+  &__dropdown {
+    height: 30px;
+    font-size: 17.2px;
+
+    @include flexbox();
+    @include align-items(center);
+
+    &--content {
+      padding: 0.25rem 0;
+      min-width: 120px;
+      
+      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
+      @include themify($themes) {
+        background-color: themed('dropdown-background-color');
+      }
+    }
+
+    &--title {
+      font-size: 16.8px;
+      font-family: $title-font;
+      border: none;
+      outline: none;
+      margin-left: 1rem;
+      height: $grid-nav-height;
+
+      @include flexbox();
+      @include align-items(center);
+      @include themify($themes) {
+        color: themed('body-color');
+        background-color: themed('navbar-background-color');
+      }
+    }
+  }
+}

assets/sass/main.scss

@@ -0,0 +1,48 @@
+$enable-navbar: {{ .Param "enableNavbar" }};
+
+$title-font: {{ .Site.Data.font.title_font }};
+$content-font: {{ .Site.Data.font.content_font }};
+
+$dark-active-font-color: {{ .Site.Data.color.dark_active_font_color }};
+$dark-link-color: {{ .Site.Data.color.dark_link_color }};
+$dark-link-hover-color: {{ .Site.Data.color.dark_link_hover_color }};
+$light-active-font-color: {{ .Site.Data.color.light_active_font_color }};
+$light-link-color: {{ .Site.Data.color.light_link_color }};
+$light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
+
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'abstracts/functions';
+@import 'abstracts/flexbox';
+
+@import 'syntax/syntax';
+
+@import 'base/reset';
+@import 'base/fonts';
+@import 'base/helpers';
+@import 'base/typography';
+@import 'base/animation';
+
+@import 'components/menu';
+@import 'components/toc';
+@import 'components/search';
+@import 'components/dropdown';
+@import 'components/drawer';
+@import 'components/modal';
+@import 'components/language';
+@import 'components/breadcrumb';
+@import 'components/pagination';
+@import 'components/button';
+@import 'components/summary';
+
+@import 'layout/grid';
+@import 'layout/footer';
+@import 'layout/header';
+@import 'layout/main';
+@import 'layout/navbar';
+
+@import 'pages/home';
+@import 'pages/single';
+@import 'pages/list';
+@import 'pages/blog';
+@import 'pages/taxo';

assets/sass/pages/_blog.scss

@@ -0,0 +1,17 @@
+.blog {
+  @include themify($themes) {
+    background-color: themed('body-background-color');
+  }
+
+  &__bg {
+    @include themify($themes) {
+      background-color: themed('body-background-color');
+    }
+  }
+  
+  &__header {
+    @include flexbox();
+    @include justify-content(center);
+    @include align-items(center);
+  }
+}

assets/sass/pages/_home.scss

@@ -0,0 +1,64 @@
+.home {
+  &__landing {
+    width: 100%;
+    height: 600px;
+    
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+
+    @media only screen and (max-width: 600px) {
+      @include flex-direction(column);
+    }
+
+    &--img {
+      margin: 0.5rem;
+    }
+
+    &--txt {
+      margin: 0.5rem;
+      .title {
+        font-size: 44px;
+        font-family: $title-font;
+      }
+
+      .text {
+        font-size: 22px;
+      }
+
+      @media only screen and (max-width: 600px) {
+        text-align: center;
+      }
+    }
+
+    &--link {
+      text-decoration: none !important;
+    }
+  }
+
+  &__social {
+    width: 100%;
+    padding: 1rem 0;
+
+    @include flexbox();
+    @include justify-content(center);
+
+    &--item {
+      margin: 0 0.25rem;
+    }
+  }
+
+  &__banner {
+    width: 100%;
+    padding: 0.75rem;
+
+    @include flexbox();
+    @include justify-content(center);
+
+    &--wrapper {
+      @include themify($themes) {
+        background-color: themed('banner-background-color');
+      }
+    }
+  }
+}

assets/sass/pages/_list.scss

@@ -0,0 +1,19 @@
+#list-main {
+  display: flex;
+  flex-direction: column;
+  @include themify($themes) {
+    background-color: themed('body-background-color');
+  }
+}
+
+#list-menu {
+  @include themify($themes) {
+    border-right: 1px solid themed('border-line-color');
+  }
+}
+
+#list-side {
+  @include themify($themes) {
+    border-left: 1px solid themed('border-line-color');
+  }
+}

assets/sass/pages/_single.scss

@@ -0,0 +1,541 @@
+#single-menu {
+  @include themify($themes) {
+    border-right: 1px solid themed('border-line-color');
+  }
+}
+
+.single {
+  padding: 0 1rem;
+  display: block;
+  position: relative;
+  width: 100%;
+  overflow-wrap: break-word;
+
+  &__title {
+    font-size: 2.5rem;
+    font-weight: 900;
+    font-family: $title-font;
+    line-height: 3rem;
+    overflow-wrap: break-word;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+
+    @include themify($themes) {
+      color: themed("single-header-title-color");
+    }
+  }
+
+  &__meta {
+    font-size: 0.8rem;
+    margin-bottom: 1.5rem;
+
+    @include flexbox();
+    @include align-items(center);
+    @include themify($themes) {
+      color: themed('meta-color');
+    }
+  }
+
+  &__infos {
+    margin-right: 0.5rem;
+
+    @include flexbox();
+    @include flex-wrap(wrap);
+  }
+
+  &__info {
+    word-break: keep-all;
+    padding: 0 0.125rem;
+  }
+
+  &__contents {
+    &--gallery {
+      overflow: hidden;
+    }
+
+    & > p > a {
+      text-decoration: underline;
+    }
+
+    margin: 1rem 0;
+    line-height: 1.7;
+    width: inheirt;
+    max-width: inherit;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      position: relative;      
+      line-height: 1.25;
+      font-family: $title-font;
+    }
+
+    h1,
+    h2 {
+      padding: 0;
+      color: inherit;
+      font-weight: 900;
+      text-rendering: optimizeLegibility; 
+
+      @include themify($themes) {
+        color: themed("single-contents-title-color");
+      }
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+      @include themify($themes) {
+        color: themed("single-contents-subtitle-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;
+    }
+
+    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 {
+      margin-top: 25px;
+      overflow: auto;
+      line-height: 1.5;
+
+      @include themify($themes) {
+        border-top: 1px solid themed('hr-color');
+        border-bottom: 1px solid themed('hr-color');
+
+        @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+        @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      }
+    }
+
+    pre:not(.chroma) {
+      position: relative;
+    }
+
+    div.chroma {
+      position: relative;
+
+      @include on-event {
+        .copy-to-clipboard {
+          opacity: 1;
+        }
+      }
+    }
+    
+    p > code:not([class^=language]) {
+      padding: 0.25rem 0.5rem;
+      @include themify($codeblock) {
+        color: themed('content-code-color');
+      }
+    }
+
+    code + .copy-to-clipboard {
+      position: absolute;
+      right: 4px;
+      top: 5px;
+      border-radius: 2px;
+      z-index: z('clipboard');
+      @include transition(all, 0.2s, ease);
+    }
+
+    .copy-to-clipboard {
+      background-position: 50% 50%;
+      background-size: 16px 16px;
+      background-repeat: no-repeat;
+      width: 27px;
+      height: 1.45rem;
+      top: -1px;
+      vertical-align: middle;
+      position: relative;      
+      margin-left: -0.2rem;
+      cursor: pointer;
+      border-radius: 0 2px 2px 0;
+      margin-bottom: 1px;
+      opacity: 0;
+
+      @include clippy();
+      @include transition(all, 0.2s, ease);
+    }
+    .copy-to-clipboard:hover {
+      @include translateY(-0.1rem);
+    }
+    .chroma .copy-to-clipboard {
+      position: absolute;
+      right: 4px;
+      top: 5px;      
+      border-radius: 2px;
+      z-index: z('clipboard');
+      @include transition(all, 0.2s, ease);
+    }
+    .chroma .copy-to-clipboard:hover {
+      @include translateY(-0.1rem);
+    }
+    .language-code .copy-to-clipboard {
+      position: absolute;
+      right: 4px;
+      top: 5px;      
+      border-radius: 2px;
+      z-index: z('clipboard');
+      @include transition(all, 0.2s, ease);
+    }
+    .language-code .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.05rem;
+      line-height: 1.75;
+      color: inherit;
+      opacity: 0.8;
+      position: relative;
+      
+      @include themify($themes) {
+          border-left: 0.32813rem solid themed("single-blockquote-border-color");
+      }
+
+      code:not([class^=language]) {
+        padding: 3px 7px;
+        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
+      }
+    }
+
+    img {
+      display: block;
+      border-radius: 0.25rem;
+      margin: 0 auto;
+    }
+
+    p {
+      margin: 0 0 1.75rem 0;
+      padding: 0;      
+
+      code:not([class^=language]) {
+        padding: 3px 7px;
+        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
+      }
+    }
+
+    ul {
+      margin-right: 0;
+      margin-top: 0;
+      padding: 0;
+      list-style: disc outside none;
+    }
+
+    li {
+      margin-left: 2rem;
+      margin-bottom: calc(1rem / 2);
+
+      & > code {
+        padding: 2px 7px;
+      }
+
+      code:not([class^=language]) {
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
+      }
+    }
+
+    hr {
+      margin: 0 0 calc(1.25rem - 1px) 0;
+      padding: 0;
+      border: none;
+      height: 1px;
+      @include themify($themes) {
+        background: themed("single-hr-background-color");
+      }
+    }
+
+    dl dt::after {
+        content: ':';
+    }
+
+    dd {
+      display: block;
+      margin-inline-start: 40px;
+    }
+
+    .anchor {
+      cursor: pointer;
+    }
+
+    a.footnote-ref {
+      font-size: 0.75rem;
+      font-weight: bold;
+      margin-left: 3px;
+
+      &::before {
+        content: "[";
+      }
+
+      &::after {
+        content: "]";
+      }
+    }
+
+    .table-wrapper {
+      overflow-x: auto;      
+
+      > table {
+        max-width: 100%;
+        margin: 10px 0;
+        border-spacing: 0;
+        
+        @include themify($codeblock) {
+          thead {
+            background: themed('content-pre-header-background-color');
+          }
+
+          th {
+            color: themed('content-pre-header-color');            
+          }
+
+          th, td {
+            padding: 5px 15px;
+            font-size: 13.8px;
+            border: 1px double themed('content-pre-border-background-color');
+          }
+        }
+      }
+
+      code:not([class^=language]) {
+        padding: 3px 7px;
+        margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
+      }
+    }
+  }
+
+  &__tags {
+    list-style-type: none;
+    @include flexbox();
+    @include align-items(center);
+    @include flex-wrap(wrap);
+    @include flex-grow(1);
+  }
+
+  &__tag {
+    padding: 0 0.25rem;
+  }
+}
+
+code, pre {
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  font-family: $code-font-stack;
+  overflow: auto;
+
+  a {
+    text-decoration: none !important;
+  }
+}
+
+pre.chroma {
+  padding: 0.25rem 0;
+}
+
+*:not(.chroma) {
+  code, pre {
+    @include themify($codeblock) {
+      color: themed('content-pre-color');
+      background: themed('content-pre-background-color');
+    }
+  }
+
+  code {
+    padding: 0;
+  }
+}
+
+code:not([class^=language]) {  
+  padding: 3px 0;
+  border-radius: 4px;
+  @include themify($codeblock) {
+    color: themed('content-code-color');
+  }
+}
+
+pre:not(.chroma) {
+  overflow: auto;
+}
+
+.single__contents > .language-code, li > .language-code {
+  overflow-x: auto;
+  position: relative;
+  margin: 1rem 0;
+
+  @include on-event {
+    .copy-to-clipboard {
+      opacity: 1;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    padding: 2px 7px;
+    width: 100%;
+    height: 20px;
+    z-index: z('toc');
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    content: '';
+
+    @include themify($codeblock) {
+        color: themed('content-pre-header-color');
+        background: themed('content-pre-header-background-color');
+    }
+  }
+}
+
+.highlight > .chroma {
+  margin: 1em 0;
+  z-index: z('content');
+  overflow-x: auto;  
+
+  @include themify($codeblock) {
+    color: themed('content-pre-color');
+    background: themed('content-pre-background-color');
+  }
+
+  code {
+    padding: 0;
+  }
+
+  code[data-lang] {
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: z('grid');
+      height: 25px;
+      width: 100%;
+      display: inline-block;
+      text-align: right;
+      content: attr(data-lang);
+
+      @include themify($themes) {
+        color: themed('body-background-color');
+        background: themed('body-background-color');
+      }
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: z('clipboard');
+      padding: 0.125rem 0.25rem;
+      height: 25px;
+      font-family: $title-font;
+      font-weight: bold;
+      font-size: 0.85rem;
+      line-height: 1.5;
+      display: inline-block;
+      text-transform: capitalize;
+      border-top-left-radius: 0.2rem;
+      border-top-right-radius: 0.2rem;
+      content: attr(data-lang);
+
+      @include themify($themes) {
+        border: 1px solid themed('hr-color');
+        border-bottom: none;  
+        background-color: themed('body-background-color');
+      }
+    }
+  }
+  
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .lntd {
+    &:first-child {
+      width: 10px;
+      @include no-select;
+    }
+
+    &:last-child {
+      vertical-align: top;
+    }
+  }
+
+  /* LineNumbersTable */  
+  .lnt {
+    margin-left: 0.2rem;
+    margin-right: 0.5rem;
+    @include themify($codeblock) {
+      color: themed('content-pre-number-color');
+    }
+  }
+
+  table.lntable {
+    overflow-x: auto;
+    @include themify($themes) {
+      @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+    }
+  }
+}
+
+li .highlight > .chroma {
+  .lnt:first-child {
+    padding: 0 0.3rem;
+  }
+  .lnt:not(:first-child) {
+    padding: 0 0.3rem;
+  }
+}
+
+table:not(.lntable) {
+  td {
+    code {
+      padding: 2px 7px !important;
+    }
+  }
+}

assets/sass/pages/_taxo.scss

@@ -0,0 +1,31 @@
+.taxo {
+  &__header {
+    height: 170px;
+    width: 100%;
+    font-size: 44px;
+    font-weight: bold;
+    text-transform: capitalize;
+    
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+  }
+
+  &__key {
+    margin: 0 1rem;
+    font-size: 1.5rem;
+  }
+
+  &__ul {
+    margin: 1rem;
+  }
+
+  &__li {
+    margin: 0.125rem 0;
+  }
+
+  &__title {
+    font-size: 1.25rem;
+
+  }
+}

assets/sass/syntax/_dracula.scss

@@ -0,0 +1,62 @@
+@mixin chroma-dracula {
+  /* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
+  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+  /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: black }
+  /* LineNumbersTable */ .chroma .lnt { padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+  /* LineNumbers */ .chroma .ln { padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+  /* Keyword */ .chroma .k { color: #ff79c6 }
+  /* KeywordConstant */ .chroma .kc { color: #ff79c6 }
+  /* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
+  /* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
+  /* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
+  /* KeywordReserved */ .chroma .kr { color: #ff79c6 }
+  /* KeywordType */ .chroma .kt { color: #8be9fd }
+  /* NameAttribute */ .chroma .na { color: #50fa7b }
+  /* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+  /* NameClass */ .chroma .nc { color: #50fa7b }
+  /* NameFunction */ .chroma .nf { color: #50fa7b }
+  /* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+  /* NameTag */ .chroma .nt { color: #ff79c6 }
+  /* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+  /* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+  /* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+  /* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+  /* LiteralString */ .chroma .s { color: #f1fa8c }
+  /* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
+  /* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
+  /* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
+  /* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
+  /* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
+  /* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
+  /* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
+  /* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
+  /* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
+  /* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
+  /* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
+  /* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
+  /* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
+  /* LiteralNumber */ .chroma .m { color: #bd93f9 }
+  /* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+  /* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+  /* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+  /* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+  /* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+  /* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+  /* Operator */ .chroma .o { color: #ff79c6 }
+  /* OperatorWord */ .chroma .ow { color: #ff79c6 }
+  /* Comment */ .chroma .c { color: #6272a4 }
+  /* CommentHashbang */ .chroma .ch { color: #6272a4 }
+  /* CommentMultiline */ .chroma .cm { color: #6272a4 }
+  /* CommentSingle */ .chroma .c1 { color: #6272a4 }
+  /* CommentSpecial */ .chroma .cs { color: #6272a4 }
+  /* CommentPreproc */ .chroma .cp { color: #ff79c6 }
+  /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+  /* GenericDeleted */ .chroma .gd { color: #8b080b }
+  /* GenericEmph */ .chroma .ge { text-decoration: underline }
+  /* GenericHeading */ .chroma .gh { font-weight: bold }
+  /* GenericInserted */ .chroma .gi { font-weight: bold }
+  /* GenericOutput */ .chroma .go { color: #44475a }
+  /* GenericSubheading */ .chroma .gu { font-weight: bold }
+  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
+}

assets/sass/syntax/_duotonelight.scss

@@ -0,0 +1,75 @@
+@mixin chroma-duotonelight {
+  /* Background */ .chroma { background-color: #F5F2F0 }
+  /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+  /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+  /* LineNumbersTable */ .chroma .lnt { padding: 0 0.4em 0 0.4em;color: #728fcb }
+  /* LineNumbers */ .chroma .ln { padding: 0 0.4em 0 0.4em;color: #728fcb }
+  /* Keyword */ .chroma .k { color: #728fcb; font-weight: bold }
+  /* KeywordConstant */ .chroma .kc { color: #728fcb; font-weight: bold }
+  /* KeywordDeclaration */ .chroma .kd { color: #728fcb; font-weight: bold }
+  /* KeywordNamespace */ .chroma .kn { color: #728fcb; font-weight: bold }
+  /* KeywordPseudo */ .chroma .kp { color: #728fcb; font-weight: bold }
+  /* KeywordReserved */ .chroma .kr { color: #728fcb; font-weight: bold }
+  /* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+  /* NameAttribute */ .chroma .na { color: #896724 }
+  /* NameBuiltin */ .chroma .nb { color: #0086b3 }
+  /* NameBuiltinPseudo */ .chroma .bp { color: #b6ad9a }
+  /* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+  /* NameConstant */ .chroma .no { color: #896724 }
+  /* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+  /* NameEntity */ .chroma .ni { color: #728fcb }
+  /* NameException */ .chroma .ne { color: #b29762; font-weight: bold }
+  /* NameFunction */ .chroma .nf { color: #b29762; font-weight: bold }
+  /* NameLabel */ .chroma .nl { color: #b29762; font-weight: bold }
+  /* NameNamespace */ .chroma .nn { color: #555555 }
+  /* NameTag */ .chroma .nt { color: #063289 }
+  /* NameVariable */ .chroma .nv { color: #896724 }
+  /* NameVariableClass */ .chroma .vc { color: #896724 }
+  /* NameVariableGlobal */ .chroma .vg { color: #896724 }
+  /* NameVariableInstance */ .chroma .vi { color: #896724 }
+  /* LiteralString */ .chroma .s { color: #728fcb }
+  /* LiteralStringAffix */ .chroma .sa { color: #728fcb }
+  /* LiteralStringBacktick */ .chroma .sb { color: #728fcb }
+  /* LiteralStringChar */ .chroma .sc { color: #728fcb }
+  /* LiteralStringDelimiter */ .chroma .dl { color: #728fcb }
+  /* LiteralStringDoc */ .chroma .sd { color: #728fcb }
+  /* LiteralStringDouble */ .chroma .s2 { color: #728fcb }
+  /* LiteralStringEscape */ .chroma .se { color: #728fcb }
+  /* LiteralStringHeredoc */ .chroma .sh { color: #728fcb }
+  /* LiteralStringInterpol */ .chroma .si { color: #728fcb }
+  /* LiteralStringOther */ .chroma .sx { color: #728fcb }
+  /* LiteralStringRegex */ .chroma .sr { color: #009926 }
+  /* LiteralStringSingle */ .chroma .s1 { color: #728fcb }
+  /* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+  /* LiteralNumber */ .chroma .m { color: #009999 }
+  /* LiteralNumberBin */ .chroma .mb { color: #009999 }
+  /* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+  /* LiteralNumberHex */ .chroma .mh { color: #009999 }
+  /* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+  /* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+  /* LiteralNumberOct */ .chroma .mo { color: #009999 }
+  /* Operator */ .chroma .o { color: #728fcb; font-weight: bold }
+  /* OperatorWord */ .chroma .ow { color: #728fcb; font-weight: bold }
+  /* Comment */ .chroma .c { color: #b6ad9a; font-style: italic }
+  /* CommentHashbang */ .chroma .ch { color: #b6ad9a; font-style: italic }
+  /* CommentMultiline */ .chroma .cm { color: #b6ad9a; font-style: italic }
+  /* CommentSingle */ .chroma .c1 { color: #b6ad9a; font-style: italic }
+  /* CommentSpecial */ .chroma .cs { color: #b6ad9a; font-weight: bold; font-style: italic }
+  /* CommentPreproc */ .chroma .cp { color: #b6ad9a; font-weight: bold; font-style: italic }
+  /* CommentPreprocFile */ .chroma .cpf { color: #b6ad9a; font-weight: bold; font-style: italic }
+  /* GenericDeleted */ .chroma .gd { color: #728fcb; background-color: #ffdddd }
+  /* GenericEmph */ .chroma .ge { color: #728fcb; font-style: italic }
+  /* GenericError */ .chroma .gr { color: #aa0000 }
+  /* GenericHeading */ .chroma .gh { color: #b6ad9a }
+  /* GenericInserted */ .chroma .gi { color: #728fcb; background-color: #ddffdd }
+  /* GenericOutput */ .chroma .go { color: #888888 }
+  /* GenericPrompt */ .chroma .gp { color: #555555 }
+  /* GenericStrong */ .chroma .gs { font-weight: bold }
+  /* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+  /* GenericTraceback */ .chroma .gt { color: #aa0000 }
+  /* GenericUnderline */ .chroma .gl { text-decoration: underline }
+  /* TextWhitespace */ .chroma .w { color: #bbbbbb }
+  /* Punctuatoin */ .chroma .p { color: #b6ad9a }
+}

assets/sass/syntax/_monokai.scss

@@ -0,0 +1,61 @@
+@mixin chroma-monokai {
+  /* Background */ .chroma { color: #f8f8f2; background-color: #171f2e }
+  /* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
+  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+  /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: black }
+  /* LineNumbersTable */ .chroma .lnt { padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+  /* LineNumbers */ .chroma .ln { padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+  /* Keyword */ .chroma .k { color: #66d9ef }
+  /* KeywordConstant */ .chroma .kc { color: #66d9ef }
+  /* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
+  /* KeywordNamespace */ .chroma .kn { color: #f92672 }
+  /* KeywordPseudo */ .chroma .kp { color: #66d9ef }
+  /* KeywordReserved */ .chroma .kr { color: #66d9ef }
+  /* KeywordType */ .chroma .kt { color: #66d9ef }
+  /* NameAttribute */ .chroma .na { color: #a6e22e }
+  /* NameClass */ .chroma .nc { color: #a6e22e }
+  /* NameConstant */ .chroma .no { color: #66d9ef }
+  /* NameDecorator */ .chroma .nd { color: #a6e22e }
+  /* NameException */ .chroma .ne { color: #a6e22e }
+  /* NameFunction */ .chroma .nf { color: #a6e22e }
+  /* NameOther */ .chroma .nx { color: #a6e22e }
+  /* NameTag */ .chroma .nt { color: #f92672 }
+  /* Literal */ .chroma .l { color: #ae81ff }
+  /* LiteralDate */ .chroma .ld { color: #e6db74 }
+  /* LiteralString */ .chroma .s { color: #e6db74 }
+  /* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
+  /* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
+  /* LiteralStringChar */ .chroma .sc { color: #e6db74 }
+  /* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
+  /* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
+  /* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
+  /* LiteralStringEscape */ .chroma .se { color: #ae81ff }
+  /* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
+  /* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
+  /* LiteralStringOther */ .chroma .sx { color: #e6db74 }
+  /* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
+  /* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
+  /* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
+  /* LiteralNumber */ .chroma .m { color: #ae81ff }
+  /* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
+  /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
+  /* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
+  /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
+  /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
+  /* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
+  /* Operator */ .chroma .o { color: #f92672 }
+  /* OperatorWord */ .chroma .ow { color: #f92672 }
+  /* Comment */ .chroma .c { color: #75715e }
+  /* CommentHashbang */ .chroma .ch { color: #75715e }
+  /* CommentMultiline */ .chroma .cm { color: #75715e }
+  /* CommentSingle */ .chroma .c1 { color: #75715e }
+  /* CommentSpecial */ .chroma .cs { color: #75715e }
+  /* CommentPreproc */ .chroma .cp { color: #75715e }
+  /* CommentPreprocFile */ .chroma .cpf { color: #75715e }
+  /* GenericDeleted */ .chroma .gd { color: #f92672 }
+  /* GenericEmph */ .chroma .ge { font-style: italic }
+  /* GenericInserted */ .chroma .gi { color: #a6e22e }
+  /* GenericStrong */ .chroma .gs { font-weight: bold }
+  /* GenericSubheading */ .chroma .gu { color: #75715e }
+}

assets/sass/syntax/_syntax.scss

@@ -0,0 +1,11 @@
+
+@import 'duotonelight';
+@import 'dracula';
+
+.theme__light {
+  @include chroma-duotonelight;
+}
+
+.theme__dark {
+  @include chroma-dracula;
+}

assets/sass/themes/_dark.scss

@@ -0,0 +1,35 @@
+$dark: (
+  link: $dark-link-color,
+  link-hover: $dark-link-hover-color,
+  body-color: #FCFCFA,
+  hr-color: #595B5C,
+  border-line-color: rgba(243, 242, 241, 0.1),
+  active-font-color: $dark-active-font-color,
+  body-background-color: #2D2A2E,
+  back-background-color: #212121,
+  navbar-background-color: #403E41,
+  navbar-hover-background-color: rgba(225,225,225,0.4),
+  search-border-active-color: #424242,
+  search-border-outline-color: rgba(166, 166, 166, 0.45),
+  search-background-color: lighten(#403E41, 5%),
+  search-placeholder-color: #999,
+  search-content-background-color: lighten(#403E41, 5%),
+  search-hover-background-color: #403E41,
+  search-hover-border-color: #403E41,
+  search-border-color: #383838,
+  search-highlight-color: #FF6188,
+  custom-scrollbar-foreground-color: #888,
+  custom-scrollbar-background-color: #eee,
+  dropdown-hover-background-color: #727072,
+  dropdown-background-color: #595B5C,
+  dropdown-item-active-background-color: #424242,
+  menu-arrow-color: #FCFCFA,
+  pagination-color: #FCFCFA,
+  toc-color: #aaa,
+  banner-background-color: darken(#212121, 3%),
+  landing-button-primary: $dark-active-font-color,
+  landing-button-default: #ccc,
+  pagination-link-color: #82aaff,
+  pagination-disabled-color: #757575,
+  pagination-number-color: #FCFCFA,
+);

assets/sass/themes/_darkcode.scss

@@ -0,0 +1,9 @@
+$darkcode: (
+  content-code-color: #fcfcfa,
+  content-pre-color: #eee,
+  content-pre-number-color: #666,
+  content-pre-background-color: #171f2e,
+  content-pre-header-background-color: darken(#011627, 1.5%),
+  content-pre-border-background-color: #3a3a3a,
+  content-pre-header-color: #FCFCFA,
+);

assets/sass/themes/_light.scss

@@ -0,0 +1,36 @@
+$light: (
+  link: $light-link-color,
+  link-hover: $light-link-hover-color,
+  body-color: #242729,
+  hr-color: #bdbdbd,
+  border-line-color: rgba(12, 13, 14, 0.1),
+  active-font-color: $light-active-font-color,
+  body-background-color: #fff,
+  back-background-color: #f7f8f9,
+  navbar-background-color: #fafafa,
+  navbar-hover-background-color: rgba(225,225,225,0.4),
+  search-border-outline-color: rgba(207, 216, 220, 0.6),
+  search-border-active-color: #b0bec5,
+  search-background-color: #fff,
+  search-placeholder-color: #aaa,
+  search-content-background-color: #f1f1f1,
+  search-hover-background-color: #eaeaea,
+  search-hover-border-color: #addafc,
+  search-border-color: #e0e0e0,
+  search-highlight-color: #FF6188,
+  custom-scrollbar-foreground-color: #cfd8dc,
+  custom-scrollbar-background-color: #FCFCFA,
+  dropdown-hover-background-color: rgba(225,225,225,0.4),
+  dropdown-background-color: #fff,
+  dropdown-item-active-background-color: #e0e0e0,
+  menu-arrow-color: #535a61,
+  pagination-color: #535a61,
+  toc-color: #919191,
+  banner-background-color: #eee,
+  landing-button-primary: $light-active-font-color,
+  landing-button-default: #535a61,
+  pagination-link-color: #424242,
+  pagination-background-color: #eee,
+  pagination-disabled-color: #bdbdbd,
+  pagination-number-color: #757575,
+);

assets/sass/themes/_lightcode.scss

@@ -0,0 +1,10 @@
+$lightcode: (
+  content-code-color: #607d8b,
+  content-pre-main-color: #607d8b,
+  content-pre-color: #344952,
+  content-pre-number-color: #aaa,
+  content-pre-background-color: #eceff1,
+  content-pre-border-background-color: darken(#eceff1, 7%),
+  content-pre-header-background-color: darken(#eceff1, 3.5%),
+  content-pre-header-color: #344952,
+);

assets/sass/themes/_theme.scss

@@ -0,0 +1,15 @@
+@import 'dark';
+@import 'light';
+
+@import 'darkcode';
+@import 'lightcode';
+
+$themes: (
+  dark: $dark,
+  light: $light,
+);
+
+$codeblock: (
+  dark: $darkcode,
+  light: $lightcode,
+);

data/color.toml

@@ -0,0 +1,8 @@
+dark_active_font_color = "#aed581"
+dark_link_color = "#FFD866"
+dark_link_hover_color = "#FF6188"
+
+
+light_active_font_color = "#0071bc"
+light_link_color = "#1565c0"
+light_link_hover_color = "#379fef"

data/font.toml

@@ -0,0 +1,2 @@
+title_font = "\"Montserrat\", sans-serif"
+content_font = "\"muli\", sans-serif"

exampleSite/config/_default/config.toml

@@ -0,0 +1,39 @@
+baseURL = "http://example.org"
+title = "Hugo Zdoc Theme"
+theme = "zdoc"
+
+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = true
+hasCJKLanguage = true
+
+copyright = "©{year}, All Rights Reserved"
+timeout = 10000
+enableEmoji = true
+paginate = 13
+rssLimit = 100
+
+googleAnalytics = ""
+
+disableKinds = ["taxonomyTerm"]
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      hardWraps = true
+      unsafe = true
+      xHTML = true
+  [markup.highlight]
+    codeFences = true
+    lineNos = true
+    lineNumbersInTable = true
+    noClasses = false
+  [markup.tableOfContents]
+    endLevel = 4
+    ordered = false
+    startLevel = 2
+
+[outputs]
+  home = ["HTML", "RSS", "JSON"]
+
+[taxonomies]
+  tag = "tags"

exampleSite/config/_default/languages.toml

@@ -0,0 +1,9 @@
+[en]
+  title = "ZDoc"
+  languageName = "English"
+  weight = 1
+
+[ko]
+  title = "ZDoc"
+  languageName = "한국어"
+  weight = 2

exampleSite/config/_default/menus.en.toml

@@ -0,0 +1,17 @@
+[[main]]
+  identifier = "docs"
+  name = "Docs"
+  url = "docs"
+  weight = 1
+
+[[main]]
+  identifier = "updates"
+  name = "Updates"
+  url = "updates"
+  weight = 2
+
+[[main]]
+  identifier = "blog"
+  name = "Blog"
+  url = "blog"
+  weight = 3

exampleSite/config/_default/menus.ko.toml

@@ -0,0 +1,17 @@
+[[main]]
+  identifier = "docs"
+  name = "Docs"
+  url = "docs"
+  weight = 1
+
+[[main]]
+  identifier = "updates"
+  name = "Updates"
+  url = "updates"
+  weight = 2
+
+[[main]]
+  identifier = "blog"
+  name = "Blog"
+  url = "blog"
+  weight = 3

exampleSite/config/_default/params.toml

@@ -0,0 +1,24 @@
+logo = true
+logoText = "ZDoc"
+logoType = "short" # long, short
+description = "The ZDoc theme for Hugo example site."
+
+themeOptions = ["light", "dark"]
+
+useFaviconGenerator = true # https://www.favicon-generator.org/
+
+enableSearch = true
+enableLangChange = true
+enableDarkMode = true
+enableBreadcrumb = true
+enableToc = true
+enableMenu = true
+enableNavbar = true
+enableFooter = true
+showPoweredBy = true
+
+paginateWindow = 1
+taxoPaginate = 13
+taxoGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
+
+github = "https://github.com/zzossig/hugo-theme-zzo"

exampleSite/content/_index.md

@@ -0,0 +1,30 @@
+---
+title: ZDoc
+description: Hugo ZDoc theme landing page
+date: 2020-01-26T04:15:05+09:00
+draft: false
+updatesBanner: "Banner -   [Hugo ZDoc theme](https://github.com/zzossig/hugo-theme-zdoc)   just arrived"
+landingImage: favicon/android-icon-192x192.png
+landingTitle:
+  - Hugo ZDoc theme
+landingText:
+  - Make a documentation with hugo zdoc theme!
+titleColor:
+textColor:
+spaceBetweenTitleText: 25
+buttons:
+  - link: /about
+    text: GET STARTED
+    color: primary
+  - link: https://github.com/zzossig/hugo-theme-zdoc
+    text: DOWNLOAD
+    color: default
+shields:
+  - link: https://github.com/zzossig/hugo-theme-zdoc
+    image: https://img.shields.io/github/forks/zzossig/hugo-theme-zdoc?label=Fork&style=social
+    alt: Hugo ZDoc theme github forks
+  - link: https://github.com/zzossig/hugo-theme-zdoc
+    image: https://img.shields.io/github/stars/zzossig/hugo-theme-zdoc?label=Star&style=social
+    alt: Hugo ZDoc theme github stars
+---
+

exampleSite/content/blog/_index.md

@@ -0,0 +1,39 @@
+---
+title: Blog
+description: Blog list page
+blogHeaderType: text
+header:
+  - type: text
+    height: 170
+    paddingX: 50
+    align: center
+    title:
+      - Blog
+    subtitle:
+    titleColor: 
+    titleFontSize: 44
+    subtitleColor: 
+    subtitleFontSize: 20
+    spaceBetweenTitleSubtitle: 16
+  
+  - type: img
+    imageSrc: images/header/background.png
+    imageSize: initial
+    imageRepeat: no-repeat
+    imagePosition: center
+    height: 170
+    paddingX: 50
+    paddingY: 0
+    align: center
+    title:
+      - 
+    subtitle:
+      - 
+    titleColor: 
+    titleShadow: true
+    titleFontSize: 44
+    subtitleColor: 
+    subtitleCursive: true
+    subtitleFontSize: 16
+    spaceBetweenTitleSubtitle: 20
+---

exampleSite/content/blog/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 >}}

exampleSite/content/blog/markdown-syntax.md

@@ -0,0 +1,146 @@
++++
+author = "Hugo Authors"
+title = "Markdown Syntax Guide"
+date = "2019-03-11"
+description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+tags = [
+    "markdown",
+    "css",
+    "html",
+    "themes",
+]
+categories = [
+    "themes",
+    "syntax",
+]
+series = ["Themes Guide"]
++++
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+<!--more-->
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+#### Blockquote without attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+#### Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.</p>
+> — <cite>Rob Pike[^1]</cite>
+
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+## Tables
+
+Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Inline Markdown within tables
+
+| Inline&nbsp;&nbsp;&nbsp;     | Markdown&nbsp;&nbsp;&nbsp;  | In&nbsp;&nbsp;&nbsp;                | Table      |
+| ---------- | --------- | ----------------- | ---------- |
+| *italics*  | **bold**  | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code`     |
+
+## Code Blocks
+
+#### Code block with backticks
+
+```
+html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+#### Code block indented with four spaces
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>Example HTML5 Document</title>
+    </head>
+    <body>
+      <p>Test</p>
+    </body>
+    </html>
+
+#### Code block with Hugo's internal highlight shortcode
+{{< highlight html >}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /highlight >}}
+
+## List Types
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Item
+  1. First Sub-item
+  2. Second Sub-item
+
+## Other Elements — abbr, sub, sup, kbd, mark
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+

exampleSite/content/blog/placeholder-text.md

@@ -0,0 +1,58 @@
++++
+author = "Hugo Authors"
+title = "Placeholder Text"
+date = "2019-03-09"
+description = "Lorem Ipsum Dolor Si Amet"
+tags = [
+    "markdown",
+    "text",
+]
++++
+
+Lorem est tota propiore conpellat pectoribus de
+pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice
+subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc
+caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis
+lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
+
+1. Exierant elisi ambit vivere dedere
+2. Duce pollice
+3. Eris modo
+4. Spargitque ferrea quos palude
+
+Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus
+silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria
+tractus malis.
+
+1. Comas hunc haec pietate fetum procerum dixit
+2. Post torum vates letum Tiresia
+3. Flumen querellas
+4. Arcanaque montibus omnes
+5. Quidem et
+
+# Vagus elidunt
+
+<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="100%"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+
+[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
+
+## Mane refeci capiebant unda mulcebat
+
+Victa caducifer, malo vulnere contra
+dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere
+furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
+
+Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli
+Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare
+Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert
+ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae
+vulnus haerentia iuste et exercebat, sui et.
+
+Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem
+Propoetides **parte**.
+
+{{< css.inline >}}
+<style>
+.canon { background: white; width: 100%; height: auto;}
+</style>
+{{< /css.inline >}}

exampleSite/content/blog/rich-content.md

@@ -0,0 +1,43 @@
++++
+author = "Hugo Authors"
+title = "Rich Content"
+date = "2019-03-10"
+description = "A brief description of Hugo Shortcodes"
+tags = [
+    "shortcodes",
+    "privacy",
+]
+featured_image = "free.jpg"
++++
+
+Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
+<!--more-->
+---
+
+## Instagram Simple Shortcode
+
+{{< instagram_simple BGvuInzyFAe hidecaption >}}
+
+<br>
+
+---
+
+## YouTube Privacy Enhanced Shortcode
+
+{{< youtube ZJthWmvUzzc >}}
+
+<br>
+
+---
+
+## Twitter Simple Shortcode
+
+{{< twitter_simple 1085870671291310081 >}}
+
+<br>
+
+---
+
+## Vimeo Simple Shortcode
+
+{{< vimeo_simple 48912912 >}}

exampleSite/content/docs/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Docs"
+description: "test post index"
+date: 2020-01-11T14:09:21+09:00
+draft: false
+---
+
+Docs page.

exampleSite/content/docs/contentfortmats.md

@@ -0,0 +1,8 @@
+---
+title: "Content Formats"
+description: "test post"
+date: 2020-01-28T00:38:51+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/docs/contentmanagement/_index.md

@@ -0,0 +1,9 @@
+---
+title: "Content Management"
+description: "test post index"
+date: 2020-01-28T00:36:39+09:00
+draft: false
+weight: 2
+collapsible: true
+---
+

exampleSite/content/docs/contentmanagement/frontmatter.md

@@ -0,0 +1,8 @@
+---
+title: "Frontmatter"
+description: "test post"
+date: 2020-01-28T00:36:14+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/docs/contentmanagement/sections.md

@@ -0,0 +1,146 @@
++++
+author = "Hugo Authors"
+title = "Section"
+date = "2019-03-11"
+description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+tags = [
+    "markdown",
+    "css",
+    "html",
+    "themes",
+]
+categories = [
+    "themes",
+    "syntax",
+]
+series = ["Themes Guide"]
++++
+
+This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+<!--more-->
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+#### Blockquote without attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+#### Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.</p>
+> — <cite>Rob Pike[^1]</cite>
+
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+## Tables
+
+Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
+
+   Name | Age
+--------|------
+    Bob | 27
+  Alice | 23
+
+#### Inline Markdown within tables
+
+| Inline&nbsp;&nbsp;&nbsp;     | Markdown&nbsp;&nbsp;&nbsp;  | In&nbsp;&nbsp;&nbsp;                | Table      |
+| ---------- | --------- | ----------------- | ---------- |
+| *italics*  | **bold**  | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `code`     |
+
+## Code Blocks
+
+#### Code block with backticks
+
+```
+html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+#### Code block indented with four spaces
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>Example HTML5 Document</title>
+    </head>
+    <body>
+      <p>Test</p>
+    </body>
+    </html>
+
+#### Code block with Hugo's internal highlight shortcode
+{{< highlight html >}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+{{< /highlight >}}
+
+## List Types
+
+#### Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+#### Unordered List
+
+* List item
+* Another item
+* And another item
+
+#### Nested list
+
+* Item
+  1. First Sub-item
+  2. Second Sub-item
+
+## Other Elements — abbr, sub, sup, kbd, mark
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+

exampleSite/content/docs/contentmanagement/shortcodes.md

@@ -0,0 +1,8 @@
+---
+title: "Shortcodes"
+description: "test post"
+date: 2020-01-28T00:36:19+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/docs/gettingstarted/_index.md

@@ -0,0 +1,9 @@
+---
+title: "Getting Started"
+description: "test post index"
+date: 2020-01-28T00:34:39+09:00
+draft: false
+weight: 1
+collapsible: true
+---
+

exampleSite/content/docs/gettingstarted/basicusage.md

@@ -0,0 +1,9 @@
+---
+title: "Basic Usage"
+description: "test post"
+date: 2020-01-28T00:34:51+09:00
+draft: false
+weight: -4
+---
+
+*Markdown here*

exampleSite/content/docs/gettingstarted/configuration.md

@@ -0,0 +1,9 @@
+---
+title: "Configuration"
+description: "test post"
+date: 2020-01-28T00:34:56+09:00
+draft: false
+weight: -3
+---
+
+*Markdown here*

exampleSite/content/docs/gettingstarted/installation.md

@@ -0,0 +1,9 @@
+---
+title: "Installation"
+description: "test post"
+date: 2020-01-28T00:34:13+09:00
+draft: false
+weight: -2
+---
+
+*Markdown here*

exampleSite/content/docs/gettingstarted/quickstart.md

@@ -0,0 +1,9 @@
+---
+title: "Quick Start"
+description: "test post"
+date: 2020-01-28T00:34:41+09:00
+draft: false
+weight: -1
+---
+
+*Markdown here*

exampleSite/content/docs/imageprocessing.md

@@ -0,0 +1,8 @@
+---
+title: "Image Processing"
+description: "test post"
+date: 2020-01-28T00:38:48+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/docs/pagebundles.md

@@ -0,0 +1,8 @@
+---
+title: "Page Bundles"
+description: "test post"
+date: 2020-01-28T00:38:59+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/docs/pageresources.md

@@ -0,0 +1,8 @@
+---
+title: "Page Resources"
+description: "test post"
+date: 2020-01-28T00:39:06+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/docs/relatedcontent.md

@@ -0,0 +1,8 @@
+---
+title: "Related content"
+description: "test post"
+date: 2020-01-28T00:39:09+09:00
+draft: false
+---
+
+*Markdown here*

exampleSite/content/updates/2019_april.md

@@ -0,0 +1,9 @@
+---
+title: "April 2019"
+description: "test post"
+date: 2020-01-28T00:10:48+09:00
+draft: false
+weight: -4
+---
+
+*Markdown here*

exampleSite/content/updates/2019_february.md

@@ -0,0 +1,9 @@
+---
+title: "February 2019"
+description: "test post"
+date: 2020-01-28T00:10:37+09:00
+draft: false
+weight: -2
+---
+
+*Markdown here*

exampleSite/content/updates/2019_january.md

@@ -0,0 +1,9 @@
+---
+title: "January 2019"
+description: "test post"
+date: 2020-01-28T00:10:09+09:00
+draft: false
+weight: -1
+---
+
+*Markdown here*

exampleSite/content/updates/2019_march.md

@@ -0,0 +1,9 @@
+---
+title: "March 2019"
+description: "test post"
+date: 2020-01-28T00:10:42+09:00
+draft: false
+weight: -3
+---
+
+*Markdown here*

exampleSite/content/updates/2019_may.md

@@ -0,0 +1,9 @@
+---
+title: "May 2019"
+description: "test post"
+date: 2020-01-28T00:10:51+09:00
+draft: false
+weight: -5
+---
+
+*Markdown here*

exampleSite/content/updates/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Updates"
+description: "test post index"
+date: 2020-01-28T00:08:29+09:00
+draft: false
+---
+
+Updates

exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.json

@@ -0,0 +1 @@
+{"Target":"css/main.min.css","MediaType":"text/css","Data":{}}