diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 15a0e780bf9..ad5aa9986b1 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -10,4 +10,3 @@ liberapay: jeffreytse
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
 custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
-
diff --git a/.github/workflows/build-jekyll.yml b/.github/workflows/build-jekyll.yml
index 9528f5967e2..9066f834182 100644
--- a/.github/workflows/build-jekyll.yml
+++ b/.github/workflows/build-jekyll.yml
@@ -1,33 +1,33 @@
 name: Github Pages
 
 on:
-  push:
-    branches:
-      - master  # Here source code branch is `master`, it could be other branch
+    push:
+        branches:
+            - master # Here source code branch is `master`, it could be other branch
 
 jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
+    build_and_deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
 
-      # Use GitHub Actions' cache to cache dependencies on servers
-      - uses: actions/cache@v1
-        with:
-          path: vendor/bundle
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-gems-
+            # Use GitHub Actions' cache to cache dependencies on servers
+            - uses: actions/cache@v1
+              with:
+                  path: vendor/bundle
+                  key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-gems-
 
-      # Use GitHub Deploy Action to build and deploy to Github
-      - uses: jeffreytse/jekyll-deploy-action@master
-        with:
-          provider: 'github'
-          token: ${{ secrets.GITHUB_TOKEN }} # It's your Personal Access Token(PAT)
-          repository: ''             # Default is current repository
-          branch: 'gh-pages'         # Default is gh-pages for github provider
-          jekyll_src: './'           # Default is root directory
-          jekyll_cfg: '_config.yml'  # Default is _config.yml
-          jekyll_baseurl: '/jekyll-theme-yat'  # Default is empty
-          cname: ''                  # Default is to not use a cname
-          actor: ''                  # Default is the GITHUB_ACTOR
+            # Use GitHub Deploy Action to build and deploy to Github
+            - uses: jeffreytse/jekyll-deploy-action@master
+              with:
+                  provider: "github"
+                  token: ${{ secrets.GITHUB_TOKEN }} # It's your Personal Access Token(PAT)
+                  repository: "" # Default is current repository
+                  branch: "gh-pages" # Default is gh-pages for github provider
+                  jekyll_src: "./" # Default is root directory
+                  jekyll_cfg: "_config.yml" # Default is _config.yml
+                  jekyll_baseurl: "/jekyll-theme-yat" # Default is empty
+                  cname: "" # Default is to not use a cname
+                  actor: "" # Default is the GITHUB_ACTOR
diff --git a/.github/workflows/pre-commit.yaml b/.github/workflows/pre-commit.yaml
new file mode 100644
index 00000000000..6d6fe82c2f0
--- /dev/null
+++ b/.github/workflows/pre-commit.yaml
@@ -0,0 +1,15 @@
+name: pre-commit action
+
+on:
+    pull_request:
+        branches: [main, develop]
+    push:
+        branches: [main, develop]
+
+jobs:
+    pre-commit:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-python@v3
+            - uses: pre-commit/action@v3.0.0
diff --git a/.gitignore b/.gitignore
index 867d3792d5a..9e67f779684 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,11 @@
+# Jekyll
 *.gem
 .bundle
 .sass-cache
 _site
 Gemfile.lock
+
+# Node
+node_modules/
+package-lock.json
+package.json
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 00000000000..62a81969659
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,14 @@
+repos:
+    - repo: https://github.com/pre-commit/pre-commit-hooks
+      rev: v2.3.0
+      hooks:
+          - id: check-yaml
+          - id: end-of-file-fixer
+          - id: trailing-whitespace
+          - id: end-of-file-fixer
+          - id: check-merge-conflict
+
+    - repo: https://github.com/pre-commit/mirrors-prettier
+      rev: v3.1.0
+      hooks:
+          - id: prettier
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..4a56d8c3064
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+assets/css/main.scss
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
new file mode 100644
index 00000000000..8d0a532c8dd
--- /dev/null
+++ b/.prettierrc.yaml
@@ -0,0 +1,5 @@
+# .prettierrc or .prettierrc.yaml
+trailingComma: "es5"
+tabWidth: 4
+semi: false
+singleQuote: false
diff --git a/Gemfile b/Gemfile
index c031e2a52f7..bb94df82938 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,4 +2,3 @@
 
 source "https://rubygems.org"
 gemspec
-
diff --git a/README.md b/README.md
index 5754a1d2ceb..5cc3905760f 100644
--- a/README.md
+++ b/README.md
@@ -80,23 +80,23 @@ I will respect your crucial support and say THANK YOU!
 
 ## Features
 
-- Support beautiful **Night Mode**.
-- Modern responsive web design.
-- Full layouts `home`, `post`, `tags`, `archive` and `about`.
-- Uses font awesome 5 for icons.
-- Beautiful page banner with image and video.
-- Beautiful Syntax Highlight using [highlight.js][highlight-js].
-- Beautiful image gallery previewer using [PhotoSwipe 5][photoswipe-5].
-- RSS support using [Jekyll Feed][jekyll-feed] gem.
-- Optimized for search engines using [Jekyll Seo Tag][jekyll-seo-tag] gem.
-- Sitemap support using [Jekyll Sitemap][jekyll-sitemap] gem.
-- Complex and flexible table support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- MathJAX and LaTeX optional support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- Media (Youtube, Spotify, etc.) support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- Diagram (PlantUML, Mermaid) support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- Google Translation support.
-- New post tag support.
-- Pin post tag support.
+-   Support beautiful **Night Mode**.
+-   Modern responsive web design.
+-   Full layouts `home`, `post`, `tags`, `archive` and `about`.
+-   Uses font awesome 5 for icons.
+-   Beautiful page banner with image and video.
+-   Beautiful Syntax Highlight using [highlight.js][highlight-js].
+-   Beautiful image gallery previewer using [PhotoSwipe 5][photoswipe-5].
+-   RSS support using [Jekyll Feed][jekyll-feed] gem.
+-   Optimized for search engines using [Jekyll Seo Tag][jekyll-seo-tag] gem.
+-   Sitemap support using [Jekyll Sitemap][jekyll-sitemap] gem.
+-   Complex and flexible table support using [Jekyll Spaceship][jekyll-spaceship] gem.
+-   MathJAX and LaTeX optional support using [Jekyll Spaceship][jekyll-spaceship] gem.
+-   Media (Youtube, Spotify, etc.) support using [Jekyll Spaceship][jekyll-spaceship] gem.
+-   Diagram (PlantUML, Mermaid) support using [Jekyll Spaceship][jekyll-spaceship] gem.
+-   Google Translation support.
+-   New post tag support.
+-   Pin post tag support.
 
 Also, visit the [Live Demo][yat-live-demo] site for the theme.
 
@@ -104,9 +104,9 @@ Also, visit the [Live Demo][yat-live-demo] site for the theme.
 
 There are three ways to install:
 
-- As a [gem-based theme](https://jekyllrb.com/docs/themes/#understanding-gem-based-themes).
-- As a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) (GitHub Pages compatible).
-- Forking/directly copying all of the theme files into your project.
+-   As a [gem-based theme](https://jekyllrb.com/docs/themes/#understanding-gem-based-themes).
+-   As a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) (GitHub Pages compatible).
+-   Forking/directly copying all of the theme files into your project.
 
 ### Gem-based Theme Method
 
diff --git a/_config.yml b/_config.yml
index 341b385ca38..48ea920f2e5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -43,9 +43,9 @@ author: Gonzalo G. Fernandez
 copyright: "Unpublished Work (cleft) 2023-{currentYear} {author}"
 
 description: >- # this means to ignore newlines until "baseurl:"
-  Write an awesome description for your new site here. You can edit this
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
+    Write an awesome description for your new site here. You can edit this
+    line in _config.yml. It will appear in your document head meta (for
+    Google search results) and in your feed.xml site description.
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. https://example.com
@@ -54,7 +54,7 @@ favicon: "/assets/images/yat-favicon-color.png" # the favicon for your site
 # Yat date format
 # refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this
 yat:
-  date_format: "%b %d, %Y"
+    date_format: "%b %d, %Y"
 
 # If you want more debug log, you can set true
 # debug: false
@@ -241,11 +241,11 @@ yat:
 # highlighter: none
 markdown: kramdown
 kramdown:
-  input: GFM
+    input: GFM
 
 plugins:
-  - jekyll-feed
-  - jekyll-seo-tag
-  - jekyll-sitemap
-  - jekyll-paginate
-  - jekyll-spaceship
+    - jekyll-feed
+    - jekyll-seo-tag
+    - jekyll-sitemap
+    - jekyll-paginate
+    - jekyll-spaceship
diff --git a/_data/defaults.yml b/_data/defaults.yml
index dcdca57c9df..ca7193e4c05 100644
--- a/_data/defaults.yml
+++ b/_data/defaults.yml
@@ -1,4 +1,4 @@
 home:
-  heading: "Yet Another TurtleBot"
-  subheading: "Two-wheeled mobile robot based on SoC Zynq 7000"
-  banner: "Your image url"
+    heading: "Yet Another TurtleBot"
+    subheading: "Two-wheeled mobile robot based on SoC Zynq 7000"
+    banner: "Your image url"
diff --git a/_includes/custom-head.html b/_includes/custom-head.html
index dfbd09addf9..c05d70d0a19 100644
--- a/_includes/custom-head.html
+++ b/_includes/custom-head.html
@@ -1,6 +1,5 @@
-{% 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
+{% 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 %}
diff --git a/_includes/extensions/click-to-top.html b/_includes/extensions/click-to-top.html
index fadd32501a9..95c443d69c2 100644
--- a/_includes/extensions/click-to-top.html
+++ b/_includes/extensions/click-to-top.html
@@ -1,18 +1,18 @@
 <div id="click-to-top" class="click-to-top">
-  <i class="fa fa-arrow-up"></i>
+    <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);
-    });
-  })();
+    ;(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
index b7c6399f15c..0c8363e4788 100644
--- a/_includes/extensions/code-highlight.html
+++ b/_includes/extensions/code-highlight.html
@@ -1,91 +1,90 @@
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
+<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>
+<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 -%}
+{%- 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')
+    // 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 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 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);
-  }
+        function handle(block) {
+            addLangData(block)
+            addBadge(block)
+            hljs.highlightBlock(block)
+        }
 
