From e955555f1a6cbbfd08445a96bf7944bfc846edfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Mon, 2 Oct 2017 13:34:34 +0200 Subject: [PATCH] style landing page modules and start reorganising css --- assets/stylesheets/course.css | 9 +- assets/stylesheets/landing-page/index.css | 1 + .../landing-page/modules/hero-image.css | 32 ++++ .../modules/highlighted-course.css | 98 +++++++++++ .../modules/index.css} | 5 +- assets/stylesheets/style.css | 2 +- assets/stylesheets/variables.css | 1 + public/stylesheets/style.css | 166 +++++++++++++++++- views/index.pug | 2 +- views/mixins/_courseCard.pug | 4 +- views/mixins/_moduleCopy.pug | 6 +- views/mixins/_moduleHeroImage.pug | 7 +- views/mixins/_moduleHighlightedCourse.pug | 19 +- 13 files changed, 334 insertions(+), 18 deletions(-) create mode 100644 assets/stylesheets/landing-page/index.css create mode 100644 assets/stylesheets/landing-page/modules/hero-image.css create mode 100644 assets/stylesheets/landing-page/modules/highlighted-course.css rename assets/stylesheets/{module-landing.css => landing-page/modules/index.css} (71%) diff --git a/assets/stylesheets/course.css b/assets/stylesheets/course.css index 90efaf3..76283bc 100644 --- a/assets/stylesheets/course.css +++ b/assets/stylesheets/course.css @@ -4,7 +4,7 @@ min-height: 30vh; padding: var(--grid-gutter); - border-radius: 7px; + border-radius: var(--border-radius); box-shadow: var(--card-box-shadow); & > * + * { @@ -19,6 +19,8 @@ display: inline-block; margin-right: var(--grid-gutter); color: var(--color-text-grey); + font-size: 0.75em; + letter-spacing: 2px; } @element title { @@ -34,7 +36,7 @@ } } - @element link-wapper { + @element link-wrapper { flex: 0 0 auto; } @@ -44,5 +46,8 @@ border-bottom: 1px solid var(--color-link-content); text-transform: uppercase; color: var(--color-link-content); + font-size: 0.75em; + line-height: 2.17; + letter-spacing: 2px; } } diff --git a/assets/stylesheets/landing-page/index.css b/assets/stylesheets/landing-page/index.css new file mode 100644 index 0000000..58c0d95 --- /dev/null +++ b/assets/stylesheets/landing-page/index.css @@ -0,0 +1 @@ +@import './modules'; diff --git a/assets/stylesheets/landing-page/modules/hero-image.css b/assets/stylesheets/landing-page/modules/hero-image.css new file mode 100644 index 0000000..c9899d0 --- /dev/null +++ b/assets/stylesheets/landing-page/modules/hero-image.css @@ -0,0 +1,32 @@ +@block module-hero-image { + @element wrapper { + position: relative; + overflow: hidden; + max-height: 60vh; + border-radius: var(--border-radius); + } + + @element image{ + display: block; + width: 100%; + height: auto; + } + + @element headline-wrapper { + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); + } + + @element headline { + color: #fff; + text-align: center; + font-size: 4.5vw; + text-shadow: 0px 3px 0px #b2a98f, + 0px 14px 10px rgba(0,0,0,0.15), + 0px 24px 2px rgba(0,0,0,0.1), + 0px 34px 30px rgba(0,0,0,0.1); + } +} diff --git a/assets/stylesheets/landing-page/modules/highlighted-course.css b/assets/stylesheets/landing-page/modules/highlighted-course.css new file mode 100644 index 0000000..5b6dd3c --- /dev/null +++ b/assets/stylesheets/landing-page/modules/highlighted-course.css @@ -0,0 +1,98 @@ +@block module-higlighted-course { + @element wrapper { + position: relative; + overflow: hidden; + max-height: 60vh; + border-radius: var(--border-radius); + } + + @element image { + display: block; + width: 100%; + height: auto; + } + + @element overlay { + z-index: 1; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0.8; + border-radius: 4px; + background-color: #3c3d41; + } + + @element content { + z-index: 2; + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); + + display: flex; + flex-direction: column; + + padding: var(--grid-gutter) calc(var(--grid-gutter) * 2); + + color: var(--color-text-dark-bg-grey); + } + + @element categories { + flex: 0 0 var(--line-height); + } + + @element category { + display: inline-block; + margin-right: var(--grid-gutter); + + font-size: 0.75em; + letter-spacing: 2px; + } + + @element title { + flex: 1 1 auto; + margin: 0; + + color: var(--color-text-dark-bg); + font-size: 4vw; + line-height: 1.3; + + @media (--breakpoint-desktop) { + font-size: 3.25em; + } + } + + @element description-wrapper { + flex: 1 1 auto; + max-width: 400px; + line-height: 1.3; + + @media (--breakpoint-desktop) { + font-size: 1.25em; + } + + & p { + margin: 0; + } + } + + @element link-wrapper { + flex: 0 0 auto; + margin-top: var(--grid-gutter); + } + + @element link { + display: inline-block; + + border-bottom: 1px solid var(--color-text-dark-bg); + + text-transform: uppercase; + color: var(--color-text-dark-bg); + font-size: 0.75em; + line-height: 2.17; + letter-spacing: 2px; + } +} diff --git a/assets/stylesheets/module-landing.css b/assets/stylesheets/landing-page/modules/index.css similarity index 71% rename from assets/stylesheets/module-landing.css rename to assets/stylesheets/landing-page/modules/index.css index a2f36ec..9e6beb9 100644 --- a/assets/stylesheets/module-landing.css +++ b/assets/stylesheets/landing-page/modules/index.css @@ -1,4 +1,7 @@ -.module { +@import './hero-image'; +@import './highlighted-course'; + +@block module { max-width: var(--content-max-width); margin: 0 auto; padding: 0 2vw; diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css index 413651e..23fcb3a 100644 --- a/assets/stylesheets/style.css +++ b/assets/stylesheets/style.css @@ -13,5 +13,5 @@ @import './footer'; @import './course'; -@import './module-landing'; +@import './landing-page'; @import './module-lesson'; diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index f50ac94..89ef427 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -17,6 +17,7 @@ --color-text-default: #2a303a; --color-text-grey: #8091a5; --color-text-dark-bg: #fff; + --color-text-dark-bg-grey: #a9b9c0; --color-link-content: var(--color-palette-blue); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 88b3280..627abc1 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1406,7 +1406,7 @@ body { min-height: 30vh; padding: 22px; - border-radius: 7px; + border-radius: 3px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); } @@ -1425,6 +1425,8 @@ body { display: inline-block; margin-right: 22px; color: #8091a5; + font-size: 0.75em; + letter-spacing: 2px; } .course-card__title { @@ -1444,7 +1446,7 @@ body { margin: 0; } -.course-card__link-wapper { +.course-card__link-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -1456,12 +1458,170 @@ body { border-bottom: 1px solid #5c9fef; text-transform: uppercase; color: #5c9fef; + font-size: 0.75em; + line-height: 2.17; + letter-spacing: 2px; +} + +.module-hero-image {} + +.module-hero-image__wrapper { + position: relative; + overflow: hidden; + max-height: 60vh; + border-radius: 3px; +} + +.module-hero-image__image { + display: block; + width: 100%; + height: auto; +} + +.module-hero-image__headline-wrapper { + position: absolute; + left: 0; + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} + +.module-hero-image__headline { + color: #fff; + text-align: center; + font-size: 4.5vw; + text-shadow: 0px 3px 0px #b2a98f, + 0px 14px 10px rgba(0, 0, 0, .15), + 0px 24px 2px rgba(0, 0, 0, .1), + 0px 34px 30px rgba(0, 0, 0, .1); +} + +.module-higlighted-course {} + +.module-higlighted-course__wrapper { + position: relative; + overflow: hidden; + max-height: 60vh; + border-radius: 3px; +} + +.module-higlighted-course__image { + display: block; + width: 100%; + height: auto; +} + +.module-higlighted-course__overlay { + z-index: 1; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0.8; + border-radius: 4px; + background-color: #3c3d41; +} + +.module-higlighted-course__content { + z-index: 2; + position: absolute; + left: 0; + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + + display: -webkit-box; + + display: -ms-flexbox; + + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + + padding: 22px 44px; + + color: #a9b9c0; +} + +.module-higlighted-course__categories { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.5em; + flex: 0 0 1.5em; +} + +.module-higlighted-course__category { + display: inline-block; + margin-right: 22px; + + font-size: 0.75em; + letter-spacing: 2px; +} + +.module-higlighted-course__title { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin: 0; + + color: #fff; + font-size: 4vw; + line-height: 1.3; +} + +@media (min-width: 700px) { + + .module-higlighted-course__title { + font-size: 3.25em; + } +} + +.module-higlighted-course__description-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + max-width: 400px; + line-height: 1.3; +} + +@media (min-width: 700px) { + + .module-higlighted-course__description-wrapper { + font-size: 1.25em; + } +} + +.module-higlighted-course__description-wrapper p { + margin: 0; +} + +.module-higlighted-course__link-wrapper { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin-top: 22px; +} + +.module-higlighted-course__link { + display: inline-block; + + border-bottom: 1px solid #fff; + + text-transform: uppercase; + color: #fff; + font-size: 0.75em; + line-height: 2.17; + letter-spacing: 2px; } .module { max-width: 980px; margin: 0 auto; - padding: 0 2vw + padding: 0 2vw; } .module img { diff --git a/views/index.pug b/views/index.pug index e76b0b0..4eb1321 100644 --- a/views/index.pug +++ b/views/index.pug @@ -15,4 +15,4 @@ block content +moduleHeroImage(module) when 'landingPageModuleHighlightedCourse' - +moduleHighlightedCourse(module) + +moduleHighlightedCourse(module, module.fields.course) diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug index 2a6b36e..aa42e79 100644 --- a/views/mixins/_courseCard.pug +++ b/views/mixins/_courseCard.pug @@ -1,7 +1,7 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}}) .course-card - .course-card__categories - if(course.fields.categories) + if(course.fields.categories) + .course-card__categories each category in course.fields.categories a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} h2.course-card__title= course.fields.title diff --git a/views/mixins/_moduleCopy.pug b/views/mixins/_moduleCopy.pug index d2e60a3..4da7176 100644 --- a/views/mixins/_moduleCopy.pug +++ b/views/mixins/_moduleCopy.pug @@ -1,5 +1,7 @@ mixin moduleCopy(module) .module.module-copy - h1.module-copy__title #{module.fields.title} - h3.module-copy__headline #{module.fields.headline} + 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 diff --git a/views/mixins/_moduleHeroImage.pug b/views/mixins/_moduleHeroImage.pug index e530b23..08b0b0e 100644 --- a/views/mixins/_moduleHeroImage.pug +++ b/views/mixins/_moduleHeroImage.pug @@ -1,5 +1,6 @@ mixin moduleHeroImage(module) .module.module-hero-image - h2.module-hero-image__title #{module.fields.title} - h3.module-hero-image__headline #{module.fields.headline} - img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`) + .module-hero-image__wrapper + .module-hero-image__headline-wrapper + h2.module-hero-image__headline #{module.fields.headline} + img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`) diff --git a/views/mixins/_moduleHighlightedCourse.pug b/views/mixins/_moduleHighlightedCourse.pug index 557f424..0070777 100644 --- a/views/mixins/_moduleHighlightedCourse.pug +++ b/views/mixins/_moduleHighlightedCourse.pug @@ -1,6 +1,19 @@ include ./_courseCard -mixin moduleHighlightedCourse(module) +mixin moduleHighlightedCourse(module, course) .module.module-higlighted-course - h2.module-higlighted-course__title #{module.fields.title} - +courseCard(module.fields.course) + .module-higlighted-course__wrapper + .module-higlighted-course__image-wrapper + if course.fields.image + img.module-hero-image__image(src=`${course.fields.image.fields.file.url}` alt=`${course.fields.image.fields.title}`) + .module-higlighted-course__overlay + .module-higlighted-course__content + if(course.fields.categories) + .module-higlighted-course__categories + each category in course.fields.categories + a.module-higlighted-course__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} + h2.module-higlighted-course__title= course.fields.title + .module-higlighted-course__description-wrapper + p !{helpers.markdown(course.fields.shortDescription)} + .module-higlighted-course__link-wrapper + a.module-higlighted-course__link(href=`/courses/${course.fields.slug}${queryString}`) view course