Browse Source

Morden: Add the "boxed" style to the theme

Thomas Guillot 6 years ago
parent
commit
20f421174b

+ 2 - 2
morden/sass/_config-child-theme-deep.scss

@@ -76,7 +76,7 @@ $config-global: (
 		"background": (
 			"default": white,
 			"light": #F8F8F8, // must be accessible against foreground-default
-			"dark": #C5C5C5, // must be accessible against foreground-default
+			"dark": #E1DFDF, // must be accessible against foreground-default
 		),
 		"border": (
 			"default": #C5C5C5,
@@ -252,7 +252,7 @@ $config-pullquote: (
 	// Border
 	"color": (
 		"border": #{map-deep-get($config-global, "color", "border", "default")},
-		"background": #{map-deep-get($config-global, "color", "primary", "default")},
+		"background": #{map-deep-get($config-global, "color", "background", "light")},
 	),
 	// Border
 	"border": (

+ 100 - 19
morden/sass/_extra-child-theme.scss

@@ -3,6 +3,56 @@
  */
 // @import "";
 
+%responsive-width-wide {
+
+	@include align-width( $content-width-flex, -0.15 );
+
+	@include media(mobile) {
+		@include align-width( $content-width-sm, -0.15 );
+	}
+
+	@include media(tablet) {
+		@include align-width( $content-width-md, -0.15 );
+	}
+
+	@include media(laptop) {
+		@include align-width( $content-width-lg, -0.15 );
+	}
+
+	@include media(desktop) {
+		@include align-width( $content-width-lg, -0.15 );
+	}
+
+	@include media(wide) {
+		@include align-width( $content-width-lg, -0.15 );
+	}
+}
+
+%responsive-width-full {
+
+	@include align-width( $content-width-flex, -0.4 );
+
+	@include media(mobile) {
+		@include align-width( $content-width-sm, -0.4 );
+	}
+
+	@include media(tablet) {
+		@include align-width( $content-width-md, -0.4 );
+	}
+
+	@include media(laptop) {
+		@include align-width( $content-width-lg, -0.4 );
+	}
+
+	@include media(desktop) {
+		@include align-width( $content-width-lg, -0.4 );
+	}
+
+	@include media(wide) {
+		@include align-width( $content-width-lg, -0.4 );
+	}
+}
+
 a {
 	text-decoration: none;
 
@@ -19,6 +69,18 @@ a {
 	}
 }
 
+#page {
+	background: #{map-deep-get($config-global, "color", "background", "default")};
+	margin-left: auto;
+	margin-right: auto;
+
+	@extend %responsive-width-full;
+}
+
+body {
+	background: #{map-deep-get($config-global, "color", "background", "dark")};
+}
+
 /**
  * Wide Header & Footer
  */
@@ -31,22 +93,6 @@ a {
 	@extend %responsive-width-wide;
 }
 
-#masthead {
-	&:before {
-		background: #{map-deep-get($config-global, "color", "primary", "default")};
-		box-sizing: content-box;
-		content: "";
-		display: block;
-		height: 100%;
-		left: 50%;
-		position: absolute;
-		top: 0;
-		transform: translateX(-50%);
-		width: 100vw;
-		z-index: -1;
-	}
-}
-
 /**
  * Mobile-Menu
  */
@@ -163,6 +209,13 @@ a {
 					}
 				}
 			}
+
+			& > div > ul > li.current-menu-item {
+				& > a {
+					color: inherit;
+					box-shadow: 0 2px 0;
+				}
+			}
 		}
 
 		.social-navigation {
@@ -181,8 +234,30 @@ a {
 }
 
 /**
- * Site Title
+ * Header
  */
+#masthead {
+	& > * {
+		position: relative;
+	}
+
+	&:before {
+		background: #{map-deep-get($config-global, "color", "primary", "default")};
+		content: "";
+		display: block;
+		height: 100%;
+		left: 50%;
+		margin: 0;
+		position: absolute;
+		top: 0;
+		transform: translateX(-50%);
+		z-index: 0;
+
+		@extend %responsive-width-full;
+	}
+}
+
+// Site Title
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
 }
@@ -218,17 +293,23 @@ a {
 	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
 	position: relative;
 
+	& > * {
+		position: relative;
+	}
+
 	&:before {
 		background: #{map-deep-get($config-global, "color", "foreground", "default")};
 		content: "";
 		display: block;
 		height: 100%;
 		left: 50%;
+		margin: 0;
 		position: absolute;
 		top: 0;
 		transform: translateX(-50%);
-		width: 100vw;
-		z-index: -1;
+		z-index: 0;
+
+		@extend %responsive-width-full;
 	}
 }
 

