fix(breadcrumb): correct positioning of breadcrumb

assets/stylesheets/global/breadcrumb.css

@@ -1,5 +1,6 @@
 @block breadcrumb {
-  margin-bottom: calc(var(--grid-gutter) / 2);
+  margin-bottom: calc(var(--grid-gutter) * 0.25);
+
   & ul {
     display: flex;
     list-style: none;

assets/stylesheets/global/index.css

@@ -26,6 +26,7 @@ body {
     flex: 1 0 auto;
     display: flex;
     align-items: stretch;
+    flex-direction: column;
   }
   @element footer {
     flex: 0 0 auto;

assets/stylesheets/layout/index.css

@@ -1,3 +1,4 @@
 @import 'layout-centered';
+@import 'layout-no-sidebar';
 @import 'layout-sidebar';
 @import 'grid-list';

assets/stylesheets/layout/layout-no-sidebar.css

@@ -0,0 +1,11 @@
+@block layout-no-sidebar {
+  padding: 0 calc(var(--grid-gutter) / 2);
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+
+  @media (--breakpoint-desktop) {
+    padding-left: calc(var(--layout-sidebar-sidebar-width) + var(--grid-gutter));
+  }
+}

assets/stylesheets/layout/layout-sidebar.css

@@ -1,5 +1,5 @@
 @block layout-sidebar {
-  padding: 0 2vw;
+  padding: 0 calc(var(--grid-gutter) / 2);
   max-width: var(--content-max-width);
   margin: 0 auto;
 
@@ -36,9 +36,8 @@
 
   @element content {
     display: flex;
-    align-self: stretch;
-    align-items: stretch;
-    padding-top: calc(var(--grid-gutter) / 2);
+    flex-direction: column;
+    padding-top: calc(var(--grid-gutter) / 4);
 
     @media (--breakpoint-desktop) {
       flex: 0 1 auto;

public/stylesheets/style.css

@@ -849,8 +849,24 @@ input[type="reset"]:focus,
   padding: 0 2vw;
 }
 
+.layout-no-sidebar {
+  padding: 0 11px;
+  max-width: 980px;
+  margin: 0 auto;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+@media (min-width: 700px) {
+
+  .layout-no-sidebar {
+    padding-left: 250px;
+  }
+}
+
 .layout-sidebar {
-  padding: 0 2vw;
+  padding: 0 11px;
   max-width: 980px;
   margin: 0 auto;
 }
@@ -901,12 +917,11 @@ input[type="reset"]:focus,
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -ms-flex-item-align: stretch;
-        align-self: stretch;
-    -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-            align-items: stretch;
-    padding-top: 11px;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding-top: 5.5px;
 }
 
 @media (min-width: 700px) {
@@ -1470,7 +1485,7 @@ display: flex;
 }
 
 .breadcrumb {
-  margin-bottom: 11px;
+  margin-bottom: 5.5px;
 }
 
 .breadcrumb ul {
@@ -1545,6 +1560,10 @@ body {
     -webkit-box-align: stretch;
         -ms-flex-align: stretch;
             align-items: stretch;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
 }
 
 .main__footer {

views/course.pug

@@ -1,8 +1,11 @@
 extends layout
 
+include mixins/_breadcrumb
 include mixins/_lesson
 
 block content
+  .layout-no-sidebar
+    +breadcrumb
   .layout-sidebar
     section.layout-sidebar__sidebar
       .layout-sidebar__sidebar-header

views/courses.pug

@@ -1,8 +1,11 @@
 extends layout
 
+include mixins/_breadcrumb
 include mixins/_courseCard
 
 block content
+  .layout-no-sidebar
+    +breadcrumb
   .layout-sidebar
     section.layout-sidebar__sidebar
       .layout-sidebar__sidebar-header

views/error.pug

@@ -1,7 +1,10 @@
 extends layout
 
+include mixins/_breadcrumb
+
 block content
   .layout-centered
+    +breadcrumb
     .error
       h1 Oops Something went wrong (#{error.status})
       h2 Try:

views/landingPage.pug

@@ -1,18 +1,22 @@
 extends layout
 
+include mixins/_breadcrumb
 include mixins/_moduleCopy
 include mixins/_moduleHeroImage
 include mixins/_moduleHighlightedCourse
 
 block content
   .modules-container
-      each module in landingPage.fields.contentModules
-        case module.sys.contentType.sys.id
-          when 'landingPageModuleCopy'
-            +moduleCopy(module)
+    if currentPath !== '/'
+      .layout-centered
+        +breadcrumb
+    each module in landingPage.fields.contentModules
+      case module.sys.contentType.sys.id
+        when 'landingPageModuleCopy'
+          +moduleCopy(module)
 
-          when 'landingPageModuleHeroImage'
-            +moduleHeroImage(module)
+        when 'landingPageModuleHeroImage'
+          +moduleHeroImage(module)
 
-          when 'landingPageModuleHighlightedCourse'
-            +moduleHighlightedCourse(module, module.fields.course)
+        when 'landingPageModuleHighlightedCourse'
+          +moduleHighlightedCourse(module, module.fields.course)

views/layout.pug

@@ -48,14 +48,6 @@ html
                     a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About
                   li
                     a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
-      if currentPath !== '/'
-        .main__breadcrumb
-          .layout-centered
-            nav.breadcrumb
-              ul
-                each item in breadcrumb
-                  li
-                    a(href=`${item.url}${queryString}`) #{item.label}
       .main__content
         block content
 

views/mixins/_breadcrumb.pug

@@ -0,0 +1,6 @@
+mixin breadcrumb
+  nav.breadcrumb
+    ul
+      each item in breadcrumb
+        li
+          a(href=`${item.url}${queryString}`) #{item.label}

views/settings.pug

@@ -1,7 +1,10 @@
 extends layout
 
+include mixins/_breadcrumb
+
 block content
   .layout-centered-small
+    +breadcrumb
     h1= title
     p To query and get content using the APIs, client applications need to authenticate with both the Space ID and an access token.