22

✏️ Editing: _blocks.scss

/* !Block styles */

// Default block margin and alignment rules.
// These are replicated inside of the Group block
// so that child blocks in there appear the same way.
.entry .entry-content > *,
.entry .entry-summary > *,
.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
	margin: 32px 0;
	max-width: 100%;

@include postContentMaxWidth();

@include media(tablet) {
		margin: 32px 0;
	}

&.alignwide {
		margin-left: auto;
		margin-right: auto;
		clear: both;

@include media(tablet) {
			width: 100%;
			max-width: 100%;
		}
	}

&.alignfull {
		position: relative;
		left: -#{$size__spacing-unit };
		width: calc( 100% + (2 * #{$size__spacing-unit}));
		max-width: calc( 100% + (2 * #{$size__spacing-unit}));
		clear: both;

@include media(tablet) {
			margin-top: calc(2 * #{$size__spacing-unit});
			margin-bottom: calc(2 * #{$size__spacing-unit});
			left: calc( -12.5% - 75px );
			width: calc( 125% + 150px );
			max-width: calc( 125% + 150px );
		}
	}

&.alignleft {
		/*rtl:ignore*/
		float: left;
		max-width: calc(5 * (100vw / 12));
		margin-top: 0;
		margin-left: 0;
		/*rtl:ignore*/
		margin-right: $size__spacing-unit;

@include media(tablet) {
			max-width: calc(4 * (100vw / 12));
			/*rtl:ignore*/
			margin-right: calc(2 * #{$size__spacing-unit});
		}
	}

&.alignright {
		/*rtl:ignore*/
		float: right;
		max-width: calc(5 * (100vw / 12));
		margin-top: 0;
		margin-right: 0;
		/*rtl:ignore*/
		margin-left: $size__spacing-unit;

@include media(tablet) {
			max-width: calc(4 * (100vw / 12));
			margin-right: 0;
			/*rtl:ignore*/
			margin-left: calc(2 * #{$size__spacing-unit});
		}
	}
	&.aligncenter {
		margin-left: auto;
		margin-right: auto;

@include postContentMaxWidth();

@include media(tablet) {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

.entry .entry-content > *,
.entry .entry-summary > * {

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

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

/*
 * Unset nested content selector styles
 * - Prevents layout styles from cascading too deeply
 * - helps with plugin compatibility
 */
.entry .entry-content,
.entry .entry-summary {

.entry-content,
	.entry-summary,
	.entry {
		margin: inherit;
		max-width: inherit;
		padding: inherit;

@include media(tablet) {
			margin: inherit;
			max-width: inherit;
			padding: inherit;
		}
	}
}

.entry .entry-content {

//! Paragraphs
	p.has-background {
		padding: 20px 30px;
	}

//! Audio
	.wp-block-audio {

width: 100%;

audio {
			width: 100%;
		}

&.alignleft audio,
		&.alignright audio {

max-width: (0.33 * $mobile_width);

@include media(tablet) {
				max-width: (0.5 * $tablet_width);
			}

@include media(wide) {
				max-width: (0.33 * $desktop_width);
			}
		}
	}

//! Video
	.wp-block-video {

video {
			width: 100%;
		}
	}

//! Button
	.wp-block-button {

.wp-block-button__link {
			@include button-transition;
			border: none;
			font-size: $font__size-sm;
			@include font-family( $font__heading );
			line-height: $font__line-height-heading;
			box-sizing: border-box;
			font-weight: bold;
			text-decoration: none;
			padding: ($size__spacing-unit * .76) $size__spacing-unit;
			outline: none;
			outline: none;

&:not(.has-background) {
				background-color: $color__background-button;
			}

&:not(.has-text-color) {
				color: white;
			}

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

&:focus {
				color: white;
				background: $color__background-button-hover;
				outline: thin dotted;
				outline-offset: -4px;
			}
		}

&:not(.is-style-squared) .wp-block-button__link {
			border-radius: 5px;
		}

&.is-style-outline .wp-block-button__link,
		&.is-style-outline .wp-block-button__link:focus,
		&.is-style-outline .wp-block-button__link:active {
			@include button-all-transition;
			border-width: 2px;
			border-style: solid;

&:not(.has-background) {
				background: transparent;
			}

&:not(.has-text-color) {
				color: $color__background-button;
				border-color: currentColor;
			}
		}

&.is-style-outline .wp-block-button__link:hover {
			color: white;
			border-color: $color__background-button-hover;
			&:not(.has-background) {
				color: $color__background-button-hover;
			}
		}
	}

//! Latest posts, categories, archives
	.wp-block-archives,
	.wp-block-categories,
	.wp-block-latest-posts {
		padding: 0;
		list-style: none;

li > a {
			@include font-family( $font__heading );
			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
			font-weight: bold;
			line-height: $font__line-height-heading;
			text-decoration: none;
		}
	}

.wp-block-archives,
	.wp-block-categories {

&.aligncenter {
			text-align: center;
		}
	}

//! Latest categories
	.wp-block-categories {

ul {
			padding-top: ( .75 * $size__spacing-unit );
		}

li ul {
			list-style: none;
			padding-left: 0;
		}

@include nestedSubMenuPadding();
	}

//! Latest posts
	.wp-block-latest-posts {

.wp-block-latest-posts__post-date {
			@include font-family( $font__heading );
			font-size: $font__size-xs;
			color: $color__text-light;
			line-height: 1.2;
		}

.wp-block-latest-posts__post-full-content,
		.wp-block-latest-posts__post-excerpt {
			margin-top: $size__spacing-unit;
			margin-bottom: $size__spacing-unit;
		}

li {
			padding-bottom: ( .5 * $size__spacing-unit );

&.menu-item-has-children,
			&:last-child {
				padding-bottom: 0;
			}

:not(:last-child) .wp-block-latest-posts__post-excerpt {
				padding-bottom: ( .5 * $size__spacing-unit );
			}
		}

&.is-grid li {
			border-top: 2px solid $color__border;
			padding-top: (1 * $size__spacing-unit);
			margin-bottom: (2 * $size__spacing-unit);
			a {
				&:after {
					content: '';
				}
			}
			&:last-child {
				margin-bottom: auto;
				a:after {
					content: '';
				}
			}
		}
	}

//! Latest preformatted text
	.wp-block-preformatted {
		font-size: $font__size-xs;
		line-height: 1.8;
		padding: $size__spacing-unit;
	}

//! Verse
	.wp-block-verse {
		@include font-family( $font__body );
		font-size: $font__size_base;
		line-height: 1.8;
	}

//! Paragraphs
	.has-drop-cap {
		&:not(:focus):first-letter {
			@include font-family( $font__heading );
			font-size: $font__size-xxxl;
			line-height: 1;
			font-weight: bold;
			margin: 0 0.25em 0 0;

@-moz-document url-prefix()  {
				& {
					margin-top: 0.2em;
				}
			}
		}
	}

//! Pullquote
	.wp-block-pullquote {
		border-color: transparent;
		border-width: 2px;
		padding: $size__spacing-unit;

blockquote {
			color: $color__text-main;
			border: none;
			margin-top: calc(4 * #{ $size__spacing-unit});
			margin-bottom: calc(4.33 * #{ $size__spacing-unit});
			margin-right: 0;
			padding-left: 0;
		}

p {
			font-size: $font__size-lg;
			font-style: italic;
			line-height: 1.3;
			margin-bottom: 0.5em;
			margin-top: 0.5em;

em {
				font-style: normal;
			}

@include media(tablet) {
				font-size: $font__size-xl;
			}
		}

cite {
			display: inline-block;
			@include font-family( $font__heading );
			line-height: 1.6;
			text-transform: none;
			color: $color__text-light;

/*
			 * This requires a rem-based font size calculation instead of our normal em-based one,
			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
			 */
			font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
		}

&.alignleft,
		&.alignright {
			width: 100%;
			padding: 0;

blockquote {
				margin: $size__spacing-unit 0;
				padding: 0;
				text-align: left;
				max-width: 100%;

p:first-child {
					margin-top: 0;
				}
			}
		}

&.is-style-solid-color {
			background-color: $color__link;
			padding-left: 0;
			padding-right: 0;

@include media(tablet) {
				padding-left: 10%;
				padding-right: 10%;
			}

p {
				font-size: $font__size-lg;
				line-height: 1.3;
				margin-bottom: 0.5em;
				margin-top: 0.5em;

@include media(tablet) {
					font-size: $font__size-xl;
				}
			}

a {
				color: $color__background-body;
			}

cite {
				color: inherit;
			}

blockquote {
				max-width: 100%;
				color: $color__background-body;
				padding-left: 0;
				margin-left: $size__spacing-unit;
				margin-right: $size__spacing-unit;

&.has-text-color p,
				&.has-text-color a,
				&.has-primary-color,
				&.has-secondary-color,
				&.has-dark-gray-color,
				&.has-light-gray-color,
				&.has-white-color {
					color: inherit;
				}

@include media(tablet) {
					margin-left: 0;
					margin-right: 0;
				}
			}

&.alignright,
			&.alignleft {

@include media(tablet) {
					padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
				}
			}

&.alignfull {

@include media(tablet) {
					padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
					padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
				}
			}
		}
	}

//! Blockquote
	.wp-block-quote {

&:not(.is-large),
		&:not(.is-style-large) {
			border-width: 2px;
			border-color: $color__link;
			padding-top: 0;
			padding-bottom: 0;
		}

p {
			font-size: 1em;
			font-style: normal;
			line-height: 1.8;
		}

cite {
			/*
			 * This requires a rem-based font size calculation instead of our normal em-based one,
			 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
			 */
			font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
		}

&.is-large,
		&.is-style-large {
			margin: $size__spacing-unit 0;
			padding: 0;
			border-left: none;

p {
				font-size: $font__size-lg;
				line-height: 1.4;
				font-style: italic;
			}

cite,
			footer {
				/*
				 * This requires a rem-based font size calculation instead of our normal em-based one,
				 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
				 */
				font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
			}

@include media(tablet) {
				margin: $size__spacing-unit 0;
				padding: $size__spacing-unit 0;

p {
					font-size: $font__size-lg;
				}
			}
		}
	}

//! Image
	.wp-block-image {
		max-width: 100%;

img {
			display: block;
		}

// If an image does not have a left/center/right alignment, 
		// it's a direct child of .wp-block-img.  If it has no other 
		// alignment added, we want to make sure the image does not 
		// extend beyond the width of the text column.
		&:not(.alignwide):not(.alignfull) > img {
			@include postContentMaxWidth();
		}

.aligncenter {

@include postContentMaxWidth();

@include media(tablet) {
				margin: 0;
				width: $size__site-tablet-content;

img {
					margin: 0 auto;
				}
			}

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

img {
					margin: 0 auto;
				}
			}
		}

&.alignfull img {
			width: 100vw;
			max-width: calc( 100% + (2 * #{$size__spacing-unit}));

@include media(tablet) {
				max-width: calc( 125% + 150px );
				margin-left: auto;
				margin-right: auto;
			}
		}
	}

//! Cover Image
	.wp-block-cover-image,
	.wp-block-cover {
		position: relative;
		min-height: 430px;
		padding: $size__spacing-unit;

@include media(tablet) {
			padding: $size__spacing-unit 10%;
		}

.wp-block-cover-image-text,
		.wp-block-cover-text,
		h2 {
			@include font-family( $font__heading );
			font-size: $font__size-lg;
			font-weight: bold;
			line-height: 1.25;
			padding: 0;
			color: #fff;

@include media(tablet) {
				font-size: $font__size-xl;
				max-width: 100%;
			}
		}

&.alignleft,
		&.alignright {
			width: 100%;

@include media(tablet) {
				padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
			}
		}

&.alignfull {

.wp-block-cover-image-text,
			.wp-block-cover-text,
			h2 {
				@include postContentMaxWidth();
			}

@include media(tablet) {
				padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
				padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));

.wp-block-cover-image-text,
				.wp-block-cover-text,
				h2 {
					padding: 0;
				}
			}
		}
	}

//! Galleries
	.wp-block-gallery {
		list-style-type: none;
		padding-left: 0;

.blocks-gallery-image:last-child,
		.blocks-gallery-item:last-child {
			margin-bottom: 16px;
		}

figcaption a {
			color: #fff;
		}
	}

//! Captions
	.wp-block-audio figcaption,
	.wp-block-video figcaption,
	.wp-block-image figcaption,
	.wp-block-gallery .blocks-gallery-image figcaption,
	.wp-block-gallery .blocks-gallery-item figcaption {
		font-size: $font__size-xs;
		@include font-family( $font__heading );
		line-height: $font__line-height-pre;
		margin: 0;
		padding: ( $size__spacing-unit * .5 );
		text-align: center;
	}

//! Separator
	.wp-block-separator,
	hr {
		background-color: $color__text-light;
		border: 0;
		height: 2px;
		margin-bottom: (2 * $size__spacing-unit);
		margin-top: (2 * $size__spacing-unit);
		max-width: 2.25em;
		text-align: left;

&:not(.wp-block-separator) {
			max-width: 100%;
			@include postContentMaxWidth();
		}

&.is-style-wide {
			max-width: 100%;
			@include postContentMaxWidth();
		}

&.is-style-dots {
			max-width: 100%;
			@include postContentMaxWidth();
			background-color: inherit;
			border: inherit;
			height: inherit;
			text-align: center;

// Only apply the default dot color if there's no separator color specified.
			&:not(.has-text-color):not(.has-background) {
				color: $color__text-light;
			}

&:before {
				font-size: $font__size-lg;
				letter-spacing: $font__size-sm;
				padding-left: $font__size-sm;
			}
		}

/* Remove duplicate rule-line when a separator
		 * is followed by an H1, or H2 */
		& + h1,
		& + h2 {

&:before {
				display: none;
			}
		}
	}

//! Twitter Embed
	.wp-block-embed-twitter {
		word-break: break-word;
	}

//! Table
	.wp-block-table {

th,
		td {
			border-color: $color__text-light;
		}
	}

//! File
	.wp-block-file {
		@include font-family( $font__heading );

.wp-block-file__button {
			display: table;
			@include button-transition;
			border: none;
			border-radius: 5px;
			background: $color__background-button;
			font-size: $font__size-base;
			@include font-family( $font__heading );
			line-height: $font__line-height-heading;
			text-decoration: none;
			font-weight: bold;
			padding: ($size__spacing-unit * .75) $size__spacing-unit;
			color: #fff;
			margin-left: 0;
			margin-top: calc(0.75 * #{$size__spacing-unit});

@include media(desktop) {
				font-size: $font__size-base;
				padding: ($size__spacing-unit * .875) ($size__spacing-unit * 1.5);
			}

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

&:focus {
				background: $color__background-button-hover;
				outline: thin dotted;
				outline-offset: -4px;
			}
		}
	}

//! Code
	.wp-block-code {
		border-radius: 0;

code {
			font-size: $font__size-md;
			white-space: pre-wrap;
			word-break: break-word;
		}
	}

//! Columns
	.wp-block-columns {

.wp-block-column > * {

&:first-child {
				margin-top: 0;
			}

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

// Ensure images do not expand beyond the column.
		.wp-block-image > img:not(.alignwide):not(.alignfull),
		.wp-block-image > figure {

@include media(tablet) {
				max-width: 100%;
			}

@include media(desktop) {
				max-width: 100%;
			}
		}

@include media(tablet) {
			flex-wrap: nowrap;

.wp-block-column:not(:first-child) {
				margin-left: 32px;
			}
		}
	}

//! Group
	.wp-block-group {

// When the Group block is standard/wide, we need to prevent full-aligned 
		// child blocks from expanding out of their container.
		&:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
		&:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {

@include media(tablet) {
				left: 0;
				max-width: 100%;
			}
		}

// The full-width Group block's inner container should mimic .entry-content styles.
		&.alignfull > .wp-block-group__inner-container {
			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;
			}
		}

// Group block with a colored background.
		&.has-background {
			padding: $size__spacing-unit;
			margin-top: 0;
			margin-bottom: 0;

// Remove the top and bottom margins of inner blocks.
			.wp-block-group__inner-container {

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

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

// If the Group block is full-width, it does not need this extra padding. 
			&.alignfull {
				padding-left: 0;
				padding-right: 0;

@include media(tablet) {
					padding-top: $size__spacing-unit;
					padding-bottom: $size__spacing-unit;
				}
			}

// Full-aligned child blocks should take up the maximum width available in their container.
			&:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
				width: 100%;
				max-width: 100%;
				
				@include media(tablet) {
					width: calc( 100% + #{$size__spacing-unit * 2} );
					max-width: calc( 100% + #{$size__spacing-unit * 2} );
					margin-left: -#{$size__spacing-unit};
				}
			}
		}
		
	}

//! Latest Comments
	.wp-block-latest-comments {

.wp-block-latest-comments__comment-meta {
			@include font-family( $font__heading );
			font-weight: bold;

.wp-block-latest-comments__comment-date {
				font-weight: normal;
			}
		}

.wp-block-latest-comments__comment,
		.wp-block-latest-comments__comment-date,
		.wp-block-latest-comments__comment-excerpt p {
			font-size: inherit;
		}

&.has-avatars {

}

&.has-dates {

.wp-block-latest-comments__comment-date {
				font-size: $font__size-xs;
			}
		}

&.has-excerpts {

}
	}

//! Font Sizes
	.has-small-font-size {
		font-size: $font__size-sm;
	}

.has-normal-font-size {
		font-size: $font__size-md;
	}

.has-large-font-size {
		font-size: $font__size-lg;
	}

.has-huge-font-size {
		font-size: $font__size-xl;
	}

//! Custom background colors
	.has-primary-background-color,
	.has-secondary-background-color,
	.has-dark-gray-background-color,
	.has-light-gray-background-color {

// Use white text against these backgrounds by default.
		color: $color__background-body;

> p,
		> h1,
		> h2,
		> h3,
		> h4,
		> h5,
		> h6,
		> a {
			color: $color__background-body;
		}
	}

.has-white-background-color {
		color: $color__text-main;

// Use dark gray text against this background by default.
		> p,
		> h1,
		> h2,
		> h3,
		> h4,
		> h5,
		> h6,
		> a {
			color: $color__text-main;
		}
	}

.has-primary-background-color,
	.wp-block-pullquote.is-style-solid-color.has-primary-background-color {
		background-color: $color__link;
	}

.has-secondary-background-color,
	.wp-block-pullquote.is-style-solid-color.has-secondary-background-color {
		background-color: $color__border-link-hover;
	}

.has-dark-gray-background-color,
	.wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
		background-color: $color__text-main;
	}

.has-light-gray-background-color,
	.wp-block-pullquote.is-style-solid-color.has-light-gray-background-color {
		background-color: $color__text-light;
	}

.has-white-background-color,
	.wp-block-pullquote.is-style-solid-color.has-white-background-color {
		background-color: #FFF;
	}

//! Custom foreground colors
	.has-primary-color,
	.wp-block-pullquote blockquote.has-primary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-primary-color > p {
		color: $color__link;
	}

.has-secondary-color,
	.wp-block-pullquote blockquote.has-secondary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color > p {
		color: $color__border-link-hover;
	}

.has-dark-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color > p {
		color: $color__text-main;
	}

.has-light-gray-color,
	.wp-block-pullquote blockquote.has-light-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color > p {
		color: $color__text-light;
	}

.has-white-color,
	.wp-block-pullquote blockquote.has-white-color,
	.wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
		color: #FFF;
	}
}

MR SKB