Sponsors styling

This commit is contained in:
Rob Davies 2017-05-05 16:42:08 +01:00
parent 257bfdff06
commit b3558166d1
10 changed files with 221 additions and 1 deletions

View file

@ -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 */

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

@ -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%;
}
}

View file

@ -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%;
}
}

View file

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

View file

@ -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';

View file

@ -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 %}

View file

@ -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 %}