Your IP : 216.73.216.71

Current Path : /home/b/e/c/bechata/mp/73eb7/
Upload File :
Current File : /home/b/e/c/bechata/mp/73eb7/site.tar

secondary/_widgets.scss000066600000002764152367041560011263 0ustar00.widget {
	margin: 0 0 #{$size__spacing-unit};

	.widget-title {
 		font-size: $font__size-lg;
 	}

	/* Make sure select elements fit in widgets. */
	select {
		max-width: 100%;
	}

	a {
		color: $color__link;

		&:hover {
			color: $color__link-hover;
		}
	}
}

.widget_archive,
.widget_categories,
.widget_meta,
.widget_nav_menu,
.widget_pages,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss {

	ul {
		padding: 0;
		list-style: none;

		li {
			color: $color__text-light;
			@include font-family( $font__heading );
			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
			font-weight: 700;
			line-height: $font__line-height-heading;
			margin-top: #{0.5 * $size__spacing-unit};
			margin-bottom: #{0.5 * $size__spacing-unit};
		}

		@include nestedSubMenuPadding();
	}
}

.widget_tag_cloud {

	.tagcloud {
		@include font-family( $font__heading );
		font-weight: 700;
	}
}


.widget_search {

	.search-field {
		width: 100%;

		@include media(mobile) {
			width: auto;
		}
	}

	.search-submit {
		display: block;
		margin-top: $size__spacing-unit;
	}
}

.widget_calendar .calendar_wrap {
	text-align: center;

	table td,
	table th {
		border: none;
	}

	a {
		text-decoration: underline;
	}

	.wp-calendar-table {
		margin-bottom: 0;
	}

	.wp-calendar-nav {
		margin: 0 0 $size__spacing-unit;
		display: table;
		width: 100%;
		@include font-family( $font__heading );

		span {
			display: table-cell;
			padding: 0.5em;
		}
	}

	.wp-calendar-nav-prev,
	.wp-calendar-nav-next {
		width: 40%;
	}
}primary/_posts-and-pages.scss000066600000011507152367041560012311 0ustar00.sticky {
	display: block;
}

.sticky-post {
	background: $color__background-button;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	padding: .25rem;
	position: absolute;
	text-transform: uppercase;
	top: -$size__spacing-unit;
	z-index: 1;
}

.updated:not(.published) {
	display: none;
}

