From 6602a5598ff3d2036838b0d278208960a94a61b4 Mon Sep 17 00:00:00 2001 From: Tim Arney Date: Wed, 15 May 2019 15:31:08 -0400 Subject: [PATCH 1/2] fix margins --- assets/sass/cds/_sections.scss | 2137 ++++++++++++++++--------------- content/en/platform/_index.html | 2 +- layouts/platform/list.html | 2 +- 3 files changed, 1075 insertions(+), 1066 deletions(-) diff --git a/assets/sass/cds/_sections.scss b/assets/sass/cds/_sections.scss index 991a29b59..31ac180b2 100644 --- a/assets/sass/cds/_sections.scss +++ b/assets/sass/cds/_sections.scss @@ -4,379 +4,376 @@ // //////////////////////////////////////////////////// - -.home h2{ - font-size:5rem; +.home h2 { + font-size: 5rem; } .homepage--intro { - - .text { - color: $black; - font-weight: 200; - font-size: 2.15rem; - line-height: 1.35em; - - @include tablet { - margin-top: 0.5rem; - font-size: 2.25rem; - } - - @include desktop { - margin-top: 1.5rem; - font-size: 2.5rem; - font-weight: 300; - } + .text { + color: $black; + font-weight: 200; + font-size: 2.15rem; + line-height: 1.35em; + + @include tablet { + margin-top: 0.5rem; + font-size: 2.25rem; + } + + @include desktop { + margin-top: 1.5rem; + font-size: 2.5rem; + font-weight: 300; } + } } .homepage--what-we-do { - border-top: $medium-grey 1px solid; - text-align: center; - - .icon-text { - margin-top: 1.5rem; + border-top: $medium-grey 1px solid; + text-align: center; - @include tablet { - margin-bottom: 4rem; - } - @include desktop { - margin-top: 1rem; - } + .icon-text { + margin-top: 1.5rem; + + @include tablet { + margin-bottom: 4rem; } + @include desktop { + margin-top: 1rem; + } + } - h3 { - font-weight: 100; - line-height: 2.75rem; - margin: 2rem 0; - - @include tablet { - /* font-size: 2.4rem; */ - font-weight: 300; - line-height: 3.2rem; - margin-top: 5rem; - } - } - - i { - border: $primary-color 5px solid; - border-radius: 50%; - margin-bottom: 1rem; - margin-top: 2rem; - font-size: 3.5rem; - padding: 3.5rem; - min-width: 10rem; - min-height: 10rem; - - @include desktop{ - min-width: 15rem; - min-height: 15rem; - padding: 4.5rem; - font-size: 5rem; - } - } - - .text { - font-size: 2.5rem; - margin-top: 1rem; + h3 { + font-weight: 100; + line-height: 2.75rem; + margin: 2rem 0; + + @include tablet { + /* font-size: 2.4rem; */ + font-weight: 300; + line-height: 3.2rem; + margin-top: 5rem; + } + } + + i { + border: $primary-color 5px solid; + border-radius: 50%; + margin-bottom: 1rem; + margin-top: 2rem; + font-size: 3.5rem; + padding: 3.5rem; + min-width: 10rem; + min-height: 10rem; + + @include desktop { + min-width: 15rem; + min-height: 15rem; + padding: 4.5rem; + font-size: 5rem; } - - .bottom-mar{ - margin-bottom: 5rem; - } + } + + .text { + font-size: 2.5rem; + margin-top: 1rem; + } + + .bottom-mar { + margin-bottom: 5rem; + } } .homepage--intro-cds { - .intro-video { - margin-bottom: 1rem; + .intro-video { + margin-bottom: 1rem; - @include tablet { - margin-bottom: 3rem; - } + @include tablet { + margin-bottom: 3rem; } + } - .our-team { - @include tablet { - border-top: lighten($medium-grey, 3) 5px solid; - } + .our-team { + @include tablet { + border-top: lighten($medium-grey, 3) 5px solid; + } - h3 { - @include mobile_only { - border-top: $medium-grey 1px solid; - padding-top: 3rem; - } - } + h3 { + @include mobile_only { + border-top: $medium-grey 1px solid; + padding-top: 3rem; + } } + } } .homepage--our-team { - background-color: #0f0a08; - background-size: cover; - color: $white; - font-weight: 100; + background-color: #0f0a08; + background-size: cover; + color: $white; + font-weight: 100; - .homepage--our-team--buttons { - text-align: center; - } - - a:not([class]) { - color: $primary-color !important; - border-bottom: $primary-color 1px dotted; - transition: all 0.3s ease-in-out; - - &:hover { - border-bottom: $primary-color 1px solid; - } - } - - .fr-team-link{ - text-align: left; - - @include desktop{ - text-align: right; - } - } -} + .homepage--our-team--buttons { + text-align: center; + } + a:not([class]) { + color: $primary-color !important; + border-bottom: $primary-color 1px dotted; + transition: all 0.3s ease-in-out; + + &:hover { + border-bottom: $primary-color 1px solid; + } + } + + .fr-team-link { + text-align: left; + + @include desktop { + text-align: right; + } + } +} .homepage--budget { + @include desktop { + padding-left: 12rem; + } + blockquote { + padding: 0rem 3.5rem 0rem 3.5rem; + margin: 0rem; + border: 0; + position: relative; + + @include tablet { + padding: 3.5rem 4rem 3rem 4.5rem; + } + @include desktop { - padding-left: 12rem; - } - blockquote { - padding: 0rem 3.5rem 0rem 3.5rem; - margin: 0rem; - border: 0; - position: relative; - - @include tablet { - padding: 3.5rem 4rem 3rem 4.5rem; - } - - @include desktop { - padding: 3.5rem 3rem 3rem 5.5rem; - } - - p { - font-size: 2rem; - line-height: 1.75em; - - @include desktop { - font-size: 2.5rem; - } - } - - & + p { - padding-left: 3.5rem; - - @include desktop { - padding-left: 5.5rem; - } - } - } - - .quote-ico { - position: absolute; - font-size: 5rem; - opacity: 0.15; - text-shadow: 0 -1px 0 #000; - color: #ccc; - - @include tablet { - font-size: 7rem; - } - - @include desktop { - font-size: 8rem; - } - - &.left { - top: 0; - left: 0; - } - - &.right { - display: none; - - @include tablet { - display: block; - bottom: 3rem; - right: 0; - } - - @include desktop { - bottom: -2rem; - } - } + padding: 3.5rem 3rem 3rem 5.5rem; } + + p { + font-size: 2rem; + line-height: 1.75em; + + @include desktop { + font-size: 2.5rem; + } + } + + & + p { + padding-left: 3.5rem; + + @include desktop { + padding-left: 5.5rem; + } + } + } + + .quote-ico { + position: absolute; + font-size: 5rem; + opacity: 0.15; + text-shadow: 0 -1px 0 #000; + color: #ccc; + + @include tablet { + font-size: 7rem; + } + + @include desktop { + font-size: 8rem; + } + + &.left { + top: 0; + left: 0; + } + + &.right { + display: none; + + @include tablet { + display: block; + bottom: 3rem; + right: 0; + } + + @include desktop { + bottom: -2rem; + } + } + } } .homepage--engagement-report { - background: url("/img/cds/engagementReport-bk.jpg") center center no-repeat; - background-size: cover; - background-color: #121519; - color: $white; + background: url("/img/cds/engagementReport-bk.jpg") center center no-repeat; + background-size: cover; + background-color: #121519; + color: $white; - .title { - @include tablet { - border-right: $white 1px solid; - padding-right: 3rem; - padding-top: 1.5rem; - padding-bottom: 1.5rem; -// text-align: right; - } - - @include desktop { - padding-top: 2rem; - padding-bottom: 5rem; - padding-left: 10rem; - } - } - - .text { - @include tablet { - padding-left: 3rem; - padding-top: 1rem; - } - - @include desktop { - padding-top: 3rem; -// padding-right: 3rem; - } - } - - .pretitle { - background: rgba(0, 0, 0, 0.95); - display: inline-block; - font-size: 1.25rem; - font-weight: 300; - padding: 0.5rem 1rem; - margin-bottom: 1rem; - - @include tablet { - margin-bottom: 1rem; - } - } - - .read-the-report { - color: #fc3 !important; - border-bottom: #fc3 1px dotted; - transition: all 0.3s ease-in-out; - - &:hover { - border-bottom: $primary-color 1px solid; - } - } - - h2 { - font-size: 3.25rem; - font-weight: 100; - margin: 0.5rem 0 2rem 0; + .title { + @include tablet { + border-right: $white 1px solid; + padding-right: 3rem; + padding-top: 1.5rem; + padding-bottom: 1.5rem; + // text-align: right; } - .postitle { - font-size: 2rem; - font-weight: 300; - margin-top: 1.5rem; - margin-bottom: 2rem; + @include desktop { + padding-top: 2rem; + padding-bottom: 5rem; + padding-left: 10rem; + } + } - @include tablet { - margin-top: 5rem; - font-weight: 100; - } + .text { + @include tablet { + padding-left: 3rem; + padding-top: 1rem; + } - @include desktop { - padding-right: 2rem; - } + @include desktop { + padding-top: 3rem; + // padding-right: 3rem; } + } + + .pretitle { + background: rgba(0, 0, 0, 0.95); + display: inline-block; + font-size: 1.25rem; + font-weight: 300; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + + @include tablet { + margin-bottom: 1rem; + } + } + + .read-the-report { + color: #fc3 !important; + border-bottom: #fc3 1px dotted; + transition: all 0.3s ease-in-out; + + &:hover { + border-bottom: $primary-color 1px solid; + } + } + + h2 { + font-size: 3.25rem; + font-weight: 100; + margin: 0.5rem 0 2rem 0; + } + + .postitle { + font-size: 2rem; + font-weight: 300; + margin-top: 1.5rem; + margin-bottom: 2rem; + + @include tablet { + margin-top: 5rem; + font-weight: 100; + } + + @include desktop { + padding-right: 2rem; + } + } } .section--featured-blogposts { - background: $bg-grey; - padding-bottom: 4rem; - - .blog-posts { - @include tablet { - margin-bottom: 3rem; - } - - .post { - background: $white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); - display: block; - transition: all 0.3s ease-in-out; - - &:hover { - box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); - color: lighten($secondary-color, 10); - } - - @include mobile_only { - margin: 1.5rem auto; - max-width: 30rem; - } - - @include tablet { - height: 25rem; - margin: 1.5rem 0; - } - - .image { - background-position: center center; - background-size: cover; - display: block; - height: 15rem; - } - - .text { - padding: 1.5rem; - } - - .date { - color: $dark-grey; - font-size: 1rem; - font-weight: 500; - margin-top: 1rem; - } - - h3 { - font-weight: 500; - font-size: 1.5rem; - margin: 0; - margin-top: 0.5rem; - } - } + background: $bg-grey; + padding-bottom: 4rem; + + .blog-posts { + @include tablet { + margin-bottom: 3rem; } + + .post { + background: $white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + display: block; + transition: all 0.3s ease-in-out; + + &:hover { + box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); + color: lighten($secondary-color, 10); + } + + @include mobile_only { + margin: 1.5rem auto; + max-width: 30rem; + } + + @include tablet { + height: 25rem; + margin: 1.5rem 0; + } + + .image { + background-position: center center; + background-size: cover; + display: block; + height: 15rem; + } + + .text { + padding: 1.5rem; + } + + .date { + color: $dark-grey; + font-size: 1rem; + font-weight: 500; + margin-top: 1rem; + } + + h3 { + font-weight: 500; + font-size: 1.5rem; + margin: 0; + margin-top: 0.5rem; + } + } + } } .section--contact { - h2 { - font-weight: 100; + h2 { + font-weight: 100; - @include mobile_only { - text-align: center; - margin-bottom: 4rem; - } + @include mobile_only { + text-align: center; + margin-bottom: 4rem; + } - @include desktop { - font-size: 3.5rem; - margin-bottom: 1rem; - } + @include desktop { + font-size: 3.5rem; + margin-bottom: 1rem; } + } - .hiGraphic { - background: url("/img/cds/hi.png") no-repeat center center; - background-size: contain; - display: block; - height: 42rem; - width: 100%; - opacity: 0.25; + .hiGraphic { + background: url("/img/cds/hi.png") no-repeat center center; + background-size: contain; + display: block; + height: 42rem; + width: 100%; + opacity: 0.25; - .fr & { - background: url("/img/cds/salut.png") no-repeat center center; - background-size: contain; - } + .fr & { + background: url("/img/cds/salut.png") no-repeat center center; + background-size: contain; } + } } //////////////////////////////////////////////////// @@ -390,396 +387,399 @@ // //////////////////////////////////////////////////// .work-in-progress--intro { - h1, - h2, - h3 { - color: #000000; - } - - padding-bottom: 6rem; + h1, + h2, + h3 { + color: #000000; + } + padding-bottom: 6rem; } -span.discovery, span.discoveryfr { - color: #b7028e; +span.discovery, +span.discoveryfr { + color: #b7028e; } -span.alpha, span.alphafr { - color: #f90277; +span.alpha, +span.alphafr { + color: #f90277; } -span.beta, span.betafr { - color: #22a7f0; +span.beta, +span.betafr { + color: #22a7f0; } -span.live, span.livefr { - color: #6ea748; +span.live, +span.livefr { + color: #6ea748; } .work-in-progress--product-module { + h3 { + font-weight: 500; - h3 { - font-weight: 500; - - @include mobile_only { - font-size: 24pt; - } - - @include tablet { - font-size: 26pt; - } - - @include desktop { - font-size: 30pt; - } - - margin-bottom: 0px; - margin-top: 50px; - } - - // - - h3.live::after, h3.livefr::after { - content: "Live"; - - position: relative; - bottom: 10px; - color: #ffffff; - background-color: #6ea748; - margin-left: 20px; - - @include mobile_only { - font-size: 10pt; - padding: 3px 20px 3px 20px; - border-radius: 6px; - margin-left: 15px; - bottom: 5px; - } - - @include tablet { - margin-left: 20px; - margin-bottom: 30px; - padding: 5px 20px 5px 20px; - border-radius: 6px; - font-size: 10pt; - } - - @include desktop { - margin-bottom: 30px; - padding: 5px 30px 5px 30px; - border-radius: 6px; - font-size: 12pt; - } - } - - - // - - h3.alpha::after, h3.alphafr::after { - content: "Alpha"; - - position: relative; - bottom: 10px; - color: #ffffff; - background-color: #f90277; - margin-left: 20px; - - @include mobile_only { - font-size: 10pt; - padding: 3px 20px 3px 20px; - border-radius: 6px; - margin-left: 15px; - bottom: 5px; - } - - @include tablet { - margin-left: 20px; - margin-bottom: 30px; - padding: 5px 20px 5px 20px; - border-radius: 6px; - font-size: 10pt; - } - - @include desktop { - margin-bottom: 30px; - padding: 5px 30px 5px 30px; - border-radius: 6px; - font-size: 12pt; - } - } - - h3.discovery::after { - content: "Discovery"; - - position: relative; - bottom: 10px; - color: #ffffff; - background-color: #b7028e; - margin-left: 20px; - - @include mobile_only { - font-size: 10pt; - padding: 3px 20px 3px 20px; - border-radius: 6px; - margin-left: 15px; - bottom: 5px; - } - - @include tablet { - margin-left: 20px; - margin-bottom: 30px; - padding: 5px 20px 5px 20px; - border-radius: 6px; - font-size: 10pt; - } - - @include desktop { - margin-bottom: 30px; - padding: 5px 30px 5px 30px; - border-radius: 6px; - font-size: 12pt; - } - } - - h3.discoveryfr::after { - content: "Découverte"; - - position: relative; - bottom: 10px; - color: #ffffff; - background-color: #b7028e; - margin-left: 20px; - - @include mobile_only { - font-size: 10pt; - padding: 3px 20px 3px 20px; - border-radius: 6px; - margin-left: 15px; - bottom: 5px; - } - - @include tablet { - margin-left: 20px; - margin-bottom: 30px; - padding: 5px 20px 5px 20px; - border-radius: 6px; - font-size: 10pt; - } - - @include desktop { - margin-bottom: 30px; - padding: 5px 30px 5px 30px; - border-radius: 6px; - font-size: 12pt; - } - } - - h3.beta::after { - content: "Beta"; - - position: relative; - bottom: 10px; - color: #ffffff; - background-color: #22a7f0; - margin-left: 20px; - - @include mobile_only { - font-size: 10pt; - padding: 3px 20px 3px 20px; - border-radius: 6px; - margin-left: 15px; - bottom: 5px; - } - - @include tablet { - margin-left: 20px; - margin-bottom: 30px; - padding: 5px 20px 5px 20px; - border-radius: 6px; - font-size: 10pt; - } - - @include desktop { - margin-bottom: 30px; - padding: 5px 30px 5px 30px; - border-radius: 6px; - font-size: 12pt; - } - } - - h3.betafr::after { - content: "Bêta"; - - position: relative; - bottom: 10px; - color: #ffffff; - background-color: #22a7f0; - margin-left: 20px; - - @include mobile_only { - font-size: 10pt; - padding: 3px 20px 3px 20px; - border-radius: 6px; - margin-left: 15px; - bottom: 5px; - } - - @include tablet { - margin-left: 20px; - margin-bottom: 30px; - padding: 5px 20px 5px 20px; - border-radius: 6px; - font-size: 10pt; - } - - @include desktop { - margin-bottom: 30px; - padding: 5px 30px 5px 30px; - border-radius: 6px; - font-size: 12pt; - } - } - - h4 { - font-weight: 500; + @include mobile_only { + font-size: 24pt; + } - @include mobile_only { - margin-top: 5px; - } + @include tablet { + font-size: 26pt; + } - @include tablet { - font-size: 18pt; - margin-top: 10px; - } + @include desktop { + font-size: 30pt; + } + + margin-bottom: 0px; + margin-top: 50px; + } + + // + + h3.live::after, + h3.livefr::after { + content: "Live"; + + position: relative; + bottom: 10px; + color: #ffffff; + background-color: #6ea748; + margin-left: 20px; - @include desktop { - font-size: 22pt; - margin-top: 20px; - } + @include mobile_only { + font-size: 10pt; + padding: 3px 20px 3px 20px; + border-radius: 6px; + margin-left: 15px; + bottom: 5px; } - h1, - h2, - h3 { - color: #000000; + @include tablet { + margin-left: 20px; + margin-bottom: 30px; + padding: 5px 20px 5px 20px; + border-radius: 6px; + font-size: 10pt; } - p { - margin-bottom: 0px; + @include desktop { + margin-bottom: 30px; + padding: 5px 30px 5px 30px; + border-radius: 6px; + font-size: 12pt; } -} + } -.work-in-progress--product-summary { - padding-top: 0px; - padding-bottom: 0px; - margin-bottom: 10px; + // - p { - margin: 0px; - padding-top: 25px; + h3.alpha::after, + h3.alphafr::after { + content: "Alpha"; + + position: relative; + bottom: 10px; + color: #ffffff; + background-color: #f90277; + margin-left: 20px; + + @include mobile_only { + font-size: 10pt; + padding: 3px 20px 3px 20px; + border-radius: 6px; + margin-left: 15px; + bottom: 5px; } -} -.service-link { - padding-top: 5px; + @include tablet { + margin-left: 20px; + margin-bottom: 30px; + padding: 5px 20px 5px 20px; + border-radius: 6px; + font-size: 10pt; + } + + @include desktop { + margin-bottom: 30px; + padding: 5px 30px 5px 30px; + border-radius: 6px; + font-size: 12pt; + } + } + + h3.discovery::after { + content: "Discovery"; + + position: relative; + bottom: 10px; + color: #ffffff; + background-color: #b7028e; + margin-left: 20px; @include mobile_only { - font-size: 12pt; + font-size: 10pt; + padding: 3px 20px 3px 20px; + border-radius: 6px; + margin-left: 15px; + bottom: 5px; } @include tablet { - font-size: 12pt; + margin-left: 20px; + margin-bottom: 30px; + padding: 5px 20px 5px 20px; + border-radius: 6px; + font-size: 10pt; } @include desktop { - font-size: 14pt; + margin-bottom: 30px; + padding: 5px 30px 5px 30px; + border-radius: 6px; + font-size: 12pt; } -} + } -.bottom-container { - padding-top: 10px; - justify-content: space-between; + h3.discoveryfr::after { + content: "Découverte"; + + position: relative; + bottom: 10px; + color: #ffffff; + background-color: #b7028e; + margin-left: 20px; @include mobile_only { - display: block; + font-size: 10pt; + padding: 3px 20px 3px 20px; + border-radius: 6px; + margin-left: 15px; + bottom: 5px; } @include tablet { - display: block; + margin-left: 20px; + margin-bottom: 30px; + padding: 5px 20px 5px 20px; + border-radius: 6px; + font-size: 10pt; } - @include tv { - display: flex; + @include desktop { + margin-bottom: 30px; + padding: 5px 30px 5px 30px; + border-radius: 6px; + font-size: 12pt; + } + } + + h3.beta::after { + content: "Beta"; + + position: relative; + bottom: 10px; + color: #ffffff; + background-color: #22a7f0; + margin-left: 20px; + + @include mobile_only { + font-size: 10pt; + padding: 3px 20px 3px 20px; + border-radius: 6px; + margin-left: 15px; + bottom: 5px; + } + + @include tablet { + margin-left: 20px; + margin-bottom: 30px; + padding: 5px 20px 5px 20px; + border-radius: 6px; + font-size: 10pt; } @include desktop { - display: flex; + margin-bottom: 30px; + padding: 5px 30px 5px 30px; + border-radius: 6px; + font-size: 12pt; } -} + } -.bottom-container-nolinks { - padding-top: 10px; + h3.betafr::after { + content: "Bêta"; + + position: relative; + bottom: 10px; + color: #ffffff; + background-color: #22a7f0; + margin-left: 20px; @include mobile_only { - display: block; + font-size: 10pt; + padding: 3px 20px 3px 20px; + border-radius: 6px; + margin-left: 15px; + bottom: 5px; } @include tablet { - display: block; + margin-left: 20px; + margin-bottom: 30px; + padding: 5px 20px 5px 20px; + border-radius: 6px; + font-size: 10pt; } - @include tv { - display: flex; + @include desktop { + margin-bottom: 30px; + padding: 5px 30px 5px 30px; + border-radius: 6px; + font-size: 12pt; + } + } + + h4 { + font-weight: 500; + + @include mobile_only { + margin-top: 5px; + } + + @include tablet { + font-size: 18pt; + margin-top: 10px; } @include desktop { - display: flex; + font-size: 22pt; + margin-top: 20px; } + } + + h1, + h2, + h3 { + color: #000000; + } + + p { + margin-bottom: 0px; + } } -.title-container { - //border-top: $medium-grey 1px solid; +.work-in-progress--product-summary { + padding-top: 0px; + padding-bottom: 0px; + margin-bottom: 10px; + + p { + margin: 0px; + padding-top: 25px; + } +} + +.service-link { + padding-top: 5px; + + @include mobile_only { + font-size: 12pt; + } + + @include tablet { + font-size: 12pt; + } + + @include desktop { + font-size: 14pt; + } +} + +.bottom-container { + padding-top: 10px; + justify-content: space-between; + + @include mobile_only { + display: block; + } + + @include tablet { + display: block; + } + + @include tv { + display: flex; + } + + @include desktop { + display: flex; + } +} + +.bottom-container-nolinks { + padding-top: 10px; + + @include mobile_only { + display: block; + } + + @include tablet { + display: block; + } + + @include tv { display: flex; + } + + @include desktop { + display: flex; + } +} + +.title-container { + //border-top: $medium-grey 1px solid; + display: flex; } .work-in-progress--links, .work-in-progress--partners, .work-in-progress--team { - padding-right: 15px; - padding-bottom: 20px; + padding-right: 15px; + padding-bottom: 20px; } .work-in-progress--partners-nolinks { - padding-right: 10%; - padding-bottom: 20px; + padding-right: 10%; + padding-bottom: 20px; } .work-in-progress--partners-long { - padding-bottom: 20px; - - @include tablet{ - width: 45%; - } + padding-bottom: 20px; + + @include tablet { + width: 45%; + } } .statusButton { - padding-top: 50px; + padding-top: 50px; } .seperator { - margin: 0px auto; + margin: 0px auto; - @include mobile_only { - width: 100%; - } + @include mobile_only { + width: 100%; + } - @include tablet { - width: 80%; - } + @include tablet { + width: 80%; + } - @include desktop { - width: 65%; - } + @include desktop { + width: 65%; + } } //////////////////////////////////////////////////// @@ -788,214 +788,214 @@ span.live, span.livefr { // //////////////////////////////////////////////////// .cell-background { - background: $wwu-blue; - border-radius: 20px; - padding: 1rem 2rem 1rem 3rem; + background: $wwu-blue; + border-radius: 20px; + padding: 1rem 2rem 1rem 3rem; + color: $white; + margin-bottom: 3rem; + + @include mobile-only { + padding-top: 1rem; + padding-bottom: 2rem; + } + a { color: $white; - margin-bottom: 3rem; - - @include mobile-only{ - padding-top: 1rem; - padding-bottom: 2rem; - } - a{ - color: $white; - border-bottom: $primary-color 1px dotted; - - &:hover { - border-bottom: $primary-color 1px solid; - } - - @include mobile-only{ - font-size: 1.75rem; - } - } - li{ - color: $primary-color; - @include mobile-only{ - margin-bottom: 1rem; - } - } - - h4{ - @include mobile-only{ - font-size: 1.75rem; - } - - font-size: 2.25rem; - font-weight: 500; - margin-bottom: 2rem; + border-bottom: $primary-color 1px dotted; + + &:hover { + border-bottom: $primary-color 1px solid; + } + + @include mobile-only { + font-size: 1.75rem; + } + } + li { + color: $primary-color; + @include mobile-only { + margin-bottom: 1rem; + } + } + + h4 { + @include mobile-only { + font-size: 1.75rem; } + + font-size: 2.25rem; + font-weight: 500; + margin-bottom: 2rem; + } } .work-with-us--details { - // border-top: $medium-grey 1px solid; - padding-bottom: 4rem; - padding-top: 0rem; -// this needs standardizing ^ + // border-top: $medium-grey 1px solid; + padding-bottom: 4rem; + padding-top: 0rem; + // this needs standardizing ^ - // below addresses stylistic change request to make spacing around element look more uniform to the rest of the page - .page-wide--outer-container-padding { - @include mobile-only { - padding-top: 0; - } + // below addresses stylistic change request to make spacing around element look more uniform to the rest of the page + .page-wide--outer-container-padding { + @include mobile-only { + padding-top: 0; } + } } .work-with-us--looking-for { - background-color: rgba(34, 89, 109, 1); - color: $white; + background-color: rgba(34, 89, 109, 1); + color: $white; - .section-smallcaps-title { - font-weight: 500; - font-size: 1.75rem; - - @include tablet { - font-size: 2rem; - } + .section-smallcaps-title { + font-weight: 500; + font-size: 1.75rem; - @include tv { - font-size: 2.25rem; - } + @include tablet { + font-size: 2rem; } - li { - color: #f0ca4d; - margin: 0 0 11.5px; + @include tv { + font-size: 2.25rem; + } + } - @include tablet { - font-size: 2rem; - } + li { + color: #f0ca4d; + margin: 0 0 11.5px; - @include tv { - font-size: 2.25rem; - line-height: 3.5rem; - margin-bottom: 2.75rem; - } + @include tablet { + font-size: 2rem; + } - span { - color: $white; - } + @include tv { + font-size: 2.25rem; + line-height: 3.5rem; + margin-bottom: 2.75rem; } - .dark-background { - background: #034; - border-radius: 20px; - padding-left: 3rem; - padding-right: 4rem; - padding-top: 1rem; - - @include mobile-only{ - padding-top: 1rem; - padding-bottom: 2rem; - } + span { + color: $white; } + } + + .dark-background { + background: #034; + border-radius: 20px; + padding-left: 3rem; + padding-right: 4rem; + padding-top: 1rem; - .border-top { - border-top: #f0ca4d solid 0.25rem; + @include mobile-only { + padding-top: 1rem; + padding-bottom: 2rem; } + } + + .border-top { + border-top: #f0ca4d solid 0.25rem; + } } .work-with-us--streams { - .mrgn-bttm-lg { - margin-bottom: 15px; + .mrgn-bttm-lg { + margin-bottom: 15px; - @include tv { - margin-bottom: 30px; - } + @include tv { + margin-bottom: 30px; } + } - li { - margin: 0 0 11.5px; - - @include tablet { - font-size: 2rem; - } + li { + margin: 0 0 11.5px; - @include tv { - font-size: 2.25rem; - line-height: 3.5rem; - margin-bottom: 2.75rem; - } + @include tablet { + font-size: 2rem; } - h4 { - font-size: 1.75rem; + @include tv { + font-size: 2.25rem; + line-height: 3.5rem; + margin-bottom: 2.75rem; + } + } - @include tablet { - font-size: 2rem; - } + h4 { + font-size: 1.75rem; - @include tv { - font-size: 2.25rem; - } + @include tablet { + font-size: 2rem; } - hr { - color: $medium-grey; + @include tv { + font-size: 2.25rem; } + } + + hr { + color: $medium-grey; + } } .work-with-us--process { - border-top: $medium-grey 1px solid; + border-top: $medium-grey 1px solid; } .work-with-us--apply-now { - background-color: #333; - color: $white; - - @include desktop{ - padding-bottom: 9.5rem; - } + background-color: #333; + color: $white; - label { - font-size: 2.25rem; - font-weight: 200; - } + @include desktop { + padding-bottom: 9.5rem; + } - .form-control { - width: 100%; - } + label { + font-size: 2.25rem; + font-weight: 200; + } - .radio label { - margin-bottom: 1.5rem; - margin-left: 3rem; - } + .form-control { + width: 100%; + } + + .radio label { + margin-bottom: 1.5rem; + margin-left: 3rem; + } - .button { - margin-right: 2rem; + .button { + margin-right: 2rem; - &:hover { - border-radius: 1rem; - border: #f90 2px solid; - background: #f90; - color: $secondary-color; - } + &:hover { + border-radius: 1rem; + border: #f90 2px solid; + background: #f90; + color: $secondary-color; } + } - a { - color: $white; - border-bottom: $primary-color 1px dotted; + a { + color: $white; + border-bottom: $primary-color 1px dotted; - &:hover { - border-bottom: $primary-color 1px solid; - } + &:hover { + border-bottom: $primary-color 1px solid; } + } - .spinner { - display: inline-block; - opacity: 0; - max-width: 0px; - -webkit-transition: opacity 0.25s, max-width 0.45s; - -moz-transition: opacity 0.25s, max-width 0.45s; - -o-transition: opacity 0.25s, max-width 0.45s; - transition: opacity 0.25s, max-width 0.45s; + .spinner { + display: inline-block; + opacity: 0; + max-width: 0px; + -webkit-transition: opacity 0.25s, max-width 0.45s; + -moz-transition: opacity 0.25s, max-width 0.45s; + -o-transition: opacity 0.25s, max-width 0.45s; + transition: opacity 0.25s, max-width 0.45s; - &.active { - opacity: 1; - max-width: 50px; - } + &.active { + opacity: 1; + max-width: 50px; } + } } //////////////////////////////////////////////////// @@ -1009,139 +1009,139 @@ span.live, span.livefr { // //////////////////////////////////////////////////// .blogpost-list { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; - .post { - padding: 4rem 0; - border-bottom: #ccc 1px solid; + .post { + padding: 4rem 0; + border-bottom: #ccc 1px solid; - @include tablet { - padding: 4rem 2rem; - } + @include tablet { + padding: 4rem 2rem; } + } - .date { - font-size: 1.5rem; - margin: 0rem 0 1rem 0; - - @include tablet { - font-size: 1.75rem; - font-weight: 300; - } - } + .date { + font-size: 1.5rem; + margin: 0rem 0 1rem 0; - .author { - margin: 2rem 0 0 0; - font-weight: 500; - font-size: 2.25rem; + @include tablet { + font-size: 1.75rem; + font-weight: 300; } + } - .photo { - display: block; - height: 15rem; - width: 100%; - background-size: cover; - background-position: center center; + .author { + margin: 2rem 0 0 0; + font-weight: 500; + font-size: 2.25rem; + } - @include tablet { - margin-top: 1rem; - } + .photo { + display: block; + height: 15rem; + width: 100%; + background-size: cover; + background-position: center center; - @include desktop { - height: 20rem; - } + @include tablet { + margin-top: 1rem; } - h2 { - margin-top: 1.5rem; + @include desktop { + height: 20rem; } + } - .text { - font-size: 2rem; - font-weight: 100; - line-height: 1.6em; - - @include desktop { - font-size: 2.25rem; - } - } + h2 { + margin-top: 1.5rem; + } - .readmore { - margin-top: 2rem; + .text { + font-size: 2rem; + font-weight: 100; + line-height: 1.6em; - a { - //border: $secondary-color 1px solid; - display: inline-block; //padding: 0.5rem 1.5rem; - //font-size: 1.5rem; - //border-radius: 1rem; - } + @include desktop { + font-size: 2.25rem; } + } - & li.pagination { - position: relative; - padding: 0 0.4em; - } + .readmore { + margin-top: 2rem; - & li.active a::after { - background: $primary-color; - border: $primary-color 1px solid; - width: 100%; - display: block; - content: ""; - height: 4px; - position: absolute; - left: 0%; - } - - & .blogpost-paginator { - text-align: center; - padding: 0; - - @include mobile-only { - :first-child { - padding-left: 0; - } - :last-child { - padding-right: 0; - } - } + a { + //border: $secondary-color 1px solid; + display: inline-block; //padding: 0.5rem 1.5rem; + //font-size: 1.5rem; + //border-radius: 1rem; + } + } + + & li.pagination { + position: relative; + padding: 0 0.4em; + } + + & li.active a::after { + background: $primary-color; + border: $primary-color 1px solid; + width: 100%; + display: block; + content: ""; + height: 4px; + position: absolute; + left: 0%; + } + + & .blogpost-paginator { + text-align: center; + padding: 0; + + @include mobile-only { + :first-child { + padding-left: 0; + } + :last-child { + padding-right: 0; + } } + } } article.post { - padding: 2rem 0; + padding: 2rem 0; - img { - width: 100%; - } + img { + width: 100%; + } - a.large-link { - @include tablet { - font-size: 2.25rem; - } + a.large-link { + @include tablet { + font-size: 2.25rem; + } - @include tv { - font-size: 2.25rem; - } + @include tv { + font-size: 2.25rem; } + } - .post-header { - font-weight: 500; - font-size: 1.5rem; - margin: 1rem 0 2rem 0; + .post-header { + font-weight: 500; + font-size: 1.5rem; + margin: 1rem 0 2rem 0; - time { - display: block; - font-weight: 500; - } + time { + display: block; + font-weight: 500; + } - .author { - display: block; - font-weight: 500; - } + .author { + display: block; + font-weight: 500; } + } } //////////////////////////////////////////////////// @@ -1150,173 +1150,173 @@ article.post { // //////////////////////////////////////////////////// .section--contact { - .contact-info { - @include mobile_only { - max-width: 35rem; - margin: 0 auto; - } + .contact-info { + @include mobile_only { + max-width: 35rem; + margin: 0 auto; } + } } .section--mailing-list { - background: $bg-grey; - padding-bottom: 8rem; - - &.no-bg { - background: none; - border-top: $medium-grey 4px solid; - } - p { - text-align: center; - } + background: $bg-grey; + padding-bottom: 8rem; + + &.no-bg { + background: none; + border-top: $medium-grey 4px solid; + } + p { + text-align: center; + } } -.mc-field-group{ - max-width: 45rem; - width: 90%; - margin: auto; +.mc-field-group { + max-width: 45rem; + width: 90%; + margin: auto; } #mc_embed_signup { - .email { -// margin: 0 auto; -// width: 90%; -// max-width: 45rem; - border-radius: 0; - border: $primary-color 2px solid; // padding: 2rem 1rem; - height: 42px; - font-weight: 100; - font-size: 2rem; - width: 100%; - - &::placeholder { - font-weight: 100; - font-style: italic; - color: #bbb !important; - } - - &:focus { - outline: none; - box-shadow: none; - } - } - - label[for="mce-EMAIL"] { - display: block !important; -// margin: auto; -// padding-left: 0.2rem; - padding-bottom: 0.5rem; - font-size: 2rem; - color: $dark-grey; - font-weight: 100; - - @include mobile-only{ - font-size: 1.75rem; - } - } - - .submit-button-container { - text-align: center; - margin-top: 2.5rem; - } - .mce-submit-button { - background: $primary-color; - color: $secondary-color; - } - - .mce-privacy { - font-size: 1.5rem; - text-align: center; - font-weight: 100; - margin-top: 1rem; + .email { + // margin: 0 auto; + // width: 90%; + // max-width: 45rem; + border-radius: 0; + border: $primary-color 2px solid; // padding: 2rem 1rem; + height: 42px; + font-weight: 100; + font-size: 2rem; + width: 100%; + + &::placeholder { + font-weight: 100; + font-style: italic; + color: #bbb !important; + } + + &:focus { + outline: none; + box-shadow: none; + } + } + + label[for="mce-EMAIL"] { + display: block !important; + // margin: auto; + // padding-left: 0.2rem; + padding-bottom: 0.5rem; + font-size: 2rem; + color: $dark-grey; + font-weight: 100; + + @include mobile-only { + font-size: 1.75rem; } + } + + .submit-button-container { + text-align: center; + margin-top: 2.5rem; + } + .mce-submit-button { + background: $primary-color; + color: $secondary-color; + } + + .mce-privacy { + font-size: 1.5rem; + text-align: center; + font-weight: 100; + margin-top: 1rem; + } } // TODO - update general CSS for the main content section // and create specialized H3's etc. where needed. .page-legal { - h2 { - font-weight: 500; + h2 { + font-weight: 500; - @include desktop { - font-size: 2.9rem; - margin: 4.75rem 0 1rem 0; - } + @include desktop { + font-size: 2.9rem; + margin: 4.75rem 0 1rem 0; } + } - h3 { - font-weight: 500; + h3 { + font-weight: 500; - @include desktop { - font-size: 2.45rem; - margin: 3rem 0 1.5rem 0; - } + @include desktop { + font-size: 2.45rem; + margin: 3rem 0 1.5rem 0; } + } - p + ul { - margin-top: 0.5em; - } + p + ul { + margin-top: 0.5em; + } } .page--outer-container-padding { -// adds 80px of padding (desktop) to the whole page for page layout (have an outer container) (80px + 15px totals 95px padding). + // adds 80px of padding (desktop) to the whole page for page layout (have an outer container) (80px + 15px totals 95px padding). - padding-top: 4rem; - padding-bottom: 4rem; - - @include mobile-only{ - padding: 3rem 1rem; - } + padding-top: 4rem; + padding-bottom: 4rem; - @include desktop { - padding: 8rem; - } + @include mobile-only { + padding: 3rem 1rem; + } + + @include desktop { + padding: 8rem; + } } -.page-wide--outer-container-padding{ -// needed because home & work with us don't have an outer container with 15px padding (9.5rem = 95px to match) -// this class is only applied to pages with page-wide layout and home layout (they can't have full-page containers, so sections need to be styled individually) -//currently it's only applied to "Our Team", "What We Do" and "Engagement Report" sections, as intro for Home and Work With Us both needed their own top-padding to match the other pages - - @include mobile-only{ - padding: 3rem 1rem; - } - - @include desktop { - padding-left: 9.5rem; - padding-right: 9.5rem; - } +.page-wide--outer-container-padding { + // needed because home & work with us don't have an outer container with 15px padding (9.5rem = 95px to match) + // this class is only applied to pages with page-wide layout and home layout (they can't have full-page containers, so sections need to be styled individually) + //currently it's only applied to "Our Team", "What We Do" and "Engagement Report" sections, as intro for Home and Work With Us both needed their own top-padding to match the other pages + + @include mobile-only { + padding: 3rem 1rem; + } + + @include desktop { + padding-left: 9.5rem; + padding-right: 9.5rem; + } } -.page-intro--outer-container-padding{ -// used on all pages that don't use the page template (no container), as well as 'Our Team', while the team images remain their current width - padding-top: 4rem; - padding-bottom: 2rem; - - @include mobile-only{ - padding: 3rem 1rem; - } - - @include desktop{ - padding-top: 8rem; - padding-left: 9.5rem; - padding-right: 9.5rem; - } +.page-intro--outer-container-padding { + // used on all pages that don't use the page template (no container), as well as 'Our Team', while the team images remain their current width + padding-top: 4rem; + padding-bottom: 2rem; + + @include mobile-only { + padding: 3rem 1rem; + } + + @include desktop { + padding-top: 8rem; + padding-left: 9.5rem; + padding-right: 9.5rem; + } } -.page-blog--container-padding{ -// currently blog width is diff than rest - this only affects top and bottom padding of the whole page - padding-top: 4rem; - padding-bottom: 4rem; - - @include mobile-only{ - padding-top: 3rem; - } - - @include desktop{ - padding-top: 8rem; - padding-bottom: 8rem; - } +.page-blog--container-padding { + // currently blog width is diff than rest - this only affects top and bottom padding of the whole page + padding-top: 4rem; + padding-bottom: 4rem; + + @include mobile-only { + padding-top: 3rem; + } + + @include desktop { + padding-top: 8rem; + padding-bottom: 8rem; + } } //////////////////////////////////////////////////// @@ -1325,52 +1325,61 @@ article.post { // //////////////////////////////////////////////////// -.story-text{ - background-color: $black; - color: $white; - padding-top: 3rem; - - @include mobile-only{ - height: auto; - padding-bottom: 3rem; - - h2{ - font-size: 2.5rem; - margin-top: 3rem; - } - - } - @include tablet{ - height: auto; - padding-bottom: 5rem; - } +.story-text { + background-color: $black; + color: $white; + padding-top: 3rem; - @include desktop{ - height: 95rem; - } + @include mobile-only { + height: auto; + padding-bottom: 3rem; - .container{ - width: 70%; - } + h2 { + font-size: 2.5rem; + margin-top: 3rem; + } + } + @include tablet { + height: auto; + padding-bottom: 5rem; + } + + @include desktop { + height: 95rem; + } + + .container { + width: 70%; + } } -.story-image{ - padding: 0; +.story-image { + padding: 0; - .image-container{ - background-size: cover; - background-position: center center; + .image-container { + background-size: cover; + background-position: center center; - @include tablet{ - height: 50rem; - } + @include tablet { + height: 50rem; + } - @include desktop{ - height: 95rem; - } + @include desktop { + height: 95rem; + } - @include mobile-only{ - height: 40rem; - } + @include mobile-only { + height: 40rem; } -} \ No newline at end of file + } +} + +//////////////////////////////////////////////////// +// +// PLATFORM +// +//////////////////////////////////////////////////// + +.work-in-progress--platform-module { + padding: 1rem 0; +} diff --git a/content/en/platform/_index.html b/content/en/platform/_index.html index 15e79cc12..c873bcb64 100644 --- a/content/en/platform/_index.html +++ b/content/en/platform/_index.html @@ -4,7 +4,7 @@ layout: platform aliases: [/platform/] --- -
+

