From 505e314a3142c332e39365fbe2dac23df1bf0abe Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 8 Sep 2023 22:48:37 +0800
Subject: [PATCH] perf: refactor using semantic HTML (#1207)

Fixes #1196
---
 _includes/comments/disqus.html                |   3 +-
 _includes/datetime.html                       |   9 +-
 _includes/footer.html                         |   3 +-
 _includes/notification.html                   |  24 +++
 _includes/post-nav.html                       |  21 ++-
 _includes/related-posts.html                  |  21 ++-
 _includes/search-loader.html                  |  18 ++-
 _includes/search-results.html                 |   2 +-
 _includes/sidebar.html                        | 123 +++++++--------
 _includes/toc.html                            |   6 +-
 _includes/topbar.html                         |  27 ++--
 _includes/trending-tags.html                  |   6 +-
 _includes/update-list.html                    |   8 +-
 .../modules/components/img-lazyload.js        |   2 +-
 .../modules/components/search-display.js      |  16 +-
 _javascript/modules/components/toc.js         |   4 +-
 _layouts/archives.html                        |  37 +++--
 _layouts/category.html                        |   4 +-
 _layouts/default.html                         |  81 ++++++----
 _layouts/home.html                            |  23 +--
 _layouts/page.html                            |  86 +++--------
 _layouts/post.html                            | 142 +++++++++---------
 _layouts/tag.html                             |   4 +-
 _sass/addon/commons.scss                      |  98 ++++++------
 _sass/addon/module.scss                       |   2 +-
 _sass/addon/syntax.scss                       |   4 +-
 _sass/addon/variables.scss                    |   2 +-
 _sass/colors/typography-dark.scss             |   2 +-
 _sass/colors/typography-light.scss            |   2 +-
 _sass/layout/category-tag.scss                |   5 -
 _sass/layout/home.scss                        |   4 +-
 _sass/layout/post.scss                        |  24 +--
 assets/404.html                               |   4 +-
 33 files changed, 415 insertions(+), 402 deletions(-)
 create mode 100644 _includes/notification.html

diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html
index d2f59df7c5e..02a5367278c 100644
--- a/_includes/comments/disqus.html
+++ b/_includes/comments/disqus.html
@@ -1,5 +1,6 @@
 <!-- The Disqus lazy loading. -->
-<div id="disqus_thread" class="pt-2 pb-2">
+
+<div id="disqus_thread" class="mb-5">
   <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
 </div>
 
diff --git a/_includes/datetime.html b/_includes/datetime.html
index 53258ba861b..9f954b698ef 100644
--- a/_includes/datetime.html
+++ b/_includes/datetime.html
@@ -3,12 +3,13 @@
   See: ${JS_ROOT}/utils/locale-dateime.js
 -->
 
-{% assign wrap_elem = include.wrap | default: 'em' %}
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
 {% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
 
-<{{ wrap_elem }}
-  class="{% if include.class %}{{ include.class }}{% endif %}"
+<time
+  {% if include.class %}
+    class="{{ include.class }}"
+  {% endif %}
   data-ts="{{ include.date | date: '%s' }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
@@ -16,4 +17,4 @@
   {% endif %}
 >
   {{ include.date | date: df_strftime }}
-</{{ wrap_elem }}>
+</time>
diff --git a/_includes/footer.html b/_includes/footer.html
index 25ea771253f..a9923559e82 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,7 @@
 <!-- The Footer -->
 
 <footer
+  aria-label="Site Info"
   class="
     d-flex flex-column justify-content-center text-muted
     flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
@@ -8,7 +9,7 @@
 >
   <p>
     {{ '©' }}
-    {{ 'now' | date: '%Y' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
     <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
     {% if site.data.locales[include.lang].copyright.brief %}
       <span
diff --git a/_includes/notification.html b/_includes/notification.html
new file mode 100644
index 00000000000..80049b0a7ad
--- /dev/null
+++ b/_includes/notification.html
@@ -0,0 +1,24 @@
+<aside
+  id="notification"
+  class="toast"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-bs-animation="true"
+  data-bs-autohide="false"
+>
+  <div class="toast-header">
+    <button
+      type="button"
+      class="btn-close ms-auto"
+      data-bs-dismiss="toast"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="toast-body text-center pt-0">
+    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
+    <button type="button" class="btn btn-primary" aria-label="Update">
+      {{ site.data.locales[include.lang].notification.update }}
+    </button>
+  </div>
+</aside>
diff --git a/_includes/post-nav.html b/_includes/post-nav.html
index 76bcd59abd9..736bec376b2 100644
--- a/_includes/post-nav.html
+++ b/_includes/post-nav.html
@@ -1,19 +1,19 @@
 <!-- Navigation buttons at the bottom of the post. -->
 
-<div class="post-navigation d-flex justify-content-between">
+<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
+  {% assign previous = site.data.locales[include.lang].post.button.previous %}
+  {% assign next = site.data.locales[include.lang].post.button.next %}
+
   {% if page.previous.url %}
     <a
       href="{{ site.baseurl }}{{ page.previous.url }}"
       class="btn btn-outline-primary"
-      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
+      aria-label="{{ previous }}"
     >
       <p>{{ page.previous.title }}</p>
     </a>
   {% else %}
-    <div
-      class="btn btn-outline-primary disabled"
-      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
-    >
+    <div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
       <p>-</p>
     </div>
   {% endif %}
@@ -22,16 +22,13 @@
     <a
       href="{{ site.baseurl }}{{page.next.url}}"
       class="btn btn-outline-primary"
-      prompt="{{ site.data.locales[include.lang].post.button.next }}"
+      aria-label="{{ next }}"
     >
       <p>{{ page.next.title }}</p>
     </a>
   {% else %}
-    <div
-      class="btn btn-outline-primary disabled"
-      prompt="{{ site.data.locales[include.lang].post.button.next }}"
-    >
+    <div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
       <p>-</p>
     </div>
   {% endif %}
-</div>
+</nav>
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index 18069c346b8..ebe98d08b12 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -69,17 +69,17 @@
 {% endfor %}
 
 {% if relate_posts.size > 0 %}
-  <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mb-4" data-toc-skip>
-      {{ site.data.locales[include.lang].post.relate_posts }}
+  <aside id="related-posts" aria-labelledby="related-label">
+    <h3 class="mb-4" id="related-label">
+      {{- site.data.locales[include.lang].post.relate_posts -}}
     </h3>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+    <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
       {% for post in relate_posts %}
-        <div class="col">
-          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
+        <article class="col">
+          <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
             <div class="card-body">
               {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted small">
                 <p>
                   {% include no-linenos.html content=post.content %}
@@ -88,10 +88,9 @@ <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
               </div>
             </div>
           </a>
-        </div>
+        </article>
       {% endfor %}
-    </div>
-    <!-- .card-deck -->
-  </div>
+    </nav>
+  </aside>
   <!-- #related-posts -->
 {% endif %}
diff --git a/_includes/search-loader.html b/_includes/search-loader.html
index 634325b55b7..be3ca8a69f5 100644
--- a/_includes/search-loader.html
+++ b/_includes/search-loader.html
@@ -4,14 +4,16 @@
 -->
 
 {% capture result_elem %}
-<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
-  <a href="{url}">{title}</a>
-  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    {categories}
-    {tags}
-  </div>
-  <p>{snippet}</p>
-</div>
+  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
+    <header>
+      <h2><a href="{url}">{title}</a></h2>
+      <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+        {categories}
+        {tags}
+      </div>
+    </header>
+    <p>{snippet}</p>
+  </article>
 {% endcapture %}
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
diff --git a/_includes/search-results.html b/_includes/search-results.html
index 07981ffdade..c224c5f41df 100644
--- a/_includes/search-results.html
+++ b/_includes/search-results.html
@@ -1,7 +1,7 @@
 <!-- The Search results -->
 
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-11 post-content">
+  <div class="col-11 content">
     <div id="search-hints">
       {% include_cached trending-tags.html %}
     </div>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 9fe0208fd5c..1279ad1dae2 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,7 +1,7 @@
 <!-- The Side Bar -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper">
+<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
+  <header class="profile-wrapper">
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {% if site.avatar != empty and site.avatar %}
         {% capture avatar_url %}
@@ -17,39 +17,40 @@
       {% endif %}
     </a>
 
-    <div class="site-title">
+    <h1 class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </div>
-    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
-  </div>
+    </h1>
+    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
+  </header>
   <!-- .profile-wrapper -->
 
-  <ul class="nav flex-column flex-grow-1 w-100 ps-0">
-    <!-- home -->
-    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home"></i>
-        <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
-      </a>
-    </li>
-    <!-- the real tabs -->
-    {% for tab in site.tabs %}
-      <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-        <a href="{{ tab.url | relative_url }}" class="nav-link">
-          <i class="fa-fw {{ tab.icon }}"></i>
-          {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
-
-          <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+  <nav class="flex-column flex-grow-1 w-100 ps-0">
+    <ul class="nav">
+      <!-- home -->
+      <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
+        <a href="{{ '/' | relative_url }}" class="nav-link">
+          <i class="fa-fw fas fa-home"></i>
+          <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
         </a>
       </li>
-      <!-- .nav-item -->
-    {% endfor %}
-  </ul>
-  <!-- ul.nav.flex-column -->
+      <!-- the real tabs -->
+      {% for tab in site.tabs %}
+        <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+          <a href="{{ tab.url | relative_url }}" class="nav-link">
+            <i class="fa-fw {{ tab.icon }}"></i>
+            {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+
+            <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+          </a>
+        </li>
+        <!-- .nav-item -->
+      {% endfor %}
+    </ul>
+  </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -58,47 +59,49 @@
       {% endif %}
     {% endunless %}
 
-    {% for entry in site.data.contact %}
-      {% case entry.type %}
-        {% when 'github', 'twitter' %}
-          {%- capture url -%}
+    <address class="d-flex mb-0">
+      {% for entry in site.data.contact %}
+        {% case entry.type %}
+          {% when 'github', 'twitter' %}
+            {%- capture url -%}
             https://{{ entry.type }}.com/{{ site[entry.type].username }}
           {%- endcapture -%}
-        {% when 'email' %}
-          {% assign email = site.social.email | split: '@' %}
-          {%- capture url -%}
+          {% when 'email' %}
+            {% assign email = site.social.email | split: '@' %}
+            {%- capture url -%}
             javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
           {%- endcapture -%}
-        {% when 'rss' %}
-          {% assign url = '/feed.xml' | relative_url %}
-        {% else %}
-          {% assign url = entry.url %}
-      {% endcase %}
+          {% when 'rss' %}
+            {% assign url = '/feed.xml' | relative_url %}
+          {% else %}
+            {% assign url = entry.url %}
+        {% endcase %}
 
-      {% if url %}
-        <a
-          href="{{ url }}"
-          aria-label="{{ entry.type }}"
-          {% assign link_types = '' %}
+        {% if url %}
+          <a
+            href="{{ url }}"
+            aria-label="{{ entry.type }}"
+            {% assign link_types = '' %}
 
-          {% unless entry.noblank %}
-            target="_blank"
-            {% assign link_types = 'noopener noreferrer' %}
-          {% endunless %}
+            {% unless entry.noblank %}
+              target="_blank"
+              {% assign link_types = 'noopener noreferrer' %}
+            {% endunless %}
 
-          {% if entry.type == 'mastodon' %}
-            {% assign link_types = link_types | append: ' me' | strip %}
-          {% endif %}
+            {% if entry.type == 'mastodon' %}
+              {% assign link_types = link_types | append: ' me' | strip %}
+            {% endif %}
 
-          {% unless link_types == empty %}
-            rel="{{ link_types }}"
-          {% endunless %}
-        >
-          <i class="{{ entry.icon }}"></i>
-        </a>
-      {% endif %}
-    {% endfor %}
+            {% unless link_types == empty %}
+              rel="{{ link_types }}"
+            {% endunless %}
+          >
+            <i class="{{ entry.icon }}"></i>
+          </a>
+        {% endif %}
+      {% endfor %}
+    </address>
   </div>
   <!-- .sidebar-bottom -->
-</div>
+</aside>
 <!-- #sidebar -->
diff --git a/_includes/toc.html b/_includes/toc.html
index 1eb3dcd8ab9..a9e48e97ac1 100644
--- a/_includes/toc.html
+++ b/_includes/toc.html
@@ -6,8 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-  <div id="toc-wrapper" class="ps-0 pe-4 mb-5">
-    <div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
+  <section id="toc-wrapper" class="ps-0 pe-4 mb-5">
+    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
-  </div>
+  </section>
 {% endif %}
diff --git a/_includes/topbar.html b/_includes/topbar.html
index 0092f69d565..3d079ed1e31 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -1,11 +1,11 @@
 <!-- The Top Bar -->
 
-<div id="topbar-wrapper">
+<header id="topbar-wrapper" aria-label="Top Bar">
   <div
     id="topbar"
-    class="container d-flex align-items-center justify-content-between h-100"
+    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
   >
-    <span id="breadcrumb">
+    <nav id="breadcrumb" aria-label="Breadcrumb">
       {% assign paths = page.url | split: '/' %}
 
       {% if paths.size == 0 or page.layout == 'home' %}
@@ -37,10 +37,12 @@
           {% endif %}
         {% endfor %}
       {% endif %}
-    </span>
+    </nav>
     <!-- endof #breadcrumb -->
 
-    <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
@@ -53,8 +55,11 @@
       {% endif %}
     </div>
 
-    <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrapper" class="align-items-center">
+    <button type="button" id="search-trigger" class="btn btn-link">
+      <i class="fas fa-search fa-fw"></i>
+    </button>
+
+    <search class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"
@@ -64,7 +69,9 @@
         autocomplete="off"
         placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
       >
-    </span>
-    <span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- site.data.locales[include.lang].search.cancel -}}
+    </button>
   </div>
-</div>
+</header>
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html
index 6b1d73221b3..57369f0d63e 100644
--- a/_includes/trending-tags.html
+++ b/_includes/trending-tags.html
@@ -34,13 +34,13 @@
 {% endfor %}
 
 {% if trending_tags.size > 0 %}
-  <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
+  <section>
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
     <div class="d-flex flex-wrap mt-3 mb-1 me-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
         <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
     </div>
-  </div>
+  </section>
 {% endif %}
diff --git a/_includes/update-list.html b/_includes/update-list.html
index 0ab7a45126b..cdeebebb9ef 100644
--- a/_includes/update-list.html
+++ b/_includes/update-list.html
@@ -22,9 +22,9 @@
 {% endfor %}
 
 {% if update_list.size > 0 %}
-  <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
-    <ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
+  <section id="access-lastmod">
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
+    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}
@@ -34,6 +34,6 @@
         </li>
       {% endfor %}
     </ul>
-  </div>
+  </section>
   <!-- #access-lastmod -->
 {% endif %}
diff --git a/_javascript/modules/components/img-lazyload.js b/_javascript/modules/components/img-lazyload.js
index edad9dd1349..6a6c99a81fe 100644
--- a/_javascript/modules/components/img-lazyload.js
+++ b/_javascript/modules/components/img-lazyload.js
@@ -7,7 +7,7 @@ function stopShimmer($node) {
 }
 
 export function imgLazy() {
-  const $images = $('#core-wrapper img[data-src]');
+  const $images = $('main img[data-src]');
 
   if ($images.length <= 0) {
     return;
diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js
index 7862f39a6ae..ad009c2deb4 100644
--- a/_javascript/modules/components/search-display.js
+++ b/_javascript/modules/components/search-display.js
@@ -4,9 +4,9 @@
 const $btnSbTrigger = $('#sidebar-trigger');
 const $btnSearchTrigger = $('#search-trigger');
 const $btnCancel = $('#search-cancel');
-const $content = $('#main>.row');
+const $content = $('#main-wrapper>.container>.row');
 const $topbarTitle = $('#topbar-title');
-const $searchWrapper = $('#search-wrapper');
+const $search = $('search');
 const $resultWrapper = $('#search-result-wrapper');
 const $results = $('#search-results');
 const $input = $('#search-input');
@@ -39,13 +39,13 @@ class MobileSearchBar {
     $btnSbTrigger.addClass(C_UNLOADED);
     $topbarTitle.addClass(C_UNLOADED);
     $btnSearchTrigger.addClass(C_UNLOADED);
-    $searchWrapper.addClass(C_FLEX);
+    $search.addClass(C_FLEX);
     $btnCancel.addClass(C_LOADED);
   }
 
   static off() {
     $btnCancel.removeClass(C_LOADED);
-    $searchWrapper.removeClass(C_FLEX);
+    $search.removeClass(C_FLEX);
     $btnSbTrigger.removeClass(C_UNLOADED);
     $topbarTitle.removeClass(C_UNLOADED);
     $btnSearchTrigger.removeClass(C_UNLOADED);
@@ -55,7 +55,7 @@ class MobileSearchBar {
 class ResultSwitch {
   static on() {
     if (!ScrollBlocker.resultVisible) {
-      // the block method must be called before $(#main) unloaded.
+      // the block method must be called before $(#main-wrapper>.container) unloaded.
       ScrollBlocker.on();
       $resultWrapper.removeClass(C_UNLOADED);
       $content.addClass(C_UNLOADED);
@@ -72,7 +72,7 @@ class ResultSwitch {
       $resultWrapper.addClass(C_UNLOADED);
       $content.removeClass(C_UNLOADED);
 
-      // now the release method must be called after $(#main) display
+      // now the release method must be called after $(#main-wrapper>.container) display
       ScrollBlocker.off();
 
       $input.val('');
@@ -98,11 +98,11 @@ export function displaySearch() {
   });
 
   $input.on('focus', function () {
-    $searchWrapper.addClass(C_FOCUS);
+    $search.addClass(C_FOCUS);
   });
 
   $input.on('focusout', function () {
-    $searchWrapper.removeClass(C_FOCUS);
+    $search.removeClass(C_FOCUS);
   });
 
   $input.on('input', () => {
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
index 9f938246706..bfb0c006f52 100644
--- a/_javascript/modules/components/toc.js
+++ b/_javascript/modules/components/toc.js
@@ -1,9 +1,9 @@
 export function toc() {
-  if (document.querySelector('#core-wrapper h2')) {
+  if (document.querySelector('main h2')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
       tocSelector: '#toc',
-      contentSelector: '.post-content',
+      contentSelector: '.content',
       ignoreSelector: '[data-toc-skip]',
       headingSelector: 'h2, h3, h4',
       orderedList: false,
diff --git a/_layouts/archives.html b/_layouts/archives.html
index 18e95f552eb..4f7ad7dfb71 100644
--- a/_layouts/archives.html
+++ b/_layouts/archives.html
@@ -9,28 +9,27 @@
 {% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
 
 <div id="archives" class="pl-xl-3">
+  {% for post in site.posts %}
+    {% assign cur_year = post.date | date: '%Y' %}
 
-{% for post in site.posts %}
-  {% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% if cur_year != last_year %}
+      {% unless forloop.first %}</ul>{% endunless %}
 
-  {% if cur_year != last_year %}
-    {% unless forloop.first %}</ul>{% endunless %}
-    <div class="year lead">{{ cur_year }}</div>
-    <ul class="list-unstyled">
-    {% assign last_year = cur_year %}
-  {% endif %}
+      <time class="year lead d-block">{{ cur_year }}</time>
+      {{ '<ul class="list-unstyled">' }}
 
-  <li>
-  {% assign ts = post.date | date: '%s' %}
-    <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-    <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
-      {{ post.date | date: df_strftime_m }}
-    </span>
-    <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-  </li>
+      {% assign last_year = cur_year %}
+    {% endif %}
 
-  {% if forloop.last %}</ul>{% endif %}
-
-{% endfor %}
+    <li>
+      {% assign ts = post.date | date: '%s' %}
+      <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
+      <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+        {{ post.date | date: df_strftime_m }}
+      </span>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+    </li>
 
+    {% if forloop.last %}</ul>{% endif %}
+  {% endfor %}
 </div>
diff --git a/_layouts/category.html b/_layouts/category.html
index 84fa48703dc..b064f27c943 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -12,12 +12,12 @@ <h1 class="ps-lg-2">
     <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
 
-  <ul class="post-content ps-0">
+  <ul class="content ps-0">
     {% for post in page.posts %}
       <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
-        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
       </li>
     {% endfor %}
   </ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index 477a40dbda6..16f52c29a66 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -15,6 +15,10 @@
   {% endif %}
 {% endcapture %}
 
+{% if layout.tail_includes %}
+  {% assign has_tail = true %}
+{% endif %}
+
 <!-- `site.alt_lang` can specify a language different from the UI -->
 <html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
@@ -23,46 +27,63 @@
     {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container px-xxl-5">
+      <div class="container px-xxl-5">
         {% include topbar.html lang=lang %}
-        {{ content }}
+
+        <div class="row">
+          <main
+            aria-label="Main Content"
+            class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
+          >
+            {{ content }}
+          </main>
+
+          <!-- panel -->
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
+            <div class="access">
+              {% include_cached update-list.html lang=lang %}
+              {% include_cached trending-tags.html lang=lang %}
+            </div>
+
+            {% for _include in layout.panel_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
+          </aside>
+        </div>
+
+        <div class="row">
+          <!-- tail -->
+          <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% if has_tail %}
+              {% for _include in layout.tail_includes %}
+                {% assign _include_path = _include | append: '.html' %}
+                {% include {{ _include_path }} lang=lang %}
+              {% endfor %}
+            {% endif %}
+
+            {% include_cached footer.html lang=lang %}
+          </div>
+        </div>
+
         {% include_cached search-results.html lang=lang %}
       </div>
+
+      <aside aria-label="Scroll to Top">
+        <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
+          <i class="fas fa-angle-up"></i>
+        </button>
+      </aside>
     </div>
 
     <div id="mask"></div>
 
-    <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
-      <i class="fas fa-angle-up"></i>
-    </button>
-
     {% if site.pwa.enabled %}
-      <div
-        id="notification"
-        class="toast"
-        role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
-        data-bs-animation="true"
-        data-bs-autohide="false"
-      >
-        <div class="toast-header">
-          <button
-            type="button"
-            class="btn-close ms-auto"
-            data-bs-dismiss="toast"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="toast-body text-center pt-0">
-          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
-          <button type="button" class="btn btn-primary" aria-label="Update">
-            {{ site.data.locales[lang].notification.update }}
-          </button>
-        </div>
-      </div>
+      {% include_cached notification.html lang=lang %}
     {% endif %}
 
+    <!-- JavaScripts -->
+
     {% include js-selector.html %}
 
     {% if page.mermaid %}
diff --git a/_layouts/home.html b/_layouts/home.html
index 58ec1dc1763..a713383179a 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -1,6 +1,5 @@
 ---
-layout: page
-refactor: true
+layout: default
 ---
 
 {% include lang.html %}
@@ -40,10 +39,10 @@
   {% endfor %}
 {% endif %}
 
-<div id="post-list" class="pe-xl-2">
+{% capture content %}
   {% for post in posts %}
-    <a href="{{ post.url | relative_url }}" class="card-wrapper">
-      <div class="card post-preview flex-md-row-reverse">
+    <article class="card-wrapper">
+      <a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
         {% if post.image %}
           {% if post.image.lqip %}
             {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
@@ -60,11 +59,9 @@
         {% endif %}
 
         <div class="card-body d-flex flex-column">
-          <h1 class="card-title my-2 mt-md-0">
-            {{ post.title }}
-          </h1>
+          <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
-          <div class="card-text post-content mt-0 mb-2">
+          <div class="card-text content mt-0 mb-2">
             <p>
               {% include no-linenos.html content=post.content %}
               {{ content | markdownify | strip_html | truncate: 200 | escape }}
@@ -99,9 +96,13 @@ <h1 class="card-title my-2 mt-md-0">
           <!-- .post-meta -->
         </div>
         <!-- .card-body -->
-      </div>
-    </a>
+      </a>
+    </article>
   {% endfor %}
+{% endcapture %}
+
+<div id="post-list" class="flex-grow-1 pe-xl-2">
+  {% include refactor-content.html content=content lang=lang %}
 </div>
 <!-- #post-list -->
 
diff --git a/_layouts/page.html b/_layouts/page.html
index 69f033cd8fe..b2bf5ec76d5 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -2,69 +2,25 @@
 layout: default
 ---
 
-{% include lang.html %}
-{% include origin-type.html %}
-
-{% if layout.tail_includes %}
-  {% assign has_tail = true %}
-{% endif %}
-
-<div class="row">
-  <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
-    {% capture padding %}
-      {% unless page.layout == 'home' %}px-1{% endunless %}
-    {% endcapture %}
-
-    <div class="post {{ padding | strip }} {% unless has_tail %} flex-grow-1 mb-5{% endunless %}">
-      {% capture _content %}
-        {% if layout.refactor or page.layout == 'page' %}
-          {% include refactor-content.html content=content lang=lang %}
-        {% else %}
-          {{ content }}
-        {% endif %}
-      {% endcapture %}
-
-      {% if page.layout == 'page' or page.collection == 'tabs' %}
-        {% assign tab_key = page.title | downcase %}
-        {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
-        <h1 class="dynamic-title">
-          {{ title }}
-        </h1>
-        <div class="post-content">
-          {{ _content }}
-        </div>
-      {% else %}
-        {{ _content }}
-      {% endif %}
+{% capture _content %}
+  {% if layout.refactor or page.layout == 'page' %}
+    {% include refactor-content.html content=content lang=lang %}
+  {% else %}
+    {{ content }}
+  {% endif %}
+{% endcapture %}
+
+<article class="px-1">
+  {% if page.layout == 'page' or page.collection == 'tabs' %}
+    {% assign tab_key = page.title | downcase %}
+    {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
+    <h1 class="dynamic-title">
+      {{ title }}
+    </h1>
+    <div class="content">
+      {{ _content }}
     </div>
-  </div>
-  <!-- #core-wrapper -->
-
-  <!-- panel -->
-  <div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
-    <div class="access">
-      {% include_cached update-list.html lang=lang %}
-      {% include_cached trending-tags.html lang=lang %}
-    </div>
-
-    {% for _include in layout.panel_includes %}
-      {% assign _include_path = _include | append: '.html' %}
-      {% include {{ _include_path }} lang=lang %}
-    {% endfor %}
-  </div>
-</div>
-
-<div class="row">
-  <!-- tail -->
-  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4{% if has_tail%} mt-5{% endif %}">
-    {% if has_tail %}
-      {% for _include in layout.tail_includes %}
-        {% assign _include_path = _include | append: '.html' %}
-        {% include {{ _include_path }} lang=lang %}
-      {% endfor %}
-    {% endif %}
-
-    {% include_cached footer.html lang=lang %}
-  </div>
-</div>
+  {% else %}
+    {{ _content }}
+  {% endif %}
+</article>
diff --git a/_layouts/post.html b/_layouts/post.html
index 77822a674fd..0b99d49c1ba 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -11,9 +11,10 @@
 
 {% include lang.html %}
 
-<h1 data-toc-skip>{{ page.title }}</h1>
+<header>
+  <h1 data-toc-skip>{{ page.title }}</h1>
 
-<div class="post-meta text-muted">
+  <div class="post-meta text-muted">
     <!-- published date -->
     <span>
       {{ site.data.locales[lang].post.posted }}
@@ -22,99 +23,101 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
     <!-- lastmod date -->
     {% if page.last_modified_at and page.last_modified_at != page.date %}
-    <span>
-      {{ site.data.locales[lang].post.updated }}
-      {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
-    </span>
+      <span>
+        {{ site.data.locales[lang].post.updated }}
+        {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
+      </span>
     {% endif %}
 
-  {% if page.image %}
-    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
-    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
-    {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
+    {% if page.image %}
+      {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+      {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+      {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
 
-    {% capture lqip %}
+      {% capture lqip %}
       {% if page.image.lqip %}
         lqip="{{ page.image.lqip }}"
       {% endif %}
     {% endcapture %}
 
-    <div class="mt-3 mb-3">
-      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
-      {%- if page.image.alt -%}
-        <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {%- endif -%}
-    </div>
-  {% endif %}
-
-  <div class="d-flex justify-content-between">
-    <!-- author(s) -->
-    <span>
-      {% if page.author %}
-        {% assign authors = page.author %}
-      {% elsif page.authors %}
-        {% assign authors = page.authors %}
-      {% endif %}
-
-      {{ site.data.locales[lang].post.written_by }}
+      <div class="mt-3 mb-3">
+        <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
+        {%- if page.image.alt -%}
+          <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
+        {%- endif -%}
+      </div>
+    {% endif %}
 
-      <em>
-      {% if authors %}
-        {% for author in authors %}
-          <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
-          {% unless forloop.last %}</em>, <em>{% endunless %}
-        {% endfor %}
-      {% else %}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
-      {% endif %}
-      </em>
-    </span>
+    <div class="d-flex justify-content-between">
+      <!-- author(s) -->
+      <span>
+        {% if page.author %}
+          {% assign authors = page.author %}
+        {% elsif page.authors %}
+          {% assign authors = page.authors %}
+        {% endif %}
+
+        {{ site.data.locales[lang].post.written_by }}
+
+        <em>
+          {% if authors %}
+            {% for author in authors %}
+              <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+              {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
+            {% endfor %}
+          {% else %}
+            <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
+          {% endif %}
+        </em>
+      </span>
 
-    <div>
       <!-- read time -->
       {% include read-time.html content=content prompt=true lang=lang %}
     </div>
+    <!-- .d-flex -->
+  </div>
+  <!-- .post-meta -->
+</header>
 
-  </div> <!-- .d-flex -->
-
-</div> <!-- .post-meta -->
-
-<div class="post-content">
+<div class="content">
   {{ content }}
 </div>
 
 <div class="post-tail-wrapper text-muted">
-
   <!-- categories -->
   {% if page.categories.size > 0 %}
-  <div class="post-meta mb-3">
-    <i class="far fa-folder-open fa-fw me-1"></i>
-    {% for category in page.categories %}
-      <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
-      {%- unless forloop.last -%}, {%- endunless -%}
-    {% endfor %}
-  </div>
+    <div class="post-meta mb-3">
+      <i class="far fa-folder-open fa-fw me-1"></i>
+      {% for category in page.categories %}
+        <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
+        {%- unless forloop.last -%},{%- endunless -%}
+      {% endfor %}
+    </div>
   {% endif %}
 
   <!-- tags -->
   {% if page.tags.size > 0 %}
-  <div class="post-tags">
-    <i class="fa fa-tags fa-fw me-1"></i>
+    <div class="post-tags">
+      <i class="fa fa-tags fa-fw me-1"></i>
       {% for tag in page.tags %}
-      <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
-          class="post-tag no-text-decoration" >
-        {{- tag -}}
-      </a>
+        <a
+          href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
+          class="post-tag no-text-decoration"
+        >
+          {{- tag -}}
+        </a>
       {% endfor %}
-  </div>
+    </div>
   {% endif %}
 
-  <div class="post-tail-bottom
-    d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
+  <div
+    class="
+      post-tail-bottom
+      d-flex justify-content-between align-items-center mt-5 pb-2
+    "
+  >
     <div class="license-wrapper">
-
       {% if site.data.locales[lang].copyright.license.template %}
-
         {% capture _replacement %}
         <a href="{{ site.data.locales[lang].copyright.license.link }}">
           {{ site.data.locales[lang].copyright.license.name }}
@@ -122,12 +125,11 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         {% endcapture %}
 
         {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
-
       {% endif %}
     </div>
 
     {% include post-sharing.html lang=lang %}
-
-  </div><!-- .post-tail-bottom -->
-
-</div><!-- div.post-tail-wrapper -->
+  </div>
+  <!-- .post-tail-bottom -->
+</div>
+<!-- div.post-tail-wrapper -->
diff --git a/_layouts/tag.html b/_layouts/tag.html
index 3b90b8cb829..d766d099d8c 100644
--- a/_layouts/tag.html
+++ b/_layouts/tag.html
@@ -11,12 +11,12 @@ <h1 class="ps-lg-2">
     {{ page.title }}
     <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
-  <ul class="post-content ps-0">
+  <ul class="content ps-0">
     {% for post in page.posts %}
       <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
-        {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
+        {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
       </li>
     {% endfor %}
   </ul>
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 046071a30ee..d4e23ef88b8 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -216,7 +216,7 @@ i {
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
@@ -225,7 +225,7 @@ i {
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
 }
@@ -233,6 +233,9 @@ i {
 #panel-wrapper {
   /* the headings */
   .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
     @include label(inherit);
   }
 
@@ -367,7 +370,10 @@ i {
   }
 }
 
-.post {
+main {
+  line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
+
   h1 {
     margin-top: 2rem;
     margin-bottom: 1.5rem;
@@ -381,6 +387,14 @@ i {
       }
     }
   }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-meta {
@@ -397,7 +411,7 @@ i {
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
@@ -479,7 +493,7 @@ i {
   ::marker {
     color: var(--text-muted-color);
   }
-} /* .post-content */
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -738,6 +752,7 @@ $btn-mb: 0.5rem;
   }
 
   .site-title {
+    font-family: inherit;
     font-weight: 900;
     font-size: 1.75rem;
     line-height: 1.2;
@@ -894,7 +909,7 @@ $btn-mb: 0.5rem;
   width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
@@ -907,8 +922,7 @@ $btn-mb: 0.5rem;
 }
 
 #topbar {
-  /* icons */
-  i {
+  button i {
     color: #999999;
   }
 
@@ -937,11 +951,11 @@ $btn-mb: 0.5rem;
   display: none;
 }
 
-#search-wrapper {
+search {
   display: flex;
   width: 100%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-border-color);
+  border: 1px solid var(--search-border-color);
   background: var(--main-bg);
   padding: 0 0.5rem;
 
@@ -955,7 +969,6 @@ $btn-mb: 0.5rem;
 /* 'Cancel' link */
 #search-cancel {
   color: var(--link-color);
-  margin-left: 0.75rem;
   display: none;
   white-space: nowrap;
 
@@ -1035,7 +1048,7 @@ $btn-mb: 0.5rem;
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
@@ -1073,19 +1086,6 @@ $btn-mb: 0.5rem;
   white-space: nowrap;
 }
 
-#core-wrapper {
-  line-height: 1.75;
-  min-height: calc(100vh - $topbar-height - $footer-height);
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
@@ -1108,7 +1108,7 @@ $btn-mb: 0.5rem;
 }
 
 #topbar-wrapper.row,
-#main > .row,
+#main-wrapper > .container > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
@@ -1204,10 +1204,8 @@ $btn-mb: 0.5rem;
 */
 
 @media all and (max-width: 576px) {
-  #core-wrapper {
-    min-height: calc(100vh - $topbar-height - $footer-height-large);
-
-    .post-content {
+  main {
+    .content {
       > blockquote[class^='prompt-'] {
         @include ml-mr(-1rem);
 
@@ -1232,7 +1230,7 @@ $btn-mb: 0.5rem;
     @extend %full-width;
   }
 
-  #main {
+  #main-wrapper > .container {
     @extend %full-width;
     @include pl-pr(0);
   }
@@ -1250,6 +1248,10 @@ $btn-mb: 0.5rem;
     }
   }
 
+  main {
+    min-height: calc(100vh - $topbar-height - $footer-height-large);
+  }
+
   footer {
     @include slide;
 
@@ -1283,7 +1285,7 @@ $btn-mb: 0.5rem;
   }
 
   #topbar,
-  #main {
+  #main-wrapper > .container {
     max-width: 100%;
   }
 
@@ -1292,7 +1294,7 @@ $btn-mb: 0.5rem;
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
@@ -1302,7 +1304,7 @@ $btn-mb: 0.5rem;
     left: 0;
   }
 
-  #core-wrapper,
+  main,
   #panel-wrapper {
     margin-top: 0;
   }
@@ -1313,7 +1315,7 @@ $btn-mb: 0.5rem;
     display: block;
   }
 
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
@@ -1324,7 +1326,7 @@ $btn-mb: 0.5rem;
   h1.dynamic-title {
     display: none;
 
-    ~ .post-content {
+    ~ .content {
       margin-top: 2.5rem;
     }
   }
@@ -1351,7 +1353,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #search-wrapper {
+  search {
     max-width: $search-max-width;
   }
 
@@ -1360,13 +1362,13 @@ $btn-mb: 0.5rem;
     justify-content: start !important;
   }
 
-  .post {
+  main {
     h1 {
       margin-top: 3rem;
     }
   }
 
-  div.post-content .table-wrapper > table {
+  div.content .table-wrapper > table {
     min-width: 70%;
   }
 
@@ -1383,7 +1385,7 @@ $btn-mb: 0.5rem;
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
-  #main .col-lg-11 {
+  #main-wrapper > .container .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1410,7 +1412,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #main > div.row {
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
@@ -1418,7 +1420,7 @@ $btn-mb: 0.5rem;
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #search-wrapper {
+  search {
     margin-right: 4rem;
   }
 
@@ -1426,8 +1428,8 @@ $btn-mb: 0.5rem;
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1443,7 +1445,7 @@ $btn-mb: 0.5rem;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
 }
@@ -1465,19 +1467,19 @@ $btn-mb: 0.5rem;
     left: $sidebar-width-large;
   }
 
-  #search-wrapper {
+  search {
     margin-right: calc(
       #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
-  #main {
+  #main-wrapper > .container {
     max-width: $main-content-max-width;
     padding-left: 1.75rem !important;
     padding-right: 1.75rem !important;
   }
 
-  #core-wrapper,
+  main.col-12,
   #tail-wrapper {
     padding-right: 4.5rem !important;
   }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index a7e5e068d04..e7a0dec7186 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -11,7 +11,7 @@
 }
 
 %section {
-  #core-wrapper & {
+  main & {
     margin-top: 2.5rem;
     margin-bottom: 1.25rem;
 
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index cc03f160409..77c64ae194a 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -149,7 +149,7 @@ div[class^='language-'] {
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
-  .post-content > & {
+  .content > & {
     @include ml-mr(-1rem);
 
     border-radius: 0;
@@ -258,7 +258,7 @@ div {
 
 @media all and (min-width: 576px) {
   div[class^='language-'] {
-    .post-content > & {
+    .content > & {
       @include ml-mr(0);
 
       border-radius: $base-radius;
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 5a999860d75..780a3ef2f07 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -10,7 +10,7 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-$search-max-width: 210px !default;
+$search-max-width: 200px !default;
 $footer-height: 5rem !default;
 $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss
index f43f17cf877..2142d332141 100644
--- a/_sass/colors/typography-dark.scss
+++ b/_sass/colors/typography-dark.scss
@@ -48,7 +48,7 @@
   /* Topbar */
   --topbar-bg: rgb(27, 27, 30, 0.64);
   --topbar-text-color: var(--text-color);
-  --search-wrapper-border-color: rgb(55, 55, 55);
+  --search-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 
diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss
index f7037a033cc..f8c3891df3b 100644
--- a/_sass/colors/typography-light.scss
+++ b/_sass/colors/typography-light.scss
@@ -51,7 +51,7 @@
   /* Topbar */
   --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --search-wrapper-border-color: rgb(240, 240, 240);
+  --search-border-color: rgb(240, 240, 240);
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: #b8b8b8;
 
diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss
index 3b25db5c4ac..9e43a911ace 100644
--- a/_sass/layout/category-tag.scss
+++ b/_sass/layout/category-tag.scss
@@ -32,11 +32,6 @@
 
       font-size: 1.1rem;
     }
-
-    /* post's date */
-    > span:last-child {
-      white-space: nowrap;
-    }
   }
 }
 
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 3e8b7faf258..c09468352b9 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -5,7 +5,7 @@
 #post-list {
   margin-top: 2rem;
 
-  a.card-wrapper {
+  .card-wrapper {
     display: block;
 
     &:hover {
@@ -51,7 +51,7 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text.post-content {
+      .card-text.content {
         @extend %muted;
 
         p {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 615215e4bff..3e80dcbf5e0 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -47,13 +47,16 @@
 }
 
 h1 + .post-meta {
-  span + span::before {
+  > span + span::before {
     @include dot;
   }
 
-  em {
+  em,
+  time {
     color: var(--text-color);
+  }
 
+  em {
     a {
       color: inherit;
     }
@@ -165,9 +168,6 @@ h1 + .post-meta {
 }
 
 .post-navigation {
-  padding-top: 3rem;
-  padding-bottom: 4rem;
-
   .btn {
     @extend %btn-post-nav;
 
@@ -198,7 +198,7 @@ h1 + .post-meta {
       color: var(--text-muted-color);
       font-size: 0.65rem;
       text-transform: uppercase;
-      content: attr(prompt);
+      content: attr(aria-label);
     }
 
     &:first-child {
@@ -326,7 +326,7 @@ h1 + .post-meta {
     @include label(1.1rem, 600);
   }
 
-  em {
+  time {
     @extend %normal-font-style;
 
     color: var(--text-muted-color);
@@ -353,8 +353,12 @@ h1 + .post-meta {
 #tail-wrapper {
   min-height: 2rem;
 
-  > div:last-of-type {
-    margin-bottom: 2rem;
+  > *:not(:last-child) {
+    margin-top: 3rem;
+  }
+
+  > *:nth-last-child(2) {
+    margin-bottom: 3rem;
   }
 
   /* stylelint-disable-next-line selector-id-pattern */
@@ -391,7 +395,7 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 768px) {
-  .post-content > p > img {
+  .content > p > img {
     max-width: calc(100% + 1rem);
   }
 }
diff --git a/assets/404.html b/assets/404.html
index 0337bac3f68..5b46cc8c832 100644
--- a/assets/404.html
+++ b/assets/404.html
@@ -11,6 +11,4 @@
 
 {% include lang.html %}
 
-<div class="lead">
-  <p>{{ site.data.locales[lang].not_found.statment }}</p>
-</div>
+<p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>