Sponsors styling
This commit is contained in:
parent
257bfdff06
commit
b3558166d1
|
@ -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
|
@ -13,4 +13,5 @@ regions:
|
|||
featured: Featured
|
||||
content_top: 'Content top'
|
||||
content: Content
|
||||
content_bottom: 'Content bottom'
|
||||
footer: Footer
|
||||
|
|
|
@ -16,3 +16,7 @@ a:visited {
|
|||
h1, h2, h3, h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
52
web/themes/dcb2017/sass/components/_views.scss
Normal file
52
web/themes/dcb2017/sass/components/_views.scss
Normal 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%;
|
||||
}
|
||||
}
|
39
web/themes/dcb2017/sass/layout/_content-bottom.scss
Normal file
39
web/themes/dcb2017/sass/layout/_content-bottom.scss
Normal 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%;
|
||||
}
|
||||
}
|
|
@ -2,4 +2,8 @@
|
|||
margin: 0 auto;
|
||||
max-width: 72rem;
|
||||
padding: 1rem;
|
||||
|
||||
.block-views {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
Reference in a new issue