mkevac/website
1
0
Fork 0
forked from Decentrala/website
Code Pull Requests Activity

[NoJS] reimplementing js features without the js

Browse Source
This commit is contained in:
coja
2026-08-10 16:19:59 +02:00
parent 904ed7e317
commit db60f55c73
7 changed files with 116 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/404.html
-1
View File
@@ -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>
site/deconference.html
+5 -4
View File
@@ -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>
site/scripts/main.js
-92
View File
@@ -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);
});
}
});
site/styles/style.css
+90 -1
View File
@@ -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;
}
}