.page-links {
	clear: both;
	margin: 0 0 calc(1.5 * #{$size__spacing-unit});
}

.entry {

	margin-top: calc(6 * #{$size__spacing-unit});

	&:first-of-type {
		margin-top: 0;
	}

	.entry-header {

		margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
		position: relative;

		@include media(tablet) {
			margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
		}
	}

	.entry-title {

		@include post-section-dash;
		margin: 0;

		a {
			color: inherit;

			&:hover {
				color: $color__text-hover;
			}
		}
	}

	.entry-meta,
	.entry-footer {

		color: $color__text-light;
		font-weight: 500;

		> span {

			margin-right: $size__spacing-unit;
			display: inline-block;

			&:last-child {
				margin-right: 0;
			}
		}

		a {

			@include link-transition;
			color: currentColor;

			&:hover {
				text-decoration: none;
				color: $color__link;
			}
		}

		.svg-icon {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin-right: 0.5em;
		}
	}

	.entry-meta {
		margin: $size__spacing-unit 0;
	}

	.entry-footer {

		margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;

		@include media(tablet) {
			margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
			max-width: $size__site-tablet-content;
		}

		@include media(tablet) {
			max-width: $size__site-desktop-content;
		}
	}

	.post-thumbnail {

		margin: $size__spacing-unit;

		@include media(tablet) {
			margin: $size__spacing-unit $size__site-margins;
		}

		&:focus {
			outline: none;
		}

		.post-thumbnail-inner {
			display: block;

			img {
				position: relative;
				display: block;
				width: 100%;
			}
		}
	}

	.image-filters-enabled & {

		.post-thumbnail {
			position: relative;
			display: block;

			.post-thumbnail-inner {
				filter: grayscale(100%);

				&:after {
					background: rgba(0, 0, 0, 0.35);
					content: "";
					display: block;
					height: 100%;
					opacity: .5;
					pointer-events: none;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 4;

					@supports (mix-blend-mode: multiply) {
						display: none;
					}
				}
			}

			&:before,
			&:after {
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				top: 0; left: 0;
				content: "\020";
				pointer-events: none;
			}

			@include filter-duotone;

		}
	}

	.entry-content,
	.entry-summary {
		max-width: calc(100% - (2 * #{ $size__spacing-unit }));
		margin: 0 $size__spacing-unit;

		@include media(tablet) {
			max-width: 80%;
			margin: 0 10%;
			padding: 0 60px;
		}
	}

	.entry-content {

		p {
			word-wrap: break-word;
		}

		.more-link {
			@include link-transition;
			display: inline;
			color: inherit;

			&:after {
				content: "\02192";
				display: inline-block;
				margin-left: 0.5em;
			}

			&:hover {
				color: $color__link;
				text-decoration: none;
			}
		}

		a {
			text-decoration: underline;

			&.button,
			&:hover {
				text-decoration: none;
			}

			&.button {
				display: inline-block;
			}

			&.button:hover {
				background: $color__background-button-hover;
				color: $color__background-body;
				cursor: pointer;
			}
		}

		// Overwrite iframe embeds that have inline styles.
		> iframe[style] {

			margin: 32px 0 !important;
			max-width: 100% !important;

			@include media(tablet) {
				max-width: $size__site-tablet-content !important;
			}

			@include media(desktop) {
				max-width: $size__site-desktop-content !important;
			}
		}

		// Page links
		.page-links a {
			margin: calc(0.5 * #{$size__spacing-unit});
			text-decoration: none;
		}

		// Classic editor audio embeds.
		.wp-audio-shortcode {
			max-width: calc(100vw - (2 * #{ $size__spacing-unit }));

			@include media(tablet) {
				max-width: $size__site-tablet-content;
			}

			@include media(desktop) {
				max-width: $size__site-desktop-content;
			}
		}
	}
}

/* Author description */

.author-bio {
	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;

	@include postContentMaxWidth();

	@include media(tablet) {
		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
	}

	@include media(desktop) {
		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
	}

	.author-title {
		@include post-section-dash;
		display: inline;
	}

	.author-description {

		display: inline;
		color: $color__text-light;
		font-size: $font__size-md;
		line-height: $font__line-height-heading;

		.author-link {
			display: inline-block;

			&:hover {
				color: $color__link-hover;
				text-decoration: none;
			}
		}
	}
}
primary/_comments.scss000066600000014452152367041560011133 0ustar00.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comments-area {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;
	word-wrap: break-word;
	@include postContentMaxWidth();

	@include media(tablet) {
		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
	}

	& > * {
		margin-top: calc(2 * #{$size__spacing-unit});
		margin-bottom: calc(2 * #{$size__spacing-unit});

		@include media(tablet) {
			margin-top: calc(3 * #{$size__spacing-unit});
			margin-bottom: calc(3 * #{$size__spacing-unit});
		}
	}

	/* Add extra margin when the comments section is located immediately after the
	 * post itself (this happens on pages).
	 */
	.entry + & {
		margin-top: calc(3 * #{$size__spacing-unit});
	}

	.comments-title-wrap {

		@include media(tablet) {
			align-items: baseline;
			display: flex;
			justify-content: space-between;
		}

		.comments-title {
			@include post-section-dash;
			margin: 0;

			@include media(tablet) {
				flex: 1 0 calc(3 * (100vw / 12));
			}
		}

		.discussion-meta {
			@include media(tablet) {
				flex: 0 0 calc(2 * (100vw / 12));
				margin-left: #{$size__spacing-unit};
			}
		}
	}
}

#comment {
	max-width: 100%;
	box-sizing: border-box;
}

#respond {
	position: relative;

	.comment-user-avatar {
		margin: $size__spacing-unit 0 -#{$size__spacing-unit};
	}

	.comment .comment-form {
		padding-left: 0;
	}

	> small {
		display: block;
		font-size: $font__size_base;
		position: absolute;
		left: calc(#{$size__spacing-unit} + 100%);
		top: calc(-3.5 * #{$size__spacing-unit});
		width: calc(100vw / 12 );
	}
}

#comments {

	> .comments-title:last-child {
		display: none;
	}
}

.comment-form-flex {
	display: flex;
	flex-direction: column;

	.comments-title {
		display: none;
		margin: 0;
		order: 1;
	}

	#respond {
		order: 2;

		+ .comments-title {
			display: block;
		}
	}
}

.comment-list {
	list-style: none;
	padding: 0;

	.children {
		margin: 0;
		padding: 0 0 0 $size__spacing-unit;
	}

	> .comment:first-child {
		margin-top: 0;
	}

	.pingback,
	.trackback {

		.comment-body {
			color: $color__text-light;
			@include font-family( $font__heading );
			font-size: $font__size-xs;
			font-weight: 500;
			margin-top: $size__spacing-unit;
			margin-bottom: $size__spacing-unit;

			a:not(.comment-edit-link) {
				font-weight: bold;
				font-size: $font__size-base / (1 * $font__size-ratio);
				line-height: 1.5;
				padding-right: #{0.5 * $size__spacing-unit};
				display: block;
			}

			.comment-edit-link {
				color: $color__text-light;
				@include font-family( $font__heading );
				font-weight: 500;
			}
		}
	}
}

.comment-reply {

	#respond + & {
		display: none;
	}

	.comment-reply-link {
		display: inline-block;
	}
}

.comment {
	list-style: none;
	position: relative;

	@include media(tablet) {
		padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 )));

		&.depth-1,
		.children {
			padding-left: 0;
		}

		&.depth-1 {
			margin-left: calc(3.25 * #{$size__spacing-unit});
		}
	}

	.comment-body {
		margin: calc(2 * #{$size__spacing-unit}) 0 0;
	}


	.comment-meta {
		position: relative;
	}

	.comment-author {

		.avatar {
			float: left;
			margin-right: $size__spacing-unit;
			position: relative;

			@include media(tablet) {
				float: inherit;
				margin-right: inherit;
				position: absolute;
				top: 0;
				right: calc(100% + #{$size__spacing-unit});
			}
		}

		.fn {
			position: relative;
			display: block;

			a {
				color: inherit;

				&:hover {
					color: $color__link-hover;
				}
			}
		}

		.post-author-badge {
			border-radius: 100%;
			display: block;
			height: 18px;
			position: absolute;
			background: lighten( $color__link, 8% );
			right: calc(100% - #{$size__spacing-unit * 2.5});
			top: -3px;
			width: 18px;

			@include media(tablet) {
				right: calc(100% + #{$size__spacing-unit * .75});
			}

			svg {
				width: inherit;
				height: inherit;
				display: block;
				fill: white;
				transform: scale(0.875);
			}
		}
	}

	.comment-metadata {

		> a,
		.comment-edit-link {
			display: inline;
			font-weight: 500;
			color: $color__text-light;
			vertical-align: baseline;

			time {
				vertical-align: baseline;
			}

			&:hover {
				color: $color__link-hover;
				text-decoration: none;
			}
		}

		> * {
			display: inline-block;
		}

		.edit-link-sep {
			color: $color__text-light;
			margin: 0 0.2em;
			vertical-align: baseline;
		}

		.edit-link {
			color: $color__text-light;

			svg {
				transform: scale(0.8);
				vertical-align: baseline;
				margin-right: 0.1em;
			}
		}

		.comment-edit-link {
			position: relative;
			padding-left: $size__spacing-unit;
			margin-left: -#{$size__spacing-unit};
			z-index: 1;

			&:hover {
				color: $color__link;
			}
		}
	}

	.comment-content {

		margin: $size__spacing-unit 0;

		@include media(desktop) {
			padding-right: $size__spacing-unit;
		}

		> *:first-child {
			margin-top: 0;
		}

		> *:last-child {
			margin-bottom: 0;
		}

		blockquote {
			margin-left: 0;
		}

		a {
			text-decoration: underline;

			&:hover {
				text-decoration: none;
			}
		}
	}
}

.comment-reply-link,
#cancel-comment-reply-link {
	font-weight: 500;

	&:hover {
		color: $color__link-hover;
	}
}

.discussion-avatar-list {
	@include clearfix;

	margin: 0;
	padding: 0;

	li {
		position: relative;
		list-style: none;
		margin: 0 -8px 0 0;
		padding: 0;
		float: left;
	}

	.comment-user-avatar {

		img {
			height: calc(1.5 * #{$size__spacing-unit});
			width: calc(1.5 * #{$size__spacing-unit});
		}
	}
}

.discussion-meta {

	.discussion-meta-info {
		margin: 0;

		.svg-icon {
			vertical-align: middle;
			fill: currentColor;
			transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em);
			margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above.
		}
	}

}

.comment-form {

	.comment-notes,
	label {
		@include font-family( $font__heading );
		font-size: $font__size-xs;
		color: $color__text-light;
	}

	#wp-comment-cookies-consent {
		margin: 0 10px 0 0;
	}

	.comment-form-author,
	.comment-form-email {
		@include media(tablet) {
			width: calc(50% - #{$size__spacing-unit / 2});
			float: left;
		}
	}

	.comment-form-email {
		@include media(tablet) {
			margin-left: $size__spacing-unit;
		}
	}

	input[name="author"],
	input[name="email"],
	input[name="url"] {
		display: block;
		width: 100%;
	}
}
primary/_archives.scss000066600000002227152367041560011107 0ustar00.archive .page-header,
.search .page-header,
.error404 .page-header {

	margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});

	@include media(tablet) {
		margin: 0 $size__site-margins calc(3 * #{$size__spacing-unit});
	}

	.page-title {

		color: $color__text-light;
		display: inline;
		letter-spacing: normal;

		&:before {
			display: none;
		}
	}

	.search-term,
	.page-description {
		display: inherit;
		clear: both;
	}
}

.archive .page-header .page-description,
.search .page-header .page-description {
	display: block;
	color: $color__text-main;
	font-size: 1em;
}

.hfeed .entry .entry-header {

	@include media(tablet) {
		margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
	}
}

/* 404 & Not found */

.error-404.not-found,
.no-results.not-found {

	.page-content {

		margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};

		@include media(tablet) {
			margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2);
		}
	}

	.search-submit {
		vertical-align: middle;
		margin: $size__spacing-unit 0;
	}

	.search-field {
		width: 100%;
	}
}
footer/_site-footer.scss000066600000001614152367041560011355 0ustar00/* Site footer */

#colophon {

	.widget-area,
	.site-info {
		margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit;

		@include media(tablet) {
			margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
		}
	}

	.widget-column {
		display: flex;
		flex-wrap: wrap;
		.widget {
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			-ms-hyphens: auto;
			hyphens: auto;
			width: 100%;
			word-wrap: break-word;
			@include media(desktop) {
				margin-right: calc(3 * #{$size__spacing-unit});
				width: calc(50% - (3 * #{$size__spacing-unit}));
			}
		}
	}

	.site-info {
		color: $color__text-light;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word;

		a {
			color: inherit;

			&:hover {
				text-decoration: none;
				color: $color__link;
			}
		}

		.imprint,
		.privacy-policy-link {
			margin-right: $size__spacing-unit;
		}
	}
}_site.scss000066600000001614152367041560006563 0ustar00
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
@import "header/site-header";
@import "header/site-featured-image";

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
@import "primary/posts-and-pages";

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
@import "primary/comments";

/*--------------------------------------------------------------
## Archives
--------------------------------------------------------------*/
@import "primary/archives";

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
@import "footer/site-footer";

header/_site-header.scss000066600000004055152367041560011243 0ustar00// Site header

.site-header {
	padding: 1em;

	&.featured-image {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 90vh;

		.site-branding-container {
			margin-bottom: auto;
		}
	}

	@include media(tablet) {
		margin: 0;
		padding: 3rem 0;

		&.featured-image {
			min-height: 100vh;
			margin-bottom: 3rem;
		}
	}
}

// Site branding

.site-branding {

	color: $color__text-light;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	position: relative;
	word-wrap: break-word;

	@include media(tablet) {
		margin: 0 $size__site-margins;
	}
}

// Site logo

.site-logo {

	position: relative;
	z-index: 999;
	margin-bottom: calc(.66 * #{$size__spacing-unit});

	@include media(tablet) {
		margin-bottom: 0;
		position: absolute;
		right: calc(100% + (1.25 * #{$size__spacing-unit}));
		top: 4px; // Accounts for box-shadow widths
		z-index: 999;
	}

	.custom-logo-link {
		border-radius: 100%;
		box-sizing: content-box;
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
		display: block;
		width: 50px;
		height: 50px;
		overflow: hidden;
		transition: box-shadow $background_transition ease-in-out;

		.custom-logo {
			min-height: inherit;
		}

		&:hover,
		&:active,
		&:focus {
			box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
		}

		@include media(tablet) {
			width: 64px;
			height: 64px;
		}
	}
}

// Site title

.site-title {
	margin: auto;
	display: inline;
	color: $color__text-main;

	a {
		color: $color__text-main;

		&:link,
		&:visited {
			color: $color__text-main;
		}

		&:hover {
			color: $color__text-hover;
		}
	}

	.featured-image & {
		margin: 0;

		@include media(tablet) {
			display: inline-block;
		}
	}

	/* When there is no description set, make sure navigation appears below title. */
	+ .main-navigation {
		display: block;
	}

	@include media(tablet) {
		display: inline;
	}

	&:not(:empty) + .site-description:not(:empty):before {
		content: "\2014";
		margin: 0 .2em;
	}
}

// Site description

.site-description {

	display: inline;
	color: $color__text-light;
	font-weight: normal;
	margin: 0;
}
header/_site-featured-image.scss000066600000013623152367041560012673 0ustar00// Featured image styles

.site-header.featured-image {

	/* Hide overflow for overflowing featured image */
	overflow: hidden;

	/* Need relative positioning to properly align layers. */
	position: relative;

	/* Add text shadow to text, to increase readability. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

	/* Set white text color when featured image is set. */
	.site-branding .site-title,
	.site-branding .site-description,
	.main-navigation a:after,
	.main-navigation .main-menu > li.menu-item-has-children:after,
	.main-navigation li,
	.social-navigation li,
	.entry-meta,
	.entry-title {
		color: $color__background-body;
	}

	.main-navigation a,
	.main-navigation a + svg,
	.social-navigation a,
	.site-title a,
	.site-featured-image a {
		color: $color__background-body;
		transition: opacity $link_transition ease-in-out;

		&:hover,
		&:active,
		&:hover + svg,
		&:active + svg {
			color: $color__background-body;
			opacity: 0.6;
		}

		&:focus,
		&:focus + svg {
			color: $color__background-body;
		}
	}

	.main-navigation .sub-menu a {
		opacity: inherit;
	}

	/* add focus state to social media icons */
	.social-navigation a {
		&:focus {
			color: $color__background-body;
			opacity: 1;
			border-bottom: 1px solid $color__background-body;
		}
	}

	.social-navigation svg,
	.site-featured-image svg {
		/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
		-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
	}

	/* Entry header */
	.site-featured-image {

		/* First layer: grayscale. */
		.post-thumbnail img {
			height: auto;
			left: 50%;
			max-width: 1000%;
			min-height: 100%;
			min-width: 100vw;
			position: absolute;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: auto;
			z-index: 1;

			@supports ( object-fit: cover ) {
				height: 100%;
				left: 0;
				object-fit: cover;
				top: 0;
				transform: none;
				width: 100%;
			}

			/* When image filters are active, make it grayscale to colorize it blue. */
			.image-filters-enabled & {
				filter: grayscale(100%);
			}
		}

		.entry-header {

			margin-top: calc( 4 * #{$size__spacing-unit});
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;

			@include media (tablet) {

				margin-left: $size__site-margins;
				margin-right: $size__site-margins;
			}

			.entry-title {

				&:before {
					background: $color__background-body;
				}
			}

			/* Entry meta */

			.entry-meta {

				font-weight: 500;

				> span {

					margin-right: $size__spacing-unit;
					display: inline-block;

					&:last-child {
						margin-right: 0;
					}
				}

				a {

					@include link-transition;
					color: currentColor;

					&:hover {
						text-decoration: none;
					}
				}

				.svg-icon {
					position: relative;
					display: inline-block;
					vertical-align: middle;
					margin-right: 0.5em;
				}

				.discussion-avatar-list {
					display: none;
				}
			}

			&.has-discussion {

				@include media (tablet) {

					.entry-meta {
						display: flex;
						position: relative;
					}

					.entry-title {
						padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
					}

					.entry-meta .comment-count {
						position: absolute;
						right: 0;
					}

					.entry-meta .discussion-avatar-list {
						display: block;
						position: absolute;
						bottom: 100%;
					}
				}
			}
		}
	}

	/* Custom Logo Link */

	.custom-logo-link {

		background: $color__background-body;
		box-shadow: 0 0 0 0 rgba($color__background-body, 0);

		&:hover,
		&:active,
		&:focus {
			box-shadow: 0 0 0 2px rgba($color__background-body, 1);
		}
	}

	/* Make sure important elements are above pseudo elements used for effects. */
	.site-branding {
		position: relative;
		z-index: 10;
	}

	.site-featured-image .entry-header {
		position: relative;
		z-index: 9;
	}

	/* Set up image filter layer positioning */
	.site-branding-container:after,
	.site-featured-image:before,
	.site-featured-image:after,
	&:after {
		display: block;
		position: absolute;
		top: 0; left: 0;
		content: "\020";
		width: 100%;
		height: 100%;
	}

	/* Background & Effects */
	/* Shared background settings between pseudo elements. */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	/* The intensity of each blend mode is controlled via layer opacity. */

	/* Second layer: screen. */
	.image-filters-enabled & .site-featured-image:before {
		background: $color__link;
		mix-blend-mode: screen;
		opacity: 0.1;
	}

	/* Third layer: multiply. */
	/* When image filters are inactive, a black overlay is added. */
	.site-featured-image:after {
		background: #000;
		mix-blend-mode: multiply;
		opacity: .7;

		/* When image filters are active, a blue overlay is added. */
		.image-filters-enabled & {
			background: $color__link;
			opacity: .8;
			z-index: 3;

			/* Browsers supporting mix-blend-mode don't need opacity < 1 */
			@supports (mix-blend-mode: multiply) {
				opacity: 1;
			}
		}
	}

	/* Fourth layer: overlay. */
	.image-filters-enabled & .site-branding-container:after {
		background: rgba(0, 0, 0, 0.35);
		mix-blend-mode: overlay;
		opacity: 0.5;
		z-index: 4;

		/* Browsers supporting mix-blend-mode can have a light overlay */
		@supports (mix-blend-mode: overlay) {
			background: rgba($color__background-body, 0.35);
		}
	}

	/* Fifth layer: readability overlay */
	&:after {
		background: #000;
		/**
		 * Add a transition to the readability overlay, to add a subtle
		 * but smooth effect when resizing the screen.
		 */
		transition: opacity 1200ms ease-in-out;
		opacity: 0.7;
		z-index: 5;

		/* When image filters are active, a blue overlay is added. */
		.image-filters-enabled & {
			background: mix($color__link, black, 12%);
			opacity: 0.38;

			@include media(tablet) {
				opacity: 0.18;
			}
		}
	}


	::-moz-selection {
		background: rgba($color__background-body, 0.17);
	}

	::selection {
		background: rgba($color__background-body, 0.17);
	}
}