From ecbe717655a5ef778617bb7405862ead78dbfb28 Mon Sep 17 00:00:00 2001 From: Sven Balzer <4653051+Kyuusokuna@users.noreply.github.com> Date: Tue, 10 Dec 2024 08:49:30 +0100 Subject: [PATCH] change to grid layout and make navigation header not show up when printing --- dnd-book.css | 183 ++++++++++++++++++----------------------------- test.html | 26 ++----- website_main.css | 4 ++ 3 files changed, 82 insertions(+), 131 deletions(-) diff --git a/dnd-book.css b/dnd-book.css index 7725d6a..074a1b9 100644 --- a/dnd-book.css +++ b/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 */ - position: absolute; - bottom: 0; - left: 0; - height: 55px; - width: 100%; - 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 */ -} + width: var(--page-width); + margin: 2em auto; -/* 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; + font-size: 12pt; color: #222; - line-height: 1.5; - page-break-inside: avoid; - /* Verhindert, dass der Inhalt in eine neue Seite umbricht */ -} + display: grid; + gap: 2em; -/* 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; -} + & * { + box-sizing: border-box; + } -/* Stil für Tabellen */ -.phb table { - font-size: 0.8em; - width: 100%; - margin-top: 10px; - margin-bottom: 10px; -} + & > * { + position: relative; -/* Stil für Tabellenkopf */ -.phb table th, -.phb table td { - padding: 5px; - border: 1px solid #ccc; + 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; + + width: 100%; + height: 42pt; + + content: ""; + background-image: url('./footer_even.png'); + background-size: cover; + } + } + + @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"); -} \ No newline at end of file diff --git a/test.html b/test.html index 2d149eb..7a310c8 100644 --- a/test.html +++ b/test.html @@ -19,11 +19,9 @@ - -
-
- -
+
+
+

Die Elfen und ihre Geschichte

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

@@ -55,9 +53,7 @@
- - -
+

Die Zwerge und ihre Bedeutung

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

@@ -90,13 +86,8 @@
-
- - -
-
- -
+
+

Die Magie der Welt

Die Magie durchzieht die Welt, sie ist die Quelle der größten Kräfte und der gefährlichsten Geheimnisse...

@@ -104,9 +95,7 @@

„Magie ist die Sprache der Welt, die jeder versteht, der mit der richtigen Intention hört“, erklärte der alte Zauberer.

- - -
+

Die Götter und ihre Anhänger

Die Götter der Welt sind nicht nur Wesen von unvorstellbarer Macht, sondern auch Teil des täglichen Lebens...

@@ -130,6 +119,5 @@
- diff --git a/website_main.css b/website_main.css index 343d7a8..cbec995 100644 --- a/website_main.css +++ b/website_main.css @@ -63,6 +63,10 @@ body { display: flex; gap: 2em } + + @media print { + display: none; + } } }