[NoJS] reimplementing js features without the js

2026-08-10 16:19:59 +02:00
10 changed files with 175 additions and 178 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)
@@ -383,7 +383,3 @@ datum, vreme, lokacija, tema, tip, link, temaEN
 17-08-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Mail server - 1. deo,workshop,, Mail server - part 1
 24-08-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Film: Primer (2004),movie,,Movie: Primer (2004)
 31-08-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Lightning talks,lightning,,Lightning talks
-07-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Sysadmin radionica,workshop,,Sysadmin workshop
-14-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Druzenje,party,,Party
-21-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Mail server - 2. deo,workshop,, Mail server - part 2
-28-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876, Hakaton, hack, https://wiki.dmz.rs/decentrala/dogadjaji/hakaton, Hackathon
@@ -5,45 +5,45 @@
    <th>Description</th>
  </tr>
  <tr>
-    <td><a href="/account" target="_blank">E-mail</a></td>
+    <td><a href="/account">E-mail</a></td>
    <td>
      E-mail account that you can use with any e-mail client (for example, with
-      the <a href="https://www.thunderbird.net/" target="_blank">Thunderbird</a>).
+      the <a href="https://www.thunderbird.net/">Thunderbird</a>).
    </td>
  </tr>
  <tr>
-    <td><a href="https://forum.dmz.rs/" target="_blank">Forum</a></td>
+    <td><a href="https://forum.dmz.rs/">Forum</a></td>
    <td>
-      Forum for general discussion and <a href="/events" target="_blank">event</a> organization.
+      Forum for general discussion and <a href="/events">event</a> organization.
    </td>
  </tr>
  <tr>
-    <td><a href="/account" target="_blank">Chat</a></td>
+    <td><a href="/account">Chat</a></td>
    <td>
      We have our XMPP server, on which you can make an account. If you already
      have an account, you can find us at group
-      <a href="decentrala@conference.dmz.rs" target="_blank">decentrala@conference.dmz.rs</a>.
+      <a href="decentrala@conference.dmz.rs">decentrala@conference.dmz.rs</a>.
    </td>
  </tr>
  <tr>
-    <td><a href="https://gitea.dmz.rs/" target="_blank">Git</a></td>
+    <td><a href="https://gitea.dmz.rs/">Git</a></td>
    <td>
-      <a href="https://gitea.io/en-us/" target="_blank">Gitea</a> instance on which we host our
+      <a href="https://gitea.io/en-us/">Gitea</a> instance on which we host our
      code and resources (including the code for this site).
    </td>
  </tr>
  <tr>
-    <td><a href="https://wiki.dmz.rs/" target="_blank">Wiki</a></td>
+    <td><a href="https://wiki.dmz.rs/">Wiki</a></td>
    <td>
-      <a href="https://js.wiki/" target="_blank">Wiki.js</a> instance on which we publish
-      documentation for our projects, <a href="/events" target="_blank">events</a> resources,
+      <a href="https://js.wiki/">Wiki.js</a> instance on which we publish
+      documentation for our projects, <a href="/events">events</a> resources,
      and tutorials.
    </td>
  </tr>
  <tr>
-    <td><a href="https://jitsi.dmz.rs/" target="_blank">Jitsi</a></td>
+    <td><a href="https://jitsi.dmz.rs/">Jitsi</a></td>
    <td>
-      <a href="https://jitsi.org/" target="_blank">Jitsi.org</a> meeting app, conferences, group video calls, online events, alternative
+      <a href="https://jitsi.org/">Jitsi.org</a> meeting app, conferences, group video calls, online events, alternative
      to zoom.
    </td>
  </tr>
@@ -59,36 +59,33 @@
      <a href="https://cryptpad.org/">CryptPad</a> alternative to google office
    </td>
  </tr>-->
+  <!--<tr>
  <tr>
-  <tr>
-    <td><a href="https://invidious.dmz.rs/" target="_blank">Invidious</a></td>
+    <td><a href="https://search.dmz.rs/">Search</a></td>
    <td>
