style landing page modules and start reorganising css

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;
   }
 }

assets/stylesheets/landing-page/index.css

@@ -0,0 +1 @@
+@import './modules';

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);
+  }
+}

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;
+  }
+}

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;

assets/stylesheets/style.css

@@ -13,5 +13,5 @@
 @import './footer';
 
 @import './course';
-@import './module-landing';
+@import './landing-page';
 @import './module-lesson';

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);
 

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 {

views/index.pug

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

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

views/mixins/_moduleCopy.pug

@@ -1,5 +1,7 @@
 mixin moduleCopy(module)
   .module.module-copy
-    h1.module-copy__title #{module.fields.title}
+    h1.module-copy__headline #{module.fields.headline}
-    h3.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

views/mixins/_moduleHeroImage.pug

@@ -1,5 +1,6 @@
 mixin moduleHeroImage(module)
   .module.module-hero-image
-    h2.module-hero-image__title #{module.fields.title}
+    .module-hero-image__wrapper
-    h3.module-hero-image__headline #{module.fields.headline}
+      .module-hero-image__headline-wrapper
-    img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
+        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}`)

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}
+    .module-higlighted-course__wrapper
-    +courseCard(module.fields.course)
+      .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