theme update

404.md

@@ -0,0 +1,4 @@
+---
+layout: oops
+title: Oops...
+---

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

README.md

@@ -6,7 +6,7 @@
 Object.prototype.toString.call(dg) // "[object WebDev]"
 ```
 
-Leo Deng © 2022
+Leo Deng © 2023
 
 <!--
 brew install rbenv ruby-build

_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

_includes/foot.html → _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) => {

_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 %}

_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

_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,19 +17,19 @@
 
 <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) => {
     el.addEventListener('click', (e) => {
       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)

_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>

_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>

404.html → _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>

_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>

_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,22 +85,22 @@
         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;
         width: 16px;
         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')