diff --git a/assets/stylesheets/landing-page/modules/copy.css b/assets/stylesheets/landing-page/modules/copy.css new file mode 100644 index 0000000..ebdb823 --- /dev/null +++ b/assets/stylesheets/landing-page/modules/copy.css @@ -0,0 +1,64 @@ +@block module-copy { + @modifier emphasized { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: calc(var(--grid-gutter) * 0.75) 0; + background-color: var(--module-copy-emphasized-bg); + border-radius: var(--border-radius); + color: var(--module-copy-emphasized-color); + + @media (--breakpoint-desktop) { + flex-wrap: nowrap; + } + } + + @element first { + @modifier emphasized { + flex: 1 1 auto; + width: 50vw; + padding: 0 var(--grid-gutter); + + @media (--breakpoint-desktop) { + padding-left: var(--grid-gutter); + } + } + } + + @element second { + @modifier emphasized { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + + @media (--breakpoint-desktop) { + flex: 1 1 auto; + padding: 0 var(--grid-gutter); + width: 20vw; + } + } + } + + + @element headline { + @modifier emphasized { + color: var(--module-copy-emphasized-headlines-color); + font-size: 1.25em; + } + } + + @element copy { + @modifier emphasized { + font-size: 0.875em; + } + } + + @element cta { + @modifier emphasized { + background-color: var(--module-copy-emphasized-cta-bg); + color: var(--module-copy-emphasized-cta-color); + margin-bottom: 0; + } + } +} diff --git a/assets/stylesheets/landing-page/modules/index.css b/assets/stylesheets/landing-page/modules/index.css index 9e6beb9..d469be1 100644 --- a/assets/stylesheets/landing-page/modules/index.css +++ b/assets/stylesheets/landing-page/modules/index.css @@ -1,3 +1,4 @@ +@import './copy'; @import './hero-image'; @import './highlighted-course'; diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index 1a22c4f..f92c71a 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -58,6 +58,12 @@ --cta-bg-hover: var(--color-palette-blue-medium); --cta-radius: 3px; + --module-copy-emphasized-bg: #8091a5; + --module-copy-emphasized-color: #c3cfd5; + --module-copy-emphasized-headlines-color: #fff; + --module-copy-emphasized-cta-bg: #536171; + --module-copy-emphasized-cta-color: #fff; + --code-bg: var(--color-bg-grey); --code-trigger-bg: color(var(--color-bg-grey) shade(20%)); --code-trigger-bg-active: var(--code-bg); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index b9d907a..2eed497 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1824,6 +1824,97 @@ github.com style (c) Vasily Polovnyov margin-bottom: 0; } +.module-copy {} + +.module-copy--emphasized { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 16.5px 0; + background-color: #8091a5; + border-radius: 4px; + color: #c3cfd5; +} + +@media (min-width: 700px) { + + .module-copy--emphasized { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + } +} + +.module-copy__first {} + +.module-copy__first--emphasized { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 50vw; + padding: 0 22px; +} + +@media (min-width: 700px) { + + .module-copy__first--emphasized { + padding-left: 22px; + } +} + +.module-copy__second {} + +.module-copy__second--emphasized { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +@media (min-width: 700px) { + + .module-copy__second--emphasized { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 0 22px; + width: 20vw; + } +} + +.module-copy__headline {} + +.module-copy__headline--emphasized { + color: #fff; + font-size: 1.25em; +} + +.module-copy__copy {} + +.module-copy__copy--emphasized { + font-size: 0.875em; +} + +.module-copy__cta {} + +.module-copy__cta--emphasized { + background-color: #536171; + color: #fff; + margin-bottom: 0; +} + .module-hero-image {} .module-hero-image__wrapper { diff --git a/views/mixins/_moduleCopy.pug b/views/mixins/_moduleCopy.pug index 4da7176..aaddb8b 100644 --- a/views/mixins/_moduleCopy.pug +++ b/views/mixins/_moduleCopy.pug @@ -1,7 +1,10 @@ mixin moduleCopy(module) - .module.module-copy - h1.module-copy__headline #{module.fields.headline} - div.module-copy__copy !{helpers.markdown(module.fields.copy)} - - if module.fields.ctaTitle && module.fields.ctaLink - a.cta(href=module.fields.ctaLink)= module.fields.ctaTitle + - const style = module.fields.visualStyle === 'Emphasized' ? `--emphasized` : '' + .module + div(class=`module-copy${style}`) + div(class=`module-copy__first${style}`) + h1(class=`module-copy__headline${style}`) #{module.fields.headline} + div(class=`module-copy__copy${style}`) !{helpers.markdown(module.fields.copy)} + div(class=`module-copy__second${style}`) + if module.fields.ctaTitle && module.fields.ctaLink + a.cta(class=`module-copy__cta${style}` href=module.fields.ctaLink)= module.fields.ctaTitle