Theming for schedule

web/themes/dcb2017/css/style.css

@@ -10,6 +10,9 @@ a:visited {
   a:visited:focus {
     color: black; }
 
+h1, h2, h3, h4 {
+  font-weight: 600; }
+
 .region-header {
   margin: 0 auto;
   max-width: 72rem;
@@ -42,6 +45,9 @@ a:visited {
   max-width: 72rem;
   padding: 1rem; }
 
+.region-content-top {
+  overflow: hidden; }
+
 .region-footer {
   margin: 0 auto;
   max-width: 72rem;
@@ -100,15 +106,96 @@ nav.menu--main {
   max-width: 30rem;
   padding: 3rem 1rem;
   text-align: center; }
-  @media screen and (min-width: 37.5rem) {
+  @media screen and (min-width: 56.25rem) {
+    #block-homepagehero {
+      padding: 6rem 1rem; } }
+  @media screen and (min-width: 75rem) {
     #block-homepagehero {
       padding: 10rem 1rem; } }
   #block-homepagehero img {
     max-width: 100%; }
 
+#block-dcbschedule {
+  overflow: hidden;
+  position: relative; }
+  #block-dcbschedule .field {
+    box-sizing: border-box;
+    padding: 2rem 2rem 2rem;
+    position: relative;
+    text-align: center;
+    text-transform: uppercase; }
+    @media screen and (min-width: 56.25rem) {
+      #block-dcbschedule .field {
+        float: left;
+        padding: 3rem 3rem 3rem;
+        position: static;
+        width: 33.333%; } }
+    @media screen and (min-width: 75rem) {
+      #block-dcbschedule .field {
+        padding: 5rem 4rem 4rem; } }
+    #block-dcbschedule .field:before {
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: -1;
+      background-position: center;
+      background-size: cover; }
+      @media screen and (min-width: 56.25rem) {
+        #block-dcbschedule .field:before {
+          width: 33.333%; } }
+    #block-dcbschedule .field.field--name-field-cxo-text:before {
+      background-image: url("../images/cxo.jpg"); }
+      @media screen and (min-width: 56.25rem) {
+        #block-dcbschedule .field.field--name-field-cxo-text:before {
+          left: 0; } }
+    #block-dcbschedule .field.field--name-field-dev-text:before {
+      background-image: url("../images/dev.jpg"); }
+      @media screen and (min-width: 56.25rem) {
+        #block-dcbschedule .field.field--name-field-dev-text:before {
+          left: 33.333%; } }
+    #block-dcbschedule .field.field--name-field-sprint-text:before {
+      background-image: url("../images/sprint.jpg"); }
+      @media screen and (min-width: 56.25rem) {
+        #block-dcbschedule .field.field--name-field-sprint-text:before {
+          left: 66.666%; } }
+  #block-dcbschedule p, #block-dcbschedule h2 {
+    margin: 0; }
+  #block-dcbschedule h2 {
+    font-size: 5rem;
+    font-weight: 700;
+    line-height: 1; }
+    @media screen and (min-width: 56.25rem) {
+      #block-dcbschedule h2 {
+        font-size: 3rem; } }
+    @media screen and (min-width: 75rem) {
+      #block-dcbschedule h2 {
+        font-size: 5rem; } }
+  #block-dcbschedule .schedule-day {
+    font-size: 2.5rem;
+    font-weight: bold; }
+    @media screen and (min-width: 56.25rem) {
+      #block-dcbschedule .schedule-day {
+        font-size: 2rem; } }
+    @media screen and (min-width: 75rem) {
+      #block-dcbschedule .schedule-day {
+        font-size: 2.5rem; } }
+  #block-dcbschedule .schedule-location {
+    font-size: 1.6rem;
+    font-weight: 600;
+    padding-top: 2rem; }
+    @media screen and (min-width: 56.25rem) {
+      #block-dcbschedule .schedule-location {
+        font-size: 1.2rem; } }
+    @media screen and (min-width: 75rem) {
+      #block-dcbschedule .schedule-location {
+        font-size: 1.6rem; } }
+
 .form-item > label {
   display: block;
-  font-weight: bold; }
+  font-weight: 600; }
   .form-item > label.option {
     display: inline;
     font-weight: normal; }

web/themes/dcb2017/dcb2017.info.yml

@@ -11,5 +11,6 @@ libraries:
 regions:
   header: Header
   featured: Featured
