Mayland: Update with the latest Varia

mayland/sass/_config-child-theme-deep.scss

@@ -189,6 +189,10 @@ $config-button: (
  */
 $config-cover: (
 	"height": calc( 15 * #{map-deep-get($config-global, "spacing", "vertical")} ),
+	"color": (
+		"foreground": #{map-deep-get($config-global, "color", "white")},
+		"background": #{map-deep-get($config-global, "color", "black")},
+	)
 );
 
 /**
@@ -294,7 +298,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "xl"),
+				"size": map-deep-get($config-global, "font", "size", "lg"),
 				"weight": 700,
 				"line-height": 1,
 			),

mayland/sass/_extra-child-theme.scss

@@ -25,80 +25,122 @@ a {
 	}
 }
 
-.site-branding,
-.main-navigation,
-.entry-header,
-.entry-footer,
-.page-title,
-.author-title,
-.comments-title,
-.comment-reply-title,
-.logged-in-as,
-.comment-notes {
-	text-align: center;
-}
-
-.comment-reply-title {
-	display: inherit;
-}
-
-.comment .comment-reply-title {
-	display: flex;
-}
-
-.main-navigation > div {
-	text-align: left;
-}
-
-.main-navigation > div > ul,
-.social-navigation > div > ul,
-.pagination .nav-links {
-	justify-content: center;
-}
-
-
 /**
  * Header
  */
-#masthead {
-	margin-right: auto;
-	margin-left: auto;
-	padding-top: $spacing_vertical;
-	padding-bottom: $spacing_vertical;
-
-	@extend %responsive-width-wide;
+.site-header {
+	max-width: 100%;
+	padding-left: $spacing_unit;
+	padding-right: $spacing_unit;
+	position: relative;
 
 	@include media(mobile) {
-		padding-top: #{2 * $spacing_vertical};
-		padding-bottom: #{1.5 * $spacing_vertical};
+		padding: #{1.5 * $spacing_unit} $spacing_vertical;
 	}
 }
 
-.site-title {
-	letter-spacing: map-deep-get($config-global, "font", "letter-spacing", "xl");
-}
-
-.site-logo + .site-title {
-	margin-top: #{ 0.25 * $spacing_vertical};
-}
-
-.site-title + .site-description {
-	margin-top: #{ 0.5 * $spacing_unit};
-}
-
 /**
- * Navigation
+ * CSS-grid Desktop Menu
  */
-.site-header > * {
-	&.main-navigation {
-		@include media(mobile) {
-			margin-bottom: 0;
+@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;
 		}
-	}
 
-	&.social-navigation {
-		@include media(mobile) {
+		& > * {
 			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;
 		}
 	}
 }
@@ -106,14 +148,16 @@ a {
 /**
  * Main
  */
-#main {
+.site-main {
 	padding-top: 0;
 }
 
-.site-main > article > .entry-header {
+.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: $spacing_vertical;
+			margin-top: #{2 * $spacing_vertical};
 		}
 }
 
@@ -176,31 +220,92 @@ a {
 	font-weight: 600;
 }
 
-.comment-respond {
-	.form-submit {
-		display: flex;
-		justify-content: flex-end;
-	}
-}
-
 /**
  * Blocks
  */
 
-// Posts List
-.a8c-posts-list {
-	text-align: center;
-}
-
-.a8c-posts-list-item__excerpt {
-	text-align: left;
-}
 
 /**
- * Widget
+ * 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 {
+		margin-left: 0;
+		margin-right: 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;
+}

mayland/style-editor.css

@@ -107,17 +107,9 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Responsive breakpoints
  * - breakpoints values are defined in _config-global.scss
  */
-/**
- * Align widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
 /**
  * Align wide widths
- * - Sets negative margin for .alignwide and .alignfull blocks
- */
-/**
- * Align container widths
- * - Sets a fixed-width on content within alignwide and alignfull blocks
+ * - Sets .alignwide widths
  */
 /**
  * Crop Text Boundry
@@ -335,7 +327,8 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #242424;
+	background-color: black;
+	color: white;
 	min-height: calc( 15 * 32px);
 	/* Treating H2 separately to account for legacy /core styles */
 }
@@ -343,18 +336,22 @@ object {
 .wp-block-cover .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover-image-text,
 .wp-block-cover .wp-block-cover-text,
+.wp-block-cover .block-editor-block-list__block,
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text {
-	color: #FAF8F5;
+.wp-block-cover-image .wp-block-cover-text,
+.wp-block-cover-image .block-editor-block-list__block {
+	color: white;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
 .wp-block-cover .wp-block-cover-image-text a,
 .wp-block-cover .wp-block-cover-text a,
+.wp-block-cover .block-editor-block-list__block a,
 .wp-block-cover-image .wp-block-cover__inner-container a,
 .wp-block-cover-image .wp-block-cover-image-text a,
-.wp-block-cover-image .wp-block-cover-text a {
+.wp-block-cover-image .wp-block-cover-text a,
+.wp-block-cover-image .block-editor-block-list__block a {
 	color: currentColor;
 }
 
@@ -438,6 +435,45 @@ object {
 	padding-left: 0;
 }
 
+.wp-block-latest-posts > li > a {
+	font-family: Poppins, sans-serif;
+	font-size: 1.2rem;
+	font-weight: 700;
+	line-height: 1.125;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li {
+	/* Vertical margins logic */
+	margin-top: 32px;
+	margin-bottom: 32px;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-posts:not(.is-grid) > li:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: #6e6e6e;
+	font-size: 0.83333rem;
+	line-height: 1.6;
+}
+
+[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
+.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
+	color: currentColor;
+}
+
+.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
+	font-size: 0.83333rem;
+	line-height: 1.6;
+	margin: 0;
+}
+
 .wp-block-media-text .block-editor-inner-blocks {
 	padding-right: 16px;
 	padding-left: 16px;
@@ -646,14 +682,20 @@ table th,
 	color: #FAF8F5 !important;
 }
 
+.has-background:not(.has-background-background-color) a,
+.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
+.has-background .wp-block-quote__citation {
+	color: currentColor;
+}
+
 .has-primary-background-color[class] {
 	background-color: #8D6708 !important;
 	color: #FAF8F5;
 }
 
-.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
-.has-primary-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
+.has-primary-background-color[class] {
+	background-color: #8D6708 !important;
+	color: #FAF8F5;
 }
 
 .has-secondary-background-color[class] {
@@ -661,71 +703,36 @@ table th,
 	color: #FAF8F5;
 }
 
-.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
-.has-secondary-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-background-color[class] {
 	background-color: #242424 !important;
 	color: #FAF8F5;
 }
 
-.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
-.has-foreground-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-light-background-color[class] {
 	background-color: #6e6e6e !important;
 	color: #FAF8F5;
 }
 
-.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
-.has-foreground-light-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
 	color: #FAF8F5;
 }
 
-.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
-.has-foreground-dark-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-light-background-color[class] {
 	background-color: #DDDDDD !important;
 	color: #242424;
 }
 
-.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
-.has-background-light-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-dark-background-color[class] {
 	background-color: #CCC5B9 !important;
 	color: #242424;
 }
 
-.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
-.has-background-dark-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .has-background-background-color[class] {
 	background-color: #FAF8F5 !important;
 	color: #242424;
 }
 
-.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
-.has-background-background-color[class] .wp-block-quote__citation {
-	color: currentColor;
-}
-
 .is-small-text,
 .has-small-font-size {
 	font-size: 0.83333em;
@@ -776,15 +783,18 @@ table th,
 }
 
 .margin-right-none {
-	margin-top: 0 !important;
+	/*rtl:ignore*/
+	margin-right: 0 !important;
 }
 
 .margin-right-half {
-	margin-top: 16px !important;
+	/*rtl:ignore*/
+	margin-right: 16px !important;
 }
 
 .margin-right-default {
-	margin-top: 32px !important;
+	/*rtl:ignore*/
+	margin-right: 32px !important;
 }
 
 .margin-bottom-none {
@@ -800,15 +810,18 @@ table th,
 }
 
 .margin-left-none {
-	margin-top: 0 !important;
+	/*rtl:ignore*/
+	margin-left: 0 !important;
 }
 
 .margin-left-half {
-	margin-top: 16px !important;
+	/*rtl:ignore*/
+	margin-left: 16px !important;
 }
 
 .margin-left-default {
-	margin-top: 32px !important;
+	/*rtl:ignore*/
+	margin-left: 32px !important;
 }
 
 /*
@@ -827,15 +840,18 @@ table th,
 }
 
 .padding-right-none {
-	padding-top: 0 !important;
+	/*rtl:ignore*/
+	padding-right: 0 !important;
 }
 
 .padding-right-half {
-	padding-top: 16px !important;
+	/*rtl:ignore*/
+	padding-right: 16px !important;
 }
 
 .padding-right-default {
-	padding-top: 32px !important;
+	/*rtl:ignore*/
+	padding-right: 32px !important;
 }
 
 .padding-bottom-none {
@@ -851,15 +867,18 @@ table th,
 }
 
 .padding-left-none {
-	padding-top: 0 !important;
+	/*rtl:ignore*/
+	padding-left: 0 !important;
 }
 
 .padding-left-half {
-	padding-top: 16px !important;
+	/*rtl:ignore*/
+	padding-left: 16px !important;
 }
 
 .padding-left-default {
-	padding-top: 32px !important;
+	/*rtl:ignore*/
+	padding-left: 32px !important;
 }
 
 /**