Merge pull request #2 from skoelle/feature/mobile

README.md

AGENTS.md

@@ -14,3 +14,46 @@
 ### Lizenz
 - Creative Commons Namensnennung - Nicht kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International (CC BY-NC-SA 4.0)
 - Copyright: Stefan Koelle — stefankoelle.de
+
+## Build & Test
+
+```bash
+npm run build    # Build nach _site/
+npm run dev      # Dev-Server auf http://localhost:8080
+```
+
+Mobile-Layout testen: Browser DevTools → Responsive Mode → 375px Breite.
+
+## Mobile Layout (Responsive)
+
+### Breakpoints
+- `768px` — Haupt-Mobile-Layout
+- `480px` — Kleinbildschirm-Zusätze
+
+### Geänderte Dateien
+- `src/_includes/layout.njk` — Mobile-Header (`div.mobile-header`) mit Logo, pageImage, Nav
+- `src/_includes/nav.njk` — `details/summary`-Toggle
+- `src/assets/css/moonweb.css` — Media Queries (Zeile ~90+)
+- `src/css/nav-replacement.njk` — Background-Images im Mobile deaktivieren
+
+### Mobile-Layout-Struktur
+```
+Logo (logomobile.gif, zentriert, margin 20px oben/links/rechts)
+pageImage (108x120px, object-fit: cover, 1px Border) │ Navigation (Textlinks)
+Content (volle Breite)
+Quicknav (nur "beginning", Textlinks über Footer)
+Footer
+```
+
+### Wichtige CSS-Klassen
+- `.mobile-header` — Enthält Logo + nav-row
+- `.mobile-logo` — logomobile.gif, `width: calc(100% - 40px)`, max 400px
+- `.mobile-nav-row` — Flex-Row für pageImage + Nav, padding 20px
+- `.mobile-pageimage` — 108x120px, `object-fit: cover`, 1px Border
+- `.mobile-footer-quicknav` — Quicknav über Footer (nur Mobile sichtbar)
+
+### Desktop-Layout unverändert
+Alle Mobile-Änderungen sind in `@media (max-width: 768px)` gekapselt. Desktop (750px) wird nicht beeinflusst.
+
+### Wichtig
+Bei CSS-Änderungen am Mobile-Layout (Breakpoints, Klassen, Struktur) muss auch die AGENTS.md aktualisiert werden, damit die Dokumentation aktuell bleibt.

README.md

@@ -77,6 +77,58 @@ Zusätzlich existieren die Sektionen `network` und `stefan` mit Inhalten, die je
 - **Shortcode:** 📦 `pseudonymBox` — rechtsbündige Box mit dunklem Hintergrund und Gold-Überschrift
 - **Routing:** ↪️ Alte URL-Pfade werden via Meta-Refresh auf die neue Startseite weitergeleitet
 
+## 📱 Mobile Layout (Responsive)
+
+Das mobile Layout wird per CSS Media Query bei `max-width: 768px` aktiviert. Die Desktop-Version (750px) bleibt unverändert.
+
+### Geänderte Dateien
+
+| Datei | Änderung |
+|-------|----------|
+| `src/_includes/layout.njk` | Mobile-Header (`div.mobile-header`) mit Logo, pageImage und Navigation |
+| `src/assets/css/moonweb.css` | Media Queries für Mobile (768px) und Kleinbildschirm (480px) |
+| `src/_includes/nav.njk` | `details/summary`-Toggle für CSS-only Mobile-Menü |
+| `src/css/nav-replacement.njk` | Mobile-Regel: Background-Images deaktivieren |
+
+### Mobile-Layout-Struktur
+
+```
+┌─────────────────────────────┐
+│  Logo (logomobile.gif)      │  ← zentriert, 20px Margin oben/links/rechts
+│  1px schwarzer Border       │
+├─────────────────────────────┤
+│  pageImage │ Navigation     │  ← Flex-Row, pageImage links (108x120px, beschnitten)
+│  1px Border│ Textlinks      │    mit 20px Padding, Navigation rechts daneben
+├─────────────────────────────┤
+│  Content (volle Breite)     │
+├─────────────────────────────┤
+│  Quicknav (falls vorhanden) │  ← nur in "beginning", Textlinks zentriert
+├─────────────────────────────┤
+│  Footer                     │
+└─────────────────────────────┘
+```
+
+### Was passiert im Mobile-Modus
+
+- **Layout:** Tabellen auf `display: block` umgeschaltet, volle Breite
+- **Linke Sidebar:** Komplett ausgeblendet
+- **Rechte Sidebar:** Komplett ausgeblendet (Nav + Logo im mobile-header)
+- **Navigation:** Inline Textlinks rechts neben pageImage (kein Hamburger-Menü)
+- **pageImage:** 108px breit, 120px hoch (mit `object-fit: cover`, oben abgeschnitten)
+- **Logo:** `logomobile.gif`, skaliert auf `calc(100% - 40px)`, max 400px, zentriert
+- **Hintergrund:** Komplett deaktiviert
+- **Quicknav:** Textlinks über Footer (nur in "beginning"-Sektion)
+- **Typografie:** Schriftgröße 14px (statt 9pt), h1 margin 0
+- **Formulare:** `width: 100%`, `max-width: 100%`
+- **Bilder:** `max-width: 100%`, `height: auto`
+
+### Kleinbildschirm (480px)
+
+Zusätzliche Anpassungen für sehr kleine Bildschirme:
+- Schriftgröße 13px
+- h1 Schriftgröße 16pt
+- Reduziertes Padding im Content-Bereich
+
 ## 📜 Lizenz
 
 Dieses Projekt steht unter der [Creative Commons Namensnennung - Nicht kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de) (CC BY-NC-SA 4.0).