diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 591a1bf..098548e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -4,23 +4,23 @@
 
   <body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
     {{ partial "header.html" . }}
-
-    <main class="main">{{ block "main" . }}{{ end }}</main>
-
+    <main class="main">
+      {{ block "main" . }}{{ end }}
+    </main>
     {{ partial "footer.html" . }}
   </body>
   <script>
-      let bodyClx = document.body.classList;
-      let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
-      let darkVal = localStorage.getItem('dark');
+      let bodyClasses = document.body.classList;
+      let systemDarkModeMatch = window.matchMedia('(prefers-color-scheme: dark)');
+      let localStorageDarkMode = localStorage.getItem('dark');
 
       let setDark = (isDark) => {
-        bodyClx[isDark ? 'add' : 'remove']('dark');
+        bodyClasses[isDark ? 'add' : 'remove']('dark');
         localStorage.setItem('dark', isDark ? 'yes' : 'no');
       };
 
-      setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
-      requestAnimationFrame(() => bodyClx.remove('not-ready'));
-      sysDark.addEventListener('change', (event) => setDark(event.matches));
+      setDark(localStorageDarkMode ? localStorageDarkMode === 'yes' : systemDarkModeMatch.matches);
+      requestAnimationFrame(() => bodyClasses.remove('not-ready'));
+      systemDarkModeMatch.addEventListener('change', (event) => setDark(event.matches));
   </script>
 </html>
