yeuchaybo-v6/assets/styles/_common.scss

/* ## Avatars
--------------------------------------------- */

.avatar {
	float: left;
	margin-right: 2rem;
	border-radius: 50%;

	.alignright & {
		margin-left: 2rem;
	}
}

/* ## Genesis
--------------------------------------------- */

.breadcrumb {
	width: 100%;
	padding: 1rem 0 0;
	color: $gray;
	font-size: 1.4rem;
	text-align: center;

	a {
		color: $white;
		text-decoration: none;

		&:hover,
		&:focus {
			text-decoration: underline;
		}
	}
}

.after-entry {
	width: 100%;
	margin: 2rem auto;
	padding: 6vw;
	border: $site-border;
	border-radius: $site-radius;
	background-color: $light;
	text-align: center;

	@include breakpoint(md) {
		width: calc(100% + 12rem);
		max-width: calc(100% + 12rem);
		margin: 0 -6rem;
		padding: 6rem;
	}

	.enews {

		form {
			display: flex;
			margin: 1em 0 0;
			flex-wrap: wrap;
			justify-content: center;
		}

		input {
			width: 100%;
			margin-bottom: 1em;
			background-color: $white;

			@include breakpoint(xs) {
				max-width: $two-fifths;
				margin-left: $margin;

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

.author-box {
	width: 100%;
	max-width: map_get($breakpoints, sm);
	padding: 6vw 0;

	@include breakpoint(sm) {
		padding: 6rem 0;
	}

	.author & {
		max-width: 100%;
		margin-bottom: 4rem;
		padding: 4rem;
		border: $site-border;
		border-radius: $site-radius;
		background-color: $white;
	}

	p {
		color: $body;

		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

.author-box-title {
	margin-bottom: 0;
	font-size: 2rem;
}

/* ## Search Form
--------------------------------------------- */

.search-form {
	display: flex;
	position: relative;
	width: 100%;
	align-items: center;
	justify-content: flex-start;

	@include clearfix;

	.search-toggle {
		display: none;
		width: 2rem;
		height: 2rem;
		background-image: url(assets/images/search.svg);
		cursor: pointer;
		background-repeat: no-repeat;

		@include breakpoint(md) {
			display: block;
		}

		.shrink & {
			background-image: url(assets/images/search.svg);
		}

		&.active {
			background-image: url(assets/images/close.svg);
			background-repeat: no-repeat;

			.shrink & {
				background-image: url(assets/images/close.svg);
			}
		}
	}

	input[type="search"] {
		width: 30rem;
		margin-right: 1em;
		background-color: rgba($white, 0.2);

		.site-header & {
			display: block;
			max-width: 79vw;
			background-color: $light;

			@include breakpoint(md) {
				display: none;
				position: absolute;
				top: 0;
				right: 2em;
				bottom: 0;
				margin: auto 1em auto 0;
			}
		}

		.site-header.shrink & {
			border: $site-border;
			color: $dark;
		}

		.entry-content & {
			background-color: $light;
		}
	}

	input[type="submit"] {
		display: none;
	}

	.entry & {
		margin-bottom: 4rem;
	}
}

/* ## WordPress
--------------------------------------------- */

a {

	&.aligncenter img {
		display: block;
		margin: 0 auto;
	}

	&.alignnone {
		display: inline-block;
	}
}

.alignleft {
	float: left;
	text-align: left;
}

.alignright {
	float: right;
	text-align: right;
}

a {

	&.alignleft,
	&.alignnone,
	&.alignright {
		max-width: 100%;
	}
}

img.centered,
.aligncenter {
	display: block;
	margin: 0 auto 1em;
}

img.alignnone,
.alignnone {
	margin-bottom: 1em;
}

a.alignleft,
img.alignleft,
.wp-caption.alignleft {
	margin: 0 1em 1em 0;
}

a.alignright,
img.alignright,
.wp-caption.alignright {
	margin: 0 0 1em 1em;
}

.wp-caption-text {
	margin: 0;
	font-size: 1.4rem;
	text-align: center;
}

.entry-content {

	p.wp-caption-text {
		margin-bottom: 0;
	}

	.wp-audio-shortcode,
	.wp-playlist,
	.wp-video {
		margin: 0 0 1em;
	}
}

.sticky,
.bypostauthor {
	background-color: transparent;
}

.post-edit-link,
.comment-edit-link {
	display: none;
}

/* ## Gutenberg
--------------------------------------------- */

.alignwide {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: map_get($breakpoints, md);
	transform: translate(-50%);

	img {
		display: inline-block;
		margin: 0 auto;
	}
}

.alignfull {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-left: -50vw!important;

	.content-sidebar &,
	.sidebar-content & {
		max-width: calc(100% + 12rem);
	}

	img {
		display: inline-block;
		width: 100%;
		margin: 1.618em auto;
	}
}

.wp-block-image {
	margin: 10px auto 40px;

	figcaption {
		margin: 10px auto 10px;
	}
}

.wp-block-button {
	display: block;
	width: 100%;
	background: transparent;
	text-align: center;

	@include clearfix;

	a {
		display: inline-block;

		&:hover,
		&:focus {
			color: $white;
		}
	}
}

.wp-block-pullquote {

	> p {
		font-family: $font-family;
		font-weight: $normal;
	}

	cite {
		font-style: normal;
	}
}

.wp-block-gallery:not(.alignfull) {
	margin-left: 0!important;

	.blocks-gallery-image {
		margin-right: 0;
	}
}

.blocks-gallery-item img {
	margin: unset;
}

.wp-block-embed {
	margin-bottom: 40px;
}

.blocks-gallery-image {
	display: block;
	width: 100%;
	margin: 0 0 6vw;
	text-align: center;

	@include breakpoint(xs) {
		width: $one-half;
		margin-bottom: $margin;

		&:nth-of-type(odd) {
			clear: both;
			margin-left: 0;
		}
	}

	@include breakpoint(sm) {
		margin-bottom: $margin;
		margin-left: $margin;

		&:nth-of-type(odd) {
			margin-left: $margin;
		}

		.wp-block-gallery.columns-2 & {
			width: $one-half;
			margin-left: $margin;

			&:nth-of-type(odd) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-3 & {
			width: $one-third;

			&:nth-of-type(odd) {
				margin-left: $margin;
			}

			&:nth-of-type(3n + 1) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-4 & {
			width: $one-fourth;

			&:nth-of-type(3n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(4n + 1) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-5 & {
			width: $one-fifth;

			&:nth-of-type(4n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(5n + 1) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-6 & {
			width: $one-sixth;

			&:nth-of-type(5n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(6n + 1) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-7 & {
			width: $one-seventh;

			&:nth-of-type(6n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(7n + 1) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-8 & {
			width: $one-eighth;

			&:nth-of-type(7n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(8n + 1) {
				margin-left: 0;
			}
		}

		.wp-block-gallery.columns-9 & {
			width: $one-ninth;

			&:nth-of-type(8n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(9n + 1) {
				margin-left: 0;
			}
		}
	}
}