themes-wordpress/stow/sass/_extra-child-theme.scss

/**
 * Extra Child Theme Styles
 *
 * 1. General Helper Styles
 * 2. Header
 * 3. Main Wrapper and Content
 * 4. Navigation Menu
 * 5. Archive Pagination and Post Navigation
 * 6. Block Specific Styles
 * 6.1. Column Block
 * 6.2. Quote Block
 * 6.3. Hero Block and Cover Block
 * 6.4. File Block
 * 6.5. Latest Comments Block
 * 6.6. Button Block
 * 6.7. Posts List Block
 * 6.8. Search Block
 * 7. Widgets
 */

/**
 * 1. General Helper Styles
 */
body {
	font-weight: 300;
}

b,
strong {
	font-weight: 700;
}

.home.page.hide-homepage-title {

	.site-main {
		padding: 0;

		article {

			.entry-content {
				margin-top: 0;
			}
		}
	}
}

a {
	text-decoration: none;
}

.entry-content a:link,
.entry-content a:active {
	text-decoration: underline;
}

.entry-content a:hover,
.entry-content a:active {
	text-decoration: none;
}

.main-navigation {
	text-transform: uppercase;
}

.main-navigation > div > ul,
.social-navigation > div > ul,
.pagination .nav-links {
	justify-content: center;
}

/**
 * 2. Header
 */
#masthead {
	background-color: #{map-deep-get($config-global, "color", "background", "default")};
	padding: 0;

	.site-branding {
		text-align: center;
		background: #{map-deep-get($config-global, "color", "background", "default")};
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		height: 100%;
		min-height: 72px;
		padding: 3em 0 36px;
	}
	margin: 0 auto;

	.social-navigation {
		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};

		ul {

			li {

				a {
					color: #{map-deep-get($config-global, "color", "secondary", "default")};

					&:hover {
						color: #{map-deep-get($config-global, "color", "secondary", "hover")};
					}
				}
			}
		}
	}
}

body:not(.fse-enabled) {

	.site-title {
		font-size: #{map-deep-get($config-global, "font", "size", "xxl")};
	}

	.site-description {
		color: #{map-deep-get($config-global, "color", "foreground", "default")};
	}
}

/**
 * 3. Main Wrapper and Content
 */
.site {
	margin: 0 auto;
	padding: 0;
}

.site-content {
	background-color: #{map-deep-get($config-global, "color", "background", "default")};
}

#page {

	.entry-header,
	.page-header,
	.entry-footer,
	.a8c-posts-list {
		text-align: center;
	}

	.a8c-posts-list-item__excerpt {
		text-align: left;
	}
}

/**
 * 4. Navigation
 */


/**
 * 4.1 Main Navigation
 */
body:not(.fse-enabled) {

	#site-navigation,
	.main-navigation {
		background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
		border-bottom: 2px solid rgba(0, 0, 0, 0.15);
		margin-left: 0;
		margin-right: 0;
		text-align: center;

		& > div {
			text-align: left;
		}

		&.main-navigation {

			& > div {
				padding-left: #{map-deep-get($config-global, "spacing", "unit")};
				padding-right: #{map-deep-get($config-global, "spacing", "unit")};
			}

			ul {

				li {

					&.current-menu-item {

						a {
							color: #{map-deep-get($config-global, "color", "primary", "default")};
						}
					}

					a {
						color: #{map-deep-get($config-global, "color", "background", "default")};
						text-decoration: none;

						&:hover {
							color: #{map-deep-get($config-global, "color", "primary", "default")};
						}
					}

					@include media(mobile) {
						padding-left: 0;
						padding-right: 0;
						list-style-type: disc;

						&.current-menu-item {

							a {
								color: #{map-deep-get($config-global, "color", "primary", "default")};
							}
						}

						a {
							color: #{map-deep-get($config-global, "color", "background", "default")};
							font-size: #{map-deep-get($config-global, "font", "size", "sm")};

							&:hover {
								color: #{map-deep-get($config-global, "color", "primary", "default")};
							}

							&::after {
								color: #{map-deep-get($config-global, "color", "background", "default")};
								content: " \2022";
								margin-left: #{map-deep-get($config-global, "spacing", "unit")};
								display: inline;
								font-size: #{map-deep-get($config-global, "font", "size", "base")};
								opacity: 0.58;
							}
						}

						&:last-child {

							a {

								&::after {
									content: "";
									margin-left: 0;
								}
							}
						}
					}
				}

				ul {

					@include media(mobile) {
						background-color: #{map-deep-get($config-global, "color", "background", "default")};

						li {

							&.current-menu-item {

								a {
									color: #{map-deep-get($config-global, "color", "secondary", "default")};
								}
							}

							a {
								color: #{map-deep-get($config-global, "color", "primary", "default")};

								&::after {
									content: "";
								}

								&:hover {
									color: #{map-deep-get($config-global, "color", "primary", "hover")};
								}
							}

							&:hover {
								background: #{map-deep-get($config-global, "color", "background", "light")};
							}
						}
					}
				}
			}

			.main-menu {

				& > li > a {
					padding-left: 0;
				}
			}

			#toggle-menu {
				border-radius: 0;
				width: 100% !important;
				text-align: center;
				font-size: map-deep-get($config-header, "main-nav", "font", "size");
			}
		}
	}
}

