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

/**
 * Extra Child Theme Styles
 */
// @import "";

// Header
#masthead {
	align-content: center;
	align-items: center;
	background: #{map-deep-get($config-global, "color", "foreground", "default")};
	border-bottom: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
	border-top: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	margin: #{2 * map-deep-get($config-global, "spacing", "vertical")} 0 #{map-deep-get($config-global, "spacing", "vertical")};
	max-width: 100vw;
	min-height: #{100 - map-deep-get($config-global, "spacing", "vertical")};
	padding-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
	position: relative;
	z-index: 2;

	&:after {
		background: #{map-deep-get($config-global, "color", "foreground", "default")};
		border-bottom-left-radius: 200px;
		border-bottom-right-radius: 200px;
		content: "";
		display: block;
		height: 100px;
		left: 50%;
		margin-left: -100px;
		position: absolute;
		bottom: -#{map-deep-get($config-global, "spacing", "vertical") + 5px};
		width: 200px;
	}

	&:before {
		background: #{map-deep-get($config-global, "color", "foreground", "default")};
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		content: "";
		display: block;
		height: 100px;
		left: 50%;
		margin-left: -100px;
		position: absolute;
		top: -#{map-deep-get($config-global, "spacing", "vertical") + 5px};
		width: 200px;
	}

	a {
		text-decoration: none;
	}

	.custom-logo-link {
		display: inline-block;
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
	}

	.site-branding {
		margin-bottom: 0;
		order: 1;
		position: relative;
		text-align: center;
		width: 100%;
		z-index: 2;
	}

	.main-navigation {
		margin-bottom: 0;
		order: 3;
		position: relative;
		text-align: center;
		z-index: 2;

		& > div > ul {
			text-align: left;
		}
	}

	.social-navigation {
		order: 2;
		position: relative;
		z-index: 2;
	}

	@include media(mobile) {
		padding: #{map-deep-get($config-global, "spacing", "vertical")} #{2* map-deep-get($config-global, "spacing", "horizontal")};

		.main-navigation {
			& > div > ul {
				justify-content: center;
			}
		}
	}

	@include media(laptop) {
		flex-flow: row wrap;
		justify-content: center;

		& > *:nth-child(1):nth-last-child(3),
		& > *:nth-child(2):nth-last-child(2),
		& > *:nth-child(3):nth-last-child(1) {
			margin: 0;
			padding: 0 #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
			width: 30%;
			width: calc(33.3333% - #{map-deep-get($config-global, "spacing", "horizontal")})
		}

		& > *:nth-child(2):nth-last-child(2) {
			order: 1;
		}

		.site-branding {
			order: 2;
		}

		.main-navigation {
			& > div > ul {
				justify-content: flex-start;
			}
		}

		.social-navigation {
			order: 3;

			& > div > ul {
				justify-content: flex-end;
			}
		}
	}
}

// Main Navigation
.main-navigation {
	.button {
		background: #{map-deep-get($config-global, "color", "secondary", "default")};
		color: #{map-deep-get($config-global, "color", "foreground", "default")};
		text-transform: uppercase;

		&:active,
		&:focus,
		&:hover {
			background: #{map-deep-get($config-global, "color", "secondary", "hover")};
			text-decoration: none;
		}
	}

	& > div > ul > li > a {
		text-transform: uppercase;
	}

	& > div > ul > li.current-menu-item {
		& > a {
			color: #{map-deep-get($config-global, "color", "secondary", "hover")};
		}
	}

	@include media(mobile) {

		& > div > ul > li:first-of-type > a {
			padding-left: #{map-deep-get($config-header, "main-nav", "link-padding")};
		}

		& > div > ul > li:last-of-type > a {
			padding-right: #{map-deep-get($config-header, "main-nav", "link-padding")};
		}

		& > div > ul > li > .sub-menu {
			background: #{map-deep-get($config-global, "color", "foreground", "default")};
		}

		& > div > ul > li:hover,
		& > div > ul > li:focus-within,
		& > div > ul > li.current-menu-item {

			& > ul {
				box-shadow: none;
				overflow: hidden;
			}

			& li {
				& > a {
					background: #{map-deep-get($config-global, "color", "foreground", "default")};
					border-top: 1px solid #{map-deep-get($config-global, "color", "secondary", "hover")};
				}
			}
		}
	}
}

