davidkertzscher/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: Dark Mode Button unter das Logo verschoben - Absolute Positioning mit Bottom/Left Centering

Browse source
This commit is contained in:
David Kertzscher 2026-05-06 15:13:52 +00:00
parent 8ed5500b07
commit 5636f1da93
10 changed files with 45 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
css/style.css
View file

@ -52,10 +52,10 @@ body::before {
/* Dark Mode Toggle Button */
.dark-mode-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
width: 55px;
height: 55px;
border-radius: 50%;
@ -72,15 +72,16 @@ body::before {
padding: 0;
outline: none;
pointer-events: auto;
z-index: 1001;
}
.dark-mode-toggle:hover {
transform: scale(1.2) rotate(20deg);
transform: translateX(-50%) scale(1.2) rotate(20deg);
box-shadow: 0 8px 30px rgba(255, 20, 147, 0.6), inset 0 0 15px rgba(255, 105, 180, 0.3);
}
.dark-mode-toggle:active {
transform: scale(0.9);
transform: translateX(-50%) scale(0.9);
}
/* Dark Mode Styles */
@ -312,6 +313,8 @@ header {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
padding-bottom: 20px;
}
.logo img {

9
eis_projekt.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
galerie.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
impressum.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
index.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html" class="active">Start</a>

9
kontakt.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
notenrechner.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
team.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
textanalyse.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>

9
ueber_uns.html
View file

@ -9,11 +9,6 @@
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<header>
<div class="header-container">
<div class="logo">
@ -22,6 +17,10 @@
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
</div>
<nav>
<a href="index.html">Start</a>