Skapade koden för dark/light mode samt ändrade storlek på navbar samt tog bort kommentar på theme knappen

Signed-off-by: Philip Nordlund Fällman <philip.nordlundfallman@realgymnasiet.se>

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;
   }
 }

src/index.html

@@ -20,7 +20,7 @@
 				<li><a href="om-oss.html" id="about-link">Om oss</a></li>
 				<li><a href="kontakt.html" id="contact-link">Kontakt</a></li>
 			</ul>
-			<button id="theme-toggle" label="Växla ljust/mörkt läge"></button> <!-- Tror detta är rätt?? -->
+			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>
 		</nav>
 	</header>
 

src/js/main.js

@@ -4,4 +4,47 @@ function setFooterYear() {
     yearSpan.textContent = new Date().getFullYear();
   }
 }
-setFooterYear();
+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');
+}

src/kontakt.html

@@ -20,7 +20,7 @@
         <li><a href="om-oss.html" id="about-link">Om oss</a></li>
         <li><a href="kontakt.html" id="contact-link">Kontakt</a></li>
       </ul>
-      <button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button> <!-- Tror detta är rätt??-->
+      <button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button> 
     </nav>
   </header>
   <main>

src/om-oss.html

@@ -20,7 +20,7 @@
         <li><a href="om-oss.html" id="about-link">Om oss</a></li>
         <li><a href="kontakt.html" id="contact-link">Kontakt</a></li>
       </ul>
-      <button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button> <!-- Tror detta är rätt??-->
+      <button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button> 
     </nav>
   </header>
   <main>

src/platser/fangelsemuseet.html

@@ -20,7 +20,7 @@
 				<li><a href="../om-oss.html" id="about-link">Om oss</a></li>
 				<li><a href="../kontakt.html" id="contact-link">Kontakt</a></li>
 			</ul>
-			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  <!-- Tror detta är rätt??-->
+			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  
 		</nav>
 	</header>
 

src/platser/fjarran-hojder.html

@@ -20,7 +20,7 @@
 				<li><a href="../om-oss.html" id="about-link">Om oss</a></li>
 				<li><a href="../kontakt.html" id="contact-link">Kontakt</a></li>
 			</ul>
-			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  <!-- Tror detta är rätt??-->
+			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  
 		</nav>
 	</header>
 

src/platser/gavlebocken.html

@@ -20,7 +20,7 @@
 				<li><a href="../om-oss.html" id="about-link">Om oss</a></li>
 				<li><a href="../kontakt.html" id="contact-link">Kontakt</a></li>
 			</ul>
-			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  <!-- Tror detta är rätt??-->
+			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  
 		</nav>
 	</header>
 

src/platser/jarnvagsmuseet.html

@@ -20,7 +20,7 @@
 				<li><a href="../om-oss.html" id="about-link">Om oss</a></li>
 				<li><a href="../kontakt.html" id="contact-link">Kontakt</a></li>
 			</ul>
-			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  <!-- Tror detta är rätt??-->
+			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  
 		</nav>
 	</header>
 

src/platser/konserthuset.html

@@ -20,7 +20,7 @@
 				<li><a href="../om-oss.html" id="about-link">Om oss</a></li>
 				<li><a href="../kontakt.html" id="contact-link">Kontakt</a></li>
 			</ul>
-			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  <!-- Tror detta är rätt??-->
+			<button id="theme-toggle" aria-label="Växla ljust/mörkt läge"></button>  
 		</nav>
 	</header>