several adjustments based on Malin's feedback

assets/stylesheets/course/index.css

@@ -1,10 +1,6 @@
 @import './card';
 
 @block course {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
   @element title {
     margin-bottom: calc(var(--grid-gutter));
   }

assets/stylesheets/global/sidebar-menu.css

@@ -16,9 +16,13 @@
     display: block;
     color: var(--color-text-grey);
 
+    &:hover,
     &.active {
-      font-family: var(--font-medium);
       color: var(--color-text-default);
     }
+
+    &.active {
+      font-family: var(--font-medium);
+    }
   }
 }

assets/stylesheets/global/table-of-contents.css

@@ -22,12 +22,12 @@
 
     &:hover,
     &.active {
-      font-family: var(--font-medium);
       color: var(--color-text-default);
     }
 
     &.active {
       position: relative;
+      font-family: var(--font-medium);
 
       &:before,
       &:after {

assets/stylesheets/layout/layout-sidebar.css

@@ -48,6 +48,7 @@
 
     & > * {
       max-width: var(--layout-sidebar-content-width);
+      width: 100%;
     }
   }
 }

assets/stylesheets/lesson/index.css

@@ -8,10 +8,6 @@
 }
 
 @block lesson {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
   @element title {
     margin-bottom: calc(var(--grid-gutter));
   }

public/stylesheets/style.css

@@ -922,6 +922,7 @@ input[type="reset"]:focus,
 
 .layout-sidebar__content > * {
   max-width: 732px;
+  width: 100%;
 }
 
 .grid-list {
@@ -1345,12 +1346,12 @@ display: flex;
 
 .table-of-contents__link:hover,
     .table-of-contents__link.active {
-  font-family: 'robotomedium', Helvetica, sans-serif;
   color: #536171;
 }
 
 .table-of-contents__link.active {
   position: relative;
+  font-family: 'robotomedium', Helvetica, sans-serif;
 }
 
 .table-of-contents__link.active:before,
@@ -1410,9 +1411,13 @@ display: flex;
     color: #8091a5;
 }
 
+.sidebar-menu__link:hover,
+    .sidebar-menu__link.active {
+  color: #536171;
+}
+
 .sidebar-menu__link.active {
   font-family: 'robotomedium', Helvetica, sans-serif;
-  color: #536171;
 }
 
 .main-navigation ul {
@@ -1745,18 +1750,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   border-bottom-color: #3c80cf;
 }
 
-.course {
+.course {}
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
 
 .course__title {
     margin-bottom: 22px;
@@ -2025,18 +2019,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   height: auto;
 }
 
-.lesson {
+.lesson {}
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
 
 .lesson__title {
     margin-bottom: 22px;

routes/settings.js

@@ -6,7 +6,11 @@ const router = express.Router()
 /* GET settings page. */
 router.get('/', catchErrors(async function (req, res, next) {
   const cookie = req.cookies.theExampleAppSettings
-  const settings = cookie || { cpa: '', cda: '', space: '' }
+  const settings = cookie || {
+    space: process.env.CF_SPACE,
+    cda: process.env.CF_ACCESS_TOKEN,
+    cpa: process.env.CF_PREVIEW_ACCESS_TOKEN
+  }
   res.render('settings', {
     title: 'Settings',
     settings,

views/course.pug

@@ -21,7 +21,6 @@ block content
         +lesson(lesson, course, nextLesson)
       else
         .course
-          .course__content
           h1.course__title= course.fields.title
           .course__overview
             h3.course__overview-title Overview
@@ -36,5 +35,3 @@ block content
             .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

views/courses.pug

@@ -11,10 +11,10 @@ block content
         .sidebar-menu
           ul.sidebar-menu__list
             li.sidebar-menu__item
-              a.sidebar-menu__link.active(href=`/courses${queryString}`) All courses
+              a.sidebar-menu__link(href=`/courses${queryString}` class=(currentPath.endsWith('/courses') ? 'active' : '')) All courses
             each category in categories
               li.sidebar-menu__item
-                a.sidebar-menu__link(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
+                a.sidebar-menu__link(href=`/courses/categories/${category.fields.slug}${queryString}` class=(currentPath.endsWith(category.fields.slug) ? 'active' : '')) #{category.fields.title}
     section.layout-sidebar__content
       .courses
         h1= title

views/layout.pug

@@ -24,10 +24,10 @@ html
                 .header__controls
                   form(action="" method="get")
                     .group
-                      label(for='api') API type:
+                      label(for='api') API:
                       select(name='api' onChange='this.form.submit()')
-                        option(value='cda' selected=query.api === 'cda') Delivery API
+                        option(value='cda' selected=query.api === 'cda') Content Delivery API
-                        option(value='cpa' selected=query.api === 'cpa') Preview API
+                        option(value='cpa' selected=query.api === 'cpa') Content Preview API
                     .group
                       label(for='locale') Locale:
                       select(name='locale' onChange='this.form.submit()')

views/mixins/_lesson.pug

@@ -4,7 +4,6 @@ include _lessonModuleImage
 
 mixin lesson(lesson, course, nextLesson)
   .lesson
-    .lesson_content
     h1.lesson__title #{lesson.fields.title}
     div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
     if lesson.fields.image
@@ -23,7 +22,6 @@ mixin lesson(lesson, course, nextLesson)
         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/_moduleHighlightedCourse.pug

@@ -12,7 +12,8 @@ mixin moduleHighlightedCourse(module, course)
           .module-higlighted-course__categories
             each category in course.fields.categories
               a.module-higlighted-course__category(href=`/courses/categories/${category.fields.slug}${queryString}`) #{category.fields.title}
-        h2.module-higlighted-course__title= course.fields.title
+        h2.module-higlighted-course__title
+          a(href=`/courses/${course.fields.slug}${queryString}`)= course.fields.title
         .module-higlighted-course__description-wrapper
           p !{helpers.markdown(course.fields.shortDescription)}
         .module-higlighted-course__link-wrapper

views/settings.pug

@@ -28,23 +28,23 @@ block content
         .form-item__help-text The Space ID is a unique identifier for your space.
 
       .form-item
-        label(for="cda") Delivery API key
+        label(for="cda") Content Delivery API - access token
         input(type="text" name="cda" value=settings.cda)
         if 'cda' in errors
           each message in errors.cda
             .form-item__error-message= message
         .form-item__help-text
-          | This key is used to connect to our 
+          | View published content using this API. 
-          a(href='https://www.contentful.com/developers/docs/references/content-delivery-api/' target='_blank' rel='noopener') Delivery API.
+          a(href='https://www.contentful.com/developers/docs/references/content-delivery-api/' target='_blank' rel='noopener') Content Delivery API.
       .form-item
-        label(for="cpa") Preview API key
+        label(for="cpa") Content Preview API - access token
         input(type="text" name="cpa" value=settings.cpa)
         if 'cpa' in errors
           each message in errors.cpa
             .form-item__error-message= message
         .form-item__help-text
-          | This key is used to connect to our 
+          | Preview unpublished content using this API (i.e. content with “Draft” status). 
-          a(href='https://www.contentful.com/developers/docs/references/content-preview-api/' target='_blank' rel='noopener') Preview API.
+          a(href='https://www.contentful.com/developers/docs/references/content-preview-api/' target='_blank' rel='noopener') Content Preview API.
 
       .form-item
         input.cta(type="submit" value="Load settings")