+ 3 - 3
morden/style-editor.css

@@ -497,7 +497,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #E22C2C;
+	background-color: #F8F8F8;
 	color: white;
 }
 
@@ -625,7 +625,7 @@ table th,
 }
 
 .has-background-dark-color[class] {
-	color: #C5C5C5 !important;
+	color: #E1DFDF !important;
 }
 
 .has-background-color[class] {
@@ -687,7 +687,7 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #C5C5C5 !important;
+	background-color: #E1DFDF !important;
 	color: #303030;
 }
 

+ 177 - 28
morden/style-rtl.css

@@ -1733,7 +1733,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #E22C2C;
+	background-color: #F8F8F8;
 	color: white;
 }
 
@@ -1968,7 +1968,7 @@ table th,
 }
 
 .has-background-dark-color[class] {
-	color: #C5C5C5 !important;
+	color: #E1DFDF !important;
 }
 
 .has-background-color[class] {
@@ -2030,7 +2030,7 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #C5C5C5 !important;
+	background-color: #E1DFDF !important;
 	color: #303030;
 }
 
@@ -2394,7 +2394,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #C5C5C5;
+	color: #E1DFDF;
 }
 
 .footer-navigation {
@@ -2447,7 +2447,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #C5C5C5;
+	color: #E1DFDF;
 }
 
 .entry-title {
@@ -3033,7 +3033,7 @@ img#wpstats {
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 .page-title {
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
@@ -3042,7 +3042,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
@@ -3052,7 +3052,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
@@ -3062,7 +3062,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
@@ -3072,7 +3072,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
@@ -3082,7 +3082,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
@@ -3229,6 +3229,134 @@ img#wpstats {
 /**
  * Extra Child Theme Styles
  */
+.wp-block-group.alignwide .alignwide,
+.wp-block-group.alignwide .alignfull,
+.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+#colophon {
+	margin-right: calc( -0.15 * ( 100vw - 100% ));
+	margin-left: calc( -0.15 * ( 100vw - 100% ));
+	width: calc( 100% + (0.15 * 2) * ( 100vw - 100% ));
+	max-width: calc( 100% + (0.15 * 2) * ( 100vw - 100% ));
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-right: calc( -0.15 * ( 100vw - calc( 560px - 32px) ));
+		margin-left: calc( -0.15 * ( 100vw - calc( 560px - 32px) ));
+		width: calc( calc( 560px - 32px) + (0.15 * 2) * ( 100vw - calc( 560px - 32px) ));
+		max-width: calc( calc( 560px - 32px) + (0.15 * 2) * ( 100vw - calc( 560px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-right: calc( -0.15 * ( 100vw - calc( 640px - 32px) ));
+		margin-left: calc( -0.15 * ( 100vw - calc( 640px - 32px) ));
+		width: calc( calc( 640px - 32px) + (0.15 * 2) * ( 100vw - calc( 640px - 32px) ));
+		max-width: calc( calc( 640px - 32px) + (0.15 * 2) * ( 100vw - calc( 640px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-right: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		margin-left: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-right: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		margin-left: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-right: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		margin-left: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+.page-title {
+	margin-right: calc( -0.4 * ( 100vw - 100% ));
+	margin-left: calc( -0.4 * ( 100vw - 100% ));
+	width: calc( 100% + (0.4 * 2) * ( 100vw - 100% ));
+	max-width: calc( 100% + (0.4 * 2) * ( 100vw - 100% ));
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-right: calc( -0.4 * ( 100vw - calc( 560px - 32px) ));
+		margin-left: calc( -0.4 * ( 100vw - calc( 560px - 32px) ));
+		width: calc( calc( 560px - 32px) + (0.4 * 2) * ( 100vw - calc( 560px - 32px) ));
+		max-width: calc( calc( 560px - 32px) + (0.4 * 2) * ( 100vw - calc( 560px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-right: calc( -0.4 * ( 100vw - calc( 640px - 32px) ));
+		margin-left: calc( -0.4 * ( 100vw - calc( 640px - 32px) ));
+		width: calc( calc( 640px - 32px) + (0.4 * 2) * ( 100vw - calc( 640px - 32px) ));
+		max-width: calc( calc( 640px - 32px) + (0.4 * 2) * ( 100vw - calc( 640px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-right: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		margin-left: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-right: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		margin-left: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-right: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		margin-left: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
 a {
 	text-decoration: none;
 }
@@ -3250,6 +3378,16 @@ p:not(.site-title) a:hover {
 	text-decoration: none;
 }
 
+#page {
+	background: white;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+body {
+	background: #E1DFDF;
+}
+
 /**
  * Wide Header & Footer
  */
@@ -3260,20 +3398,6 @@ p:not(.site-title) a:hover {
 	position: relative;
 }
 
-#masthead:before {
-	background: #E22C2C;
-	box-sizing: content-box;
-	content: "";
-	display: block;
-	height: 100%;
-	right: 50%;
-	position: absolute;
-	top: 0;
-	transform: translateX(50%);
-	width: 100vw;
-	z-index: -1;
-}
-
 /**
  * Mobile-Menu
  */
@@ -3382,6 +3506,10 @@ p:not(.site-title) a:hover {
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
 		background: #303030;
 	}
+	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+		color: inherit;
+		box-shadow: 0 2px 0;
+	}
 	.site-header .social-navigation {
 		align-self: center;
 		grid-area: social-navigation;
@@ -3394,8 +3522,25 @@ p:not(.site-title) a:hover {
 }
 
 /**
- * Site Title
+ * Header
  */
+#masthead > * {
+	position: relative;
+}
+
+#masthead:before {
+	background: #E22C2C;
+	content: "";
+	display: block;
+	height: 100%;
+	right: 50%;
+	margin: 0;
+	position: absolute;
+	top: 0;
+	transform: translateX(50%);
+	z-index: 0;
+}
+
 .site-description {
 	color: white;
 }
@@ -3431,17 +3576,21 @@ p:not(.site-title) a:hover {
 	position: relative;
 }
 
+.footer-wrapper > * {
+	position: relative;
+}
+
 .footer-wrapper:before {
 	background: #303030;
 	content: "";
 	display: block;
 	height: 100%;
 	right: 50%;
+	margin: 0;
 	position: absolute;
 	top: 0;
 	transform: translateX(50%);
-	width: 100vw;
-	z-index: -1;
+	z-index: 0;
 }
 
 .footer-navigation .footer-menu {

+ 177 - 28
morden/style.css

@@ -1733,7 +1733,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #E22C2C;
+	background-color: #F8F8F8;
 	color: white;
 }
 
@@ -1973,7 +1973,7 @@ table th,
 }
 
 .has-background-dark-color[class] {
-	color: #C5C5C5 !important;
+	color: #E1DFDF !important;
 }
 
 .has-background-color[class] {
@@ -2035,7 +2035,7 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #C5C5C5 !important;
+	background-color: #E1DFDF !important;
 	color: #303030;
 }
 
@@ -2399,7 +2399,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #C5C5C5;
+	color: #E1DFDF;
 }
 
 .footer-navigation {
@@ -2452,7 +2452,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #C5C5C5;
+	color: #E1DFDF;
 }
 
 .entry-title {
@@ -3038,7 +3038,7 @@ img#wpstats {
 	}
 }
 
-.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 .page-title {
 	margin-left: calc( -0.5 * ( 100vw - 100% ));
 	margin-right: calc( -0.5 * ( 100vw - 100% ));
@@ -3047,7 +3047,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 560px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 560px - 32px) ));
@@ -3057,7 +3057,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 640px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 640px - 32px) ));
@@ -3067,7 +3067,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 782px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
@@ -3077,7 +3077,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1024px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
@@ -3087,7 +3087,7 @@ img#wpstats {
 }
 
 @media only screen and (min-width: 1280px) {
-	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
 	.page-title {
 		margin-left: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
 		margin-right: calc( -0.5 * ( 100vw - calc( 782px - 32px) ));
@@ -3234,6 +3234,134 @@ img#wpstats {
 /**
  * Extra Child Theme Styles
  */
+.wp-block-group.alignwide .alignwide,
+.wp-block-group.alignwide .alignfull,
+.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+#colophon {
+	margin-left: calc( -0.15 * ( 100vw - 100% ));
+	margin-right: calc( -0.15 * ( 100vw - 100% ));
+	width: calc( 100% + (0.15 * 2) * ( 100vw - 100% ));
+	max-width: calc( 100% + (0.15 * 2) * ( 100vw - 100% ));
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-left: calc( -0.15 * ( 100vw - calc( 560px - 32px) ));
+		margin-right: calc( -0.15 * ( 100vw - calc( 560px - 32px) ));
+		width: calc( calc( 560px - 32px) + (0.15 * 2) * ( 100vw - calc( 560px - 32px) ));
+		max-width: calc( calc( 560px - 32px) + (0.15 * 2) * ( 100vw - calc( 560px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-left: calc( -0.15 * ( 100vw - calc( 640px - 32px) ));
+		margin-right: calc( -0.15 * ( 100vw - calc( 640px - 32px) ));
+		width: calc( calc( 640px - 32px) + (0.15 * 2) * ( 100vw - calc( 640px - 32px) ));
+		max-width: calc( calc( 640px - 32px) + (0.15 * 2) * ( 100vw - calc( 640px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-left: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		margin-right: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-left: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		margin-right: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.wp-block-group.alignwide .alignwide,
+	.wp-block-group.alignwide .alignfull,
+	.wp-block-group.alignfull .alignwide, .entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead,
+	#colophon {
+		margin-left: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		margin-right: calc( -0.15 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.15 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+.page-title {
+	margin-left: calc( -0.4 * ( 100vw - 100% ));
+	margin-right: calc( -0.4 * ( 100vw - 100% ));
+	width: calc( 100% + (0.4 * 2) * ( 100vw - 100% ));
+	max-width: calc( 100% + (0.4 * 2) * ( 100vw - 100% ));
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-left: calc( -0.4 * ( 100vw - calc( 560px - 32px) ));
+		margin-right: calc( -0.4 * ( 100vw - calc( 560px - 32px) ));
+		width: calc( calc( 560px - 32px) + (0.4 * 2) * ( 100vw - calc( 560px - 32px) ));
+		max-width: calc( calc( 560px - 32px) + (0.4 * 2) * ( 100vw - calc( 560px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-left: calc( -0.4 * ( 100vw - calc( 640px - 32px) ));
+		margin-right: calc( -0.4 * ( 100vw - calc( 640px - 32px) ));
+		width: calc( calc( 640px - 32px) + (0.4 * 2) * ( 100vw - calc( 640px - 32px) ));
+		max-width: calc( calc( 640px - 32px) + (0.4 * 2) * ( 100vw - calc( 640px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-left: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		margin-right: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-left: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		margin-right: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
+@media only screen and (min-width: 1280px) {
+	.wp-block-group.alignfull .alignfull, .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #page, #masthead:before, .footer-wrapper:before, .singular .hentry .entry-title,
+	.page-title {
+		margin-left: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		margin-right: calc( -0.4 * ( 100vw - calc( 782px - 32px) ));
+		width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+		max-width: calc( calc( 782px - 32px) + (0.4 * 2) * ( 100vw - calc( 782px - 32px) ));
+	}
+}
+
 a {
 	text-decoration: none;
 }
@@ -3255,6 +3383,16 @@ p:not(.site-title) a:hover {
 	text-decoration: none;
 }
 
+#page {
+	background: white;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+body {
+	background: #E1DFDF;
+}
+
 /**
  * Wide Header & Footer
  */
@@ -3265,20 +3403,6 @@ p:not(.site-title) a:hover {
 	position: relative;
 }
 
-#masthead:before {
-	background: #E22C2C;
-	box-sizing: content-box;
-	content: "";
-	display: block;
-	height: 100%;
-	left: 50%;
-	position: absolute;
-	top: 0;
-	transform: translateX(-50%);
-	width: 100vw;
-	z-index: -1;
-}
-
 /**
  * Mobile-Menu
  */
@@ -3387,6 +3511,10 @@ p:not(.site-title) a:hover {
 	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
 		background: #303030;
 	}
+	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+		color: inherit;
+		box-shadow: 0 2px 0;
+	}
 	.site-header .social-navigation {
 		align-self: center;
 		grid-area: social-navigation;
@@ -3399,8 +3527,25 @@ p:not(.site-title) a:hover {
 }
 
 /**
- * Site Title
+ * Header
  */
+#masthead > * {
+	position: relative;
+}
+
+#masthead:before {
+	background: #E22C2C;
+	content: "";
+	display: block;
+	height: 100%;
+	left: 50%;
+	margin: 0;
+	position: absolute;
+	top: 0;
+	transform: translateX(-50%);
+	z-index: 0;
+}
+
 .site-description {
 	color: white;
 }
@@ -3436,17 +3581,21 @@ p:not(.site-title) a:hover {
 	position: relative;
 }
 
+.footer-wrapper > * {
+	position: relative;
+}
+
 .footer-wrapper:before {
 	background: #303030;
 	content: "";
 	display: block;
 	height: 100%;
 	left: 50%;
+	margin: 0;
 	position: absolute;
 	top: 0;
 	transform: translateX(-50%);
-	width: 100vw;
-	z-index: -1;
+	z-index: 0;
 }
 
 .footer-navigation .footer-menu {