diff --git a/layouts/platform/list.html b/layouts/platform/list.html index dc468c153..4e3ed3e43 100644 --- a/layouts/platform/list.html +++ b/layouts/platform/list.html @@ -1,4 +1,4 @@ -

+
From 8376705df6b6a7d7f10b457f77c73422045f536e Mon Sep 17 00:00:00 2001 From: Tim Arney Date: Wed, 15 May 2019 15:43:49 -0400 Subject: [PATCH 2/2] spacing --- assets/sass/cds/_sections.scss | 12 ++++++++++++ layouts/section/platform.html | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/assets/sass/cds/_sections.scss b/assets/sass/cds/_sections.scss index 31ac180b2..282086328 100644 --- a/assets/sass/cds/_sections.scss +++ b/assets/sass/cds/_sections.scss @@ -1383,3 +1383,15 @@ article.post { .work-in-progress--platform-module { padding: 1rem 0; } + +.platform-banner{ + background-color : $dark-grey; + background-size : cover; + background-position : center center; + height : 12rem; + position : relative; + + @include tablet { height: 20rem; } + @include desktop { height: 28rem; } + +} diff --git a/layouts/section/platform.html b/layouts/section/platform.html index e7f936a97..9cf6d6329 100644 --- a/layouts/section/platform.html +++ b/layouts/section/platform.html @@ -1,6 +1,6 @@ {{ define "title"}} {{partial "menu.html" . }} -
+