From 9bee0be309940891b7b6d4e802f0bfca65923bdc Mon Sep 17 00:00:00 2001 From: Luka Hietala Date: Fri, 14 Nov 2025 13:58:13 +0200 Subject: [PATCH] =?UTF-8?q?lis=C3=A4=C3=A4=20navigointi=20baari?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 21 +++++++++++++++++++-- static/aurinko.svg | 1 + static/kuu.svg | 1 + static/styles.css | 25 ++++++++++++++++++++++--- static/theme.js | 17 ++++++++++++----- 5 files changed, 55 insertions(+), 10 deletions(-) create mode 100644 static/aurinko.svg create mode 100644 static/kuu.svg diff --git a/index.html b/index.html index 676062e..8969a25 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,25 @@ - - +
+ + +
diff --git a/static/aurinko.svg b/static/aurinko.svg new file mode 100644 index 0000000..65c97c7 --- /dev/null +++ b/static/aurinko.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/kuu.svg b/static/kuu.svg new file mode 100644 index 0000000..07b397d --- /dev/null +++ b/static/kuu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index 3473deb..61057e5 100644 --- a/static/styles.css +++ b/static/styles.css @@ -17,10 +17,14 @@ } body { + background-color: var(--background); + margin: 0; +} + +main { max-width: 500px; - padding: 20px; margin: auto; - background-color: var(--background); + padding: 20px; } a { @@ -28,6 +32,10 @@ a { text-decoration: none; } +nav { + height: fit-content; +} + .uutis-lista { display: flex; flex-direction: column; @@ -38,7 +46,7 @@ a { display: flex; flex-direction: column; background-color: var(--card); - transition: 0.2s; + transition: box-shadow 0.2s; } .uutis-kortti:hover { @@ -51,4 +59,15 @@ a { .uutis-tiedot { padding: 10px 20px; +} + +header { + background-color: var(--card); + padding: 20px; + display: flex; + flex-direction: row; + justify-content: center; + gap: 200px; + font-size: 0.9em; + align-items: center; } \ No newline at end of file diff --git a/static/theme.js b/static/theme.js index 21a813b..11b3457 100644 --- a/static/theme.js +++ b/static/theme.js @@ -1,7 +1,7 @@ -const lightModeBtn = document.querySelector("[data-set-theme='light']"); -const darkModeBtn = document.querySelector("[data-set-theme='dark']"); +const themeButton = document.getElementById("theme-button"); const html = document.documentElement; +let theme const setTheme = (theme) => { document.documentElement.removeAttribute('data-theme'); @@ -14,13 +14,20 @@ const setTheme = (theme) => { const loadTheme = () => { const savedTheme = localStorage.getItem('theme'); - + theme = savedTheme if (savedTheme) { setTheme(savedTheme); } }; -lightModeBtn.addEventListener('click', () => setTheme('light')); -darkModeBtn.addEventListener('click', () => setTheme('dark')); +themeButton.addEventListener('click', () => { + if (theme === "dark") { + setTheme("light") + theme = "light" + } else { + setTheme("dark") + theme = "dark" + } +}); loadTheme(); \ No newline at end of file -- 2.47.3