304 lines
		
	
	
	
		
			4.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			304 lines
		
	
	
	
		
			4.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| .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;
 | |
| 			}
 | |
| 		}
 | |
| 	}
 | |
| }
 |