elpatron/wordle-cheater
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme-Button in flexiblen Header verschoben; Überschneidung auf Mobilgeräten behoben

Browse Source
This commit is contained in:
elpatron
2025-08-19 12:08:29 +02:00
parent b4be064fab
commit cb4b579e57
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
templates/index.html
View File

@@ -58,6 +58,11 @@
html, body { background: var(--bg); color: var(--text); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 2rem; }
.container { max-width: 800px; margin: 0 auto; }
.page-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.page-header h1 { margin: 0; }
@media (max-width: 480px) {
.page-header h1 { font-size: 1.5rem; }
}
.grid { display: grid; grid-template-columns: repeat(5, 3rem); gap: .5rem; }
.grid input { text-align: center; font-size: 1.25rem; padding: .4rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; }
label { font-weight: 600; display: block; margin-top: 1rem; margin-bottom: .25rem; }
@@ -78,15 +83,17 @@
.word-list li { display: inline-block; margin: 0 .25rem .25rem 0; }
fieldset { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
legend { font-weight: 700; padding: 0 .25rem; }
.theme-toggle { position: fixed; top: .75rem; left: .75rem; z-index: 100; background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; }
.theme-toggle { background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; margin-top: 0; }
.theme-toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
</style>
</head>
<body>
<button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
<a href="#results" class="skip-link">Zum Ergebnisbereich springen</a>
<div class="container">
<h1>Wordle‑Cheater (Deutsch)</h1>
<header class="page-header">
<button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
<h1>Wordle‑Cheater (Deutsch)</h1>
</header>
<p>Wortliste geladen: <strong>{{ words_count }}</strong> Wörter</p>
<main id="main" role="main">
@@ -152,7 +159,7 @@
</main>
<footer class="footer">
Another <a href="https://gitea.elpatron.me/elpatron/wordle-cheater">Open Source Project</a>, vibe coded in less than 1 hour by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
Made in 2025 with ❤️ and ☕ by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
</footer>
</div>