-      <a href="https://invidious.io/" target="_blank">Invidious</a>, alternative font-end to YouTube.
+      <a href="https://github.com/searxng/searxg/">SearXNG</a> instance used for
+      Web searching.
+    </td>
+  </tr> -->
+  <tr>
+    <td><a href="https://pastebin.dmz.rs/">Pastebin</a></td>
+    <td>
+      <a href="https://privatebin.info/">PrivateBin</a> instance we use for
+      sharing text files
    </td>
  </tr>
  <tr>
-    <td><a href="https://search.dmz.rs/" target="_blank">Search</a></td>
+    <td><a href="ssh://soft.dmz.rs:2222/">Soft Serve</a></td>
    <td>
-      <a href="https://github.com/searxng/searxg/" target="_blank">SearXNG</a> instance used for Web searching.
-    </td>
-  </tr>
-  <tr>
-    <td><a href="https://pastebin.dmz.rs/" target="_blank">Pastebin</a></td>
-    <td>
-      <a href="https://privatebin.info/" target="_blank">PrivateBin</a> instance for sharing textal data, like codes, logs, etc.
-    </td>
-  </tr>
-  <tr>
-    <td><a href="ssh://soft.dmz.rs:2222/" target="_blank">Soft Serve</a></td>
-    <td>
-      <a href="https://github.com/charmbracelet/soft-serve" target="_blank">Soft Serve</a>
-      TUI git instance. Soft Serve works entirely from the terminal over ssh.
+      <a href="https://github.com/charmbracelet/soft-serve">Soft Serve</a>
+      instance that we use as a replacement for the Gitea service. Soft Serve
+      works entirely from the terminal.
    </td>
  </tr>
 </table>
 <p>
  These are some of the services we currently maintain on our servers. To use
  these services, you can register for each service separately, or you can
-  create a unique <a href="/en/account" target="_blank">account</a>
+  create a unique <a href="/en/account">account</a>
  on our server and use all services with the same account.
 </p>
@@ -5,33 +5,33 @@
    <th>Opis</th>
  </tr>
  <tr>
-    <td><a href="/account" target="_blank">E-mail</a></td>
+    <td><a href="/account">E-mail</a></td>
    <td>
      E-mail nalog koji možeš da koristiš sa bilo kojim email klijentom
      generalne namene (na primer
-      <a href="https://www.thunderbird.net/" target="_blank">Thunderbird</a>-om).
+      <a href="https://www.thunderbird.net/">Thunderbird</a>-om).
    </td>
  </tr>
  <tr>
-    <td><a href="https://forum.dmz.rs/" target="_blank">Forum</a></td>
+    <td><a href="https://forum.dmz.rs/">Forum</a></td>
    <td>
-      Forum na kom obično organizujemo naše <a href="/events" target="_blank">događaje</a>.
+      Forum na kom obično organizujemo naše <a href="/events">događaje</a>.
    </td>
  </tr>
  <tr>
-    <td><a href="/account" target="_blank">Chat</a></td>
+    <td><a href="/account">Chat</a></td>
    <td>
      Održavamo sopstveni XMPP server, na kojem možeš da napraviš nalog. Ako već
      poseduješ nalog možeš da nas nađeš u grupi
-      <a href="decentrala@conference.dmz.rs" target="_blank">decentrala@conference.dmz.rs</a>.
+      <a href="decentrala@conference.dmz.rs">decentrala@conference.dmz.rs</a>.
    </td>
  </tr>
  <tr>
-    <td><a href="https://gitea.dmz.rs/" target="_blank">Git</a></td>
+    <td><a href="https://gitea.dmz.rs/">Git</a></td>
    <td>
-      <a href="https://gitea.io/en-us/" target="_blank">Gitea</a> instanca na kojoj držimo kôd
-      kao i ostale resurse za naše <a href="/projects" target="_blank">projekte</a>,
-      <a href="/events" target="_blank">događaje</a>, kao i projekte naših prijatelja. Ovo može
+      <a href="https://gitea.io/en-us/">Gitea</a> instanca na kojoj držimo kôd
+      kao i ostale resurse za naše <a href="/projects">projekte</a>,
+      <a href="/events">događaje</a>, kao i projekte naših prijatelja. Ovo može
      biti dom tvog sledećeg projekta. Bolji od Github-a.
    </td>
  </tr>
