sticker: make it toggle-able

Signed-off-by: Amneesh Singh <natto@weirdnatto.in>

css/default.css

@@ -336,6 +336,23 @@ video {
   align-items: center;
 }
 
+#sticker label:hover {
+  cursor: pointer;
+}
+
+#sticker-toggle {
+  display: none;
+}
+
+#sticker-toggle:checked ~ #sticker {
+  bottom: 1em;
+  left: 1em;
+}
+
+#sticker-toggle:checked ~ #sticker img {
+  display: none;
+}
+
 @media (max-width: 319px) {
   body {
     width: 90%;

flake.nix

@@ -42,6 +42,7 @@
             buildInputs = with pkgs; [
               cabal-install
               haskellPackages.fourmolu
+              prettier
 
               (texlive.combine {
                 inherit (texlive)

templates/default.html

@@ -54,13 +54,16 @@
         $endfor$
       </ul>
     </footer>
+    <input type="checkbox" id="sticker-toggle" />
     <div id="sticker">
-      hello!
-      <img
-        src="/images/personal/nyn.webp"
-        alt="いらっしゃいませ"
-        aria-hidden="true"
-      />
+      <label for="sticker-toggle"> hello! </label>
+      <label for="sticker-toggle">
+        <img
+          src="/images/personal/nyn.webp"
+          alt="いらっしゃいませ"
+          aria-hidden="true"
+        />
+      </label>
     </div>
   </body>
 </html>