Decentrala/website
24
1
Fork 12
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

[Fix] menu and theme switch

Browse Source
This commit is contained in:
coja
2026-05-02 01:50:28 +02:00
parent 9fc58a992e
commit e18bf1899e
5 changed files with 105 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
site/deconference.html
View File

@@ -1,11 +1,10 @@
<!DOCTYPE html> <!doctype html>
<html lang="sr"> <html lang="sr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <!-- <pre>
<pre>
*@@* *@@*
*@@@@* *@@@@*
@@ -27,26 +26,28 @@
| |_| | |__| |___| |___| |\ | | | | _ < / ___ \| |___ / ___ \ | |_| | |__| |___| |___| |\ | | | | _ < / ___ \| |___ / ___ \
|____/|_____\____|_____|_| \_| |_| |_| \_\/_/ \_\_____/_/ \_\ |____/|_____\____|_____|_| \_| |_| |_| \_\/_/ \_\_____/_/ \_\
</pre> </pre> -->
-->
<link rel="stylesheet" href="/styles/reset.css"> <link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/style.css"> <link rel="stylesheet" href="/styles/style.css" />
<link rel="stylesheet" href="/styles/deconference.css"> <link rel="stylesheet" href="/styles/deconference.css">
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<script src="/scripts/main.js" defer></script> <script src="/scripts/main.js" defer></script>
<title>Dekonferencija Decentrala</title> <title>Dekonferencija Decentrala</title>
<link rel="alternate" hreflang="en" href="/en/deconference" /> <link rel="alternate" hreflang="en" href="/en/deconference" />
</head> </head>
<body> <body class="theme light">
<header> <header>
<a id="logo" href="/"><img src="/img/logo-light.svg" alt="Logo"> Decentrala</a> <a id="logo" href="/">
<button id="theme-switcher"></button> <img src="/img/logo-light.svg" alt="Logo" />
<a class="lang" hreflang="en" href="/en/deconference">EN</a> Decentrala
</header> </a>
<main> <button id="theme-switcher"></button>
<div class="page-wrap"> <a class="lang" hreflang="en" href="/en/deconference">EN</a>
<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1> </header>
<main>
<div class="page-wrap">
<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1>
<h2 id="program"><a href="#program">Program</a></h2> <h2 id="program"><a href="#program">Program</a></h2>
<p>11:00 Otvaranje<p> <p>11:00 Otvaranje<p>
@@ -82,24 +83,34 @@
<p>Decentrala prihvata donacije isključivo od fizičkih lica.</p> <p>Decentrala prihvata donacije isključivo od fizičkih lica.</p>
</div> </div>
</main> </main>
<footer> <footer>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button> <button class="hamburger closed">
<nav> <img src="/img/strelica-closed-light.svg" alt="Menu" />
<a href="/events">Događaji</a> </button>
<a href="/services">Servisi</a> <nav class="menu">
<a href="/statute">Statut</a> <a href="/events">Događaji</a>
<a href="/about">O nama</> <a href="/services">Servisi</a>
<a class="account" href="/account">Nalog</a> <a href="/statute">Statut</a>
<a href="/support">Podrška</a> <a href="/about">O nama</a>
</nav> <a class="account" href="/account">Nalog</a>
<span class="links"> <a href="/support">Podrška</a>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg" alt="CreativeCommons"></a> </nav>
<a href="/webring"><img src="/img/w-light.svg" alt="Webring"></a> <span class="links">
<a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg" alt="SourceCode"></a> <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a> <img src="/img/cc-light.svg" alt="CreativeCommons" />
</span> </a>
</footer> <a href="/webring">
</body> <img src="/img/w-light.svg" alt="Webring" />
</a>
<a href="https://gitea.dmz.rs/Decentrala/website">
<img src="/img/git-light.svg" alt="SourceCode" />
</a>
<a href="https://balkan.fedive.rs/@decentrala">
<img src="/img/mastodon-light.svg" alt="Mastodon" />
</a>
</span>
</footer>
</body>
</html> </html>

65
site/scripts/main.js
View File

