diff --git a/site/deconference.html b/site/deconference.html index 8b7b35f..03146d2 100644 --- a/site/deconference.html +++ b/site/deconference.html @@ -1,11 +1,10 @@ - + - - - + + + - + --> - - - - - - Dekonferencija Decentrala - - - -
- - - EN -
-
-
-
Studenti su nasli bug

Dekonferencija

+ + + + + + Dekonferencija Decentrala + + + +
+ + + EN +
+
+
+
Studenti su nasli bug

Dekonferencija

Program

11:00 Otvaranje

@@ -82,24 +83,34 @@

Decentrala prihvata donacije isključivo od fizičkih lica.

-
-
- - +
+
+ + diff --git a/site/scripts/main.js b/site/scripts/main.js index faa8b52..bb3c960 100644 --- a/site/scripts/main.js +++ b/site/scripts/main.js @@ -1,61 +1,52 @@ 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 sections_button = getById("sections-button"); +const themeBtn = getById("theme-switcher"); +const hamburger = getByClass("hamburger"); +const hamburgerIcon = hamburger.children[0] +const menu = document.getElementsByTagName("nav")[0]; const imgs = document.getElementsByTagName("img"); -const sections_menu = document.getElementsByTagName("nav")[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 menuSrc = sections_button.children[0].src +const body = document.getElementsByClassName("theme")[0]; /* Functions */ -function changeToDarkTheme() { - theme_switcher?.setAttribute("title", "turn the light on"); - docStyle.setProperty("--border", "var(--dark-border)"); - docStyle.setProperty("--text", "var(--dark-text)"); - docStyle.setProperty("--bg", "var(--dark-bg)"); +const changeToDarkTheme = () => { + body.classList = "theme dark" window.localStorage.setItem("theme", "dark"); - for (let i = 0; i < imgs.length; i += 1) { - imgs[i].src = imgs[i].src.replace("-light", "-dark"); - } + themeBtn?.setAttribute("title", "turn the light on"); + Array.from(imgs).forEach((img) => img.src = img.src.replace("-light", "-dark")); } -function changeToLightTheme() { - theme_switcher?.setAttribute("title", "turn the light off"); - docStyle.setProperty("--border", "var(--light-border)"); - docStyle.setProperty("--text", "var(--light-text)"); - docStyle.setProperty("--bg", "var(--light-bg)"); +const changeToLightTheme = () => { + body.classList = "theme light" window.localStorage.setItem("theme", "light"); - for (let i = 0; i < imgs.length; i += 1) { - imgs[i].src = imgs[i].src.replace("-dark", "-light"); - } + themeBtn?.setAttribute("title", "turn the light off"); + Array.from(imgs).forEach((img) => img.src = img.src.replace("-dark", "-light")); } -function closeMenu() { - sections_button.setAttribute("opened", "false"); - const menuSrc = sections_button.children[0].src - menuSrc.src = menuSrc.replace("opened", "closed"); - sections_menu.style.display = "none"; +const closeMenu = () => { + hamburger.classList = "hamburger closed" + hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed"); + menu.classList = "menu closed"; } -function openMenu() { - sections_button.setAttribute("opened", "true"); - menuSrc = menuSrc.replace("closed", "opened"); - sections_menu.style.display = "flex"; - sections_menu.style.flexDirection = "column"; +const openMenu = () => { + hamburger.classList = "hamburger open" + hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened"); + menu.classList = "menu open"; } /* Listeners */ -sections_button.addEventListener("click", () => isMenuOpen ? closeMenu() : openMenu()); -window.addEventListener("resize", () => isMenuOpen && closeMenu()); -main.addEventListener("click", () => isMenuOpen && closeMenu()); +window.addEventListener("resize", () => isMenuOpen() && closeMenu()); +main.addEventListener("click", () => isMenuOpen() && closeMenu()); +hamburger.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu()); -theme_switcher.addEventListener("click", () => { - const title = theme_switcher.getAttribute("title") ?? "off" +themeBtn.addEventListener("click", () => { + const title = themeBtn.getAttribute("title") ?? "off" if (title.indexOf("off") !== -1) changeToDarkTheme(); else changeToLightTheme(); }); diff --git a/site/styles/style.css b/site/styles/style.css index 67f4e38..e1bd6a1 100644 --- a/site/styles/style.css +++ b/site/styles/style.css @@ -11,6 +11,12 @@ --bg: var(--light-bg); } +body.dark { + --border: var(--dark-border); + --text: var(--dark-text); + --bg: var(--dark-bg); +} + @font-face { font-family: "Iosevka"; src: url("/font/iosevka-regular.woff") format("woff"); @@ -153,7 +159,7 @@ a:visited { } } -#sections-button { +.hamburger { display: none; } @@ -186,7 +192,7 @@ button { } @media screen and (max-width: 1160px) { - nav { + nav.menu { flex-direction: column; border: 2px solid var(--border); border-bottom: 0; @@ -198,9 +204,13 @@ button { align-items: center; padding: 2rem 3rem; display: none; + &.open { + display: flex; + flex-direction: column; + } } - #sections-button { + .hamburger { display: block !important; } } diff --git a/template/page-en.html b/template/page-en.html index e2f6c46..7fa2832 100644 --- a/template/page-en.html +++ b/template/page-en.html @@ -36,7 +36,7 @@ <!--TITLE--> Decentrala - +