From f9fbdda9d01d9b5255da3f3bbc34fb95bd15d4da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philip=20Nordlund=20F=C3=A4llman?= Date: Wed, 18 Feb 2026 09:42:51 +0100 Subject: [PATCH] =?UTF-8?q?Skapade=20koden=20f=C3=B6r=20dark/light=20mode?= =?UTF-8?q?=20samt=20=C3=A4ndrade=20storlek=20p=C3=A5=20navbar=20samt=20to?= =?UTF-8?q?g=20bort=20kommentar=20p=C3=A5=20theme=20knappen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Philip Nordlund Fällman --- src/css/styles.css | 39 +++++++++++++++++++++++++--- src/index.html | 2 +- src/js/main.js | 45 ++++++++++++++++++++++++++++++++- src/kontakt.html | 2 +- src/om-oss.html | 2 +- src/platser/fangelsemuseet.html | 2 +- src/platser/fjarran-hojder.html | 2 +- src/platser/gavlebocken.html | 2 +- src/platser/jarnvagsmuseet.html | 2 +- src/platser/konserthuset.html | 2 +- 10 files changed, 87 insertions(+), 13 deletions(-) diff --git a/src/css/styles.css b/src/css/styles.css index 1b567a1..9355b07 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -55,7 +55,7 @@ body.dark header { display: flex; align-items: center; justify-content: space-between; - max-width: 1250px; + max-width: 1300px; margin: 0 auto; padding: 0.5rem 1rem; } @@ -198,26 +198,57 @@ body.dark footer { color: var(--text-muted-dark); } + +@media (max-width: 900px) { + main { + max-width: 100%; + padding: 0 0.5rem; + } + .navbar { + max-width: 100%; + flex-wrap: wrap; + } +} + @media (max-width: 700px) { .navbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; + padding: 0.5rem 0.3rem; + } + .nav-links { + flex-wrap: wrap; + gap: 0.5rem; } main { - padding: 0 0.3rem; + padding: 0 0.2rem; } .plats-bilder { flex-direction: column; align-items: center; } + .plats-bilder img { + max-width: 98vw; + min-width: 0; + } + .maps-container iframe { + width: 98vw !important; + min-width: 0; + height: 220px !important; + } } @media (max-width: 500px) { .hero h1 { - font-size: 1.3rem; + font-size: 1.1rem; } .plats-info { - padding: 1rem 0.5rem; + padding: 0.7rem 0.2rem; + font-size: 0.98rem; + } + .nav-links a { + font-size: 0.98rem; + padding: 0.2em 0.4em; } } diff --git a/src/index.html b/src/index.html index 660bb8d..88b6d2e 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - + diff --git a/src/js/main.js b/src/js/main.js index 468cb4e..3450d10 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -4,4 +4,47 @@ function setFooterYear() { yearSpan.textContent = new Date().getFullYear(); } } -setFooterYear(); \ No newline at end of file +setFooterYear(); + +const themeToggle = document.getElementById('theme-toggle'); +const body = document.body; + +function setTheme(mode) { + if (mode === 'dark') { + body.classList.add('dark'); + if (themeToggle) themeToggle.textContent = '☀️'; + } else { + body.classList.remove('dark'); + if (themeToggle) themeToggle.textContent = '🌙'; + } +} + +function getSavedTheme() { + return localStorage.getItem('gavleguiden-theme-mode'); +} + +function saveTheme(mode) { + localStorage.setItem('gavleguiden-theme-mode', mode); +} + +function toggleTheme() { + const isDark = body.classList.contains('dark'); + if (isDark) { + setTheme('light'); + saveTheme('light'); + } else { + setTheme('dark'); + saveTheme('dark'); + } +} + +if (themeToggle) { + themeToggle.addEventListener('click', toggleTheme); +} + +const saved = getSavedTheme(); +if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + setTheme('dark'); +} else { + setTheme('light'); +} \ No newline at end of file diff --git a/src/kontakt.html b/src/kontakt.html index ceb5197..44f98e2 100644 --- a/src/kontakt.html +++ b/src/kontakt.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - +
    diff --git a/src/om-oss.html b/src/om-oss.html index b3c1085..be6bc69 100644 --- a/src/om-oss.html +++ b/src/om-oss.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - +
    diff --git a/src/platser/fangelsemuseet.html b/src/platser/fangelsemuseet.html index 31d4ead..07022ae 100644 --- a/src/platser/fangelsemuseet.html +++ b/src/platser/fangelsemuseet.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - + diff --git a/src/platser/fjarran-hojder.html b/src/platser/fjarran-hojder.html index efb801a..0f94820 100644 --- a/src/platser/fjarran-hojder.html +++ b/src/platser/fjarran-hojder.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - + diff --git a/src/platser/gavlebocken.html b/src/platser/gavlebocken.html index 1753e4f..fad0fd1 100644 --- a/src/platser/gavlebocken.html +++ b/src/platser/gavlebocken.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - + diff --git a/src/platser/jarnvagsmuseet.html b/src/platser/jarnvagsmuseet.html index 839c147..f07b44b 100644 --- a/src/platser/jarnvagsmuseet.html +++ b/src/platser/jarnvagsmuseet.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - + diff --git a/src/platser/konserthuset.html b/src/platser/konserthuset.html index 2f276ab..dc44b03 100644 --- a/src/platser/konserthuset.html +++ b/src/platser/konserthuset.html @@ -20,7 +20,7 @@
  • Om oss
  • Kontakt
    • - +