Update sermon-a4.css

This commit is contained in:
simonpipe 2026-05-12 11:18:09 +02:00
parent 2b8d6ff195
commit 61745b973c

View file

@ -1,34 +1,28 @@
/* @theme sermon-a4 /* @theme sermon-a4
author: simonpipe (codeberg.org/simonpipe/) author: simonpipe (codeberg.org/simonpipe/)
License: MIT License: MIT
Inspired by "a4-clean.css" by stanfrdb
This theme is optimized for A4 printing. Standalone A4/Booklet theme based on Marp 'base'.
Inspired by "a4-clean.css" by stanfrdb (https://github.com/stanfrbd/A4-marp/tree/main)
Usage:
- Default: Standard A4 layout with 12pt font size.
- Class 'booklet': Scales the layout to 18pt for easy-to-read booklet printing.
(Set 'class: booklet' in your Markdown YAML header)
*/ */
@import "base"; @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"); @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 { :root {
/* --- COLOR PALETTE (From sermon-slide) --- */ /* --- YOUR DEFINED COLORS & SIZES --- */
--primary-color: #265770; --font-size: 12pt;
--text-color: #393552; --line-height: 1.5;
--lighter-color: #666;
--bg-color-elements: #eee;
--mark-color: #ffffa590;
--cite-color: #2d5f83;
/* --- LAYOUT CONSTANTS --- */
--font-size-std: 12pt;
--font-size-booklet: 18pt; --font-size-booklet: 18pt;
--line-height-booklet: 1.6;
--font-family: 'Ubuntu', sans-serif;
--primary-color: #000;
--lighter-color: #666;
--bg-color: #eee;
--mark-color: #eee;
--margin-page: 25px 35px; --margin-page: 25px 35px;
font-family: 'Ubuntu', sans-serif; --colorblockquote: #333; /* Dezenter Kontrast für Bibelstellen */
} }
/* --- BASIC A4 STRUCTURE --- */ /* --- BASIC A4 STRUCTURE --- */
@ -37,29 +31,30 @@ section {
height: 29.7cm; height: 29.7cm;
padding: var(--margin-page); padding: var(--margin-page);
background: white; background: white;
color: var(--text-color); color: var(--primary-color);
font-size: var(--font-size-std); font-family: var(--font-family);
line-height: 1.5; font-size: var(--font-size);
display: block; /* Garantiert: Alles fängt oben an! */ line-height: var(--line-height);
display: block; /* Garantiert Start oben (Zentrierung besiegt) */
position: relative; position: relative;
} }
/* Booklet Mode ('class: booklet') */ /* Booklet Mode ('class: booklet') */
section.booklet { section.booklet {
font-size: var(--font-size-booklet); font-size: var(--font-size-booklet);
line-height: 1.6; line-height: var(--line-height-booklet);
} }
/* --- TYPOGRAPHY --- */ /* --- TYPOGRAPHY --- */
h1, h2, h3, h4 { h1, h2, h3 {
color: var(--primary-color); color: var(--primary-color);
margin: 0; margin: 0;
line-height: 1.2; line-height: 1.2;
} }
h1 { font-size: 1.4em; font-weight: 700; margin-bottom: 0.3em; } h1 { font-size: 1.3em; font-weight: 700; margin-bottom: 0.4em; }
h2 { font-size: 1.2em; font-weight: 600; margin-top: 1em; margin-bottom: 0.2em; } h2 { font-size: 1.15em; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.2em; }
h3 { font-size: 1.1em; font-weight: 500; margin-top: 0.8em; } h3 { font-size: 1.05em; font-weight: 500; margin-top: 1em; }
p, li { p, li {
margin: 0.6em 0; margin: 0.6em 0;
@ -67,14 +62,13 @@ p, li {
strong { strong {
font-weight: 600; font-weight: 600;
color: #000;
} }
em { em {
font-style: italic; font-style: italic;
} }
/* Motto-Style (First Page) */ /* Motto-Style (Erste Seite oben) */
section:first-of-type p:first-of-type em:first-of-type { section:first-of-type p:first-of-type em:first-of-type {
display: block; display: block;
font-size: 0.9em; font-size: 0.9em;
@ -86,16 +80,17 @@ section:first-of-type p:first-of-type em:first-of-type {
/* --- ELEMENTS --- */ /* --- ELEMENTS --- */
mark { mark {
background-color: var(--mark-color); background-color: var(--mark-color);
color: var(--primary-color);
padding: 0 4px; padding: 0 4px;
border-radius: 3px; border-radius: 3px;
} }
/* --- BIBEL-ZITATE (Kompakt-Modus) --- */ /* --- BIBEL-ZITATE (Kompakt-Modus) --- */
blockquote { blockquote {
margin: 1.5em 0; margin: 1.2em 0;
font-weight: 500; font-weight: 500;
color: #000; color: var(--primary-color);
border-left: none; /* Kein Balken für Zitate im A4 */ border-left: none;
padding: 0; padding: 0;
} }
@ -112,7 +107,7 @@ blockquote cite {
display: inline; display: inline;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
color: var(--cite-color); color: var(--colorblockquote);
} }
blockquote cite::before { content: " ("; } blockquote cite::before { content: " ("; }
@ -124,11 +119,16 @@ blockquote cite::after { content: ")"; }
padding: 10px 20px; padding: 10px 20px;
margin: 20px 0; margin: 20px 0;
border-left: 4px solid var(--primary-color); border-left: 4px solid var(--primary-color);
background-color: var(--bg-color-elements); background-color: var(--bg-color);
font-style: italic; font-style: italic;
font-size: 0.9em; font-size: 0.9em;
} }
.copyright a {
color: var(--lighter-color);
text-decoration: underline;
}
/* --- TABLES --- */ /* --- TABLES --- */
table { table {
width: 100%; width: 100%;
@ -145,13 +145,13 @@ table th {
table td { table td {
padding: 8px; padding: 8px;
border-bottom: 1px solid var(--bg-color-elements); border-bottom: 1px solid var(--bg-color);
} }
/* --- CODE --- */ /* --- CODE --- */
code, pre { code, pre {
font-family: 'Ubuntu Mono', monospace !important; font-family: 'Ubuntu Mono', monospace !important;
background-color: var(--bg-color-elements); background-color: var(--bg-color);
} }
code { code {
@ -169,7 +169,7 @@ pre {
pre code { background-color: transparent; } pre code { background-color: transparent; }
/* --- PAGINATION --- */ /* --- PAGINATION (Unten Rechts) --- */
section::after { section::after {
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total); content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
font-size: 10pt; font-size: 10pt;
@ -179,7 +179,7 @@ section::after {
color: var(--lighter-color); color: var(--lighter-color);
} }
/* --- IMAGE CENTER --- */ /* --- IMAGES --- */
img[alt~="center"] { img[alt~="center"] {
display: block; display: block;
margin: 20px auto; margin: 20px auto;