diff --git a/dnd-book.css b/dnd-book.css index acb1bce..2e2d71f 100644 --- a/dnd-book.css +++ b/dnd-book.css @@ -1,65 +1,52 @@ /* Setzt den Hintergrund und das Layout der Seite */ -.phb { + .phb { width: 210mm; /* A4-Breite */ height: 296.8mm; /* A4-Höhe */ - font-family: 'bookmania', sans-serif; /* Schriftart */ - background-image: url('./background.png'); /* Lokales Hintergrundbild */ - background-size: cover; /* Bild auf die ganze Seite strecken */ - background-position: center; /* Bild zentrieren */ - color: #222; /* Textfarbe */ - padding: 20mm; /* Innenabstand */ - box-sizing: border-box; /* Boxmodell */ - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Schatten für den Buch-Effekt */ - page-break-after: always; /* Seitenumbruch nach jeder Seite */ - position: relative; /* Damit andere absolute Positionierungen innerhalb der Seite funktionieren */ - column-count: 2; /* Teilt den Inhalt in zwei Spalten */ - column-gap: 2%; /* Abstand zwischen den Spalten */ - column-rule: 1px solid #ccc; /* Regel zwischen den Spalten */ - overflow: hidden; /* Verhindert Überlauf in die Spalten */ + font-family: 'bookmania', sans-serif; + background-image: url('./background.png'); /* Hintergrundbild */ + background-size: cover; + background-position: center; + color: #222; + padding: 20mm; + box-sizing: border-box; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + page-break-after: always; /* Um sicherzustellen, dass nach jeder Seite ein Umbruch erfolgt */ + position: relative; } -/* Stil für den Inhalt */ +/* Flexbox für die Spalten */ .phb .content { + display: flex; + justify-content: space-between; + gap: 2%; padding-top: 10mm; } - -/* Text innerhalb von Blockquotes */ -.phb blockquote { - background-color: lightgrey; - margin-top: 1em; - padding: 0.5em; +/* Jede Spalte nimmt 48% der Breite ein */ +.phb .column { + width: 48%; + padding: 10px; + box-sizing: border-box; + color: #222; + line-height: 1.5; } -.phb blockquote p { - font-size: 9pt; - font-family: ff-scala-sans-pro; +/* Seitenumbruch nach jeder zweiten Spalte */ +@media print { + .phb { + page-break-before: always; /* Neue Seite, wenn genug Inhalt vorhanden ist */ + } } -.phb blockquote p strong { - font-weight: bold; - font-family: ff-scala-sans-pro; +/* Stil für den Inhalt, wenn eine neue Seite beginnt */ +.phb .content:after { + content: ""; + display: block; + clear: both; } -/* Tabellen */ -.phb table { - font-size: 9pt; - font-family: ff-scala-sans-pro; - width: 100%; /* Volle Breite der Tabelle */ -} - -.phb table em { - font-family: ff-scala-sans-pro; -} - -.phb table strong { - font-family: ff-scala-sans-pro; - font-weight: 800; - letter-spacing: -0.02em; -} - -/* Titeln und Überschriften */ -.phb h1, .phb h2, .phb h3, .phb h4, .phb h5{ +/* Stile für Überschriften */ +.phb h1, .phb h2, .phb h3, .phb h4, .phb h5 { margin-top: 0.2em; margin-bottom: 0.2em; font-family: 'MrJeeves', sans-serif; @@ -84,19 +71,33 @@ font-weight: 600; } -/* Stil für den ersten Buchstaben nach einer h1 */ -.phb h1+p::first-letter { - float: left; - font-family: Solberry; - font-size: 92pt; - color: #222; - line-height: 1.05em; - padding-right: 4pt; + +/* Zusätzlicher Stil für Blockquotes */ +.phb blockquote { + background-color: lightgrey; + margin-top: 1em; + padding: 0.5em; } -/* Zusätzliche Styles für das Blockquote */ -.phb blockquote hr { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0l2 1L0 2z' fill='%239c2b1b'/%3E%3C/svg%3E"); +/* Beispiel für Bilder in einem Blockquote */ +.phb blockquote img { + max-width: 100%; + height: auto; +} + +/* Dynamische Spaltenerstellung auf der Seite */ +.phb .column { + display: inline-block; + vertical-align: top; + width: 48%; + padding-right: 2%; +} + +/* Zusätzliche Stile für Text */ +.phb table { + font-size: 9pt; + width: 100%; + font-family: ff-scala-sans-pro; } /* Porträts */ @@ -105,27 +106,18 @@ position: absolute; right: 0; top: 4px; - z-index: 1 !important; + z-index: 1; } -/* Layout für ein weiteres Porträt */ -.phb hr+hr+section blockquote img.portrait { +/* Dynamische Bildpositionierung innerhalb der Seite */ +.phb .content hr+hr+section blockquote img.portrait { width: 10%; left: 38%; } -/* Für zusätzliche Anpassungen bei Blockquote-Tischen */ -.phb hr+section blockquote table { - font-size: 10pt; -} - -.phb hr+section blockquote ul { - font-family: "Scala Sans Pro"; - padding-left: 1em; - font-size: 10pt; -} - -.phb hr+section blockquote em { - font-family: "Scala Sans Pro"; - font-style: italic; +/* Seitenumbruch innerhalb des Drucks */ +@media print { + .phb { + page-break-before: always; + } } diff --git a/test.html b/test.html index f1023fc..16dd6c3 100644 --- a/test.html +++ b/test.html @@ -8,42 +8,36 @@
+
+ +
+

Die Elfen und ihre Geschichte

+

Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...

+ +

Der Aufstieg des ersten Elfenkönigs

+

Der erste Elfenkönig, Ilinthar, führte seine Leute aus der Dunkelheit der frühen Zeiten...

+ +

Die goldene Ära der Elfen

+

In der goldenen Ära der Elfen errichteten sie monumentale Städte...

+
+ + +
+

Die Zwerge und ihre Bedeutung

+

Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...

+ +

Die Entstehung der ersten Zwergenreiche

+

Als die Zwerge das erste Mal die Berge betraten, fanden sie in den tiefen Höhlen reiche Erzvorkommen...

+ +

Die Zwergenkriege und ihre Krieger

+

Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt...

-

Die Elfen und ihre Geschichte

-

Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur. Ihr Ursprung reicht tief in die Vergangenheit zurück, als sie die ersten Wälder des Kontinents bevölkerten. Ihre Magie ist stark mit der Natur verknüpft und wird oft als die "grüne Magie" bezeichnet.

- -

Der Aufstieg des ersten Elfenkönigs

-

Der erste Elfenkönig, Ilinthar, führte seine Leute aus der Dunkelheit der frühen Zeiten in ein goldenes Zeitalter. Unter seiner Führung florierte das elfische Volk, und ihre Städte wurden zu Zentren der Kultur und Magie.

- -

Die goldene Ära der Elfen

-

In der goldenen Ära der Elfen errichteten sie monumentale Städte, die in den Baumkronen gewachsen und von Magie durchzogen waren. Diese Städte sind heute noch legendär, obwohl viele inzwischen verschwunden sind.

- -

Elfische Magie und ihre Geheimnisse

-

Elfische Magie ist tief verwurzelt in der Natur. Sie können die Elemente kontrollieren, das Wachstum der Pflanzen lenken und mit Tieren kommunizieren. Doch die ältesten Zauber sind nur wenigen Elfen zugänglich, da sie das Wissen der Vorfahren erfordern.

- -
Der ewige Konflikt mit den anderen Völkern
-

Obwohl die Elfen für ihre Weisheit und Schönheit berühmt sind, sind sie auch in zahlreiche Konflikte verwickelt. Der ewige Streit mit den Zwergen um die Kontrolle der Wälder und Berge ist eines der bekanntesten Beispiele ihrer schwierigen Beziehungen zu anderen Völkern.

- - -

Die Zwerge und ihre Bedeutung

-

Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt. Ihre Städte liegen tief unter der Erde, wo sie enorme Hallen und Festungen aus Stein errichteten, die von Generation zu Generation weitergegeben wurden.

- -

Die Entstehung der ersten Zwergenreiche

-

Als die Zwerge das erste Mal die Berge betraten, fanden sie in den tiefen Höhlen reiche Erzvorkommen und begannen, die ersten Zwergenreiche zu bauen. Diese Reiche sind bis heute ein Symbol für die unermüdliche Arbeit und die Kunstfertigkeit der Zwerge.

- -

Die Zwergenkriege und ihre Krieger

-

Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt. Ihr unerschütterlicher Mut und ihre Fähigkeit, unglaubliche Waffen und Rüstungen zu schmieden, machten sie zu gefürchteten Kriegern.

- -

Das Geheimnis der Zwergenschmiedekunst

-

Die Zwerge sind Meister im Schmieden von Waffen und Rüstungen. Die besten Schmiede des Zwergenreiches haben die Fähigkeit, Magie in ihre Werke einzuflechten und so legendäre Waffen zu erschaffen, die von den Mächtigsten der Welt begehrt werden.

- -
Die Weisheit der Berge und die ewige Schöpfung
-

Die Berge sind das Herz der zwergischen Kultur. In den Tiefen der Erde finden sie nicht nur die Materialien für ihre Kunstwerke, sondern auch die Weisheit der Erde selbst. Jeder Berg birgt Geheimnisse und Schätze, die nur den tapfersten und weisesten Zwergen zugänglich sind.

- +

„Der Wald ist nicht nur ein Ort, sondern ein lebendiger Organismus“, sagte der weise Magier. „Wer sich in ihn wagt, muss die Regeln des Waldes respektieren.“

+ @@ -62,7 +56,11 @@
Charakter
+

Die beiden Abenteurer erreichten schließlich den Wald und standen vor der Entscheidung, ob sie den geheimen Pfad betreten sollten...

+
+
+