diff --git a/sermon-a4.css b/sermon-a4.css index 3772f75..374c600 100644 --- a/sermon-a4.css +++ b/sermon-a4.css @@ -2,7 +2,7 @@ author: simonpipe (codeberg.org/simonpipe/) License: MIT -This theme builds upon "sermon-slide.css" and is optimized for A4 printing. +This theme is optimized for A4 printing. Inspired by "a4-clean.css" by stanfrdb (https://github.com/stanfrbd/A4-marp/tree/main) Usage: @@ -11,106 +11,76 @@ Usage: (Set 'class: booklet' in your Markdown YAML header) */ -@import "sermon-slide"; +@import "base"; +@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); :root { - --font-size: 12pt; - --line-height: 1.5; - --font-size-booklet: 18pt; - --line-height-booklet: 1.6; - --font-family: 'Ubuntu', sans-serif; - --primary-color: #000; + /* --- COLOR PALETTE (From sermon-slide) --- */ + --primary-color: #265770; + --text-color: #393552; --lighter-color: #666; - --bg-color: #eee; - --mark-color: #eee; - --margin-page: 25px 35px; + --bg-color-elements: #eee; + --mark-color: #ffffa590; + --cite-color: #2d5f83; + + /* --- LAYOUT CONSTANTS --- */ + --font-size-std: 12pt; + --font-size-booklet: 18pt; + --margin-page: 25px 35px; + + font-family: 'Ubuntu', sans-serif; } -/* --- A4 LAYOUT OVERRIDES --- */ +/* --- BASIC A4 STRUCTURE --- */ section { width: 21cm; height: 29.7cm; padding: var(--margin-page); background: white; - background-image: none; /* Entfernt den Folien-Gradienten für den Druck */ - color: var(--primary-color); - font-family: var(--font-family); - font-size: var(--font-size); - line-height: var(--line-height); - display: block !important; - text-align: left; - justify-content: flex-start; /* Falls Flexbox doch aktiv bleibt, oben starten */ - align-items: flex-start; /* Falls Flexbox doch aktiv bleibt, links starten */ + color: var(--text-color); + font-size: var(--font-size-std); + line-height: 1.5; + display: block; /* Garantiert: Alles fängt oben an! */ + position: relative; } -/* --- BOOKLET Printing MODUS ('class: booklet') --- */ +/* Booklet Mode ('class: booklet') */ section.booklet { font-size: var(--font-size-booklet); - line-height: var(--line-height-booklet); -} - -/* Seitenzahlen für das Booklet */ -section::after { - content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total); - font-size: 15px; - position: absolute; - bottom: 25px; - right: 35px; - color: #555; - opacity: 1; + line-height: 1.6; } /* --- TYPOGRAPHY --- */ -h1 { +h1, h2, h3, h4 { color: var(--primary-color); - font-size: 1.2em; - font-weight: 600; - margin-bottom: -20px; - border-bottom: none; /* Entfernt die Linie aus der Slide-Klasse falls nötig */ - display: block; - min-width: 0; + margin: 0; + line-height: 1.2; } -h2 { - color: var(--primary-color); - font-size: 1.1em; - font-weight: 500; - margin-top: 30px; - margin-bottom: 0px; -} - -h3 { - color: var(--primary-color); - font-size: 1em; - font-weight: 500; - margin-top: 20px; - margin-bottom: 0px; -} +h1 { font-size: 1.4em; font-weight: 700; margin-bottom: 0.3em; } +h2 { font-size: 1.2em; font-weight: 600; margin-top: 1em; margin-bottom: 0.2em; } +h3 { font-size: 1.1em; font-weight: 500; margin-top: 0.8em; } p, li { - margin: 10px 0; + margin: 0.6em 0; } strong { - color: var(--primary-color); - font-weight: 500; + font-weight: 600; + color: #000; } -/* Regieanweisungen */ em { - color: var(--primary-color); font-style: italic; - font-size: 1em; } -/* Motto auf der ersten Seite */ +/* Motto-Style (First Page) */ section:first-of-type p:first-of-type em:first-of-type { display: block; - font-size: 0.8em; + font-size: 0.9em; color: var(--lighter-color); - margin-top: -15px; - margin-bottom: 20px; - font-weight: normal; + margin-top: -0.5em; + margin-bottom: 1.5em; } /* --- ELEMENTS --- */ @@ -120,28 +90,15 @@ mark { border-radius: 3px; } -/* --- COPYRIGHT KLASSE --- */ -/* Nutzung im Markdown: */ -.copyright { - color: var(--lighter-color); - padding: 10px 20px; - margin: 20px 0; - border-left: 4px solid var(--primary-color); - background-color: var(--bg-color); - font-style: italic; - font-size: 0.9em; -} - -.copyright a { - color: var(--lighter-color); -} - +/* --- BIBEL-ZITATE (Kompakt-Modus) --- */ blockquote { - font-weight: 500; - margin-bottom: 20px; + margin: 1.5em 0; + font-weight: 500; + color: #000; + border-left: none; /* Kein Balken für Zitate im A4 */ + padding: 0; } -/* Entfernt den Zeilenumbruch der Absätze im Zitat */ blockquote p { display: inline !important; margin: 0; @@ -155,68 +112,75 @@ blockquote cite { display: inline; font-weight: normal; font-style: normal; - color: var(--colorblockquote); + color: var(--cite-color); } -/* Klammer auf vor der Bibelstelle */ -blockquote cite::before { - content: " ("; -} - -/* Klammer zu nach der Bibelstelle */ -blockquote cite::after { - content: ")"; +blockquote cite::before { content: " ("; } +blockquote cite::after { content: ")"; } + +/* --- COPYRIGHT BLOCK --- */ +.copyright { + color: var(--lighter-color); + padding: 10px 20px; + margin: 20px 0; + border-left: 4px solid var(--primary-color); + background-color: var(--bg-color-elements); + font-style: italic; + font-size: 0.9em; } +/* --- TABLES --- */ table { width: 100%; border-collapse: collapse; - margin: 20px 0; - font-size: 0.9em; + margin: 1.5em 0; } table th { background-color: var(--primary-color); color: white; padding: 8px; - border: 1px solid var(--lighter-color); + text-align: left; } table td { padding: 8px; - border: 1px solid var(--lighter-color); + border-bottom: 1px solid var(--bg-color-elements); } +/* --- CODE --- */ code, pre { font-family: 'Ubuntu Mono', monospace !important; + background-color: var(--bg-color-elements); } code { - background-color: var(--bg-color); - padding: 2px 6px; + padding: 2px 5px; border-radius: 3px; - color: var(--primary-color); - font-size: 0.9em; } pre { - background-color: var(--bg-color); padding: 15px; border-radius: 5px; + border-left: 4px solid var(--primary-color); overflow-x: auto; - line-height: 1.4; - border-left: 3px solid var(--primary-color); - margin: 20px 0; + margin: 1.5em 0; } -pre code { - background-color: transparent; - padding: 0; +pre code { background-color: transparent; } + +/* --- PAGINATION --- */ +section::after { + content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total); + font-size: 10pt; + position: absolute; + bottom: 25px; + right: 35px; + color: var(--lighter-color); } -img { - max-width: 100%; - height: auto; +/* --- IMAGE CENTER --- */ +img[alt~="center"] { display: block; margin: 20px auto; } \ No newline at end of file