swap settings menu implementation, add/fix up animations

_includes/layouts/navbar.njk

@@ -25,11 +25,15 @@
     <a class="nav-base nav-left nav-links nav-notebook" href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
     <a class="nav-base nav-left nav-links nav-webmaster" href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
     <a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
-    <details aria-label="Settings" class="nav-base nav-right nav-settings">
-        <summary><span aria-label="Settings" class="tabler--settings"></span></summary>
+    
+    <div class="nav-base nav-right nav-settings">
+        <input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
+        <label aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings">
+            <span class="tabler--settings">
+        </label>
         <ul>
             <li>
-                <p>Settings</p>
+                <h2>Settings</h2>
             </li>
             <li>
                 <hr class="solid">
@@ -104,7 +108,8 @@
                 <p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
             </li>
         </ul>
-    </details>
+    </div>
+    
     <p aria-hidden="true" class="nav-base nav-right nav-systray">
         <span class="tabler--bell"></span>
         <span class="tabler--volume"></span>

_includes/layouts/notebook.njk

@@ -25,7 +25,7 @@ permalink: "/notebook/"
     <main data-pagefind-body>
         <div id="search"></div>
         <h1><a href="#notebook">Notebook</a> <a href="./rss.xml"><span class="tabler--rss" style="transform: scale(1.5) translateY(.5rem);"></span></a></h1>
-        <p><b>NOTE:</b> this page is still a very heavy wip aaa aaa aaa</p>
+        <h2><b>NOTE:</b> This page is still heavily a work in progress, nothing on here is functional or what is meant to be.</h2>
         <p>A public facing journal for myself, as probably the best way to put it. A blog-ish, writeup-ish, rant-ish place to dump personal thoughts and such into for <a href="/me">myself</a>.</p>
         <span class="seperator"></span>
         <details open class="notebook article-category">