2015-01-21 15:32:22 +01:00
|
|
|
/* ==========================================================================
|
2016-03-10 17:13:54 +01:00
|
|
|
SINGLE PAGE/POST
|
2015-01-21 15:32:22 +01:00
|
|
|
========================================================================== */
|
|
|
|
|
2013-05-24 16:25:31 +02:00
|
|
|
#main {
|
2016-03-10 04:19:11 +01:00
|
|
|
@include container;
|
|
|
|
@include clearfix;
|
2016-03-17 20:38:07 +01:00
|
|
|
position: relative;
|
2016-03-10 04:19:11 +01:00
|
|
|
margin-top: 2em;
|
2016-03-15 17:34:14 +01:00
|
|
|
padding-left: 2em;
|
|
|
|
padding-right: 2em;
|
2016-03-21 21:01:19 +01:00
|
|
|
z-index: 0;
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-20 20:20:33 +01:00
|
|
|
@include breakpoint($large) {
|
2016-03-17 20:50:22 +01:00
|
|
|
padding-left: 1em;
|
|
|
|
padding-right: 1em;
|
|
|
|
}
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-18 03:56:01 +01:00
|
|
|
@include breakpoint($x-large) {
|
|
|
|
max-width: $x-large;
|
|
|
|
}
|
2016-03-10 17:13:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.page {
|
2016-03-17 20:38:07 +01:00
|
|
|
@include breakpoint($large) {
|
2016-03-20 20:20:33 +01:00
|
|
|
@include span(10 of 12 last);
|
2016-03-30 05:13:00 +02:00
|
|
|
@include suffix(2 of 12);
|
2016-03-10 04:19:11 +01:00
|
|
|
}
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-18 03:56:01 +01:00
|
|
|
@include breakpoint($x-large) {
|
|
|
|
@include prefix(0.5 of 12);
|
|
|
|
}
|
2016-03-23 21:33:21 +01:00
|
|
|
|
|
|
|
.page__inner-wrap {
|
2016-04-01 03:41:00 +02:00
|
|
|
@include full();
|
|
|
|
|
2016-03-23 21:33:21 +01:00
|
|
|
.page__content,
|
|
|
|
.page__meta,
|
|
|
|
.page__share {
|
|
|
|
@include full();
|
|
|
|
}
|
|
|
|
}
|
2016-03-10 19:06:59 +01:00
|
|
|
}
|
|
|
|
|
2016-03-11 04:29:30 +01:00
|
|
|
.page__title {
|
2016-03-11 21:55:06 +01:00
|
|
|
margin-top: 0;
|
2016-03-24 03:03:27 +01:00
|
|
|
line-height: 1;
|
2016-03-22 02:42:55 +01:00
|
|
|
& + .page__meta {
|
2016-03-30 22:59:48 +02:00
|
|
|
margin-top: -0.5em;
|
2016-03-22 02:42:55 +01:00
|
|
|
}
|
2016-03-11 04:29:30 +01:00
|
|
|
}
|
2016-03-10 19:06:59 +01:00
|
|
|
|
2016-03-24 20:28:29 +01:00
|
|
|
.page__lead {
|
|
|
|
font-family: $sans-serif;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-4;
|
2016-03-24 20:28:29 +01:00
|
|
|
}
|
|
|
|
|
2016-03-11 22:36:41 +01:00
|
|
|
.page__content {
|
2016-03-29 03:48:42 +02:00
|
|
|
p, li, dl {
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: 1em;
|
2016-03-11 22:36:41 +01:00
|
|
|
}
|
2016-03-25 14:11:13 +01:00
|
|
|
|
|
|
|
/* paragraph indents */
|
|
|
|
p {
|
|
|
|
margin: 0 0 $indent-var;
|
|
|
|
|
|
|
|
// sibling indentation
|
|
|
|
@if $paragraph-indent == true {
|
|
|
|
& + p {
|
|
|
|
text-indent: $indent-var;
|
|
|
|
margin-top: -($indent-var);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-03-29 03:48:42 +02:00
|
|
|
|
|
|
|
dt {
|
|
|
|
margin-top: 1em;
|
2016-03-31 04:20:55 +02:00
|
|
|
font-family: $sans-serif;
|
2016-03-29 03:48:42 +02:00
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
dd {
|
|
|
|
margin-left: 1em;
|
2016-03-31 04:20:55 +02:00
|
|
|
font-family: $sans-serif;
|
|
|
|
font-size: $type-size-6;
|
|
|
|
}
|
|
|
|
|
|
|
|
.small {
|
|
|
|
font-size: $type-size-6;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* blockquote citations */
|
|
|
|
blockquote + .small {
|
|
|
|
margin-top: -1.5em;
|
|
|
|
padding-left: 1.25rem;
|
2016-03-29 03:48:42 +02:00
|
|
|
}
|
2016-03-11 22:36:41 +01:00
|
|
|
}
|
2015-01-21 15:32:22 +01:00
|
|
|
|
2016-03-10 19:06:59 +01:00
|
|
|
.page__hero {
|
2016-03-10 04:19:11 +01:00
|
|
|
position: relative;
|
|
|
|
margin-bottom: 2em;
|
|
|
|
@include clearfix;
|
2016-03-24 02:50:22 +01:00
|
|
|
|
|
|
|
&--overlay {
|
|
|
|
position: relative;
|
|
|
|
margin-bottom: 2em;
|
|
|
|
padding: 3em 0;
|
|
|
|
@include clearfix;
|
|
|
|
text-align: center;
|
2016-03-24 02:59:58 +01:00
|
|
|
background-size: cover;
|
|
|
|
background-repeat: no-repeat;
|
2016-03-24 17:04:23 +01:00
|
|
|
background-position: center;
|
2016-03-24 02:50:22 +01:00
|
|
|
|
2016-03-24 20:28:29 +01:00
|
|
|
.wrapper {
|
|
|
|
padding-left: 2em;
|
|
|
|
padding-right: 2em;
|
|
|
|
}
|
|
|
|
|
2016-03-24 02:59:58 +01:00
|
|
|
.page__title,
|
2016-03-24 20:28:29 +01:00
|
|
|
.page__meta,
|
|
|
|
.page__lead,
|
|
|
|
.btn {
|
2016-03-24 02:50:22 +01:00
|
|
|
color: #fff;
|
|
|
|
text-shadow: 1px 1px 4px rgba(#000, 0.5);
|
|
|
|
}
|
2016-03-24 03:03:27 +01:00
|
|
|
|
|
|
|
.page__title {
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-2;
|
2016-03-24 20:28:29 +01:00
|
|
|
|
|
|
|
@include breakpoint($small) {
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-1;
|
2016-03-24 20:28:29 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.page__lead {
|
|
|
|
font-weight: bold;
|
2016-03-24 03:03:27 +01:00
|
|
|
}
|
2016-03-24 02:50:22 +01:00
|
|
|
}
|
2016-03-10 19:06:59 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.page__hero-image {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
-ms-interpolation-mode: bicubic;
|
|
|
|
}
|
|
|
|
|
|
|
|
.page__hero-caption {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
margin: 0 auto;
|
|
|
|
padding: 2px 5px;
|
|
|
|
color: #fff;
|
|
|
|
font-family: $sans-serif;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-7;
|
2016-03-10 19:06:59 +01:00
|
|
|
background: #000;
|
|
|
|
text-align: right;
|
|
|
|
z-index: 5;
|
|
|
|
opacity: 0.5;
|
|
|
|
border-radius: $border-radius 0 $border-radius 0;
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-20 20:20:33 +01:00
|
|
|
@include breakpoint($large) {
|
2016-03-10 19:06:59 +01:00
|
|
|
padding: 5px 10px;
|
|
|
|
}
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-10 19:06:59 +01:00
|
|
|
a {
|
|
|
|
color: #fff;
|
|
|
|
text-decoration: none;
|
2016-03-10 04:19:11 +01:00
|
|
|
}
|
2013-05-24 16:25:31 +02:00
|
|
|
}
|
2015-01-21 15:32:22 +01:00
|
|
|
|
2016-03-11 04:29:30 +01:00
|
|
|
/*
|
|
|
|
Social sharing
|
|
|
|
========================================================================== */
|
2016-02-23 03:44:55 +01:00
|
|
|
|
2016-03-11 04:29:30 +01:00
|
|
|
.page__share {
|
2016-03-11 22:17:41 +01:00
|
|
|
margin-top: 2em;
|
2016-03-11 04:29:30 +01:00
|
|
|
padding-top: 1em;
|
|
|
|
border-top: 1px solid $border-color;
|
2016-04-01 22:02:19 +02:00
|
|
|
|
|
|
|
@include breakpoint(max-width $small) {
|
|
|
|
.btn span {
|
|
|
|
border: 0;
|
|
|
|
clip: rect(0 0 0 0);
|
|
|
|
height: 1px;
|
|
|
|
margin: -1px;
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 0;
|
|
|
|
position: absolute;
|
|
|
|
width: 1px;
|
|
|
|
}
|
|
|
|
}
|
2016-02-23 03:44:55 +01:00
|
|
|
}
|
2016-03-11 04:29:30 +01:00
|
|
|
|
|
|
|
.page__share-title {
|
|
|
|
margin-bottom: 10px;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-6;
|
2016-03-11 04:29:30 +01:00
|
|
|
text-transform: uppercase;
|
2013-09-07 18:57:20 +02:00
|
|
|
}
|
2015-01-21 15:32:22 +01:00
|
|
|
|
2016-03-11 04:29:30 +01:00
|
|
|
|
|
|
|
/*
|
|
|
|
Page meta
|
|
|
|
========================================================================== */
|
|
|
|
|
|
|
|
.page__meta {
|
|
|
|
margin-top: 2em;
|
2016-03-18 20:07:02 +01:00
|
|
|
color: mix(#fff, $gray, 25%);
|
2016-03-11 04:29:30 +01:00
|
|
|
font-family: $sans-serif;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-6;
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-11 04:29:30 +01:00
|
|
|
p {
|
2016-03-20 02:50:18 +01:00
|
|
|
margin-bottom: 0.5em;
|
2016-03-10 04:19:11 +01:00
|
|
|
}
|
2015-01-21 17:21:50 +01:00
|
|
|
}
|
|
|
|
|
2016-03-11 21:55:06 +01:00
|
|
|
.page__meta-title {
|
|
|
|
margin-bottom: 10px;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-6;
|
2016-03-11 21:55:06 +01:00
|
|
|
text-transform: uppercase;
|
2013-05-24 16:25:31 +02:00
|
|
|
}
|
2015-01-21 15:32:22 +01:00
|
|
|
|
2016-03-09 21:54:20 +01:00
|
|
|
|
2016-03-20 02:50:18 +01:00
|
|
|
/*
|
|
|
|
Page taxonomy
|
|
|
|
========================================================================== */
|
|
|
|
|
|
|
|
.page__taxonomy {
|
|
|
|
.sep {
|
|
|
|
display: none;
|
|
|
|
}
|
2016-03-23 16:43:16 +01:00
|
|
|
|
|
|
|
strong {
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
2016-03-20 02:50:18 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.page__taxonomy-item {
|
|
|
|
display: inline-block;
|
|
|
|
margin-right: 5px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
padding: 5px 10px;
|
|
|
|
text-decoration: none;
|
|
|
|
border: 1px solid $light-gray;
|
|
|
|
border-radius: $border-radius;
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-20 02:50:18 +01:00
|
|
|
&:hover {
|
|
|
|
text-decoration: none;
|
2016-03-30 05:13:00 +02:00
|
|
|
color: $gray;
|
2016-03-20 02:50:18 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2016-03-18 03:36:20 +01:00
|
|
|
/*
|
|
|
|
Comments
|
|
|
|
========================================================================== */
|
|
|
|
|
2016-03-23 21:33:21 +01:00
|
|
|
.page__comments {
|
|
|
|
@include full();
|
|
|
|
}
|
|
|
|
|
2016-03-18 03:36:20 +01:00
|
|
|
.page__comments-title {
|
|
|
|
margin-top: 2rem;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
padding-top: 2rem;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-6;
|
2016-03-18 03:36:20 +01:00
|
|
|
border-top: 1px solid $border-color;
|
|
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2016-03-11 21:55:06 +01:00
|
|
|
/*
|
|
|
|
Related
|
|
|
|
========================================================================== */
|
|
|
|
|
|
|
|
.page__related {
|
2016-03-11 22:17:41 +01:00
|
|
|
margin-top: 2em;
|
|
|
|
padding-top: 1em;
|
|
|
|
border-top: 1px solid $border-color;
|
2016-03-18 20:07:02 +01:00
|
|
|
@include clearfix();
|
|
|
|
float: left;
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-20 20:20:33 +01:00
|
|
|
@include breakpoint($large) {
|
2016-03-18 03:56:01 +01:00
|
|
|
@include pre(2 of 12);
|
|
|
|
}
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-18 03:56:01 +01:00
|
|
|
@include breakpoint($x-large) {
|
|
|
|
@include pre(2.5 of 12);
|
2016-03-10 04:19:11 +01:00
|
|
|
}
|
2016-03-21 21:36:24 +01:00
|
|
|
|
2016-03-10 04:19:11 +01:00
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2013-09-07 17:59:02 +02:00
|
|
|
}
|
2016-03-05 04:57:12 +01:00
|
|
|
|
2016-03-11 21:55:06 +01:00
|
|
|
.page__related-title {
|
|
|
|
margin-bottom: 10px;
|
2016-03-30 22:59:48 +02:00
|
|
|
font-size: $type-size-6;
|
2016-03-11 21:55:06 +01:00
|
|
|
text-transform: uppercase;
|
2016-03-09 21:11:34 +01:00
|
|
|
}
|