@@ -1,61 +1,52 @@
const getById = (id) => document.getElementById(id); const getById = (id) => document.getElementById(id);
const docStyle = document.documentElement.style; const getByClass = (className) => document.getElementsByClassName(className)[0];
const theme_switcher = getById("theme-switcher"); const themeBtn = getById("theme-switcher");
const sections_button = getById("sections-button"); const hamburger = getByClass("hamburger");
const hamburgerIcon = hamburger.children[0]
const menu = document.getElementsByTagName("nav")[0];
const imgs = document.getElementsByTagName("img"); const imgs = document.getElementsByTagName("img");
const sections_menu = document.getElementsByTagName("nav")[0];
const main = document.getElementsByTagName("main")[0]; const main = document.getElementsByTagName("main")[0];
const isMenuOpen = sections_button.getAttribute("opened") === "true" const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme"); const theme = window.localStorage.getItem("theme");
const menuSrc = sections_button.children[0].src const body = document.getElementsByClassName("theme")[0];
/* Functions */ /* Functions */
function changeToDarkTheme() { const changeToDarkTheme = () => {
theme_switcher?.setAttribute("title", "turn the light on"); body.classList = "theme dark"
docStyle.setProperty("--border", "var(--dark-border)");
docStyle.setProperty("--text", "var(--dark-text)");
docStyle.setProperty("--bg", "var(--dark-bg)");
window.localStorage.setItem("theme", "dark"); window.localStorage.setItem("theme", "dark");
for (let i = 0; i < imgs.length; i += 1) { themeBtn?.setAttribute("title", "turn the light on");
imgs[i].src = imgs[i].src.replace("-light", "-dark"); Array.from(imgs).forEach((img) => img.src = img.src.replace("-light", "-dark"));
}
} }
function changeToLightTheme() { const changeToLightTheme = () => {
theme_switcher?.setAttribute("title", "turn the light off"); body.classList = "theme light"
docStyle.setProperty("--border", "var(--light-border)");
docStyle.setProperty("--text", "var(--light-text)");
docStyle.setProperty("--bg", "var(--light-bg)");
window.localStorage.setItem("theme", "light"); window.localStorage.setItem("theme", "light");
for (let i = 0; i < imgs.length; i += 1) { themeBtn?.setAttribute("title", "turn the light off");
imgs[i].src = imgs[i].src.replace("-dark", "-light"); Array.from(imgs).forEach((img) => img.src = img.src.replace("-dark", "-light"));
}
} }
function closeMenu() { const closeMenu = () => {
sections_button.setAttribute("opened", "false"); hamburger.classList = "hamburger closed"
const menuSrc = sections_button.children[0].src hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
menuSrc.src = menuSrc.replace("opened", "closed"); menu.classList = "menu closed";
sections_menu.style.display = "none";
} }
function openMenu() { const openMenu = () => {
sections_button.setAttribute("opened", "true"); hamburger.classList = "hamburger open"
menuSrc = menuSrc.replace("closed", "opened"); hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
sections_menu.style.display = "flex"; menu.classList = "menu open";
sections_menu.style.flexDirection = "column";
} }
/* Listeners */ /* Listeners */
sections_button.addEventListener("click", () => isMenuOpen ? closeMenu() : openMenu()); window.addEventListener("resize", () => isMenuOpen() && closeMenu());
window.addEventListener("resize", () => isMenuOpen && closeMenu()); main.addEventListener("click", () => isMenuOpen() && closeMenu());
main.addEventListener("click", () => isMenuOpen && closeMenu()); hamburger.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
theme_switcher.addEventListener("click", () => { themeBtn.addEventListener("click", () => {
const title = theme_switcher.getAttribute("title") ?? "off" const title = themeBtn.getAttribute("title") ?? "off"
if (title.indexOf("off") !== -1) changeToDarkTheme(); if (title.indexOf("off") !== -1) changeToDarkTheme();
else changeToLightTheme(); else changeToLightTheme();
}); });

16
site/styles/style.css
View File

@@ -11,6 +11,12 @@
--bg: var(--light-bg); --bg: var(--light-bg);
} }
body.dark {
--border: var(--dark-border);
--text: var(--dark-text);
--bg: var(--dark-bg);
}
@font-face { @font-face {
font-family: "Iosevka"; font-family: "Iosevka";
src: url("/font/iosevka-regular.woff") format("woff"); src: url("/font/iosevka-regular.woff") format("woff");
@@ -153,7 +159,7 @@ a:visited {
} }
} }
#sections-button { .hamburger {
display: none; display: none;
} }
@@ -186,7 +192,7 @@ button {
} }
@media screen and (max-width: 1160px) { @media screen and (max-width: 1160px) {
nav { nav.menu {
flex-direction: column; flex-direction: column;
border: 2px solid var(--border); border: 2px solid var(--border);
border-bottom: 0; border-bottom: 0;
@@ -198,9 +204,13 @@ button {
align-items: center; align-items: center;
padding: 2rem 3rem; padding: 2rem 3rem;
display: none; display: none;
&.open {
display: flex;
flex-direction: column;
}
} }
#sections-button { .hamburger {
display: block !important; display: block !important;
} }
} }

8
template/page-en.html
View File

@@ -36,7 +36,7 @@
<title><!--TITLE--> Decentrala</title> <title><!--TITLE--> Decentrala</title>
<link rel="alternate" hreflang="sr" href="/PAGE_NAME" /> <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
</head> </head>
<body className="light"> <body class="theme light">
<header> <header>
<a id="logo" href="/en/index"> <a id="logo" href="/en/index">
<img src="/img/logo-light.svg" alt="Logo" /> Decentrala <img src="/img/logo-light.svg" alt="Logo" /> Decentrala
@@ -50,10 +50,10 @@
</div> </div>
</main> </main>
<footer> <footer>
<button id="sections-button" opened="false"> <button class="hamburger closed">
<img src="/img/strelica-closed-light.svg" alt="OpenMenu" /> <img src="/img/strelica-closed-light.svg" alt="Menu" />
</button> </button>
<nav> <nav class="menu">
<a href="/en/events">Events</a> <a href="/en/events">Events</a>
<a href="/en/services">Services</a> <a href="/en/services">Services</a>
<a href="/en/statute">Statute</a> <a href="/en/statute">Statute</a>

8
template/page-sr.html
View File

@@ -36,7 +36,7 @@
<title><!--TITLE--> Decentrala</title> <title><!--TITLE--> Decentrala</title>
<link rel="alternate" hreflang="en" href="/en/PAGE_NAME" /> <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
</head> </head>
<body className="light"> <body class="theme light">
<header> <header>
<a id="logo" href="/"> <a id="logo" href="/">
<img src="/img/logo-light.svg" alt="Logo" /> <img src="/img/logo-light.svg" alt="Logo" />
@@ -51,10 +51,10 @@
</div> </div>
</main> </main>
<footer> <footer>
<button id="sections-button" opened="false"> <button class="hamburger closed">
<img src="/img/strelica-closed-light.svg" alt="OpenMenu" /> <img src="/img/strelica-closed-light.svg" alt="Menu" />
</button> </button>
<nav> <nav class="menu">
<a href="/events">Događaji</a> <a href="/events">Događaji</a>
<a href="/services">Servisi</a> <a href="/services">Servisi</a>
<a href="/statute">Statut</a> <a href="/statute">Statut</a>