From 0eda5a90e4c31057076160daccd120502ebaf171 Mon Sep 17 00:00:00 2001 From: Patrick Schwarzer Date: Fri, 9 May 2025 23:34:17 +0200 Subject: [PATCH] Header & working Dark Mode --- index.css | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 35 ++++++++++++++++-- script.js | 25 +++++++++++++ 3 files changed, 163 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index e69de29..872189a 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,106 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + transition: all 0.3s ease; +} + +body { + font-family: 'Courier New', Courier, monospace; + background-color: rgb(36, 41, 46); +} +body.light-mode { + background-color: #eeeeee; +} + +/* + HEADER +*/ +header { + background-color: rgb(31, 36, 40); + padding: 0px 32px; + position: relative; +} +body.light-mode header { + background-color: #ffffff; +} + +.logo a { + color: white; + text-decoration: none; + font-size: 32px; + font-weight: bold; +} + +nav { + display: flex; + align-items: center; + justify-content: flex-start; + position: relative; + padding: 20px 0px; + + max-width: 1200px; + margin: 0 auto; +} +nav ul { + list-style: none; + display: flex; + gap: 20px; + + position: absolute; + left: 50%; + transform: translateX(-50%); +} +nav ul li a { + color: white; + text-decoration: none; + font-size: 18px; + padding: 0px 12px; +} +nav ul li a:hover { + color: #6d6d6d; +} + +body.light-mode .logo a, +body.light-mode nav ul li a { + color: #222222; +} + +body.light-mode nav ul li a:hover { + color: #a0a0a0; +} + +.dark-mode-toggle { + margin-left: auto; + display: flex; + width: 48px; + height: 48px; + align-items: center; + justify-content: center; + + background-color: rgb(40, 45, 48); + color: white; + font-size: 24px; + border: none; + border-radius: 50%; +} +.dark-mode-toggle:hover { + background-color: rgb(28, 33, 37); +} + +body.light-mode .dark-mode-toggle { + background-color: #f1f1f1; +} +body.light-mode .dark-mode-toggle:hover { + background-color: #e0e0e0; +} + + +/* + MAIN +*/ +main { + max-width: 1200px; + margin: 0 auto; +} diff --git a/index.html b/index.html index e406ae5..881e0c4 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,38 @@ - Tarions Portfolio + Tarions Portfolio + - - testing123 once again surely now + +
+ +
+ +
+ +
+ + diff --git a/script.js b/script.js index e69de29..2212afd 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,25 @@ + +document.addEventListener("DOMContentLoaded", () => { + const darkModeButton = document.getElementById("dark-mode-toggle"); + const body = document.body; + + function toggleDarkMode(save){ + const isLightMode = body.classList.toggle("light-mode"); + darkModeButton.textContent = isLightMode ? "☀️" : "🌙"; + + if (save){ + localStorage.setItem("theme", isLightMode ? "light" : "dark"); + } + } + + // Load Dark Mode preference from cache + const theme = localStorage.getItem("theme"); + if (theme === "dark"){ + body.classList.remove("light-mode"); + darkModeButton.textContent = "🌙"; + } + + darkModeButton.addEventListener("click", () => { + toggleDarkMode(true); + }) +})