124 lines
2.5 KiB
CSS
124 lines
2.5 KiB
CSS
/* Setzt den Hintergrund und das Layout der Seite */
|
|
.phb {
|
|
width: 210mm; /* A4-Breite */
|
|
height: 296.8mm; /* A4-Höhe */
|
|
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;
|
|
}
|
|
|
|
/* Flexbox für die Spalten */
|
|
.phb .content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 2%;
|
|
padding-top: 10mm;
|
|
}
|
|
|
|
/* Jede Spalte nimmt 48% der Breite ein */
|
|
.phb .column {
|
|
width: 48%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
color: #222;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Seitenumbruch nach jeder zweiten Spalte */
|
|
@media print {
|
|
.phb {
|
|
page-break-before: always; /* Neue Seite, wenn genug Inhalt vorhanden ist */
|
|
}
|
|
}
|
|
|
|
/* Stil für den Inhalt, wenn eine neue Seite beginnt */
|
|
.phb .content:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
/* 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;
|
|
font-weight: 800;
|
|
color: #58180D;
|
|
}
|
|
|
|
/* Stil für Unterüberschriften */
|
|
.phb h2 {
|
|
font-size: 1.8em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.phb h3 {
|
|
font-size: 0.529cm;
|
|
border-bottom: 2px solid #c9ad6a;
|
|
}
|
|
|
|
.phb h5 {
|
|
font-family: ff-scala-sans-pro;
|
|
font-variant: small-caps;
|
|
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;
|
|
}
|
|
}
|