course detail styling and basic lesson module styling

views/course.pug

@@ -7,22 +7,35 @@ block content
     section.layout-sidebar__sidebar
       .layout-sidebar__sidebar-header
         h2.layout-sidebar__sidebar-title Table of contents
-      .table-of-contents
-        ul
-          li
-            a.active(href=`/courses/${course.fields.slug}`) Course overview
-          each l in course.fields.lessons
-            if l.fields
-              li
-                a(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
+      .layout-sidebar__sidebar-content
+        .table-of-contents
+          .table-of-contents__list
+            .table-of-contents__item
+              a.table-of-contents__link.active(href=`/courses/${course.fields.slug}`) Course overview
+            each l in course.fields.lessons
+              if l.fields
+                .table-of-contents__item
+                  a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
     section.layout-sidebar__content
-      h1= course.fields.title
-
       if lesson
-        +lesson(lesson)
-        if lessonIndex + 1< lessons.length
-          if lessons[lessonIndex + 1].fields
-            a.cta(href=`/courses/${course.fields.slug}/lessons/${lessons[lessonIndex + 1].fields.slug}${queryString}`) View next lesson
+        +lesson(lesson, course, nextLesson)
       else
-        p !{helpers.markdown(course.fields.description)}
-        a.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}${queryString}`) Start course
+        .course
+          .course__content
+            h1.course__title= course.fields.title
+            .course__overview
+              h3.course__overview-title Overview
+              if course.fields.duration
+                .course__overview-item
+                  img.course__overview-icon(src='/images/icon-duration.svg')
+                  .course__overview-value Duration: #{course.fields.duration}min
+              if course.fields.skillLevel
+                .course__overview-item
+                  img.course__overview-icon(src='/images/icon-skill-level.svg')
+                  .course__overview-value Skill level: #{course.fields.skillLevel}
+              .course__overview-cta-wrapper
+                a.course__overview-cta.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}${queryString}`) Start course
+            .course__description !{helpers.markdown(course.fields.description)}
+          .course__footer
+            a.course__cta.cta(href=`/courses/${course.fields.slug}/lessons/${course.fields.lessons[0].fields.slug}${queryString}`) Start course
+          //pre= helpers.dump(course)

views/mixins/_lesson.pug

@@ -2,23 +2,27 @@ include _lessonModuleCodeSnippet
 include _lessonModuleCopy
 include _lessonModuleImage
 
-mixin lesson(lesson)
+mixin lesson(lesson, course, nextLesson)
   .lesson
-    h2.lesson__tilte #{lesson.fields.title}
-    div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
-    if lesson.fields.image
-      img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
-    each module in lesson.fields.modules
-      if module.sys.contentType
-        case module.sys.contentType.sys.id
-          when 'lessonModuleCodeSnippets'
-            +lessonModuleCodeSnippet(module)
-          when 'lessonModuleCopy'
-            +lessonModuleCopy(module)
-          when 'lessonModuleImage'
-            +lessonModuleImage(module)
-      else
-        h2 ️️⚠️ Invalid lesson module
-        p
-          span Could not determine type of
-          strong  #{module.sys.id}
+    .lesson_content
+      h1.lesson__title #{lesson.fields.title}
+      div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
+      if lesson.fields.image
+        img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
+      each module in lesson.fields.modules
+        if module.sys.contentType
+          case module.sys.contentType.sys.id
+            when 'lessonModuleCodeSnippets'
+              +lessonModuleCodeSnippet(module)
+            when 'lessonModuleCopy'
+              +lessonModuleCopy(module)
+            when 'lessonModuleImage'
+              +lessonModuleImage(module)
+        else
+          h2 ️️⚠️ Invalid lesson module
+          p
+            span Could not determine type of
+            strong  #{module.sys.id}
+    .lesson_footer
+      if nextLesson
+        a.lesson__cta.cta(href=`/courses/${course.fields.slug}/lessons/${nextLesson.fields.slug}${queryString}`) View next lesson

views/mixins/_lessonModuleCodeSnippet.pug

@@ -1,6 +1,5 @@
 mixin lessonModuleCodeSnippet(module)
   .lesson-module.lesson-module-code
-    h1.lesson-module__title #{module.fields.title}
     if module.fields.curl
       pre.lesson-module-code__curl
         code.shell= module.fields.curl

views/mixins/_lessonModuleCopy.pug

@@ -1,4 +1,3 @@
 mixin lessonModuleCopy(module)
   .lesson-module.lesson-module-copy
-    h3.lesson-module-copy__title #{module.fields.title}
     .lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}

views/mixins/_lessonModuleImage.pug

@@ -1,6 +1,5 @@
 mixin lessonModuleImage(module)
   .lesson-module.lesson-module-image
-    h2.lesson-module-image__title #{module.fields.title}
     if module.fields.file && module.fields.file.url
       img.lesson-module-image__image(src=module.fields.file.url alt=module.fields.title)
     else