Compare commits
2 Commits
b3513f59ca
...
ecbe717655
| Author | SHA1 | Date | |
|---|---|---|---|
|
ecbe717655 | ||
|
|
2c8341cd1e |
183
dnd-book.css
183
dnd-book.css
@ -1,112 +1,81 @@
|
||||
/* Container für das Buchlayout */
|
||||
.phb {
|
||||
width: 210mm;
|
||||
/* A4 Breite */
|
||||
height: 296.8mm;
|
||||
/* A4 Höhe */
|
||||
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 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 */
|
||||
font-size: 1em; /* Basis-Schriftgröße */
|
||||
}
|
||||
.pages {
|
||||
--page-width: 210mm;
|
||||
--page-height: calc(var(--page-width) * sqrt(2));
|
||||
|
||||
.phb::after {
|
||||
content: "";
|
||||
/* Necessary for the pseudo-element to be visible */
|
||||
width: var(--page-width);
|
||||
margin: 2em auto;
|
||||
|
||||
font-size: 12pt;
|
||||
color: #222;
|
||||
|
||||
display: grid;
|
||||
gap: 2em;
|
||||
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
|
||||
width: var(--page-width);
|
||||
height: var(--page-height);
|
||||
padding: 15mm;
|
||||
|
||||
background-image: url('./background.png');
|
||||
background-size: cover;
|
||||
|
||||
box-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3);
|
||||
|
||||
display: grid;
|
||||
gap: 10mm;
|
||||
|
||||
&:has(> :last-child:nth-child(1)) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
&:has(> :last-child:nth-child(2)) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
& > * > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
|
||||
background-color: #e0e5c1;
|
||||
border-image: url('./note-wrap.png') 11 / auto / 9px 0;
|
||||
|
||||
box-shadow: 1px 4px 14px #888;
|
||||
}
|
||||
|
||||
& table {
|
||||
width: 100%;
|
||||
|
||||
& td, th {
|
||||
border: 1pt solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 55px;
|
||||
|
||||
width: 100%;
|
||||
height: 42pt;
|
||||
|
||||
content: "";
|
||||
background-image: url('./footer_even.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* Ensure image is centered */
|
||||
padding-top: 28px;
|
||||
/* Adjust the vertical position of the text */
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding-left: 65px;
|
||||
padding-right: 85px;
|
||||
line-height: 1.1;
|
||||
color: white;
|
||||
/* Ensure text is readable over the footer image */
|
||||
z-index: 2;
|
||||
/* Ensure footer is always above other content */
|
||||
box-sizing: border-box;
|
||||
/* Ensure padding is included in the element's width/height */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout für die Spalten */
|
||||
.phb .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
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: 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 */
|
||||
}
|
||||
|
||||
|
||||
/* Stil für Blockquotes */
|
||||
.phb blockquote {
|
||||
margin: 0 0 21px;
|
||||
font-size: 1em;
|
||||
border-left: 5px solid #f4f5f5;
|
||||
font-family: ScalySans;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
background-color: #e0e5c1;
|
||||
border-style: solid;
|
||||
border-width: 11px;
|
||||
border-image: url('./note-wrap.png') 11;
|
||||
border-image-outset: 0;
|
||||
border-image-outset: 9px 0;
|
||||
box-shadow: 1px 4px 14px #888;
|
||||
}
|
||||
|
||||
/* Stil für Tabellen */
|
||||
.phb table {
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Stil für Tabellenkopf */
|
||||
.phb table th,
|
||||
.phb table td {
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
@media print {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Überschriften und Absätze */
|
||||
@ -148,13 +117,3 @@
|
||||
font-size: .8em;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Sicherstellen, dass die nächste Seite nach der ersten immer auf einer neuen Seite beginnt */
|
||||
.phb:not(:first-of-type) {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
/* Stil für den 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");
|
||||
}
|
||||
26
test.html
26
test.html
@ -19,11 +19,9 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Seite 1 -->
|
||||
<div class="phb">
|
||||
<div class="content">
|
||||
<!-- Erste Spalte: Elfen -->
|
||||
<div class="column">
|
||||
<div class="pages">
|
||||
<div class="page">
|
||||
<div>
|
||||
<h1>Die Elfen und ihre Geschichte</h1>
|
||||
<p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p>
|
||||
|
||||
@ -55,9 +53,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Zweite Spalte: Zwerge -->
|
||||
<div class="column">
|
||||
<div>
|
||||
<h1>Die Zwerge und ihre Bedeutung</h1>
|
||||
<p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p>
|
||||
|
||||
@ -90,13 +86,8 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seite 2 (neues Bild und Inhalt) -->
|
||||
<div class="phb">
|
||||
<div class="content">
|
||||
<!-- Erste Spalte für die nächste Seite -->
|
||||
<div class="column">
|
||||
<div class="page">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
@ -104,9 +95,7 @@
|
||||
<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">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
@ -130,6 +119,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -12,55 +12,62 @@
|
||||
|
||||
/*BODY*/
|
||||
body {
|
||||
background: #292a2d;
|
||||
color: #EEE;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
/*##########################################################*/
|
||||
/*HEADER*/
|
||||
header {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
line-height: 3.5em;
|
||||
font-family: 'Inconsolata', 'Courier New';
|
||||
font-size: 16pt;
|
||||
|
||||
color: #EEE;
|
||||
background: #292a2d;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& > header {
|
||||
position: sticky;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: #151617;
|
||||
box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
|
||||
/*font*/
|
||||
font-size: 1.2em;
|
||||
}
|
||||
line-height: 3.5em;
|
||||
box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
|
||||
|
||||
header .title {
|
||||
margin-left: 3em;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 3em) max-content auto max-content minmax(0, 3em);
|
||||
|
||||
header .title a{
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header .menu {
|
||||
margin-left: auto;
|
||||
margin-right: 3em;
|
||||
}
|
||||
|
||||
header .menu a{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
header .menu a:last-child {
|
||||
margin-right: 0; /* No margin for the last menu item */
|
||||
}
|
||||
|
||||
header .menu a:hover {
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
grid-column: 2;
|
||||
|
||||
font-size: 1.6em;
|
||||
font-weight: bold;
|
||||
|
||||
text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
|
||||
}
|
||||
|
||||
& .menu {
|
||||
grid-column: 4;
|
||||
|
||||
display: flex;
|
||||
gap: 2em
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*##########################################################*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user