foundry/caws-world
4
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add multiple pages

Browse Source
This commit is contained in:
Ammerhai 2024-12-08 22:02:00 +01:00
parent 6ec2131a45
commit a8c6569e10
2 changed files with 127 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
dnd-book.css
View File

@ -1,60 +1,60 @@
/* Setzt den Hintergrund und das Layout der Seite */ /* Container für das Buchlayout */
.phb { .phb {
width: 210mm; /* A4-Breite */ width: 210mm; /* A4 Breite */
height: 296.8mm; /* A4-Höhe */ height: 296.8mm; /* A4 Höhe */
font-family: 'bookmania', sans-serif; margin: 20mm;
background-image: url('./background.png'); /* Hintergrundbild */ padding: 20mm;
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; position: relative;
background-image: url('./background.png'); /* Hintergrundbild */
background-size: cover; /* Hintergrundbild strecken */
background-position: center; /* Bild zentrieren */
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Schatten */
page-break-after: always; /* Seitensprung nach jeder Seite */
box-sizing: border-box;
} }
/* Flexbox für die Spalten */ /* Layout für die Spalten */
.phb .content { .phb .content {
display: flex; display: flex;
justify-content: space-between; flex-wrap: wrap;
gap: 2%; gap: 2%; /* Abstand zwischen den Spalten */
padding-top: 10mm;
} }
/* Jede Spalte nimmt 48% der Breite ein */ /* Jede Spalte nimmt 48% der Breite ein */
.phb .column { .phb .column {
width: 48%; width: 48%; /* Breite der Spalten */
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
color: #222; color: #222;
line-height: 1.5; line-height: 1.5;
page-break-inside: avoid; /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
} }
/* Seitenumbruch nach jeder zweiten Spalte */ /* Blockquote */
@media print { .phb blockquote {
.phb { background-color: lightgrey;
page-break-before: always; /* Neue Seite, wenn genug Inhalt vorhanden ist */ margin-top: 1em;
} padding: 0.5em;
} }
/* Stil für den Inhalt, wenn eine neue Seite beginnt */ .phb table {
.phb .content:after { font-size: 9pt;
content: ""; width: 100%;
display: block;
clear: both;
} }
/* Stile für Überschriften */ /* Zusätzliche Stile für Tabellen und andere Elemente */
.phb table th, .phb table td {
padding: 5px;
border: 1px solid #ccc;
}
/* Überschriften und Absätze */
.phb h1, .phb h2, .phb h3, .phb h4, .phb h5 { .phb h1, .phb h2, .phb h3, .phb h4, .phb h5 {
margin-top: 0.2em; margin-top: 0.2em;
margin-bottom: 0.2em; margin-bottom: 0.2em;
font-family: 'MrJeeves', sans-serif;
font-weight: 800;
color: #58180D; color: #58180D;
} }
/* Stil für Unterüberschriften */
.phb h2 { .phb h2 {
font-size: 1.8em; font-size: 1.8em;
margin-bottom: 10px; margin-bottom: 10px;
@ -65,59 +65,7 @@
border-bottom: 2px solid #c9ad6a; border-bottom: 2px solid #c9ad6a;
} }
.phb h5 { /* Stil für den Blockquote */
font-family: ff-scala-sans-pro; .phb blockquote hr {
font-variant: small-caps; 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");
font-weight: 600;
}
/* Zusätzlicher Stil für Blockquotes */
.phb blockquote {
background-color: lightgrey;
margin-top: 1em;
padding: 0.5em;
}
/* 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 */
.portrait {
width: 22%;
position: absolute;
right: 0;
top: 4px;
z-index: 1;
}
/* Dynamische Bildpositionierung innerhalb der Seite */
.phb .content hr+hr+section blockquote img.portrait {
width: 10%;
left: 38%;
}
/* Seitenumbruch innerhalb des Drucks */
@media print {
.phb {
page-break-before: always;
}
} }

126
test.html
View File

