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

/**
 * Extra Child Theme Styles
 */

$color_background: map-deep-get($config-global, "color", "background", "default");
$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");

/**
 * Elements
 */

html {
	// Set mobile font-size
	font-size: #{map-deep-get($config-global, "font", "size", "root")};
	font-weight: 300;
}

body {
	font-weight: 300;
}

b, strong {
	font-weight: 700;
}

a {
	text-decoration-color: $color_primary_hover;

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

	.site-header &:hover,
	.site-header &:focus {
		background: $color_background;
	}
}

/**
 * Components
 */

.site-title,
.site-description {
	color: $color_primary;
	text-transform: uppercase;
	line-height: 1;
	max-width: 100%;
	a {
		color: currentColor;
		padding-left: 5px;
		padding-right: 5px;
		margin-left: -5px;
		margin-right: 5px;
	}
}

.main-navigation > div > ul > li > a,
.entry-content a {
	text-decoration: underline;
	text-decoration-color: $color_primary_hover;
	&:hover {
		text-decoration: none;
	}
}

.main-navigation > div > ul > li > a,
.social-navigation > div > ul > li > a,
.footer-navigation .footer-menu > li > a {
	padding-left: 0;
	padding-right: 0;
}

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

.sticky-post {
	text-transform: uppercase;
	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
}

#main .page-header {

	margin-top: $spacing_vertical;

	.page-title {
		font-size: #{map-deep-get($config-global, "font", "size", "base")};
		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
		font-weight: 500;
		text-transform: uppercase;
		line-height: 1;
	}
}

.entry-title,
.author-bio .author-title,
.post-navigation .post-title,
.comment-reply-title {
	font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
	letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
	line-height: 1;
	text-transform: uppercase;
}


.entry-meta,
.entry-footer {
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .1em;

	& > span {
		display: inline;
	}

	a {
		text-decoration-color: currentColor;
	}
}

.nav-links .meta-nav {
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .1em;
}

.post-navigation .post-title {
	font-weight: 300;
}

.footer-navigation,
.footer-navigation .footer-menu a {
	font-weight: 500;
	text-transform: uppercase;
	text-decoration-color: currentColor;
}

.site-info a {
	text-decoration-color: currentColor;
}

.imprint {
	font-weight: 500;
}

.has-drop-cap:not(:focus):first-letter {
	color: $color_primary;
}

/**
 * Blocks
 */

// Button
button,
.button,
input[type="submit"],
a.wp-block-button__link,
a.wp-block-file__button {
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}

// Cover
.wp-block-cover,
.wp-block-cover-image {

	.wp-block-cover__inner-container,
	.wp-block-cover-image-text,
	.wp-block-cover-text {

		a {
			text-decoration-color: currentColor;

			&:hover,
			&:active, {
				background-color: transparent;
			}
		}
	}
}

// Latest Post
.wp-block-latest-posts > li > a {
	text-transform: uppercase;
}

.wp-block-newspack-blocks-homepage-articles article .entry-title {
	text-transform: none;
}

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

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

@include media(mobile-only) {
	.site-header {
		position: relative;
		.site-branding {
			padding-right: (3.5 * $spacing_vertical);
		}
	}

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

	#toggle-menu {
		position: absolute;
		top: (0.5 * $spacing_vertical);
		right: (0.5 * $spacing_vertical);
	}
}

@include media(mobile) {

	// Revise header width
	.site-header.alignfull {
		align-items: flex-end;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 100vw;
		padding-left: #{2 * $spacing_horizontal};
		padding-right: #{2 * $spacing_horizontal};
		margin-bottom: 0;
		width: 100%;
		z-index: 10;
	}

	.site-branding {
		margin-bottom: 0;
		flex: 6 1 70%;
	}

	.main-navigation {
		align-self: flex-start;
		flex: 1 1 auto;
		margin: 0;
	}

	.social-navigation {
		margin: 0;
		width: auto;
	}

	.main-navigation > div > ul {
		display: inherit;
	}

	.main-navigation > div > ul > li > .sub-menu {
		left: inherit;
		right: 0;
	}

	.wp-block-columns.alignfull {
		padding-left: #{2 * $spacing_horizontal};
		padding-right: #{2 * $spacing_horizontal};
	}
}

@include media(tablet) {

	.site-header.alignfull {
		position: fixed;
	}

	.site-branding {
		position: relative;
		z-index: 99;
	}

	.main-navigation,
	.social-navigation {
		margin-top: 0;
	}

	.main-navigation {
		z-index: 999;
	}

	.social-navigation {
		position: fixed;
		left: #{2 * $spacing_horizontal};
		bottom: #{2 * $spacing_horizontal};
		z-index: 888;

		& > div > ul {
			flex-direction: column-reverse;
		}
	}

	.main-navigation > div > ul {
		display: block;
	}

	.content-area {
		margin-top: #{10 * $spacing_horizontal};
		position: relative;
		z-index: 2;
		.hide-homepage-header & {
			margin-top: 0;
		}
	}

	.nav-links {
		display: block;
	}

	.nav-links .nav-next,
	.nav-links .nav-previous {
		max-width: 100%;
		margin-bottom: #{$spacing_vertical};
	}

	.nav-links .nav-next {
		text-align: left;
	}
}

@include media(desktop) {

}

/**
 * AMP Support
 */
 html[amp] {

	@include media( tablet ) {
		.site-header {
			position: sticky;
			top: 0;
		}

		.logged-in .site-header {
			top: 32px;
		}

		.content-area {
			margin: 0;
		}
	}
	@media screen and ( max-width: 782px ) {
		.logged-in .site-header {
			top: 46px;
		}
	}
}

/**
 * Search block
 */

 .wp-block-search {
	&.wp-block-search__button-inside {
		.wp-block-search__inside-wrapper{
			border-radius: 9999px;
		}
		.wp-block-search__input {
			background: transparent;
		}
	}
	.wp-block-search__button{
		border-radius: 9999px;
		&.has-icon {
			min-width: calc(2* #{map-deep-get($config-elements, "form", "padding")} + #{map-deep-get($config-global, "font", "size", "base")} + 4px);
			min-height: calc(2* #{map-deep-get($config-elements, "form", "padding")} + #{map-deep-get($config-global, "font", "size", "base")} + 4px);
		}
	}
	.wp-block-search__input {
		margin-right: calc( .1 * #{map-deep-get($config-button, "padding", "horizontal")} );
		border-radius: 9999px;
	}
}