split up layout and global file and clean up markup

assets/stylesheets/course/index.css

@@ -1 +1 @@
-@include './card'
+@import './card';

assets/stylesheets/global/fonts.css

@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'roboto';
+    src: url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-bolditalic-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'robotomedium';
+    src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'robotomedium';
+    src: url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
+         url('/fonts/roboto-mediumitalic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}

assets/stylesheets/global/index.css

@@ -1,7 +1,10 @@
-@import './layout';
 @import './header';
 @import './footer';
 
+@import './table-of-contents';
+@import './sidebar-menu';
+@import './main-navigation';
+
 body {
   background-color: var(--color-bg-default);
   color: var(--color-text-default);
@@ -24,105 +27,3 @@ body {
 #main__footer {
   flex: 0 0 auto;
 }
-
-.table-of-contents {
-  & ul {
-    list-style: none;
-    margin: var(--grid-gutter) 0;
-    padding: 0;
-    padding-left: calc(var(--grid-gutter) * 2);
-
-    & li {
-      margin: 0 0 var(--grid-gutter);
-      padding: 0;
-    }
-
-    & a {
-      display: block;
-
-      &.active {
-        position: relative;
-        font-weight: bold;
-
-        &: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);
-        }
-      }
-    }
-  }
-}
-
-.sidebar-menu {
-  & ul {
-    list-style: none;
-    margin: var(--grid-gutter) 0;
-    padding: 0;
-
-    & li {
-      margin: 0 0 var(--grid-gutter);
-      padding: 0;
-    }
-
-    & a {
-      display: block;
-
-      &.active {
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-@block main-navigation {
-    & ul {
-      display: flex;
-      list-style: none;
-      flex-wrap: wrap;
-      justify-content: center;
-      margin: 0;
-      padding: 0;
-
-      @media (--breakpoint-desktop) {
-        justify-content: flex-end;
-      }
-
-      & li {
-        margin: 0;
-
-        & + li {
-          margin-left: calc(var(--grid-gutter) / 4);
-        }
-
-        & a {
-          display: block;
-          text-transform: uppercase;
-          font-weight: bold;
-          padding: 0.7em 1em;
-          color: var(--color-text-grey);
-          border-radius: var(--border-radius);
-
-          &.active,
-          &:hover {
-            background: var(--color-bg-grey);
-          }
-
-          &.active {
-            color: var(--color-text-default);
-          }
-        }
-      }
-    }
-  }

assets/stylesheets/global/layout.css

@@ -1,65 +0,0 @@
-.wrapper {
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-  padding: 0 2vw;
-}
-
-@block wrapper-with-sidebar {
-  @media (--breakpoint-desktop) {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  @element sidebar {
-    @media (--breakpoint-desktop) {
-      flex: 0 0 220px;
-      padding: var(--grid-gutter);
-      border-radius: 7px;
-      box-shadow: var(--card-box-shadow);
-
-      & > h2 {
-        margin-bottom: calc(var(--grid-gutter) * 3);
-      }
-    }
-  }
-
-  @element content {
-    padding: var(--grid-gutter) 0;
-
-    @media (--breakpoint-desktop) {
-      flex: 1 1 auto;
-      margin-left: var(--grid-gutter);
-      overflow: hidden;
-    }
-  }
-}
-
-.grid-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 0 calc(var(--grid-gutter) / 2 * -1);
-
-  & > * {
-    box-sizing: border-box;
-    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
-    flex: 0 0 calc(50% - var(--grid-gutter));
-
-    @media (--breakpoint-desktop) {
-      flex: 0 0 calc(33% - var(--grid-gutter));
-    }
-  }
-}
-
-.grid-list-small {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 0 calc(var(--grid-gutter) / 2 * -1);
-
-  & > * {
-    box-sizing: border-box;
-    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
-    flex: 0 0 calc(50% - var(--grid-gutter));
-  }
-}

assets/stylesheets/global/main-navigation.css

@@ -0,0 +1,40 @@
+@block main-navigation {
+    & ul {
+      display: flex;
+      list-style: none;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+
+      @media (--breakpoint-desktop) {
+        justify-content: flex-end;
+      }
+
+      & li {
+        margin: 0;
+
+        & + li {
+          margin-left: calc(var(--grid-gutter) / 4);
+        }
+
+        & a {
+          display: block;
+          text-transform: uppercase;
+          font-weight: bold;
+          padding: 0.7em 1em;
+          color: var(--color-text-grey);
+          border-radius: var(--border-radius);
+
+          &.active,
+          &:hover {
+            background: var(--color-bg-grey);
+          }
+
+          &.active {
+            color: var(--color-text-default);
+          }
+        }
+      }
+    }
+  }

assets/stylesheets/global/sidebar-menu.css

@@ -0,0 +1,20 @@
+.sidebar-menu {
+  & ul {
+    list-style: none;
+    margin: var(--grid-gutter) 0;
+    padding: 0;
+
+    & li {
+      margin: 0 0 var(--grid-gutter);
+      padding: 0;
+    }
+
+    & a {
+      display: block;
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+.table-of-contents {
+  & ul {
+    list-style: none;
+    margin: var(--grid-gutter) 0;
+    padding: 0;
+    padding-left: calc(var(--grid-gutter) * 2);
+
+    & li {
+      margin: 0 0 var(--grid-gutter);
+      padding: 0;
+    }
+
+    & a {
+      display: block;
+
+      &.active {
+        position: relative;
+        font-weight: bold;
+
+        &: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);
+        }
+      }
+    }
+  }
+}

assets/stylesheets/layout/grid-lists.css

@@ -0,0 +1,29 @@
+.grid-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 calc(var(--grid-gutter) / 2 * -1);
+
+  & > * {
+    box-sizing: border-box;
+    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
+    flex: 0 0 calc(50% - var(--grid-gutter));
+
+    @media (--breakpoint-desktop) {
+      flex: 0 0 calc(33% - var(--grid-gutter));
+    }
+  }
+}
+
+.grid-list-small {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 calc(var(--grid-gutter) / 2 * -1);
+
+  & > * {
+    box-sizing: border-box;
+    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
+    flex: 0 0 calc(50% - var(--grid-gutter));
+  }
+}

assets/stylesheets/layout/index.css

@@ -0,0 +1,3 @@
+@import 'layout-centered';
+@import 'layout-sidebar';
+@import 'grid-lists';

assets/stylesheets/layout/layout-centered.css

@@ -0,0 +1,5 @@
+@block layout-centered {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: 0 2vw;
+}

assets/stylesheets/layout/layout-sidebar.css

@@ -0,0 +1,43 @@
+@block layout-sidebar {
+  padding: 0 2vw;
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  @element sidebar {
+    @media (--breakpoint-desktop) {
+      flex: 0 0 220px;
+      border-radius: 7px;
+      box-shadow: var(--card-box-shadow);
+    }
+  }
+
+  @element sidebar-header {
+    padding: var(--grid-gutter);
+    border-bottom: 1px solid var(--color-sidebar-seperator);
+  }
+
+  @element sidebar-title {
+    font-size: 1.25em;
+    margin: 0;
+  }
+
+  @element sidebar-content {
+    background: var(--color-sidebar-bg);
+    padding: var(--grid-gutter);
+  }
+
+  @element content {
+    padding: var(--grid-gutter) 0;
+
+    @media (--breakpoint-desktop) {
+      flex: 1 1 auto;
+      margin-left: var(--grid-gutter);
+      overflow: hidden;
+    }
+  }
+}

assets/stylesheets/style.css

@@ -4,6 +4,8 @@
 
 @import './base';
 
+@import './layout';
+
 @import './global';
 
 @import './hljs-github';

assets/stylesheets/variables.css

@@ -14,7 +14,7 @@
   --color-palette-blue-medium: #3c80cf;
   --color-palette-blue-dark: #3072be;
 
-  --color-text-default: #2a303a;
+  --color-text-default: #2a3039;
   --color-text-grey: #8091a5;
   --color-text-dark-bg: #fff;
   --color-text-dark-bg-grey: #a9b9c0;
@@ -26,6 +26,7 @@
   --color-bg-separator: #e5ebed;
 
   --color-sidebar-bg: #f7f9fa;
+  --color-sidebar-seperator: #eeeeee;
 
   --color-course-active: #536171;
 

public/stylesheets/style.css

@@ -755,15 +755,21 @@ input[type="reset"]:focus,
   margin-top: -22px;
 }
 
-.wrapper {
+.layout-centered {
   max-width: 980px;
   margin: 0 auto;
   padding: 0 2vw;
 }
 
+.layout-sidebar {
+  padding: 0 2vw;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
 @media (min-width: 700px) {
 
-  .wrapper-with-sidebar {
+  .layout-sidebar {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -775,28 +781,38 @@ input[type="reset"]:focus,
 
 @media (min-width: 700px) {
 
-  .wrapper-with-sidebar__sidebar {
+  .layout-sidebar__sidebar {
     -webkit-box-flex: 0;
         -ms-flex: 0 0 220px;
             flex: 0 0 220px;
-    padding: 22px;
     border-radius: 7px;
     -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
             box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
   }
-
-  .wrapper-with-sidebar__sidebar > h2 {
-    margin-bottom: 66px;
-  }
 }
 
-.wrapper-with-sidebar__content {
+.layout-sidebar__sidebar-header {
+    padding: 22px;
+    border-bottom: 1px solid #eeeeee;
+}
+
+.layout-sidebar__sidebar-title {
+    font-size: 1.25em;
+    margin: 0;
+}
+
+.layout-sidebar__sidebar-content {
+    background: #f7f9fa;
+    padding: 22px;
+}
+
+.layout-sidebar__content {
     padding: 22px 0;
 }
 
 @media (min-width: 700px) {
 
-  .wrapper-with-sidebar__content {
+  .layout-sidebar__content {
     -webkit-box-flex: 1;
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
@@ -1149,44 +1165,6 @@ input[type="reset"]:focus,
   height: auto;
 }
 
-body {
-  background-color: #fff;
-  color: #2a303a;
-  font-family: 'roboto', Helvetica, sans-serif;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5em;
-}
-
-#main {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  min-height: 100vh;
-}
-
-#main__header {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-}
-
-#main__content {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
-}
-
-#main__footer {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-}
-
 .table-of-contents ul {
   list-style: none;
   margin: 22px 0;
@@ -1292,7 +1270,45 @@ body {
 }
 
 .main-navigation ul li a.active {
-  color: #2a303a;
+  color: #2a3039;
+}
+
+body {
+  background-color: #fff;
+  color: #2a3039;
+  font-family: 'roboto', Helvetica, sans-serif;
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5em;
+}
+
+#main {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 100vh;
+}
+
+#main__header {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+
+#main__content {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
+
+#main__footer {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
 }
 
 /*
@@ -1395,7 +1411,73 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   font-weight: bold;
 }
 
-@include './card';
+.course-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 30vh;
+  padding: 22px;
+
+  border-radius: 3px;
+  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
+          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
+}
+
+.course-card > * + * {
+  margin-top: 22px;
+}
+
+.course-card__categories {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 1.5em;
+            flex: 0 0 1.5em;
+}
+
+.course-card__category {
+    display: inline-block;
+    margin-right: 22px;
+    color: #8091a5;
+    font-size: 0.75em;
+    letter-spacing: 2px;
+}
+
+.course-card__title {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+    margin-bottom: 0;
+}
+
+.course-card__description-wrapper {
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+            flex: 1 1 auto;
+}
+
+.course-card__description-wrapper p {
+  margin: 0;
+}
+
+.course-card__link-wrapper {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+}
+
+.course-card__link {
+    display: inline-block;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid #5c9fef;
+    text-transform: uppercase;
+    color: #5c9fef;
+    font-size: 0.75em;
+    line-height: 2.17;
+    letter-spacing: 2px;
+}
 
 .module-hero-image {}
 

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
+  .layout-sidebar
-    section.wrapper-with-sidebar__sidebar
+    section.layout-sidebar__sidebar
-      h2 Table of contents
+      .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,9 +3,11 @@ extends layout
 include mixins/_courseCard
 
 block content
-  .wrapper.wrapper-with-sidebar
+  .layout-sidebar
-    section.wrapper-with-sidebar__sidebar
+    section.layout-sidebar__sidebar
-      h2 Categories
+      .layout-sidebar__sidebar-header
+        h2.layout-sidebar__sidebar-title Categories
+      .layout-sidebar__sidebar-content
         .sidebar-menu
           ul
             li
@@ -13,8 +15,9 @@ block content
             each category in categories
               li
                 a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
-    section.wrapper-with-sidebar__content
+    section.layout-sidebar__content
       h1= title
       .courses.grid-list-small
         each course in courses
+          .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}