-  for (var i = 0; i < els.length; i++) {
-    var el = els[i];
-    handle(el);
-  }
-});
+        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;
-  }
+    /* 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;
-  }
+    /* 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
index b46f070519a..d166057eff4 100644
--- a/_includes/extensions/comments/disqus.html
+++ b/_includes/extensions/comments/disqus.html
@@ -1,17 +1,23 @@
-  <div id="disqus_thread"></div>
-  <script>
+<div id="disqus_thread"></div>
+<script>
     var disqus_config = function () {
-      this.page.url = '{{ page.url | absolute_url }}';
-      this.page.identifier = '{{ page.url | absolute_url }}';
-    };
+        this.page.url = "{{ page.url | absolute_url }}"
+        this.page.identifier = "{{ page.url | absolute_url }}"
+    }
 
-    (function() {
-      var d = document, s = d.createElement('script');
+    ;(function () {
+        var d = document,
+            s = d.createElement("script")
 
-      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+        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>
+        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
index b3a8beb92c2..3c06954190a 100644
--- a/_includes/extensions/comments/gitment.html
+++ b/_includes/extensions/comments/gitment.html
@@ -1,15 +1,21 @@
-  <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>
+<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>
+        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
index 8fe8bebfd4d..612acaf54f2 100644
--- a/_includes/extensions/comments/utterances.html
+++ b/_includes/extensions/comments/utterances.html
@@ -1,51 +1,62 @@
 {%- 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');
+    const utterancesThemeFromDataTheme = () => {
+        const dataTheme = document.documentElement.getAttribute("data-theme")
+        return `github-${dataTheme}`
     }
-  }
 
-  // dynamic change
-  const observer = new MutationObserver((mutationsList, observer) => {
-    for (let mutation of mutationsList) {
-      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
-        setUtterancesTheme();
-      }
+    const setUtterancesTheme = () => {
+        const iframe = document.querySelector(".utterances-frame")
+        if (iframe) {
+            const message = {
+                type: "set-theme",
+                theme: utterancesThemeFromDataTheme(),
+            }
+            iframe.contentWindow.postMessage(message, "https://utteranc.es")
+        }
     }
-  });
-  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());
+    // 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);
+    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>
+<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
index 3931533e8d1..02073698adb 100644
--- a/_includes/extensions/geopattern.html
+++ b/_includes/extensions/geopattern.html
@@ -1,21 +1,15 @@
-{% if include.selector %}
-  {% assign selector = include.selector %}
-{% endif %}
-
-{% if include.seed %}
-  {% assign seed = include.seed %}
-{% endif %}
+{% 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();
+    function setRandomBgImage(selector, seed) {
+        var pattern = GeoPattern.generate(seed)
+        var element = document.querySelector(selector)
+        if (element) {
+            element.style.backgroundImage = pattern.toDataUrl()
+        }
     }
-  }
 
-  setRandomBgImage('{{ selector }}', '{{ seed }}');
+    setRandomBgImage("{{ selector }}", "{{ seed }}")
 </script>
-
diff --git a/_includes/extensions/google-analytics.html b/_includes/extensions/google-analytics.html
index 9ae896390e3..0f2277962d4 100644
--- a/_includes/extensions/google-analytics.html
+++ b/_includes/extensions/google-analytics.html
@@ -1,27 +1,31 @@
 <!-- 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";
+    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 }}';
+        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);
+            ;(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.dataLayer = window.dataLayer || []
+            function gtag() {
+                dataLayer.push(arguments)
+            }
+            gtag("js", new Date())
+            gtag("config", measurementId)
+        }
     }
-  }
-  window.addEventListener("load", initGoogleAnalytics);
+    window.addEventListener("load", initGoogleAnalytics)
 </script>
-
diff --git a/_includes/extensions/google-translate.html b/_includes/extensions/google-translate.html
index 830575a1eef..130fdc004f5 100644
--- a/_includes/extensions/google-translate.html
+++ b/_includes/extensions/google-translate.html
@@ -1,108 +1,114 @@
-{% if include.translate_langs %}
-  {% assign translate_langs = include.translate_langs %}
-{% endif %}
+{% if include.translate_langs %} {% assign translate_langs =
+include.translate_langs %} {% endif %} {% if include.lang %} {% assign lang =
+include.lang %} {% endif %}
 
-{% if include.lang %}
-  {% assign lang = include.lang %}
-{% endif %}
-
-<div id="google_translate_element" style="display: none;">
-</div>
+<div id="google_translate_element" style="display: none"></div>
 
 <span 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>
+    <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>
 </span>
 
 <script type="text/javascript">
-function googleTranslateElementInit() {
-  new google.translate.TranslateElement({
-    pageLanguage: '{{ lang }}',
-    autoDisplay: false,
-    layout: google.translate.TranslateElement.InlineLayout.VERTICAL
-  }, 'google_translate_element');
+    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');
-  }
+        // 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;
+        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");
+            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;
-      }
-    }
-  }
+            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);
-    }
-  }
+        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 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 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;
-    }
+            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');
-      }
-    }
+            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();
-  });
-}
+            event.preventDefault()
+        })
+    }
 </script>
 
-<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></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
index 0f3e29e6f8b..6f772d22b01 100644
--- a/_includes/extensions/hashlocate.html
+++ b/_includes/extensions/hashlocate.html
@@ -1,44 +1,44 @@
 <script>
-  function hashLocate(hashValue) {
-    hashValue = hashValue.replace(/^.*#h-/, '');
-    hashValue = decodeURIComponent(hashValue);
-    var element = document.getElementById(hashValue);
+    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 (!element) {
+            return
+        }
 
-    if (offsetY == scrollPos.y) {
-      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 (headerTop == 0  && offsetY > scrollPos.y) {
-      offsetY += headerHeight + 2;
-    } else if (headerTop < 0  && offsetY < scrollPos.y) {
-      offsetY -= headerHeight - 2;
-    }
+        if (offsetY == scrollPos.y) {
+            return
+        }
 
-    smoothScrollTo(offsetY);
-  }
+        if (headerTop == 0 && offsetY > scrollPos.y) {
+            offsetY += headerHeight + 2
+        } else if (headerTop < 0 && offsetY < scrollPos.y) {
+            offsetY -= headerHeight - 2
+        }
 
-  // The first event occurred
-  window.addEventListener('load', function(event) {
-    if (window.location.hash) {
-      hashLocate(window.location.hash);
+        smoothScrollTo(offsetY)
     }
-  });
 
-  // The first event occurred
-  window.addEventListener('click', function(event) {
-    if (event.target.tagName.toLowerCase() == 'a') {
-      hashLocate(event.target.getAttribute('href'));
-    }
-  });
+    // 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
index 7d271e35a4b..f757c23134f 100644
--- a/_includes/extensions/mathjax.html
+++ b/_includes/extensions/mathjax.html
@@ -1,10 +1,13 @@
 <script type="text/x-mathjax-config">
-  MathJax.Hub.Config({
-    tex2jax: {
-      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
-      inlineMath: [['$','$']]
-    }
-  });
+    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>
+    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
index fb3ee7a94b4..a4f8ac232ce 100644
--- a/_includes/extensions/photo-swipe.html
+++ b/_includes/extensions/photo-swipe.html
@@ -1,81 +1,85 @@
 <script
-  src="//cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.7/umd/photoswipe-lightbox.umd.min.js" async></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>
+    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"
+    href="//cdnjs.cloudflare.com/ajax/libs/photoswipe/5.3.7/photoswipe.min.css"
+    rel="stylesheet"
 />
 <style>
-  .pswp .pswp__container .pswp__img {
-    background-color: white;
-  }
+    .pswp .pswp__container .pswp__img {
+        background-color: white;
+    }
 </style>
 
 <script>
-  function initPhotoSwipe() {
-    let customOptions = {};
+    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);
-    }
+        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
-    );
+        // 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 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);
-      }
-    });
+        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;
-    }
+        if (imgEls.length === 0) {
+            return
+        }
 
-    imgEls.forEach((imgEl) => {
-      imgEl.outerHTML = `
+        imgEls.forEach((imgEl) => {
+            imgEl.outerHTML = `
       <a class="photo-swipe"
         href="${imgEl.src}"
         data-pswp-width="${
-          Math.max(imgEl.naturalWidth, imgEl.width) * options.photo_scale
+            Math.max(imgEl.naturalWidth, imgEl.width) * options.photo_scale
         }"
         data-pswp-height="${
-          Math.max(imgEl.naturalHeight, imgEl.height) * options.photo_scale
+            Math.max(imgEl.naturalHeight, imgEl.height) * options.photo_scale
         }"
         data-pswp-caption="${imgEl.getAttribute("caption") || imgEl.alt}"
         target="_blank">
         ${imgEl.outerHTML}
-      </a>`;
-    });
+      </a>`
+        })
 
-    // Initialize PhotoSwipe 5
-    var lightbox = new PhotoSwipeLightbox(options);
+        // Initialize PhotoSwipe 5
+        var lightbox = new PhotoSwipeLightbox(options)
 
-    lightbox.init();
-  }
+        lightbox.init()
+    }
 
-  window.addEventListener("load", initPhotoSwipe);
+    window.addEventListener("load", initPhotoSwipe)
 </script>
diff --git a/_includes/extensions/theme-toggle.html b/_includes/extensions/theme-toggle.html
index 634c932d9f5..fc808c515c5 100644
--- a/_includes/extensions/theme-toggle.html
+++ b/_includes/extensions/theme-toggle.html
@@ -1,108 +1,106 @@
 <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>
+    <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 -%}
+{%- 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 () {
+        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 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 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 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;
+        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);
-      }
+            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)
+            toggleAt.setMinutes(0)
+            toggleAt.setSeconds(0)
+            toggleAt.setMilliseconds(0)
 
-      var delay = toggleAt.getTime() - now.getTime();
+            var delay = toggleAt.getTime() - now.getTime()
 
-      // auto toggle theme mode
-      setTimeout(function() {
-        handleThemeToggle(!nightShift);
-      }, delay);
+            // auto toggle theme mode
+            setTimeout(function () {
+                handleThemeToggle(!nightShift)
+            }, delay)
 
-      return {
-        nightShift: nightShift,
-        toggleAt: toggleAt.getTime()
-      };
-    }
+            return {
+                nightShift: nightShift,
+                toggleAt: toggleAt.getTime(),
+            }
+        }
 
-    // Listen the theme toggle event
-    sw.addEventListener('change', function(event) {
-      handleThemeToggle(event.target.checked);
-    });
+        // Listen the theme toggle event
+        sw.addEventListener("change", function (event) {
+            handleThemeToggle(event.target.checked)
+        })
 
-    if (nightModeOption == 'auto') {
-      var data = autoThemeToggle();
+        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);
-    }
-  })();
+            // 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
index 99ca3713047..f1fb8123a43 100644
--- a/_includes/extensions/trianglify.html
+++ b/_includes/extensions/trianglify.html
@@ -1,26 +1,24 @@
-{% if include.selector %}
-  {% assign selector = include.selector %}
-{% endif %}
+{% if include.selector %} {% assign selector = include.selector %} {% endif %}
+{% if include.seed %} {% assign seed = include.seed %} {% 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
+    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
-    });
+    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);
-  }
+      var image = document.createElement("div");
+      image.style.backgroundImage = "url(" + pattern.png() + ")";
+      element.appendChild(image);
+    }
 
-  setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
+    setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
 </script>
diff --git a/_includes/functions.html b/_includes/functions.html
index 5c00bb57752..d0501f07f8a 100644
--- a/_includes/functions.html
+++ b/_includes/functions.html
@@ -1,30 +1,11 @@
-{%- 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 -%}
+{%- 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
index b34a13fb1c2..e7b4c5f6bd1 100644
--- a/_includes/functions/get_article_excerpt.html
+++ b/_includes/functions/get_article_excerpt.html
@@ -1,39 +1,12 @@
-{% 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 %}
+{% 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
index 69db9c6c39f..4df0d20d4ed 100644
--- a/_includes/functions/get_article_words.html
+++ b/_includes/functions/get_article_words.html
@@ -1,26 +1,7 @@
-{% 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 %}
+{% 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
index 502d7fc2481..ed2cdafcbff 100644
--- a/_includes/functions/get_banner.html
+++ b/_includes/functions/get_banner.html
@@ -1,68 +1,37 @@
 {%- 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 %}
-
+{% 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
index babb7a0ff8f..6e801e8e308 100644
--- a/_includes/functions/get_categories.html
+++ b/_includes/functions/get_categories.html
@@ -1,12 +1,4 @@
-{% 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 %}
+{% 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
index f5b4d7efaa4..e3a57acb9a0 100644
--- a/_includes/functions/get_datetimes.html
+++ b/_includes/functions/get_datetimes.html
@@ -1,18 +1,5 @@
-{% 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 %}
-
+{% 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
index 003578410f7..4c88fcfd3d3 100644
--- a/_includes/functions/get_reading_time.html
+++ b/_includes/functions/get_reading_time.html
@@ -1,49 +1,14 @@
-{% 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 %}
+{% 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
index 8528eeb2edf..d97e9012b0e 100644
--- a/_includes/functions/get_tags.html
+++ b/_includes/functions/get_tags.html
@@ -1,12 +1,4 @@
-{% 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 %}
+{% 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
index 6d9ac81bdf6..4f032fb06b3 100644
--- a/_includes/functions/get_value.html
+++ b/_includes/functions/get_value.html
@@ -1,42 +1,12 @@
-{%- 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 -%}
-
+{%- 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
index 95d18564784..de8a59486f9 100644
--- a/_includes/functions/log.html
+++ b/_includes/functions/log.html
@@ -1,17 +1,8 @@
-{% 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 %}
+{% 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
index 816a80374f7..251bc84d339 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,20 +1,26 @@
 <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 -%}
+    <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
index b8103fa2196..475c75a758f 100644
--- a/_includes/sidebar/archive-list.html
+++ b/_includes/sidebar/archive-list.html
@@ -1,10 +1,5 @@
-{%- 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 %}
+{%- 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
index 3e618ff73d8..813cb226d53 100644
--- a/_includes/sidebar/article-menu.html
+++ b/_includes/sidebar/article-menu.html
@@ -1,122 +1,134 @@
 <style type="text/css" media="screen">
-.post-menu ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
+    .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 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");
+    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";
-    }
+        // 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>');
-    }
+        // 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>';
+        menuContent.innerHTML = "<ul>" + menuHTML + "</ul>"
 
-    // The header element
-    var header = document.querySelector('header.site-header');
+        // The header element
+        var header = document.querySelector("header.site-header")
 
-    function doMenuCollapse(index, over_items) {
-      var items = menuContent.firstChild.children;
+        function doMenuCollapse(index, over_items) {
+            var items = menuContent.firstChild.children
 
-      if (over_items == undefined) {
-        over_items = 20;
-      }
+            if (over_items == undefined) {
+                over_items = 20
+            }
 
-      if (items.length < over_items) {
-        return;
-      }
+            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';
+            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"
+                }
+            }
         }
-      }
-      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);
+        // 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();
+        // 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
index 6922fbd7860..bc028e7ef8e 100644
--- a/_includes/sidebar/category-list.html
+++ b/_includes/sidebar/category-list.html
@@ -1,9 +1,5 @@
-{%- 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 %}
+{%- 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
index b8f643f6b6a..641f3a4623d 100644
--- a/_includes/sidebar/common-list.html
+++ b/_includes/sidebar/common-list.html
@@ -1,25 +1,21 @@
-{%- if include.keys -%}
-  {%- assign keys = include.keys -%}
-{%- endif -%}
-
-{%- if include.field -%}
-  {%- assign field = include.field -%}
-{%- endif -%}
+{%- 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>
+    <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>
+        {% 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
index 496e6e01560..92a90776cee 100644
--- a/_includes/sidebar/google-translate.html
+++ b/_includes/sidebar/google-translate.html
@@ -1,3 +1 @@
-<div>
-{%- include extensions/google-translate.html -%}
-</div>
+<div>{%- include extensions/google-translate.html -%}</div>
diff --git a/_includes/sidebar/tag-list.html b/_includes/sidebar/tag-list.html
index e6c22042dab..dbb216d8c68 100644
--- a/_includes/sidebar/tag-list.html
+++ b/_includes/sidebar/tag-list.html
@@ -1,9 +1,4 @@
-{%- 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 -%}
+{%- 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
index 534a95b8e34..24b35c06b93 100644
--- a/_includes/views/article.html
+++ b/_includes/views/article.html
@@ -1,9 +1,9 @@
-<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
-
+<article
+    class="post h-entry"
+    itemscope
+    itemtype="http://schema.org/BlogPosting"
+>
     <div class="post-content e-content" itemprop="articleBody">
-
-      {{ content }}
-
+        {{ content }}
     </div>
-
 </article>
diff --git a/_includes/views/banner.html b/_includes/views/banner.html
index 1db45a59355..fca1a15c45f 100644
--- a/_includes/views/banner.html
+++ b/_includes/views/banner.html
@@ -1,30 +1,20 @@
-{%- 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>
+{%- 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>
+</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 -%}
@@ -35,11 +25,9 @@
     html[data-scroll-status="top"] .page-banner {
       height: {{ banner_height }};
     }
-  </style>
-  {%- endif -%}
-
-  {%- if banner_opacity -%}
-  <style>
+</style>
+{%- endif -%} {%- if banner_opacity -%}
+<style>
     html .page-banner .page-banner-img > *:first-child {
       opacity: {{ banner_opacity }};
     }
@@ -47,85 +35,73 @@
     html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
       opacity: {{ banner_opacity | times: 0.718 }};
     }
-  </style>
-  {%- endif -%}
-  {%- if banner_heading_style -%}
-  <style>
+</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>
+</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">
+</style>
+{%- endif -%}
+<section class="page-banner">
     <div class="page-banner-img">
-      {%- if banner_video -%}
-        <video
-          autoplay=""
-          poster="{{ banner_image }}"
-          playsinline
-        >
-          <source src="{{ banner_video }}">
+        {%- 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();
-                });
-            }
+            (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.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 -%}
-            }
-          })();
+              video.onended = function() {
+                video.currentTime = {{ banner_start_at }};
+                video.volume = 0;
+              {%- if banner_loop -%}
+                video.play();
+              {%- endif -%}
+              }
+            })();
         </script>
-      {%- else -%}
+        {%- else -%}
         <div style="background-image: url({{ banner_image }})"></div>
-        <img class="img-placeholder" src="{{ banner_image }}">
-      {%- endif -%}
+        <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-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>
+            <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>
+            {%- endif -%}
+        </div>
     </div>
-  </section>
+</section>
 {%- endif -%}
-
diff --git a/_includes/views/footer.html b/_includes/views/footer.html
index 0d9dc2c7965..b5f0aaac5fe 100644
--- a/_includes/views/footer.html
+++ b/_includes/views/footer.html
@@ -1,21 +1,32 @@
 <footer class="site-footer h-card">
-  <data class="u-url" href="{{ "/" | relative_url }}"></data>
+    <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 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>
-  </div>
 </footer>
diff --git a/_includes/views/header.html b/_includes/views/header.html
index c43d7ec1b47..9211398b327 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -1,95 +1,90 @@
-
-{%- 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 -%}
+{%- 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>
+    <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>
-          </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 -%}
-              <span class="page-link">
-                  {%- include extensions/google-translate.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 -%}
+                    <span class="page-link">
+                        {%- include extensions/google-translate.html -%}
+                    </span>
+                    {%- endif -%}
+                </div>
+            </nav>
             {%- endif -%}
-          </div>
-        </nav>
-      {%- endif -%}
+        </div>
     </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";
+    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);
       }
 
-      lastScrollY = y;
-      documentElement.setAttribute("data-scroll-status", scrollStatus);
-    }
+      window.addEventListener('scroll', function(e) {
+        storeScrollData();
+      });
 
-    window.addEventListener('scroll', function(e) {
       storeScrollData();
-    });
-
-    storeScrollData();
-  }
-  document.addEventListener('DOMContentLoaded', initHeader);
+    }
+    document.addEventListener('DOMContentLoaded', initHeader);
 </script>
diff --git a/_includes/views/pagination-item.html b/_includes/views/pagination-item.html
index 2fe691e9ccf..e5ee7b61ae3 100644
--- a/_includes/views/pagination-item.html
+++ b/_includes/views/pagination-item.html
@@ -1,59 +1,60 @@
-{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
-
-{%- assign article = post.content -%}
-{%- assign lang = post.lang -%}
-{%- include functions.html func='get_reading_time' -%}
-{%- assign reading_time = return -%}
-
-{%- include functions.html func='get_article_excerpt' -%}
-{%- assign article_excerpt = return -%}
-{%- assign post_url = post.url | relative_url -%}
-
-{%- assign name = 'excerpt.image_width' -%}
-{%- include functions.html func='get_value' -%}
-{%- assign image_width = return | default: '38.2%' -%}
-
-{%- assign name = 'excerpt.image_height' -%}
-{%- include functions.html func='get_value' -%}
-{%- assign image_height = return | default: '160px' -%}
-
-{%- assign name = 'excerpt.default_image' -%}
-{%- include functions.html func='get_value' -%}
-{%- assign default_image = return -%}
-
-{%- assign post_image = post.excerpt_image
-  | default: post.banner.image
-  | default: post.banner
-  | default: default_image
-  | default: '/assets/images/default-image.jpeg' -%}
+{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%} {%-
+assign article = post.content -%} {%- assign lang = post.lang -%} {%- include
+functions.html func='get_reading_time' -%} {%- assign reading_time = return -%}
+{%- include functions.html func='get_article_excerpt' -%} {%- assign
+article_excerpt = return -%} {%- assign post_url = post.url | relative_url -%}
+{%- assign name = 'excerpt.image_width' -%} {%- include functions.html
+func='get_value' -%} {%- assign image_width = return | default: '38.2%' -%} {%-
+assign name = 'excerpt.image_height' -%} {%- include functions.html
+func='get_value' -%} {%- assign image_height = return | default: '160px' -%} {%-
+assign name = 'excerpt.default_image' -%} {%- include functions.html
+func='get_value' -%} {%- assign default_image = return -%} {%- assign post_image
+= post.excerpt_image | default: post.banner.image | default: post.banner |
+default: default_image | default: '/assets/images/default-image.jpeg' -%}
 
 <li class="post-item {{ post_item_class }}">
-  <h2 class="post-title">
-    <a class="post-link" href="{{ post_url }}">
-      {{ post.title | escape }}
-      {%- include views/post-badges.html -%}
-    </a>
-  </h2>
-  <div class="post-meta">
-    <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
-    {%- if post.author -%}
-    <span class="post-author left-vsplit"><i class="fa fa-pencil"></i> {{ post.author | escape }}</span>
-    {%- endif -%}
-    <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
-  </div>
-  <div class="post-excerpt">
-    {%- if post_image and post_image != 'NO_EXCERPT_IMAGE' -%}
-    <a  class="post-image" href="{{ post_url }}" style="flex: 0 1 {{ image_width }}">
-      <div style="background-image: url({{ post_image | relative_url }}); height: {{ image_height }}"></div>
-    </a>
-    {%- endif -%}
-    <a class="post-text" href="{{ post_url }}">
-      <p>{{ article_excerpt }} <span class="read_more">Read More</span></p>
-    </a>
-  </div>
-  <div class="post-tags">
-    {%- for tag in post.tags -%}
-    <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
-    {%- endfor -%}
-  </div>
+    <h2 class="post-title">
+        <a class="post-link" href="{{ post_url }}">
+            {{ post.title | escape }} {%- include views/post-badges.html -%}
+        </a>
+    </h2>
+    <div class="post-meta">
+        <span class="post-date"
+            ><i class="fa fa-calendar"></i> {{ post.date | date: date_format
+            }}</span
+        >
+        {%- if post.author -%}
+        <span class="post-author left-vsplit"
+            ><i class="fa fa-pencil"></i> {{ post.author | escape }}</span
+        >
+        {%- endif -%}
+        <span class="post-reading-time left-vsplit"
+            ><i class="fa fa-clock-o"></i> {{ reading_time }}</span
+        >
+    </div>
+    <div class="post-excerpt">
+        {%- if post_image and post_image != 'NO_EXCERPT_IMAGE' -%}
+        <a
+            class="post-image"
+            href="{{ post_url }}"
+            style="flex: 0 1 {{ image_width }}"
+        >
+            <div
+                style="background-image: url({{ post_image | relative_url }}); height: {{ image_height }}"
+            ></div>
+        </a>
+        {%- endif -%}
+        <a class="post-text" href="{{ post_url }}">
+            <p>
+                {{ article_excerpt }} <span class="read_more">Read More</span>
+            </p>
+        </a>
+    </div>
+    <div class="post-tags">
+        {%- for tag in post.tags -%}
+        <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}"
+            >#{{tag}}</a
+        >
+        {%- endfor -%}
+    </div>
 </li>
diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html
index a9de0740e64..6ce8edd14c7 100644
--- a/_includes/views/pagination.html
+++ b/_includes/views/pagination.html
@@ -1,41 +1,26 @@
-{%- 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 -%}
+{%- 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 -%}
+    <!-- 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>
+        <!-- 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 -%}
+    <!-- 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
index 73c56bf5145..fce8f0ba136 100644
--- a/_includes/views/paginator.html
+++ b/_includes/views/paginator.html
@@ -1,25 +1,24 @@
-{% if include.paginator %}
-  {% assign paginator = include.paginator %}
-{% endif %}
-
-{% if paginator.posts.size > 0 %}
-  <div class="paginator">
+{% 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 %}
+        {% 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="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 %}
+        {% if paginator.next_page %}
+        <a href="{{ paginator.next_page_path | relative_url }}">Next</a>
+        {% else %}
+        <span>Next</span>
+        {% endif %}
     </span>
-  </div>
+</div>
 {% endif %}
diff --git a/_includes/views/post-badges.html b/_includes/views/post-badges.html
index 932781ab1b2..3f061a67d61 100644
--- a/_includes/views/post-badges.html
+++ b/_includes/views/post-badges.html
@@ -1,4 +1,4 @@
 <span class="post-badges">
-  <span class="post-badge badge-top">TOP</span>
-  <span class="post-badge badge-new">NEW</span>
+    <span class="post-badge badge-top">TOP</span>
+    <span class="post-badge badge-new">NEW</span>
 </span>
diff --git a/_includes/views/post-header.html b/_includes/views/post-header.html
index b6ea964a13c..68693f52a00 100644
--- a/_includes/views/post-header.html
+++ b/_includes/views/post-header.html
@@ -1,30 +1,41 @@
 <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>
+    <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>
+    <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 -%}
+        {%- 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
index 0cad1f45d1b..7803fd59e48 100644
--- a/_includes/views/post-item.html
+++ b/_includes/views/post-item.html
@@ -1,14 +1,9 @@
-{%- if include.item -%}
-  {%- assign item = include.item -%}
-{%- endif -%}
-
-{%- assign post = item -%}
-
-{% assign date_format = site.yat.date_format | default: "%b %-d, %Y" %}
+{%- 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>
+    <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
index 0cf9414390b..a1ff9025f06 100644
--- a/_includes/views/segments.html
+++ b/_includes/views/segments.html
@@ -1,27 +1,16 @@
-{%- if include.keys -%}
-  {%- assign keys = include.keys -%}
-{%- endif -%}
-
-{%- if include.field -%}
-  {%- assign field = include.field -%}
-{%- endif -%}
+{%- 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 }}">
+    <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>
+        </li>
+        {% endif %} {% endfor %} {% endfor %}
+    </ul>
 </div>
diff --git a/_includes/views/site-brand.html b/_includes/views/site-brand.html
index e1ad4a87446..2c77dd1cea0 100644
--- a/_includes/views/site-brand.html
+++ b/_includes/views/site-brand.html
@@ -1,4 +1,9 @@
-<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 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
index 35f56839897..ed624f8a59f 100644
--- a/_layouts/404.html
+++ b/_layouts/404.html
@@ -3,22 +3,22 @@
 ---
 
 <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;
-  }
+    .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>
+    <h1>404</h1>
 
-  <p><strong>Page not found :(</strong></p>
-  <p>Try to check other pages through the menu. </p>
+    <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
index 228f5d20106..fcfeed5b0fd 100644
--- a/_layouts/about.html
+++ b/_layouts/about.html
@@ -1,9 +1,9 @@
 ---
 layout: post
 hidden:
-  - header
-  - navigator
-  - related_posts
+    - header
+    - navigator
+    - related_posts
 ---
 
 {{ content }}
diff --git a/_layouts/archives.html b/_layouts/archives.html
index bbe9ebb86f8..d1f753a6a7d 100644
--- a/_layouts/archives.html
+++ b/_layouts/archives.html
@@ -3,16 +3,8 @@
 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 -%}
+{%- 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
index 46ba5c569fa..d3bed68ea90 100644
--- a/_layouts/articles.html
+++ b/_layouts/articles.html
@@ -4,11 +4,6 @@
 ---
 
 <div class="articles">
-  {% if page.banner == nil %}
-    {% assign banner = page.title %}
-  {% endif %}
-
-  {{ content }}
-
-  {% include views/pagination.html %}
+    {% 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
index 7d37d8995f0..5bd5797719d 100644
--- a/_layouts/categories.html
+++ b/_layouts/categories.html
@@ -3,14 +3,8 @@
 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 -%}
+{%- 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
index f8e8e6b57e8..9653ff88f2c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,27 +1,17 @@
-<!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>
+<!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
index 305a26bbc9d..ac339133420 100644
--- a/_layouts/framework.html
+++ b/_layouts/framework.html
@@ -3,33 +3,16 @@
 ---
 
 <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>
+    <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
index 4753b165a9c..cc3b7dbcfc4 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -1,8 +1,8 @@
 ---
 layout: articles
-heading: 'Your awesome heading'
-subheading: 'Your awesome subheading'
-banner: 'default'
+heading: "Your awesome heading"
+subheading: "Your awesome subheading"
+banner: "default"
 ---
 
 {{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html
index 442cfe61ac3..fcfce348cbc 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -4,89 +4,73 @@
 banner_html: post-header.html
 hidden: []
 sidebar:
-  - article-menu
+    - 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>
+    <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
index dfd1fa663ab..9fe08a506b1 100644
--- a/_layouts/tags.html
+++ b/_layouts/tags.html
@@ -3,14 +3,7 @@
 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 -%}
+{%- 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/2015-02-28-test-markdown.md b/_posts/2015-02-28-test-markdown.md
index caeaf8f3893..3e0fba0ffe3 100644
--- a/_posts/2015-02-28-test-markdown.md
+++ b/_posts/2015-02-28-test-markdown.md
@@ -6,7 +6,7 @@ categories: markdown
 tags: [test]
 ---
 
-You can write regular [markdown](https://markdowntutorial.com/) here and Jekyll will automatically convert it to a nice webpage.  I strongly encourage you to [take 5 minutes to learn how to write in markdown](http://markdowntutorial.com/) - it'll teach you how to transform regular text into bold/italics/headings/tables/etc.
+You can write regular [markdown](https://markdowntutorial.com/) here and Jekyll will automatically convert it to a nice webpage. I strongly encourage you to [take 5 minutes to learn how to write in markdown](http://markdowntutorial.com/) - it'll teach you how to transform regular text into bold/italics/headings/tables/etc.
 
 **Here is some bold text**
 
@@ -15,12 +15,11 @@ You can write regular [markdown](https://markdowntutorial.com/) here and Jekyll
 Here's a useless table:
 
 | Number | Next number | Previous number |
-| :------ |:--- | :--- |
-| Five | Six | Four |
-| Ten | Eleven | Nine |
-| Seven | Eight | Six |
-| Two | Three | One |
-
+| :----- | :---------- | :-------------- |
+| Five   | Six         | Four            |
+| Ten    | Eleven      | Nine            |
+| Seven  | Eight       | Six             |
+| Two    | Three       | One             |
 
 How about a yummy crepe?
 
@@ -32,18 +31,18 @@ It can also be centered!
 
 Here's a code chunk:
 
-~~~
+```
 var foo = function(x) {
   return(x + 5);
 }
 foo(3)
-~~~
+```
 
 And here is the same code with syntax highlighting:
 
 ```javascript
-var foo = function(x) {
-  return(x + 5);
+var foo = function (x) {
+    return x + 5
 }
 foo(3)
 ```
@@ -52,12 +51,13 @@ And here is the same code yet again but with line numbers:
 
 {% highlight javascript linenos %}
 var foo = function(x) {
-  return(x + 5);
+return(x + 5);
 }
 foo(3)
 {% endhighlight %}
 
 ## Boxes
+
 You can add notification, warning and error boxes like this:
 
 ### Notification
diff --git a/_posts/2016-01-01-another-test-markdown.md b/_posts/2016-01-01-another-test-markdown.md
index d0b2f9b85eb..179bff177e2 100644
--- a/_posts/2016-01-01-another-test-markdown.md
+++ b/_posts/2016-01-01-another-test-markdown.md
@@ -12,13 +12,13 @@ Put the math expression within <span>$</span>...\$:
 
 $\Pi$
 
-$ a * b = c ^ b $
+$ a \* b = c ^ b $
 
 $ 2^{\frac{n-1}{3}} $
 
-$ \int\_a^b f(x)\,dx. $
+$ \int_a^b f(x)\,dx. $
 
-\\( \int\_a^b f(x)\,dx. \\)
+\\( \int_a^b f(x)\,dx. \\)
 
 $$
 \begin{cases}
@@ -27,16 +27,15 @@ $$
 \end{cases}
 $$
 
-$ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta _1 - \delta _2 n_i^\sigma )|\phi _i^\sigma ({\bf{r}})|^2} $
-
-$$ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta _1 - \delta _2 n_i^\sigma )|\phi _i^\sigma ({\bf{r}})|^2} $$
+$ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta \_1 - \delta \_2 n_i^\sigma )|\phi \_i^\sigma ({\bf{r}})|^2} $
 
+$$ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta \_1 - \delta \_2 n_i^\sigma )|\phi \_i^\sigma ({\bf{r}})|^2} $$
 
 {{ "here is a liquid filter." | capitalize }}
 
 {% capture test %}
-\`escape inline code\`  
-`inline code`  
+\`escape inline code\`
+`inline code`
 Here is a **capture block**.
 {% endcapture %}
 
@@ -48,9 +47,9 @@ Here is a **capture block**.
 :+1:
 :bolivia:
 
-\1. 21312  
-\2. 21312  
-\4. 4214  
+\1. 21312
+\2. 21312
+\4. 4214
 
 {% highlight python wl linenos %}
 import networkx as nx
@@ -59,14 +58,12 @@ from collections import Counter
 diagrams = defaultdict(list)
 particle_counts = defaultdict(Counter)
 
-for (a, b), neighbors in common_neighbors.items():
-    # Build up the graph of connections between the
-    # common neighbors of a and b.
-    g = nx.Graph()
-    for i in neighbors:
-        for j in set(nl.point_indices[
-            nl.query_point_indices == i]).intersection(neighbors):
-            g.add_edge(i, j)
+for (a, b), neighbors in common_neighbors.items(): # Build up the graph of connections between the # common neighbors of a and b.
+g = nx.Graph()
+for i in neighbors:
+for j in set(nl.point_indices[
+nl.query_point_indices == i]).intersection(neighbors):
+g.add_edge(i, j)
 
     # Define the identifiers for a CNA diagram:
     # The first integer is 1 if the particles are bonded, otherwise 2
@@ -91,6 +88,7 @@ for (a, b), neighbors in common_neighbors.items():
         idx = diagrams[key].index(g)
     cna_signature = key + (idx,)
     particle_counts[a].update([cna_signature])
+
 {% endhighlight %}
 
 ```cpp
@@ -110,7 +108,7 @@ void insert(const char* key) {
 p ":+1:"
 ```
 
-``` diff
+```diff
 +        'user_exists' => 'SELECT EXISTS(SELECT 1 FROM table WHERE username = (:username || \'@sample'))',
 +        'get_users' => 'SELECT split_part(username, \'@\', 1) FROM table WHERE (username ILIKE :search) OR (name ILIKE :search)',
 +        'get_password_hash_for_user' => 'SELECT split_part(password, \'{CRYPT}\', 2) FROM table WHERE username = (:username || \'@sample\')',
@@ -119,25 +117,24 @@ p ":+1:"
 
 Reload the Nginx:
 
-``` console
+```console
 $ sudo nginx -s reload
 ```
 
-|:                        |:                  :|: $$O_3 + C_2H_2 \rightarrow $$         :|||:  $$O_3 + C_2H_4 \rightarrow $$ :|||:       :| 
-|:  ^^ Method            :| ^^ $$\lambda^a$$  |    vdW |    TS |    cycloadd.           |  vdW  |  TS  |  cycloadd.           | ^^ MAE    |
+|: |: :|: $$O_3 + C_2H_2 \rightarrow $$         :|||:  $$O_3 + C_2H_4 \rightarrow $$ :|||:       :|
+|:  ^^ Method            :| ^^ $$\lambda^a$$ | vdW | TS | cycloadd. | vdW | TS | cycloadd. | ^^ MAE |
 |-------------------------|-------------------|--------|-------|------------------------|-------|------|----------------------|-----------|
-| $$\lambda$$-tPBE        |   0.20            | -0.40  | 7.69  | -68.00                 | -1.86 | 4.87 | -57.57               | 1.29      |
+| $$\lambda$$-tPBE | 0.20 | -0.40 | 7.69 | -68.00 | -1.86 | 4.87 | -57.57 | 1.29 |
 |-------------------------|-------------------|--------|-------|------------------------|-------|------|----------------------|-----------|
-| MC1H-PBE $$^b$$         |   0.25            | -1.08  | 3.66  | -70.97                 | -1.25 | 0.13 | -61.26               | 3.35      |
+| MC1H-PBE $$^b$$ | 0.25 | -1.08 | 3.66 | -70.97 | -1.25 | 0.13 | -61.26 | 3.35 |
 |-------------------------|-------------------|--------|-------|------------------------|-------|------|----------------------|-----------|
-| Reference values $$^c$$ |   ---------       | -1.90  | 7.74  | -63.80                 | -1.94 | 3.37 | -57.15               | --------- |
+| Reference values $$^c$$ | --------- | -1.90 | 7.74 | -63.80 | -1.94 | 3.37 | -57.15 | --------- |
 |=========================|===================|========|=======|========================|=======|======|======================|===========|
-| $$^a$$ The optimal mixing parameter.$$\~$$ $$^b$$ From Ref. .$$\~$$  $$^c$$ Best estimates from Ref. . ||||||||
+| $$^a$$ The optimal mixing parameter.$$\~$$ $$^b$$ From Ref. .$$\~$$ $$^c$$ Best estimates from Ref. . ||||||||
 
-
-|   1   |  2     |   3   |   4   |  5   |  6   |  7  |
-| spancell1     ||   spancell2  || cell | spancell3 ||
-|^^ spancell1   ||   spancell2  || cell | spancell3 ||
+| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+| spancell1 || spancell2 || cell | spancell3 ||
+|^^ spancell1 || spancell2 || cell | spancell3 ||
 {:class="custom-table"}
 
 <script>
@@ -146,68 +143,63 @@ $ sudo nginx -s reload
 |     (1,0)    || ^^    | (1,3) |
 </script>
 
-
 |:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      |
-|     (1,0)    || ^^    | (1,3) |      |
-
+| (0,0) | (0,1) | (0,2) | (0,3) | |
+| (1,0) || ^^ | (1,3) | |
 
 |:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      |
-|     (1,0)           ||| (1,3)       ||
-
+| (0,0) | (0,1) | (0,2) | (0,3) | |
+| (1,0) ||| (1,3) ||
 
 |:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      |
-|     (1,0)           ||| ^^    |      |
+| (0,0) | (0,1) | (0,2) | (0,3) | |
+| (1,0) ||| ^^ | |
 
 |:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      \
-|     (1,0)           ||| ^^    |      |
-
+| (0,0) | (0,1) | (0,2) | (0,3) | \
+| (1,0) ||| ^^ | |
 
 ## Table
 
-| Stage | Direct Products | ATP Yields |
-| ----: | --------------: | ---------: |
-|Glycolysis | 2 ATP                   ||
-|^^         | 2 NADH      | 3--5 ATP   |
-|Pyruvaye oxidation | 2 NADH | 5 ATP   |
-|Citric acid cycle  | 2 ATP           ||
-|^^                 | 6 NADH | 15 ATP  |
-|^^                 | 2 FADH | 3 ATP   |
-|                        30--32 ATP  |||
-
+|              Stage | Direct Products | ATP Yields |
+| -----------------: | --------------: | ---------: |
+|         Glycolysis |           2 ATP |            |
+|                 ^^ |          2 NADH |   3--5 ATP |
+| Pyruvaye oxidation |          2 NADH |      5 ATP |
+|  Citric acid cycle |           2 ATP |            |
+|                 ^^ |          6 NADH |     15 ATP |
+|                 ^^ |          2 FADH |      3 ATP |
+|         30--32 ATP |                 |            |
 
 {:color-style: style="background: black;" }
 {:color-style: style="color: white;" }
 {:font-style: style="font-weight: 900; text-decoration: underline;" }
 
-|:             Here's a Inline Attribute Lists example                 :||||
-| ------- | ------------------------- | -------------------- | ----------- |
-|:       :|:  <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
-| ^^      |   Red    {: .cls style="background: orange" }                |||
-| ^^ IALs |   Green  {: #id style="background: green; color: white" }    |||
-| ^^      |   Blue   {: style="background: blue; color: white" }         |||
-| ^^      |   Black  {: color-style font-style}                          |||
-
+| : Here's a Inline Attribute Lists example : |                                                               |     |     |
+| ------------------------------------------- | ------------------------------------------------------------- | --- | --- |
+| : :                                         | : <div style="color: red;"> &lt; Normal HTML Block > </div> : |     |     |
+| ^^                                          | Red {: .cls style="background: orange" }                      |     |     |
+| ^^ IALs                                     | Green {: #id style="background: green; color: white" }        |     |     |
+| ^^                                          | Blue {: style="background: blue; color: white" }              |     |     |
+| ^^                                          | Black {: color-style font-style}                              |     |     |
 
 [cell image]: https://jekyllrb.com/img/octojekyll.png "An exemplary image"
 
-| Heading            | Column 1      | Column 2                           |
-|--------------------|---------------|------------------------------------|
-| Row 1              | Apple[^1]     | [Youtube (Home)]                   |
-| Row 2              | Banana        | [Github][1]                        |
-| Row 3 (merged)     | Blueberry     | [Google] *****  [Github]           |
-| ^^         | [Plum](https://example.com) | Raspberry ![example][cell image]   |
-| Row 4      | <https://www.google.com>    |  [test](https://www.google.com){:target="_blank"}                            |
-|^^          |^^ <https://www.youtube.com> |                              |
-| Row 5      | <https://www.google.com>                                  ||
+| Heading        | Column 1                     | Column 2                                          |
+| -------------- | ---------------------------- | ------------------------------------------------- |
+| Row 1          | Apple[^1]                    | [Youtube (Home)]                                  |
+| Row 2          | Banana                       | [Github][1]                                       |
+| Row 3 (merged) | Blueberry                    | [Google] **\*** [Github]                          |
+| ^^             | [Plum](https://example.com)  | Raspberry ![example][cell image]                  |
+| Row 4          | <https://www.google.com>     | [test](https://www.google.com){:target="\_blank"} |
+| ^^             | ^^ <https://www.youtube.com> |                                                   |
+| Row 5          | <https://www.google.com>     |                                                   |
 
 [Youtube (Home)]: https://www.youtube.com
 [Google]: https://www.google.com
 [Github]: https://www.github.com
 [1]: https://www.github.com
+
 [^1]: Footnote
 
 <https://www.google.com>
@@ -216,18 +208,19 @@ Not in table: `<Mail Gateway>`
 
 In table:
 
-Decision Point | Design Decision
---- | ---
-Authoritative DNS MX Record | `<Mail Gateway>`
+| Decision Point              | Design Decision  |
+| --------------------------- | ---------------- |
+| Authoritative DNS MX Record | `<Mail Gateway>` |
 
 9 \* 9
 
 | 1 \* 1 = 1 |
 | 1 \* 2 = 2 | 2 \* 2 = 4 |
-| 1 \* 3 = 3 | 2 \* 3 = 6 | 3 \* 3 = 9  |
+| 1 \* 3 = 3 | 2 \* 3 = 6 | 3 \* 3 = 9 |
 | 1 \* 3 = 3 | 2 \* 3 = 6 | 3 \* 4 = 12 | 4 \* 4 = 16 |
 
 ## Emoji
+
 :+1:
 
 ## Mathjax
@@ -256,7 +249,7 @@ graph LR
 
 ![](//www.youtube.com/watch?v=Ptk_1Dc2iPY)
 
-![](https://avatars3.githubusercontent.com/hubot?v=3&amp;s=40)
+![](https://avatars3.githubusercontent.com/hubot?v=3&s=40)
 
 [\[video link\]](//www.youtube.com/watch?v=Ptk_1Dc2iPY)
 
@@ -311,9 +304,9 @@ Video with custom thumbnail:
 [![w:1100](https://i.imgur.com/bc9HOJU.png)](https://www.youtube.com/watch?v=kCHGDRHZ4eU)
 
 Tips:
-* Use pipes {% raw %}(`|`){% endraw %} to delineate columns, and dashes to delineate the header row from the rest of the table.
-* Spacing doesn't matter to the markdown processor, any extra white space is removed, but it can really help with readability.
-The two markdown examples below both create this table.
 
-Use pipes `{% raw %}(`|`){% endraw %}` to delineate columns, and dashes to delineate the header row from the rest of the table.
+-   Use pipes {% raw %}(`|`){% endraw %} to delineate columns, and dashes to delineate the header row from the rest of the table.
+-   Spacing doesn't matter to the markdown processor, any extra white space is removed, but it can really help with readability.
+    The two markdown examples below both create this table.
 
+Use pipes `{% raw %}(`|`){% endraw %}` to delineate columns, and dashes to delineate the header row from the rest of the table.
diff --git a/_posts/2017-05-20-this-post-demonstrates-post-content-styles.md b/_posts/2017-05-20-this-post-demonstrates-post-content-styles.md
index ec675ca3160..aecbc5e3e8b 100644
--- a/_posts/2017-05-20-this-post-demonstrates-post-content-styles.md
+++ b/_posts/2017-05-20-this-post-demonstrates-post-content-styles.md
@@ -38,10 +38,10 @@ Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin con
 
 ```html
 <html>
-  <head> </head>
-  <body>
-    <p>Hello, World!</p>
-  </body>
+    <head> </head>
+    <body>
+        <p>Hello, World!</p>
+    </body>
 </html>
 ```
 
@@ -61,10 +61,10 @@ In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla e
 
 In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
 
-- First item, yo
-- Second item, dawg
-- Third item, what what?!
-- Fourth item, fo sheezy my neezy
+-   First item, yo
+-   Second item, dawg
+-   Third item, what what?!
+-   Fourth item, fo sheezy my neezy
 
 ### Oh hai, an ordered list!!
 
diff --git a/_posts/2017-06-10-quick-mardown-example.md b/_posts/2017-06-10-quick-mardown-example.md
index 67f736a7129..e2a68009496 100644
--- a/_posts/2017-06-10-quick-mardown-example.md
+++ b/_posts/2017-06-10-quick-mardown-example.md
@@ -12,12 +12,12 @@ top: 2
 
 Paragraphs are separated by a blank line.
 
-2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
 look like:
 
-  * this one
-  * that one
-  * the other one
+-   this one
+-   that one
+-   the other one
 
 Note that --- not considering the asterisk --- the actual text
 content starts at 4-columns in.
@@ -32,16 +32,13 @@ Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
 in chapters 12--14"). Three dots ... will be converted to an ellipsis.
 Unicode is supported. ☺
 
-
-
-An h2 header
-------------
+## An h2 header
 
 Here's a numbered list:
 
- 1. first item
- 2. second item
- 3. third item
+1.  first item
+2.  second item
+3.  third item
 
 Note again how the actual text starts at 4 columns in (4 characters
 from the left side). Here's a code sample:
@@ -52,39 +49,37 @@ from the left side). Here's a code sample:
 As you probably guessed, indented 4 spaces. By the way, instead of
 indenting the block, you can use delimited blocks, if you like:
 
-~~~
+```
 define foobar() {
     print "Welcome to flavor country!";
 }
-~~~
+```
 
 (which makes copying & pasting easier). You can optionally mark the
 delimited block for Pandoc to syntax highlight it:
 
-~~~python
+```python
 import time
 # Quick, count to ten!
 for i in range(10):
     # (but not *too* quick)
     time.sleep(0.5)
     print(i)
-~~~
-
-
+```
 
-### An h3 header ###
+### An h3 header
 
 Now a nested list:
 
- 1. First, get these ingredients:
+1.  First, get these ingredients:
 
-      * carrots
-      * celery
-      * lentils
+    -   carrots
+    -   celery
+    -   lentils
 
- 2. Boil some water.
+2.  Boil some water.
 
- 3. Dump everything in the pot and follow
+3.  Dump everything in the pot and follow
     this algorithm:
 
         find wooden spoon
@@ -108,51 +103,57 @@ doc](#an-h2-header). Here's a footnote [^1].
 
 Tables can look like this:
 
-Name           Size  Material      Color
-------------- -----  ------------  ------------
-All Business      9  leather       brown
-Roundabout       10  hemp canvas   natural
-Cinderella       11  glass         transparent
+Name Size Material Color
+
+---
+
+All Business 9 leather brown
+Roundabout 10 hemp canvas natural
+Cinderella 11 glass transparent
 
 Table: Shoes sizes, materials, and colors.
 
 (The above is the caption for the table.) Pandoc also supports
 multi-line tables:
 
---------  -----------------------
-Keyword   Text
---------  -----------------------
-red       Sunsets, apples, and
-          other red or reddish
-          things.
+---
 
-green     Leaves, grass, frogs
-          and other things it's
-          not easy being.
---------  -----------------------
+Keyword Text
+
+---
+
+red Sunsets, apples, and
+other red or reddish
+things.
+
+green Leaves, grass, frogs
+and other things it's
+not easy being.
+
+---
 
 A horizontal rule follows.
 
-***
+---
 
 Here's a definition list:
 
 apples
-  : Good for making applesauce.
+: Good for making applesauce.
 
 oranges
-  : Citrus!
+: Citrus!
 
 tomatoes
-  : There's no "e" in tomatoe.
+: There's no "e" in tomatoe.
 
 Again, text is indented 4 spaces. (Put a blank line between each
-term and  its definition to spread things out more.)
+term and its definition to spread things out more.)
 
 Here's a "line block" (note how whitespace is honored):
 
 | Line one
-|   Line too
+| Line too
 | Line tree
 
 and images can be specified like so:
diff --git a/_posts/2017-12-04-plantuml-example.md b/_posts/2017-12-04-plantuml-example.md
index e45b91ab1eb..d5a79f4726a 100644
--- a/_posts/2017-12-04-plantuml-example.md
+++ b/_posts/2017-12-04-plantuml-example.md
@@ -8,49 +8,49 @@ tags: [plantuml]
 ## My First PlantUML
 
 ### PlantUML Block-1
+
 @startuml
 Bob -> Alice : hello
 @enduml
 
-
 ### PlantUML Block-2
-``` plantuml!
+
+```plantuml!
 Bob -> Alice : hello world
 ```
 
-
 ### PlantUML Block-3
+
 @startuml
-(*) --> "Initialization"
+(\*) --> "Initialization"
 
 if "Some Test" then
-  -->[true] "Some Activity"
-  --> "Another activity"
-  -right-> (*)
+-->[true] "Some Activity"
+--> "Another activity"
+-right-> (_)
 else
-  ->[false] "Something else"
-  -->[Ending process] (*)
+->[false] "Something else"
+-->[Ending process] (_)
 endif
 @enduml
 
-
 ### PlantUML Block-4
 
 @startuml
 skinparam handwritten true
 
 skinparam usecase {
-  BackgroundColor DarkSeaGreen
-  BorderColor DarkSlateGray
+BackgroundColor DarkSeaGreen
+BorderColor DarkSlateGray
 
-  BackgroundColor<< Main >> YellowGreen
-  BorderColor<< Main >> YellowGreen
+BackgroundColor<< Main >> YellowGreen
+BorderColor<< Main >> YellowGreen
 
-  ArrowColor Olive
-  ActorBorderColor black
-  ActorFontName Courier
+ArrowColor Olive
+ActorBorderColor black
+ActorFontName Courier
 
-  ActorBackgroundColor<< Human >> Gold
+ActorBackgroundColor<< Human >> Gold
 }
 
 User << Human >>
diff --git a/_posts/2017-12-08-mermaid-example.md b/_posts/2017-12-08-mermaid-example.md
index 4b076809a19..6cad02f49ae 100644
--- a/_posts/2017-12-08-mermaid-example.md
+++ b/_posts/2017-12-08-mermaid-example.md
@@ -18,14 +18,14 @@ pie title Pets adopted by volunteers
 
 @startmermaid
 sequenceDiagram
-  Alice ->> Bob: Hello Bob, how are you?
-  Bob-->>John: How about you John?
-  Bob--x Alice: I am good thanks!
-  Bob-x John: I am good thanks!
-  Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-  
-  Bob-->Alice: Checking with John...
-  Alice->John: Yes... John, how are you?
+Alice ->> Bob: Hello Bob, how are you?
+Bob-->>John: How about you John?
+Bob--x Alice: I am good thanks!
+Bob-x John: I am good thanks!
+Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+Bob-->Alice: Checking with John...
+Alice->John: Yes... John, how are you?
 @endmermaid
 
 ```mermaid!
@@ -38,6 +38,7 @@ A[Christmas] -->|Get money| B(Go shopping)
 ```
 
 ### 3. Class diagram
+
 ```mermaid!
 classDiagram
 Animal <|-- Duck
@@ -63,6 +64,7 @@ class Zebra{
 ```
 
 ### 4. State diagram
+
 ```mermaid!
 stateDiagram
 [*] --> Still
diff --git a/_posts/2017-12-15-table-example.md b/_posts/2017-12-15-table-example.md
index af03411cedb..fc40b7c6c67 100644
--- a/_posts/2017-12-15-table-example.md
+++ b/_posts/2017-12-15-table-example.md
@@ -10,102 +10,99 @@ tags: [table]
 
 **For now, these extended features are provided:**
 
-* Cells spanning multiple columns
-* Cells spanning multiple rows
-* Cells text align separately
-* Table header not required
-* Grouped table header rows or data rows
+-   Cells spanning multiple columns
+-   Cells spanning multiple rows
+-   Cells text align separately
+-   Table header not required
+-   Grouped table header rows or data rows
 
 ### Rowspan and Colspan
-^^ in a cell indicates it should be merged with the cell above.  
-This feature is contributed by [pmccloghrylaing](https://github.com/pmccloghrylaing).  
-
-| Stage | Direct Products | ATP Yields |
-| ----: | --------------: | ---------: |
-|Glycolysis | 2 ATP                   ||
-|^^         | 2 NADH      | 3--5 ATP   |
-|Pyruvaye oxidation | 2 NADH | 5 ATP   |
-|Citric acid cycle  | 2 ATP           ||
-|^^                 | 6 NADH | 15 ATP  |
-|^^                 | 2 FADH | 3 ATP   |
-| 30--32 ATP                         |||
+
+^^ in a cell indicates it should be merged with the cell above.
+This feature is contributed by [pmccloghrylaing](https://github.com/pmccloghrylaing).
+
+|              Stage | Direct Products | ATP Yields |
+| -----------------: | --------------: | ---------: |
+|         Glycolysis |           2 ATP |            |
+|                 ^^ |          2 NADH |   3--5 ATP |
+| Pyruvaye oxidation |          2 NADH |      5 ATP |
+|  Citric acid cycle |           2 ATP |            |
+|                 ^^ |          6 NADH |     15 ATP |
+|                 ^^ |          2 FADH |      3 ATP |
+|         30--32 ATP |                 |            |
 
 [ Net ATP yields per hexose]
 
 ### Multiline
-A backslash at end to join cell contents with the following lines.  
-This feature is contributed by [Lucas-C](https://github.com/Lucas-C).
 
-|:     Easy Multiline     :|||
-|:------ |:------ |:-------- |
-| Apple  | Banana |  Orange  \
-| Apple  | Banana |  Orange  \
-| Apple  | Banana |  Orange
-| Apple  | Banana |  Orange  \
-| Apple  | Banana |  Orange  |
-| Apple  | Banana |  Orange  |
+A backslash at end to join cell contents with the following lines.
+This feature is contributed by [Lucas-C](https://github.com/Lucas-C).
 
+| : Easy Multiline : |        |           |
+| :----------------- | :----- | :-------- |
+| Apple              | Banana | Orange \  |
+| Apple              | Banana | Orange \  |
+| Apple              | Banana | Orange    |
+| Apple              | Banana | Orange \  |
+| Apple              | Banana | Orange    |
+| Apple              | Banana | Orange    |
 
 ### Headerless
+
 Table header can be eliminated.
 
 |--|--|--|--|--|--|--|--|
-|♜ |  |♝ |♛ |♚ |♝ |♞ |♜ |
-|  |♟ |♟ |♟ |  |♟ |♟ |♟ |
-|♟ |  |♞ |  |  |  |  |  |
-|  |♗ |  |  |♟ |  |  |  |
-|  |  |  |  |♙ |  |  |  |
-|  |  |  |  |  |♘ |  |  |
-|♙ |♙ |♙ |♙ |  |♙ |♙ |♙ |
-|♖ |♘ |♗ |♕ |♔ |  |  |♖ |
-
+|♜ | |♝ |♛ |♚ |♝ |♞ |♜ |
+| |♟ |♟ |♟ | |♟ |♟ |♟ |
+|♟ | |♞ | | | | | |
+| |♗ | | |♟ | | | |
+| | | | |♙ | | | |
+| | | | | |♘ | | |
+|♙ |♙ |♙ |♙ | |♙ |♙ |♙ |
+|♖ |♘ |♗ |♕ |♔ | | |♖ |
 
 ```markdown
-|:     Fruits \|\| Food           :|||
-|:-------- |:-------- |:------------ |
-| Apple    |: Apple  :|    Apple     \
-| Banana   |  Banana  |    Banana    \
-| Orange   |  Orange  |    Orange    |
-|:   Rowspan is 5   :||:  How's it? :|
-|^^   A. Peach       ||^^ 1. Fine    |
-|^^   B. Orange      ||^^ 2. Bad  $I = \int \rho R^{2} dV$     |
-|^^   C. Banana      ||   It's OK! ![example image][my-image]  |
+| : Fruits \|\| Food : |           |                                     |
+| :------------------- | :-------- | :---------------------------------- |
+| Apple                | : Apple : | Apple \                             |
+| Banana               | Banana    | Banana \                            |
+| Orange               | Orange    | Orange                              |
+| : Rowspan is 5 :     |           | : How's it? :                       |
+| ^^ A. Peach          |           | ^^ 1. Fine                          |
+| ^^ B. Orange         |           | ^^ 2. Bad $I = \int \rho R^{2} dV$  |
+| ^^ C. Banana         |           | It's OK! ![example image][my-image] |
 ```
 
 ### Text Alignment
-Table cell can be set alignment separately.
-
-| \:Fruits         ||  Food   :|
-|:-------- |:------ |:-------- |
-| Apple    | Banana |  Orange  |
-| Apple    | Banana |  Orange  |
-
-
-|          | Fruits\::        ||
-|:-------- |:------ |:-------- |
-| Apple    | Banana |  Orange  |
-| Apple    | Banana |  Orange  |
-
-
-|: \:Fruits       :||          |:       Food     :||
-|:-------- |:------ |:-------- |:-------- |:------ |
-| Apple    | Banana |  Orange  |:   Strawberry    :|
-| Apple  &  Banana || ^^       |    Peach        :||
-
-
-|: \:Fruits       :||          |:       Food     :||
-| Apple    | Banana |  Orange  |:   Strawberry    :|
 
+Table cell can be set alignment separately.
 
-|:     Fruits \|\| Food           :|||
-|:-------- |:-------- |:------------ |
-| Apple    |: Apple  :|    Apple     \
-| Banana   |  Banana  |    Banana    \
-| Orange   |  Orange  |    Orange    |
-|:   Rowspan is 5   :||:  How's it? :|
-|^^   A. Peach       ||^^ 1. Fine    |
-|^^   B. Orange      ||^^ 2. Bad  $I = \int \rho R^{2} dV$     |
-|^^   C. Banana      ||   It's OK! ![example image][my-image]  |
+| \:Fruits |        | Food : |
+| :------- | :----- | :----- |
+| Apple    | Banana | Orange |
+| Apple    | Banana | Orange |
+
+|       | Fruits\:: |        |
+| :---- | :-------- | :----- |
+| Apple | Banana    | Orange |
+| Apple | Banana    | Orange |
+
+| : \:Fruits :   |        |        | : Food :       |     |
+| :------------- | :----- | :----- | :------------- | :-- |
+| Apple          | Banana | Orange | : Strawberry : |
+| Apple & Banana |        | ^^     | Peach :        |     |
+
+|: \:Fruits :|| |: Food :||
+| Apple | Banana | Orange |: Strawberry :|
+
+| : Fruits \|\| Food : |           |                                     |
+| :------------------- | :-------- | :---------------------------------- |
+| Apple                | : Apple : | Apple \                             |
+| Banana               | Banana    | Banana \                            |
+| Orange               | Orange    | Orange                              |
+| : Rowspan is 5 :     |           | : How's it? :                       |
+| ^^ A. Peach          |           | ^^ 1. Fine                          |
+| ^^ B. Orange         |           | ^^ 2. Bad $I = \int \rho R^{2} dV$  |
+| ^^ C. Banana         |           | It's OK! ![example image][my-image] |
 
 [my-image]: http://www.unexpected-vortices.com/sw/rippledoc/example-image.jpg "An exemplary image"
-
diff --git a/_posts/2017-12-18-video-example.md b/_posts/2017-12-18-video-example.md
index 353cdb7b54f..4343e7c91b4 100644
--- a/_posts/2017-12-18-video-example.md
+++ b/_posts/2017-12-18-video-example.md
@@ -7,11 +7,13 @@ tags: [video]
 ---
 
 ## Canon in D (Pachelbel's Canon) - Cello & Piano [BEST WEDDING VERSION]
-Some of you know that we occasionally play for weddings. As you can imagine, we get a LOT of requests for Canon in D, and we discovered that there were no good arrangements available anywhere for piano and cello! Hard to believe given its popularity. So we decided to make our own! We tried to stick as closely to the original as possible (which was written for three violins and basso continuo), and we performed it *not* at a snail's pace so the bride can actually make it down the aisle without putting everyone to sleep. 🙊(Yeah, we said it! Nobody likes a slow processional!) Also, the number one complaint about this piece from cellists is always how booooring it is to play because they literally have to play the same 8 bass notes over and over for the entire piece. Problem solved with this arrangement because the cello never has to play the bass! 🙌(The piano does, but we get lots of other fun stuff too so it's ok!) So for all you musicians out there playing weddings, we hope you enjoy playing this arrangement a little more than the ones you were used to...You can get it from www.musicnotes.com. 😊Be sure to let us know in the comments if you do!
+
+Some of you know that we occasionally play for weddings. As you can imagine, we get a LOT of requests for Canon in D, and we discovered that there were no good arrangements available anywhere for piano and cello! Hard to believe given its popularity. So we decided to make our own! We tried to stick as closely to the original as possible (which was written for three violins and basso continuo), and we performed it _not_ at a snail's pace so the bride can actually make it down the aisle without putting everyone to sleep. 🙊(Yeah, we said it! Nobody likes a slow processional!) Also, the number one complaint about this piece from cellists is always how booooring it is to play because they literally have to play the same 8 bass notes over and over for the entire piece. Problem solved with this arrangement because the cello never has to play the bass! 🙌(The piano does, but we get lots of other fun stuff too so it's ok!) So for all you musicians out there playing weddings, we hope you enjoy playing this arrangement a little more than the ones you were used to...You can get it from www.musicnotes.com. 😊Be sure to let us know in the comments if you do!
 
 ![](//www.youtube.com/watch?v=Ptk_1Dc2iPY)
 
 ## GUCCI HALLUCINATION / THE LINE ANIMATION / GUCCI
+
 BACKGROUND /
 
 Gucci share their creative vision through a series of surreal animated paintings by acclaimed artist Ignasi Monreal and The Line Animation studio. The animations make up part of a larger campaign shared via social media, above the line and print.
@@ -22,12 +24,12 @@ Our aim was to ground and accentuate the outlandish scenarios with ambient sound
 
 ![](https://vimeo.com/263856289)
 
-
 ## FINNEAS Demos How He Builds Songs For Billie Eilish
-Grammy Award-winning musician and producer FINNEAS sits down with Pitchfork and closely examines his creative process while working on some of the biggest hit songs of the past couple years. FINNEAS explores the sounds that brought upon 
+
+Grammy Award-winning musician and producer FINNEAS sits down with Pitchfork and closely examines his creative process while working on some of the biggest hit songs of the past couple years. FINNEAS explores the sounds that brought upon
 some of his greatest musical breakthroughs in songs such as bad guy, bury a friend, ocean eyes, when the party's over, I Lost a Friend, Used to This and much more.
 
-![][demo]  
+![][demo]
 
 [demo]: https://dai.ly/x7tgcev
 
@@ -35,9 +37,9 @@ some of his greatest musical breakthroughs in songs such as bad guy, bury a frie
 
 In future, drivers will be able to choose whether they wish to be driven or do the driving themselves. With the BMW Vision M NEXT, the BMW Group is revealing its take on how driving pleasure might look in future. It offers a foretaste of the BMW M brand’s electrified future by placing the focus squarely on the actively engaged driver. Intelligent technologies provide comprehensive yet carefully targeted assistance to turn them into the ultimate driver.
 
-![](https://www.dailymotion.com/video/x7bur2y)  
+![](https://www.dailymotion.com/video/x7bur2y)
 
 ## This is the poster image
+
 In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element.
 ![video](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)
-
diff --git a/_posts/2018-05-26-mathjax-test.md b/_posts/2018-05-26-mathjax-test.md
index 92bf6f17c98..6b20fc1f20f 100644
--- a/_posts/2018-05-26-mathjax-test.md
+++ b/_posts/2018-05-26-mathjax-test.md
@@ -6,8 +6,8 @@ categories: markdown
 tags: [test]
 ---
 
-* A safe integer is an integer that
-  * can be exactly represented as an IEEE-754 double precision number, and
-  * whose IEEE-75 representation cannot be the result of rounding any other integer to fit the IEEE-754 representation
-* For example, $ 2 ^ {53} - 1 $ is a safe integer,
-  * it can be exactly represented 
+-   A safe integer is an integer that
+    -   can be exactly represented as an IEEE-754 double precision number, and
+    -   whose IEEE-75 representation cannot be the result of rounding any other integer to fit the IEEE-754 representation
+-   For example, $ 2 ^ {53} - 1 $ is a safe integer,
+    -   it can be exactly represented
diff --git a/_posts/2018-12-05-an-exhibit-of-markdown.md b/_posts/2018-12-05-an-exhibit-of-markdown.md
index 1748ca2247d..39bb86fe379 100644
--- a/_posts/2018-12-05-an-exhibit-of-markdown.md
+++ b/_posts/2018-12-05-an-exhibit-of-markdown.md
@@ -10,15 +10,13 @@ This note demonstrates some of what [Markdown][1] is capable of doing.
 
 ## An exhibit of Markdown
 
-
-
-*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*
+_Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself._
 
 ## Basic formatting
 
 Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.
 
-Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.
+Paragraphs must be separated by a blank line. Basic formatting of _italics_ and **bold** is supported. This _can be **nested** like_ so.
 
 ## Lists
 
@@ -29,14 +27,14 @@ Paragraphs must be separated by a blank line. Basic formatting of *italics* and
 3. Number 3
 4. Ⅳ
 
-*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*
+_Note: the fourth item uses the Unicode character for [Roman numeral four][2]._
 
 ### Unordered list
 
-* An item
-* Another item
-* Yet another item
-* And there's more...
+-   An item
+-   Another item
+-   Yet another item
+-   And there's more...
 
 ## Paragraph modifiers
 
@@ -54,7 +52,7 @@ You can also make `inline code` to add code into other things.
 
 There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.
 
-### Headings *can* also contain **formatting**
+### Headings _can_ also contain **formatting**
 
 ### They can even contain `inline code`
 
@@ -66,9 +64,9 @@ I don't recommend using more than three or four levels of headings here, because
 
 URLs can be made in a handful of ways:
 
-* A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.
-* Another named link to [MarkItDown](https://www.markitdown.net/)
-* Sometimes you just want a URL like <https://www.markitdown.net/>.
+-   A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.
+-   Another named link to [MarkItDown](https://www.markitdown.net/)
+-   Sometimes you just want a URL like <https://www.markitdown.net/>.
 
 ## Horizontal rule
 
@@ -86,9 +84,8 @@ Markdown can also contain images. I'll need to add something here sometime.
 
 There's actually a lot more to Markdown than this. See the official [introduction][4] and [syntax][5] for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.
 
-
-  [1]: https://daringfireball.net/projects/markdown/
-  [2]: https://www.fileformat.info/info/unicode/char/2163/index.htm
-  [3]: https://www.markitdown.net/
-  [4]: https://daringfireball.net/projects/markdown/basics
-  [5]: https://daringfireball.net/projects/markdown/syntax
+[1]: https://daringfireball.net/projects/markdown/
+[2]: https://www.fileformat.info/info/unicode/char/2163/index.htm
+[3]: https://www.markitdown.net/
+[4]: https://daringfireball.net/projects/markdown/basics
+[5]: https://daringfireball.net/projects/markdown/syntax
diff --git a/_posts/2023-04-25-project-plan.md b/_posts/2023-04-25-project-plan.md
index 58b8c2ffb1f..ce42543b8d1 100644
--- a/_posts/2023-04-25-project-plan.md
+++ b/_posts/2023-04-25-project-plan.md
@@ -18,185 +18,347 @@ categories: plan
 #   subheading_style: "color: gold"
 tags: cese project-planning
 top: 1
-sidebar: []
 ---
 
-*Esta planificación fue realizada en el curso de Gestión de proyectos entre el 25 de abril de 2023 y el 13 de junio de 2023*
-
-## Descripción técnica conceptual del proyecto a realizar
-
-La navegación autónoma ha sido un tema de investigación activo durante décadas, pero
-recientemente ha ganado una atención sin precedentes gracias a los avances en tecnologı́as
-como la inteligencia artificial y la robótica.
-
-La navegación autónoma se refiere a la capacidad de un sistema para planificar y ejecutar sus
-propias acciones de manera autónoma, sin la necesidad de una intervención humana constante.
-La capacidad de un sistema para tomar decisiones en forma autónoma en su navegación a través
-del entorno es crucial para una amplia variedad de aplicaciones, desde los vehı́culos autónomos y
-los drones, hasta los robots industriales y los sistemas de logı́stica.
-
-La investigación de técnicas de bajo costo es importante para permitir que la tecnologı́a sea
-accesible para un mayor número de aplicaciones y usuarios. Esto es especialmente importante
-en paı́ses en desarrollo o en áreas con recursos limitados, donde los sistemas de navegación
-autónoma pueden ser prohibitivamente costosos.
-
-La restricción económica en el desarrollo de nuevas técnicas también puede mejorar la eficiencia
-y la efectividad de los sistemas de navegación autónoma, al permitir que los recursos sean
-utilizados de manera más efectiva y maximizar la vida útil de los componentes del sistema.
-La odometrı́a visual es una técnica de localización y navegación que se utiliza en robótica
-para estimar la posición y orientación de un robot en su entorno, en función de la información
-visual capturada por sus cámaras. La información de las imágenes capturadas permite estimar
-la cantidad de movimiento y la dirección del vehı́culo, permitiendo calcular su posición y
-orientación en relación con su posición inicial.
-
-Las técnicas de odometrı́a visual son particularmente útiles en entornos donde el movimiento
-del robot es predominantemente lateral. Además, se pueden utilizar en combinación con otras
-técnicas de localización y navegación, como la odometrı́a inercial o la SLAM (Simultaneous
-Localization and Mapping), para mejorar la precisión y la fiabilidad de la localización del robot.
-La SLAM es una técnica de visión por computadora que permite a un robot móvil construir un
-mapa del entorno en el que se encuentra, mientras estima en simultaneo su propia posición y
-orientación en ese entorno. En el caso de SLAM monocular, se utiliza una única cámara para
-capturar imágenes del entorno.
-
-La Fundación Fulgor realiza diversas actividades de investigación. Dentro del campo de
-navegación autónoma, una de las ramas de interés es la de algoritmos de SLAM monocular
-en conjunto con la odometrı́a inercial, por las diferentes ventajas que presenta sobre otros
-métodos. Es por esto que se han realizado experimentos en el marco de la Práctica Profesional
-Supervisada de la estudiante de grado Evangelina Castellano, implementando y analizando el
-desempeño de diferentes algoritmos en entornos de simulación.
-
-Actualmente, uno de los objetivos en esta lı́nea de investigación es poder migrar los algoritmos estudiados en un entorno virtual a un sistema fı́sico, para evaluar su desempeño en un entorno real. La experimentación en entornos virtuales se llevó a cabo con el framework ROS 2 (Robot Operating System 2 ). Dada la naturaleza modular de este framework, la migración consiste en el reemplazo de un módulo encapsulado que contenga el algoritmo.
+_Esta planificación fue realizada en el curso de Gestión de proyectos entre el 25 de abril de 2023 y el 13 de junio de 2023_
+
+## Descripción técnica conceptual del proyecto a realizar #WIP
+
+La Fundación Fulgor es una organización argentina que trabaja con la misión de generar oportunidades de desarrollo y formación en áreas estratégicas para el futuro de Argentina. Su búsqueda tiene como objetivo colaborar para que Argentina sea competitiva internacionalmente en áreas tecnológicas.
+
+Las principales herramientas de la Fundación Fulgor para cumplir su misión son el vínculo con universidades e instituciones educativas y la generación de oportunidades de capacitación, por ejemplo, a través de becas de grado y posgrado en temas estratégicos como:
+
+-   el procesamiento digital de señales
+-   los sistemas de comunicación y protocolos de transporte de datos
+-   el diseño e implementación de circuitos digitales en FPGA y circuitos integrados
+-   el diseño e implementación de circuitos analógicos
+-   la inteligencia artificial con aplicación en navegación autónoma y visión artificial
+-   el procesamiento de señales de radar y lidar
+-   la fusión sensorial y el control en vehículos aéreos y terrestres
+
+La navegación autónoma se refiere a la capacidad de un sistema para planificar y ejecutar sus propias acciones de forma autónoma, sin la necesidad de una intervención humana constante. Esta capacidad es crucial en una gran variedad de aplicaciones, desde los vehı́culos autónomos para transporte de personas y los drones, hasta los robots industriales y los sistemas de logı́stica.
+
+Dentro de los campos de la inteligencia artificial con aplicación en navegación autónoma, de la la fusión sensorial y del control de robots móviles, uno de los temas estudiados en Fundación Fulgor es la odometría visual-inercial (VIO por sus siglas en inglés) con algoritmos de SLAM (_Simultaneous Localization and Mapping_) monocular. Uno de los motivos por el cuál esta técnica es de interés, es su bajo costo económico en comparación con otros métodos donde los sensores son más complejos, inaccesibles y costosos.
+
+La investigación de técnicas de bajo costo es importante para permitir que la tecnologı́a sea accesible a un mayor número de aplicaciones y usuarios. Esto es especialmente importante en paı́ses en desarrollo o en áreas con recursos limitados, donde los sistemas de navegación autónoma pueden ser prohibitivamente costosos. Además, la restricción económica en el desarrollo de nuevas técnicas también colabora en mejorar la eficiencia de los sistemas de navegación autónoma, al permitir que los recursos sean utilizados de manera más efectiva y maximizar la vida útil de los componentes del sistema.
+
+La odometría visual-inercial es una técnica de localización y navegación utilizada en la robótica para estimar la posición y orientación del robot móvil, en base a la información visual capturada por una o más cámaras y la información inercial obtenida por una o más unidades de medición inercial (IMU por sus siglas en inglés).
+
+Por su parte, la SLAM es una técnica de visión por computadora que permite a un robot móvil construir un mapa del entorno en el que se encuentra, mientras estima en simultaneo su propia posición y orientación en ese entorno. En el caso de SLAM monocular, se utiliza una única cámara para capturar imágenes del entorno.
+
+En esta línea de investigación, un eqipo de trabajo de Fundación Fulgor ha realizado experiencias mediante simulación, donde se han implementado y evaluado el desempeño de diferentes algoritmos en entornos virtuales utilizando ROS 2 (_Robot Operating System 2_).
+
+El entorno ROS es un framework de software libre y de código abierto diseñado para permitir el desarrollo de aplicaciones robóticas distribuidas. Este framework proporciona un conjunto de herramientas para la creación, gestión, depuración y análisis de sistemas robóticos.
+
+Actualmente, uno de los objetivos del equipo de trabajo es migrar los algoritmos estudiados en un entorno virtual a un sistema fı́sico, para evaluar su desempeño en un entorno real. Es esta necesidad la que se propone resolver con el proyecto analizado en el presente documento.
+
+Por lo tanto, el proyecto propone el desarrollo de un robot móvil terrestre que permita evaluar el funcionamiento de los algoritmos de SLAM monocular en un entorno real, aplicar optimizaciones especificas para el sistema embebido utilizado y ofrecer una herramienta a Fundación Fulgor escalable a otros grupos de investigación vinculados con la robótica.
+
+Este tipo de plataformas robóticas móviles ya existen tanto de forma comercial con robots como _Spot_ de BostonDynamics, como en la comunidad _open source_ y _open hardware_ con robots como el TurtleBot de OpenRobotics. Su complejidad varía ampliamente, desde un punto de vista mecánico, de su electrónica, de sus sensores y actuadores y más. La planificación del proyecto contempla el diseño y selección de todos los aspectos que comprenden un robot móvil terrestre.
+
+![Spot de BostonDynamics](/assets/images/spot-bostondynamics.jpg)
+
+![TurtleBot 4 de OpenRobotics](/assets/images/turtlebot4.jpg)
 
 ## Identificación y análisis de los interesados
 
-| Rol | Nombre y Apellido | Organización | Puesto |
-|-----|-------------------|--------------|--------|
-| Cliente | Ing. Leandro Borgnino | Fundación Fulgor | Investigador |
-| Responsable | Ing. Gonzalo Gabriel Fernandez | FIUBA | Estudiante |
-| Orientador | Dr. Ing. Fabio Ardiani | Nimble One | Director de Trabajo Final |
-| Equipo | Evangelina Castellano | Universidad Nacional de Córdoba | Pasante |
-| Equipo | Fabio Gazzoni | Universidad Nacional de Córdoba | Pasante |
-| Usuario final | Grupos de investigación | Fundación Fulgor | - |
+A continuación se detallan las personas e instituciones involucradas en el proyecto:
 
-- **Cliente:**
+| Rol           | Nombre y Apellido              | Organización                    | Puesto                    |
+| ------------- | ------------------------------ | ------------------------------- | ------------------------- |
+| Cliente       | Ing. Leandro Borgnino          | Fundación Fulgor                | Investigador              |
+| Responsable   | Ing. Gonzalo Gabriel Fernandez | FIUBA                           | Estudiante                |
+| Orientador    | Dr. Ing. Fabio Ardiani         | Nimble One                      | Director de Trabajo Final |
+| Equipo        | Evangelina Castellano          | Universidad Nacional de Córdoba | Pasante                   |
+| Equipo        | Fabio Gazzoni                  | Universidad Nacional de Córdoba | Pasante                   |
+| Usuario final | Grupos de investigación        | Fundación Fulgor                | -                         |
+
+-   **Cliente:**
 
 El Ing. Leandro Borgnino realizando su doctorado en la Fundación Fulgor y posee conocimiento sobre los algoritmos utilizados para navegación autónoma a alto nivel. Domina el área de aplicación y puede resolver dudas específicas sobre los requerimientos funcionales que debe cumplir el proyecto.
 
-- **Orientador:**
+-   **Orientador:**
 
 El Dr. Ing. Fabio Ardiani finalizó en el año 2022 su doctorado en Mecatrónica, Robótica e Ingeniería de Automatización en Isae-Supaero, Toulouse, Francia. Actualmente se encuentra trabajando en Nimble One como investigador especialista en locomoción robótica. Se encuentra ubicado en Tolouse, Fracia. Se mantendrán reuniones una a uno cada dos semanas y reuniones con todo el equipo cuando se considere necesario y de acuerdo a su disposición. La periodicidad de las reuniones se ajustará segun lo demanden las actividades del proyecto y la disponibilidad del responsable y el orientador.
 
-- **Equipo:**
+-   **Equipo:**
 
 Los estudiantes Evangelina Castellano y Fabio Gazzoni se encuentran realizando su Práctica Profesional Supervisada (PPS) en la Fundación Fulgor. Al finalizar su PPS continuarán en la institución para realizar su proyecto final de grado. Es necesario planificar teniendo en cuenta que la dedicación es simple, es decir, entre 4 y 5 horas diarias. Integrarán el equipo de trabajo junto con el responsable.
 
-- **Usuario final:**
+-   **Usuario final:**
 
 No esta representado por una persona particular. Una vez finalizado el proyecto el prototipo quedará disponible en la Fundación Fulgor para su uso de parte de grupos de investigación.
 
+## Propósito del proyecto
+
+[//]: # "Project goal: provide a brief description of the business need that the project will address or the reason for starting it"
+
+El prósito del proyecto es el desarrollo de un robot móvil terrestre que permita evaluar en un entorno real el funcionamiento de algoritmos de SLAM monocular previamente simulados en un entorno virtual. El sistema físico también permite estudiar optimizaciones del algoritmo orientadas específicamente al sistema embebido y la electrónica utilizada.
+
+Además, el objetivo es brindar una herramienta a Fundación Fulgor escalable a otros grupos de investigación que trabajen sobre temáticas como:
+
+-   el procesamiento digital de la información recibida a través de los sensores del robot
+-   la optimización de algoritmos de navegación autónoma mediante el diseño e implementación de circuitos digitales en FPGA o SoCs.
+-   la aplicación de inteligencia artificial para resolver problemas como la navegación autónoma y la visión artificial del robot
+-   el estudio e implementación de técnicas modernas de fusión sensorial y control sobre el robot
+
+Se propone finalizar el proyecto con un primer prototipo funcional del robot móvil terrestre, con la capacidad de ejecutar una demostración de un algoritmo de SLAM monocular y odometría inercial.
+
+## Alcance del proyecto
+
+[//]: # "Scope description: describe the desired final product, service or result."
+
+El proyecto incluye:
+
+-   El diseño mecánico y fabricación del robot móvil
+-   El estudio del modelo matemático de la configuración de robot seleccionada
+-   La selección y adquisición de los actuadores y sensores del sistema
+-   La selección y adquisión de la fuente de alimentación del sistema
+-   La selección y adquisión del microcontrolador, FPGA o SoC a utilizar como sistema de supervisión y control del robot móvil
+-   El desarrollo de los driver de los actuadores y sensores del sistema
+-   El diseño del sistema de control de los actuadores
+-   La implementación de técnicas de fusión sensorial que permitan adaptar la información obtenida de los sensores al algoritmo de SLAM monocular de un tercero
+-   La capacitación en el framework ROS 2
+-   El desarrollo del software necesario para hacer al sistema compatible con ROS 2
+-   La documentación y comunicación del proyecto
+-   La planificación, coordinación y ejecución de Prácticas Profesionales Supervisadas y Proyecto Final de Estudio del equipo de colaboradores
+
+El proyecto no incluye:
+
+-   El análisis matemático dinámico del robot desarrollado.
+-   El desarrollo de algoritmos de navegación autónoma asociados a la planificación y ejecución de trayectorias del sistema
+-   El desarrollo de un algoritmo nuevo de SLAM, ni su implementación desde cero sobre el sistema.
+-   La optimización de algoritmos de fusión sensorial, de control o de SLAM utilizados
+-   El desarrollo ni la utilización de simulaciones en entornos virtuales del sistema
+-   El diseño y fabricación de una PCB específica para el robot móvil
+-   El diseño y fabricación de brazos manipuladores o herramientas externas al robot móvil
+
+## Supestos del proyecto
+
+[//]: # "Assumptions: explain the key assumptions made that are expected to be true as the work progresses"
+
+En la planificación del proyecto se considera los siguientes supuestos:
+
+-   La adquisición de materiales no tendrá demoras meyores a una semana, asumiendo que el mercado local posee los materiales requeridos para la fabricación del prototipo y que las compras en el exterior serán recibidas en tiempo y forma.
+-   No habrá cambios en el equipo de trabajo en el periodo de tiempo que comprende la planificación del proyecto.
+-   El responsable del proyecto puede dedicar una cantidad mínima de 25 horas semanales a las actividades del plan.
+-   El responsable del proyecto estará ausente durante dos semanas de Julio del año 2023, con fecha a definir.
+-   No habrá cambios en los objetivos principales del proyecto ni nuevos requerimientos funcionales de parte del cliente.
+-   Se dispondrá de documentación sobre la simulación en ROS 2 realizada previamente para la evaluación del algoritmo de SLAM.
+
+## Requerimientos
+
+1. Requerimientos funcionales:
+    1. El movimiento del prototipo desarrollado debe respetar, bajo los correpondientes márgenes de error, el modelo matemático propuesto.
+    2. Los sensores del robot móvil deben ser los necesarios para poder ejecutar un algoritmo de SLAM monocular con odometría inercial.
+    3. El sistema de control de los actuadores debe ser invisible al usuario del robot.
+    4. El sistema de control de los actuadores debe permitir cumplir con las consignas de velocidad que el usuario envíe al robot.
+    5. El sistema desarrollado debe ser compatible con el entorno de trabajo de ROS 2.
+    6. El robot móvil debe soportar comunicación inalámbrica mediante un protocolo a definir, que le permita desplazarse libremente en su entorno.
+    7. El robot móvil debe poseer una fuente de alimentación que le permita desplazarse libremente en su entorno.
+    8. Dado que el usuario trabajará sobre el algoritmo de navegación autónoma del robot móvil, la configuración mecánica del mismo no debe impactar en sus actividades.
+    9. El sistema embebido del robot móvil debe permitir el uso de lógica programable (hardware dedicado) para una futura optimización de los algoritmos de navegación autónoma.
+2. Requerimientos de documentación:
+    1. Documentación del análisis geométrico y cinemático del robot.
+    2. Lista de materiales para fabricación (BOM).
+    3. Planos mecánicos de todas las piezas diseñadas como parte del proyecto.
+    4. Manual de montaje del sistema macánico del robot móvil.
+    5. Documentación técnica y manual de usuario de los drivers del sistema sensorial del robot.
+    6. Documentación técnica y manual de usuario de los drivers de los actuadores del robot.
+    7. Documentación del sistema de control de los actuadores.
+    8. Documentación del sistema de fusión sensorial.
+    9. Lista y documentación ténica de los sensores, actuadores y electrónica utilizada.
+    10. Documentación de la arquitectura de comunicación con ROS 2
+    11. Instrucciones para la integración de módulos desarrollados en la lógica programable en el sistema embebido
+3. Requerimientos de testing:
+4. Requerimientos de la interfaz:
+    1. La interfaz que da al sistema compatibilidad con ROS 2 debe ser parte de los entregables del proyecto
+    2. La interfaz debe permiter la reconfiguración de parámetros del sistema _on-the-fly_
+    3. La interfaz debe permitir la operación remota del robot móvil
+    4. La interfaz debe ofrecer la visualización adecuada de la información necesaria para evaluar el algoritmo se SLAM monocular
+
 ## Entregables principales del proyecto
 
+[//]: # "Deliverables: list and describe all products, services, results that the project work will produce. If there are ambiguities, describe also what is NOT going to be part of the work and final output"
+
 Los entregables del proyecto son:
-- Plataforma de hardware, es decir, un prototipo funcional del robot móvil. Esto incluye tanto electrónica como todos los componentes mecánicos para que el robot se desempeñe cumpliendo los requerimientos funcionales.
-- Documentación del hardware e interconexión de los módulos componentes
-- Código fuente del driver de la IMU
-- Documentación del driver de la IMU
-- Código fuente del driver de la cámara
-- Docummentación del driver de la cámara
-- Código fuente del firmware con el algoritmo de SLAM monocular y micro-ROS
-- Código fuente del agente de ROS 2 utilizado
-- Documentación y manual para configuración y uso del entorno de ROS 2
-- Documentación del estado del arte de SLAM y del algoritmo seleccionado
-- Manual de uso del hardware
-- Informe final
+
+-   Documentación de análisis matemático del robot:
+    -   Documentación del modelo geométrico.
+    -   Documentación del modelo cinemático.
+-   Estructura mecánica del robot:
+    -   Primer prototipo fabricado y funcional.
+    -   Lista de materiales para fabricación (BOM).
+    -   Archivos con modelos mecánicos para fabricación aditiva (impresión 3D).
+    -   Planos mecánicos de las piezas diseñadas.
+    -   Documento con instrucciones para el montaje.
+-   Sistema sensorial del robot:
+    -   Módulos con los sensores seleccionados.
+    -   Diagrama de conexión de los sensores.
+    -   Especificación técnica de los sensores.
+    -   Software/hardware driver desarrollado para los sensores.
+    -   Software/hardware con algoritmo de fusión sensorial.
+    -   Documentación técnica y manual de usuario de los drivers.
+    -   Documentación del algoritmo de fusión sensorial,
+-   Sistema motor del robot móvil:
+    -   Actuadores seleccionados.
+    -   Diagrama de conexión de los actuadores.
+    -   Especificación técnica de los actuadores.
+    -   Software/hardware driver desarrollado para los actuadores.
+    -   Software/hardware con sistema de control de los actuadores.
+    -   Documentación técnica y manual de usuario de los drivers.
+    -   Documentación del sistema de control de los actuadores.
+-   Sistema de supervisión y control embebido:
+    -   Especificación técnica del sistema embebido seleccionado.
+    -   Software/hardware supervisor del robot.
+    -   Documentación sobre el sistema operativo utilizado.
+    -   Documentación de la arquitectura del sistema.
+    -   Documentación sobre comunicación con ROS 2.
+    -   Especificación de Requerimientos de Software (ERS)
+-   Sistema de alimentación del robot
+    -   Especificación técnica de la fuente de alimentación seleccionada.
+    -   Diagrama de conexión de la fuente de alimentación.
+-   Sistema de señalización e interacción física:
+    -   Selección de elementos de señalización e interacción física y retroalimentación al usuario.
+    -   Software/ hardware del sistema de señalización e interacción física.
+    -   Documentación del sistema de señalización e interacción física.
+    -   Diagrama de conexión del sistema de señalización e interacción física con el sistema embebido.
+-   Agente de ROS 2 ejemplo:
+    -   Software de agente ROS 2 ejemplo para interacción con el sistema.
+    -   Documentación sobre configuración y uso del agente de ROS 2 ejemplo.
+-   Informe final
 
 ## Desglose del trabajo en tareas
 
-1. Planificación del proyecto (70 h)
-    1. Identificación y contacto con los interesados (7 h)
-    2. Definición del propósito y alcance del proyecto (10 h)
-    3. Definición de los requerimientos y entregables (20 h)
-    4. Desglose del trabajo en tareas y obtención del diagrama de Gantt (20 h)
-    5. Análisis de riesgos, gestión de calidad y definición de procesos de cierre (13 h)
-2. Definición técnica del robot móvil a diseñar
-    1. Investigación del estado del arte de la robótica móvil
-    2. Selección del tipo de robot móvil a desarrollar
-    3. Descripción matemática del robot seleccionado
-2. [Selección y documentación del hardware necesario]({% post_url 2023-12-30-hardware-selection %})
-2. Diseño y fabricación del prototipo mecánico
-    1. Diseño mecánico del chasis del prototipo de robot móvil mediante herramienta CAD.
-    2. Adquisición de elementos mecánicos necesarios para la manufactura del prototipo como tornillos, tuercas, filamento plástico para impresión 3D y otros.
-    3. Fabricación mediante impresión 3D.
-    4. Montaje del prototipo mecánico y iteración para corregir errores de ser necesario.
-2. Setup del entorno de trabajo para desarrollo del software necesario (5 h)
-3. Implementación de micro-ROS en el sistema embebido (18 h)
-    1. [Introducción a micro-ROS]({% post_url 2023-05-12-microROS-and-ROS-2 %}) (4 h)
-    2. Incorporación de micro-ROS en el microcontrolador (8 h)
-    3. Setup de agente de ROS 2 y comunicación con el sistema embebido (2 h)
-    4. Documentación del proceso (4 h)
-4. Desarrollo de driver para la IMU (40 h)
-    1. Selección y adquisición de la IMU a utilizar (2 h)
-    2. Implementación de driver en lenguaje C para el sistema embebido (30 h)
-    3. Documentación del driver (8 h)
-5. Integración de la IMU en el sistema (60 h)
-    1. Integración del driver de la IMU con el sistema con micro-ROS (4 h)
-    2. Repaso (e investigación) de técnicas de fusión sensorial (8 h)
-    3. Implementación de algoritmos de fusión sensorial (30 h)
-    4. Visualizacion de la información obtenida con la IMU mediante las herramientas de ROS 2 (10 h)
-    5. Evaluación parcial y documentación de resultados (milestone) (8 h)
-6. Desarrollo de driver para la cámara (53 h)
-    1. Selección y adquisación de cámara a utilizar (3 h)
-    2. Implementación de driver en lenguaje C para el sistema embebido (40 h)
-    3. Documentación del driver (10 h)
-7. Integración de la cámara en el sistema (26 h)
-    1. Integración del driver de la cámara con el sistema con micro-ROS (6 h)
-    2. Visualización de la información obtenida con la cámara mediante las herramientas de ROS 2 (12 h)
-    3. Evaluación parcial y documentación de resultados (milestone) (8 h)
-8. Implementación de algoritmo de SLAM monocular (305 h)
-    1. Introducción a la navegación inercial y SLAM monocular, investigación de estado del arte (15 h)
-    2. Investigación de algoritmos de SLAM monocular y selección de uno de ellos (30 h)
-    3. Implementación del algoritmo seleccionado en un entorno de simulación (40 h)
-    4. Optimización del algoritmo implementado en el entorno de simulación (40 h)
-    5. Evaluación integral de los componentes del sistema (20 h)
-    6. Implementación del algoritmo seleccionado en el sistema embebido (40 h)
-    7. Optimización del algoritmo implementado en el sistema embebido (40 h)
-    8. Evaluación final de resultados (milestone) (40 h)
-    9. Documentación técnica del algoritmo sleccionado y resumen del estado del arte (40 h)
-9. Proceso de cierre (91 h)
-    1. Análisis de cumplimiento de objetivos y requerimientos con el director (2 h)
-    2. Análisis de cumplimiento del plan original (diagrama de Gantt) (2 h)
-    3. Análisis de cumplimiento de objetivos y requerimientos con el cliente (2 h)
+1. Planificación del proyecto.
+    1. Identificación y contacto con los interesados.
+    2. Definición del propósito y alcance del proyecto.
+    3. Definición de los requerimientos y entregables.
+    4. Desglose del trabajo en tareas y obtención del diagrama de Gantt.
+    5. Análisis de riesgos, gestión de calidad y definición de procesos de cierre.
+2. Investigación del estado del arte de la odometría visual-inercial y SLAM monocular.
+3. Configuración de herramientas y entorno de trabajo.
+    1. Configuración de herramientas para la gestión del proyecto y la coordinación del equipo de trabajo (ej. Jira).
+    2. Creación y configuración de la estructura de repositorios del proyecto donde se mantendrá el software y documentación producido.
+    3. Setup del entorno de trabajo para desarrollo del software necesario.
+4. Definición técnica del robot móvil a diseñar.
+    1. Investigación del estado del arte de la robótica móvil.
+    2. Selección del tipo de robot móvil a desarrollar.
+    3. Descripción matemática del robot seleccionado.
+    4. Documentación del análisis matemático del robot.
+5. Diseño y fabricación del prototipo mecánico.
+    1. Diseño mecánico del robot móvil mediante herramienta CAD.
+    2. Adquisición de elementos mecánicos necesarios para la manufactura del prototipo.
+    3. Producción de piezas mecánicas mediante fabricación aditiva.
+    4. Montaje del prototipo fabricado.
+    5. Iteración para corrección de errores.
+    6. Generación de planos mecánicos de las piezas diseñadas.
+    7. Generación de la lista de materiales (BOM) para la construcción del prototipo.
+    8. Generación de manual de instrucciones para el montaje.
+6. Diseño del sistema sensorial del robot móvil.
+    1. Selección y adquisición de la IMU.
+    2. Conexión de la IMU al sistema embebido.
+    3. Desarrollo de software driver de la IMU sobre el microcontrolador.
+    4. Adquisición de datos obtenidos con la IMU desde el sistema ROS 2.
+    5. Integración del driver de la IMU con el algoritmo de fusión sensorial.
+    6. Migración del driver de la IMU para el microcontrolador al SoC.
+    7. Generación de documentación del driver de la IMU.
+    8. Selección y adquisión de cámara digital.
+    9. Conexión de la cámara digital al sistema embebido.
+    10. Desarrollo del software driver de la cámara digital sobre el microcontrolador.
+    11. Adquisición de datos obtenidos con la cámara digital desde el sistema ROS 2.
+    12. Investigación y selección de técnica de fusión sensorial.
+    13. Implementación del algoritmo de fusión sensorial seleccionado.
+    14. Migración del driver de la cámara digital para el microcontrolador al SoC.
+    15. Generación de documentación del driver de la cámara digital.
+    16. Generación de diagramas de conexión de la IMU, la cámara digital y el sistema embebido.
+7. Diseño del sistema motor del robot móvil.
+    1. Selección y adquisición de los actuadores y drivers de potencia.
+    2. Conexión de los actuadores y drivers al sistema embebido.
+    3. Desarrollo de software driver de los actuadores sobre el microcontrolador.
+    4. Diseño del sistema de control de los actuadores.
+    5. Integración del driver de los actuadores con el sistema de control de los mismos.
+    6. Control y monitoreo de los actuadores desde el sistema ROS 2.
+    7. Migración del driver de los actuadores para microcontrolador al SoC.
+    8. Migración del sistema de control de los actuadores al SoC.
+    9. Generación de documentación del driver de los actuadores.
+    10. Generación de docuemtnación del sistema de control de los actuadores.
+    11. Generación de diagramas de conexión de los actuadores, sus drivers y el sistema embebido.
+8. Diseño del sistema de supervisión y control embebidos.
+    1. Elaboración del documento de Especificación de Requerimientos de Software (ERS)
+    2. Diseño de la arquitectura del sistema supervisor.
+    3. Selección y adquisición del microcontrolador (placa de desarrollo) a utilizar.
+    4. Selección e incorporación del sistema operativo de tiempo real a utilizar (o selección de modalidad _bare metal_).
+    5. Implementación del sistema supervisor en el microcontrolador.
+    6. Integración del sistema sensorial en el sistema supervisor.
+    7. Integración del sistema motor en el sistema supervisor.
+    8. Capacitación sobre el uso de ROS 2 en sistemas embebidos.
+    9. Implementación de interfaz del sistema supervisor con el agente de ROS 2.
+    10. Selección y adquisición del SoC (placa de desarrollo) a utilizar.
+    11. Migración del sistema supervisor al SoC.
+    12. Documentación de la arquitectura del sistema supervisor.
+9. Diseño del sistema de alimentación
+    1. Selección y adquisición de la fuente de alimentación.
+    2. Conexión de la fuente de alimentación al sistema.
+    3. Documentación del sistema de alimentación.
+    4. Generación de diagramas de conexión de la fuente de alimentación y el sistema embebido.
+10. Diseño del sistema de señalización e interacción física.
+    1. Diseño de señales e interacción del sistema con usuario y su significado.
+    2. Selección de elementos que brindarán las señales y la posibilidad de interacción con el sistema.
+    3. Conexión de los elementos de señalización e interacción física con el sistema embebido.
+    4. Desarrollo de software para el sistema de señalización e interacción física.
+    5. Integración del sistema de señalización e interacción física con el sistema supervisor.
+    6. Migración del sistema de señalización e interacción física al SoC.
+    7. Generación de documentación del sistema de señalización e interacción física.
+    8. Generación de diagramas de conexión del sistema de señalización e interacción física y el sistema embebido.
+11. Desarrollo de agente de ROS 2 ejemplo.
+    1. Setup de agente de ROS 2 y comunicación con el sistema embebido
+    2. Generación de documentación sobre la configuración y uso del agente.
+12. Proceso de cierre
+    1. Análisis de cumplimiento de objetivos y requerimientos con el director
+    2. Análisis de cumplimiento del plan original (diagrama de Gantt)
+    3. Análisis de cumplimiento de objetivos y requerimientos con el cliente
     4. Capacitación del cliente sobre el prototipo realizado
-    5. Elaboración de memoria técnica (40 h)
-    6. Corrección de memoria técnica (20 h)
-    7. Preparación de defensa pública (20 h)
-    8. Defensa pública (2 h)
-    9. Reunión de cierre con el director (1 h)
-    10. Reunión de cierre con el cliente y el equipo de trabajo (2 h)
+    5. Elaboración de memoria técnica
+    6. Corrección de memoria técnica
+    7. Preparación de defensa pública
+    8. Defensa pública
+    9. Reunión de cierre con el director
+    10. Reunión de cierre con el cliente y el equipo de trabajo
 
-Cantidad total de horas: 668 h
+Cantidad total de horas: \_\_\_
 
 ## Diagrama de Activity On Node
 
-Las tareas expuestas en el diagrama de *Activity On Node*, se encuentran detalladas en la siguiente tabla, con su código, duración y tareas predecesoras.
+Las tareas expuestas en el diagrama de _Activity On Node_, se encuentran detalladas en la siguiente tabla, con su código, duración y tareas predecesoras.
+
+| Código | Predecesora | Descripción                | Duración | Asignado          |
+| ------ | ----------- | -------------------------- | -------- | ----------------- |
+| 1      |             | Planificación del proyecto | 70 h     | Gonzalo Fernandez |
+
+## Gestión de riesgos
 
-| Código | Predecesora | Descripción | Duración |
-|--------|-------------|-------------|----------|
-| 1 | | Planificación del proyecto | 70 h |
+[//]: # "Challenges / Constraints: briefly explain the key limitations of the project and how will they be managed."
 
+1. Identificación de los riesgos y estimación de sus consecuencias
+2. Tabla de gestión de riesgos
+3. Plan de mitigación de los riesgos que exceden el RPN máximo establecido
+
+## Gestión de calidad
+
+[//]: # "Acceptance criteria: explain what are the success factors required, to acquire the approval for completing the project at the end. Specify who will be the Approver"
 
 ## Proceso de cierre
 
 Una vez finalizado el proyecto se realizarán las siguientes actividades:
 
-- Análisis del grado de cumplimiento de los objetivos y requerimientos junto con el Dr. Ing. Fabio Ardiani.
-- Análisis de cumplimiento de la versión original del plan de trabajo, contrastando el registro de actividades realizadas con el diagrama de Gantt original.
-- Análisis del grado de cumplimiento de los objetivos y requerimientos junto con el cliente, el Ing. Leandro Borgnino.
-- Elaboración de un documento con todos los problemas que surgieron durante el desarrollo del proyecto y las soluciones encontradas.
-- Elaboración de un documento con las actividades que no se alcanzaron a realizar en el tiempo estimado y todas aquellas actividades realizadas que no se contemplaron en el plan original.
-- Elaboración de un documento con el trabajo a futuro, que sirva como base de un plan de proyecto que continue la misma línea de investigación y desarrollo.
-- Defensa pública del proyecto por parte del responsable.
-- Reunión privada con el equipo de trabajo para compartir *feedback* sobre la experiencia obtenida en el lapso del proyecto.
-- Reunión virtual, organizada por el responsable, con el Dr. Ing. Fabio Ardiani como acto de agradecimiento.
-- Reunión con el Ing. Leandro Borgnino y el equipo de trabajo, organizada por el responsable, para dar un cierre al proyecto y evaluar los próximos proyectos y actividades a realizar en conjunto.
-
+-   Análisis del grado de cumplimiento de los objetivos y requerimientos junto con el Dr. Ing. Fabio Ardiani.
+-   Análisis de cumplimiento de la versión original del plan de trabajo, contrastando el registro de actividades realizadas con el diagrama de Gantt original.
+-   Análisis del grado de cumplimiento de los objetivos y requerimientos junto con el cliente, el Ing. Leandro Borgnino.
+-   Elaboración de un documento con todos los problemas que surgieron durante el desarrollo del proyecto y las soluciones encontradas.
+-   Elaboración de un documento con las actividades que no se alcanzaron a realizar en el tiempo estimado y todas aquellas actividades realizadas que no se contemplaron en el plan original.
+-   Elaboración de un documento con el trabajo a futuro, que sirva como base de un plan de proyecto que continue la misma línea de investigación y desarrollo.
+-   Defensa pública del proyecto por parte del responsable.
+-   Reunión privada con el equipo de trabajo para compartir _feedback_ sobre la experiencia obtenida en el lapso del proyecto.
+-   Reunión virtual, organizada por el responsable, con el Dr. Ing. Fabio Ardiani como acto de agradecimiento.
+-   Reunión con el Ing. Leandro Borgnino y el equipo de trabajo, organizada por el responsable, para dar un cierre al proyecto y evaluar los próximos proyectos y actividades a realizar en conjunto.
diff --git a/_posts/2023-05-12-microROS-and-ROS-2.md b/_posts/2023-05-12-microROS-and-ROS-2.md
index b8fea769a78..7f9b0630d0b 100644
--- a/_posts/2023-05-12-microROS-and-ROS-2.md
+++ b/_posts/2023-05-12-microROS-and-ROS-2.md
@@ -33,4 +33,4 @@ La herramienta micro-ROS es una implementación de ROS 2 diseñada especı́fica
 
 Como puede observarse en la figura 2, micro-ROS proporciona una capa de abstracción que permite la comunicación entre los sistemas embebidos y los nodos de ROS 2 en otros sistemas. Esto significa que los desarrolladores pueden crear sistemas robóticos distribuidos, que utilicen tanto sistemas embebidos como sistemas de propósito general y que todos ellos puedan comunicarse a través de la misma plataforma.
 
-![micro-ROS architecture](/assets/images/micro-ROS_architecture.png)
\ No newline at end of file
+![micro-ROS architecture](/assets/images/micro-ROS_architecture.png)
diff --git a/_posts/2023-12-30-hardware-selection.md b/_posts/2023-12-30-hardware-selection.md
index b37a77476c4..225ca1dab1d 100644
--- a/_posts/2023-12-30-hardware-selection.md
+++ b/_posts/2023-12-30-hardware-selection.md
@@ -25,19 +25,18 @@ sidebar: []
 
 ## Z7-Lite 7020
 
-- FPGA Chip XC7Z010CLG400-1
-- Dual-core Cortex-A9 clocked at 667MHz
-- 85k logic cells
-- DDR3 4Gbit 1066Mbps
-- The USBJTAG circuit is carried, and no additional downloader is needed to download the program and simulation online
-- OSPI Flash of 128Mbit, suitable for storing ZYNQ system boot image files and user data
-- One channel HDMI transmitter,  also configurable as HDMI receiver
-- 10/100M self-adaptive Ethernet all the way, which can be used for network communication or related applications
-- One USB Host
-- One SD card to store the ZYNQ system startup image file and file system
-- One USB-UART connection for communication between ZYNQ and PC
-- PS Clock 33.3333MHz PL Clock 50MHz
-- One PS button, two PL buttons
-- One PS LED, two PL LEDs
-- Two 40-pin 2.54mm pitch expansion port, 72 IOs, coltage 3.3V
-
+-   FPGA Chip XC7Z010CLG400-1
+-   Dual-core Cortex-A9 clocked at 667MHz
+-   85k logic cells
+-   DDR3 4Gbit 1066Mbps
+-   The USBJTAG circuit is carried, and no additional downloader is needed to download the program and simulation online
+-   OSPI Flash of 128Mbit, suitable for storing ZYNQ system boot image files and user data
+-   One channel HDMI transmitter, also configurable as HDMI receiver
+-   10/100M self-adaptive Ethernet all the way, which can be used for network communication or related applications
+-   One USB Host
+-   One SD card to store the ZYNQ system startup image file and file system
+-   One USB-UART connection for communication between ZYNQ and PC
+-   PS Clock 33.3333MHz PL Clock 50MHz
+-   One PS button, two PL buttons
+-   One PS LED, two PL LEDs
+-   Two 40-pin 2.54mm pitch expansion port, 72 IOs, coltage 3.3V
diff --git a/_posts/2023-12-30-wheeled-mobile-robot-design.md b/_posts/2023-12-30-wheeled-mobile-robot-design.md
index d7d5ac0e8cb..0d0dd1e21d2 100644
--- a/_posts/2023-12-30-wheeled-mobile-robot-design.md
+++ b/_posts/2023-12-30-wheeled-mobile-robot-design.md
@@ -33,11 +33,11 @@ Wheeled robots comprise one or more driven wheels and haave optional passive or
 
 The design on the left-hand side of the figure has a single driven wheel that is also steered. It requires two motors, one for driving the wheel and one for turning. A disadvantage of this design is that the robot cannot turn on the spot, since the driven wheel is not located at its center. Therefore, the trajectory planning can be more complex than the one for a different configuration.
 
-The robot design in the middle is called *differential drive* and is one of the most commonly used mobile robot designs. The combination of two driven wheels allows the robot to be driven straight, in a curve, or to turn on the spot. Another advantage of this design is that motors and wheels are in fixed positions and do not need to be turned as in the previous design. This simplifies the robot mechnics considerably.
+The robot design in the middle is called _differential drive_ and is one of the most commonly used mobile robot designs. The combination of two driven wheels allows the robot to be driven straight, in a curve, or to turn on the spot. Another advantage of this design is that motors and wheels are in fixed positions and do not need to be turned as in the previous design. This simplifies the robot mechnics considerably.
 
-Finally, on the right-hand side of the figure is the so-called *Ackermann Steering*, which is the standard drive and steering system of a rear-driven passenger car. It has one motor for driving both rear wheels via a differential box and one motor for combined steering of both front wheels.
+Finally, on the right-hand side of the figure is the so-called _Ackermann Steering_, which is the standard drive and steering system of a rear-driven passenger car. It has one motor for driving both rear wheels via a differential box and one motor for combined steering of both front wheels.
 
-A special case of a wheeled robot is the omni-directional *Mecanum drive* robot, but it is discarded due to the cost and accesibility of such wheels.
+A special case of a wheeled robot is the omni-directional _Mecanum drive_ robot, but it is discarded due to the cost and accesibility of such wheels.
 
 One disadvantage of all wheeled robots is that they require a flat surface for driving. Tracked robots are more flexible and can navigate over rough terrain. The main disadvantage, and the reason for not being considered for the project, is that they cannot navigate as accurately as a wheeled robot.
 
@@ -52,9 +52,10 @@ DC electric motors are arguably the most commonly used method for locomotion in
 ![Motor-encoder combination](/assets/images/motor-encoder-combination.png)
 
 The first step when building robot hardware is to select the appropiate motor system. For this project, the DC motor available is an encapsulated motor combination comprising a:
-- DC motor
-- Gearbox
-- Magnetic encoder (dual phase-shifted encoders for detection of speed and direction)
+
+-   DC motor
+-   Gearbox
+-   Magnetic encoder (dual phase-shifted encoders for detection of speed and direction)
 
 Using encapsulated motor systems has the advantage that the solution is much smaller that that using separate modules, plus the system is dust-proof. The disadvantage of using a fixed assembly like this is that the gear ratio may only be changed with difficulty, or not at all. In the worst case, a new motor/gearbox/encoder combination has to be acquired.
 
@@ -66,18 +67,18 @@ The following figure illustrates a linear model for the DC motor:
 
 The following table contains a list for all relevant variables and constant values:
 
-| Symbol | Description | Units | Symbol | Description | Units |
-|--------|-------------|-------|--------|-------------|-------|
-| $\theta$ | Angular position os shaft | $rad$ | $R$ | Nominal terminal resistance | $\Omega$ |
-| $\omega$ | Angular shaft velocity | $\frac{rad}{s}$ | $L$ | Rotor inductance | $H$ |
-| $\alpha$ | Angular shaft acceleration | $\frac{rad}{s^2}$ | $J$ | Rotor inertia | $kg\cdot{} m^2$ |
-| $i$ | Current through armature | $A$ | $K_f$ | Frictional constant | $\frac{N\cdot{} m\cdot{} s}{rad}$ |
-| $V_a$ | Applied terminal voltage | $V$ | $K_m$ | Torque constant | $\frac{N\cdot() m}{A}$ |
-| $V_e$ | Back *emf* voltage | $V$ | $K_e$ | Back *emf* constant | $\frac{V\cdot() s}{rad}$ |
-| $\tau_m$ | Motor torque | $N\cdot{} m$ | $K_s$ | Speed constant | $\frac{rad}{V\cdot() s}$ |
-| $\tau_a$ | Applied torque (load) | $N\cdot{} m$ | $K_r$ | Regulation constant | $\frac{V\cdot() s}{rad}$ |
+| Symbol   | Description                | Units             | Symbol | Description                 | Units                             |
+| -------- | -------------------------- | ----------------- | ------ | --------------------------- | --------------------------------- |
+| $\theta$ | Angular position os shaft  | $rad$             | $R$    | Nominal terminal resistance | $\Omega$                          |
+| $\omega$ | Angular shaft velocity     | $\frac{rad}{s}$   | $L$    | Rotor inductance            | $H$                               |
+| $\alpha$ | Angular shaft acceleration | $\frac{rad}{s^2}$ | $J$    | Rotor inertia               | $kg\cdot{} m^2$                   |
+| $i$      | Current through armature   | $A$               | $K_f$  | Frictional constant         | $\frac{N\cdot{} m\cdot{} s}{rad}$ |
+| $V_a$    | Applied terminal voltage   | $V$               | $K_m$  | Torque constant             | $\frac{N\cdot() m}{A}$            |
+| $V_e$    | Back _emf_ voltage         | $V$               | $K_e$  | Back _emf_ constant         | $\frac{V\cdot() s}{rad}$          |
+| $\tau_m$ | Motor torque               | $N\cdot{} m$      | $K_s$  | Speed constant              | $\frac{rad}{V\cdot() s}$          |
+| $\tau_a$ | Applied torque (load)      | $N\cdot{} m$      | $K_r$  | Regulation constant         | $\frac{V\cdot() s}{rad}$          |
 
-A voltage $V_a$ is applied to the terminals of the motor, which generates a current i in the motor armature. The torque $\tau_m$ produced by the motor is proportional to the current, and $K_m$ is the motor's *torque constant*:
+A voltage $V_a$ is applied to the terminals of the motor, which generates a current i in the motor armature. The torque $\tau_m$ produced by the motor is proportional to the current, and $K_m$ is the motor's _torque constant_:
 
 $$
 \tau_m = K_m \cdot{} i
@@ -107,7 +108,7 @@ $$
 \eta = \frac{P_o}{P_i} = \frac{\tau_a \omega}{V_a i}
 $$
 
-The efficiency is not constant for all speeds, which needs to be kept in mind if the application requires operation at different speed ranges. The electrical system of the motor can be modelled by a resistor-inductor pair in series with a voltage $V_{emf}$, which corresponds to the *back electromotive force*. This voltage can be approximated as a linear function of the shaft velocity; $K_e$ is referred to as the *back-emf constant*:
+The efficiency is not constant for all speeds, which needs to be kept in mind if the application requires operation at different speed ranges. The electrical system of the motor can be modelled by a resistor-inductor pair in series with a voltage $V_{emf}$, which corresponds to the _back electromotive force_. This voltage can be approximated as a linear function of the shaft velocity; $K_e$ is referred to as the _back-emf constant_:
 
 $$
 V_e = K_e \cdot{} \omega
@@ -124,23 +125,25 @@ $$
 $$
 
 ## DC motor driver selection: H-bridge
-For most applications we want to be able to do two things with a motor:
 
-- Run it in a forward and backward directions.
-- Modify its speed.
+For most applications we want to be able to do two things with a motor:
 
+-   Run it in a forward and backward directions.
+-   Modify its speed.
 
 ## Pulse Width Modulation
+
 Pulse width modulation (PWM) is a method for avoiding analog power circuitry by utilizing the fact that mechanical systems have a certain latency. Instead of generating an analog output signal with a voltage proportional to the desired motor speed, it is sufficient to generate digital pulses at the full system voltage level (for example 5V).
 
-By varying the pulse width, we also change the equivalent or effective analog motor signal and therefore control the motor speed. One could say that the motor system behaves like an integrator of the digital input impulses over a certain time span. The quotient $\frac{t_{on}}{t_{period}}$ is called the *pulse-width ratio* or *duty cycle*.
+By varying the pulse width, we also change the equivalent or effective analog motor signal and therefore control the motor speed. One could say that the motor system behaves like an integrator of the digital input impulses over a certain time span. The quotient $\frac{t_{on}}{t_{period}}$ is called the _pulse-width ratio_ or _duty cycle_.
 
 ### Motor calibration
+
 Motor calibration is done by measuring the motor speed ar various settings between 0 and 100, and the entering the PW ratio required to achieve the desired actual speed in a motor calibration table.
 
 Motor calibration is especially important for robots with differential drive, because in these configurations normally one motor runs forward and one backward, in order to drive the robot. Many DC motors exhibit some differences in speed versus PW ratio between forward and backward direction. This can be eliminated by using motor calibration.
 
 ## Next steps
 
-- [ ] Get PWM example with Verilog/Vivado behavioral simulation
-- [ ] Get plots of motor shaft speed over time and angular velocity vs PW ratio (duty cycle %). Step response
\ No newline at end of file
+-   [ ] Get PWM example with Verilog/Vivado behavioral simulation
+-   [ ] Get plots of motor shaft speed over time and angular velocity vs PW ratio (duty cycle %). Step response
diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss
index 418b4f372cd..6cdd83e04e9 100644
--- a/_sass/misc/article-menu.scss
+++ b/_sass/misc/article-menu.scss
@@ -3,59 +3,62 @@
  */
 
 .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: $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;
