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

Compare commits

merge into: Decentrala/website:framework/jinja2
Branches Tags
Decentrala/website:master Decentrala/website:no-js Decentrala/website:framework/jinja2 Decentrala/website:make Decentrala/website:test Decentrala/website:requirements Decentrala/website:Makefiles Decentrala/website:feat/statute-link-on-navbar Decentrala/website:v3.0 Decentrala/website:markdown Decentrala/website:v4.0 Decentrala/website:v2.0
...
pull from: Decentrala/website:no-js
Branches Tags
Decentrala/website:no-js Decentrala/website:master Decentrala/website:framework/jinja2 Decentrala/website:make Decentrala/website:test Decentrala/website:requirements Decentrala/website:Makefiles Decentrala/website:feat/statute-link-on-navbar Decentrala/website:v3.0 Decentrala/website:markdown Decentrala/website:v4.0 Decentrala/website:v2.0
6 Commits
framework/jinja2 ... no-js
Author SHA1 Message Date
coja db60f55c73 [NoJS] reimplementing js features without the js 2026-08-10 16:19:59 +02:00
coja 904ed7e317 [Theme] fix persist pages 2026-08-09 06:53:25 +02:00
coja f6093d9876 [Fix] no more sudo for dev 2026-08-09 06:26:17 +02:00
coja 740a90536d [Fix] hamburger undefined 2026-08-09 06:08:56 +02:00
coja 26d1295006 [Fix] lang 2026-08-09 06:07:20 +02:00
coja 352709cec6 Revert "[Fix] no more sudo needed, runtime warn" 
This reverts commit cc0127dbe3.
 2026-08-09 06:02:28 +02:00