.site-info,
.entry-header,
.page-title,
.author-title,
.comments-title,
.comment-reply-title {
	text-align: center;
}

.comment-reply-title {
	display: inherit;
}

.comment .comment-reply-title {
	display: flex;
}

.pagination .nav-links {
	justify-content: center;
}

// Hentry
.entry-header {
	.entry-meta {
		display: none;
	}

	.sticky-post {
		border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
		display: inline-block;
		font-weight: 900;
		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
		text-transform: uppercase;

		& + .entry-title {
			margin-top: 0;
		}
	}
}

.entry-footer {
	font-size: #{map-deep-get($config-global, "font", "size", "sm")};

	& > span {
		display: block;
		margin: 0;
	}

	a {
		color: inherit;
		text-decoration: none;

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

article .entry-header .entry-title,
.page-title,
.a8c-posts-list .a8c-posts-list-item__title {
	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};

	a {
		color: inherit;
		text-decoration: none;

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

.wp-block-newspack-blocks-homepage-articles article .entry-title {
	a {
		color: inherit;
		text-decoration: none;

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

// Cover & Hero block
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-coblocks-hero .wp-block-coblocks-hero__box {
	& > * {
		margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
		margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

		@include media(mobile) {
			margin-top: map-deep-get($config-global, "spacing", "vertical");
			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
		}

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

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

// Quote block
.wp-block-quote {
	p {
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
	}
}

// Table block
table,
.wp-block-table {
	td,
	th {
		border-color: #{map-deep-get($config-global, "color", "border", "default")};
	}
}

// Blog Posts Listing
.a8c-posts-list {
	text-align: center;

	.a8c-posts-list-item__featured {
		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};

		span {
			border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
			display: inline-block;
			font-weight: 900;
			text-transform: uppercase;
		}

		& + .a8c-posts-list-item__title {
			margin-top: 0;
		}
	}

	.a8c-posts-list-item__meta {
		a {
			text-decoration: none;

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

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

	.a8c-posts-list__view-all {
		text-decoration: none;
	}
}

// Pagination
.pagination {
	text-align: center;

	.nav-links {
		& > * {
			color: #{map-deep-get($config-global, "color", "foreground", "default")};
			font-size: #{map-deep-get($config-global, "font", "size", "base")};
			font-weight: 900;
			text-transform: uppercase;

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

		a {
			text-decoration: none;
		}

		.svg-icon {
			display: none;
		}
	}
}

// Post Navigation
.post-navigation {
	border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
	margin-top: -#{2 * map-deep-get($config-global, "spacing", "vertical")};
	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};

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

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

	.meta-nav {
		color: #{map-deep-get($config-global, "color", "foreground", "default")};
		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
		font-weight: 900;
		text-transform: uppercase;
	}

	.post-title {
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
		font-weight: normal;
	}
}

// Footer
#colophon {
	flex-direction: column;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};

	.site-info {
		background: #{map-deep-get($config-global, "color", "foreground", "default")};
		border-bottom: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
		border-top: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
		font-weight: 900;
		padding: #{map-deep-get($config-global, "spacing", "vertical")} #{map-deep-get($config-global, "spacing", "horizontal")};
		@extend %responsive-alignfull;

		@include media(tablet) {
			flex: 1 0 100%;
			width: 100%;
		}

		a {
			text-decoration: none;
		}

		.site-name {
			font-weight: inherit;
		}
	}

	.footer-navigation {
		background: #{map-deep-get($config-global, "color", "foreground", "default")};
		border-top: 5px solid #{map-deep-get($config-global, "color", "primary", "default")};
		display: block;
		margin-bottom: 0;
		padding: #{0.5 * map-deep-get($config-global, "spacing", "vertical")} #{map-deep-get($config-global, "spacing", "horizontal")};
		text-align: center;
		text-transform: uppercase;

		@extend %responsive-alignfull;

		@include media(tablet) {
			flex: 1 0 100%;
			order: 1;
			width: 100%;

			.footer-menu {
				justify-content: center;
			}
		}

		a {
			text-decoration: none;
		}

		& + .site-info {
			border-top: 0;
			margin-top: 0;
			padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")} #{0.666 * map-deep-get($config-global, "spacing", "vertical")};
		}

		& > div {
			display: block;
		}
	}
}

// Comments
.comments-area {
	.comment-list,
	.children {
		border: 0;

		> li {
			border: 0;

			.comment-body {
				border: 1px solid map-deep-get($config-global, "color", "border", "light");
				padding: 0 #{map-deep-get($config-global, "spacing", "vertical")};
			}
		}
	}

	.comment-meta {
		a {
			color: inherit;
			text-decoration: none;

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

		.fn {
			font-weight: 900;
		}
	}

	.avatar {
		border-radius: 50%;
	}

	.reply {
		color: #{map-deep-get($config-global, "color", "foreground", "light")};;
		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
		font-size: #{map-deep-get($config-global, "font", "size", "base")};
		font-weight: 900;
		text-align: center;
		text-transform: uppercase;

		a {
			color: inherit;
			text-decoration: none;

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

	@include media(mobile) {
		.comment-meta,
		.comment-author {
			flex-direction: column;
		}

		.comment-meta {
			margin-top: -16px;
		}

		.avatar {
			margin-left: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
		}
	}
}

.comments-title,
.comment-reply-title {
	font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
}

.comment-form {
	.form-submit {
		justify-content: center;
		text-align: center;
	}
}

// Comments Navigation
.comment-navigation {
	a {
		font-size: #{map-deep-get($config-global, "font", "size", "base")};
		font-weight: 900;
		text-decoration: none;
		text-transform: uppercase;
	}
}

// Widgets
.widget-area {
	border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
	width: 100%;

	.widget-title,
	.widgettitle {
		font-size: #{map-deep-get($config-global, "font", "size", "base")};
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
		text-transform: uppercase;

		&:empty {
			display: none;
		}
	}

	@include media(laptop) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		& > *:nth-child(2) {
			margin-top: 0;
		}

		.widget {
			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
		}
	}
}

.widget_calendar,
.widget_calendar {
	caption {
		font-weight: bold;
	}

	td,
	th {
		text-align: center;
	}
}

.widget_archive,
.widget_categories,
.widget_links,
.widget_meta,
.widget_nav_menu,
.widget_pages,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss,
.widget_rss_links,
.widget_top-posts,
.widget_authors,
.widget_jp_blogs_i_follow,
.widget_top-click,
.widget_upcoming_events_widget {
	ul {
		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
		list-style: none;
		margin-left: 0;
		padding-left: 0;

		li > ul {
			padding-left: inherit;
		}
	}

	li {
		border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
	}
}

.widget_categories .children,
.widget_nav_menu .sub-menu,
.widget_pages .children {
	border-bottom: 0;
	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
	padding-left: map-deep-get($config-global, "spacing", "horizontal");
}

.widget_recent_entries .post-date {
	display: block;
}

.widget_rss {
	cite,
	.rssSummary,
	.rss-date {
		display: block;
	}
}

.widget_search {
	input[type="search"] {
		display: block;
		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
		width: 100%;
	}
}

// Homepage, if first block is full-width
.home.hide-homepage-title {
	#masthead {
		&:before {
			z-index: 1;
		}
	}

	.entry-content {
		& > *:first-child {
			&.alignfull {
				margin-top: -#{2 * map-deep-get($config-global, "spacing", "vertical")};
				position: relative;
			}
		}
	}
}