Sponsors styling

web/themes/dcb2017/css/style.css

@@ -13,6 +13,9 @@ a:visited {
 h1, h2, h3, h4 {
   font-weight: 600; }
 
+h1, h2 {
+  text-transform: uppercase; }
+
 .region-header {
   margin: 0 auto;
   max-width: 72rem;
@@ -50,10 +53,46 @@ h1, h2, h3, h4 {
   margin: 0 auto;
   max-width: 72rem;
   padding: 1rem; }
+  .region-content .block-views {
+    margin-bottom: 5em; }
 
 .region-content-top {
   overflow: hidden; }
 
+.region-content-bottom {
+  margin: 2em 0 4em;
+  text-align: center; }
+  .region-content-bottom h2 {
+    font-size: 2em;
+    font-weight: 700; }
+    @media screen and (min-width: 37.5rem) {
+      .region-content-bottom h2 {
+        font-size: 3em; } }
+    @media screen and (min-width: 56.25rem) {
+      .region-content-bottom h2 {
+        font-size: 4em; } }
+    .region-content-bottom h2 span {
+      color: #44efb9; }
+  .region-content-bottom .block {
+    margin: 2em 1em; }
+  .region-content-bottom .sponsor-link a {
+    background: #b33ee9;
+    border: 0;
+    color: white;
+    font-size: 1rem;
+    font-weight: 600;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color: #44efb9; }
+    .region-content-bottom .sponsor-link a:hover, .region-content-bottom .sponsor-link a:focus {
+      background: #44efb9; }
+    .region-content-bottom .sponsor-link a:hover, .region-content-bottom .sponsor-link a:focus {
+      background: #ec16a8; }
+  .region-content-bottom img {
+    height: auto;
+    max-width: 100%; }
+
 .region-footer {
   margin: 0 auto;
   max-width: 72rem;
@@ -253,4 +292,50 @@ nav.menu--main {
 .form-email {
   max-width: 95%; }
 
+.views-view-table td {
+  display: block;
+  vertical-align: top; }
+  .views-view-table td.views-field-field-logo {
+    padding: 1em 0;
+    text-align: center; }
+    @media screen and (min-width: 56.25rem) {
+      .views-view-table td.views-field-field-logo {
+        padding: 2em 2em 2em 0; } }
+  @media screen and (min-width: 56.25rem) {
+    .views-view-table td {
+      display: table-cell; } }
+
+.views-view-table .views-field-body a {
+  background: #b33ee9;
+  border: 0;
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  text-transform: uppercase; }
+  .views-view-table .views-field-body a:hover, .views-view-table .views-field-body a:focus {
+    background: #44efb9; }
+
+.view-silver-sponsors {
+  overflow: hidden;
+  text-align: center; }
+  .view-silver-sponsors .sponsor {
+    box-sizing: border-box;
+    float: left;
+    padding: 1em;
+    width: 100%; }
+    @media screen and (min-width: 37.5rem) {
+      .view-silver-sponsors .sponsor {
+        width: 50%; } }
+    @media screen and (min-width: 56.25rem) {
+      .view-silver-sponsors .sponsor {
+        width: 33.333%; } }
+    @media screen and (min-width: 75rem) {
+      .view-silver-sponsors .sponsor {
+        width: 20%; } }
+  .view-silver-sponsors img {
+    height: auto;
+    max-width: 100%; }
+
 /*# sourceMappingURL=style.css.map */

web/themes/dcb2017/dcb2017.info.yml

@@ -13,4 +13,5 @@ regions:
   featured: Featured
   content_top: 'Content top'
   content: Content
+  content_bottom: 'Content bottom'
   footer: Footer

web/themes/dcb2017/sass/_global.scss

@@ -16,3 +16,7 @@ a:visited {
 h1, h2, h3, h4 {
   font-weight: 600;
 }
+
+h1, h2 {
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,52 @@
+.views-view-table {
+  td {
+    display: block;
+    vertical-align: top;
+
+    &.views-field-field-logo {
+      padding: 1em 0;
+      text-align: center;
+
+      @include media-large {
+        padding: 2em 2em 2em 0;
+      }
+    }
+
+    @include media-large {
+      display: table-cell;
+    }
+  }
+
+  .views-field-body a {
+    @include button;
+  }
+}
+
+.view-silver-sponsors {
+  overflow: hidden;
+  text-align: center;
+
+  .sponsor {
+    box-sizing: border-box;
+    float: left;
+    padding: 1em;
+    width: 100%;
+
+    @include media-tablet {
+      width: 50%;
+    }
+
+    @include media-large {
+      width: 33.333%;
+    }
+
+    @include media-wide {
+      width: 20%;
+    }
+  }
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+}

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

@@ -0,0 +1,39 @@
+.region-content-bottom {
+  margin: 2em 0 4em;
+  text-align: center;
+
+  h2 {
+    font-size: 2em;
+    font-weight: 700;
+
+    @include media-tablet {
+      font-size: 3em;
+    }
+    @include media-large {
+      font-size: 4em;
+    }
+
+    span {
+      color: $dcb-green;
+    }
+  }
+
+  .block {
+    margin: 2em 1em;
+  }
+
+  .sponsor-link a {
+    @include button;
+    background-color: $dcb-green;
+
+    &:hover,
+    &:focus {
+      background: $dcb-purple;
+    }
+  }
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+}

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

@@ -2,4 +2,8 @@
   margin: 0 auto;
   max-width: 72rem;
   padding: 1rem;
+
+  .block-views {
+    margin-bottom: 5em;
+  }
 }

web/themes/dcb2017/sass/style.scss

@@ -9,8 +9,10 @@
 @import 'layout/featured';
 @import 'layout/content';
 @import 'layout/content-top';
+@import 'layout/content-bottom';
 @import 'layout/footer';
 
 @import 'components/menus';
 @import 'components/blocks';
 @import 'components/forms';
+@import 'components/views';

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

@@ -65,6 +65,9 @@
       {{ page.content }}
     </div>{# /.layout-content #}
 
+    <div class="layout-content-bottom">
+      {{ page.content_bottom }}
+    </div>{# /.layout-content-bottom #}
   </main>
 
   {% if page.footer %}

web/themes/dcb2017/templates/layout/region--content-bottom.html.twig

@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region-' ~ region|clean_class,
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <h2>Our <span>Sponsors</span></h2>
+    {{ content }}
+    <div class="sponsor-link">
+      <a href="/sponsors">{{ 'See all sponsors'|t }}</a>
+    </div>
+  </div>
+
+{% endif %}