From fd04f1bdeace19dc58104d691774d57851e6eaef Mon Sep 17 00:00:00 2001
From: amazingrise <8315221+AmazingRise@users.noreply.github.com>
Date: Sat, 14 Aug 2021 13:31:24 +0800
Subject: Remove Vue.js from source code.

---
 layouts/_default/baseof.html        |   3 +
 layouts/_default/section.html       |   4 +-
 layouts/_default/single.html        |   4 +-
 layouts/_default/taxonomy.html      |   4 +-
 layouts/_default/terms.html         |   4 +-
 layouts/index.html                  |   4 +-
 layouts/partials/comment.html       |  29 +++-
 layouts/partials/extrabar.html      |  13 +-
 layouts/partials/head.html          |  30 +---
 layouts/partials/journal.html       | 294 ------------------------------------
 layouts/partials/mobile-header.html |  21 ++-
 layouts/partials/sidebar.html       |   2 +-
 12 files changed, 57 insertions(+), 355 deletions(-)

(limited to 'layouts')

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index dd7fe01..757b685 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,12 +10,15 @@
             {{- partial "mobile-header.html" . -}}
             <!-- mobile header -->
             <div id="content">
+                <div id="streamContainer" class="stream-container">
                     {{- block "main" . }}{{- end }}
+                    </div>
             </div>
         
             {{- partial "mobile-footer.html" . -}}
             <!-- mobile footer -->
             </div>
     {{ partial "journal.html" .}}
+    <script src="{{"/js/journal.js" | relURL}}"></script>
     </body>
 </html>
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index d9a9dd8..5c23b4e 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div ref="streamContainer" class="stream-container">
+
     <div class="post-list-container post-list-container-shadow">
         {{ range .Paginator.Pages.GroupByDate "2006" }}
             <a class="a-block">
@@ -29,6 +29,6 @@
             {{ end }}
         {{ end }}
     </div>
-</div>
+
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 78bc079..f1e2a0c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div ref="streamContainer" class="stream-container">
+
     <div class="post-list-container post-list-container-shadow">
         <div class="post">
             {{ $post_class := "post-head-wrapper-text-only"}}
@@ -109,5 +109,5 @@
             </div>
         </div>
     </div>
-</div>
+
 {{ end }}
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 262a294..11ce644 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div ref="streamContainer" class="stream-container">
+
     <div class="post-list-container post-list-container-shadow">
         <div class="post-item-wrapper post-item-wrapper-no-hover">
             <div class="post-item post-item-no-gaps">
@@ -25,5 +25,5 @@
         </a>
         {{- end -}}
     </div>
