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

/**
 * Extra Child Theme Styles
 */

$color_background: map-deep-get($config-global, "color", "background", "default");
$color_foreground: map-deep-get($config-global, "color", "foreground", "default");
$color_foreground_light: map-deep-get($config-global, "color", "foreground", "light");
$color_primary: map-deep-get($config-global, "color", "primary", "default");
$color_primary_hover: map-deep-get($config-global, "color", "primary", "hover");

$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
$spacing_unit: map-deep-get($config-global, "spacing", "unit");

/**
 * Elements
 */
b, strong {
	font-weight: 600;
}

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

/**
 * Header
 */
.site-header {
	max-width: 100%;
	padding-left: $spacing_unit;
	padding-right: $spacing_unit;
	position: relative;

	@include media(mobile) {
		padding: #{1.5 * $spacing_unit} $spacing_vertical;
	}
}

/**
 * CSS-grid Desktop Menu
 */
@include media(mobile) {
	.site-header {
		align-items: center;
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
		grid-template-areas:
			"site-branding main-navigation";

		&:before,
		&:after {
			content: none;
			display: none;
		}

		& > * {
			margin-top: 0;
			margin-bottom: 0;
		}

		.site-branding {
			grid-area: site-branding;
			align-self: center;
		}

		.site-logo {
			& + .site-title {
				margin-top: #{map-deep-get($config-global, "spacing", "unit")};
			}
		}

		.site-title {
			& + .site-description {
				margin-top: #{0.5 * $baseline-unit};
			}
		}

		.main-navigation {
			align-self: center;
			grid-area: main-navigation;
			justify-self: flex-end;

			& > div > ul {
				justify-content: flex-end;
				margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};

				& > li > a {
					padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
				}

				& > .menu-item-has-children > a::after {
					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
				}
			}

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

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

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

					&:before {
						border-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid #{map-deep-get($config-global, "color", "primary", "default")};
						border-left: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent;
						border-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent;
						content: "";
						display: block;
						margin-left: #{map-deep-get($config-global, "spacing", "unit")};
						width: #{map-deep-get($config-global, "spacing", "unit")};
					}
				}

				& li {

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

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

		.social-navigation {
			align-self: center;
			justify-self: flex-end;
		}
	}
}

/**
 * Main
 */
.site-main {
	padding-top: 0;
}

.site-main > article > .entry-header,
.site-main > .page-header,
.site-main > .not-found > .page-header {
	margin-top: #{0.666 * $spacing_vertical};
		@include media(mobile) {
			margin-top: #{2 * $spacing_vertical};
		}
}

/**
 * Content
 */

// Entry Title Link
.entry-title,
.page-title,
.a8c-posts-list .a8c-posts-list-item__title {
	a {
		color: inherit;
		text-decoration: none;

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

// Sticky tag
.sticky-post,
.a8c-posts-list .a8c-posts-list-item__featured span {
	padding: #{0.5 * $baseline-unit} #{0.66 * $spacing_unit};
}

/**
 * Next/Previous navigation
 */
// Singular navigation
.post-navigation {
	.meta-nav {
		color: map-deep-get($config-global, "color", "foreground", "light");
	}

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

/**
 * Comments
 */
.logged-in-as,
.comment-notes,
.comment-form-cookies-consent {
	font-size: map-deep-get($config-global, "font", "size", "sm");
}

.comment-form-cookies-consent input[type=checkbox] + label {
	line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
}

.comment-notes {
	color: map-deep-get($config-global, "color", "foreground", "light");
}

.comment-form > p:not(.comment-form-cookies-consent) label {
	font-weight: 600;
}

/**
 * Blocks
 */

// Cover
.wp-block-cover,
.wp-block-cover-image {
	h1, h2, h3, h4, h5, h6 {
		font-weight: 700;
	}

	@include media(desktop) {
		min-height: #{20 * map-deep-get($config-global, "spacing", "vertical")};

		h1 {
			font-size: map-deep-get($config-global, "font", "size", "xxxxl")
		}

		h2 {
			font-size: map-deep-get($config-global, "font", "size", "xxxl");
		}

		h3 {
			font-size: map-deep-get($config-global, "font", "size", "xxl");
		}

		h4 {
			font-size: map-deep-get($config-global, "font", "size", "xl");
		}

		h5 {
			font-size: map-deep-get($config-global, "font", "size", "lg");
		}

		h6 {
			font-size: map-deep-get($config-global, "font", "size", "md");
		}
	}
}

// Column
.wp-block-columns.alignfull {
	@include media(mobile) {
		padding-right: $spacing_vertical;
		padding-left: $spacing_vertical;
	}
}

.jetpack-business-hours {
	dd {
		padding-left: 0;
	}
}

/**
 * Widgets
 */
.widget {
	select {
		max-width: 100%;
	}
}

.widget-title {
	font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
	margin-bottom: #{0.5 * $spacing_vertical};
}

.widget_archive,
.widget_categories,
.widget_meta,
.widget_nav_menu,
.widget_pages,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss {

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

		li {
			color: map-deep-get($config-global, "color", "foreground", "light");
			font-weight: 600;
		}

		ul {
			counter-reset: submenu;
		}

		ul > li > a::before {
			font-weight: normal;
			content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
			counter-increment: submenu
		}
	}
}

.widget_tag_cloud {
	.tagcloud {
		font-weight: 600;
	}
}

.widget_search {
	.search-field {
		width: 100%;

		@include media(mobile) {
			width: auto;
		}
	}

	.search-submit {
		display: block;
		margin-top: $typescale-base;
	}
}

.widget_calendar .calendar_wrap {
	text-align: center;

	table td,
	table th {
		border: none;
	}

	a {
		text-decoration: underline;
	}
}

.widget_links li,
.widget_jp_blogs_i_follow li,
.widget_rss_links li {
	font-family: inherit;
	font-family: var( --font-base, inherit );
}

/**
 * Footer
 */

@include media(mobile-only) {
	.site-info {
		text-align: center;
	}
}

//Social Navigation
.social-navigation {
	flex: 1 0 50%;
	order: 2;
	margin-bottom: 0;
}

.social-links-menu {
	flex-wrap: wrap;
	justify-content: flex-end;
}

@include media(mobile-only) {
	.social-links-menu {
		justify-content: center;
	}
}