diff --git a/templates/index.html b/templates/index.html index b9c8ae5..ee784f4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -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; }
- Zum Ergebnisbereich springenWortliste geladen: {{ words_count }} Wörter