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/custom.css | |
parent | 6d2b7353e82ffc76a1379bde31cde6918e4b8af1 (diff) |
clean up typography, whitespace, shorten header
Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>
Diffstat (limited to 'assets/css/custom.css')
-rw-r--r-- | assets/css/custom.css | 572 |
1 files changed, 190 insertions, 382 deletions
diff --git a/assets/css/custom.css b/assets/css/custom.css index daa6a8a4..4671892a 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -3385,52 +3385,75 @@ tbody.collapse.in { .container-widest .container-widest { width: 1770px; } } +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; color: white !important; font-size: 3.796875em !important; line-height: 120%; - font-weight: 500; } + font-weight: 500; + margin-bottom: 15px; } @media (max-width: 768px) { .jumbotron--heading-1 { font-size: 34px !important; line-height: 1 !important; - margin-top: 0; } } + margin-top: 0; + margin-bottom: 10px; } } .jumbotron--lead { font-size: 1.125em; color: white; line-height: 1.6; - font-weight: 500; } + font-weight: 500; + margin-bottom: 10px; } @media (max-width: 768px) { .jumbotron--lead { - font-size: 16px; } } + font-size: 16px; + margin-bottom: 10px; } } + +/* To easily color text */ +.red { + color: red; } + +.green { + color: green; } + +.blue { + color: #0082c9; } + +.gray { + color: #555; } + +.text-center { + margin-left: auto; + margin-right: auto; + text-align: center; } .section--text--center { - margin: 0 auto; + margin-left: auto; + margin-right: auto; text-align: center; } -.section--heading-1 { - font-size: 3.796875em; - font-weight: 300; - line-height: 1.2; - margin: 0; - color: #333333; } - @media (max-width: 768px) { - .section--heading-1 { - font-size: 2.53125em; - line-height: 1; - margin-top: 0; } } -.section--heading-2 { - font-size: 2.53125em; - font-weight: 300; - color: #333333; } - @media (max-width: 768px) { - .section--heading-2 { - font-size: 2.53125em; - line-height: 1.2; - margin-top: 0; } } .section--intro { + /* Introduction on top of page, just under the fold */ + padding-top: 80px; font-size: 22px; font-weight: 300; } + .section--intro blockquote { + font-size: 20px; + font-weight: 400; } .section--paragraph__tittle, .section--paragraph__title { font-size: 22px; line-height: 30px; @@ -3454,24 +3477,52 @@ tbody.collapse.in { color: #2a2a36; } h1 { - margin-bottom: 10px; font-size: 60px; line-height: 120%; color: #555; - font-weight: 500; } + font-weight: 500; + margin-bottom: 50px; } + h1.text-center, h1 .section--text--center { + margin: 0px auto 50px auto; } + @media (max-width: 768px) { + h1 { + font-size: 40px; + line-height: 1.2; + margin-bottom: 30px; } + h1.text-center, h1 .section--text--center { + margin: 0px auto 30px auto; } } h2 { font-size: 60px; font-weight: 300; color: #555; line-height: 1.5; - margin-bottom: 12px; } + margin-bottom: 40px; } + h2.text-center, h2 .section--text--center { + margin: 0px auto 40px auto; } + @media (max-width: 768px) { + h2 { + font-size: 40px; + line-height: 1.2; + margin-bottom: 25px; } + h2.text-center, h2 .section--text--center { + margin: 0px auto 25px auto; } } h3 { font-size: 22px; font-weight: 300; line-height: 1.5; - color: #555; } + color: #555; + margin-bottom: 30px; } + h3.text-center, h3 .section--text--center { + margin: 0px auto 30px auto; } + @media (max-width: 768px) { + h3 { + font-size: 20px; + line-height: 1.2; + margin-bottom: 20px; } + h3.text-center, h3 .section--text--center { + margin: 0px auto 20px auto; } } h4 { font-size: 18px; @@ -3479,16 +3530,17 @@ h4 { line-height: 1.36; color: #555; margin-bottom: 20px; } + h4.text-center, h4 .section--text--center { + margin: 0px auto 20px auto; } h5 { font-size: 17px; font-weight: bold; line-height: 1.5; - color: #555; } - -.text-center { - margin: 0 auto; - text-align: center; } + color: #555; + margin-bottom: 20px; } + h5.text-center, h5 .section--text--center { + margin: 0px auto 20px auto; } /*Colors*/ /*Shadows*/ @@ -3963,52 +4015,75 @@ template, [hidden] { .container-widest .container-widest { width: 1770px; } } +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; color: white !important; font-size: 3.796875em !important; line-height: 120%; - font-weight: 500; } + font-weight: 500; + margin-bottom: 15px; } @media (max-width: 768px) { .jumbotron--heading-1 { font-size: 34px !important; line-height: 1 !important; - margin-top: 0; } } + margin-top: 0; + margin-bottom: 10px; } } .jumbotron--lead { font-size: 1.125em; color: white; line-height: 1.6; - font-weight: 500; } + font-weight: 500; + margin-bottom: 10px; } @media (max-width: 768px) { .jumbotron--lead { - font-size: 16px; } } + font-size: 16px; + margin-bottom: 10px; } } + +/* To easily color text */ +.red { + color: red; } + +.green { + color: green; } + +.blue { + color: #0082c9; } + +.gray { + color: #555; } + +.text-center { + margin-left: auto; + margin-right: auto; + text-align: center; } .section--text--center { - margin: 0 auto; + margin-left: auto; + margin-right: auto; text-align: center; } -.section--heading-1 { - font-size: 3.796875em; - font-weight: 300; - line-height: 1.2; - margin: 0; - color: #333333; } - @media (max-width: 768px) { - .section--heading-1 { - font-size: 2.53125em; - line-height: 1; - margin-top: 0; } } -.section--heading-2 { - font-size: 2.53125em; - font-weight: 300; - color: #333333; } - @media (max-width: 768px) { - .section--heading-2 { - font-size: 2.53125em; - line-height: 1.2; - margin-top: 0; } } .section--intro { + /* Introduction on top of page, just under the fold */ + padding-top: 80px; font-size: 22px; font-weight: 300; } + .section--intro blockquote { + font-size: 20px; + font-weight: 400; } .section--paragraph__tittle, .section--paragraph__title { font-size: 22px; line-height: 30px; @@ -4032,24 +4107,52 @@ template, [hidden] { color: #2a2a36; } h1 { - margin-bottom: 10px; font-size: 60px; line-height: 120%; color: #555; - font-weight: 500; } + font-weight: 500; + margin-bottom: 50px; } + h1.text-center, h1 .section--text--center { + margin: 0px auto 50px auto; } + @media (max-width: 768px) { + h1 { + font-size: 40px; + line-height: 1.2; + margin-bottom: 30px; } + h1.text-center, h1 .section--text--center { + margin: 0px auto 30px auto; } } h2 { font-size: 60px; font-weight: 300; color: #555; line-height: 1.5; - margin-bottom: 12px; } + margin-bottom: 40px; } + h2.text-center, h2 .section--text--center { + margin: 0px auto 40px auto; } + @media (max-width: 768px) { + h2 { + font-size: 40px; + line-height: 1.2; + margin-bottom: 25px; } + h2.text-center, h2 .section--text--center { + margin: 0px auto 25px auto; } } h3 { font-size: 22px; font-weight: 300; line-height: 1.5; - color: #555; } + color: #555; + margin-bottom: 30px; } + h3.text-center, h3 .section--text--center { + margin: 0px auto 30px auto; } + @media (max-width: 768px) { + h3 { + font-size: 20px; + line-height: 1.2; + margin-bottom: 20px; } + h3.text-center, h3 .section--text--center { + margin: 0px auto 20px auto; } } h4 { font-size: 18px; @@ -4057,16 +4160,17 @@ h4 { line-height: 1.36; color: #555; margin-bottom: 20px; } + h4.text-center, h4 .section--text--center { + margin: 0px auto 20px auto; } h5 { font-size: 17px; font-weight: bold; line-height: 1.5; - color: #555; } - -.text-center { - margin: 0 auto; - text-align: center; } + color: #555; + margin-bottom: 20px; } + h5.text-center, h5 .section--text--center { + margin: 0px auto 20px auto; } .no-js body nav .container .brand .logo:not(.scrolled):not(.menu-open) { background: url(../img/logo/logo_white_sprite.png) 0 0 no-repeat; @@ -5424,7 +5528,7 @@ footer.page-footer { width: 1770px; } } .second-menu { - margin-bottom: 150px !important; } + /* margin-bottom: 150px !important; */ } .second-menu .menu { background: #fbfbfb; border-top: solid 1px #e4e4e4; @@ -5460,13 +5564,14 @@ footer.page-footer { transition: all 0.3s ease; letter-spacing: 1px; } .second-menu .menu .buttons a:focus { - text-decoration: none; } + text-decoration: none; + color: black; } .second-menu .menu .buttons a.active { text-decoration: none; - color: white; } + color: #0082c9; } .second-menu .menu .buttons a:hover { text-decoration: none; - color: white; } + color: #0082c9; } .second-menu .menu .buttons .btn-primary { float: right; font-size: 14px; @@ -5510,8 +5615,8 @@ footer.page-footer { background-size: cover; border-radius: 0 !important; height: 70vh; - min-height: 600px; - max-height: 800px; + min-height: 400px; + max-height: 600px; position: relative; } .background h1 { padding-top: 0; @@ -9687,56 +9792,20 @@ footer.page-footer { clip: auto; } /*# sourceMappingURL=fork-awesome.min.css.map */ -.jumbotron--heading-1 { - padding-top: 0; - color: white !important; - font-size: 3.79688em !important; - line-height: 120%; - font-weight: 500; } - -@media (max-width: 768px) { - .jumbotron--heading-1 { - font-size: 34px !important; - line-height: 1 !important; - margin-top: 0; } } -.jumbotron--lead { - font-size: 1.125em; - color: white; - line-height: 1.6; - font-weight: 500; } - -@media (max-width: 768px) { - .jumbotron--lead { - font-size: 16px; } } -/* To easily color text */ -.red { - color: red; } - -.green { - color: green; } - -.blue { - color: #0082c9; } +html { + margin-top: 0 !important; } -.gray { +body { + font-family: "Open Sans", Frutiger, Calibri, "Myriad Pro", Myriad, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 16px; + line-height: 1.7; color: #555; } -section { - padding-top: 80px; - padding-bottom: 40px; } - -.section--intro { - /* Introduction on top of page, just under the fold */ - padding-top: 80px; - font-size: 22px; - font-weight: 300; } - .section--intro blockquote { - font-size: 20px; - font-weight: 400; } - -.section--text--center, .text-center { - margin: 0 auto; - text-align: center; } +/* Avoid wrapping */ +span.avoidwrap { + display: inline-block; } .screen-reader-text { display: none; } @@ -9755,64 +9824,6 @@ section { color: #2a2a36; border-bottom: solid 1px; } -h1 { - margin-bottom: 10px; - font-size: 60px; - line-height: 120%; - color: #555; - font-weight: 500; } - -h2 { - font-size: 60px; - font-weight: 300; - color: #555; - line-height: 1.5; - margin-bottom: 12px; } - -h3 { - font-size: 22px; - font-weight: 300; - line-height: 1.5; - color: #555; } - -h4 { - font-size: 18px; - font-weight: bold; - line-height: 1.36; - color: #555; - margin-bottom: 20px; } - -h5 { - font-size: 17px; - font-weight: bold; - line-height: 1.5; - color: #555; } - -/* I don't know why we have these special classes below, to be honest... */ -.section--heading-1 { - /* Headings. Should be h1 */ - font-size: 3.79688em; - font-weight: 300; - line-height: 1.3; - margin: 0; - color: #333333; } - @media (max-width: 768px) { - .section--heading-1 { - font-size: 2.53125em; - line-height: 1.2; - margin-top: 0; } } - -.section--heading-2 { - /* Headings. Should be h2 */ - font-size: 2.53125em; - font-weight: 300; - color: #333333; } - @media (max-width: 768px) { - .section--heading-2 { - font-size: 2.53125em; - line-height: 1.2; - margin-top: 0; } } - .benefits { /* benefits section with big image on the right & check list left */ } .benefits .banner { @@ -9869,9 +9880,6 @@ h5 { .benefits .banner .big-img, .benefits .banner .big-img-invert { display: none; } } -.image--feature { - /* margin-top: 52px; */ } - @media (min-width: 768px) { .image--floated { float: right; } } @@ -9948,9 +9956,6 @@ h5 { .container-widest .image--feature.new-img img.featureimg { padding: 0 8.8% 0 9%; } } -/*Colors*/ -/*Shadows*/ -/*Breakpoints*/ .slideshow { background-color: transparent; overflow: hidden; @@ -10239,192 +10244,6 @@ h5 { .slideshow-mobile html, .slideshow-mobile body, .slideshow-mobile .carousel, .slideshow-mobile .carousel-inner, .slideshow-mobile .carousel-inner .item { height: 100%; } -/*Colors*/ -/*Shadows*/ -/*Breakpoints*/ -.second-menu .menu { - background: #fbfbfb; - border-top: solid 1px #e4e4e4; - text-transform: capitalize; - vertical-align: middle; - z-index: 2; - transform: translateZ(0); - will-change: transform; - transition: transform 500ms ease; - transform: translate3d(0px, 0px, 0px); - opacity: 0; } - -.second-menu .menu.hidedPrincipalNavigation { - transform: translate3d(0px, -100px, 0px); } - -.second-menu .menu .buttons { - text-transform: uppercase; - font-size: 14px; - font-weight: 600; - padding: 40px 0 30px 0; - border-bottom: solid 1px #e4e4e4; } - -@media (max-width: 991px) { - .second-menu .menu { - display: none; } - - .second-menu .menu .buttons { - padding: 30px 0 25px 0; } } -@media (max-width: 991px) { - .second-menu .menu .buttons a:not(.btn) { - display: none; } } -.second-menu .menu .buttons a { - padding-right: 10px; - color: #333333; - transition: all 0.3s ease; - letter-spacing: 1px; } - -.second-menu .menu .buttons a:focus { - text-decoration: none; - color: black; } - -.second-menu .menu .buttons a.active { - text-decoration: none; - color: #0082c9; } - -.second-menu .menu .buttons a:hover { - text-decoration: none; - color: #0082c9; } - -.second-menu .menu .buttons .btn-primary { - float: right; - font-size: 14px; - padding: 8px 20px; - margin-left: 20px; - margin-top: -5px; - color: white; } - @media (max-width: 768px) { - .second-menu .menu .buttons .btn-primary { - margin-top: 10px; } } - -.second-menu .menu .buttons .btn-primary:hover { - text-decoration: none; - color: white; } - -.second-menu .menu .buttons .btn-primary:before { - background: none; } - -/*Colors*/ -/*Shadows*/ -/*Breakpoints*/ -/** - * Footer - */ -footer.page-footer { - /* margin-top: 50px; */ - background-color: #2a2a36; } - -footer.page-footer h1 { - margin-top: 70px; - font-size: 19px; - font-weight: bold; - line-height: 1.8; - letter-spacing: -0.9px; - color: #8e8e8e; } - -footer.page-footer ul { - list-style-type: none; - padding-left: 0; } - -footer.page-footer li { - font-size: 15px; - line-height: 1.8; - color: #ffffff; - width: 140px; - margin-top: 0; } - -footer.page-footer li a { - color: #ffffff; - position: relative; } - -footer.page-footer li a:before { - content: ""; - position: absolute; - width: 100%; - height: 2px; - bottom: 0; - left: 0; - background-color: white; - visibility: hidden; - -webkit-transform: scaleX(0); - transform: scaleX(0); - -webkit-transition: all 0.2s ease-in-out 0s; - transition: all 0.2s ease-in-out 0s; } - -footer.page-footer li a:hover { - color: #ffffff; - text-decoration: none; } - -footer.page-footer li a:hover:before { - visibility: visible; - -webkit-transform: scaleX(1); - transform: scaleX(1); } - -footer.page-footer p { - padding-top: 50px; - padding-bottom: 30px; - font-size: 15px; - line-height: 1.8; - color: #ffffff; } - -@media (max-width: 768px) { - footer.page-footer p { - float: left; - padding-left: 15px; } } -footer.page-footer p a { - color: #ffffff; } - -footer.page-footer p a:hover { - color: #ffffff; } - -@media (min-width: 768px) and (max-width: 1600px) { - footer.page-footer .container { - width: 90%; - max-width: 900px; } } -@media (max-width: 768px) { - footer.page-footer { - height: 100%; - padding-top: 40px; - padding-bottom: 40px; } - - footer.page-footer h1 { - margin-top: 30px; - font-size: 19px; - font-weight: bold; - line-height: 1.8; - letter-spacing: -0.9px; - color: #8e8e8e; } - - footer.page-footer ul { - list-style-type: none; - padding-left: 0; } - - footer.page-footer li { - font-size: 15px; - line-height: 1.8; - color: #ffffff; - width: 140px; - margin-top: 0; } } -html { - margin-top: 0 !important; } - -body { - font-family: "Open Sans", Frutiger, Calibri, "Myriad Pro", Myriad, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-size: 16px; - line-height: 1.7; - color: #555; } - -/* Avoid wrapping */ -span.avoidwrap { - display: inline-block; } - i[class*='fa-'] { font-style: normal; color: #555; @@ -10439,17 +10258,6 @@ i[class*='fa-'] { float: none; margin: 0 auto; } -p { - margin-top: 5px; } - -ul { - margin-top: 15px; - padding-left: 20px; - list-style-type: none; } - -li { - margin-top: 15px; } - body.changelog .content ul li { margin-top: 0; list-style: circle; } |