9 changed files with 117 additions and 133 deletions
Expand all files Collapse all files
.gitignore
+1
View File
@@ -17,6 +17,7 @@ events.ical
.vscode/ .vscode/
events.html events.html
events_archive.html events_archive.html
nginx.pid
!site/lif* !site/lif*
build_pages.py
+10 -3
View File
@@ -31,7 +31,7 @@ PAGES = [
def buildPage( 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: ) -> str:
template = template.replace("<!--TITLE-->", pageTitle) template = template.replace("<!--TITLE-->", pageTitle)
style = ( style = (
@@ -42,6 +42,13 @@ def buildPage(
template = template.replace("<!--ADDITIONAL_STYLE-->", style) template = template.replace("<!--ADDITIONAL_STYLE-->", style)
template = template.replace("PAGE_NAME", filename) template = template.replace("PAGE_NAME", filename)
template = template.replace("<!--MAIN-->", pageHtml) 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 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 = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div>"
pageHtml += f.read() pageHtml += f.read()
html = buildPage( 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 = open(f'site/{page["name"]}.html', "w")
f.write(html) 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 = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Students found the bug' /></div>"
pageHtml += f.read() pageHtml += f.read()
html = buildPage( 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 = open(f'site/en/{page["name"]}.html', "w")
f.write(html) f.write(html)
nginx.pid
-1
View File
@@ -1 +0,0 @@
172000
site/404.html
-1
View File
@@ -6,7 +6,6 @@
<link rel="stylesheet" href="/styles/style.css"> <link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/404.css"> <link rel="stylesheet" href="/styles/404.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>
<title>404</title> <title>404</title>
</head> </head>
<body> <body>
site/deconference.html
+5 -14
View File
@@ -1,16 +1,6 @@
<!doctype html> <!doctype html>
<html lang="sr"> <html lang="sr">
<head> <head>
<script>
(function () {
const theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (theme === "dark" || (!theme && prefersDark))
document.documentElement.classList.add("dark");
})();
</script>
<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" />
@@ -42,17 +32,18 @@
<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>
<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>
<input type="checkbox" id="menu-toggle" />
<input type="checkbox" id="theme-toggle" />
<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" />
Decentrala Decentrala
</a> </a>
<button id="theme-switcher"></button> <label for="theme-toggle" id="theme-switcher"></label>
<a class="lang" hreflang="en" href="/en/deconference">EN</a> <a class="lang" hreflang="en" href="/en/deconference">EN</a>
</header> </header>
<main> <main>
@@ -96,9 +87,9 @@
</div> </div>
</main> </main>
<footer> <footer>
<button class="hamburger closed"> <label for="menu-toggle" class="hamburger">
<img src="/img/strelica-closed-light.svg" alt="Menu" /> <img src="/img/strelica-closed-light.svg" alt="Menu" />
</button> </label>
<nav class="menu"> <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>
site/scripts/main.js
-85
View File
@@ -1,85 +0,0 @@
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 imgs = document.getElementsByTagName("img");
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme");
/* Functions */
const changeToDarkTheme = () => {
window.localStorage.setItem("theme", "dark");
document.documentElement.classList.add("dark");
themeBtn?.setAttribute("title", "turn the light on");
Array.from(imgs).forEach((img) => {
if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark");
});
}
const changeToLightTheme = () => {
window.localStorage.setItem("theme", "light");
document.documentElement.classList.remove("dark");
themeBtn?.setAttribute("title", "turn the light off");
Array.from(imgs).forEach((img) => {
if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light");
});
}
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());
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 {
// No language prefix, prepend currentLang
a.setAttribute("href", `/${currentLang}${href}`);
}
}
});
hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
themeBtn.addEventListener("click", () => {
const title = themeBtn.getAttribute("title") ?? "off"
if (title.indexOf("off") !== -1) changeToDarkTheme();
else changeToLightTheme();
});
/* Rest */
const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches
if (!theme && userPerfersDark) changeToDarkTheme();
else theme === "light" ? changeToLightTheme() : changeToDarkTheme();
})
site/styles/style.css
+90 -1
View File
@@ -11,12 +11,39 @@
--bg: var(--light-bg); --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); --border: var(--dark-border);
--text: var(--dark-text); --text: var(--dark-text);
--bg: var(--dark-bg); --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-face {
font-family: "Iosevka"; font-family: "Iosevka";
src: url("/font/iosevka-regular.woff") format("woff"); src: url("/font/iosevka-regular.woff") format("woff");
@@ -123,6 +150,7 @@ a:visited {
var(--bg) 51%, var(--bg) 51%,
var(--bg) 100% var(--bg) 100%
); );
cursor: pointer;
} }
#theme-switcher:hover { #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 { .lang {
font-size: 2rem; font-size: 2rem;
} }
@@ -212,6 +261,46 @@ button {
.hamburger { .hamburger {
display: block !important; 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;
} }
} }
template/page-en.html
+6 -14
View File
@@ -1,18 +1,9 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<script>
(function () {
const theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (theme === "dark" || (!theme && prefersDark))
document.documentElement.classList.add("dark");
})();
</script>
<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" />
<input type="checkbox" id="theme-toggle" />
<!-- <pre> <!-- <pre>
@@ -42,16 +33,17 @@
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<!--ADDITIONAL_STYLE--> <!--ADDITIONAL_STYLE-->
<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"></script>
<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> <body>
<input type="checkbox" id="theme-toggle" />
<input type="checkbox" id="menu-toggle" />
<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
</a> </a>
<button id="theme-switcher"></button> <label for="theme-toggle" id="theme-switcher"></label>
<a class="lang" hreflang="sr" href="/PAGE_NAME">SR</a> <a class="lang" hreflang="sr" href="/PAGE_NAME">SR</a>
</header> </header>
<main> <main>
@@ -60,9 +52,9 @@
</div> </div>
</main> </main>
<footer> <footer>
<button class="hamburger closed"> <label for="menu-toggle" class="hamburger">
<img src="/img/strelica-closed-light.svg" alt="Menu" /> <img src="/img/strelica-closed-light.svg" alt="Menu" />
</button> </label>
<nav class="menu"> <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>
template/page-sr.html
+5 -14
View File
@@ -1,16 +1,6 @@
<!doctype html> <!doctype html>
<html lang="sr"> <html lang="sr">
<head> <head>
<script>
(function () {
const theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches;
if (theme === "dark" || (!theme && prefersDark))
document.documentElement.classList.add("dark");
})();
</script>
<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" />
@@ -42,17 +32,18 @@
<link rel="stylesheet" href="/styles/style.css" /> <link rel="stylesheet" href="/styles/style.css" />
<!--ADDITIONAL_STYLE--> <!--ADDITIONAL_STYLE-->
<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>
<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> <body>
<input type="checkbox" id="menu-toggle" />
<input type="checkbox" id="theme-toggle" />
<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" />
Decentrala Decentrala
</a> </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> <a class="lang" hreflang="en" href="/en/PAGE_NAME">EN</a>
</header> </header>
<main> <main>
@@ -61,9 +52,9 @@
</div> </div>
</main> </main>
<footer> <footer>
<button class="hamburger closed"> <label for="menu-toggle" class="hamburger">
<img src="/img/strelica-closed-light.svg" alt="Menu" /> <img src="/img/strelica-closed-light.svg" alt="Menu" />
</button> </label>
<nav class="menu"> <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>