[NoJS] reimplementing js features without the js

2026-08-10 16:19:59 +02:00
7 changed files with 116 additions and 109 deletions
@@ -31,7 +31,7 @@ PAGES = [


 def buildPage(
-    filename: str, pageTitle: str, pageHtml: str, pageStyle: str, template: str
+    filename: str, pageTitle: str, pageHtml: str, pageStyle: str, template: str, lang: str
 ) -> str:
    template = template.replace("<!--TITLE-->", pageTitle)
    style = (
@@ -42,6 +42,13 @@ def buildPage(
    template = template.replace("<!--ADDITIONAL_STYLE-->", style)
    template = template.replace("PAGE_NAME", filename)
    template = template.replace("<!--MAIN-->", pageHtml)
+    
+    # Fix language switcher links
+    if lang == "en":
+        template = template.replace('href="/PAGE_NAME"', f'href="/en/{filename}"')
+    else:
+        template = template.replace('href="/en/PAGE_NAME"', f'href="/sr/{filename}"')
+    
    return template


@@ -57,7 +64,7 @@ def main():
                pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div>"
                pageHtml += f.read()
                html = buildPage(
-                    page["name"], page["titleSR"], pageHtml, page["style"], templateSR
+                    page["name"], page["titleSR"], pageHtml, page["style"], templateSR, "sr"
                )
                f = open(f'site/{page["name"]}.html', "w")
                f.write(html)
@@ -66,7 +73,7 @@ def main():
                pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Students found the bug' /></div>"
                pageHtml += f.read()
                html = buildPage(
-                    page["name"], page["titleEN"], pageHtml, page["style"], templateEN
+                    page["name"], page["titleEN"], pageHtml, page["style"], templateEN, "en"
                )
                f = open(f'site/en/{page["name"]}.html', "w")
                f.write(html)
@@ -6,7 +6,6 @@
  <link rel="stylesheet" href="/styles/style.css">
  <link rel="stylesheet" href="/styles/404.css">
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
-  <script src="/scripts/main.js"></script>
  <title>404</title>
 </head>
 <body>
@@ -32,17 +32,18 @@
    <link rel="stylesheet" href="/styles/style.css" />
    <link rel="stylesheet" href="/styles/deconference.css">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js"></script>
    <title>Dekonferencija Decentrala</title>
    <link rel="alternate" hreflang="en" href="/en/deconference" />
  </head>
  <body>
+    <input type="checkbox" id="menu-toggle" />
+    <input type="checkbox" id="theme-toggle" />
    <header>
      <a id="logo" href="/">
        <img src="/img/logo-light.svg" alt="Logo" />
        Decentrala
      </a>
-      <button id="theme-switcher"></button>
+      <label for="theme-toggle" id="theme-switcher"></label>
      <a class="lang" hreflang="en" href="/en/deconference">EN</a>
    </header>
    <main>
@@ -86,9 +87,9 @@
      </div>
    </main>
    <footer>
-      <button class="hamburger closed">
+      <label for="menu-toggle" class="hamburger">
        <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </button>
+      </label>
      <nav class="menu">
        <a href="/events">Događaji</a>
        <a href="/services">Servisi</a>
@@ -1,92 +0,0 @@
-(function () {
-  const theme = window.localStorage.getItem("theme");
-  const prefersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches;
-  const isDark = theme === "dark" || (!theme && prefersDark);
-
-  if (isDark) document.documentElement.classList.add("dark");
-
-  // Swap images as soon as DOM is ready (script runs in <head>, imgs not parsed yet)
-  if (isDark) {
-    window.addEventListener("DOMContentLoaded", () => {
-      document.querySelectorAll("img[src*='-light']").forEach((img) => {
-        img.src = img.src.replace("-light", "-dark");
-      });
-    }, { once: true });
-  }
-
-  window.changeTheme = (toDark) => {
-    if (toDark) {
-      window.localStorage.setItem("theme", "dark");
-      document.documentElement.classList.add("dark");
-      document.querySelectorAll("img[src*='-light']").forEach((img) => {
-        img.src = img.src.replace("-light", "-dark");
-      });
-    } else {
-      window.localStorage.setItem("theme", "light");
-      document.documentElement.classList.remove("dark");
-      document.querySelectorAll("img[src*='-dark']").forEach((img) => {
-        img.src = img.src.replace("-dark", "-light");
-      });
-    }
-  }
-})();
-
-window.addEventListener("DOMContentLoaded", () => {
-  const getById = (id) => document.getElementById(id);
-  const getByClass = (className) => document.getElementsByClassName(className)[0];
-
-  const themeBtn = getById("theme-switcher");
-  const hamburger = getByClass("hamburger");
-  const hamburgerIcon = hamburger?.children[0];
-  const menu = document.getElementsByTagName("nav")[0];
-  const main = document.getElementsByTagName("main")[0];
-  const isMenuOpen = () => hamburger?.classList.contains("open");
-
-  /* Functions */
-
-  const closeMenu = () => {
-    hamburger.classList = "hamburger closed"
-    hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
-    menu.classList = "menu closed";
-  }
-
-  const openMenu = () => {
-    hamburger.classList = "hamburger open"
-    hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
-    menu.classList = "menu open";
-  }
-
-  /* Listeners */
-
-  window.addEventListener("resize", () => isMenuOpen() && closeMenu());
-  if (main) main.addEventListener("click", () => isMenuOpen() && closeMenu());
-
-  /* Language persistence */
-  const currentLang = document.documentElement.lang || "sr";
-  const anchors = document.getElementsByTagName("a");
-  Array.from(anchors).forEach((a) => {
-    // Skip language switcher links
-    if (a.classList.contains("lang")) return;
-    const href = a.getAttribute("href");
-    if (!href) return;
-    if (href.startsWith("/")) {
-      // Replace existing language prefix or add one
-      if (href.startsWith("/sr") || href.startsWith("/en")) {
-        if (!href.startsWith(`/${currentLang}`)) {
-          a.setAttribute("href", `/${currentLang}${href.slice(3)}`);
-        }
-      } else if (currentLang !== "sr") {
-        // Only prepend language prefix for non-default languages
-        a.setAttribute("href", `/${currentLang}${href}`);
-      }
-    }
-  });
-  hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
-
-  if (themeBtn) {
-    themeBtn.addEventListener("click", () => {
-      const isDark = document.documentElement.classList.contains("dark");
-      changeTheme(!isDark);
-    });
-  }
-});
@@ -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;
  }
 }

@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <input type="checkbox" id="theme-toggle" />

    <!-- <pre>

@@ -32,16 +33,17 @@
    <link rel="stylesheet" href="/styles/style.css" />
    <!--ADDITIONAL_STYLE-->
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js"></script>
    <title><!--TITLE--> Decentrala</title>
    <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
  </head>
  <body>
+    <input type="checkbox" id="theme-toggle" />
+    <input type="checkbox" id="menu-toggle" />
    <header>
      <a id="logo" href="/en/index">
        <img src="/img/logo-light.svg" alt="Logo" /> Decentrala
      </a>
-      <button id="theme-switcher"></button>
+      <label for="theme-toggle" id="theme-switcher"></label>
      <a class="lang" hreflang="sr" href="/PAGE_NAME">SR</a>
    </header>
    <main>
@@ -50,9 +52,9 @@
      </div>
    </main>
    <footer>
-      <button class="hamburger closed">
+      <label for="menu-toggle" class="hamburger">
        <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </button>
+      </label>
      <nav class="menu">
        <a href="/en/events">Events</a>
        <a href="/en/services">Services</a>
@@ -32,17 +32,18 @@
    <link rel="stylesheet" href="/styles/style.css" />
    <!--ADDITIONAL_STYLE-->
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
-    <script src="/scripts/main.js"></script>
    <title><!--TITLE--> Decentrala</title>
    <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
  </head>
  <body>
+    <input type="checkbox" id="menu-toggle" />
+    <input type="checkbox" id="theme-toggle" />
    <header>
      <a id="logo" href="/">
        <img src="/img/logo-light.svg" alt="Logo" />
        Decentrala
      </a>
-      <button id="theme-switcher"></button>
+      <label for="theme-toggle" id="theme-switcher"></label>
      <a class="lang" hreflang="en" href="/en/PAGE_NAME">EN</a>
    </header>
    <main>
@@ -51,9 +52,9 @@
      </div>
    </main>
    <footer>
-      <button class="hamburger closed">
+      <label for="menu-toggle" class="hamburger">
        <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </button>
+      </label>
      <nav class="menu">
        <a href="/events">Događaji</a>
        <a href="/services">Servisi</a>