Add sermon.css

2026-03-09 16:39:29 +01:00 · 2026-03-09 16:39:29 +01:00 · 698042c996
commit 698042c996
1 changed files with 150 additions and 0 deletions
--- a/sermon.css
+++ 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 --- */
+/* <!-- _class: lead --> */
+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);
+}
+
+
+/* <!-- _class: tinytext --> */
+/* Makes p, and ul text smaller to fit more text on a slide */
+section.tinytext > p,
+section.tinytext > ul {
+  font-size: 0.8em;
+}
+
+/* <!-- _class: tinyquote --> */
+/* 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;
+}