course detail styling and basic lesson module styling

assets/stylesheets/course/index.css

@@ -1 +1,65 @@
 @import './card';
+
+@block course {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @element title {
+    margin-bottom: calc(var(--grid-gutter));
+  }
+
+  @element overview {
+    font-family: var(--font-medium);
+
+    @media (--breakpoint-desktop) {
+      float: right;
+      border-radius: var(--border-radius);
+      box-shadow: var(--card-box-shadow);
+      width: 228px;
+      margin: 0 0 var(--grid-gutter) var(--grid-gutter);
+    }
+  }
+
+  @element overview-title {
+    border-bottom: 1px solid var(--color-sidebar-seperator);
+    padding: calc(var(--grid-gutter) / 2) 0;
+    margin: 0;
+    line-height: 1.31;
+    font-weight: normal;
+    text-transform: uppercase;
+    text-align: center;
+  }
+
+  @element overview-item {
+    display: flex;
+    align-items: center;
+    padding: calc(var(--grid-gutter) / 2);
+    border-bottom: 1px solid var(--color-sidebar-seperator);
+
+    line-height: 1.54;
+    font-size: 0.8em;
+  }
+
+  @element overview-icon {
+    flex: 0 0 auto;
+    width: 24px;
+    height: 24px;
+    padding-right: calc(var(--grid-gutter) / 2);
+  }
+
+  @element overview-value {
+    flex: 1 0 auto;
+  }
+
+  @element overview-cta-wrapper {
+    padding: calc(var(--grid-gutter) / 2) 0;
+    text-align: center;
+  }
+  @element overview-cta {
+    margin: 0;
+  }
+  @element cta {
+    margin-bottom: 0;
+  }
+}

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

@@ -1,38 +1,45 @@
-.table-of-contents {
-  & ul {
+:root {
+  --toc-gap-left: calc(var(--grid-gutter) / 2)
+}
+@block table-of-contents {
+  @element list {
     list-style: none;
-    margin: var(--grid-gutter) 0;
+    margin: 0;
     padding: 0;
-    padding-left: calc(var(--grid-gutter) * 2);
+    padding-left: var(--toc-gap-left);
+  }
 
-    & li {
-      margin: 0 0 var(--grid-gutter);
-      padding: 0;
-    }
+  @element item {
+    margin: 0 0 calc(var(--grid-gutter) / 4);
+    padding: 0;
+    font-size: 0.9em;
+    line-height: 1.8;
+  }
 
-    & a {
-      display: block;
+  @element link {
+    display: block;
+    color: var(--color-text-grey);
 
-      &.active {
-        position: relative;
-        font-weight: bold;
+    &.active {
+      position: relative;
+      font-family: var(--font-medium);
+      color: var(--color-text-default);
 
-        &:before,
-        &:after {
-          position: absolute;
-          top: 0;
-        }
-        &:before {
-          content: '';
-          left: calc(var(--grid-gutter) * 3 * -1);
-          bottom: 0;
-          width: 3px;
-          background: var(--color-course-active);
-        }
-        &:after {
-          content: '👁';
-          left: calc(var(--grid-gutter) * 2 * -1);
-        }
+      &:before,
+      &:after {
+        position: absolute;
+        top: 0;
+      }
+      &:before {
+        content: '';
+        left: calc(var(--toc-gap-left) * 3 * -1);
+        bottom: 0;
+        width: 3px;
+        background: var(--color-course-active);
+      }
+      &:after {
+        content: '👁';
+        left: calc(var(--toc-gap-left) * 2 * -1);
       }
     }
   }

assets/stylesheets/layout/layout-sidebar.css

@@ -18,7 +18,7 @@
   }
 
   @element sidebar-header {
-    padding: 1em var(--grid-gutter);
+    padding: calc(var(--grid-gutter) / 2) var(--grid-gutter);
     border-bottom: 1px solid var(--color-sidebar-seperator);
   }
 
@@ -35,7 +35,10 @@
   }
 
   @element content {
-    padding: var(--grid-gutter) 0;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    padding-top: calc(var(--grid-gutter) / 2);
 
     @media (--breakpoint-desktop) {
       flex: 0 1 auto;

assets/stylesheets/lesson/index.css

@@ -1,8 +1,22 @@
 .lesson-module {
-  margin-top: calc(var(--grid-gutter) * 3);
+  margin-top: var(--grid-gutter);
 
   & img {
     width: 100%;
     height: auto;
   }
 }
+
+@block lesson {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @element title {
+    margin-bottom: calc(var(--grid-gutter));
+  }
+
+  @element cta {
+    margin-bottom: 0;
+  }
+}