diff --git a/public/stylesheets/style-konzentr.css b/public/stylesheets/style-konzentr.css index 3c77153..a79cdba 100644 --- a/public/stylesheets/style-konzentr.css +++ b/public/stylesheets/style-konzentr.css @@ -222,10 +222,6 @@ background-color: #3bb3c3; } -.card-body.gliederung > p { - font-size: 80%; -} - .bibelstelle.text-muted { color: #505050 !important; } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 1e48042..4f1935f 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1,11 +1,236 @@ -/*@import "alegreya-sans.css";*/ - -p { - /*padding: 50px;*/ - /* font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;*/ - /*font-family: "Alegreya" - /*font-family: "Source Sans Pro";*/ +.card.slide > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext { + font-size: 1rem; } + +.card.slide > .card-body > h5, .card.slide > h5.card-header { + font-size: 1.25rem; +} + +.card.slide > .card-body > h6.card-title { + font-size: 1.1rem; +} + +.card-body.gliederung { + padding: 0.5rem; +} + +.card-body.gliederung > h5.card-title { + font-size: 1.0rem; +} + +.card-body.gliederung > h6.card-title { + font-size: 0.75rem; + color: #343a40; +} + +.card-body.gliederung > h6.card-subtitle { + font-size: 0.5rem; +} + +ul.card-text li { + margin-bottom: 0.1rem !important; +} + +@media(min-width: 576px) { + .card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext { + font-size: 1.1rem; + } + .card.slide > .card-body > h5, .card.slide > h5.card-header { + font-size: 1.35rem; + } + .card.slide > .card-body > h6.card-title { + font-size: 1.2rem; + } + + .card-body.gliederung > h5.card-title { + font-size: 1.1rem; + } + + .card-body.gliederung > h6.card-title { + font-size: 0.85rem; + } + + .card-body.gliederung > h6.card-subtitle { + font-size: 0.6rem; + } + + .card-body.gliederung > p { + font-size: 1.0rem; + } + + p.bibeltextkonzentr { + font-size: 1.0rem; + } +} + +@media(min-width: 768px) { + .card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext { + font-size: 1.2rem; + } + .card.slide > .card-body > h5, .card.slide > h5.card-header { + font-size: 1.45rem; + } + .card.slide > .card-body > h6.card-title { + font-size: 1.3rem; + } + + .card-body.gliederung > h5.card-title { + font-size: 1.2rem; + } + + .card-body.gliederung > h6.card-title { + font-size: 0.95rem; + } + + .card-body.gliederung > h6.card-subtitle { + font-size: 0.7rem; + } + + .card-body.gliederung > p { + font-size: 1.1rem; + } + + p.bibeltextkonzentr { + font-size: 1.1rem; + } +} + +@media(min-width: 992px) { + .card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext { + font-size: 1.3rem; + } + .card.slide > .card-body > h5, .card.slide > h5.card-header { + font-size: 1.55rem; + } + .card.slide > .card-body > h6.card-title { + font-size: 1.4rem; + } + + .card-body.gliederung > h5.card-title { + font-size: 1.3rem; + } + + .card-body.gliederung > h6.card-title { + font-size: 1.05rem; + } + + .card-body.gliederung > h6.card-subtitle { + font-size: 0.8rem; + } + + .card-body.gliederung > p { + font-size: 1.2rem; + } + + p.bibeltextkonzentr { + font-size: 1.2rem; + } + + .mb-1 { + margin-bottom: 1.0rem !important; + } + + .mb-2 { + margin-bottom: 1.25rem !important; + } + + .mb-3 { + margin-bottom: 1.5rem !important; + } +} + +@media(min-width: 1200px) { + .card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext { + font-size: 1.4rem; + } + .card.slide > .card-body > h5, .card.slide > h5.card-header { + font-size: 1.65rem; + } + .card.slide > .card-body > h6.card-title { + font-size: 1.5rem; + } + + .card-body.gliederung > h5.card-title { + font-size: 1.4rem; + } + + .card-body.gliederung > h6.card-title { + font-size: 1.15rem; + } + + .card-body.gliederung > h6.card-subtitle { + font-size: 0.9rem; + } + + .card-body.gliederung > p { + font-size: 1.3rem; + } + + ul.card-text li { + margin-bottom: 0.2rem !important; + } + + p.bibeltextkonzentr { + font-size: 1.3rem; + } +} + +@media(min-width: 1400px) { + .card.slide > .card-body > .card-text, .card.slide > .card-body > h6.card-subtitle, q.bibeltext { + font-size: 1.5rem; + } + .card.slide > .card-body > h5, .card.slide > h5.card-header { + font-size: 1.75rem; + } + .card.slide > .card-body > h6.card-title { + font-size: 1.6rem; + } + + .card-body.gliederung > h5.card-title { + font-size: 1.5rem; + } + + .card-body.gliederung > h6.card-title { + font-size: 1.25rem; + } + + .card-body.gliederung > h6.card-subtitle { + font-size: 1rem; + } + + .card-body.gliederung > p { + font-size: 1.4rem; + } + + ul.card-text li { + margin-bottom: 0.3rem !important; + } + + p.bibeltextkonzentr { + font-size: 1.4rem; + } + + .mb-1 { + margin-bottom: 1rem !important; + } + + .mb-2 { + margin-bottom: 1.5rem !important; + } + + .mb-3 { + margin-bottom: 2rem !important; + } +} + +.small q.bibeltext { + font-size: 100%; +} + +hr { + border-top: 2px solid rgba(108, 117, 125, 0.63); +} + .nomarginbottom { margin-bottom: 0px; } @@ -25,7 +250,6 @@ p { "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - //font-size: 1.2rem; } .serif, .card-text { @@ -46,39 +270,10 @@ span.bibelstelle { } span.bibelstelle::after { content: ' '; } -h6.card-title { - font-size: 1.1rem; -} - h6.bibelstelle { font-size: 0.9rem; } -.card-body.gliederung { - padding: 0.5rem; -} - -.card-body.gliederung > h5.card-title { - font-size: 0.9rem; -} - -.card-body.gliederung > h6.card-title { - font-size: 0.75rem; -} - -.card-body.gliederung > h6.card-subtitle { - font-size: 0.6rem; -} - - -/*h2, .h2 { - font-size: 2.5rem; -} - -h5, .h5 { - font-size: 1.5rem; -}*/ - blockquote > p { font-family: "Noto Serif", -apple-system, @@ -94,15 +289,6 @@ blockquote > p { "Noto Color Emoji"; } -/*.blockquote-footer { - font-size: 100%; -}*/ - -/*.divinline { - display: inline; - padding-right: 4px; -}*/ - .breadcrumb { margin-bottom: 2rem; background-color: #a4d0fd; @@ -116,13 +302,6 @@ blockquote > p { color: #0e4f88; } -/*.nav-pills > .nav-item > .nav-link:not(.active) { - background-color: white; -} -.nav-pills > .nav-item > .nav-link { - background-color: #a4d0fb; -}*/ - .pill-sub-1 { padding-left: 1rem; padding-right: 1rem;"