Fix privacy page header alignment issue

- Change flexbox layout to relative positioning for header container
- Position theme toggle as absolute overlay in top-right corner
- Keep title and subtitle centered without interference from theme button
- Effective date now properly aligns with centered title text
- Theme toggle no longer displaces header text horizontally
This commit is contained in:
Deco Vander 2025-07-04 13:00:06 -04:00
parent 7a35732687
commit 47984b2f48

View file

@ -82,12 +82,12 @@
<body>
<div class="privacy-container">
<div class="privacy-header">
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px;">
<div style="flex: 1; text-align: center;">
<div style="position: relative; margin-bottom: 20px;">
<div style="text-align: center;">
<h1>❄️ Privacy Policy</h1>
<p>Great Lakes Ice Report</p>
</div>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme mode" style="background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--shadow); flex-shrink: 0;">
<button id="theme-toggle" class="theme-toggle" title="Toggle theme mode" style="position: absolute; top: 0; right: 0; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--shadow);">
<span class="theme-icon" style="font-size: 20px;">🌙</span>
</button>
</div>