several small styling adjustments

assets/stylesheets/global/footer.css

@@ -51,8 +51,28 @@
     flex: 1 1 auto;
     display: flex;
     align-items: center;
-    font-size: 0.7em;
+  }
-    color: var(--color-text-grey);
+
+  @element disclaimer-logo {
+    flex: 0 0 auto;
+    width: 24px;
+    height: 27px;
+    margin-right: var(--grid-gutter);
+  }
+
+  @element disclaimer-text {
+    flex: 1 1 auto;
+
+    color: var(--color-text-footer);
+    font-size: 0.75em;
+    line-height: 1.5;
+
+    & a {
+      text-decoration: underline;
+      &:hover {
+        text-decoration: none;
+      }
+    }
   }
 
   @element social {

assets/stylesheets/global/index.css

@@ -23,6 +23,8 @@ body {
 }
 #main__content {
   flex: 1 0 auto;
+  display: flex;
+  align-items: stretch;
 }
 #main__footer {
   flex: 0 0 auto;

assets/stylesheets/landing-page/index.css

@@ -1 +1,5 @@
 @import './modules';
+
+@block modules-container {
+  flex: 1 1 auto;
+}

assets/stylesheets/landing-page/modules/hero-image.css

@@ -24,9 +24,14 @@
     color: #fff;
     text-align: center;
     font-size: 4.5vw;
+    line-height: 1;
     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);
+
+    @media (--breakpoint-desktop) {
+      font-size: 4em;
+    }
   }
 }

assets/stylesheets/layout/layout-sidebar.css

@@ -36,8 +36,8 @@
 
   @element content {
     display: flex;
-    flex-direction: column;
     align-self: stretch;
+    align-items: stretch;
     padding-top: calc(var(--grid-gutter) / 2);
 
     @media (--breakpoint-desktop) {

assets/stylesheets/variables.css

@@ -25,6 +25,8 @@
   --color-bg-grey: #f7f9fa;
   --color-bg-separator: #e5ebed;
 
+  --color-text-footer: #a9b9c0;
+
   --color-sidebar-bg: #f7f9fa;
   --color-sidebar-seperator: #eeeeee;
 

public/images/contentful-logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 27">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#F8E419" d="M8.082 18.86l.002-.002a7.554 7.554 0 0 1-2.195-5.332c0-2.082.84-3.968 2.193-5.333L8.08 8.19a2.977 2.977 0 0 0 0-4.19 2.93 2.93 0 0 0-4.16 0A13.475 13.475 0 0 0 0 13.524a13.47 13.47 0 0 0 3.92 9.526 2.93 2.93 0 0 0 4.163 0 2.977 2.977 0 0 0 0-4.19"/>
+    <path fill="#56AED2" d="M8.268 8.14l.003.002a7.448 7.448 0 0 1 5.297-2.212c2.068 0 3.94.847 5.296 2.214l.005-.004a2.926 2.926 0 0 0 4.16 0 2.98 2.98 0 0 0 0-4.193A13.285 13.285 0 0 0 13.565 0a13.28 13.28 0 0 0-9.46 3.947 2.98 2.98 0 0 0 0 4.193 2.926 2.926 0 0 0 4.163 0"/>
+    <path fill="#E0534E" d="M18.863 18.65l-.003-.003a7.448 7.448 0 0 1-5.294 2.21 7.436 7.436 0 0 1-5.295-2.212v.004a2.926 2.926 0 0 0-4.16 0 2.98 2.98 0 0 0 0 4.19 13.285 13.285 0 0 0 9.46 3.946 13.28 13.28 0 0 0 9.46-3.948 2.98 2.98 0 0 0 0-4.194 2.926 2.926 0 0 0-4.163 0"/>
+    <path fill="#1E78A4" d="M8.27 8.352a2.93 2.93 0 0 1-4.164 0 2.977 2.977 0 0 1 0-4.19 2.93 2.93 0 0 1 4.163 0 2.977 2.977 0 0 1 0 4.19"/>
+    <path fill="#BE433B" d="M8.27 22.84a2.93 2.93 0 0 1-4.164 0 2.977 2.977 0 0 1 0-4.19 2.93 2.93 0 0 1 4.163 0 2.977 2.977 0 0 1 0 4.19"/>
+  </g>
+</svg>

public/stylesheets/style.css

@@ -813,12 +813,12 @@ input[type="reset"]:focus,
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
+    // flex-direction: column;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
     -ms-flex-item-align: stretch;
         align-self: stretch;
+    -webkit-box-align: stretch;
+        -ms-flex-align: stretch;
+            align-items: stretch;
     padding-top: 11px;
 }
 
@@ -1121,8 +1121,33 @@ display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    font-size: 0.7em;
+}
-    color: #8091a5;
+
+.footer__disclaimer-logo {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    width: 24px;
+    height: 27px;
+    margin-right: 22px;
+}
+
+.footer__disclaimer-text {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+
+    color: #a9b9c0;
+    font-size: 0.75em;
+    line-height: 1.5;
+}
+
+.footer__disclaimer-text a {
+  text-decoration: underline;
+}
+
+.footer__disclaimer-text a:hover {
+  text-decoration: none;
 }
 
 .footer__social {
@@ -1297,6 +1322,12 @@ body {
   -webkit-box-flex: 1;
       -ms-flex: 1 0 auto;
           flex: 1 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
 }
 
 #main__footer {
@@ -1603,12 +1634,20 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
     color: #fff;
     text-align: center;
     font-size: 4.5vw;
+    line-height: 1;
     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);
 }
 
+@media (min-width: 700px) {
+
+  .module-hero-image__headline {
+    font-size: 4em;
+  }
+}
+
 .module-higlighted-course {}
 
 .module-higlighted-course__wrapper {
@@ -1745,6 +1784,12 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   margin-top: 22px;
 }
 
+.modules-container {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+}
+
 .lesson-module {
   margin-top: 22px
 }

views/courses.pug

@@ -16,8 +16,9 @@ block content
               li.sidebar-menu__item
                 a.sidebar-menu__link(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
     section.layout-sidebar__content
-      h1= title
+      .courses
-      .courses.grid-list
+        h1= title
-        each course in courses
+        .grid-list
-          .grid-list__item
+          each course in courses
-            +courseCard(course)
+            .grid-list__item
+              +courseCard(course)

views/index.pug

@@ -5,7 +5,7 @@ include mixins/_moduleHeroImage
 include mixins/_moduleHighlightedCourse
 
 block content
-  .container
+  .modules-container
     each module in landingPage.fields.contentModules
       case module.sys.contentType.sys.id
         when 'landingPageModuleCopy'

views/layout.pug

@@ -66,9 +66,11 @@ html
                   img(src='/images/badge-google-play.svg')
             .footer__lower
               .footer__disclaimer
-                p
+                img.footer__disclaimer-logo(src='/images/contentful-logo.svg')
-                  span This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
+                p.footer__disclaimer-text
-                  a(href='#todo') View details.
+                  | This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account. 
+                  a(href='#todo') View on Github
+                  | .
               .footer__social
                 p
                   a(href='https://www.facebook.com/contentful/' target='_blank')

views/mixins/_courseCard.pug

@@ -1,7 +1,7 @@
 mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}})
   .course-card
-    if(course.fields.categories)
+    .course-card__categories
-      .course-card__categories
+      if(course.fields.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