-        }
-      }
+    padding-left: 20px;
+    min-width: 200px;
+    max-width: 230px;
 
-      a {
-        display: flex;
-        padding: 2px 8px;
-        color: darken($text-color, 10%);
+    .post-menu-title {
+        font-size: $base-font-size * 1.5;
+        margin-bottom: 14px;
+        font-weight: 600;
+    }
 
-        * {
-          pointer-events: none;
-        }
+    .post-menu-content {
+        ul {
+            border-left: 1px solid #e9ecef;
+            $indent: calc($base-font-size / 4);
+            $active-bgcolor: #ecebec;
 
-        &:hover {
-          text-decoration: none;
-          color: lighten($text-color, 30%)!important;
-        }
-      }
+            @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;
+                }
+            }
 
-      .active {
-        background-color: $active-bgcolor;
-        transition: background 0.5s;
-        border-left: 2px solid #202020;
-        margin-left: -2px;
+            a {
+                display: flex;
+                padding: 2px 8px;
+                color: darken($text-color, 10%);
 
-        &:hover {
-          background-color: lighten($active-bgcolor, 2%);
-        }
+                * {
+                    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;
+                a {
+                    color: #121416;
+                }
+            }
         }
-      }
     }
-  }
 }
diff --git a/_sass/misc/click-to-top.scss b/_sass/misc/click-to-top.scss
index 56b67cf62a1..2e86af69320 100644
--- a/_sass/misc/click-to-top.scss
+++ b/_sass/misc/click-to-top.scss
@@ -1,46 +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;
+    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;
-  }
+    @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);
+    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;
-  }
+    .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;
-  }
+    .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
index a763b661f89..9de8fc9f103 100644
--- a/_sass/misc/common-list.scss
+++ b/_sass/misc/common-list.scss
@@ -2,44 +2,44 @@
  * Common list
  */
 .common-list {
-  @include relative-font-size(1.0);
-  min-width: 200px;
+    @include relative-font-size(1);
+    min-width: 200px;
 
-  ul {
-    list-style: none;
-    margin: 0;
-  }
+    ul {
+        list-style: none;
+        margin: 0;
+    }
 
-  li {
-    border-bottom: solid 1px #00000018;
+    li {
+        border-bottom: solid 1px #00000018;
 
-    &:last-child {
-      border-bottom: none;
-    }
+        &: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;
+        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%);
-      }
-    }
+            &: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;
+        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
index 6226e42ef14..682e0146e58 100644
--- a/_sass/misc/gitment.scss
+++ b/_sass/misc/gitment.scss
@@ -1,16 +1,17 @@
 .gitment-container {
-  color: #787878 !important;
+    color: #787878 !important;
 }
 
 .gitment-editor-header {
-  background-color: #fefefe;
+    background-color: #fefefe;
 }
 
