[NoJS] reimplementing js features without the js

site/styles/style.css

@@ -11,12 +11,39 @@
   --bg: var(--light-bg);
 }
 
-html.dark {
+/* Theme toggle via checkbox hack */
+#theme-toggle {
+  display: none;
+}
+
+/* Use :has() selector to detect checkbox state */
+body:has(#theme-toggle:checked) {
   --border: var(--dark-border);
   --text: var(--dark-text);
   --bg: var(--dark-bg);
 }
 
+body:has(#theme-toggle:checked) header #theme-switcher {
+  background: linear-gradient(
+    90deg,
+    var(--dark-border) 0%,
+    var(--dark-border) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
+body:has(#theme-toggle:checked) header #theme-switcher:hover {
+  border-color: var(--hightlight);
+  background: linear-gradient(
+    90deg,
+    var(--hightlight) 0%,
+    var(--hightlight) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
 @font-face {
   font-family: "Iosevka";
   src: url("/font/iosevka-regular.woff") format("woff");
@@ -123,6 +150,7 @@ a:visited {
     var(--bg) 51%,
     var(--bg) 100%
   );
+  cursor: pointer;
 }
 
 #theme-switcher:hover {
@@ -136,6 +164,27 @@ a:visited {
   );
 }
 
+#theme-toggle:checked ~ body header #theme-switcher {
+  background: linear-gradient(
+    90deg,
+    var(--dark-border) 0%,
+    var(--dark-border) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
+#theme-toggle:checked ~ body header #theme-switcher:hover {
+  border-color: var(--hightlight);
+  background: linear-gradient(
+    90deg,
+    var(--hightlight) 0%,
+    var(--hightlight) 50%,
+    var(--dark-bg) 51%,
+    var(--dark-bg) 100%
+  );
+}
+
 .lang {
   font-size: 2rem;
 }
@@ -212,6 +261,46 @@ button {
 
   .hamburger {
     display: block !important;
+    cursor: pointer;
+  }
+
+  #menu-toggle {
+    display: none;
+  }
+
+  #menu-toggle:checked ~ footer .menu {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #menu-toggle:checked ~ footer .hamburger {
+    position: relative;
+  }
+
+  #menu-toggle:checked ~ footer .hamburger::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("/img/strelica-opened-light.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  /* Show hamburger icon on mobile */
+  .hamburger {
+    cursor: pointer;
+  }
+
+  .hamburger img {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  #menu-toggle:checked ~ footer .hamburger img {
+    opacity: 0;
   }
 }