add nsfw toggle to site, some cleanup

_includes/styles/base.css

@@ -273,14 +273,14 @@ a {
     text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
     text-decoration-thickness: 0.1em;
     transition: 0.2s;
-}
 
-a:hover {
-    color: var(--link);
-    text-decoration-color: var(--accent);
-    text-decoration-skip-ink: none;
-    text-decoration-thickness: .3em;
-    transition: 0.2s;
+    &:hover {
+        color: var(--link);
+        text-decoration-color: var(--accent);
+        text-decoration-skip-ink: none;
+        text-decoration-thickness: .3em;
+        transition: 0.2s;
+    }
 }
 
 /* smol text */
@@ -295,6 +295,22 @@ li {
     padding-bottom: .5rem;
 }
 
+/* text with "title", little hover-over info tibblets */
+._info {
+    cursor: help;
+    text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-decoration-thickness: 0.1em;
+    transition: 0.2s;
+
+    &:hover {
+        text-decoration-color: color-mix(in srgb, var(--foreground) 80%, transparent);
+        text-decoration-skip-ink: none;
+        transition: 0.2s;
+    }
+}
+
 /* the tabler icons svgs styling */
 .tabler-icon,
 .icon .icon-tabler {
@@ -517,6 +533,107 @@ summary {
     }
 }
 
+/* ------------------
+- nsfw toggle group -
+------------------ */
+
+.nsfw-toggle-holder {
+    background-color: color-mix(in srgb, var(--background) 95%, white);
+    border-radius: 1rem;
+    border: .2rem solid var(--border);
+    color: var(--foreground);
+    padding: .5rem;
+    position: fixed;
+    max-width: 30rem;
+    margin-left: .4rem;
+    z-index: 30;
+    right: .4rem;
+    top: 3rem;
+    transition: 0.2s;
+
+    /* inital "shrunken" state */
+    opacity: .5;
+    scale: .75;
+    transform-origin: top right;
+
+
+    /* hide captions when unhovered */
+    .caption {
+        display: none;
+    }
+
+    &:hover {
+        transition: 0.2s;
+
+        /* hovered "full" state */
+        opacity: 1;
+        scale: 1;
+
+        .caption {
+            opacity: .9;
+            display: unset;
+        }
+    }
+
+    .nsfw-toggle, .spoil-nsfw-toggle {
+        display: block;
+    }
+
+    /* hide the spoil option if nsfw itself is disabled */
+    .spoil-nsfw-toggle {
+        display: none;
+        margin-top: 1rem;
+    }
+
+    &:has(input[type="checkbox"]#view-nsfw-content:checked) .spoil-nsfw-toggle {
+        display: inherit !important;
+    }
+
+    /* shrink it even more if on a small display */
+    @media screen and (max-width: 580px) {
+        scale: .5;
+    }
+}
+
+/* _is-nsfw class for elements that are "nsfw" - will be hidden and spoiled by default */
+._is-nsfw {
+    display: none;
+}
+
+/* inverse to remove elements if they aren't nsfw while the option is toggled */
+._is-nsfw-inverse {
+    display: inherit;
+}
+
+/* show if enabled */
+html:has(input[type="checkbox"]#view-nsfw-content:checked) {
+    ._is-nsfw {
+        display: inherit;
+    }
+
+    ._is-nsfw-inverse {
+        display: none;
+    }
+}
+
+/* blue/spoiler if enabled */
+html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
+    ._is-nsfw {
+        filter: blur(.4rem) contrast(200%);
+        transition: 0.2s;
+
+        &:hover {
+            filter: unset !important;
+            transition: 0.2s;
+        }
+    }
+    
+    /* _always-show to ignore the "spoiler" option */
+    ._always-show {
+        filter: unset !important;
+    }
+}
+
 /* ---------------
 - alt text popup -
 --------------- */