-.gitment-comment-main, .gitment-editor-main {
-  background-color: #fff;
-  border-radius: 3px !important;
+.gitment-comment-main,
+.gitment-editor-main {
+    background-color: #fff;
+    border-radius: 3px !important;
 }
 
 .gitment-heart-icon {
-  fill: #ff0808;
+    fill: #ff0808;
 }
diff --git a/_sass/misc/google-translate.scss b/_sass/misc/google-translate.scss
index 04fe567162d..3d958ca7264 100644
--- a/_sass/misc/google-translate.scss
+++ b/_sass/misc/google-translate.scss
@@ -1,196 +1,194 @@
 /* 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;
+    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;
+        }
     }
-    /* 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;
+    div.goog-te-gadget {
+        display: inline;
+        font-size: 0;
+    }
 
-    @extend %goog-te-menu;
-  }
+    div[id=":0.targetLanguage"] {
+        display: inline;
+    }
 
-  a.goog-logo-link {
-    display: none;
-  }
+    div.goog-te-gadget-simple {
+        border: none;
+        background-color: transparent;
 
-  .goog-te-gadget-icon {
-    display: none !important;
-    /*background: url("url for the icon") 0 0 no-repeat !important;*/
-  }
+        @extend %goog-te-menu;
+    }
 
-  a.goog-te-menu-value {
-    margin: 0;
+    a.goog-logo-link {
+        display: none;
+    }
 
-    span:first-child {
-      display: none;
+    .goog-te-gadget-icon {
+        display: none !important;
+        /*background: url("url for the icon") 0 0 no-repeat !important;*/
     }
 
-    &:before {
-      content: "\f1ab  \f0d7";
-      font-family: FontAwesome;
-      font-size: initial;
-      color: #fefefe;
-      border: 1px solid #fefefe85;
-      border-radius: 3px;
-      padding: 3px 6px;
+    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;
+    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;
+    display: none !important;
+    border: none;
+    box-shadow: 0 0;
+    -webkit-box-shadow: 0 0;
 }
 
 body {
-  top: 0px !important;
+    top: 0px !important;
 }
 
 /* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */
 
-
 // Main look
 
 .ct-language-selected {
-  background-color: darken($theme-color, 5%) !important;
+    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;
+    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, 0.04);
+        }
+
+        a {
+            display: block;
+            color: invert($theme-color);
+
+            img {
+                width: 24px;
+                max-height: 24px;
+                border: none;
+            }
+        }
+
+        &:hover {
+            @extend .ct-language-selected;
+        }
     }
