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

styles/base.css

@@ -470,28 +470,60 @@ summary {
     .nav-settings {
         background-color: var(--accent);
         color: var(--background);
+        cursor: pointer;
         margin-left: auto !important;
         outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
+        padding: unset !important; /* unset the padding for the button itself so the button can take the padding to make the entire button clickable */
 
-        span {
-            transform: scale(1.5);
-            padding: 0 .5rem !important;
+        input[type="checkbox"] {
+            left: -100vw;
+            position: absolute;
+        }
+
+        label {
+            cursor: pointer;
+            overflow: hidden !important;
+            padding: .3rem .5rem !important;
+            position: relative;
+
+            [class^="tabler--"] {
+                padding: 0 .5rem !important;
+                pointer-events: none;
+                transform: translateY(.1rem) scale(1.5);
+                transition: all 1.3s;
+            }
+        }
+
+        label:hover {
+            [class^="tabler--"] {
+                transform: translateY(.1rem) scale(1.5) rotate(360deg);
+                transition: all 1.3s;
+            }
         }
 
         ul {
             background-color: var(--background);
             border-radius: 1rem;
             border: var(--accent) solid .15rem;
+            cursor: initial !important; /* reset the cursor otherwise it uses the pointer cursor */
+            margin-top: 1.2rem !important;
             max-height: 27rem;
+            max-width: 17rem;
             min-height: 27rem;
             min-width: 17rem;
-            max-width: 17rem;
             overflow: scroll;
             position: absolute;
             right: .4rem;
-            top: 2.2rem;
+            visibility: hidden;
+
+            /* inital "hidden" state, used for providing animation when activated */
+            opacity: 0;
+            scale: .5;
+            transform-origin: top right;
+            transition: opacity .3s, scale .3s, visibility .3s;
 
             li {
+                border-radius: 1rem;
                 color: var(--foreground);
                 list-style-type: none;
                 margin-left: -2rem;
@@ -500,8 +532,20 @@ summary {
                 span {
                     padding: .1rem 0px .1rem 0px !important;
                 }
+
+                h2 {
+                    margin: 0 !important;
+                }
             }
         }
+
+        input[type="checkbox"]:checked ~ ul {
+            /* makes the menu visibile when activated and makes it appear from the top right */
+            opacity: 1;
+            scale: 1;
+            transition: opacity .3s, scale .3s, visibility .3s;
+            visibility: visible;
+        }
     }
 
     .nav-systray {
@@ -530,10 +574,6 @@ summary {
     transition: .2s all;
     background-color: color-mix(in srgb, var(--accent) 40%, transparent);
     border-bottom: solid .2rem var(--accent);
-
-    .nav-accessibility {
-        border-left: .2rem solid var(--background);
-    }
 }
 
 /* --------------------------------------------------------------------
@@ -907,13 +947,29 @@ footer {
 
 /* disable certain animations if user has animations disabled on their system */
 
-@media (prefers-reduced-motion) {
+@media (prefers-reduced-motion: reduce) {
     body {
         background: var(--background) !important;
         animation: unset !important;
         -moz-animation: unset !important;
         -webkit-animation: unset !important;
     }
+
+    /* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
+    * {
+        transition: none !important;
+        animation: unset !important;
+        -moz-animation: unset !important;
+        -webkit-animation: unset !important;
+    }
+
+    /* fedi icon on /me should keep its animation (temp, find a better solution later) */
+    .fedi-icon {
+        animation: opacity-blink 4s infinite !important;
+    }
+    .fedi-icon-2 {
+        animation: opacity-blink-reverse 4s infinite !important;
+    }
 }
 
 /* different styling for elements in dark mode 
@@ -1011,13 +1067,19 @@ html[data-theme="dark"] {
                 background-color: var(--background);
                 border-radius: 1rem;
                 border: var(--accent) solid .15rem;
-                display: none;
                 height: max-content;
                 left: 0;
                 margin-top: .4rem !important;
                 position: absolute;
+                visibility: hidden;
                 width: max-content;
 
+                /* inital "hidden" state, used for providing animation when activated */
+                opacity: 0;
+                scale: .5;
+                transform-origin: top left;
+                transition: opacity .3s, scale .3s, visibility .3s;
+
                 li {
                     border-radius: 1rem;
                     list-style-type: none;
@@ -1073,8 +1135,12 @@ html[data-theme="dark"] {
                 }
             }
 
-            input[type="checkbox"]:checked~ul {
-                display: block;
+            input[type="checkbox"]:checked ~ ul {
+                /* makes the menu visibile when activated and makes it appear from the top right */
+                opacity: 1;
+                scale: 1;
+                transition: opacity .3s, scale .3s, visibility .3s;
+                visibility: visible;
             }
         }