diff --git a/.DS_Store b/.DS_Store
index 47064bb6800..c55f6f6f5f5 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index cc14a374697..00000000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,101 +0,0 @@
-PATH
-  remote: .
-  specs:
-    jekyll-theme-yat (1.10.0)
-      jekyll (> 3.5, < 5.0)
-      jekyll-feed (~> 0.9)
-      jekyll-paginate (~> 1.1)
-      jekyll-seo-tag (~> 2.1)
-      jekyll-sitemap (~> 1.3)
-      jekyll-spaceship (~> 0.2)
-
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.3.4)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.17.1-arm64-darwin)
-    forwardable-extended (2.6.0)
-    gemoji (3.0.1)
-    google-protobuf (3.25.5-arm64-darwin)
-    http_parser.rb (0.8.0)
-    i18n (1.14.6)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.3.4)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-feed (0.17.0)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-paginate (1.1.0)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
-    jekyll-seo-tag (2.8.0)
-      jekyll (>= 3.8, < 5.0)
-    jekyll-sitemap (1.4.0)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-spaceship (0.10.2)
-      gemoji (~> 3.0)
-      jekyll (>= 3.6, < 5.0)
-      nokogiri (~> 1.6)
-      rainbow (~> 3.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.5.1)
-      rexml (>= 3.3.9)
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.4)
-    listen (3.9.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    nokogiri (1.18.1-arm64-darwin)
-      racc (~> 1.4)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (6.0.1)
-    racc (1.8.1)
-    rainbow (3.1.1)
-    rake (12.3.3)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.11.1)
-      ffi (~> 1.0)
-    rexml (3.4.0)
-    rouge (4.5.1)
-    safe_yaml (1.0.5)
-    sass-embedded (1.77.5-arm64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.6.0)
-    webrick (1.9.1)
-
-PLATFORMS
-  arm64-darwin-24
-
-DEPENDENCIES
-  bundler (>= 1.6, < 3.0)
-  jekyll-theme-yat!
-  rake (>= 12.0, < 13.0)
-
-BUNDLED WITH
-   2.4.1
diff --git a/_includes/custom-head.html b/_includes/custom-head.html
new file mode 100644
index 00000000000..dfbd09addf9
--- /dev/null
+++ b/_includes/custom-head.html
@@ -0,0 +1,6 @@
+{% comment %}
+  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:
+
+  1. Head over to https://realfavicongenerator.net/ to add your own favicons.
+  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
+{% endcomment %}
\ No newline at end of file
diff --git a/_includes/extensions/click-to-top.html b/_includes/extensions/click-to-top.html
new file mode 100644
index 00000000000..fadd32501a9
--- /dev/null
+++ b/_includes/extensions/click-to-top.html
@@ -0,0 +1,18 @@
+<div id="click-to-top" class="click-to-top">
+  <i class="fa fa-arrow-up"></i>
+</div>
+<script>
+  (function () {
+    const clickToTop = document.getElementById('click-to-top');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 100) {
+        clickToTop.classList.add('show')
+      }else {
+        clickToTop.classList.remove('show')
+      }
+    });
+    clickToTop.addEventListener('click', () => {
+      window.smoothScrollTo(0);
+    });
+  })();
+</script>
diff --git a/_includes/extensions/code-highlight.html b/_includes/extensions/code-highlight.html
new file mode 100644
index 00000000000..b7c6399f15c
--- /dev/null
+++ b/_includes/extensions/code-highlight.html
@@ -0,0 +1,91 @@
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
+<!-- and it's easy to individually load additional languages -->
+<script charset="UTF-8"
+        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/go.min.js"
+        async></script>
+
+{%- assign name = 'code_badge.enabled' -%}
+{%- include functions.html func='get_value' default='true' -%}
+{%- assign badge_enabled = return -%}
+
+{%- assign name = 'code_badge.color' -%}
+{%- include functions.html func='get_value' default='#fff' -%}
+{%- assign badge_color = return -%}
+
+{%- assign name = 'code_badge.background_color' -%}
+{%- include functions.html func='get_value' default='#ff4e00' -%}
+{%- assign badge_background_color = return -%}
+
+{%- assign name = 'code_badge.text_transform' -%}
+{%- include functions.html func='get_value' default='uppercase' -%}
+{%- assign badge_text_transform = return -%}
+
+<script>
+// Init highlight js
+document.addEventListener('DOMContentLoaded', function(event) {
+  var els = document.querySelectorAll('pre code')
+
+  function addLangData(block) {
+    var outer = block.parentElement.parentElement.parentElement;
+    var lang = block.getAttribute('data-lang');
+    for (var i = 0; i < outer.classList.length; i++) {
+      var cls = outer.classList[i];
+      if (cls.startsWith('language-')) {
+        lang = cls;
+        break;
+      }
+    }
+    if (!lang) {
+      cls = block.getAttribute('class');
+      lang = cls ? cls.replace('hljs ', '') : '';
+    }
+    if (lang.startsWith('language-')) {
+      lang = lang.substr(9);
+    }
+    block.setAttribute('class', 'hljs ' + lang);
+    block.parentNode.setAttribute('data-lang', lang);
+  }
+
+  function addBadge(block) {
+    var enabled = ('{{ badge_enabled }}' || 'true').toLowerCase();
+    if (enabled == 'true') {
+      var pre = block.parentElement;
+      pre.classList.add('badge');
+    }
+  }
+
+  function handle(block) {
+    addLangData(block);
+    addBadge(block)
+    hljs.highlightBlock(block);
+  }
+
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    handle(el);
+  }
+});
+</script>
+
+<style>
+  /* code language badge */
+  pre.badge::before {
+    content: attr(data-lang);
+    color: {{badge_color}};
+    background-color: {{badge_background_color}};
+    padding: 0 .5em;
+    border-radius: 0 2px;
+    text-transform: {{badge_text_transform}};
+    text-align: center;
+    min-width: 32px;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+  }
+
+  /* fix wrong badge display for firefox browser */
+  code > table pre::before {
+    display: none;
+  }
+</style>
diff --git a/_includes/extensions/comments/disqus.html b/_includes/extensions/comments/disqus.html
new file mode 100644
index 00000000000..b46f070519a
--- /dev/null
+++ b/_includes/extensions/comments/disqus.html
@@ -0,0 +1,17 @@
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+
+      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
diff --git a/_includes/extensions/comments/gitment.html b/_includes/extensions/comments/gitment.html
new file mode 100644
index 00000000000..b3a8beb92c2
--- /dev/null
+++ b/_includes/extensions/comments/gitment.html
@@ -0,0 +1,15 @@
+  <div id="gitment_thread"></div>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css"/>
+  <script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js" async></script>
+  <script>
+    var gitment = new Gitment({
+      id: '{{ page.id }}',
+      owner: '{{ site.gitment.username }}',
+      repo: '{{ site.gitment.repo }}',
+      oauth: {
+        client_id: '{{ site.gitment.client_id }}',
+        client_secret: '{{ site.gitment.client_secret }}',
+      },
+    });
+    gitment.render('gitment_thread')
+  </script>
diff --git a/_includes/extensions/comments/utterances.html b/_includes/extensions/comments/utterances.html
new file mode 100644
index 00000000000..8fe8bebfd4d
--- /dev/null
+++ b/_includes/extensions/comments/utterances.html
@@ -0,0 +1,51 @@
+{%- if site.utterances.follow_site_theme -%}
+<div id="utterances-placeholder"></div>
+<script>
+  const utterancesThemeFromDataTheme = () => {
+    const dataTheme = document.documentElement.getAttribute('data-theme');
+    return `github-${dataTheme}`;
+  };
+
+  const setUtterancesTheme = () => {
+    const iframe = document.querySelector('.utterances-frame');
+    if (iframe) {
+      const message = {
+        type: 'set-theme',
+        theme: utterancesThemeFromDataTheme()
+      };
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
+  // dynamic change
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+        setUtterancesTheme();
+      }
+    }
+  });
+  observer.observe(document.documentElement, { attributes: true, childList: false, subtree: false });
+
+  let utterancesScript = document.createElement('script');
+  utterancesScript.async = true;
+  utterancesScript.src = 'https://utteranc.es/client.js';
+  utterancesScript.crossOrigin = 'anonymous';
+  utterancesScript.setAttribute('issue-term', '{{ site.utterances.issue_term }}');
+  utterancesScript.setAttribute('label', '{{ site.utterances.label }}');
+  utterancesScript.setAttribute('repo', '{{ site.utterances.repo }}');
+  utterancesScript.setAttribute('theme', utterancesThemeFromDataTheme());
+
+  const placeholder = document.getElementById('utterances-placeholder');
+  placeholder.parentNode.replaceChild(utterancesScript, placeholder);
+</script>
+{%- else -%}
+<script async
+        crossorigin="anonymous"
+        issue-term="{{ site.utterances.issue_term }}"
+        label="{{ site.utterances.label }}"
+        repo="{{ site.utterances.repo }}"
+        src="https://utteranc.es/client.js"
+        theme="{{ site.utterances.theme }}">
+ </script>
+{%- endif -%}
diff --git a/_includes/extensions/geopattern.html b/_includes/extensions/geopattern.html
new file mode 100644
index 00000000000..3931533e8d1
--- /dev/null
+++ b/_includes/extensions/geopattern.html
@@ -0,0 +1,21 @@
+{% if include.selector %}
+  {% assign selector = include.selector %}
+{% endif %}
+
+{% if include.seed %}
+  {% assign seed = include.seed %}
+{% endif %}
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
+<script>
+  function setRandomBgImage(selector, seed) {
+    var pattern = GeoPattern.generate(seed);
+    var element = document.querySelector(selector)
+    if (element) {
+      element.style.backgroundImage = pattern.toDataUrl();
+    }
+  }
+
+  setRandomBgImage('{{ selector }}', '{{ seed }}');
+</script>
+
diff --git a/_includes/extensions/google-analytics.html b/_includes/extensions/google-analytics.html
new file mode 100644
index 00000000000..9ae896390e3
--- /dev/null
+++ b/_includes/extensions/google-analytics.html
@@ -0,0 +1,27 @@
+<!-- Google tag (gtag.js) -->
+<script>
+  function initGoogleAnalytics() {
+    var doNotTrack = (window.doNotTrack === "1" || navigator.doNotTrack === "1" ||
+      navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1");
+    var enableDNT = "{{ site.enableDNT | default: true }}" == "true";
+
+    if (!enableDNT || !doNotTrack) {
+      var measurementId = '{{ site.google_analytics }}';
+
+      (function(src) {
+        var tag = document.createElement('script');
+        tag.src = src;
+        tag.async = true;
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+      })('https://www.googletagmanager.com/gtag/js?id=' + measurementId);
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', measurementId);
+    }
+  }
+  window.addEventListener("load", initGoogleAnalytics);
+</script>
+
diff --git a/_includes/extensions/google-translate.html b/_includes/extensions/google-translate.html
new file mode 100644
index 00000000000..14b019cff05
--- /dev/null
+++ b/_includes/extensions/google-translate.html
@@ -0,0 +1,108 @@
+{% if include.translate_langs %}
+  {% assign translate_langs = include.translate_langs %}
+{% endif %}
+
+{% if include.lang %}
+  {% assign lang = include.lang %}
+{% endif %}
+
+<div id="google_translate_element" style="display: none;">
+</div>
+
+<div class="ct-language">
+  <ul class="list-unstyled ct-language-dropdown">
+    {% for item in translate_langs %}
+      <li>
+        <a href="#" class="lang-select" data-lang="{{ item.lang }}">
+          {% if item.img %}
+          <img src="{{ item.img }}" title="{{ item.text }}">
+          {% else %}
+            {{ item.text }}
+          {% endif %}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
+
+<script type="text/javascript">
+function googleTranslateElementInit() {
+  new google.translate.TranslateElement({
+    pageLanguage: '{{ lang }}',
+    autoDisplay: false,
+    layout: google.translate.TranslateElement.InlineLayout.VERTICAL
+  }, 'google_translate_element');
+
+  // Links to cross-origin destinations are unsafe
+  var gll = document.getElementsByClassName('goog-logo-link')[0];
+  if (gll) {
+    gll.setAttribute('rel', 'noopener');
+  }
+
+  function restoreLang() {
+    var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
+    if (!iframe) return;
+
+    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
+    var restore_el = innerDoc.getElementsByTagName("button");
+
+    for (var i = 0; i < restore_el.length; i++) {
+      if (restore_el[i].id.indexOf("restore") >= 0) {
+        restore_el[i].click();
+        var close_el = innerDoc.getElementsByClassName("goog-close-link");
+        close_el[0].click();
+        return;
+      }
+    }
+  }
+
+  function triggerHtmlEvent(element, eventName) {
+    var event;
+    if (document.createEvent) {
+      event = document.createEvent('HTMLEvents');
+      event.initEvent(eventName, true, true);
+      element.dispatchEvent(event);
+    } else {
+      event = document.createEventObject();
+      event.eventType = eventName;
+      element.fireEvent('on' + event.eventType, event);
+    }
+  }
+
+  var googleCombo = document.querySelector("select.goog-te-combo");
+  var langSelect = document.querySelector('.ct-language');
+  langSelect.addEventListener('click', function(event) {
+    if (!event.target) {
+      return;
+    }
+
+    var selected = document.querySelector('.ct-language .ct-language-selected');
+    if (selected) {
+      selected.classList.remove('ct-language-selected');
+    }
+
+    var target = event.target;
+    while (target && target !== langSelect ) {
+      if (target.matches('.lang-select')) {
+        break;
+      }
+      target = target.parentElement;
+    }
+
+    if (target && target.matches('.lang-select')) {
+      var lang = target.getAttribute('data-lang');
+      if (googleCombo.value == lang) {
+        restoreLang();
+      } else {
+        target.parentElement.classList.add('ct-language-selected');
+        googleCombo.value = lang;
+        triggerHtmlEvent(googleCombo, 'change');
+      }
+    }
+
+    event.preventDefault();
+  });
+}
+</script>
+
+<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>
diff --git a/_includes/extensions/hashlocate.html b/_includes/extensions/hashlocate.html
new file mode 100644
index 00000000000..0f3e29e6f8b
--- /dev/null
+++ b/_includes/extensions/hashlocate.html
@@ -0,0 +1,44 @@
+<script>
+  function hashLocate(hashValue) {
+    hashValue = hashValue.replace(/^.*#h-/, '');
+    hashValue = decodeURIComponent(hashValue);
+    var element = document.getElementById(hashValue);
+
+    if (!element) {
+      return;
+    }
+
+    var header = document.querySelector('header.site-header');
+    var headerRect = header.getBoundingClientRect();
+    var headerTop = Math.floor(headerRect.top);
+    var headerHeight = Math.floor(headerRect.height);
+    var scrollPos = getScrollPos();
+    var offsetY = element.offsetTop - (headerTop + headerHeight + 20);
+
+    if (offsetY == scrollPos.y) {
+      return;
+    }
+
+    if (headerTop == 0  && offsetY > scrollPos.y) {
+      offsetY += headerHeight + 2;
+    } else if (headerTop < 0  && offsetY < scrollPos.y) {
+      offsetY -= headerHeight - 2;
+    }
+
+    smoothScrollTo(offsetY);
+  }
+
+  // The first event occurred
+  window.addEventListener('load', function(event) {
+    if (window.location.hash) {
+      hashLocate(window.location.hash);
+    }
+  });
+
+  // The first event occurred
+  window.addEventListener('click', function(event) {
+    if (event.target.tagName.toLowerCase() == 'a') {
+      hashLocate(event.target.getAttribute('href'));
+    }
+  });
+</script>
diff --git a/_includes/extensions/mathjax.html b/_includes/extensions/mathjax.html
new file mode 100644
index 00000000000..7d271e35a4b
--- /dev/null
+++ b/_includes/extensions/mathjax.html
@@ -0,0 +1,10 @@
+<script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+    tex2jax: {
+      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+      inlineMath: [['$','$']]
+    }
+  });
+</script>
+<script
+src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" type="text/javascript" async></script>
diff --git a/_includes/extensions/photo-swipe.html b/_includes/extensions/photo-swipe.html
new file mode 100644
index 00000000000..fb3ee7a94b4
--- /dev/null
+++ b/_includes/extensions/photo-swipe.html
@@ -0,0 +1,81 @@
+<script
+  src="//cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.7/umd/photoswipe-lightbox.umd.min.js" async></script>
+<script
+  src="//cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.7/umd/photoswipe.umd.min.js" async></script>
+<link
+  href="//cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.7/photoswipe.min.css"
+  rel="stylesheet"
+/>
+<style>
+  .pswp .pswp__container .pswp__img {
+    background-color: white;
+  }
+</style>
+
+<script>
+  function initPhotoSwipe() {
+    let customOptions = {};
+
+    try {
+      const data = `{{ site.photo_previewer }}`.replaceAll("=>", ":");
+      customOptions = JSON.parse(data);
+    } catch (e) {
+      console.info("Invalid custom photo previewer options! " + e.message);
+    }
+
+    // Define object and gallery options
+    const options = Object.assign(
+      {
+        gallery: "section.main",
+        children: "a.photo-swipe",
+        photo_scale: 2,
+        // dynamic import is not supported in UMD version
+        pswpModule: PhotoSwipe,
+      },
+      customOptions
+    );
+
+    const galleryEl = document.querySelector(options.gallery);
+    if (!galleryEl) {
+      return;
+    }
+
+    const imgEls = [];
+    const els = galleryEl.querySelectorAll("img:not(.emoji)");
+    els.forEach((el) => {
+      if (el.src.trim() == "") {
+        return;
+      }
+      if (!imgEls.includes(el)) {
+        imgEls.push(el);
+      }
+    });
+
+    if (imgEls.length === 0) {
+      return;
+    }
+
+    imgEls.forEach((imgEl) => {
+      imgEl.outerHTML = `
+      <a class="photo-swipe"
+        href="${imgEl.src}"
+        data-pswp-width="${
+          Math.max(imgEl.naturalWidth, imgEl.width) * options.photo_scale
+        }"
+        data-pswp-height="${
+          Math.max(imgEl.naturalHeight, imgEl.height) * options.photo_scale
+        }"
+        data-pswp-caption="${imgEl.getAttribute("caption") || imgEl.alt}"
+        target="_blank">
+        ${imgEl.outerHTML}
+      </a>`;
+    });
+
+    // Initialize PhotoSwipe 5
+    var lightbox = new PhotoSwipeLightbox(options);
+
+    lightbox.init();
+  }
+
+  window.addEventListener("load", initPhotoSwipe);
+</script>
diff --git a/_includes/extensions/theme-toggle.html b/_includes/extensions/theme-toggle.html
new file mode 100644
index 00000000000..634c932d9f5
--- /dev/null
+++ b/_includes/extensions/theme-toggle.html
@@ -0,0 +1,108 @@
+<div class="theme-toggle">
+  <input type="checkbox" id="theme-switch">
+  <label for="theme-switch">
+    <div class="toggle"></div>
+    <div class="names">
+      <p class="light">Light</p>
+      <p class="dark">Dark</p>
+    </div>
+  </label>
+</div>
+
+{%- assign name = 'night_mode' -%}
+{%- include functions.html func='get_value' default='auto' -%}
+{%- assign night_mode = return -%}
+
+<script>
+  (function() {
+    var sw = document.getElementById('theme-switch');
+    var html = document.getElementsByTagName('html')[0];
+    var nightModeOption = ('{{ night_mode }}' || 'auto').toLowerCase();
+    var storage = nightModeOption === 'manual'
+        ? localStorage
+        : sessionStorage;
+    var themeData = loadThemeData();
+
+    function saveThemeData(data) {
+      storage.setItem('theme', JSON.stringify(data));
+    }
+
+    function loadThemeData() {
+      var data = storage.getItem('theme');
+      try {
+        data = JSON.parse(data ? data : '');
+      } catch(e) {
+        data = { nightShift: undefined, autoToggleAt: 0 };
+        saveThemeData(data);
+      }
+      return data;
+    }
+
+    function handleThemeToggle(nightShift) {
+      themeData.nightShift = nightShift;
+      saveThemeData(themeData);
+      html.dataset.theme = nightShift ? 'dark' : 'light';
+      setTimeout(function() {
+        sw.checked = nightShift ? true : false;
+      }, 50);
+    }
+
+    function autoThemeToggle() {
+      // Next time point of theme toggle
+      var now = new Date();
+      var toggleAt = new Date();
+      var hours = now.getHours();
+      var nightShift = hours >= 19 || hours <=7;
+
+      if (nightShift) {
+        if (hours > 7) {
+          toggleAt.setDate(toggleAt.getDate() + 1);
+        }
+        toggleAt.setHours(7);
+      } else {
+        toggleAt.setHours(19);
+      }
+
+      toggleAt.setMinutes(0);
+      toggleAt.setSeconds(0);
+      toggleAt.setMilliseconds(0)
+
+      var delay = toggleAt.getTime() - now.getTime();
+
+      // auto toggle theme mode
+      setTimeout(function() {
+        handleThemeToggle(!nightShift);
+      }, delay);
+
+      return {
+        nightShift: nightShift,
+        toggleAt: toggleAt.getTime()
+      };
+    }
+
+    // Listen the theme toggle event
+    sw.addEventListener('change', function(event) {
+      handleThemeToggle(event.target.checked);
+    });
+
+    if (nightModeOption == 'auto') {
+      var data = autoThemeToggle();
+
+      // Toggle theme by local setting
+      if (data.toggleAt > themeData.autoToggleAt) {
+        themeData.autoToggleAt = data.toggleAt;
+        handleThemeToggle(data.nightShift);
+      } else {
+        handleThemeToggle(themeData.nightShift);
+      }
+    } else if (nightModeOption == 'manual') {
+      handleThemeToggle(themeData.nightShift);
+    } else {
+      var nightShift = themeData.nightShift;
+      if (nightShift === undefined) {
+        nightShift = nightModeOption === 'on';
+      }
+      handleThemeToggle(nightShift);
+    }
+  })();
+</script>
diff --git a/_includes/extensions/trianglify.html b/_includes/extensions/trianglify.html
new file mode 100644
index 00000000000..99ca3713047
--- /dev/null
+++ b/_includes/extensions/trianglify.html
@@ -0,0 +1,26 @@
+{% if include.selector %}
+  {% assign selector = include.selector %}
+{% endif %}
+
+{% if include.seed %}
+  {% assign seed = include.seed %}
+{% endif %}
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js" async></script>
+<script>
+  function setRandomBgImage(selector, seed, zoom) {
+    var element = document.querySelector(selector);
+    if (!element) return;
+    var pattern = Trianglify({
+      width: screen.width * zoom,
+      height: element.offsetHeight * zoom,
+      seed: seed
+    });
+
+    var image = document.createElement("div");
+    image.style.backgroundImage = "url(" + pattern.png() + ")";
+    element.appendChild(image);
+  }
+
+  setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
+</script>
diff --git a/_includes/functions.html b/_includes/functions.html
new file mode 100644
index 00000000000..5c00bb57752
--- /dev/null
+++ b/_includes/functions.html
@@ -0,0 +1,30 @@
+{%- assign params = include -%}
+{%- if params.func -%}
+  {%- assign func = params.func -%}
+{%- endif -%}
+
+{%- assign include_path = func -%}
+{%- assign path_array = include_path | split: '.' -%}
+{%- if path_array.size == 1 -%}
+  {%- assign include_path = include_path | append: '.html' -%}
+{%- endif -%}
+
+{%- if func == 'log' -%}
+  {%- include functions/log.html level=include.level msg=include.msg -%}
+{%- else -%}
+  {%- assign include_path = 'functions/' | append: include_path -%}
+  {%- include {{ include_path }} params=params-%}
+{%- endif -%}
+
+{%- if return == nil -%}
+  {%- assign return = include.default -%}
+{%- endif -%}
+
+{%- if func != 'log' -%}
+  {%- assign msg = '[function]['
+    | append: {{func}}
+    | append: '] '
+    | append: {{return}}
+    -%}
+  {%- include functions.html func='log' level='info' -%}
+{%- endif -%}
diff --git a/_includes/functions/get_article_excerpt.html b/_includes/functions/get_article_excerpt.html
new file mode 100644
index 00000000000..b34a13fb1c2
--- /dev/null
+++ b/_includes/functions/get_article_excerpt.html
@@ -0,0 +1,39 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% if include.params.excerpt_size %}
+  {% assign excerpt_size = include.params.excerpt_size %}
+{% else %}
+  {% assign excerpt_size = excerpt_size
+    | default: site.excerpt.text_size
+    | default: 350 %}
+{% endif %}
+
+{%- include functions.html func='get_article_words' -%}
+{% assign words = return %}
+
+{% assign _article = article | strip_html %}
+{% assign _words = _article | size %}
+
+{% assign _size = excerpt_size %}
+
+{% if lang != "en" %}
+  {% assign _size = words
+    | times: 1.0
+    | divided_by: _words
+    | times: _size
+    | round %}
+{% endif %}
+
+{% if _size > excerpt_size %}
+  {% assign _size = excerpt_size %}
+{% endif %}
+
+{% assign return = _article | truncate: _size %}
diff --git a/_includes/functions/get_article_words.html b/_includes/functions/get_article_words.html
new file mode 100644
index 00000000000..69db9c6c39f
--- /dev/null
+++ b/_includes/functions/get_article_words.html
@@ -0,0 +1,26 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% assign words = article | number_of_words %}
+
+{% if lang != "en" %}
+  {% assign words = words
+    | times: 0.6
+    | round %}
+  {% assign words = article
+    | strip_html
+    | strip_newlines
+    | size
+    | times: 0.4
+    | plus: words
+    | round %}
+{% endif %}
+
+{% assign return = words %}
diff --git a/_includes/functions/get_banner.html b/_includes/functions/get_banner.html
new file mode 100644
index 00000000000..502d7fc2481
--- /dev/null
+++ b/_includes/functions/get_banner.html
@@ -0,0 +1,68 @@
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- if banner.first -%}
+  {%- include functions.html func='log' level='debug' msg='Get banner_image value' -%}
+  {% assign name = 'banner.image' %}
+  {%- include functions.html func='get_value' -%}
+  {% assign banner_image = return | relative_url %}
+{%- else -%}
+  {% assign banner_image = banner | relative_url %}
+{%- endif -%}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_background value' -%}
+{% assign name = 'banner.background' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_background = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_opacity value' -%}
+{% assign name = 'banner.opacity' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_opacity = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_height value' -%}
+{% assign name = 'banner.height' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_height = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_min_height value' -%}
+{% assign name = 'banner.min_height' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_min_height = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_heading_style value' -%}
+{% assign name = 'banner.heading_style' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_heading_style = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_subheading_style value' -%}
+{% assign name = 'banner.subheading_style' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_subheading_style = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_video value' -%}
+{% assign name = 'banner.video' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_video = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_loop value' -%}
+{% assign name = 'banner.loop' %}
+{%- include functions.html func='get_value' default=true -%}
+{% assign banner_loop = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_volume value' -%}
+{% assign name = 'banner.volume' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_volume = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_start_at value' -%}
+{% assign name = 'banner.start_at' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_start_at = return %}
+
+{% if banner_image or banner_video %}
+  {% assign has_banner = true %}
+{% endif %}
+
diff --git a/_includes/functions/get_categories.html b/_includes/functions/get_categories.html
new file mode 100644
index 00000000000..babb7a0ff8f
--- /dev/null
+++ b/_includes/functions/get_categories.html
@@ -0,0 +1,12 @@
+{% assign split_mark = '<|>' %}
+
+{% assign categories = '' %}
+{% for category in site.categories %}
+  {% assign name = category | first %}
+  {% assign categories = categories | append: split_mark  | append: name %}
+{% endfor %}
+
+{% assign return = categories
+  | remove_first: split_mark
+  | split: split_mark
+  | sort: self %}
diff --git a/_includes/functions/get_datetimes.html b/_includes/functions/get_datetimes.html
new file mode 100644
index 00000000000..f5b4d7efaa4
--- /dev/null
+++ b/_includes/functions/get_datetimes.html
@@ -0,0 +1,18 @@
+{% if include.params.filter %}
+  {% assign filter = include.params.filter %}
+{% endif %}
+
+{% assign split_mark = '<|>' %}
+
+{% assign dates = '' %}
+{% for post in site.posts %}
+  {% assign name = post.date | date: filter %}
+  {% assign dates = dates | append: split_mark  | append: name %}
+{% endfor %}
+
+{% assign return = dates
+  | remove_first: split_mark
+  | split: split_mark
+  | sort: self
+  | uniq %}
+
diff --git a/_includes/functions/get_reading_time.html b/_includes/functions/get_reading_time.html
new file mode 100644
index 00000000000..003578410f7
--- /dev/null
+++ b/_includes/functions/get_reading_time.html
@@ -0,0 +1,49 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% if include.params.speed %}
+  {% assign speed = include.params.speed %}
+{% else %}
+  {% assign speed = 160 %}
+{% endif %}
+
+{%- include functions.html func='get_article_words' -%}
+{% assign words = return %}
+
+{% assign total_mins = words
+  | divided_by: speed
+  | at_least: 1 %}
+
+{% assign hours = total_mins | divided_by: 60 %}
+{% assign mins = total_mins | modulo: 60 %}
+
+{% assign return = "About" %}
+
+{% if hours > 0 %}
+  {% assign unit = "hour" %}
+  {% if hours > 1 %}
+    {% assign unit = unit | append: "s" %}
+  {% endif %}
+  {% assign return = return
+    | append: " "
+    | append: hours
+    | append: " "
+    | append: unit %}
+{% endif %}
+
+{% assign unit = "min" %}
+{% if mins > 1 %}
+  {% assign unit = unit | append: "s" %}
+{% endif %}
+{% assign return = return
+  | append: " "
+  | append: mins
+  | append: " "
+  | append: unit %}
diff --git a/_includes/functions/get_tags.html b/_includes/functions/get_tags.html
new file mode 100644
index 00000000000..8528eeb2edf
--- /dev/null
+++ b/_includes/functions/get_tags.html
@@ -0,0 +1,12 @@
+{% assign split_mark = '<|>' %}
+
+{% assign tags = '' %}
+{% for tag in site.tags %}
+  {% assign name = tag | first %}
+  {% assign tags = tags | append: split_mark  | append: name %}
+{% endfor %}
+
+{% assign return = tags
+  | remove_first: split_mark
+  | split: split_mark
+  | sort: self %}
diff --git a/_includes/functions/get_value.html b/_includes/functions/get_value.html
new file mode 100644
index 00000000000..6d9ac81bdf6
--- /dev/null
+++ b/_includes/functions/get_value.html
@@ -0,0 +1,42 @@
+{%- if include.params.name -%}
+  {%- assign name = include.params.name -%}
+{%- endif -%}
+
+{%- assign return = nil -%}
+
+{%- assign keys = name | split:'.' -%}
+{%- assign name = keys.first -%}
+{%- assign keys = keys | shift -%}
+
+{%- for step in (1..7) -%}
+
+  {%- case step -%}
+    {%- when 1 -%}
+      {%- assign return = page[name] -%}
+    {%- when 2 -%}
+      {%- assign return = site[name] -%}
+    {%- when 3 -%}
+      {%- assign return = site.data[name] -%}
+    {%- when 4 -%}
+      {%- assign return = site.defaults[page.layout][name] -%}
+    {%- when 5 -%}
+      {%- assign return = site.data.defaults[page.layout][name] -%}
+    {%- when 6 -%}
+      {%- assign return = layout[name] -%}
+    {%- else -%}
+      {%- assign return = include.params.default -%}
+  {%- endcase -%}
+
+  {%- for key in keys -%}
+    {%- assign return = return[key] -%}
+    {%- if return == nil -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+
+  {%- if return != nil -%}
+    {%- break -%}
+  {%- endif -%}
+
+{%- endfor -%}
+
diff --git a/_includes/functions/log.html b/_includes/functions/log.html
new file mode 100644
index 00000000000..95d18564784
--- /dev/null
+++ b/_includes/functions/log.html
@@ -0,0 +1,17 @@
+{% if include.params.level %}
+  {% assign level = include.params.level %}
+{% endif %}
+
+{% if include.params.msg %}
+  {% assign msg = include.params.msg %}
+{% endif %}
+
+{% if site.debug == true %}
+  {% if level == 'debug' %}
+    {% if jekyll.environment == "development" %}
+      <!-- {{ msg }} -->
+    {% endif %}
+  {% else %}
+      <!-- {{ msg }} -->
+  {% endif %}
+{% endif %}
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 00000000000..816a80374f7
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,20 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c">
+  {%- seo -%}
+  <link rel="icon" href="{{ site.favicon }}">
+  <link rel="canonical" href="{{ site.url }}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css">
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+  <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
+  {%- feed_meta -%}
+  {%- if jekyll.environment == 'production' and site.google_analytics -%}
+  {%- include extensions/google-analytics.html -%}
+  {%- endif -%}
+  {%- include extensions/code-highlight.html -%}
+  {%- include extensions/photo-swipe.html -%}
+  {%- include custom-head.html -%}
+</head>
diff --git a/_includes/sidebar/archive-list.html b/_includes/sidebar/archive-list.html
new file mode 100644
index 00000000000..b8103fa2196
--- /dev/null
+++ b/_includes/sidebar/archive-list.html
@@ -0,0 +1,10 @@
+{%- include functions.html func='log' level='debug' msg='Get datetimes value' -%}
+
+{% assign filter = '%Y' %}
+{% include functions.html func='get_datetimes' %}
+{% assign datetimes = return %}
+
+{% assign keys = datetimes %}
+{% assign field = 'date' %}
+{% assign url = '/archives.html' | relative_url %}
+{% include sidebar/common-list.html %}
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
new file mode 100644
index 00000000000..3e618ff73d8
--- /dev/null
+++ b/_includes/sidebar/article-menu.html
@@ -0,0 +1,122 @@
+<style type="text/css" media="screen">
+.post-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+</style>
+
+<div class="post-menu">
+  <div class="post-menu-title">TOC</div>
+  <div class="post-menu-content"></div>
+</div>
+
+<script>
+  function generateContent() {
+    var menu = document.querySelector(".post-menu");
+    var menuContent =  menu.querySelector(".post-menu-content");
+    var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6");
+
+    // Hide menu when no headings
+    if (headings.length === 0) {
+      return menu.style.display = "none";
+    }
+
+    // Generate post menu
+    var menuHTML = '';
+    for (var i = 0; i < headings.length; i++) {
+      var h = headings[i];
+      menuHTML += (
+        '<li class="h-' + h.tagName.toLowerCase() + '">'
+        + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>');
+    }
+
+    menuContent.innerHTML = '<ul>' + menuHTML + '</ul>';
+
+    // The header element
+    var header = document.querySelector('header.site-header');
+
+    function doMenuCollapse(index, over_items) {
+      var items = menuContent.firstChild.children;
+
+      if (over_items == undefined) {
+        over_items = 20;
+      }
+
+      if (items.length < over_items) {
+        return;
+      }
+
+      var activeItem = items[index];
+      var beginItem = activeItem
+      var endItem = activeItem
+      var beginIndex = index;
+      var endIndex = index + 1;
+      while (beginIndex >= 0
+        && !items[beginIndex].classList.contains('h-h2')) {
+        beginIndex -= 1;
+      }
+      while (endIndex < items.length
+        && !items[endIndex].classList.contains('h-h2')) {
+        endIndex += 1;
+      }
+      for (var i = 0; i < beginIndex; i++) {
+        item = items[i]
+        if (!item.classList.contains('h-h2')) {
+          item.style.display = 'none';
+        }
+      }
+      for (var i = beginIndex + 1; i < endIndex; i++) {
+        item = items[i]
+        // if (!item.classList.contains('h-h2')) {
+          item.style.display = '';
+        // }
+      }
+      for (var i = endIndex; i < items.length; i++) {
+        item = items[i]
+        if (!item.classList.contains('h-h2')) {
+          item.style.display = 'none';
+        }
+      }
+    }
+
+    // Init menu collapsed
+    doMenuCollapse(-1);
+
+    // Active the menu item
+    window.addEventListener('scroll', function (event) {
+      var lastActive = menuContent.querySelector('.active');
+      var changed = true;
+      var activeIndex = -1;
+      for (var i = headings.length - 1; i >= 0; i--) {
+        var h = headings[i];
+        var headingRect = h.getBoundingClientRect();
+        var headerRect = header.getBoundingClientRect();
+        var headerTop = Math.floor(headerRect.top);
+        var headerHeight = Math.floor(headerRect.height);
+        var headerHeight = headerTop + headerHeight + 20;
+        if (headingRect.top <= headerHeight) {
+          var id = 'h-' + h.getAttribute('id');
+          var a = menuContent.querySelector('a[href="#' + id  + '"]');
+          var curActive = a.parentNode;
+          if (curActive) {
+            curActive.classList.add('active');
+            activeIndex = i;
+          }
+          if (lastActive == curActive) {
+            changed = false;
+          }
+          break;
+        }
+      }
+      if (changed) {
+        if (lastActive) {
+          lastActive.classList.remove('active');
+        }
+        doMenuCollapse(activeIndex);
+      }
+      event.preventDefault();
+    });
+  }
+  generateContent();
+</script>
diff --git a/_includes/sidebar/category-list.html b/_includes/sidebar/category-list.html
new file mode 100644
index 00000000000..6922fbd7860
--- /dev/null
+++ b/_includes/sidebar/category-list.html
@@ -0,0 +1,9 @@
+{%- include functions.html func='log' level='debug' msg='Get categories value' -%}
+
+{%- include functions.html func='get_categories' -%}
+{% assign categories = return %}
+
+{% assign keys = categories %}
+{% assign field = 'categories' %}
+{% assign url = '/categories.html' | relative_url %}
+{% include sidebar/common-list.html %}
diff --git a/_includes/sidebar/common-list.html b/_includes/sidebar/common-list.html
new file mode 100644
index 00000000000..b8f643f6b6a
--- /dev/null
+++ b/_includes/sidebar/common-list.html
@@ -0,0 +1,25 @@
+{%- if include.keys -%}
+  {%- assign keys = include.keys -%}
+{%- endif -%}
+
+{%- if include.field -%}
+  {%- assign field = include.field -%}
+{%- endif -%}
+
+<div class="common-list">
+  <ul>
+    <li>
+      <a href="{{ '/index.html' | relative_url }}">
+        All<span>{{ site.posts.size }}</span>
+      </a>
+    </li>
+
+    {% for key in  keys %}
+      <li>
+        <a href="{{ url }}#h-{{ key }}">
+          {{ key }} <span>{{ site.posts | where: field, key | size }}</span>
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_includes/sidebar/google-translate.html b/_includes/sidebar/google-translate.html
new file mode 100644
index 00000000000..496e6e01560
--- /dev/null
+++ b/_includes/sidebar/google-translate.html
@@ -0,0 +1,3 @@
+<div>
+{%- include extensions/google-translate.html -%}
+</div>
diff --git a/_includes/sidebar/tag-list.html b/_includes/sidebar/tag-list.html
new file mode 100644
index 00000000000..e6c22042dab
--- /dev/null
+++ b/_includes/sidebar/tag-list.html
@@ -0,0 +1,9 @@
+{%- include functions.html func='log' level='debug' msg='Get tags value' -%}
+
+{%- include functions.html func='get_tags' -%}
+{% assign tags = return %}
+
+{% assign keys = tags %}
+{% assign field = 'tags' %}
+{% assign url = '/tags.html' | relative_url %}
+{%- include sidebar/common-list.html -%}
diff --git a/_includes/views/article.html b/_includes/views/article.html
new file mode 100644
index 00000000000..534a95b8e34
--- /dev/null
+++ b/_includes/views/article.html
@@ -0,0 +1,9 @@
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+    <div class="post-content e-content" itemprop="articleBody">
+
+      {{ content }}
+
+    </div>
+
+</article>
diff --git a/_includes/views/banner.html b/_includes/views/banner.html
new file mode 100644
index 00000000000..1db45a59355
--- /dev/null
+++ b/_includes/views/banner.html
@@ -0,0 +1,131 @@
+{%- include functions.html func='log' level='debug' msg='Get banner_html value' -%}
+{% assign name = 'banner_html' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_html = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get heading value' -%}
+{% assign name = 'heading' %}
+{%- include functions.html func='get_value' -%}
+{% assign heading = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get subheading value' -%}
+{% assign name = 'subheading' %}
+{%- include functions.html func='get_value' -%}
+{% assign subheading = return %}
+
+{%- include functions.html func='get_banner' -%}
+
+{%- if has_banner -%}
+  {%- if banner_background -%}
+  <style>
+    html .page-banner {
+      background: {{ banner_background }};
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_height -%}
+  <style>
+    {%- assign num = banner_height | times: 1 -%}
+    {%- assign unit = banner_height | replace_first: num -%}
+    {%- assign banner_min_height = banner_min_height | default: banner_height -%}
+    html .page-banner {
+      height:  {{ banner_height | times: 0.368 | append: unit }};
+      min-height: {{ banner_min_height }};
+    }
+    html[data-scroll-status="top"] .page-banner {
+      height: {{ banner_height }};
+    }
+  </style>
+  {%- endif -%}
+
+  {%- if banner_opacity -%}
+  <style>
+    html .page-banner .page-banner-img > *:first-child {
+      opacity: {{ banner_opacity }};
+    }
+
+    html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
+      opacity: {{ banner_opacity | times: 0.718 }};
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_heading_style -%}
+  <style>
+    html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
+      {{ banner_heading_style }}
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_subheading_style -%}
+  <style>
+    html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
+      {{ banner_subheading_style }}
+    }
+  </style>
+  {%- endif -%}
+  <section class="page-banner">
+    <div class="page-banner-img">
+      {%- if banner_video -%}
+        <video
+          autoplay=""
+          poster="{{ banner_image }}"
+          playsinline
+        >
+          <source src="{{ banner_video }}">
+        </video>
+        <script>
+          (function() {
+            var video = document.querySelector('.page-banner .page-banner-img > video');
+            var videoPlay = function() {
+              video.play().catch (function() {
+                  video.muted = true;
+                  video.play();
+                });
+            }
+
+            video.onloadstart = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = {{ banner_volume }};
+              video.muted = (video.volume == 0);
+              videoPlay();
+            }
+
+            video.onended = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = 0;
+            {%- if banner_loop -%}
+              video.play();
+            {%- endif -%}
+            }
+          })();
+        </script>
+      {%- else -%}
+        <div style="background-image: url({{ banner_image }})"></div>
+        <img class="img-placeholder" src="{{ banner_image }}">
+      {%- endif -%}
+    </div>
+    <div class="wrapper">
+      <div class="page-banner-inner">
+
+        {%- if banner_html -%}
+
+        {%- assign banner_html = 'views/' | append: banner_html -%}
+        {%- include {{ banner_html }} -%}
+
+        {%- else -%}
+
+          <div class="page-banner-default">
+            <h1 class="page-banner-heading">
+              {{ heading | default: page.title | escape }}
+            </h1>
+            <h2 class="page-banner-subheading">
+              {{ subheading | default: page.subtitle | escape }}
+            </h2>
+          </div>
+
+        {%- endif -%}
+      </div>
+    </div>
+  </section>
+{%- endif -%}
+
diff --git a/_includes/views/footer.html b/_includes/views/footer.html
new file mode 100644
index 00000000000..0d9dc2c7965
--- /dev/null
+++ b/_includes/views/footer.html
@@ -0,0 +1,21 @@
+<footer class="site-footer h-card">
+  <data class="u-url" href="{{ "/" | relative_url }}"></data>
+
+  <div class="wrapper">
+    <div class="site-footer-inner">
+        {%- assign currentYear = 'now' | date: "%Y" -%}
+        {%- assign copyright = site.copyright
+            | replace: '{currentYear}', currentYear
+            | replace: '{author}', site.author
+            | replace: '(c)', '&copy;'
+            | replace: '(p)', '℗'
+            | replace: '(cleft)', '<span class="copyleft">&copy;</span>'
+        -%}
+      <div>{{ copyright }}</div>
+      <div>Powered by <a title="Jekyll is a simple, blog-aware, static site
+      generator." href="https://jekyllrb.com/">Jekyll</a> &amp; <a title="Yat, yet
+      another theme." href="https://github.com/jeffreytse/jekyll-theme-yat">Yat Theme</a>.</div>
+      <div class="footer-col rss-subscribe">Subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></div>
+    </div>
+  </div>
+</footer>
diff --git a/_includes/views/header.html b/_includes/views/header.html
new file mode 100644
index 00000000000..e83a4648573
--- /dev/null
+++ b/_includes/views/header.html
@@ -0,0 +1,95 @@
+
+{%- include functions.html func='get_banner' -%}
+
+{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
+{%- assign name = 'header_transparent' -%}
+{%- include functions.html func='get_value' default=true -%}
+{%- assign header_transparent = return -%}
+
+{%- if has_banner and header_transparent -%}
+  {%- assign header_transparent_class = "site-header-transparent" -%}
+{%- endif -%}
+
+<header class="site-header {{ header_transparent_class }}" role="banner">
+
+  <div class="wrapper">
+    <div class="site-header-inner">
+      {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
+      {%- assign page_paths = site.header_pages | default: default_paths -%}
+
+      <span class="site-brand">
+        {%- include views/site-brand.html -%}
+      </span>
+
+      {%- if page_paths -%}
+        <nav class="site-nav">
+          <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+          <label for="nav-trigger">
+            <span class="menu-icon">
+              <svg viewBox="0 0 18 15" width="18px" height="15px">
+                <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
+              </svg>
+            </span>
+          </label>
+
+          <div class="trigger">
+            {%- for path in page_paths -%}
+              {%- assign my_page = site.pages | where: "path", path | first -%}
+              {%- if my_page.title -%}
+              <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | upcase | escape }}</a>
+              {%- endif -%}
+            {%- endfor -%}
+
+            {%- assign name = 'translate_langs' -%}
+            {%- include functions.html func='get_value' -%}
+            {%- assign translate_langs = return -%}
+            {%- if translate_langs.size > 0 -%}
+              {%- assign name = 'lang' -%}
+              {%- include functions.html func='get_value' default='en' -%}
+              {%- assign lang = return -%}
+              <div class="page-link" style="display: inline;">
+                  {%- include extensions/google-translate.html -%}
+              </div>
+            {%- endif -%}
+          </div>
+        </nav>
+      {%- endif -%}
+    </div>
+  </div>
+</header>
+
+<script>
+  function initHeader() {
+    var lastScrollY = getScrollPos().y;
+    var documentElement = document.documentElement;
+
+    function storeScrollData() {
+      var y = getScrollPos().y;
+
+      {%- if banner and header_transparent -%}
+      documentElement.setAttribute("data-header-transparent", "");
+      {%- endif -%}
+
+      var scrollStatus = "";
+
+      if (y <= 0) {
+        scrollStatus = "top";
+      } else if ((window.innerHeight + y) >= document.body.offsetHeight) {
+        scrollStatus = "bottom";
+      } else {
+        var isScrollDown = (y - lastScrollY > 0) ? true : false;
+        scrollStatus = isScrollDown ? "down" : "up";
+      }
+
+      lastScrollY = y;
+      documentElement.setAttribute("data-scroll-status", scrollStatus);
+    }
+
+    window.addEventListener('scroll', function(e) {
+      storeScrollData();
+    });
+
+    storeScrollData();
+  }
+  document.addEventListener('DOMContentLoaded', initHeader);
+</script>
diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
new file mode 100644
index 00000000000..a9de0740e64
--- /dev/null
+++ b/_includes/views/pagination.html
@@ -0,0 +1,41 @@
+{%- if page.paginator -%}
+  {%- assign paginator = page.paginator -%}
+{%- elsif paginator == nil -%}
+  {%- assign paginator = site -%}
+{%- endif -%}
+
+{%- assign name = 'excerpt.image_style' -%}
+{%- include functions.html func='get_value' default='z' -%}
+{%- assign image_style = return | append: '-image-style' -%}
+
+{%- if paginator.posts.size > 0 -%}
+<div class="pagination">
+  <!-- Post list links -->
+  <ul class="post-list {{ image_style }}">
+    <!-- Top list item -->
+    {%- if paginator == site or paginator.page == 1 -%}
+      {%- assign post_item_class = "top-post" -%}
+      {%- assign posts = site.posts
+        | where_exp: "item", "item.top > 0"
+        | sort: "top" -%}
+      {%- for post in posts -%}
+        {%- include views/pagination-item.html -%}
+      {%- endfor -%}
+    {%- endif -%}
+
+    <!-- Normal list item -->
+    {%- assign post_item_class = "" -%}
+    {%- for post in paginator.posts -%}
+      {%- if post.top -%}
+        {%- continue -%}
+      {%- endif -%}
+      {%- include views/pagination-item.html -%}
+    {%- endfor -%}
+  </ul>
+
+  <!-- Pagination links -->
+  {%- if paginator.posts.size < site.posts.size -%}
+    {%- include views/paginator.html -%}
+  {%- endif -%}
+</div>
+{%- endif -%}
diff --git a/_includes/views/paginator.html b/_includes/views/paginator.html
new file mode 100644
index 00000000000..73c56bf5145
--- /dev/null
+++ b/_includes/views/paginator.html
@@ -0,0 +1,25 @@
+{% if include.paginator %}
+  {% assign paginator = include.paginator %}
+{% endif %}
+
+{% if paginator.posts.size > 0 %}
+  <div class="paginator">
+    <span class="previous">
+    {% if paginator.previous_page %}
+      <a href="{{ paginator.previous_page_path | relative_url }}">Prev</a>
+    {% else %}
+      <span>Prev</span>
+    {% endif %}
+    </span>
+
+    <span class="indicator"> {{ paginator.page }}/{{ paginator.total_pages }}</span>
+
+    <span class="next">
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path | relative_url }}">Next</a>
+    {% else %}
+      <span>Next</span>
+    {% endif %}
+    </span>
+  </div>
+{% endif %}
diff --git a/_includes/views/post-header.html b/_includes/views/post-header.html
new file mode 100644
index 00000000000..b6ea964a13c
--- /dev/null
+++ b/_includes/views/post-header.html
@@ -0,0 +1,30 @@
+<header class="post-header">
+  <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
+  <h2 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h2>
+
+  <div class="post-meta">
+    <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+      {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
+      <i class="fa fa-calendar"></i> {{ page.date | date: date_format }}
+    </time>
+
+    {%- if page.author -%}
+    <span class="post-author left-vsplit"><i class="fa fa-pencil"></i> {{ page.author | escape }}</span>
+    {%- endif -%}
+
+    {% assign article = page.content %}
+    {% assign lang = page.lang %}
+    {%- include functions.html func='get_reading_time' -%}
+    {% assign reading_time = return %}
+    <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
+  </div>
+
+  {%- if page.tags.size > 0 -%}
+  <div class="post-tags">
+    {%- for tag in page.tags -%}
+    <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
+    {%- endfor -%}
+  </div>
+  {%- endif -%}
+
+</header>
diff --git a/_includes/views/post-item.html b/_includes/views/post-item.html
new file mode 100644
index 00000000000..0cad1f45d1b
--- /dev/null
+++ b/_includes/views/post-item.html
@@ -0,0 +1,14 @@
+{%- if include.item -%}
+  {%- assign item = include.item -%}
+{%- endif -%}
+
+{%- assign post = item -%}
+
+{% assign date_format = site.yat.date_format | default: "%b %-d, %Y" %}
+<span class="post-meta">{{ post.date | date: date_format }}</span>
+<span>
+  <a class="post-link" href="{{ post.url | relative_url }}">
+    {{ post.title | escape }}
+    {%- include views/post-badges.html -%}
+  </a>
+</span>
diff --git a/_includes/views/segments.html b/_includes/views/segments.html
new file mode 100644
index 00000000000..0cf9414390b
--- /dev/null
+++ b/_includes/views/segments.html
@@ -0,0 +1,27 @@
+{%- if include.keys -%}
+  {%- assign keys = include.keys -%}
+{%- endif -%}
+
+{%- if include.field -%}
+  {%- assign field = include.field -%}
+{%- endif -%}
+
+<div class="page-segments">
+  <ul class="page-segments-list">
+    {% for key in keys %}
+    <h2 id="{{ key }}" class="segment-name">{{ key }}</h2>
+      {% assign items = site.posts | where: field, key %}
+      {% for item in items %}
+        {% if item != nil %}
+          {%- assign post_item_class = "" -%}
+          {%- if item.top -%}
+            {%- assign post_item_class = "top-post" -%}
+          {%- endif -%}
+          <li class="{{ post_item_class }}">
+            {%- include views/post-item.html -%}
+          </li>
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_includes/views/site-brand.html b/_includes/views/site-brand.html
new file mode 100644
index 00000000000..e1ad4a87446
--- /dev/null
+++ b/_includes/views/site-brand.html
@@ -0,0 +1,4 @@
+<a class="site-brand-inner" rel="author" href="{{ "/" | relative_url }}">
+  <img class="site-favicon" title="{{ site.title | escape }}" src="{{ site.favicon }}" onerror="this.style.display='none'">
+  {{ site.title | escape }}
+</a>
diff --git a/_layouts/404.html b/_layouts/404.html
new file mode 100644
index 00000000000..35f56839897
--- /dev/null
+++ b/_layouts/404.html
@@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>Try to check other pages through the menu. </p>
+</div>
diff --git a/_layouts/about.html b/_layouts/about.html
new file mode 100644
index 00000000000..228f5d20106
--- /dev/null
+++ b/_layouts/about.html
@@ -0,0 +1,9 @@
+---
+layout: post
+hidden:
+  - header
+  - navigator
+  - related_posts
+---
+
+{{ content }}
diff --git a/_layouts/archives.html b/_layouts/archives.html
new file mode 100644
index 00000000000..bbe9ebb86f8
--- /dev/null
+++ b/_layouts/archives.html
@@ -0,0 +1,18 @@
+---
+layout: framework
+sidebar: archive-list
+---
+
+{%- if site.posts.size > 0 -%}
+
+  {% include functions.html func='log' level='debug' msg='Get datetimes value' %}
+
+  {% assign filter = '%Y' %}
+  {% include functions.html func='get_datetimes' %}
+  {% assign datetimes = return %}
+
+  {% assign keys = datetimes | reverse %}
+  {% assign field = 'date' %}
+  {% include views/segments.html %}
+
+{%- endif -%}
diff --git a/_layouts/articles.html b/_layouts/articles.html
new file mode 100644
index 00000000000..46ba5c569fa
--- /dev/null
+++ b/_layouts/articles.html
@@ -0,0 +1,14 @@
+---
+layout: framework
+sidebar: category-list
+---
+
+<div class="articles">
+  {% if page.banner == nil %}
+    {% assign banner = page.title %}
+  {% endif %}
+
+  {{ content }}
+
+  {% include views/pagination.html %}
+</div>
diff --git a/_layouts/categories.html b/_layouts/categories.html
new file mode 100644
index 00000000000..7d37d8995f0
--- /dev/null
+++ b/_layouts/categories.html
@@ -0,0 +1,16 @@
+---
+layout: framework
+sidebar: category-list
+---
+
+{%- if site.posts.size > 0 -%}
+
+  {%- include functions.html func='log' level='debug' msg='Get value' -%}
+  {%- include functions.html func='get_categories' -%}
+  {% assign categories = return %}
+
+  {% assign keys = categories %}
+  {% assign field = 'categories' %}
+  {%- include views/segments.html -%}
+
+{%- endif -%}
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 00000000000..f8e8e6b57e8
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body>
+
+    {%- include views/header.html -%}
+
+    {%- include views/banner.html -%}
+
+    {%- include extensions/hashlocate.html -%}
+
+    {%- include extensions/theme-toggle.html -%}
+
+    {%- include extensions/click-to-top.html -%}
+
+    <main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        {{ content }}
+      </div>
+    </main>
+
+    {%- include views/footer.html -%}
+
+  </body>
+</html>
diff --git a/_layouts/framework.html b/_layouts/framework.html
new file mode 100644
index 00000000000..305a26bbc9d
--- /dev/null
+++ b/_layouts/framework.html
@@ -0,0 +1,35 @@
+---
+layout: default
+---
+
+<div class="framework">
+  <section class="main">
+
+     {{ content }}
+
+  </section>
+  <section class="sidebar" style="margin-left: 15px;">
+    <!-- Get sidebar items -->
+    {%- if page.sidebar -%}
+      {%- assign sidebar = page.sidebar -%}
+    {%- elsif site.defaults[page.layout].sidebar -%}
+      {%- assign sidebar = site.defaults[page.layout].sidebar -%}
+    {%- elsif layout.sidebar -%}
+      {%- assign sidebar = layout.sidebar -%}
+    {%- endif -%}
+
+    {%- for item in sidebar -%}
+
+      {%- assign file = item -%}
+      {%- assign array = file | split: '.' -%}
+      {%- if array.size == 1 -%}
+        {%- assign file = file | append: '.html' -%}
+      {%- endif -%}
+
+      {%- assign file = 'sidebar/' | append: file -%}
+
+      {%- include {{ file }} %}
+
+    {%- endfor -%}
+  </section>
+</div>
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 00000000000..4753b165a9c
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,8 @@
+---
+layout: articles
+heading: 'Your awesome heading'
+subheading: 'Your awesome subheading'
+banner: 'default'
+---
+
+{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 00000000000..442cfe61ac3
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,92 @@
+---
+layout: framework
+banner:
+banner_html: post-header.html
+hidden: []
+sidebar:
+  - article-menu
+---
+
+<div class="post">
+  <section>
+
+    {%- assign name = 'banner' -%}
+    {%- include functions.html func='get_value' -%}
+    {%- assign banner = return -%}
+
+    {%- assign name = 'hidden' -%}
+    {%- include functions.html func='get_value' -%}
+    {%- assign hidden = return -%}
+
+    {%- assign result = hidden | where_exp: "item", "item == 'header'" -%}
+    {%- if banner == nil and result.size == 0 -%}
+    {%- include views/post-header.html -%}
+    {%- endif -%}
+
+    {%- include views/article.html -%}
+
+    {%- assign result = hidden | where_exp: "item", "item == 'navigator'" -%}
+    {%- if result.size == 0 -%}
+    <div class="post-nav">
+      {%- if page.previous -%}
+        <a class="previous" href="{{ page.previous.url | relative_url }}" title="{{
+          page.previous.title | escape }}">{{ page.previous.title | escape | truncatewords: 6 }}</a>
+      {%- else -%}
+      <span></span>
+      {%- endif -%}
+
+      {%- if page.next -%}
+        <a class="next" href="{{ page.next.url | relative_url }}" title="{{ page.next.title | escape }}">{{ page.next.title | escape | truncatewords: 6 }}</a>
+      {%- else -%}
+      <span></span>
+      {%- endif -%}
+    </div>
+    {%- endif -%}
+
+    {%- assign result = hidden | where_exp: "item", "item == 'related_posts'" -%}
+    {%- if result.size == 0 -%}
+    <div class="post-related">
+      <div>Related Articles</div>
+      <ul>
+        {% assign posts = site[page.collection] | sample:4 %}
+        {%- for post in posts -%}
+          {%- assign post_item_class = "" -%}
+          {%- if post.top -%}
+            {%- assign post_item_class = "top-post" -%}
+          {%- endif -%}
+        <li class="{{ post_item_class }}">
+          <a class="post-link"
+            href="{{ post.url | relative_url }}"
+            title="{{ post.title | escape }}">
+            {{ post.title | escape | truncatewords: 12 }}
+            {%- include views/post-badges.html -%}
+          </a>
+        </li>
+        {%- endfor -%}
+      </ul>
+    </div>
+    {%- endif -%}
+
+    {%- assign result = hidden | where_exp: "item", "item == 'comments'" -%}
+    {%- if result.size == 0 -%}
+    <div class="post-comments">
+      {%- if page.comments != false -%}
+
+      {%- if site.disqus.shortname -%}
+      {%- include extensions/comments/disqus.html -%}
+      {%- endif -%}
+
+      {%- if site.gitment.username -%}
+      {%- include extensions/comments/gitment.html -%}
+      {%- endif -%}
+
+      {%- if site.utterances.repo -%}
+      {%- include extensions/comments/utterances.html -%}
+      {%- endif -%}
+
+      {%- endif -%}
+    </div>
+    {%- endif -%}
+
+  </section>
+</div>
diff --git a/_layouts/tags.html b/_layouts/tags.html
new file mode 100644
index 00000000000..dfd1fa663ab
--- /dev/null
+++ b/_layouts/tags.html
@@ -0,0 +1,16 @@
+---
+layout: framework
+sidebar: tag-list
+---
+
+{%- if site.posts.size > 0 -%}
+
+  {%- include functions.html func='log' level='debug' msg='Get tags value' -%}
+  {%- include functions.html func='get_tags' -%}
+  {% assign tags = return %}
+
+  {% assign keys = tags %}
+  {% assign field = 'tags' %}
+  {%- include views/segments.html -%}
+
+{%- endif -%}
diff --git a/_posts/.DS_Store b/_posts/.DS_Store
deleted file mode 100644
index 5008ddfcf53..00000000000
Binary files a/_posts/.DS_Store and /dev/null differ
diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss
new file mode 100644
index 00000000000..11c5d60676d
--- /dev/null
+++ b/_sass/misc/article-menu.scss
@@ -0,0 +1,61 @@
+/*
+ * Post menu
+ */
+
+.post-menu {
+  padding-left: 20px;
+  min-width: 200px;
+  max-width: 230px;
+
+  .post-menu-title {
+    font-size: $base-font-size * 1.5;
+    margin-bottom: 14px;
+    font-weight: 600;
+  }
+
+  .post-menu-content {
+    ul {
+      border-left: 1px solid #e9ecef;
+      $indent: divide($base-font-size, 4);
+      $active-bgcolor: #ecebec;
+
+      @for $i from 2 to 7 {
+        .h-h#{$i} {
+          padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
+          font-size: $base-font-size * 1.1;
+          line-height: 1.4;
+        }
+      }
+
+      a {
+        display: flex;
+        padding: 2px 8px;
+        color: darken($text-color, 10%);
+
+        * {
+          pointer-events: none;
+        }
+
+        &:hover {
+          text-decoration: none;
+          color: lighten($text-color, 30%)!important;
+        }
+      }
+
+      .active {
+        background-color: $active-bgcolor;
+        transition: background 0.5s;
+        border-left: 2px solid #202020;
+        margin-left: -2px;
+
+        &:hover {
+          background-color: lighten($active-bgcolor, 2%);
+        }
+
+        a {
+          color: #121416;
+        }
+      }
+    }
+  }
+}
diff --git a/_sass/misc/click-to-top.scss b/_sass/misc/click-to-top.scss
new file mode 100644
index 00000000000..56b67cf62a1
--- /dev/null
+++ b/_sass/misc/click-to-top.scss
@@ -0,0 +1,46 @@
+.click-to-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  right: 60px;
+  bottom: 48px;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
+  font-size: 24px;
+  user-select: none;
+  transition: 0.3s;
+  z-index: 10;
+
+  @include media-query($on-laptop) {
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    right: 35px;
+    font-size: 20px;
+  }
+}
+
+.click-to-top.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+html[data-theme="light"] {
+  .click-to-top {
+    background-color: $click-to-top-light-background-color;
+    color: $click-to-top-light-color;
+  }
+}
+
+html[data-theme="dark"] {
+  .click-to-top {
+    background-color: $click-to-top-dark-background-color;
+    color: $click-to-top-dark-color;
+  }
+}
diff --git a/_sass/misc/common-list.scss b/_sass/misc/common-list.scss
new file mode 100644
index 00000000000..a763b661f89
--- /dev/null
+++ b/_sass/misc/common-list.scss
@@ -0,0 +1,45 @@
+/**
+ * Common list
+ */
+.common-list {
+  @include relative-font-size(1.0);
+  min-width: 200px;
+
+  ul {
+    list-style: none;
+    margin: 0;
+  }
+
+  li {
+    border-bottom: solid 1px #00000018;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    a {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 12px;
+      text-decoration: none;
+      font-weight: normal;
+      color: $text-color;
+      transition: background 0.2s;
+
+      &:hover {
+        background-color: mix($theme-color, #eaeaea, 20%);
+      }
+    }
+
+    span {
+      @include relative-font-size(0.8);
+      display: inline-block;
+      border-radius: 10px;
+      align-self: center;
+      background: #000000bd;
+      padding: 0px 8px;
+      margin-left: 20px;
+      color: $white-color;
+    }
+  }
+}
diff --git a/_sass/misc/gitment.scss b/_sass/misc/gitment.scss
new file mode 100644
index 00000000000..6226e42ef14
--- /dev/null
+++ b/_sass/misc/gitment.scss
@@ -0,0 +1,16 @@
+.gitment-container {
+  color: #787878 !important;
+}
+
+.gitment-editor-header {
+  background-color: #fefefe;
+}
+
+.gitment-comment-main, .gitment-editor-main {
+  background-color: #fff;
+  border-radius: 3px !important;
+}
+
+.gitment-heart-icon {
+  fill: #ff0808;
+}
diff --git a/_sass/misc/google-translate.scss b/_sass/misc/google-translate.scss
new file mode 100644
index 00000000000..04fe567162d
--- /dev/null
+++ b/_sass/misc/google-translate.scss
@@ -0,0 +1,196 @@
+/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS BEGIN */
+
+%goog-te-menu {
+  a.goog-te-menu-value {
+    vertical-align: top !important;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    span {
+      color: #aaa;
+    }
+
+    span:hover {
+      color: white;
+    }
+
+    /* Remove the down arrow */
+    /* when dropdown open */
+    span[style="color: rgb(213, 213, 213);"] {
+      display: none;
+    }
+    /* after clicked/touched */
+    span[style="color: rgb(118, 118, 118);"] {
+      display: none;
+    }
+    /* on page load (not yet touched or clicked) */
+    span[style="color: rgb(155, 155, 155);"] {
+      display: none;
+    }
+
+    /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */
+    span[style="border-left: 1px solid rgb(187, 187, 187);"] {
+      display: none;
+    }
+    /* Remove span with left border line | (next to the arrow) in Edge & IE11 */
+    span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {
+      display: none;
+    }
+  }
+}
+
+div#google_translate_element {
+  display: inline;
+
+  div.goog-te-gadget {
+    display: inline;
+    font-size: 0;
+  }
+
+  div[id=':0.targetLanguage'] {
+    display: inline;
+  }
+
+  div.goog-te-gadget-simple {
+    border: none;
+    background-color: transparent;
+
+    @extend %goog-te-menu;
+  }
+
+  a.goog-logo-link {
+    display: none;
+  }
+
+  .goog-te-gadget-icon {
+    display: none !important;
+    /*background: url("url for the icon") 0 0 no-repeat !important;*/
+  }
+
+  a.goog-te-menu-value {
+    margin: 0;
+
+    span:first-child {
+      display: none;
+    }
+
+    &:before {
+      content: "\f1ab  \f0d7";
+      font-family: FontAwesome;
+      font-size: initial;
+      color: #fefefe;
+      border: 1px solid #fefefe85;
+      border-radius: 3px;
+      padding: 3px 6px;
+    }
+  }
+}
+
+.goog-te-menu-frame .goog-te-menu2 {
+  max-width: 100%;
+  overflow-x: auto;
+  box-sizing: border-box;
+  height: auto;
+}
+
+/* HIDE the google translate toolbar */
+.skiptranslate {
+  display: none !important;
+  border: none;
+  box-shadow: 0 0;
+  -webkit-box-shadow: 0 0;
+}
+
+body {
+  top: 0px !important;
+}
+
+/* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */
+
+
+// Main look
+
+.ct-language-selected {
+  background-color: darken($theme-color, 5%) !important;
+}
+
+.ct-language-dropdown {
+  overflow: hidden;
+  max-height: 0;
+  position: absolute;
+  top: 110%;
+  right: -10px;
+  background-color: lighten($theme-color, 5%);
+  -webkit-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+  width: 100px;
+  text-align: center;
+  margin-top: 0;
+  z-index: 200;
+  border-radius: 3px;
+  visibility: hidden;
+
+  li {
+    padding: 5px;
+
+    &:first-child {
+      padding-top: 12px;
+    }
+
+    &:last-child {
+      padding-bottom: 12px;
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid rgba(0, 0, 0, .04);
+    }
+
+    a {
+      display: block;
+      color: invert($theme-color);
+
+      img {
+        width: 24px;
+        max-height: 24px;
+        border: none;
+      }
+    }
+
+    &:hover {
+      @extend .ct-language-selected;
+    }
+  }
+}
+
+.list-unstyled {
+  display: inline-block;
+  list-style: none;
+  margin-left: 0;
+}
+
+.ct-language {
+  display: inline-block;
+  position: relative;
+  background-color: #fefefe2b;
+  padding: 3px 10px;
+  border-radius: 3px;
+
+  &:hover {
+    cursor: pointer;
+
+    .ct-language-dropdown {
+      margin-top: 8px;
+      max-height: 10000px;
+      visibility: visible;
+      box-shadow: 0 0 9px 3px rgba(0, 0, 0, .06);
+    }
+  }
+
+  &:before {
+    content: "\f1ab  \f0d7";
+    font-family: FontAwesome;
+  }
+}
+
diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss
new file mode 100644
index 00000000000..4b79078a6b0
--- /dev/null
+++ b/_sass/misc/theme-toggle.scss
@@ -0,0 +1,84 @@
+.theme-toggle {
+  position: relative;
+  width: $base-font-size * 7.65;
+  margin-top: 10px;
+  margin-right: 60px;
+  margin-left: auto;
+  transition: .3s cubic-bezier(.4,.03,0,1);
+
+  label, .toggle {
+    border-radius: 100px;
+  }
+
+  label {
+    display: block;
+    background-color: rgba(120,120,120,.15);
+    cursor: pointer;
+  }
+
+  .toggle {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 0 2px 15px rgba(0,0,0,.15);
+    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .names {
+    font-size: 1em;
+    font-weight: bolder;
+    width: 76%;
+    margin-left: 12%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    user-select: none;
+  }
+
+  .names p {
+    margin-bottom: 0;
+    line-height: 24px;
+    opacity: .5;
+  }
+
+  label .light {
+    color: #868686;
+    margin-left: -0.2em;
+  }
+
+  label .dark {
+    color: #b9b9b9;
+  }
+
+  [type="checkbox"] {
+    display: none;
+  }
+
+  /* Toggle */
+  [type="checkbox"]:checked ~ label .toggle {
+    transform: translateX(100%);
+    background-color: #34323D;
+  }
+
+  [type="checkbox"]:checked ~ label .dark {
+    color: #ddd;
+  }
+
+  [type="checkbox"]:checked ~ label .light {
+    color: #ccc;
+  }
+
+  @include media-query(1024px) {
+    margin-right: 35px;
+  }
+
+  @include media-query($on-palm) {
+    width: $base-font-size * 6.65;
+    margin-right: 20px;
+
+    .names {
+      font-size: .85em;
+    }
+  }
+}
diff --git a/_sass/yat.scss b/_sass/yat.scss
new file mode 100644
index 00000000000..22d25af8b8c
--- /dev/null
+++ b/_sass/yat.scss
@@ -0,0 +1,90 @@
+@charset "utf-8";
+
+// Deprecation Warning: Using / for division outside of calc() is deprecated
+// and will be removed in Dart Sass 2.0.0.
+// Recommendation: math.div($header-height, 1.5) or calc($header-height / 1.5)
+// More info and automated migrator: https://sass-lang.com/d/slash-div
+@use 'sass:math';
+@use 'sass:meta';
+
+// Define defaults for each variable.
+
+$base-font-family: Helvetica Neue, Helvetica, Arial, sans-serif, !default;
+$base-font-size: 14px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.6 !default;
+$base-transition-duration: 0.3s !default;
+
+$spacing-unit:     30px !default;
+
+$text-color:       #1d1d1f !default;
+$background-color: #fff !default;
+
+$grey-color:       #777 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark:  darken($grey-color, 25%) !default;
+
+$white-color: #fdfdfd !default;
+
+$table-text-align: left !default;
+
+$header-height: $base-line-height * $base-font-size * 2.85 !default;
+$header-text-color: invert($theme-color) !default;
+$header-background-color: $theme-color !default;
+
+$footer-height: $header-height * 1.05 !default;
+$footer-text-color: lighten(invert($theme-color), 25%) !default;
+$footer-background-color: darken($theme-color, 5%) !default;
+
+$banner-height: 640px !default;
+$banner-text-color: lighten($white-color, 0%) !default;
+$banner-background: rgba(0,0,0,0.8) !default;
+
+// Width of the content area
+// $content-width:    920px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: #{$spacing-unit / 2};
+//     padding-left: #{$spacing-unit / 2};
+//   }
+// }
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}
+
+// Better compatibility for divisions.
+//
+// Deprecation Warning: Using / for division outside of calc() is deprecated
+// and will be removed in Dart Sass 2.0.0."
+@function divide($dividend, $divisor: 1) {
+  @if meta.function-exists('div', 'math') {
+    @return math.div($dividend, $divisor);
+  } @else {
+    @return ($dividend / $divisor);
+  }
+}
+
+// Import partials.
+@import
+  "yat/base",
+  "yat/layout",
+  "yat/dark",
+  "misc/theme-toggle",
+  "misc/article-menu",
+  "misc/common-list",
+  "misc/google-translate",
+  "misc/gitment",
+  "misc/click-to-top"
+;
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
new file mode 100644
index 00000000000..0d2365d8072
--- /dev/null
+++ b/_sass/yat/_base.scss
@@ -0,0 +1,316 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+  font-family: $base-font-family;
+  font-weight: $base-font-weight;
+  font-size: #{$base-font-size};
+  font-display: swap;
+  line-height: #{$base-line-height};
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  transition-duration: $base-transition-duration;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: divide($spacing-unit, 2);
+}
+
+
+
+/**
+ * `main` element
+ */
+main {
+  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+}
+
+
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-font-weight * 1.5;
+}
+
+/**
+ * Links
+ */
+a {
+  color: $brand-color;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  .social-media-list &:hover {
+    text-decoration: none;
+
+    .username {
+      text-decoration: underline;
+    }
+  }
+}
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $grey-color;
+  border-left: 4px solid $grey-color-light;
+  padding-left: divide($spacing-unit, 2);
+  @include relative-font-size(1.125);
+  letter-spacing: -1px;
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+  @include relative-font-size(0.9375);
+  color: $text-color;
+}
+
+*:not(pre) > code {
+  padding: 3px 6px;
+  border-radius: 3px;
+  background-color: #eee;
+  margin: 0 5px;
+}
+
+pre {
+  overflow-x: auto;
+  position: relative;
+  background-color: #f0f0f0;
+
+  > code {
+    display: inline-block;
+    padding: 20px!important;
+    background-color: transparent;
+    border: 0;
+  }
+
+  table, pre {
+    margin-bottom: 0;
+
+    .gutter, .code {
+      padding: 6px;
+      border: none;
+    }
+  }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: $content-width;
+  margin: auto;
+  padding-right: $spacing-unit;
+  padding-left: $spacing-unit;
+  @extend %clearfix;
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+/**
+ * Tables
+ */
+table {
+  display: block;
+  margin-bottom: $spacing-unit;
+  width: 100%;
+  text-align: $table-text-align;
+  color: lighten($text-color, 5%);
+  border-collapse: collapse;
+  overflow: auto;
+
+  tr {
+    &:nth-child(even) {
+      background-color: lighten($grey-color-light, 6%);
+    }
+  }
+
+  th, td {
+    padding: divide($spacing-unit, 3) divide($spacing-unit, 2);
+  }
+
+  th {
+    background-color: lighten($grey-color-light, 3%);
+    border: 1px solid darken($grey-color-light, 4%);
+    border-bottom-color: darken($grey-color-light, 12%);
+  }
+
+  td {
+    border: 1px solid $grey-color-light;
+  }
+}
+
+/**
+ * Flex layout
+ */
+%flex {
+  display: flex;
+}
+
+%flex-1 {
+  flex: 1;
+  min-width: 0; /* <-- fix flexbox width with pre tags  */
+}
+
+/**
+ * Flex sticky
+ */
+@mixin flex-sticky($top) {
+  position: sticky;
+  position: -moz-sticky; /* <-- fix sticky compatibility issue */
+  position: -ms-sticky;
+  position: -o-sticky;
+  position: -webkit-sticky;
+  align-self: flex-start; /* <-- fix the sticky not work issue */
+  transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
+  top: $top;
+}
+
+/**
+ * Vertical center
+ */
+@mixin vertical-center($position) {
+  position: $position;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/**
+ * Horizontal center
+ */
+@mixin horizontal-center($position) {
+  position: $position;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/**
+ * Center background image
+ */
+@mixin center-image {
+  height: 100%;
+  max-width: 1000%;
+  background-size: cover;
+  background-position: center center;
+  overflow: hidden;
+}
+
+/**
+ * Text Selection
+ */
+::selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-moz-selection { /* Code for Firefox */
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-ms-selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-o-selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
+::-webkit-selection {
+  color: $selection-color;
+  background-color: $selection-background-color;
+}
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
new file mode 100644
index 00000000000..a23896d6160
--- /dev/null
+++ b/_sass/yat/_dark.scss
@@ -0,0 +1,209 @@
+$dark-background-color: #0e0e0e !default;
+$dark-text-color: #b0b0b0 !default;
+
+html[data-theme="dark"]  {
+  &[data-scroll-status='top'] {
+    header.site-header-transparent {
+      &.site-header {
+        @include media-query($on-laptop) {
+          .page-link {
+            color: #f8f8f8;
+          }
+        }
+      }
+    }
+
+    footer.site-footer {
+      .site-footer-inner {
+        border-top: solid 1px #2f2f2f !important;
+        transition: 0s;
+      }
+    }
+  }
+
+  body {
+    color: $dark-text-color;
+    background-color: $dark-background-color;
+  }
+
+  *:not(pre) > code {
+    color: $dark-text-color;
+    background-color: #454545;
+  }
+
+  blockquote {
+    border-left: 4px solid #484848;
+  }
+
+  table {
+    color: #9d9d9d;
+
+    th {
+      background-color: #050505;
+    }
+
+    tr:nth-child(even) {
+      background-color: #080808;
+    }
+  }
+
+  .site-header {
+    background-color: #090909;
+
+    .site-brand {
+      .site-brand-inner {
+        &, &:visited {
+          color: #f8f8f8;
+        }
+      }
+    }
+
+    .site-nav .page-link {
+      color: #f8f8f8;
+    }
+
+    .ct-language-dropdown {
+      color: #f8f8f8;
+      background-color: $dark-background-color;
+      box-shadow: 0 0 3px 1px #0000005b;
+    }
+
+    .ct-language-selected, .ct-language-dropdown li:hover {
+      background-color: #222 !important;
+    }
+
+    @include media-query($on-laptop) {
+      .menu-icon > svg {
+          fill: rgba($dark-text-color, 80%);
+      }
+
+      .site-nav input:checked ~ .trigger {
+        background-color: #090909;
+      }
+    }
+  }
+
+  .site-footer {
+    color: #fff;
+    background-color: #000;
+  }
+
+  .left-vsplit:before {
+    background-color: #505050;
+  }
+
+  .page-banner {
+    .page-banner-img {
+      & > *:first-child {
+        opacity: 0.718;
+      }
+    }
+  }
+
+  .pagination {
+    .post-link {
+      color: #bbb;
+    }
+
+    .post-excerpt {
+      color: $grey-color;
+    }
+
+    .post-list {
+      & > li:not(:last-child) {
+        border-bottom: 1px solid #545454;
+      }
+    }
+
+    .post-tags .post-tag:hover {
+      color: #d7d7d7;
+    }
+  }
+
+  .page-segments {
+    li {
+      a {
+        color: #ddd;
+      }
+    }
+  }
+
+  .post {
+    .post-header {
+      border-bottom: 1px solid #555;
+    }
+
+    .post-content {
+      img:not(.emoji):not([raw]) {
+        background-color: #ffffff33;
+      }
+
+      hr {
+        background-color: #555;
+      }
+    }
+
+    .post-related {
+      & > *:first-child {
+        color: #d7d7d7;
+      }
+
+      a:hover {
+        color: #aaa;
+      }
+    }
+  }
+
+  .common-list {
+    li {
+      border-bottom: solid 1px #40404088;
+
+      a {
+        color: #aaa;
+      }
+
+      a:hover {
+        background-color: #272727;
+      }
+
+      span {
+        background-color: #333;
+      }
+    }
+  }
+
+  .post-menu {
+    .post-menu-title {
+      color: #ddd;
+    }
+
+    .post-menu-content {
+      ul {
+        border-left: 1px solid #787878;
+
+        .active {
+          background-color: #2d2d2d;
+          border-left: 2px solid #aaa;
+        }
+
+        a {
+          color: $dark-text-color;
+        }
+
+        a:hover {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+
+  a .post-badges .post-badge {
+    color: $dark-background-color !important;
+  }
+
+  a:visited .post-badges .post-badge.badge-new {
+    display: none;
+    background-color: $dark-background-color;
+  }
+}
+
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
new file mode 100644
index 00000000000..b44bb2d0670
--- /dev/null
+++ b/_sass/yat/_layout.scss
@@ -0,0 +1,828 @@
+/**
+ * Animation for transparent header
+ */
+html {
+  &[data-header-transparent] {
+    header.site-header {
+      position: fixed;
+    }
+  }
+
+  &[data-scroll-status='top'] {
+    header.site-header-transparent {
+      height: 0;
+      margin-top: 12px;
+      background-color: transparent;
+      transition: 0.1s height,background-color,box-shadow;
+
+      &.site-header {
+        .site-brand-inner, .page-link {
+          color: #fff;
+          transition: 0.1s color;
+        }
+
+        @include media-query($on-laptop) {
+          .page-link {
+            color: $header-text-color;
+          }
+
+          .menu-icon {
+            > svg {
+              fill: $white-color;
+            }
+          }
+        }
+      }
+    }
+
+    footer.site-footer {
+      color: unset;
+      background-color: transparent;
+
+      .site-footer-inner {
+        border-top: solid 1px #eee;
+      }
+    }
+  }
+
+  &[data-scroll-status='down'] {
+    header.site-header {
+      top: -$header-height;
+    }
+
+    .framework .sidebar {
+      top: 20px;
+    }
+  }
+}
+
+/**
+ * Site header
+ */
+.site-header {
+  background-color: $header-background-color;
+  height: $header-height;
+  width: 100%;
+  transition: height 0.2s, text-shadow 0.2s, top 0.2s;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .06);
+
+  // Positioning context for the mobile navigation icon
+  @include flex-sticky(0);
+  z-index: 1000;
+
+  & > .wrapper {
+    margin: 0 60px;
+    padding: 0;
+    max-width: 100%;
+    transition: 0.2s margin;
+
+    @include media-query(1024px) {
+      margin: 0 20px;
+      max-width: unset;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .site-header-inner {
+    position: relative;
+  }
+}
+
+.site-brand {
+  line-height: $header-height;
+  margin-right: 50px;
+
+  .site-brand-inner {
+    @include relative-font-size(1.125);
+    font-weight: $base-font-weight;
+    letter-spacing: -1px;
+    transition: 0.1s filter color;
+
+    &, &:visited {
+      color: $header-text-color;
+    }
+
+    .site-favicon {
+      display: inline-block;
+      height: divide($header-height, 1.5);
+      margin-right: 5px;
+    }
+  }
+}
+
+.site-nav {
+  @include relative-font-size(1.125);
+  line-height: $header-height;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  .nav-trigger {
+    display: none;
+  }
+
+  .menu-icon {
+    display: none;
+  }
+
+  .page-link {
+    line-height: $base-line-height;
+    color: $header-text-color;
+    transition: 0.1s ease-in-out;
+
+    // Gaps between nav items, but not on the last one
+    &:not(:last-child) {
+      margin-right: 24px;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @include media-query($on-laptop) {
+    position: absolute;
+    top: 0;
+    text-align: left;
+
+    label[for="nav-trigger"] {
+      display: block;
+      z-index: 2;
+      cursor: pointer;
+    }
+
+    .menu-icon {
+      display: block;
+      float: right;
+      text-align: center;
+
+      > svg {
+        fill: rgba($header-text-color, 80%);
+        transition: 0.1s fill;
+      }
+    }
+
+    input ~ .trigger {
+      clear: both;
+      display: none;
+      border-radius: 3px;
+      box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
+    }
+
+    input:checked ~ .trigger {
+      display: block;
+      background: $header-background-color;
+    }
+
+    .page-link {
+      display: block;
+      padding: 5px 10px;
+      color: rgba($header-text-color, 80%);
+      margin: 0 25px;
+    }
+  }
+}
+
+/**
+ * Site footer
+ */
+.site-footer {
+  @include relative-font-size(1.0);
+  color: $footer-text-color;
+  background-color: $footer-background-color;
+  text-align: left;
+  transition: background-color 0.2s;
+
+  .site-footer-inner {
+    transition: border-top 0.2s;
+    padding: $spacing-unit * 1.8 0;
+  }
+
+  a {
+    $a-color: $brand-color;
+    color: $a-color;
+
+    &:hover {
+      color: lighten($a-color, 10%);
+    }
+  }
+}
+
+.copyleft {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+
+/**
+ * Post header
+ */
+%post-header {
+  .post-header {
+    margin-bottom: $spacing-unit;
+  }
+
+  .post-title {
+    @include relative-font-size(2.625);
+    letter-spacing: -1px;
+    line-height: 1;
+
+    @include media-query($on-laptop) {
+      @include relative-font-size(2.25);
+    }
+  }
+
+  .post-tags {
+    padding-right: 150px;
+
+    .post-tag {
+      display: inline-block;
+      margin: 0 12px 0 0;
+    }
+  }
+}
+
+/**
+ * Page content
+ */
+.page-content {
+  @extend %flex-1; /* <-- Keep footer on the bottom */
+  -ms-flex: none; /* <-- Fix IE footer issue */
+  padding: $spacing-unit * 2 0;
+  padding-top: 72px;
+}
+
+.page-heading {
+  @include relative-font-size(2);
+}
+
+.post-list-heading {
+  @include relative-font-size(1.75);
+}
+
+/**
+ * Pagination page
+ */
+.pagination {
+  .post-list {
+    margin-left: 0;
+    list-style: none;
+
+    > li {
+      margin-bottom: $spacing-unit * 1.5;
+      padding-bottom: 30px;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e3e3e3;
+      }
+    }
+  }
+
+  .post-title {
+    margin-bottom: $spacing-unit * 0.2;
+    transition: 0.2s all;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .post-link {
+    @include relative-font-size(1.65);
+    font-weight: $base-font-weight * 1.5;
+    color: #333;
+  }
+
+  .post-meta {
+    color: $grey-color;
+    font-size: $base-font-size;
+    margin-bottom: $spacing-unit * 0.5;
+  }
+
+  .post-excerpt {
+    display: flex;
+    position: relative;
+    gap: 15px;
+    margin-bottom: 15px;
+
+    .post-image > *:first-child {
+      flex: 0 1 38.2%;
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center center;
+      overflow: hidden;
+      transition: 0.2s all ease-in-out;
+    }
+  }
+
+  .post-list {
+    &.none-image-style .post-item .post-excerpt .post-image {
+      display: none;
+    }
+
+    &.left-image-style .post-item .post-excerpt {
+      flex-direction: row;
+    }
+
+    &.right-image-style .post-item .post-excerpt {
+      flex-direction: row-reverse;
+    }
+
+    &.post-list.top-image-style .post-item .post-excerpt {
+      flex-direction: column;
+    }
+
+    &.z-image-style .post-item:nth-child(even) .post-excerpt {
+      flex-direction: row-reverse;
+    }
+
+    &.z-reverse-image-style .post-item:nth-child(odd) .post-excerpt {
+      flex-direction: row-reverse;
+    }
+
+    .post-item .post-excerpt {
+      @include media-query($on-laptop) {
+        flex-direction: column !important;
+      }
+    }
+  }
+
+  .post-text {
+    color: $grey-color;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    flex: 1;
+  }
+
+  .post-tags .post-tag {
+    display: inline-block;
+    text-decoration: none;
+    border: 1px solid;
+    padding: 2px 4px;
+    border-radius: 2px;
+    transition: color 0.2s;
+    margin-bottom: 8px;
+
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+
+    &:hover {
+      color: #787878;
+    }
+  }
+
+  .paginator {
+    text-align: center;
+
+    & > .previous:before {
+      content: ' ';
+      border: solid #787878;
+      border-width: 0 2px 2px 0;
+      display: inline-block;
+      padding: 4px;
+      margin-right: 8px;
+      transform: rotate(135deg);
+      -webkit-transform: rotate(135deg);
+    }
+
+    & > .next:after {
+      content: ' ';
+      border: solid #787878;
+      border-width: 0 2px 2px 0;
+      display: inline-block;
+      padding: 4px;
+      margin-left: 8px;
+      transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
+    }
+
+    .previous span, .next span {
+      color: #b3b3b3;
+    }
+
+    .indicator {
+      padding: 0 15px;
+    }
+  }
+}
+
+
+/**
+ * Posts
+ */
+.post {
+  @extend %post-header;
+
+  .post-header {
+    margin: 50px auto 60px;
+    padding: 0 0 20px;
+    border-bottom: 1px solid #ebebeb;
+
+    .post-title {
+      margin-bottom: 6px;
+    }
+
+    .post-subtitle {
+      font-weight: 300;
+    }
+
+    .post-meta {
+      color: $grey-color;
+      padding-bottom: 15px;
+    }
+  }
+
+  .post-content {
+    margin-bottom: $spacing-unit;
+    overflow-wrap: normal;
+    word-wrap: normal;
+    word-break: normal;
+
+    h2 {
+      @include relative-font-size(2);
+
+      @include media-query($on-laptop) {
+        @include relative-font-size(1.75);
+      }
+    }
+
+    h3 {
+      @include relative-font-size(1.625);
+
+      @include media-query($on-laptop) {
+        @include relative-font-size(1.375);
+      }
+    }
+
+    h4 {
+      @include relative-font-size(1.25);
+
+      @include media-query($on-laptop) {
+        @include relative-font-size(1.125);
+      }
+    }
+
+    img, svg, iframe {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    img:not(.emoji), svg, iframe {
+      display: block;
+      max-height: 50vh;
+    }
+
+    h2, h3, h4, h5, h6 {
+      margin: 60px 0 19px;
+    }
+
+    p, hr {
+      margin-bottom: 24px;
+    }
+
+    hr {
+      height: 1px;
+      background-color: #ebebeb;
+      border: none;
+    }
+  }
+
+  .post-related {
+    &>*:first-child {
+      @include relative-font-size(1.425);
+      color: #333;
+      margin-bottom: 14px;
+    }
+
+    ul {
+      margin-left: 15px;
+    }
+
+    .post-link {
+      @include relative-font-size(1.075);
+      color: $grey-color;
+
+      &:hover {
+        color: darken($grey-color, 50%);
+      }
+    }
+  }
+}
+
+.post-comments {
+  padding-top: 25px;
+}
+
+/**
+ * Posts misc
+ */
+.post-nav {
+  display: flex;
+  justify-content: space-between;
+  margin: 72px 0 59px;
+  padding: 31px 0 0;
+
+  a {
+    @include relative-font-size(1.125);
+    color: $grey-color;
+    line-height: 15px;
+    max-width: 50%;
+  }
+
+  .previous:before {
+    content: ' ';
+    border: solid #787878;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 4px;
+    margin-right: 8px;
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+  }
+
+  .next:after {
+    content: ' ';
+    border: solid #787878;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 4px;
+    margin-left: 8px;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
+}
+
+
+/**
+ * Archives page
+ */
+.page-archives {
+  .page-archives-list {
+    margin-left: 0;
+    list-style: none;
+  }
+
+  .archives-time {
+    @include relative-font-size(1.5);
+
+    &:not(:first-child) {
+      margin-top: 18px;
+    }
+    margin-bottom: 8px;
+  }
+
+  .post-meta {
+    font-size: $small-font-size;
+    color: $grey-color;
+  }
+}
+
+
+/**
+ * Page banner
+ */
+.page-banner {
+  display: block;
+  position: relative;
+  height: $banner-height;
+  background-color: $banner-background;
+  transition: height 0.2s;
+
+  .page-banner-img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    & > *:first-child {
+      @include center-image;
+      transition: 0.1s all ease-in-out;
+    }
+
+    & > video {
+      width: 100vw;
+      object-fit: cover;
+    }
+
+    & > img.img-placeholder {
+      display: none;
+    }
+  }
+
+  .wrapper {
+    height: 100%;
+  }
+
+  .page-banner-inner {
+    @include vertical-center(relative);
+
+    color: $banner-text-color;
+    padding: 10px 5px;
+    text-shadow: 1px 1px 2px #33333355;
+
+    & > *:first-child {
+      margin: 0;
+
+      > :nth-child(1) {
+        @include relative-font-size(3.9);
+        letter-spacing: -1px;
+        margin-bottom: 0.1em;
+        font-weight: normal;
+        transition: 0.2s all;
+
+        @include media-query($on-palm) {
+          @include relative-font-size(1.975);
+        }
+      }
+
+      > :nth-child(2) {
+        font-weight: lighter;
+        margin-bottom: 0.8em;
+        transition: 0.2s all;
+
+        @include media-query($on-palm) {
+          @include relative-font-size(1.175);
+        }
+      }
+
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .post-subtitle {
+      @include relative-font-size(1.525);
+      color: #ffffffcc;
+      padding-right: 280px;
+
+      @include media-query($on-palm) {
+        padding-right: 0;
+      }
+    }
+
+    .post-meta {
+      color: #ffffffcc;
+      padding-bottom: 1em;
+    }
+
+    .left-vsplit:before {
+      background: #e3e3e388;
+    }
+
+    .post-tags {
+      color: #999;
+      padding-right: 280px;
+
+      @include media-query($on-palm) {
+        padding-right: 0;
+      }
+
+      .post-tag {
+        @include relative-font-size(1.125);
+        display: inline-block;
+        text-decoration: none;
+        margin: 9px 12px 0 0;
+        color: #fff;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  @include media-query($on-palm) {
+    height: divide($banner-height, 1.5);
+  }
+}
+
+
+/**
+ * Layout and sidebar
+ */
+.framework {
+    @extend %flex;
+
+  .main {
+    @extend %flex-1;
+  }
+
+  .sidebar {
+    padding-left: 8px;
+    transition: top 0.2s, display 0.2s;
+
+    @include flex-sticky($header-height + 20px);
+
+    @include media-query($on-laptop) {
+      display: none;
+    }
+
+  }
+}
+
+
+/**
+ * Segments page
+ */
+.page-segments {
+  .page-segments-list {
+    margin-left: 0;
+    list-style: none;
+  }
+
+  .segment-name {
+    font-weight: $base-font-weight * 1.5;
+    margin-bottom: 8px;
+    position: relative;
+
+    @include relative-font-size(1.6);
+
+    &:not(:first-child) {
+      margin-top: 28px;
+    }
+
+    &:hover:before {
+      content: '#';
+      left: -1em;
+      position: absolute;
+    }
+  }
+
+  .post-meta {
+    font-size: $small-font-size;
+    color: $grey-color;
+  }
+
+  li a {
+    &.post-link {
+      margin-left: 5px;
+    }
+
+    color: #303030;
+
+    &:hover {
+      color: #000;
+    }
+  }
+}
+
+.left-vsplit:before {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 10px;
+  margin: 0 10px;
+  background-color: #e3e3e3e3;
+  vertical-align: baseline;
+}
+
+/**
+ * Post badge
+ */
+.post-badges {
+  display: inline-block;
+  position: relative;
+  margin-left: 8px;
+  margin-top: 3px;
+  user-select: none;
+}
+
+.pagination .post-badges {
+  bottom: 0.5em;
+}
+
+.post-related .post-badges {
+  bottom: 0.1em;
+}
+
+.page-segments .post-badges {
+  bottom: 0.1em;
+}
+
+.post-badge {
+  display: none;
+  padding: 0px 3px;
+  background-color: $brand-color;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 2px;
+  transition-duration: $base-transition-duration;
+}
+
+.post-badge.badge-new {
+  display: inline-block;
+}
+
+.top-post .post-badges .post-badge.badge-top {
+  display: inline-block;
+}
+
+a:visited .post-badges .post-badge.badge-new {
+  display: none;
+  color: $background-color;
+  background-color: $background-color;
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
new file mode 100644
index 00000000000..bc45b8a0173
--- /dev/null
+++ b/assets/css/main.scss
@@ -0,0 +1,55 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+// Default theme colors
+$theme-colors: (
+  "coolblack": #090a0b,
+  "spacegrey": #353535,
+  "snowwhite": #ffffff,
+);
+
+// Default brand colors
+$brand-colors: (
+  "orangered": #ff5100,
+  "greatgold": #f2cb05,
+  "greenblue": #389092,
+);
+
+$theme-name: "{{ site.theme_color }}";
+$brand-name: "{{ site.brand_color }}";
+$theme-color: map-get($theme-colors, "snowwhite");
+$brand-color: map-get($brand-colors, "orangered");
+
+@if map-has-key($theme-colors, $theme-name) {
+  $theme-color: map-get($theme-colors, $theme-name);
+} @else if str-index($theme-name, "#") == 1 {
+  $theme-color: {{ site.theme_color | default: '#ffffff' }};
+}
+
+@if map-has-key($brand-colors, $brand-name) {
+  $brand-color: map-get($brand-colors, $brand-name);
+} @else if str-index($brand-name, "#") == 1 {
+  $brand-color: {{ site.brand_color | default: '#ff5100' }};
+}
+
+$content-width: {{ site.content_width | default: '920px' }};
+
+// Click to top theme
+$click-to-top-light-background-color: {{ site.click_to_top.light.background_color | default: "white" }};
+$click-to-top-light-color: {{ site.click_to_top.light.color | default: "#454545" }};
+$click-to-top-dark-background-color: {{ site.click_to_top.dark.background_color | default: "#34323d" }};
+$click-to-top-dark-color: {{ site.click_to_top.dark.color | default: "#bbb" }};
+
+// Selection styles
+$selection-color: unquote("{{ site.selection.color }}");
+$selection-background-color: unquote("{{ site.selection.background_color }}");
+
+@if $selection-color == "" {
+  $selection-color: inherit;
+}
+@if $selection-background-color == "" {
+  $selection-background-color: rgba(invert($brand-color), 0.3);
+}
+
+@import "yat";
diff --git a/assets/images/banners/home.jpeg b/assets/images/banners/home.jpeg
new file mode 100644
index 00000000000..3ead0fbd15c
Binary files /dev/null and b/assets/images/banners/home.jpeg differ
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 00000000000..0e5982aab4c
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,58 @@
+// Fix DOM matches function
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.matchesSelector ||
+    Element.prototype.mozMatchesSelector ||
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.oMatchesSelector ||
+    Element.prototype.webkitMatchesSelector ||
+    function(s) {
+      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i = matches.length;
+      while (--i >= 0 && matches.item(i) !== this) {}
+      return i > -1;
+    };
+}
+
+// Get Scroll position
+function getScrollPos() {
+  var supportPageOffset = window.pageXOffset !== undefined;
+  var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+  var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+  var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+  return { x: x, y: y };
+}
+
+var _scrollTimer = [];
+
+// Smooth scroll
+function smoothScrollTo(y, time) {
+  time = time == undefined ? 500 : time;
+
+  var scrollPos = getScrollPos();
+  var count = 60;
+  var length = (y - scrollPos.y);
+
+  function easeInOut(k) {
+    return .5 * (Math.sin((k - .5) * Math.PI) + 1);
+  }
+
+  for (var i = _scrollTimer.length - 1; i >= 0; i--) {
+    clearTimeout(_scrollTimer[i]);
+  }
+
+  for (var i = 0; i <= count; i++) {
+    (function() {
+      var cur = i;
+      _scrollTimer[cur] = setTimeout(function() {
+        window.scrollTo(
+          scrollPos.x,
+          scrollPos.y + length * easeInOut(cur/count)
+        );
+      }, (time / count) * cur);
+    })();
+  }
+}
+
diff --git a/jekyll-theme-yat b/jekyll-theme-yat
deleted file mode 160000
index 85249954743..00000000000
--- a/jekyll-theme-yat
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 85249954743ea2ba283a65b9b08e18eb27016dcb