mirror of
https://github.com/skoelle/moonweb-www.git
synced 2026-09-17 17:50:24 +00:00
139 lines
6.7 KiB
Markdown
139 lines
6.7 KiB
Markdown
# 🌙 moonweb.org
|
||
|
||
> **⚠️ Archiviert:** Dieses Repository wird nicht mehr aktiv gepflegt. Der gesamte Code ist nun im Monorepo: **[skoelle/moonweb-site](https://github.com/skoelle/moonweb-site)**
|
||
|
||
Statische Website von [moonweb.org](https://www.moonweb.org), erstellt mit [Eleventy](https://www.11ty.dev/) als Static-Site-Generator.
|
||
|
||
## 🛠️ Technologie
|
||
|
||
- ⚡ **Eleventy 2.x** — Static-Site-Generator (Build-Time)
|
||
- 📝 **Nunjucks** — Template-Sprache für Layouts und Includes
|
||
- 📄 **Markdown** — Seiteninhalte
|
||
- 🎨 **HTML-Tabellen-Layout** — dreispaltiges Layout (1:1 wie das Original)
|
||
|
||
## 🚀 Starten
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev # 🔥 Dev-Server mit Live-Reload auf http://localhost:8080
|
||
npm run build # 📦 Produktions-Build nach _site/
|
||
npm run clean # 🧹 Build-Verzeichnis leeren
|
||
```
|
||
|
||
## 📁 Projektstruktur
|
||
|
||
```
|
||
moonweb-www/
|
||
├── .eleventy.js # ⚙️ Eleventy-Konfiguration
|
||
├── package.json
|
||
├── src/
|
||
│ ├── _includes/
|
||
│ │ ├── layout.njk # 🏗️ Master-Layout (3-Spalten-Tabellen)
|
||
│ │ ├── nav.njk # 🧭 Rechte Seiten-Navigation
|
||
│ │ ├── quicknav.njk # ⚡ Linke Quicknav-Box
|
||
│ │ └── redirect.njk # ↪️ Meta-Refresh-Weiterleitung
|
||
│ ├── _data/
|
||
│ │ ├── nav.json # 📋 Menüstruktur (8 Sektionen, 4 Gruppen)
|
||
│ │ └── site.json # 🌐 Globale Daten (Domain, Kontakt-E-Mail)
|
||
│ ├── css/
|
||
│ │ └── nav-replacement.njk # 🎨 Generiert nav-replacement.css
|
||
│ ├── assets/
|
||
│ │ ├── css/moonweb.css # 🎨 Haupt-Stylesheet
|
||
│ │ ├── images/ # 🖼️ Layout-Bilder, Favicon (10 Dateien)
|
||
│ │ ├── menu/ # 🍔 Nav-Sprite-GIFs (24 Dateien: 8×3 Zustände)
|
||
│ │ ├── pageImage/ # 📸 Sektions-Header-Bilder (10 Dateien)
|
||
│ │ ├── content/ # 🖼️ Inline-Bilder (2 Dateien)
|
||
│ │ └── archive/ # 📦 Archiv-Banner und Splash-Screens
|
||
│ ├── beginning/ # 🌟 Sektion "beginning" (Startseite + Unterpunkte)
|
||
│ ├── projects/ # 🚀 Sektion "projects"
|
||
│ ├── products/ # 📦 Sektion "products"
|
||
│ ├── acoustics/ # 🎵 Sektion "acoustics"
|
||
│ ├── location/ # 📍 Sektion "location"
|
||
│ ├── background/ # 🎭 Sektion "background"
|
||
│ ├── partners/ 🤝 Sektion "partners"
|
||
│ ├── contact/ # 📞 Sektion "contact"
|
||
│ ├── network/ # 🌐 Sektion "network" (kein Nav-Eintrag)
|
||
│ ├── stefan/ # 👤 Sektion "stefan" (kein Nav-Eintrag)
|
||
│ ├── index.md # 🏠 Startseite
|
||
│ ├── robots.njk # 🤖 Generiert robots.txt
|
||
│ └── sitemap.xml.njk # 🗺️ Generiert sitemap.xml
|
||
```
|
||
|
||
## 🧭 Navigation
|
||
|
||
Die Navigation besteht aus 8 Sektionen in 4 Gruppen:
|
||
|
||
| Gruppe | Sektionen |
|
||
|--------|-----------|
|
||
| 1 | 🌟 beginning |
|
||
| 2 | 🚀 projects, 📦 products, 🎵 acoustics |
|
||
| 3 | 📍 location, 🎭 background, 🤝 partners |
|
||
| 4 | 📞 contact |
|
||
|
||
Zusätzlich existieren die Sektionen `network` und `stefan` mit Inhalten, die jedoch nicht in der Hauptnavigation erscheinen.
|
||
|
||
## ⚙️ Technische Details
|
||
|
||
- **Layout:** 📐 Dreispaltige HTML-Tabelle (108px linke Sidebar | Inhaltsbereich | 150px rechte Sidebar)
|
||
- **Navigation:** 🎯 CSS-Hover-Effekte statt JavaScript (reine Bild-Tausch-Technik via `text-indent: -9999px`)
|
||
- **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).
|
||
|
||
Copyright (c) Stefan Koelle — [stefankoelle.de](https://stefankoelle.de)
|