-</div>
+
 {{ end }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index a35d85c..f31029f 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div ref="streamContainer" class="stream-container">
+
     <div class="post-list-container post-list-container-shadow">
         <a class="a-block">
             <div class="post-item-wrapper post-item-wrapper-no-hover">
@@ -27,6 +27,6 @@
                 </a>
         {{ end }}
     </div>
-</div>
+
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index f404871..5efb1d4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,7 +1,7 @@
 
 {{ define "main" }}
 
-<div ref="streamContainer" class="stream-container">
+
     <div class="post-list-container post-list-container-no-background">
         {{range .Paginator.Pages}}
             {{if and (.IsPage) (.Params.date)}}
@@ -36,5 +36,5 @@
         {{ end }}
         </a>
     </div>
-</div>
+
 {{ end }}
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
index cded446..4d19c87 100644
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@@ -10,21 +10,40 @@
 <div id="gitalk-container"></div>
 {{ end }}
 
-{{ if .Site.Params.enableValine }}
-<div id="vcomments"></div>
-<!-- Script moved to journal.html -->
-{{ end }}
-
 {{ if .Site.Params.livereId }}
 <div id="lv-container" data-id="city" data-uid={{.Site.Params.livereId}}>
 	<noscript>{{ i18n "comments_activate_js" }}</noscript>
 </div>
+<script type="text/javascript">
+    (function(d, s) {
+      var j, e = d.getElementsByTagName(s)[0];
+      if (typeof LivereTower === 'function') { return; }
+      j = d.createElement(s);
+      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+      j.async = true;
+      e.parentNode.insertBefore(j, e);
+    })(document, 'script');
+</script>
 {{ end }}
 
 {{ if .Site.Params.enableTwikoo }}
 <div id="tcomment"></div>
+<script>
+twikoo.init({
+    envId: {{.Site.Params.twikooEnvId}},
+    el: '#tcomment',
+    region: {{.Site.Params.twikooRegion}},
+});
+</script>
 {{ end }}
 
 {{ if .Site.Params.walineServer }}
 <div id="waline"></div>
+<script>
+    new Waline({
+        el: '#waline',
+        path: location.pathname,
+        serverURL: {{.Site.Params.walineServer}} ,
+    });
+    </script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/extrabar.html b/layouts/partials/extrabar.html
index c34ab35..85b4b1e 100644
--- a/layouts/partials/extrabar.html
+++ b/layouts/partials/extrabar.html
@@ -1,4 +1,4 @@
-<div ref="extraContainer" class="extra-container">
+<div id="extraContainer" class="extra-container">
     {{ if and (isset .Site.Params "googlesearchcode") (.IsHome) }}
     <script async src="https://cse.google.com/cse.js?cx={{.Site.Params.googleSearchCode}}"></script>
     <div class="gcse-searchbox-only" mobileLayout="true"></div>
@@ -15,13 +15,10 @@
             </i>
         </a>
         {{ if not .Site.Params.disableDarkMode }}
-        <a class="pagination-action" v-on:click="toggleDarkMode">
-            <i class="material-icons pagination-action-icon" v-if="isDarkMode">
-                brightness_4
-            </i>
-            <i class="material-icons pagination-action-icon" v-else="isDarkMode">
-                brightness_7
-            </i>
+        <a type="button" class="pagination-action" id="darkModeToggleButton">
+            <span class="material-icons pagination-action-icon" id="darkModeToggleIcon">
+                dark_mode
+            </span>
         </a>
         {{ end }}
         {{ if .Paginator }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dac390a..2851afb 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -32,7 +32,6 @@
 {{ end }}
 
 <link type="text/css" rel="stylesheet" href="{{"/vendor/css/bootstrap.min.css" | relURL}}">
-<script src="{{"/vendor/js/vue.min.js" | relURL}}" ></script>
 
 {{if .Site.Params.manifest}}
 <link rel="manifest" href="{{.Site.Params.manifest}}">
@@ -55,23 +54,19 @@
 <link rel="stylesheet" href="{{ $darkmode.Permalink }}" integrity="{{ $darkmode.Data.Integrity }}" media="screen">
 {{ end }}
 
-<script src="{{"/js/loadCSS.js" | relURL}}"></script>
+<script src="{{"/vendor/js/loadCSS.js" | relURL}}"></script>
 <script>
   loadCSS("https://fonts.googleapis.com/css?family=Fira+Mono|Material+Icons");
 </script>
 
+
+
 {{ if .Params.enableMathJax }}
   {{ partial "mathjax.html" . }}
 {{ end }}
 
 {{ if and (not (.Params.disableToC) ) (.IsPage) }}
-  {{ if not .Site.Params.enableAutoCollapse }}
-    <script src="{{"/js/toc.js" | relURL}}"></script>
-  {{ else }}
-    <script src="{{"/vendor/js/jquery.min.js" | relURL}}" ></script>
-    <script src="{{"/js/toc-collapse.js" | relURL}}"></script>
-    <script src="{{"/vendor/js/bootstrap.min.js" | relURL}}" ></script>
-  {{ end }}
+  <script src="{{"/js/toc.js" | relURL}}"></script>
 {{ end }}
 
 {{ if and (.Site.Params.enableGitalk) (.IsPage) }}
@@ -96,25 +91,9 @@
 
 {{ if and (.Site.Params.livereId) (.IsPage) }}
 <script type="text/javascript">
-$(
-  (function(d, s) {
-      var j, e = d.getElementsByTagName(s)[0];
-
-      if (typeof LivereTower === 'function') { return; }
-
-      j = d.createElement(s);
-      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
-      j.async = true;
-
-      e.parentNode.insertBefore(j, e);
-  })(document, 'script'));
 </script>
 {{ end }}
 
-{{ if and (.Site.Params.enableValine) (.IsPage) }}
-<script src='https://unpkg.com/valine@1.4.14/dist/Valine.min.js'></script>
-{{ end }}
-
 {{ if and (.Site.Params.disqusShortname) (.IsPage) }}
 <script src="https://cdn.jsdelivr.net/npm/vue-disqus@3/dist/vue-disqus.js"></script>
 {{ end }}
@@ -125,6 +104,7 @@ $(
 
 {{ if and (.Site.Params.walineServer) (.IsPage) }}
 <script src="//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js"></script>
+
 {{ end }}
 
 </head>
diff --git a/layouts/partials/journal.html b/layouts/partials/journal.html
index 32d917b..e69de29 100644
--- a/layouts/partials/journal.html
+++ b/layouts/partials/journal.html
@@ -1,294 +0,0 @@
-<script>
-let app;
-
-app = new Vue({
-    el: '#app',
-    data: {
-        scrollY: 0,
-        navOpacity: 0,
-        isDrawerOpen: false,
-        mounted: false,
-        isDarkMode: false
-    },
-    methods: {
-            sgn(t, x) {
-                let k = 1. / (1. - 2 * t);
-                if (x <= t) return 0;
-                else if (x >= 1 - t) return 1;
-                else {
-                    return k * (x - t);
-                }
-            },
-            handleScroll() {
-                this.scrollY = window.scrollY;
-                this.navOpacity = this.sgn(.0, Math.min(1, Math.max(0, window.scrollY / (this.pageHeadHeight() - this.navBarHeight() * 0.8))));
-                const {navBar, navBackground, navTitle, extraContainer, streamContainer} = this.$refs;
-
-                if (this.navOpacity >= 1) {
-                    navBackground.style.opacity = 1;
-                    navTitle.style.opacity = 1;
-                } else {
-                    navBackground.style.opacity = 0;
-                    navTitle.style.opacity = 0;
-                }
-            },
-            handleResize() {
-                const {navBar, navBackground, navTitle, extraContainer, streamContainer} = this.$refs;
-                extraContainer.style.left = (streamContainer.offsetWidth - extraContainer.offsetWidth) + 'px';
-            },
-            navBarHeight() {
-                return this.$refs.navBar.offsetHeight;
-            },
-            pageHeadHeight() {
-                return this.$refs.pageHead.offsetHeight;
-            },
-            toggleDrawer() {
-                this.isDrawerOpen = !this.isDrawerOpen;
-                document.getElementsByTagName('html')[0].style.overflow = this.isDrawerOpen ? 'hidden' : 'unset';
-            },
-            closeDrawer() {
-                this.isDrawerOpen = false;
-                document.getElementsByTagName('html')[0].style.overflow = this.isDrawerOpen ? 'hidden' : 'unset';
-            },
-            toggleDarkMode() {
-                this.isDarkMode = !this.isDarkMode;
-                if (this.isDarkMode==true){
-                    document.cookie = "night=1;path=/";
-                    document.body.classList.add("night");
-                } else {
-                    document.cookie = "night=0;path=/";
-                    document.body.classList.remove("night");
-                }
-            },
-            debounce(func, wait, options) {
-                let lastArgs,
-                    lastThis,
-                    maxWait,
-                    result,
-                    timerId,
-                    lastCallTime
-
-                let lastInvokeTime = 0
-                let leading = false
-                let maxing = false
-                let trailing = true
-
-                // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
-                const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')
-
-                if (typeof func !== 'function') {
-                    throw new TypeError('Expected a function')
-                }
-                function isObject(value) {
-                    const type = typeof value
-                    return value != null && (type === 'object' || type === 'function')
-                }
-
-                wait = +wait || 0
-                if (isObject(options)) {
-                    leading = !!options.leading
-                    maxing = 'maxWait' in options
-                    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
-                    trailing = 'trailing' in options ? !!options.trailing : trailing
-                }
-
-                function invokeFunc(time) {
-                    const args = lastArgs
-                    const thisArg = lastThis
-
-                    lastArgs = lastThis = undefined
-                    lastInvokeTime = time
-                    result = func.apply(thisArg, args)
-                    return result
-                }
-
-                function startTimer(pendingFunc, wait) {
-                    if (useRAF) {
-                    root.cancelAnimationFrame(timerId)
-                    return root.requestAnimationFrame(pendingFunc)
-                    }
-                    return setTimeout(pendingFunc, wait)
-                }
-
-                function cancelTimer(id) {
-                    if (useRAF) {
-                    return root.cancelAnimationFrame(id)
-                    }
-                    clearTimeout(id)
-                }
-
-                function leadingEdge(time) {
-                    // Reset any `maxWait` timer.
-                    lastInvokeTime = time
-                    // Start the timer for the trailing edge.
-                    timerId = startTimer(timerExpired, wait)
-                    // Invoke the leading edge.
-                    return leading ? invokeFunc(time) : result
-                }
-
-                function remainingWait(time) {
-                    const timeSinceLastCall = time - lastCallTime
-                    const timeSinceLastInvoke = time - lastInvokeTime
-                    const timeWaiting = wait - timeSinceLastCall
-
-                    return maxing
-                    ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
-                    : timeWaiting
-                }
-
-                function shouldInvoke(time) {
-                    const timeSinceLastCall = time - lastCallTime
-                    const timeSinceLastInvoke = time - lastInvokeTime
-
-                    // Either this is the first call, activity has stopped and we're at the
-                    // trailing edge, the system time has gone backwards and we're treating
-                    // it as the trailing edge, or we've hit the `maxWait` limit.
-                    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-                    (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
-                }
-
-                function timerExpired() {
-                    const time = Date.now()
-                    if (shouldInvoke(time)) {
-                    return trailingEdge(time)
-                    }
-                    // Restart the timer.
-                    timerId = startTimer(timerExpired, remainingWait(time))
-                }
-
-                function trailingEdge(time) {
-                    timerId = undefined
-
-                    // Only invoke if we have `lastArgs` which means `func` has been
-                    // debounced at least once.
-                    if (trailing && lastArgs) {
-                    return invokeFunc(time)
-                    }
-                    lastArgs = lastThis = undefined
-                    return result
-                }
-
-                function cancel() {
-                    if (timerId !== undefined) {
-                    cancelTimer(timerId)
-                    }
-                    lastInvokeTime = 0
-                    lastArgs = lastCallTime = lastThis = timerId = undefined
-                }
-
-                function flush() {
-                    return timerId === undefined ? result : trailingEdge(Date.now())
-                }
-
-                function pending() {
-                    return timerId !== undefined
-                }
-
-                function debounced(...args) {
-                    const time = Date.now()
-                    const isInvoking = shouldInvoke(time)
-
-                    lastArgs = args
-                    lastThis = this
-                    lastCallTime = time
-
-                    if (isInvoking) {
-                    if (timerId === undefined) {
-                        return leadingEdge(lastCallTime)
-                    }
-                    if (maxing) {
-                        // Handle invocations in a tight loop.
-                        timerId = startTimer(timerExpired, wait)
-                        return invokeFunc(lastCallTime)
-                    }
-                    }
-                    if (timerId === undefined) {
-                    timerId = startTimer(timerExpired, wait)
-                    }
-                    return result
-                }
-                debounced.cancel = cancel
-                debounced.flush = flush
-                debounced.pending = pending
-                return debounced
-                }
-
-    },
-    created() {
-        window.addEventListener('scroll', this.handleScroll);
-        window.addEventListener('resize', this.handleResize);
-        window._nonDesktop = function () {
-            let check = false;
-            (function (a) {
-                if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
-            })(navigator.userAgent || navigator.vendor || window.opera);
-            return check;
-        };
-        // From https://www.jdeal.cn/archives/Dark.html
-        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-        if (night==""){
-            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                {{ if .Site.Params.enableAutoDarkMode }}
-                this.toggleDarkMode();
-                {{ end }}
-            }
-        }else{
-            // If night is not empty
-            if (night=="1") {
-                this.toggleDarkMode();
-            }
-        }
-    },
-    mounted() {
-        this.handleScroll();
-        this.handleResize();
-        this.mounted = true;
-
-        {{ if and (.Site.Params.enableValine) (.IsPage) }}
-            new Valine({
-                el: '#vcomments',
-                appId: {{.Site.Params.valine.appId}},
-                appKey: {{.Site.Params.valine.appKey}},
-                requiredFields: ['nick','mail'],
-                enableQQ: true,
-                recordIP: true,
-                avatar: {{.Site.Params.valine.avator}},
-            })
-        {{ end }}
-        {{ if and (.Site.Params.walineServer) (.IsPage) }}
-            new Waline({
-                el: '#waline',
-                path: location.pathname,
-                serverURL: {{.Site.Params.walineServer}} ,
-            });
-        {{ end }}
-        {{ if and (.Site.Params.enableTwikoo) (.IsPage) }}
-            twikoo.init({
-                envId: {{.Site.Params.twikooEnvId}},
-                el: '#tcomment',
-                region: {{.Site.Params.twikooRegion}},
-            });
-        {{ end }}
-
-        document.querySelectorAll("table").forEach(function(elem){
-            elem.classList.add("table-striped");
-            elem.classList.add("table");
-            elem.classList.add("table-responsive");
-            elem.classList.add("table-hover");
-        })
-
-        {{ if and (not (.Params.disableToC) ) (.IsPage) }}
-        spy();
-        window.addEventListener('scroll', this.debounce(spy, 250, { 'maxWait': 250 }), false);
-        {{ end }}
-        
-    },
-    destroyed() {
-        window.removeEventListener('scroll', this.handleScroll);
-        window.removeEventListener('resize', this.handleResize);
-    }
-});
-
-//new SmoothScroll('a#globalBackToTop');
-
-</script>
\ No newline at end of file
diff --git a/layouts/partials/mobile-header.html b/layouts/partials/mobile-header.html
index 028b73c..61a582c 100644
--- a/layouts/partials/mobile-header.html
+++ b/layouts/partials/mobile-header.html
@@ -1,4 +1,4 @@
-<div class="single-column-drawer-container" ref="drawer"
+<div class="single-column-drawer-container" id="drawer"
      v-bind:class="{ 'single-column-drawer-container-active': isDrawerOpen }">
     <div class="drawer-content">
         <div class="drawer-menu">
@@ -38,32 +38,29 @@
     </div>
 </div>
 <transition name="fade">
-    <div v-bind:class="{ 'single-column-drawer-mask': mounted }" v-if="isDrawerOpen" v-on:click="toggleDrawer"></div>
+    <div id="drawer-mask" v-bind:class="{ 'single-column-drawer-mask': mounted }" v-if="isDrawerOpen" v-on:click="toggleDrawer"></div>
 </transition>
-<nav ref="navBar" class="navbar sticky-top navbar-light single-column-nav-container">
-    <div ref="navBackground" class="nav-background"></div>
+<nav id="navBar" class="navbar sticky-top navbar-light single-column-nav-container">
+    <div id="navBackground" class="nav-background"></div>
     <div class="container container-narrow nav-content">
         <button id="nav_dropdown_btn" class="nav-dropdown-toggle" type="button" v-on:click="toggleDrawer">
             <i class="material-icons">
                 menu
             </i>
         </button>
-        <a ref="navTitle" class="navbar-brand" href="{{.Site.BaseURL}}">
+        <a id="navTitle" class="navbar-brand" href="{{.Site.BaseURL}}">
             {{.Site.Title}}
         </a>
         {{ if not .Site.Params.disableDarkMode }}
-        <button type="button" class="nav-darkmode-toggle" v-on:click="toggleDarkMode">
-            <i class="material-icons" v-if="isDarkMode">
-                brightness_4
-            </i>
-            <i class="material-icons" v-else="isDarkMode">
-                brightness_7
+        <button type="button" class="nav-darkmode-toggle" id="darkModeToggleButton2">
+            <i class="material-icons" id="darkModeToggleIcon2">
+                dark_mode
             </i>
         </button>
         {{ end }}
     </div>
 </nav>
-<div class="single-column-header-container" ref="pageHead"
+<div class="single-column-header-container" id="pageHead"
      v-bind:style="{ transform: 'translateZ(0px) translateY('+.3*scrollY+'px)', opacity: 1-navOpacity }">
     <a href="{{.Site.BaseURL}}">
         <div class="single-column-header-title">{{.Site.Title}}</div>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 897d951..fe52094 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,4 +1,4 @@
-<div ref="sideContainer" class="side-container">
+<div id="sideContainer" class="side-container">
     {{ if eq .Title .Site.Title}}
     <a class="a-block nav-head active" href="{{.Site.BaseURL}}">
     {{ else }}
-- 
cgit v1.2.3