themes-wordpress/friendly-business/sass/site/primary/_posts-and-pages.scss

.sticky {
	display: block;
}

.sticky-post {
	background: $color__background-button;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	padding: .25rem;
	position: relative;
	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__vertical-spacing-unit;
		position: relative;
		text-align: center;

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

	.entry-title {

		margin: 0;
		margin-bottom: $size__vertical-spacing-unit;

		a {
			color: inherit;

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

	.entry-meta,
	.entry-footer {

		color: $color__text-dark;
		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,
	.entry-footer {

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

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

		@include media(desktop) {
			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" #{"/*rtl:\"\02190\"*/"};
				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;
			}
		}

		> h1,
		> h2,
		> h3,
		> h4,
		> h5,
		> h6 {
			text-align: center;
		}

		// 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}) auto;
	}

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

	.author-title {
		display: inline;
	}

	.author-description {

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

		.author-link {
			display: inline-block;

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