style landing page modules and start reorganising css

This commit is contained in:
Benedikt Rötsch
2017-10-02 13:34:34 +02:00
committed by Benedikt Rötsch
parent 3459c4c32c
commit e955555f1a
13 changed files with 334 additions and 18 deletions

View File

@@ -15,4 +15,4 @@ block content
+moduleHeroImage(module)
when 'landingPageModuleHighlightedCourse'
+moduleHighlightedCourse(module)
+moduleHighlightedCourse(module, module.fields.course)

View File

@@ -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

View File

@@ -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

View File

@@ -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}`)

View File

@@ -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