Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| web-to-print-zines [2026/01/20 09:26] – horst | web-to-print-zines [2026/01/27 00:15] (current) – horst | ||
|---|---|---|---|
| Line 8: | Line 8: | ||
| /* based on the Zine-Machine Project by Rowan Merewood: https:// | /* based on the Zine-Machine Project by Rowan Merewood: https:// | ||
| + | |||
| + | /* Setzt alle automatisch eingestellten Ränder zurück */ | ||
| * { | * { | ||
| box-sizing: border-box; | box-sizing: border-box; | ||
| Line 14: | Line 16: | ||
| } | } | ||
| + | /* Abschnitt für die Regeln die für die Druckansicht einer Seite gelten */ | ||
| @media print { | @media print { | ||
| + | | ||
| + | /* Verkleinert die Schriftgröße | ||
| body { | body { | ||
| font-size: 69%; | font-size: 69%; | ||
| Line 26: | Line 31: | ||
| } | } | ||
| + | /* Definiert die für Zines typische Seitenaufteilung */ | ||
| .zine { | .zine { | ||
| width: 100vw; | width: 100vw; | ||
| Line 40: | Line 46: | ||
| } | } | ||
| + | /* Erzeugt Guidelines zwischen den Seiten des Zines */ | ||
| .zine-page { | .zine-page { | ||
| background: white; | background: white; | ||
| Line 46: | Line 53: | ||
| } | } | ||
| + | /* Dreht die Zine Seiten die auf der oberen Hälfte der A4 Seite sind */ | ||
| .page-5, | .page-5, | ||
| .page-4, | .page-4, | ||
| Line 52: | Line 60: | ||
| transform: rotate(180deg) translateX(-0.1px); | transform: rotate(180deg) translateX(-0.1px); | ||
| } | } | ||
| + | |||
| + | /* Weist jede Seite einem der definierten Bereiche zu */ | ||
| .page-1 { | .page-1 { | ||
| Line 106: | Line 116: | ||
| ===== HTML ===== | ===== HTML ===== | ||
| + | |||
| + | < | ||
| + | < | ||
| + | <html lang=" | ||
| + | <!-- Sprache des Dokuments --> | ||
| + | < | ||
| + | <meta charset=" | ||
| + | <!-- Enthält auch Umlaute --> | ||
| + | <meta name=" | ||
| + | < | ||
| + | <!-- Tab Name --> | ||
| + | <link rel=" | ||
| + | < | ||
| + | <link rel=" | ||
| + | </ | ||
| + | |||
| + | <main class=" | ||
| + | <header class=" | ||
| + | Cover Page | ||
| + | </ | ||
| + | <section class=" | ||
| + | Content 1 | ||
| + | </ | ||
| + | <section class=" | ||
| + | Content 2 | ||
| + | </ | ||
| + | <section class=" | ||
| + | Content 3 | ||
| + | </ | ||
| + | <section class=" | ||
| + | Content 4 | ||
| + | </ | ||
| + | <section class=" | ||
| + | Content 5 | ||
| + | </ | ||
| + | <section class=" | ||
| + | Content 6 | ||
| + | </ | ||
| + | <footer class=" | ||
| + | Backside | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||