diff --git a/404.md b/404.md
new file mode 100755
index 0000000..3432a3f
--- /dev/null
+++ b/404.md
@@ -0,0 +1,4 @@
+---
+layout: oops
+title: Oops...
+---
diff --git a/LICENSE b/LICENSE
index db0a389..8622d8e 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2022 Leo Deng
+Copyright (c) 2023 Leo Deng
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
diff --git a/README.md b/README.md
index 0121ecc..542537b 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 Object.prototype.toString.call(dg) // "[object WebDev]"
 ```
 
-Leo Deng © 2022
+Leo Deng © 2023
 
 <!--
 brew install rbenv ruby-build
diff --git a/_config.yml b/_config.yml
index 3fc58c5..b7411e6 100755
--- a/_config.yml
+++ b/_config.yml
@@ -10,13 +10,15 @@ excerpt_separator: <!-- more -->
 avatar:
   png: /assets/avatar.png
   svg: /assets/avatar.svg
-  anim: /assets/avatar-animation.svg
+  anima: /assets/avatar-animation.svg
 
 social:
   - id: github
     url: https://github.com/myst729
   - id: stackoverflow
     url: https://stackoverflow.com/users/1032492
+  - id: twitter
+    url: https://twitter.com/myst729
 
 social_inactive:
   - id: weibo
diff --git a/_includes/foot.html b/_includes/footer.html
similarity index 86%
rename from _includes/foot.html
rename to _includes/footer.html
index a5738fd..d506580 100644
--- a/_includes/foot.html
+++ b/_includes/footer.html
@@ -1,5 +1,5 @@
 {% for javascript in page.js %}
-<script src="{{ javascript }}"></script>
+<script src="{{ javascript | append_revision: '?v=' }}"></script>
 {% endfor %}
 
 <a id="fly" href="#">
@@ -9,7 +9,7 @@
   </svg>
 </a>
 
-<script defer>
+<script>
 ((win, doc, undef) => {
   const fly = doc.getElementById('fly')
   doc.addEventListener('scroll', (e) => {
diff --git a/_includes/head.html b/_includes/head.html
index 9f9e9a2..22f61de 100755
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="color-scheme" content="light dark">
   <title>
-    {% if page.title == 'home' %}
+    {% if page.layout == 'home' %}
       {{ site.title }} // {{ site.tagline }}
     {% elsif page.layout == 'loop' %}
       /{{ page.title }}/ &laquo; {{ site.title }}
@@ -15,8 +15,8 @@
   <link rel="icon" type="image/png" href="{{ site.avatar.png | relative_url }}" sizes="32x32" />
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | append_revision: '?v=' | relative_url }}">
 
-  {% for css in page.css %}
-  <link rel="stylesheet" href="{{ css | append_revision: '?v=' }}">
+  {% for stylesheet in page.css %}
+  <link rel="stylesheet" href="{{ stylesheet | append_revision: '?v=' }}">
   {% endfor %}
 
   {% include theme.html %}
diff --git a/_includes/top.html b/_includes/header.html
similarity index 100%
rename from _includes/top.html
rename to _includes/header.html
diff --git a/_includes/icons/twitter.svg b/_includes/icons/twitter.svg
new file mode 100644
index 0000000..35f8ac7
--- /dev/null
+++ b/_includes/icons/twitter.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
\ No newline at end of file
diff --git a/_includes/switch-lite.html b/_includes/switch-lite.html
index a305685..6d1119b 100644
--- a/_includes/switch-lite.html
+++ b/_includes/switch-lite.html
@@ -1,22 +1,22 @@
-<label class="theme-switch-lite" for="toggle">
-  <input type="checkbox" id="toggle" />
-  <div class="slider"></div>
+<label class="theme-switch-lite" for="theme-switch-toggle">
+  <input type="checkbox" id="theme-switch-toggle" />
+  <div class="theme-switch-slider"></div>
 </label>
 
-<script defer>
+<script>
 ((win, doc, undef) => {
-  const toggle = doc.getElementById('toggle')
+  const toggle = doc.getElementById('theme-switch-toggle')
   toggle.checked = doc.documentElement.dataset.theme === 'dark'
 
   toggle.addEventListener('change', (e) => {
     const selectedTheme = e.target.checked ? 'dark' : 'light'
-    localStorage.setItem('liteTheme', selectedTheme)
+    localStorage.setItem('theme-value-lite', selectedTheme)
     doc.documentElement.dataset.theme = selectedTheme
   }, false)
 
   const mql = win.matchMedia('(prefers-color-scheme: dark)')
   mql.addEventListener('change', (e) => {
-    const storedTheme = localStorage.getItem('liteTheme')
+    const storedTheme = localStorage.getItem('theme-value-lite')
     const systemTheme = e.matches ? 'dark' : 'light'
     if (!storedTheme) {
       doc.documentElement.dataset.theme = systemTheme
diff --git a/_includes/switch.html b/_includes/switch.html
index 5cbdbd0..d4b38fe 100644
--- a/_includes/switch.html
+++ b/_includes/switch.html
@@ -1,7 +1,7 @@
-<label class="theme-switch" for="select">
-  <input type="checkbox" id="select" />
+<label class="theme-switch" for="theme-switch-select">
+  <input type="checkbox" id="theme-switch-select" />
   {% for theme in site.themes %}
-  <div class="icon-{{ theme }}">
+  <div class="theme-switch-icon theme-switch-icon-{{ theme }}">
     {% include icons/{{ theme }}.svg %}
   </div>
   {% endfor %}
@@ -17,8 +17,8 @@
 
 <script>
 ((win, doc, undef) => {
-  const storedTheme = localStorage.getItem('theme')
-  const themeSelect = doc.getElementById('select')
+  const storedTheme = localStorage.getItem('theme-value')
+  const themeSelect = doc.getElementById('theme-switch-select')
   const themeOptions = doc.querySelectorAll('.theme-switch-option')
   const mql = win.matchMedia('(prefers-color-scheme: dark)')
   const bindSwitchAction = (el) => {
@@ -26,10 +26,10 @@
       const option = el.dataset.option
       themeSelect.dataset.active = option
       if (option === 'auto') {
-        localStorage.removeItem('theme')
+        localStorage.removeItem('theme-value')
         doc.documentElement.dataset.theme = mql.matches ? 'dark' : 'light'
       } else {
-        localStorage.setItem('theme', option)
+        localStorage.setItem('theme-value', option)
         doc.documentElement.dataset.theme = option
       }
     }, false)
diff --git a/_includes/theme.html b/_includes/theme.html
index 40e7de1..ba26e02 100644
--- a/_includes/theme.html
+++ b/_includes/theme.html
@@ -1,9 +1,9 @@
 <script>
-  ((win, doc, undef) => {
-    const key = win.useLiteTheme ? 'liteTheme' : 'theme'
-    const storedTheme = localStorage.getItem(key)
-    const mql = win.matchMedia('(prefers-color-scheme: dark)')
-    const systemTheme = mql.matches ? 'dark' : 'light'
-    doc.documentElement.dataset.theme = storedTheme || systemTheme
-  })(window, document)
+((win, doc, undef) => {
+  const key = win.useLiteTheme ? 'theme-value-lite' : 'theme-value'
+  const storedTheme = localStorage.getItem(key)
+  const mql = win.matchMedia('(prefers-color-scheme: dark)')
+  const systemTheme = mql.matches ? 'dark' : 'light'
+  doc.documentElement.dataset.theme = storedTheme || systemTheme
+})(window, document)
 </script>
diff --git a/_layouts/default.html b/_layouts/default.html
index df2ffab..e63aee6 100755
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -2,12 +2,12 @@
 <html>
   {% include head.html %}
   <body>
-    {% include top.html %}
+    {% include header.html %}
     <div class="wrap">
       <div class="container content">
         {{ content }}
       </div>
     </div>
-    {% include foot.html %}
+    {% include footer.html %}
   </body>
 </html>
diff --git a/404.html b/_layouts/oops.html
similarity index 73%
rename from 404.html
rename to _layouts/oops.html
index 1ba62d6..ece8266 100755
--- a/404.html
+++ b/_layouts/oops.html
@@ -1,9 +1,8 @@
 ---
 layout: default
-title: '404: Page not found'
 ---
 
 <div class="page-404">
-  <h1 class="page-title">404: Page not found</h1>
+  <h1 class="page-title">Oops...</h1>
   <p class="lead">Sorry, we’ve misplaced that URL or it’s pointing to something that doesn’t exist. <a href="/">Head back home</a> to try finding it again.</p>
 </div>
diff --git a/_layouts/post.html b/_layouts/post.html
index 940bf37..e4d796a 100755
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -8,7 +8,7 @@ <h1 class="post-title">{{ page.title }}</h1>
   <code class="post-tag post-tag-{{ page.tag[1] }}">{{ page.tag[0] }}</code>
   <span class="post-date">{{ page.date }}</span>
   <hr>
-  <div class="body{% if page.toc == true %} toc-target{% endif %}">
+  <div class="body">
     {{ content }}
     <hr>
   </div>
diff --git a/_layouts/splash.html b/_layouts/splash.html
index 9dae150..4b3b262 100755
--- a/_layouts/splash.html
+++ b/_layouts/splash.html
@@ -72,7 +72,7 @@
         user-select: none;
         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
       }
-      .slider {
+      .theme-switch-slider {
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -85,7 +85,7 @@
         opacity: .75;
         transition: background-color ease-out .3s, opacity ease-out .3s;
       }
-      .slider:before {
+      .theme-switch-slider:before {
         content: '';
         background-color: var(--color-reverse);
         border-radius: 8px;
@@ -93,14 +93,14 @@
         height: 16px;
         transition: background-color ease-out .3s, transform ease-out .3s;
       }
-      #toggle {
+      #theme-switch-toggle {
         display: none;
       }
-      #toggle:checked + .slider:before {
+      #theme-switch-toggle:checked + .theme-switch-slider:before {
         transform: translateX(24px);
       }
       @media (hover: hover) {
-        .slider:hover {
+        .theme-switch-slider:hover {
           opacity: 1;
         }
       }
@@ -116,7 +116,7 @@
     </span>
     <p></p>
     {% include switch-lite.html %}
-    <script defer>
+    <script>
       ((win, doc, undef) => {
         let body = doc.body
         let span = body.querySelector('span')
diff --git a/_sass/groove.scss b/_sass/groove.scss
index 6ea684d..dd3a1af 100644
--- a/_sass/groove.scss
+++ b/_sass/groove.scss
@@ -19,6 +19,7 @@
   --color-dimmest: #c0c0c0;
   --color-median: #717171;
   --color-heavy: #202020;
+  --color-shadow: #e0e0e0;
   --color-transparent: rgb(255, 255, 255, 0);
 }
 
@@ -36,6 +37,7 @@
   --color-dimmest: #666;
   --color-median: #aaa;
   --color-heavy: #e0e0e0;
+  --color-shadow: #000;
   --color-transparent: rgb(255, 255, 255, 0);
 }
 
@@ -62,12 +64,12 @@ body {
 html {
   font-family: Corbel, Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Bitstream Vera Sans, Liberation Sans, Verdana, Verdana Ref, sans-serif;
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 1.66;
   scroll-behavior: smooth;
 }
 @media (min-width: 38em) {
   html {
-    font-size: 20px;
+    font-size: 19px;
   }
 }
 
@@ -221,7 +223,7 @@ cite:before {
 }
 @media (min-width: 30em) {
   blockquote {
-    padding-right: 5rem;
+    padding-right: 2rem;
     padding-left: 1.25rem;
   }
 }
@@ -269,9 +271,7 @@ tbody tr:nth-child(odd) th {
   position: relative;
   user-select: none;
   -webkit-tap-highlight-color: var(--color-transparent);
-  .icon-auto,
-  .icon-light,
-  .icon-dark {
+  &-icon {
     cursor: pointer;
     opacity: 0;
     transition: opacity ease-out .3s;
@@ -285,9 +285,9 @@ tbody tr:nth-child(odd) th {
   &-dropdown {
     display: none;
     background-color: var(--color-primary);
-    // border: 1px solid var(--color-dimmest);
+    // box-shadow: 0 0 5px 0 var(--color-shadow);
+    border: 1px solid var(--color-shadow);
     border-radius: .4rem;
-    box-shadow: 0 0 5px 0 var(--color-dimmest);
     list-style: none;
     width: 6rem;
     margin: 0;
@@ -295,7 +295,6 @@ tbody tr:nth-child(odd) th {
     position: absolute;
     right: 0;
     top: 2rem;
-
   }
   &-option {
     margin: 0;
@@ -313,6 +312,9 @@ tbody tr:nth-child(odd) th {
     width: 1.25rem;
     height: 1.25rem;
     fill: var(--color-dimmest);
+    &:hover {
+      fill: var(--color-median);
+    }
   }
 }
 
@@ -322,11 +324,11 @@ tbody tr:nth-child(odd) th {
   }
 }
 
-#select {
+#theme-switch-select {
   display: none;
-  &[data-active="auto"] ~ .icon-auto,
-  &[data-active="light"] ~ .icon-light,
-  &[data-active="dark"] ~ .icon-dark {
+  &[data-active="auto"] ~ .theme-switch-icon-auto,
+  &[data-active="light"] ~ .theme-switch-icon-light,
+  &[data-active="dark"] ~ .theme-switch-icon-dark {
     opacity: 1;
     z-index: 5;
   }
@@ -337,7 +339,7 @@ tbody tr:nth-child(odd) th {
 
 @media (hover: hover) {
   .theme-switch-option:hover {
-    background-color: var(--color-dimmer);
+    background-color: var(--color-dim);
     svg {
       fill: var(--color-median);
     }
@@ -368,7 +370,7 @@ tbody tr:nth-child(odd) th {
   }
 }
 
-.slider {
+.theme-switch-slider {
   display: flex;
   align-items: center;
   background-color: var(--color-dimmest);
@@ -388,9 +390,9 @@ tbody tr:nth-child(odd) th {
   }
 }
 
-#toggle {
+#theme-switch-toggle {
   display: none;
-  &:checked + .slider:before {
+  &:checked + .theme-switch-slider:before {
     transform: translateX(24px);
   }
 }
@@ -405,7 +407,7 @@ tbody tr:nth-child(odd) th {
 }
 
 @media (hover: hover) {
-  .slider:hover {
+  .theme-switch-slider:hover {
     background-color: var(--color-median);
   }
 }
@@ -416,7 +418,7 @@ tbody tr:nth-child(odd) th {
     margin-left: .5rem;
     margin-right: 0;
   }
-  .slider {
+  .theme-switch-slider {
     width: 32px;
     height: 18px;
     padding: 3px;
@@ -425,7 +427,7 @@ tbody tr:nth-child(odd) th {
       height: 12px;
     }
   }
-  #toggle:checked + .slider:before {
+  #theme-switch-toggle:checked + .theme-switch-slider:before {
     transform: translateX(14px);
   }
 }
@@ -457,19 +459,19 @@ tbody tr:nth-child(odd) th {
   margin-left:  auto;
   margin-right: auto;
 }
-@media (min-width: 38em) {
+@media (min-width: 44em) {
   .container {
     max-width: 32rem;
   }
 }
-@media (min-width: 56em) {
+@media (min-width: 58em) {
   .container {
-    max-width: 38rem;
+    max-width: 44rem;
   }
 }
-@media (min-width: 68em) {
+@media (min-width: 74em) {
   .container {
-    max-width: 50rem;
+    max-width: 58rem;
   }
 }
 
diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg
new file mode 100644
index 0000000..c420cbb
--- /dev/null
+++ b/assets/icons/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="256" height="256"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.md
similarity index 63%
rename from index.html
rename to index.md
index 171e0c6..e4d427d 100644
--- a/index.html
+++ b/index.md
@@ -1,4 +1,3 @@
 ---
 layout: home
-title: home
 ---
diff --git a/splash.html b/splash.md
similarity index 100%
rename from splash.html
rename to splash.md