add shadow and centered rendering
- multiple pages now working with all content in columns
This commit is contained in:
parent
a8c6569e10
commit
d10ed8bcfa
30
dnd-book.css
30
dnd-book.css
@ -2,47 +2,55 @@
|
||||
.phb {
|
||||
width: 210mm; /* A4 Breite */
|
||||
height: 296.8mm; /* A4 Höhe */
|
||||
margin: 20mm;
|
||||
padding: 20mm;
|
||||
margin: 20mm auto; /* Zentriert das Layout horizontal auf dem Bildschirm */
|
||||
padding: 10mm; /* Verringert das Padding auf der Seite, um mehr Platz zu schaffen */
|
||||
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-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3); /* Schatten links und rechts */
|
||||
display: flex;
|
||||
justify-content: center; /* Zentriert die Spalten */
|
||||
box-sizing: border-box;
|
||||
page-break-before: always; /* Seite beginnt immer nach einer neuen phb */
|
||||
}
|
||||
|
||||
/* Layout für die Spalten */
|
||||
.phb .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2%; /* Abstand zwischen den Spalten */
|
||||
gap: 1%; /* Verringert den Abstand zwischen den Spalten */
|
||||
width: 100%; /* Gesamtbreite für den Inhalt */
|
||||
}
|
||||
|
||||
/* Jede Spalte nimmt 48% der Breite ein */
|
||||
.phb .column {
|
||||
width: 48%; /* Breite der Spalten */
|
||||
padding: 10px;
|
||||
padding: 5mm; /* Reduziert das Padding in den Spalten */
|
||||
box-sizing: border-box;
|
||||
color: #222;
|
||||
line-height: 1.5;
|
||||
page-break-inside: avoid; /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
|
||||
}
|
||||
|
||||
/* Blockquote */
|
||||
|
||||
/* Stil für Blockquotes */
|
||||
.phb blockquote {
|
||||
background-color: lightgrey;
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Stil für Tabellen */
|
||||
.phb table {
|
||||
font-size: 9pt;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Zusätzliche Stile für Tabellen und andere Elemente */
|
||||
/* Stil für Tabellenkopf */
|
||||
.phb table th, .phb table td {
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
@ -53,6 +61,12 @@
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
color: #58180D;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Sicherstellen, dass die nächste Seite nach der ersten immer auf einer neuen Seite beginnt */
|
||||
.phb:not(:first-of-type) {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.phb h2 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user