@ -7,60 +7,118 @@
<link rel="stylesheet" href="dnd-book.css"> <!-- Dein CSS-File --> <link rel="stylesheet" href="dnd-book.css"> <!-- Dein CSS-File -->
</head> </head>
<body> <body>
<!-- Seite 1 -->
<div class="phb"> <div class="phb">
<div class="content"> <div class="content">
<!-- Erster Abschnitt der Spalten: Elfen --> <!-- Erste Spalte: Elfen -->
<div class="column"> <div class="column">
<h1>Die Elfen und ihre Geschichte</h1> <h1>Die Elfen und ihre Geschichte</h1>
<p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p> <p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p>
<h2>Der Aufstieg des ersten Elfenkönigs</h2> <h2>Der Aufstieg des ersten Elfenkönigs</h2>
<p>Der erste Elfenkönig, Ilinthar, führte seine Leute aus der Dunkelheit der frühen Zeiten...</p> <p>Der erste Elfenkönig, Ilinthar, führte seine Leute aus der Dunkelheit der frühen Zeiten...</p>
<h3>Die goldene Ära der Elfen</h3> <h3>Die goldene Ära der Elfen</h3>
<p>In der goldenen Ära der Elfen errichteten sie monumentale Städte...</p> <p>In der goldenen Ära der Elfen errichteten sie monumentale Städte...</p>
<blockquote>
<p>„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.“</p>
</blockquote>
<table>
<tr>
<th>Charakter</th>
<th>Rasse</th>
<th>Waffe</th>
</tr>
<tr>
<td>Filaron</td>
<td>Elf</td>
<td>Bogen</td>
</tr>
<tr>
<td>Grunther</td>
<td>Zwerg</td>
<td>Axt</td>
</tr>
</table>
</div> </div>
<!-- Zweiter Abschnitt der Spalten: Zwerge --> <!-- Zweite Spalte: Zwerge -->
<div class="column"> <div class="column">
<h1>Die Zwerge und ihre Bedeutung</h1> <h1>Die Zwerge und ihre Bedeutung</h1>
<p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p> <p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p>
<h2>Die Entstehung der ersten Zwergenreiche</h2> <h2>Die Entstehung der ersten Zwergenreiche</h2>
<p>Als die Zwerge das erste Mal die Berge betraten, fanden sie in den tiefen Höhlen reiche Erzvorkommen...</p> <p>Als die Zwerge das erste Mal die Berge betraten, fanden sie in den tiefen Höhlen reiche Erzvorkommen...</p>
<h3>Die Zwergenkriege und ihre Krieger</h3> <h3>Die Zwergenkriege und ihre Krieger</h3>
<p>Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt...</p> <p>Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt...</p>
<!-- Blockquote --> <blockquote>
<blockquote> <p>„Die Stärke eines Zwerges liegt nicht nur in seiner Axt, sondern in seinem unerschütterlichen Willen“, sagte der alte Schmied.</p>
<p>„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.“</p> </blockquote>
</blockquote>
<!-- Tabelle --> <table>
<table> <tr>
<tr> <th>Charakter</th>
<th>Charakter</th> <th>Rasse</th>
<th>Rasse</th> <th>Waffe</th>
<th>Waffe</th> </tr>
</tr> <tr>
<tr> <td>Thorin</td>
<td>Filaron</td> <td>Zwerg</td>
<td>Elf</td> <td>Hammer</td>
<td>Bogen</td> </tr>
</tr> <tr>
<tr> <td>Haldor</td>
<td>Grunther</td> <td>Zwerg</td>
<td>Zwerg</td> <td>Schwert</td>
<td>Axt</td> </tr>
</tr> </table>
</table> </div>
</div>
<!-- Weiterer Text --> </div>
<p>Die beiden Abenteurer erreichten schließlich den Wald und standen vor der Entscheidung, ob sie den geheimen Pfad betreten sollten...</p>
<!-- Seite 2 (neues Bild und Inhalt) -->
<div class="phb">
<div class="content">
<!-- Erste Spalte für die nächste Seite -->
<div class="column">
<h1>Die Magie der Welt</h1>
<p>Die Magie durchzieht die Welt, sie ist die Quelle der größten Kräfte und der gefährlichsten Geheimnisse...</p>
<blockquote>
<p>„Magie ist die Sprache der Welt, die jeder versteht, der mit der richtigen Intention hört“, erklärte der alte Zauberer.</p>
</blockquote>
</div>
<!-- Zweite Spalte für die nächste Seite -->
<div class="column">
<h1>Die Götter und ihre Anhänger</h1>
<p>Die Götter der Welt sind nicht nur Wesen von unvorstellbarer Macht, sondern auch Teil des täglichen Lebens...</p>
<table>
<tr>
<th>Gottheit</th>
<th>Domäne</th>
<th>Anhänger</th>
</tr>
<tr>
<td>Aerath</td>
<td>Winde</td>
<td>Flügelvolk</td>
</tr>
<tr>
<td>Valkor</td>
<td>Krieg</td>
<td>Kriegsherren</td>
</tr>
</table>
</div>
</div>
</div> </div>
</div>
</div>
</body> </body>
</html> </html>