diff --git a/README.md b/README.md index a51c434..4af8c42 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,12 @@ Redisign of dmz.rs . ### TODO: -- create themes switcher +- [x] create themes switcher + - [x] "demo" + - [x] propagate to all pages + - [x] store theme to localStorage + - [x] read "user agent" for default theme + - [x] invert images and icons - update projects section - create blogging system - create xmpp bot that connects to events section. diff --git a/img/cc-dark.svg b/img/cc-dark.svg new file mode 100644 index 0000000..556ac5a --- /dev/null +++ b/img/cc-dark.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + diff --git a/img/cc.svg b/img/cc-light.svg similarity index 100% rename from img/cc.svg rename to img/cc-light.svg diff --git a/img/favicon_bg.svg b/img/favicon_bg.svg deleted file mode 100644 index eead957..0000000 --- a/img/favicon_bg.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/img/favicon_bg_16.png b/img/favicon_bg_16.png deleted file mode 100644 index a3790d7..0000000 Binary files a/img/favicon_bg_16.png and /dev/null differ diff --git a/img/favicon_bg_32.png b/img/favicon_bg_32.png deleted file mode 100644 index 8b7d8e9..0000000 Binary files a/img/favicon_bg_32.png and /dev/null differ diff --git a/img/favicon_bg_48.png b/img/favicon_bg_48.png deleted file mode 100644 index b5777e1..0000000 Binary files a/img/favicon_bg_48.png and /dev/null differ diff --git a/img/favicon_bg_64.png b/img/favicon_bg_64.png deleted file mode 100644 index d98fd3c..0000000 Binary files a/img/favicon_bg_64.png and /dev/null differ diff --git a/img/favicon_transparent.svg b/img/favicon_transparent.svg deleted file mode 100644 index 1721b55..0000000 --- a/img/favicon_transparent.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - diff --git a/img/favicon_transparent_16.png b/img/favicon_transparent_16.png deleted file mode 100644 index f73c2f6..0000000 Binary files a/img/favicon_transparent_16.png and /dev/null differ diff --git a/img/favicon_transparent_32.png b/img/favicon_transparent_32.png deleted file mode 100644 index 92c3c61..0000000 Binary files a/img/favicon_transparent_32.png and /dev/null differ diff --git a/img/favicon_transparent_48.png b/img/favicon_transparent_48.png deleted file mode 100644 index bfbfe21..0000000 Binary files a/img/favicon_transparent_48.png and /dev/null differ diff --git a/img/favicon_transparent_64.png b/img/favicon_transparent_64.png deleted file mode 100644 index 1bd314e..0000000 Binary files a/img/favicon_transparent_64.png and /dev/null differ diff --git a/img/git-dark.svg b/img/git-dark.svg new file mode 100644 index 0000000..18281e7 --- /dev/null +++ b/img/git-dark.svg @@ -0,0 +1,47 @@ + + + + diff --git a/img/git.svg b/img/git-light.svg similarity index 100% rename from img/git.svg rename to img/git-light.svg diff --git a/img/mastodon-dark.svg b/img/mastodon-dark.svg new file mode 100644 index 0000000..3cde3e6 --- /dev/null +++ b/img/mastodon-dark.svg @@ -0,0 +1,46 @@ + + + + diff --git a/img/mastodon.svg b/img/mastodon-light.svg similarity index 100% rename from img/mastodon.svg rename to img/mastodon-light.svg diff --git a/img/mesh-dark.png b/img/mesh-dark.png deleted file mode 100644 index 648f15a..0000000 Binary files a/img/mesh-dark.png and /dev/null differ diff --git a/img/mesh-dark.svg b/img/mesh-dark.svg new file mode 100644 index 0000000..8dc105d --- /dev/null +++ b/img/mesh-dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/mesh-light.png b/img/mesh-light.png deleted file mode 100644 index ad5a110..0000000 Binary files a/img/mesh-light.png and /dev/null differ diff --git a/img/mesh-light.svg b/img/mesh-light.svg new file mode 100644 index 0000000..9c63dab --- /dev/null +++ b/img/mesh-light.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/srce-dark.svg b/img/srce-dark.svg new file mode 100644 index 0000000..6539a8f --- /dev/null +++ b/img/srce-dark.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + diff --git a/img/srce.svg b/img/srce-light.svg similarity index 100% rename from img/srce.svg rename to img/srce-light.svg diff --git a/img/w-dark.svg b/img/w-dark.svg new file mode 100644 index 0000000..87764d5 --- /dev/null +++ b/img/w-dark.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + diff --git a/img/w.svg b/img/w-light.svg similarity index 100% rename from img/w.svg rename to img/w-light.svg diff --git a/img/www-dark.svg b/img/www-dark.svg new file mode 100644 index 0000000..bd3bd88 --- /dev/null +++ b/img/www-dark.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/img/www.svg b/img/www-light.svg similarity index 100% rename from img/www.svg rename to img/www-light.svg diff --git a/index.html b/index.html index 5386439..290442f 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,17 @@ + Decentrala
- Nalog + + + + +

Dobrodosli!

@@ -40,7 +45,7 @@ sve izgleda u realnosti, mozes da dodjes na neki od nasih dogadjaja, i tamo nas upoznas!

