diff options
author | Jos Poortvliet <jospoortvliet@gmail.com> | 2020-09-09 09:03:14 +0300 |
---|---|---|
committer | Jos Poortvliet <jospoortvliet@gmail.com> | 2020-09-09 09:03:14 +0300 |
commit | de316b17da454e5e3ec42559022c7fa0b7e38aee (patch) | |
tree | be15dcc63e51bdd7d1bcf85fd652dfe952d73601 /assets/css/modules/typography.scss | |
parent | 6d2b7353e82ffc76a1379bde31cde6918e4b8af1 (diff) |
clean up typography, whitespace, shorten header
Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>
Diffstat (limited to 'assets/css/modules/typography.scss')
-rw-r--r-- | assets/css/modules/typography.scss | 154 |
1 files changed, 109 insertions, 45 deletions
diff --git a/assets/css/modules/typography.scss b/assets/css/modules/typography.scss index 96cafa4e..6ad02a01 100644 --- a/assets/css/modules/typography.scss +++ b/assets/css/modules/typography.scss @@ -2,6 +2,27 @@ @import '../helpers'; @import '../vendor/modular-scale/modular-scale'; +section { + padding-top: 100px; + padding-bottom: 100px; +} + +p { + margin-top: 5px; +} + +ul { + margin-top: 15px; + padding-left: 20px; + list-style-type: none; +} + +li { + margin-top: 15px; +} + + + .jumbotron { &--heading-1 { padding-top: 0; @@ -9,61 +30,68 @@ font-size: ms(3) !important; line-height: 120%; font-weight: 500; + margin-bottom: 15px; + @media (max-width: $break-small) { font-size: ms(0, 34px) !important; line-height: 1 !important; margin-top: 0; + margin-bottom: 10px; } } &--lead { - font-size: ms(0); + font-size: 1.125em; color: white; line-height: 1.6; font-weight: 500; + margin-bottom: 10px; @media (max-width: $break-small) { - font-size: ms(0, 16px) + font-size: ms(0, 16px); + margin-bottom: 10px; } } } -.section { - &--text--center { - margin: 0 auto; - text-align: center; - } +/* To easily color text */ +.red { + color: red; +} +.green { + color: green; +} - &--heading-1 { - font-size: ms(3); - font-weight: 300; - line-height: 1.2; - margin: 0; - color: $dark-grey; +.blue { + color: $nextcloud-blue; +} - @media (max-width: $break-small) { - font-size: ms(2); - line-height: 1; - margin-top: 0; - } - } +.gray { + color: #555; +} - &--heading-2 { - font-size: ms(2); - font-weight: 300; - color: $dark-grey; +.text-center { + margin-left: auto; + margin-right: auto; + text-align: center; +} - @media (max-width: $break-small) { - font-size: ms(2); - line-height: 1.2; - margin-top: 0; - } +.section { + &--text--center { + margin-left: auto; + margin-right: auto; + text-align: center; } - &--intro { - font-size: ms(0, 22px); + &--intro { /* Introduction on top of page, just under the fold */ + padding-top: 80px; + font-size: 22px; font-weight: 300; + blockquote { + font-size: 20px; + font-weight: 400; + } } &--paragraph__tittle,&--paragraph__title { @@ -96,19 +124,41 @@ } h1 { - margin-bottom: 10px; - font-size: 60px; - line-height: 120%; - color: #555; - font-weight: 500; + font-size: 60px; + line-height: 120%; + color: #555; + font-weight: 500; + margin-bottom: 50px; + &.text-center,.section--text--center { + margin: 0px auto 50px auto; + } + @media (max-width: $break-small) { + font-size: 40px; + line-height: 1.2; + margin-bottom: 30px; + &.text-center,.section--text--center { + margin: 0px auto 30px auto; + } + } } h2 { - font-size: 60px; - font-weight: 300; - color: #555; - line-height: 1.5; - margin-bottom: 12px; + font-size: 60px; + font-weight: 300; + color: #555; + line-height: 1.5; + margin-bottom: 40px; + &.text-center,.section--text--center { + margin: 0px auto 40px auto; + } + @media (max-width: $break-small) { + font-size: 40px; + line-height: 1.2; + margin-bottom: 25px; + &.text-center,.section--text--center { + margin: 0px auto 25px auto; + } + } } h3 { @@ -116,6 +166,18 @@ h3 { font-weight: 300; line-height: 1.5; color: #555; + margin-bottom: 30px; + &.text-center,.section--text--center { + margin: 0px auto 30px auto; + } + @media (max-width: $break-small) { + font-size: 20px; + line-height: 1.2; + margin-bottom: 20px; + &.text-center,.section--text--center { + margin: 0px auto 20px auto; + } + } } h4 { @@ -124,6 +186,9 @@ h4 { line-height: 1.36; color: #555; margin-bottom: 20px; + &.text-center,.section--text--center { + margin: 0px auto 20px auto; + } } h5 { @@ -131,9 +196,8 @@ h5 { font-weight: bold; line-height: 1.5; color: #555; -} - -.text-center { - margin: 0 auto; - text-align: center; + margin-bottom: 20px; + &.text-center,.section--text--center { + margin: 0px auto 20px auto; + } } |