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

/**
 * Extra Child Theme Styles
 */

// HTML reset
html {
	@include font-family (map-deep-get($config-global, "font", "family", "primary") );
}

// Link style
a {
	text-decoration: none;

	.wp-block-cover &,
	.wp-block-cover-image &,
	.wp-block-media-text &,
	p:not(.site-title) & {
		text-decoration: underline;

		&.wp-block-button__link,
		&:hover {
			text-decoration: none;
		}
	}
}

// Page
.site {
	border-top: 5px solid map-deep-get($config-global, "color", "foreground", "default");
	position: relative;

	&:before {
		border-top: 1px solid rgba(#fff, 0.5);
		content: "";
		left: 0;
		position: absolute;
		top: -5px;
		width: 100%;
	}
}

// Header
#masthead {
	padding-top: map-deep-get($config-global, "spacing", "vertical");

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

	@include media(mobile) {
		align-content: center;
		align-items: center;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		max-width: 92vw;
		padding-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
		padding-top: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};

		.site-branding {
			flex: 1 100%;
		}

		.main-navigation {
			padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
			padding-right: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
		}

		.social-navigation {
			padding-left: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
			padding-right: #{2 * map-deep-get($config-global, "spacing", "horizontal")};
			margin: 0;
		}
	}
}

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

	.site-info {
		@include media(mobile) {
			max-width: 92vw;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.footer-navigation {
		& + .site-info {
			text-align: left;
		}

		.footer-menu > li:last-of-type > a {
			padding-right: 0;
		}
	}
}

// Navigation
.main-navigation {
	#toggle-menu {
		text-transform: uppercase;
	}

	@include media(mobile) {
		a {
			padding: #{0.75 * map-deep-get($config-header, "main-nav", "link-padding")} map-deep-get($config-header, "main-nav", "link-padding");
		}
	}

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

	& > div {
		background: #{map-deep-get($config-global, "color", "border", "light")};
		border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
		padding-left: map-deep-get($config-global, "spacing", "horizontal");
		padding-right: map-deep-get($config-global, "spacing", "horizontal");

		@include media(mobile) {
			background: none;
			border-radius: 0;
			padding-left: 0;
			padding-right: 0;
		}
	}

	@include media(mobile) {
		& > div > ul > li {
			margin: 0 #{0.25 * map-deep-get($config-global, "spacing", "horizontal")};
		}

		& > 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:hover,
		& > div > ul > li:focus-within,
		& > div > ul > li.current-menu-item {

			& > a {
				background: #{map-deep-get($config-global, "color", "primary", "default")};
				border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
				color: #{map-deep-get($config-global, "color", "background", "default")};
			}

			& > ul {
				border-radius: #{map-deep-get($config-global, "border-radius", "sm")};
				overflow: hidden;
			}

			& li {

				& > a {
					background: #{map-deep-get($config-global, "color", "foreground", "default")};
					color: #{map-deep-get($config-global, "color", "background", "default")};
					font-weight: normal;
				}

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

		& > div > ul > .menu-item-has-children > a::after {
			opacity: 0.67;
		}
	}
}

// Center common elements
.site-branding,
.site-info,
.main-navigation,
.entry-header,
.entry-footer,
.page-title,
.author-title,
.comments-title,
.comment-reply-title,
.a8c-posts-list {
	text-align: center;
}

.main-navigation > div {
	text-align: left;
}

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

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

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

.home.page.hide-homepage-title .site-main {
	padding-top: 0;
}

.home.page.hide-homepage-header.hide-homepage-title .hentry .entry-content {

		> .wp-block-image.alignfull:first-child,
		> .wp-block-cover.alignfull:first-child,
		> .wp-block-media-text.alignfull:first-child,
		> .wp-block-group.has-background.alignfull:first-child {
			margin-top: 0;
		}
}

// 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", "primary") );
	}
}

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

// Posts List block
.a8c-posts-list-item__excerpt {
	text-align: left;
}

.wp-block-newspack-blocks-homepage-articles {
	article {
		.entry-title a{
			&:active,
			&:focus,
			&:hover {
				text-decoration: none;
			}
		}

		.cat-links,
		.entry-meta {
			@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		}

		.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 {
				text-decoration: underline;
			}
		}
	}
}

.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:hover {
			text-decoration: underline;
		}
	}
}

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

.entry-footer {
	border-top: 1px solid #{map-deep-get($config-global, "color", "border", "default")};
	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
	font-size: #{map-deep-get($config-global, "font", "size", "xs")};
	padding-top: #{map-deep-get($config-global, "spacing", "unit")};
}

article .entry-header .entry-title,
.page-title,
.a8c-posts-list-item__title  {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
	font-size: #{map-deep-get($config-global, "font", "size", "xxxl")};
	margin-bottom: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};

	a {
		color: inherit;

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

.wp-block-newspack-blocks-homepage-articles article .entry-title {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
	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")};
		}
	}
}

.entry-content {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
}

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

	.nav-links > * {
		color: map-deep-get($config-global, "color", "foreground", "light");
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		font-size: #{map-deep-get($config-global, "font", "size", "base")};
		text-transform: uppercase;

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

	svg {
		fill: currentColor;
	}

	&:before {
		background: map-deep-get($config-global, "color", "border", "default");;
		height: 1px;
		content: "";
		display: block;
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};

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

		@extend %responsive-alignfull;
	}
}

// Post Navigation
.post-navigation {
	a {
		color: map-deep-get($config-global, "color", "foreground", "default");

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

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

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

	&:before {
		background: map-deep-get($config-global, "color", "border", "default");;
		height: 1px;
		content: "";
		display: block;
		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};

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

		@extend %responsive-alignfull;
	}
}

// Comments
.comments-area {
	&:before {
		background: map-deep-get($config-global, "color", "border", "default");;
		height: 1px;
		content: "";
		display: block;
		margin-bottom: map-deep-get($config-global, "spacing", "vertical");

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

		@extend %responsive-alignfull;
	}

	.comment-list {
		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");

		> li {
			border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
		}
	}

	.children {
		> li {
			border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
		}
	}
}

.comments-title,
.comment-reply-title {
	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
	font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
}

.comment-meta {
	.comment-metadata {
		color: map-deep-get($config-global, "color", "foreground", "light");
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );

		a {
			color: inherit;
		}

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

// Comments Navigation
.comment-navigation {
	a {
		color: map-deep-get($config-global, "color", "foreground", "light");
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
		text-transform: uppercase;

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

	.comments-title + & {
		display: none;
	}
}

// Widgets
.widget-area {
	font-size: #{map-deep-get($config-global, "font", "size", "sm")};

	.widget-title,
	.widgettitle {
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		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(mobile) {
		padding-top: map-deep-get($config-global, "spacing", "vertical");
	}

	@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;
		padding-left: 0;
	}

	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%;
	}
}


/**
 * 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( .1 * #{map-deep-get($config-button, "padding", "horizontal")} );
		border-radius: #{map-deep-get($config-button, "border-radius")};
	}
}