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