- +
diff --git a/mesh.js b/mesh.js deleted file mode 100644 index d331668..0000000 --- a/mesh.js +++ /dev/null @@ -1,11 +0,0 @@ -// this is a p5.js script that generates mesh image for the website -function setup() { - createCanvas(500, 700); - background("rgba(0,0,0,0)"); - stroke("rgba(255,255,255,1)"); - let j = 475; - for (let i = 0; i < 700; i += 35) { - line(500, i, j, 700); - j -= 25; - } -} diff --git a/pages/account.html b/pages/account.html index 75546f6..9219a0d 100644 --- a/pages/account.html +++ b/pages/account.html @@ -7,16 +7,21 @@ + Decentrala - Nalog
- Nalog + + + + +
Ova stranica je trenutno u izradi... - +
diff --git a/pages/blog.html b/pages/blog.html index 745e03e..abac5ec 100644 --- a/pages/blog.html +++ b/pages/blog.html @@ -7,16 +7,21 @@ + Decentrala - Blog
- Nalog + + + + +
Ova stranica je trenutno u izradi... - +
diff --git a/pages/contact.html b/pages/contact.html index 1cd28ae..cd86fdb 100644 --- a/pages/contact.html +++ b/pages/contact.html @@ -7,19 +7,24 @@ + Decentrala - Kontakt
- Nalog + + + + +

Kontakt

Mozes nam poslati mail na dmz@dmz.rs ili se mozes pridruziti nasem Forumu.

Takodje smo i na Fediversu!

- +
diff --git a/pages/events.html b/pages/events.html index 8f815fb..cf1346a 100644 --- a/pages/events.html +++ b/pages/events.html @@ -7,12 +7,17 @@ + Decentrala - Dogadjaji
- Nalog + + + + +

Dogadjaji

@@ -64,7 +69,7 @@ - +
diff --git a/pages/projects.html b/pages/projects.html index 87fd40f..2dafe5f 100644 --- a/pages/projects.html +++ b/pages/projects.html @@ -7,16 +7,21 @@ + Decentrala - Projekti
- Nalog + + + + +
Ova stranica je trenutno u izradi... - +
diff --git a/pages/services.html b/pages/services.html index 55254b9..5b09925 100644 --- a/pages/services.html +++ b/pages/services.html @@ -7,12 +7,17 @@ + Decentrala - Servisi
- Nalog + + + + +

Servisi

@@ -57,7 +62,7 @@

Ovo su neki od servisa koje trenutno odrzavamo na nasim serverima. Da bi koristio ove servise, mozes se registrujes za svaki servis posebno, ali mozes i da da napravis nalog na nasem serveru i koristis sve servis sa istim nalogom.

- +
diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..6b01bc8 --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,49 @@ +const theme_switcher = document.getElementById("theme-switcher"); +const imgs = document.getElementsByTagName("img"); + +let theme = window.localStorage.getItem("theme"); + +if (theme !== null) { + if (theme === "light") { + changeToLightTheme(); + } else { + changeToDarkTheme(); + } +} else { + if ( + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches + ) { + changeToDarkTheme(); + } +} + +theme_switcher.addEventListener("click", () => { + if (theme_switcher.textContent.indexOf("off") !== -1) { + changeToDarkTheme(); + } else { + changeToLightTheme(); + } +}); + +function changeToDarkTheme() { + theme_switcher.textContent = "turn the light on"; + document.documentElement.style.setProperty("--border", "var(--dark-border)"); + document.documentElement.style.setProperty("--text", "var(--dark-text)"); + document.documentElement.style.setProperty("--bg", "var(--dark-bg)"); + window.localStorage.setItem("theme", "dark"); + for (let i = 0; i < imgs.length; i += 1) { + imgs[i].src = imgs[i].src.replace("-light", "-dark"); + } +} + +function changeToLightTheme() { + theme_switcher.textContent = "turn the light off"; + document.documentElement.style.setProperty("--border", "var(--light-border)"); + document.documentElement.style.setProperty("--text", "var(--light-text)"); + document.documentElement.style.setProperty("--bg", "var(--light-bg)"); + window.localStorage.setItem("theme", "light"); + for (let i = 0; i < imgs.length; i += 1) { + imgs[i].src = imgs[i].src.replace("-dark", "-light"); + } +} diff --git a/styles/blog.css b/styles/blog.css index 9b6cafa..1b0d1b7 100644 --- a/styles/blog.css +++ b/styles/blog.css @@ -1,3 +1,3 @@ -.main img { +#mesh { display: none; } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 217e073..07eb985 100644 --- a/styles/style.css +++ b/styles/style.css @@ -65,6 +65,7 @@ footer { font-size: 1.3rem; line-height: 2rem; max-width: 120ch; + overflow-y: auto; } a, @@ -95,7 +96,7 @@ a:focus { font-size: 2rem } -.main img { +#mesh { position: absolute; bottom: 5rem; right: 0; @@ -115,4 +116,13 @@ a:focus { display: flex; flex-direction: row; align-items: center; +} + +button { + font-style: italic; + font-weight: lighter; + border: none; + background: var(--bg); + color: var(--text); + margin: 0 4rem 0 0; } \ No newline at end of file