/**
 * 4.2 Social Navigation
 */
.social-navigation > div > ul {
	margin-left: 0;
	margin-right: 0;
}

/**
 * 5. Archive Pagination and Post Navigation
 */
.pagination .nav-links > *,
.post-navigation .post-title {
	font-weight: normal;
}

/**
 * 6. Block Specific Styles
 */

/**
 * 6.1. Column Block
 */
.wp-block-coblocks-column {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 0.857em;
	}

	a {
		color: #{map-deep-get($config-global, "color", "secondary", "default")};

		&:hover {
			color: #{map-deep-get($config-global, "color", "secondary", "hover")};
		}
	}
}

/**
 * 6.2. Quote Block
 */
.wp-block-quote,
.wp-block-quote[style*="text-align:center"],
.wp-block-quote[style*="text-align:right"] {
	border: 1px solid #f2f2f2;
	padding: #{map-deep-get($config-global, "spacing", "horizontal")};

	p {

		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
	}

	cite {
		color: #{map-deep-get($config-global, "color", "secondary", "default")};
	}
}

/**
 * 6.3. Hero Block and Cover Block
 */
.wp-block-coblocks-hero__box,
.wp-block-cover__inner-container {
	padding: #{map-deep-get($config-global, "spacing", "vertical")};

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
	}

	p {
		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
	}
}

/**
 * 6.4. File Block
 */
.wp-block-file {

	a {

		&.wp-block-file__button {
			text-transform: uppercase;
			line-height: #{map-deep-get($config-button, "font", "line-height")};
			color: #{map-deep-get($config-button, "color", "text")};
			cursor: pointer;
			font-weight: #{map-deep-get($config-button, "font", "weight")};

			@include font-family( map-deep-get($config-button, "font", "family") );
			font-size: #{map-deep-get($config-button, "font", "size")};
			background-color: #{map-deep-get($config-button, "color", "background")};
			border-radius: #{map-deep-get($config-button, "border-radius")};
			border-width: #{map-deep-get($config-button, "border-width")};
			padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
			display: inline-block;

			&:focus,
			&:hover,
			&:visited {
				color: #{map-deep-get($config-button, "color", "text-hover")};
				background-color: #{map-deep-get($config-button, "color", "background-hover")};
				opacity: 1;
			}
		}
	}
}

/**
 * 6.5. Latest Comments Block
 */
.wp-block-latest-comments {

	.wp-block-latest-comments__comment-meta {

		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );

		.wp-block-latest-comments__comment-date {
			font-size: #{map-deep-get($config-global, "font", "size", "xs")};
		}
	}
}

/**
 * 6.6. Button Block
 * 6.7. Posts List Block
 * 6.8. Search Block
 */
.wp-block-button a.wp-block-button__link,
.a8c-posts-list a.a8c-posts-list__view-all,
.wp-block-search .wp-block-search__button {
	text-transform: uppercase;
}

/**
 * 7. Widgets
 */
.site-footer {

	.widget-area {

		.widget-title {
			margin-bottom: 0.857em;
		}
	}
}

/**
 * 6.1. Blog Posts (Newspack) Block
 */
.wp-block-newspack-blocks-homepage-articles {

	article {

		.entry-title a {

			&:active,
			&:focus,
			&:hover {
				text-decoration: none;
			}
		}

		.more-link {

			&:active,
			&:focus,
			&:hover {
				color: #{map-deep-get($config-global, "color", "primary", "hover")};
			}
		}

		.cat-links a,
		.more-link,
		.entry-meta a {
			text-decoration: none;

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

	&.image-alignbehind article {

		.entry-title a {

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

		.more-link {

			&:active,
			&:focus,
			&:hover {
				color: inherit;
			}
		}
	}
}

.has-background:not(.has-background-background-color),
[class*="background-color"]:not(.has-background-background-color),
[style*="background-color"] {

	.wp-block-newspack-blocks-homepage-articles article {

		.entry-title a {

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

		.more-link {

			&:active,
			&:focus,
			&:hover {
				color: inherit;
			}
		}
	}
}

/**
 * Search block
 */
.wp-block-search {

	&.wp-block-search__button-inside {

		.wp-block-search__inside-wrapper {
			border-radius: #{map-deep-get($config-button, "border-radius")};
		}

		.wp-block-search__input {
			background: transparent;
		}
	}

	.wp-block-search__input {
		margin-right: calc(0.1 * #{map-deep-get($config-button, "padding", "horizontal")});
		border-radius: #{map-deep-get($config-button, "border-radius")};
	}
}