@@ -39,14 +39,14 @@
    <td><a href="https://wiki.dmz.rs/">Wiki</a></td>
    <td>
      <a href="https://js.wiki/">Wiki.js</a> instanca koju koristimo da
-      dokumentujemo naše <a href="/projects" target="_blank">projekte</a> kao i ostale
-      <a href="/events" target="_blank">događaje</a>.
+      dokumentujemo naše <a href="/projects">projekte</a> kao i ostale
+      <a href="/events">događaje</a>.
    </td>
  </tr>
  <tr>
-    <td><a href="https://jitsi.dmz.rs/" target="_blank">Jitsi</a></td>
+    <td><a href="https://jitsi.dmz.rs/">Jitsi</a></td>
    <td>
-      <a href="https://jitsi.org/" target="_blank">Jitsi.org</a> aplikacija za sastanke, groupne video pozive, online dogadjaje, alternativa za zoom.
+      <a href="https://jitsi.org/">Jitsi.org</a> aplikacija za sastanke, groupne video pozive, online dogadjaje, alternativa za zoom.
    </td>
  </tr>
  <!--<tr>
@@ -62,35 +62,32 @@
      <a href="https://cryptpad.org/">CryptPad</a> zamena za google office
    </td>
  <tr>-->
-  <tr>
-    <td><a href="https://invidious.dmz.rs/" target="_blank">Invidious</a></td>
+  <!--<tr>
+    <td><a href="https://search.dmz.rs/">Search</a></td>
    <td>
-      <a href="https://invidious.io/" target="_blank">Invidious</a> instanca kao alternativa za YouTube.
+      <a href="https://github.com/searxng/searxng/">SearXNG</a> instanca koju
+      koristimo za pretraživanje Interneta. Zamena za Google.
+    </td>
+  </tr>-->
+  <tr>
+    <td><a href="https://pastebin.dmz.rs/">Pastebin</a></td>
+    <td>
+      <a href="https://privatebin.info/">PrivateBin</a> instanca koju koristimo
+      za brzo deljenje tekstualnih fajlova
    </td>
  </tr>
  <tr>
-    <td><a href="https://search.dmz.rs/" target="_blank">Search</a></td>
+    <td><a href="ssh://soft.dmz.rs:2222/">Soft Serve</a></td>
    <td>
-      <a href="https://github.com/searxng/searxng/" target="_blank">SearXNG</a> instanca za pretraživanje Interneta. Zamena za Google.
-    </td>
-  </tr>
-  <tr>
-    <td><a href="https://pastebin.dmz.rs/" target="_blank">Pastebin</a></td>
-    <td>
-      <a href="https://privatebin.info/" target="_blank">PrivateBin</a> instanca za brzo deljenje tekstualnih fajlova, kodova, logova i sl.
-    </td>
-  </tr>
-  <tr>
-    <td><a href="ssh://soft.dmz.rs:2222/" target="_blank">Soft Serve</a></td>
-    <td>
-      <a href="https://github.com/charmbracelet/soft-serve" target="_blank">Soft Serve</a>
-      TUI git instanca. Soft Serve radi potpuno iz terminala preko ssh.
+      <a href="https://github.com/charmbracelet/soft-serve">Soft Serve</a>
+      instanca koju koristimo kao zamenu za Gitea servis. Soft Serve radi
+      potpuno iz terminala
    </td>
  </tr>
 </table>
 <p>
  Ovo su neki od servisa koje trenutno održavamo na našim serverima. Da bi
  koristio ove servise, <em>možeš</em> da se registuješ na svaki servis posebno,
-  a možeš i da napraviš jedinstveni <a href="/account" target="_blank">nalog</a> na našem
+  a možeš i da napraviš jedinstveni <a href="/account">nalog</a> na našem
  serveru i da koristiš sve servise sa istim nalogom.
 </p>
@@ -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>