+  content_top: 'Content top'
   content: Content
   footer: Footer

web/themes/dcb2017/dcb2017.libraries.yml

@@ -6,4 +6,4 @@ global-styling:
 fonts:
   css:
     theme:
-      //fonts.googleapis.com/css?family=Poppins: { type: external }
+      //fonts.googleapis.com/css?family=Poppins:400,600,700: { type: external }

web/themes/dcb2017/sass/_global.scss

@@ -13,3 +13,6 @@ a:visited {
   }
 }
 
+h1, h2, h3, h4 {
+  font-weight: 600;
+}

web/themes/dcb2017/sass/base/_mixins.scss

@@ -5,6 +5,20 @@
   }
 }
 
+// Desktop size breakpoint 900px.
+@mixin media-large {
+  @media screen and (min-width: 56.25rem) {
+    @content;
+  }
+}
+
+// Wide Desktop size breakpoint 1200px.
+@mixin media-wide {
+  @media screen and (min-width: 75rem) {
+    @content;
+  }
+}
+
 @mixin button {
   background: $dcb-blue;
   border: 0;

web/themes/dcb2017/sass/components/_blocks.scss

@@ -24,6 +24,13 @@
   text-align: center;
 
   @include media-tablet {
+  }
+
+  @include media-large {
+    padding: 6rem 1rem;
+  }
+
+  @include media-wide {
     padding: 10rem 1rem;
   }
 
@@ -31,3 +38,110 @@
     max-width: 100%;
   }
 }
+
+#block-dcbschedule {
+  overflow: hidden;
+  position: relative;
+
+  .field {
+    box-sizing: border-box;
+    padding: 2rem 2rem 2rem;
+    position: relative;
+    text-align: center;
+    text-transform: uppercase;
+
+    @include media-large {
+      float: left;
+      padding: 3rem 3rem 3rem;
+      position: static;
+      width: 33.333%;
+    }
+
+    @include media-wide {
+      padding: 5rem 4rem 4rem;
+    }
+
+    &:before {
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: -1;
+      background-position: center;
+      background-size: cover;
+
+      @include media-large {
+        width: 33.333%;
+      }
+    }
+
+    &.field--name-field-cxo-text:before {
+      background-image: url('../images/cxo.jpg');
+
+      @include media-large {
+        left: 0;
+      }
+    }
+    &.field--name-field-dev-text:before {
+      background-image: url('../images/dev.jpg');
+
+      @include media-large {
+        left: 33.333%;
+      }
+    }
+    &.field--name-field-sprint-text:before {
+      background-image: url('../images/sprint.jpg');
+
+      @include media-large {
+        left: 66.666%;
+      }
+    }
+  }
+
+  p, h2 {
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 5rem;
+    font-weight: 700;
+    line-height: 1;
+
+    @include media-large {
+      font-size: 3rem;
+    }
+
+    @include media-wide {
+      font-size: 5rem;
+    }
+  }
+
+  .schedule-day {
+    font-size: 2.5rem;
+    font-weight: bold;
+
+    @include media-large {
+      font-size: 2rem;
+    }
+
+    @include media-wide {
+      font-size: 2.5rem;
+    }
+  }
+
+  .schedule-location {
+    font-size: 1.6rem;
+    font-weight: 600;
+    padding-top: 2rem;
+
+    @include media-large {
+      font-size: 1.2rem;
+    }
+
+    @include media-wide {
+      font-size: 1.6rem;
+    }
+  }
+}

web/themes/dcb2017/sass/components/_forms.scss

@@ -1,6 +1,6 @@
 .form-item > label {
   display: block;
-  font-weight: bold;
+  font-weight: 600;
 
   &.option {
     display: inline;

web/themes/dcb2017/sass/layout/_content-top.scss

@@ -0,0 +1,3 @@
+.region-content-top {
+  overflow: hidden;
+}

web/themes/dcb2017/sass/style.scss

@@ -8,6 +8,7 @@
 @import 'layout/header';
 @import 'layout/featured';
 @import 'layout/content';
+@import 'layout/content-top';
 @import 'layout/footer';
 
 @import 'components/menus';

web/themes/dcb2017/templates/layout/page.html.twig

@@ -57,6 +57,10 @@
   <main role="main">
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
+    <div class="layout-content-top">
+      {{ page.content_top }}
+    </div>{# /.layout-content-top #}
+
     <div class="layout-content">
       {{ page.content }}
     </div>{# /.layout-content #}