From 698042c996fcc277cfba13886273842218a42ed3 Mon Sep 17 00:00:00 2001 From: simonpipe Date: Mon, 9 Mar 2026 16:39:29 +0100 Subject: [PATCH] Add sermon.css --- sermon.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 sermon.css diff --git a/sermon.css b/sermon.css new file mode 100644 index 0000000..14723b4 --- /dev/null +++ b/sermon.css @@ -0,0 +1,150 @@ +/* @theme sermon +author: simonpipe (codeberg.org/simonpipe/) +License: MIT + +This theme is a derivative work based on: +"Gradient Theme" by rnd195 (https://github.com/rnd195/my-marp-themes) +Original License: MIT (https://github.com/rnd195/my-marp-themes/blob/live/licenses/LICENSE) +*/ + +@import "default"; +@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 { + --darkmagenta: #842174; + --magenta: #393552; + --markmagenta: #84217427; + --white: #ffffff; + --white68: #ffffffad; + --white50: #ffffff80; + --verydarkgray: #333; + --black: #000; + + font-family: 'Ubuntu', sans-serif; +} + + +/* --- BACKGROUND --- */ +section { + background-color: var(--white); + background-image: linear-gradient(to top right, #e1c2e1 5%, #b9d5d9 95%); + font-size: 35px; /* Basisschriftgröße für die gesamte Folie */ + line-height: 1.4; /* Zeilenabstand für die gesamte Folie */ +} + + +/* --- TITLES --- */ +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--darkmagenta); +} + + +/* --- TEXT CHANGES --- */ +a { + color: var(--magenta); +} + +code, +pre, +pre code { + font-family: 'Ubuntu Mono', monospace !important; + background-color: var(--white50); +} + +mark { + background-color: var(--markmagenta); + padding: 0 4px; /* Etwas mehr Luft an den Seiten sieht meist besser aus */ + border-radius: 3px; +} + +blockquote { + border-left: none; + margin: 0; + padding: 0; + font-size: 1em; + line-height: 1.5; + color: var(--black); +} + +blockquote cite { + display: block; + text-align: right; + color: var(--darkmagenta); + font-style: normal; + font-size: 0.9em; + margin-top: 20px; +} + + +/* --- BOTTOM BAR --- */ +section::after { + font-size: 0.75em; + /* From github.com/yhatt/marp/issues/263 */ + content: attr(data-marpit-pagination); + color: var(--darkmagenta); /* Oder --verydarkgray */ + opacity: 0.6; /* Etwas dezenter */ +} + + +/* --- CUSTOM CLASSES AND KEYWORDS --- */ +/* */ +section.lead { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + +section.lead h1 { + font-size: 2em; +} + +section.lead h2 { + font-size: 1.6em; + color: var(--verydarkgray); + + /* Die Linie */ + border-top: 3px solid var(--verydarkgray); /* Linie */ + padding-top: 0.8em; /* Abstand zwischen Linie und Text */ + margin-top: 0.5em; /* Abstand zwischen H1 und Linie */ + + /* Damit die Linie nicht über die ganze Breite geht */ + display: inline-block; /* Richtet sich nach der Textbreite aus */ + align-self: center; /* Zentriert das h2-Element im Flex-Container */ + min-width: 300px; /* Verhindert, dass die Linie bei kurzem Text zu mickrig wird */ +} + +section.lead p { + font-size: 1.3em; + color: var(--verydarkgray); +} + + +/* */ +/* Makes p, and ul text smaller to fit more text on a slide */ +section.tinytext > p, +section.tinytext > ul { + font-size: 0.8em; +} + +/* */ +/* Makes blockquote text smaller to fit more text on a slide */ +section.tinyquote > blockquote { + font-size: 0.9em; +} +section.tinyquote > blockquote cite { + font-size: 0.9em; +} + + +/* img keyword "center" */ +/* Centers an image, from github.com/marp-team/marpit/issues/141#issuecomment-473204518 */ +img[alt~="center"] { + display: block; + margin: 0 auto; +} \ No newline at end of file