From 12ff2ef92001198203921b5c2d3ea1b10a79d7e5 Mon Sep 17 00:00:00 2001 From: Felix Boerner Date: Wed, 30 May 2018 10:58:05 +0200 Subject: feat: enhance css styles to get beautiful text --- static/assets/css/split.css | 105 ++++++++++++++++++++++++++++++- static/assets/sass/01-content.scss | 123 ++++++++++++++++++++++++++++++++++++- 2 files changed, 222 insertions(+), 6 deletions(-) diff --git a/static/assets/css/split.css b/static/assets/css/split.css index c2d9a60..dd13d04 100644 --- a/static/assets/css/split.css +++ b/static/assets/css/split.css @@ -198,21 +198,23 @@ body.page-template-page-fullsingle-split p { } .split-bio { - padding: 40px 0 40px 0; + padding: 40px 0 20px 0; font-family: "Lora", serif; } @media (max-width: 1200px) { .split-bio { - padding: 30px 0; + padding: 30px 0 10px 0; } } @media (max-width: 800px) { .split-bio { - padding: 20px 0; + padding: 20px 0 0 0; } } .split-bio p { color: #848d96; + margin-bottom: 20px; + line-height: inherit; } .split-bio a { color: #848d96; @@ -224,6 +226,103 @@ body.page-template-page-fullsingle-split p { transition-duration: 0.1s; border-bottom: 1px dotted #CA486d; } +.split-bio em, +.split-bio i { + font-style: italic; + line-height: inherit; +} +.split-bio strong, +.split-bio b { + font-weight: bold; + line-height: inherit; +} +.split-bio small { + font-size: 80%; + line-height: inherit; +} +.split-bio h1, .split-bio .h1, +.split-bio h2, .split-bio .h2, +.split-bio h3, .split-bio .h3, +.split-bio h4, .split-bio .h4, +.split-bio h5, .split-bio .h5, +.split-bio h6, .split-bio .h6 { + font-style: normal; + font-weight: normal; + color: inherit; +} +.split-bio h1 small, .split-bio .h1 small, +.split-bio h2 small, .split-bio .h2 small, +.split-bio h3 small, .split-bio .h3 small, +.split-bio h4 small, .split-bio .h4 small, +.split-bio h5 small, .split-bio .h5 small, +.split-bio h6 small, .split-bio .h6 small { + line-height: 0; +} +.split-bio h1, .split-bio .h1 { + font-size: 1.5em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h2, .split-bio .h2 { + font-size: 1.25em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h3, .split-bio .h3 { + font-size: 1.1875em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h4, .split-bio .h4 { + font-size: 1.125em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h5, .split-bio .h5 { + font-size: 1.0625em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h6, .split-bio .h6 { + font-size: 1em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio ul, +.split-bio ol, +.split-bio dl { + margin-bottom: 20px; + list-style-position: outside; + line-height: inherit; +} +.split-bio li { + font-size: inherit; +} +.split-bio ul { + margin-left: 2.25em; + list-style-type: disc; +} +.split-bio ol { + margin-left: 2.25em; + list-style-type: decimal; +} +.split-bio ul ul, .split-bio ol ul, .split-bio ul ol, .split-bio ol ol { + margin-left: 1.25em; + margin-bottom: 0; +} +.split-bio dl dt { + margin-bottom: 10px; + font-weight: bold; +} +.split-bio dl dd { + margin-bottom: 10px; +} .split-lists .split-list { width: 30%; diff --git a/static/assets/sass/01-content.scss b/static/assets/sass/01-content.scss index 27cbcd0..99c6c6d 100644 --- a/static/assets/sass/01-content.scss +++ b/static/assets/sass/01-content.scss @@ -41,6 +41,7 @@ $bp-mobile : 500px; html { background-color: $color-background; } + body.page-template-page-fullsingle-split { background-color: $color-background; font-family: 'Montserrat', sans-serif; @@ -165,19 +166,21 @@ body.page-template-page-fullsingle-split { //------------------------------------------------------------------------------- .split-bio { - padding: 40px 0 40px 0; + padding: 40px 0 20px 0; font-family: 'Lora', serif; @media (max-width: $bp-smallish ) { - padding: 30px 0; + padding: 30px 0 10px 0; } @media (max-width: $bp-tablet ) { - padding: 20px 0; + padding: 20px 0 0 0; } p { color: $color-text; + margin-bottom: 20px; + line-height: inherit; } a { @@ -193,6 +196,120 @@ body.page-template-page-fullsingle-split { } + em, + i { + font-style: italic; + line-height: inherit; + } + + strong, + b { + font-weight: bold; + line-height: inherit; + } + + small { + font-size: 80%; + line-height: inherit; + } + + h1, .h1, + h2, .h2, + h3, .h3, + h4, .h4, + h5, .h5, + h6, .h6 { + font-style: normal; + font-weight: normal; + color: inherit; + } + + h1 small, .h1 small, + h2 small, .h2 small, + h3 small, .h3 small, + h4 small, .h4 small, + h5 small, .h5 small, + h6 small, .h6 small { + line-height: 0; + } + + h1, .h1 { + font-size: 1.5em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h2, .h2 { + font-size: 1.25em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h3, .h3 { + font-size: 1.1875em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h4, .h4 { + font-size: 1.125em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h5, .h5 { + font-size: 1.0625em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h6, .h6 { + font-size: 1em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + ul, + ol, + dl { + margin-bottom: 20px; + list-style-position: outside; + line-height: inherit; + } + + li { + font-size: inherit; + } + + ul { + margin-left: 2.25em; + list-style-type: disc; + } + + ol { + margin-left: 2.25em; + list-style-type: decimal; + } + + ul ul, ol ul, ul ol, ol ol { + margin-left: 1.25em; + margin-bottom: 0; + } + + dl dt { + margin-bottom: 10px; + font-weight: bold; + } + + dl dd { + margin-bottom: 10px; + } } //------------------------------------------------------------------------------- -- cgit v1.2.3