split up layout and global file and clean up markup

views/about.pug

@@ -1,6 +1,6 @@
 extends layout
 
 block content
-  .wrapper
+  .layout-centered
     h1= title
     p Welcome to #{title}

views/categories.pug

@@ -1,6 +1,6 @@
 extends layout
 
 block content
-  .wrapper
+  .layout-centered
     h1= title
     p Welcome to #{title}

views/course.pug

@@ -3,9 +3,10 @@ extends layout
 include mixins/_lesson
 
 block content
-  .wrapper.wrapper-with-sidebar
-    section.wrapper-with-sidebar__sidebar
-      h2 Table of contents
+  .layout-sidebar
+    section.layout-sidebar__sidebar
+      .layout-sidebar__sidebar-header
+        h2.layout-sidebar__sidebar-title Table of contents
       .table-of-contents
         ul
           li
@@ -14,7 +15,7 @@ block content
             if l.fields
               li
                 a(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
-    section.wrapper-with-sidebar__content
+    section.layout-sidebar__content
       h1= course.fields.title
 
       if lesson

views/courses.pug

@@ -3,18 +3,21 @@ extends layout
 include mixins/_courseCard
 
 block content
-  .wrapper.wrapper-with-sidebar
-    section.wrapper-with-sidebar__sidebar
-      h2 Categories
-      .sidebar-menu
-        ul
-          li
-            a.active(href=`/courses`) All courses
-          each category in categories
+  .layout-sidebar
+    section.layout-sidebar__sidebar
+      .layout-sidebar__sidebar-header
+        h2.layout-sidebar__sidebar-title Categories
+      .layout-sidebar__sidebar-content
+        .sidebar-menu
+          ul
             li
-              a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
-    section.wrapper-with-sidebar__content
+              a.active(href=`/courses`) All courses
+            each category in categories
+              li
+                a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
+    section.layout-sidebar__content
       h1= title
       .courses.grid-list-small
         each course in courses
-          +courseCard(course)
+          .grid-list-small__item
+            +courseCard(course)

views/error.pug

@@ -1,7 +1,7 @@
 extends layout
 
 block content
-  .wrapper
+  .layout-centered
     h1= message
     h2= error.status
     pre #{error.stack}

views/layout.pug

@@ -8,7 +8,7 @@ html
       #main__header
         header.header
           .header__upper-wrapper
-            .header__upper.wrapper
+            .header__upper.layout-centered
               .header__title
                 img(src='/images/icon-info.svg')
                 span Example Application
@@ -26,7 +26,7 @@ html
                       option(value='en-US' selected=query.locale === 'en-US') English
                       option(value='de-DE' selected=query.locale === 'de-DE') German
           .header__lower-wrapper
-            .header__lower.wrapper
+            .header__lower.layout-centered
               .header__logo
                 a.header__logo-link(href='/')
                   img(src='/images/logo.svg' alt='Contentful Example App')
@@ -46,7 +46,7 @@ html
         block content
 
       #main__footer
-        .wrapper
+        .layout-centered
           footer.footer
             .footer__upper
               nav.footer__navigation.main-navigation

views/settings.pug

@@ -1,7 +1,7 @@
 extends layout
 
 block content
-  .wrapper
+  .layout-centered
     h1= title
     p To query and get content using the APIs, client apllications need to authenticate iwth both the Space ID and an access token.
 

views/sitemap.pug

@@ -1,6 +1,6 @@
 extends layout
 
 block content
-  .wrapper
+  .layout-centered
     h1= title
     p Welcome to #{title}