-
-    &: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;
+    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);
+    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, 0.06);
+        }
     }
-  }
 
-  &:before {
-    content: "\f1ab  \f0d7";
-    font-family: FontAwesome;
-  }
+    &:before {
+        content: "\f1ab  \f0d7";
+        font-family: FontAwesome;
+    }
 }
-
diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss
index 4b79078a6b0..8797dbe3d0c 100644
--- a/_sass/misc/theme-toggle.scss
+++ b/_sass/misc/theme-toggle.scss
@@ -1,84 +1,85 @@
 .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);
+    position: relative;
+    width: $base-font-size * 7.65;
+    margin-top: 10px;
+    margin-right: 60px;
+    margin-left: auto;
+    transition: 0.3s cubic-bezier(0.4, 0.03, 0, 1);
 
-  label, .toggle {
-    border-radius: 100px;
-  }
+    label,
+    .toggle {
+        border-radius: 100px;
+    }
 
-  label {
-    display: block;
-    background-color: rgba(120,120,120,.15);
-    cursor: pointer;
-  }
+    label {
+        display: block;
+        background-color: rgba(120, 120, 120, 0.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);
-  }
+    .toggle {
+        position: absolute;
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
+        transition: transform 0.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 {
+        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;
-  }
+    .names p {
+        margin-bottom: 0;
+        line-height: 24px;
+        opacity: 0.5;
+    }
 
-  label .light {
-    color: #868686;
-    margin-left: -0.2em;
-  }
+    label .light {
+        color: #868686;
+        margin-left: -0.2em;
+    }
 
-  label .dark {
-    color: #b9b9b9;
-  }
+    label .dark {
+        color: #b9b9b9;
+    }
 
-  [type="checkbox"] {
-    display: none;
-  }
+    [type="checkbox"] {
+        display: none;
+    }
 
-  /* Toggle */
-  [type="checkbox"]:checked ~ label .toggle {
-    transform: translateX(100%);
-    background-color: #34323D;
-  }
+    /* Toggle */
+    [type="checkbox"]:checked ~ label .toggle {
+        transform: translateX(100%);
+        background-color: #34323d;
+    }
 
-  [type="checkbox"]:checked ~ label .dark {
-    color: #ddd;
-  }
+    [type="checkbox"]:checked ~ label .dark {
+        color: #ddd;
+    }
 
-  [type="checkbox"]:checked ~ label .light {
-    color: #ccc;
-  }
+    [type="checkbox"]:checked ~ label .light {
+        color: #ccc;
+    }
 
-  @include media-query(1024px) {
-    margin-right: 35px;
-  }
+    @include media-query(1024px) {
+        margin-right: 35px;
+    }
 
-  @include media-query($on-palm) {
-    width: $base-font-size * 6.65;
-    margin-right: 20px;
+    @include media-query($on-palm) {
+        width: $base-font-size * 6.65;
+        margin-right: 20px;
 
-    .names {
-      font-size: .85em;
+        .names {
+            font-size: 0.85em;
+        }
     }
-  }
 }
diff --git a/_sass/yat.scss b/_sass/yat.scss
index 3bbc2128b36..ce82bbb75d1 100644
--- a/_sass/yat.scss
+++ b/_sass/yat.scss
@@ -2,21 +2,25 @@
 
 // Define defaults for each variable.
 
-$base-font-family: Helvetica Neue, Helvetica, Arial, sans-serif, !default;
+$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;
+$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;
+$spacing-unit: 30px !default;
 
-$text-color:       #1d1d1f !default;
+$text-color: #1d1d1f !default;
 $background-color: #fff !default;
 
-$grey-color:       #777 !default;
+$grey-color: #777 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
-$grey-color-dark:  darken($grey-color, 25%) !default;
+$grey-color-dark: darken($grey-color, 25%) !default;
 
 $white-color: #fdfdfd !default;
 
@@ -32,13 +36,13 @@ $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;
+$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;
+$on-palm: 600px !default;
+$on-laptop: 800px !default;
 
 // Use media queries like this:
 // @include media-query($on-palm) {
@@ -48,24 +52,16 @@ $on-laptop:        800px !default;
 //   }
 // }
 @mixin media-query($device) {
-  @media screen and (max-width: $device) {
-    @content;
-  }
+    @media screen and (max-width: $device) {
+        @content;
+    }
 }
 
 @mixin relative-font-size($ratio) {
-  font-size: $base-font-size * $ratio;
+    font-size: $base-font-size * $ratio;
 }
 
 // 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"
-;
+@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
index cb83d82b81c..c3f072272d6 100644
--- a/_sass/yat/_base.scss
+++ b/_sass/yat/_base.scss
@@ -1,316 +1,328 @@
 /**
  * Reset some basic elements
  */
-body, h1, h2, h3, h4, h5, h6,
-p, blockquote, pre, hr,
-dl, dd, ol, ul, figure {
-  margin: 0;
-  padding: 0;
+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;
+    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,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+dl,
+figure,
 %vertical-rhythm {
-  margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
 }
 
-
-
 /**
  * `main` element
  */
 main {
-  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+    display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
 }
 
-
-
 /**
  * Images
  */
 img {
-  max-width: 100%;
-  vertical-align: middle;
+    max-width: 100%;
+    vertical-align: middle;
 }
 
-
-
 /**
  * Figures
  */
 figure > img {
-  display: block;
+    display: block;
 }
 
 figcaption {
-  font-size: $small-font-size;
+    font-size: $small-font-size;
 }
 
-
-
 /**
  * Lists
  */
-ul, ol {
-  margin-left: $spacing-unit;
+ul,
+ol {
+    margin-left: $spacing-unit;
 }
 
 li {
-  > ul,
-  > ol {
-    margin-bottom: 0;
-  }
+    > ul,
+    > ol {
+        margin-bottom: 0;
+    }
 }
 
-
-
 /**
  * Headings
  */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: $base-font-weight * 1.5;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: $base-font-weight * 1.5;
 }
 
 /**
  * Links
  */
 a {
-  color: $brand-color;
-  text-decoration: none;
+    color: $brand-color;
+    text-decoration: none;
 
-  &:hover {
-    text-decoration: underline;
-  }
+    &:hover {
+        text-decoration: underline;
+    }
 
-  .social-media-list &:hover {
-    text-decoration: none;
+    .social-media-list &:hover {
+        text-decoration: none;
 
-    .username {
-      text-decoration: underline;
+        .username {
+            text-decoration: underline;
+        }
     }
-  }
 }
 
 /**
  * Blockquotes
  */
 blockquote {
-  color: $grey-color;
-  border-left: 4px solid $grey-color-light;
-  padding-left: $spacing-unit / 2;
-  @include relative-font-size(1.125);
-  letter-spacing: -1px;
-  font-style: italic;
-
-  > :last-child {
-    margin-bottom: 0;
-  }
+    color: $grey-color;
+    border-left: 4px solid $grey-color-light;
+    padding-left: calc($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;
+    @include relative-font-size(0.9375);
+    color: $text-color;
 }
 
 *:not(pre) > code {
-  padding: 3px 6px;
-  border-radius: 3px;
-  background-color: #eee;
-  margin: 0 5px;
+    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;
+    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;
+    max-width: $content-width;
+    margin: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
 }
 
-
-
 /**
  * Clearfix
  */
 %clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
+    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%);
+    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: ($spacing-unit / 3) ($spacing-unit / 2);
-  }
+    th,
+    td {
+        padding: calc($spacing-unit / 3) calc($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%);
-  }
+    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;
-  }
+    td {
+        border: 1px solid $grey-color-light;
+    }
 }
 
 /**
  * Flex layout
  */
 %flex {
-  display: flex;
+    display: flex;
 }
 
 %flex-1 {
-  flex: 1;
-  min-width: 0; /* <-- fix flexbox width with pre tags  */
+    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;
+    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%);
+    position: $position;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
 /**
  * Horizontal center
  */
 @mixin horizontal-center($position) {
-  position: $position;
-  left: 50%;
-  transform: translateX(-50%);
+    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;
+    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;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
-::-moz-selection { /* Code for Firefox */
-  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;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
 ::-o-selection {
-  color: $selection-color;
-  background-color: $selection-background-color;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
 ::-webkit-selection {
-  color: $selection-color;
-  background-color: $selection-background-color;
+    color: $selection-color;
+    background-color: $selection-background-color;
 }
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index a23896d6160..0e8a889010a 100644
--- a/_sass/yat/_dark.scss
+++ b/_sass/yat/_dark.scss
@@ -1,209 +1,210 @@
 $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;
-          }
+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;
-      }
+        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;
+    body {
+        color: $dark-text-color;
+        background-color: $dark-background-color;
+    }
 
-    th {
-      background-color: #050505;
+    *:not(pre) > code {
+        color: $dark-text-color;
+        background-color: #454545;
     }
 
-    tr:nth-child(even) {
-      background-color: #080808;
+    blockquote {
+        border-left: 4px solid #484848;
     }
-  }
 
-  .site-header {
-    background-color: #090909;
+    table {
+        color: #9d9d9d;
 
-    .site-brand {
-      .site-brand-inner {
-        &, &:visited {
-          color: #f8f8f8;
+        th {
+            background-color: #050505;
         }
-      }
-    }
 
-    .site-nav .page-link {
-      color: #f8f8f8;
+        tr:nth-child(even) {
+            background-color: #080808;
+        }
     }
 
-    .ct-language-dropdown {
-      color: #f8f8f8;
-      background-color: $dark-background-color;
-      box-shadow: 0 0 3px 1px #0000005b;
-    }
+    .site-header {
+        background-color: #090909;
 
-    .ct-language-selected, .ct-language-dropdown li:hover {
-      background-color: #222 !important;
-    }
+        .site-brand {
+            .site-brand-inner {
+                &,
+                &:visited {
+                    color: #f8f8f8;
+                }
+            }
+        }
 
-    @include media-query($on-laptop) {
-      .menu-icon > svg {
-          fill: rgba($dark-text-color, 80%);
-      }
+        .site-nav .page-link {
+            color: #f8f8f8;
+        }
 
-      .site-nav input:checked ~ .trigger {
-        background-color: #090909;
-      }
-    }
-  }
+        .ct-language-dropdown {
+            color: #f8f8f8;
+            background-color: $dark-background-color;
+            box-shadow: 0 0 3px 1px #0000005b;
+        }
 
-  .site-footer {
-    color: #fff;
-    background-color: #000;
-  }
+        .ct-language-selected,
+        .ct-language-dropdown li:hover {
+            background-color: #222 !important;
+        }
 
-  .left-vsplit:before {
-    background-color: #505050;
-  }
+        @include media-query($on-laptop) {
+            .menu-icon > svg {
+                fill: rgba($dark-text-color, 80%);
+            }
 
-  .page-banner {
-    .page-banner-img {
-      & > *:first-child {
-        opacity: 0.718;
-      }
+            .site-nav input:checked ~ .trigger {
+                background-color: #090909;
+            }
+        }
     }
-  }
 
-  .pagination {
-    .post-link {
-      color: #bbb;
+    .site-footer {
+        color: #fff;
+        background-color: #000;
     }
 
-    .post-excerpt {
-      color: $grey-color;
+    .left-vsplit:before {
+        background-color: #505050;
     }
 
-    .post-list {
-      & > li:not(:last-child) {
-        border-bottom: 1px solid #545454;
-      }
+    .page-banner {
+        .page-banner-img {
+            & > *:first-child {
+                opacity: 0.718;
+            }
+        }
     }
 
-    .post-tags .post-tag:hover {
-      color: #d7d7d7;
-    }
-  }
+    .pagination {
+        .post-link {
+            color: #bbb;
+        }
 
-  .page-segments {
-    li {
-      a {
-        color: #ddd;
-      }
+        .post-excerpt {
+            color: $grey-color;
+        }
+
+        .post-list {
+            & > li:not(:last-child) {
+                border-bottom: 1px solid #545454;
+            }
+        }
+
+        .post-tags .post-tag:hover {
+            color: #d7d7d7;
+        }
     }
-  }
 
-  .post {
-    .post-header {
-      border-bottom: 1px solid #555;
+    .page-segments {
+        li {
+            a {
+                color: #ddd;
+            }
+        }
     }
 
-    .post-content {
-      img:not(.emoji):not([raw]) {
-        background-color: #ffffff33;
-      }
+    .post {
+        .post-header {
+            border-bottom: 1px solid #555;
+        }
 
-      hr {
-        background-color: #555;
-      }
-    }
+        .post-content {
+            img:not(.emoji):not([raw]) {
+                background-color: #ffffff33;
+            }
 
-    .post-related {
-      & > *:first-child {
-        color: #d7d7d7;
-      }
+            hr {
+                background-color: #555;
+            }
+        }
+
+        .post-related {
+            & > *:first-child {
+                color: #d7d7d7;
+            }
 
-      a:hover {
-        color: #aaa;
-      }
+            a:hover {
+                color: #aaa;
+            }
+        }
     }
-  }
 
-  .common-list {
-    li {
-      border-bottom: solid 1px #40404088;
+    .common-list {
+        li {
+            border-bottom: solid 1px #40404088;
 
-      a {
-        color: #aaa;
-      }
+            a {
+                color: #aaa;
+            }
 
-      a:hover {
-        background-color: #272727;
-      }
+            a:hover {
+                background-color: #272727;
+            }
 
-      span {
-        background-color: #333;
-      }
+            span {
+                background-color: #333;
+            }
+        }
     }
-  }
 
-  .post-menu {
-    .post-menu-title {
-      color: #ddd;
-    }
+    .post-menu {
+        .post-menu-title {
+            color: #ddd;
+        }
 
-    .post-menu-content {
-      ul {
-        border-left: 1px solid #787878;
+        .post-menu-content {
+            ul {
+                border-left: 1px solid #787878;
 
-        .active {
-          background-color: #2d2d2d;
-          border-left: 2px solid #aaa;
-        }
+                .active {
+                    background-color: #2d2d2d;
+                    border-left: 2px solid #aaa;
+                }
 
-        a {
-          color: $dark-text-color;
-        }
+                a {
+                    color: $dark-text-color;
+                }
 
-        a:hover {
-          color: #fff !important;
+                a:hover {
+                    color: #fff !important;
+                }
+            }
         }
-      }
     }
-  }
 
-  a .post-badges .post-badge {
-    color: $dark-background-color !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;
-  }
+    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
index 8f55e5e2a3f..2f9be014662 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -2,827 +2,841 @@
  * Animation for transparent header
  */
 html {
-  &[data-header-transparent] {
-    header.site-header {
-      position: fixed;
+    &[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;
+    &[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;
+                        }
+                    }
+                }
+            }
         }
 
-        @include media-query($on-laptop) {
-          .page-link {
-            color: $header-text-color;
-          }
+        footer.site-footer {
+            color: unset;
+            background-color: transparent;
 
-          .menu-icon {
-            > svg {
-              fill: $white-color;
+            .site-footer-inner {
+                border-top: solid 1px #eee;
             }
-          }
         }
-      }
     }
 
-    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;
-    }
+    &[data-scroll-status="down"] {
+        header.site-header {
+            top: -$header-height;
+        }
 
-    .framework .sidebar {
-      top: 20px;
+        .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;
+    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, 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;
-  }
+    a {
+        text-decoration: none;
+    }
 
-  .site-header-inner {
-    position: relative;
-  }
+    .site-header-inner {
+        position: relative;
+    }
 }
 
 .site-brand {
-  line-height: $header-height;
-  margin-right: 50px;
+    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;
+    .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;
-    }
+        &,
+        &:visited {
+            color: $header-text-color;
+        }
 
-    .site-favicon {
-      display: inline-block;
-      height: $header-height / 1.5;
-      margin-right: 5px;
+        .site-favicon {
+            display: inline-block;
+            height: calc($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) {
+    @include relative-font-size(1.125);
+    line-height: $header-height;
     position: absolute;
+    right: 0;
     top: 0;
-    text-align: left;
 
-    label[for="nav-trigger"] {
-      display: block;
-      z-index: 2;
-      cursor: pointer;
+    .nav-trigger {
+        display: none;
     }
 
     .menu-icon {
-      display: block;
-      float: right;
-      text-align: center;
-
-      > svg {
-        fill: rgba($header-text-color, 80%);
-        transition: 0.1s fill;
-      }
+        display: none;
     }
 
-    input ~ .trigger {
-      clear: both;
-      display: none;
-      border-radius: 3px;
-      box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
+    .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;
+            }
+        }
     }
 
-    input:checked ~ .trigger {
-      display: block;
-      background: $header-background-color;
-    }
+    @include media-query($on-laptop) {
+        position: absolute;
+        top: 0;
+        text-align: left;
+
+        label[for="nav-trigger"] {
+            display: block;
+            z-index: 2;
+            cursor: pointer;
+        }
 
-    .page-link {
-      display: block;
-      padding: 5px 10px;
-      color: rgba($header-text-color, 80%);
-      margin: 0 25px;
+        .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, 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;
+    @include relative-font-size(1);
+    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;
-  }
+    .site-footer-inner {
+        transition: border-top 0.2s;
+        padding: $spacing-unit * 1.8 0;
+    }
 
-  a {
-    $a-color: $brand-color;
-    color: $a-color;
+    a {
+        $a-color: $brand-color;
+        color: $a-color;
 
-    &:hover {
-      color: lighten($a-color, 10%);
+        &:hover {
+            color: lighten($a-color, 10%);
+        }
     }
-  }
 }
 
 .copyleft {
-  display: inline-block;
-  transform: rotate(180deg);
+    display: inline-block;
+    transform: rotate(180deg);
 }
 
 /**
  * Post header
  */
 %post-header {
-  .post-header {
-    margin-bottom: $spacing-unit;
-  }
+    .post-header {
+        margin-bottom: $spacing-unit;
+    }
 
-  .post-title {
-    @include relative-font-size(2.625);
-    letter-spacing: -1px;
-    line-height: 1;
+    .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);
+        @include media-query($on-laptop) {
+            @include relative-font-size(2.25);
+        }
     }
-  }
 
-  .post-tags {
-    padding-right: 150px;
+    .post-tags {
+        padding-right: 150px;
 
-    .post-tag {
-      display: inline-block;
-      margin: 0 12px 0 0;
+        .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;
+    @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);
+    @include relative-font-size(2);
 }
 
 .post-list-heading {
-  @include relative-font-size(1.75);
+    @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;
+    .post-list {
+        margin-left: 0;
+        list-style: none;
 
-      &:not(:last-child) {
-        border-bottom: 1px solid #e3e3e3;
-      }
-    }
-  }
+        > li {
+            margin-bottom: $spacing-unit * 1.5;
+            padding-bottom: 30px;
 
-  .post-title {
-    margin-bottom: $spacing-unit * 0.2;
-    transition: 0.2s all;
-
-    a {
-      text-decoration: none;
+            &:not(:last-child) {
+                border-bottom: 1px solid #e3e3e3;
+            }
+        }
     }
-  }
-
-  .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-title {
+        margin-bottom: $spacing-unit * 0.2;
+        transition: 0.2s all;
 
-  .post-list {
-    &.none-image-style .post-item .post-excerpt .post-image {
-      display: none;
+        a {
+            text-decoration: none;
+        }
     }
 
-    &.left-image-style .post-item .post-excerpt {
-      flex-direction: row;
+    .post-link {
+        @include relative-font-size(1.65);
+        font-weight: $base-font-weight * 1.5;
+        color: #333;
     }
 
-    &.right-image-style .post-item .post-excerpt {
-      flex-direction: row-reverse;
+    .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.top-image-style .post-item .post-excerpt {
-      flex-direction: column;
-    }
+    .post-list {
+        &.none-image-style .post-item .post-excerpt .post-image {
+            display: none;
+        }
 
-    &.z-image-style .post-item:nth-child(even) .post-excerpt {
-      flex-direction: row-reverse;
-    }
+        &.left-image-style .post-item .post-excerpt {
+            flex-direction: row;
+        }
 
-    &.z-reverse-image-style .post-item:nth-child(odd) .post-excerpt {
-      flex-direction: row-reverse;
-    }
+        &.right-image-style .post-item .post-excerpt {
+            flex-direction: row-reverse;
+        }
 
-    .post-item .post-excerpt {
-      @include media-query($on-laptop) {
-        flex-direction: column !important;
-      }
-    }
-  }
+        &.post-list.top-image-style .post-item .post-excerpt {
+            flex-direction: column;
+        }
 
-  .post-text {
-    color: $grey-color;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    flex: 1;
-  }
+        &.z-image-style .post-item:nth-child(even) .post-excerpt {
+            flex-direction: row-reverse;
+        }
 
-  .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;
+        &.z-reverse-image-style .post-item:nth-child(odd) .post-excerpt {
+            flex-direction: row-reverse;
+        }
 
-    &:not(:last-child) {
-      margin-right: 8px;
+        .post-item .post-excerpt {
+            @include media-query($on-laptop) {
+                flex-direction: column !important;
+            }
+        }
     }
 
-    &:hover {
-      color: #787878;
+    .post-text {
+        color: $grey-color;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        flex: 1;
     }
-  }
 
-  .paginator {
-    text-align: center;
+    .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;
+        }
 
-    & > .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);
+        &:hover {
+            color: #787878;
+        }
     }
 
-    & > .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);
-    }
+    .paginator {
+        text-align: center;
 
-    .previous span, .next span {
-      color: #b3b3b3;
-    }
+        & > .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);
+        }
 
-    .indicator {
-      padding: 0 15px;
+        .previous span,
+        .next span {
+            color: #b3b3b3;
+        }
+
+        .indicator {
+            padding: 0 15px;
+        }
     }
-  }
 }
 
-
 /**
  * Posts
  */
 .post {
-  @extend %post-header;
+    @extend %post-header;
 
-  .post-header {
-    margin: 50px auto 60px;
-    padding: 0 0 20px;
-    border-bottom: 1px solid #ebebeb;
+    .post-header {
+        margin: 50px auto 60px;
+        padding: 0 0 20px;
+        border-bottom: 1px solid #ebebeb;
 
-    .post-title {
-      margin-bottom: 6px;
-    }
+        .post-title {
+            margin-bottom: 6px;
+        }
 
-    .post-subtitle {
-      font-weight: 300;
-    }
+        .post-subtitle {
+            font-weight: 300;
+        }
 
-    .post-meta {
-      color: $grey-color;
-      padding-bottom: 15px;
+        .post-meta {
+            color: $grey-color;
+            padding-bottom: 15px;
+        }
     }
-  }
 
-  .post-content {
-    margin-bottom: $spacing-unit;
-    overflow-wrap: normal;
-    word-wrap: normal;
-    word-break: normal;
+    .post-content {
+        margin-bottom: $spacing-unit;
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
 
-    h2 {
-      @include relative-font-size(2);
+        h2 {
+            @include relative-font-size(2);
 
-      @include media-query($on-laptop) {
-        @include relative-font-size(1.75);
-      }
-    }
+            @include media-query($on-laptop) {
+                @include relative-font-size(1.75);
+            }
+        }
 
-    h3 {
-      @include relative-font-size(1.625);
+        h3 {
+            @include relative-font-size(1.625);
 
-      @include media-query($on-laptop) {
-        @include relative-font-size(1.375);
-      }
-    }
+            @include media-query($on-laptop) {
+                @include relative-font-size(1.375);
+            }
+        }
 
-    h4 {
-      @include relative-font-size(1.25);
+        h4 {
+            @include relative-font-size(1.25);
 
-      @include media-query($on-laptop) {
-        @include relative-font-size(1.125);
-      }
-    }
+            @include media-query($on-laptop) {
+                @include relative-font-size(1.125);
+            }
+        }
 
-    img, svg, iframe {
-      margin-left: auto;
-      margin-right: auto;
-    }
+        img,
+        svg,
+        iframe {
+            margin-left: auto;
+            margin-right: auto;
+        }
 
-    img:not(.emoji), svg, iframe {
-      display: block;
-      max-height: 50vh;
-    }
+        img:not(.emoji),
+        svg,
+        iframe {
+            display: block;
+            max-height: 50vh;
+        }
 
-    h2, h3, h4, h5, h6 {
-      margin: 60px 0 19px;
-    }
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin: 60px 0 19px;
+        }
 
-    p, hr {
-      margin-bottom: 24px;
-    }
+        p,
+        hr {
+            margin-bottom: 24px;
+        }
 
-    hr {
-      height: 1px;
-      background-color: #ebebeb;
-      border: none;
+        hr {
+            height: 1px;
+            background-color: #ebebeb;
+            border: none;
+        }
     }
-  }
 
-  .post-related {
-    &>*:first-child {
-      @include relative-font-size(1.425);
-      color: #333;
-      margin-bottom: 14px;
-    }
+    .post-related {
+        & > *:first-child {
+            @include relative-font-size(1.425);
+            color: #333;
+            margin-bottom: 14px;
+        }
 
-    ul {
-      margin-left: 15px;
-    }
+        ul {
+            margin-left: 15px;
+        }
 
-    .post-link {
-      @include relative-font-size(1.075);
-      color: $grey-color;
+        .post-link {
+            @include relative-font-size(1.075);
+            color: $grey-color;
 
-      &:hover {
-        color: darken($grey-color, 50%);
-      }
+            &:hover {
+                color: darken($grey-color, 50%);
+            }
+        }
     }
-  }
 }
 
 .post-comments {
-  padding-top: 25px;
+    padding-top: 25px;
 }
 
 /**
  * Posts misc
  */
 .post-nav {
-  display: flex;
-  justify-content: space-between;
-  margin: 72px 0 59px;
-  padding: 31px 0 0;
+    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);
-  }
-}
+    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;
-  }
+    .page-archives-list {
+        margin-left: 0;
+        list-style: none;
+    }
 
-  .archives-time {
-    @include relative-font-size(1.5);
+    .archives-time {
+        @include relative-font-size(1.5);
 
-    &:not(:first-child) {
-      margin-top: 18px;
+        &:not(:first-child) {
+            margin-top: 18px;
+        }
+        margin-bottom: 8px;
     }
-    margin-bottom: 8px;
-  }
 
-  .post-meta {
-    font-size: $small-font-size;
-    color: $grey-color;
-  }
+    .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;
+    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;
+        }
 
-    & > *:first-child {
-      @include center-image;
-      transition: 0.1s all ease-in-out;
-    }
+        & > video {
+            width: 100vw;
+            object-fit: cover;
+        }
 
-    & > video {
-      width: 100vw;
-      object-fit: cover;
+        & > img.img-placeholder {
+            display: none;
+        }
     }
 
-    & > img.img-placeholder {
-      display: none;
+    .wrapper {
+        height: 100%;
     }
-  }
 
-  .wrapper {
-    height: 100%;
-  }
+    .page-banner-inner {
+        @include vertical-center(relative);
 
-  .page-banner-inner {
-    @include vertical-center(relative);
+        color: $banner-text-color;
+        padding: 10px 5px;
+        text-shadow: 1px 1px 2px #33333355;
 
-    color: $banner-text-color;
-    padding: 10px 5px;
-    text-shadow: 1px 1px 2px #33333355;
+        & > *:first-child {
+            margin: 0;
 
-    & > *: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;
 
-      > :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);
+                }
+            }
 
-        @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;
 
-      > :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);
+                }
+            }
 
-        @include media-query($on-palm) {
-          @include relative-font-size(1.175);
+            > :last-child {
+                margin-bottom: 0;
+            }
         }
-      }
 
-      > :last-child {
-        margin-bottom: 0;
-      }
-    }
+        .post-subtitle {
+            @include relative-font-size(1.525);
+            color: #ffffffcc;
+            padding-right: 280px;
 
-    .post-subtitle {
-      @include relative-font-size(1.525);
-      color: #ffffffcc;
-      padding-right: 280px;
-
-      @include media-query($on-palm) {
-        padding-right: 0;
-      }
-    }
+            @include media-query($on-palm) {
+                padding-right: 0;
+            }
+        }
 
-    .post-meta {
-      color: #ffffffcc;
-      padding-bottom: 1em;
-    }
+        .post-meta {
+            color: #ffffffcc;
+            padding-bottom: 1em;
+        }
 
-    .left-vsplit:before {
-      background: #e3e3e388;
-    }
+        .left-vsplit:before {
+            background: #e3e3e388;
+        }
 
-    .post-tags {
-      color: #999;
-      padding-right: 280px;
+        .post-tags {
+            color: #999;
+            padding-right: 280px;
 
-      @include media-query($on-palm) {
-        padding-right: 0;
-      }
+            @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;
+            .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;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
         }
-      }
     }
-  }
 
-  @include media-query($on-palm) {
-    height: $banner-height / 1.5;
-  }
+    @include media-query($on-palm) {
+        height: calc($banner-height / 1.5);
+    }
 }
 
-
 /**
  * Layout and sidebar
  */
 .framework {
     @extend %flex;
 
-  .main {
-    @extend %flex-1;
-  }
+    .main {
+        @extend %flex-1;
+    }
 
-  .sidebar {
-    padding-left: 8px;
-    transition: top 0.2s, display 0.2s;
+    .sidebar {
+        padding-left: 8px;
+        transition:
+            top 0.2s,
+            display 0.2s;
 
-    @include flex-sticky($header-height + 20px);
+        @include flex-sticky($header-height + 20px);
 
-    @include media-query($on-laptop) {
-      display: none;
+        @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;
+    .page-segments-list {
+        margin-left: 0;
+        list-style: none;
+    }
 
-    @include relative-font-size(1.6);
+    .segment-name {
+        font-weight: $base-font-weight * 1.5;
+        margin-bottom: 8px;
+        position: relative;
 
-    &:not(:first-child) {
-      margin-top: 28px;
-    }
+        @include relative-font-size(1.6);
 
-    &:hover:before {
-      content: '#';
-      left: -1em;
-      position: absolute;
-    }
-  }
+        &:not(:first-child) {
+            margin-top: 28px;
+        }
 
-  .post-meta {
-    font-size: $small-font-size;
-    color: $grey-color;
-  }
+        &:hover:before {
+            content: "#";
+            left: -1em;
+            position: absolute;
+        }
+    }
 
-  li a {
-    &.post-link {
-      margin-left: 5px;
+    .post-meta {
+        font-size: $small-font-size;
+        color: $grey-color;
     }
 
-    color: #303030;
+    li a {
+        &.post-link {
+            margin-left: 5px;
+        }
+
+        color: #303030;
 
-    &:hover {
-      color: #000;
+        &:hover {
+            color: #000;
+        }
     }
-  }
 }
 
 .left-vsplit:before {
-  content: "";
-  display: inline-block;
-  width: 1px;
-  height: 10px;
-  margin: 0 10px;
-  background-color: #e3e3e3e3;
-  vertical-align: baseline;
+    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;
+    display: inline-block;
+    position: relative;
+    margin-left: 8px;
+    margin-top: 3px;
+    user-select: none;
 }
 
 .pagination .post-badges {
-  bottom: 0.5em;
+    bottom: 0.5em;
 }
 
 .post-related .post-badges {
-  bottom: 0.1em;
+    bottom: 0.1em;
 }
 
 .page-segments .post-badges {
-  bottom: 0.1em;
+    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;
+    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;
+    display: inline-block;
 }
 
 .top-post .post-badges .post-badge.badge-top {
-  display: inline-block;
+    display: inline-block;
 }
 
 a:visited .post-badges .post-badge.badge-new {
-  display: none;
-  color: $background-color;
-  background-color: $background-color;
+    display: none;
+    color: $background-color;
+    background-color: $background-color;
 }
diff --git a/about.html b/about.html
index 3556c573f30..eb6c632cab5 100644
--- a/about.html
+++ b/about.html
@@ -6,8 +6,8 @@
 <h2>About</h2>
 
 <p>
-    :art:&nbsp;Yet another theme for elegant writers with modern flat style
-    and beautiful night mode.
+    :art:&nbsp;Yet another theme for elegant writers with modern flat style and
+    beautiful night mode.
 </p>
 
 <p>
@@ -18,12 +18,16 @@ <h2>About</h2>
 
 <h2>About the Fulgor Foundation</h2>
 
-Las áreas de foco estratégico de la Fundación consisten en tareas de fondo a realizar o valores y modalidades de trabajo
-a cultivar, que impregnan todos los programas y proyectos de la Fundación sin ser en sí mismos programas o proyectos.
-Las áreas de foco estratégico incluyen:
+Las áreas de foco estratégico de la Fundación consisten en tareas de fondo a
+realizar o valores y modalidades de trabajo a cultivar, que impregnan todos los
+programas y proyectos de la Fundación sin ser en sí mismos programas o
+proyectos. Las áreas de foco estratégico incluyen:
 
 <ol>
     <li>Generación de Excelencia Académica, Científica y Tecnológica</li>
-    <li>Fortalecimiento de los Valores Nacionales y Patrióticos en la Sociedad Argentina</li>
+    <li>
+        Fortalecimiento de los Valores Nacionales y Patrióticos en la Sociedad
+        Argentina
+    </li>
     <li>Fortalecimiento de la Cultura Nacional</li>
-</ol>
\ No newline at end of file
+</ol>
diff --git a/assets/images/spot-bostondynamics.jpg b/assets/images/spot-bostondynamics.jpg
new file mode 100644
index 00000000000..4e68f864a48
Binary files /dev/null and b/assets/images/spot-bostondynamics.jpg differ
diff --git a/assets/images/turtlebot4.jpg b/assets/images/turtlebot4.jpg
new file mode 100644
index 00000000000..a10eb3397e6
Binary files /dev/null and b/assets/images/turtlebot4.jpg differ
diff --git a/assets/js/main.js b/assets/js/main.js
index 0e5982aab4c..4216e0f427a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,58 +1,70 @@
 // 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;
-    };
+    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 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;
+    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 };
+    return { x: x, y: y }
 }
 
-var _scrollTimer = [];
+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);
-    })();
-  }
-}
+    time = time == undefined ? 500 : time
+
+    var scrollPos = getScrollPos()
+    var count = 60
+    var length = y - scrollPos.y
+
+    function easeInOut(k) {
+        return 0.5 * (Math.sin((k - 0.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/index.html b/index.html
index 9e7dd50145d..bdcbd8bf53d 100644
--- a/index.html
+++ b/index.html
@@ -5,4 +5,4 @@
 layout: home
 title: Home
 banner: "/assets/images/banners/home.jpeg"
----
\ No newline at end of file
+---