Merge pull request #1298 from Automattic/fix/morden-responsive-layout

Morden: Revising layout styles to work with the improved responsive logic

morden/header.php

@@ -25,45 +25,49 @@
 
 		<header id="masthead" class="site-header">
 
-			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
+			<div class="site-header-wrap">
 
-			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
-				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
-					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
-					<label for="toggle" id="toggle-menu" class="button">
-						<?php _e( 'Menu', 'varia' ); ?>
-						<span class="dropdown-icon open">+</span>
-						<span class="dropdown-icon close">&times;</span>
-						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'varia' ); ?></span>
-						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
-					</label>
-					<?php
-					wp_nav_menu(
-						array(
-							'theme_location' => 'menu-1',
-							'menu_class'     => 'main-menu',
-							'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
-						)
-					);
-					?>
-				</nav><!-- #site-navigation -->
-			<?php endif; ?>
+				<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 
-			<?php if ( has_nav_menu( 'social' ) ) : ?>
-				<nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
-					<?php
-					wp_nav_menu(
-						array(
-							'theme_location' => 'social',
-							'menu_class'     => 'social-links-menu',
-							'link_before'    => '<span class="screen-reader-text">',
-							'link_after'     => '</span>' . varia_get_icon_svg( 'link' ),
-							'depth'          => 1,
-						)
-					);
-					?>
-				</nav><!-- .social-navigation -->
-			<?php endif; ?>
+				<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+					<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
+						<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
+						<label for="toggle" id="toggle-menu" class="button">
+							<?php _e( 'Menu', 'varia' ); ?>
+							<span class="dropdown-icon open">+</span>
+							<span class="dropdown-icon close">&times;</span>
+							<span class="hide-visually expanded-text"><?php _e( 'expanded', 'varia' ); ?></span>
+							<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
+						</label>
+						<?php
+						wp_nav_menu(
+							array(
+								'theme_location' => 'menu-1',
+								'menu_class'     => 'main-menu',
+								'items_wrap'     => '<ul id="%1$s" class="%2$s" aria-label="submenu">%3$s</ul>',
+							)
+						);
+						?>
+					</nav><!-- #site-navigation -->
+				<?php endif; ?>
+
+				<?php if ( has_nav_menu( 'social' ) ) : ?>
+					<nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
+						<?php
+						wp_nav_menu(
+							array(
+								'theme_location' => 'social',
+								'menu_class'     => 'social-links-menu',
+								'link_before'    => '<span class="screen-reader-text">',
+								'link_after'     => '</span>' . varia_get_icon_svg( 'link' ),
+								'depth'          => 1,
+							)
+						);
+						?>
+					</nav><!-- .social-navigation -->
+				<?php endif; ?>
+
+			</div>
 
 		</header><!-- #masthead -->
 

morden/sass/_extra-child-theme.scss

@@ -42,6 +42,19 @@ a {
 	}
 }
 
+.responsive-max-width,
+.wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote,
+.wp-block-pullquote.alignwide > p,
+.wp-block-pullquote.alignfull > p,
+.wp-block-pullquote.alignwide blockquote,
+.wp-block-pullquote.alignfull blockquote,
+hr.wp-block-separator.is-style-wide,
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "unit")});
+}
+
 body {
 	background: #{map-deep-get($config-global, "color", "background", "white")};
 	@include media(mobile) {
@@ -52,11 +65,22 @@ body {
 /**
  * Wide Header & Footer
  */
-#masthead,
-#colophon {
-	margin-left: auto;
-	margin-right: auto;
+#masthead {
 	position: relative;
+
+	.site-header-wrap {
+
+		@extend %responsive-alignwide;
+
+		& > * {
+			max-width: 100%;
+		}
+	}
+}
+
+#colophon {
+	padding-left: 0;
+	padding-right: 0;
 }
 
 /**
@@ -80,7 +104,7 @@ body {
  * CSS-grid Desktop Menu
  */
 @include media(mobile) {
-	.site-header {
+	.site-header-wrap {
 		align-items: center;
 		display: grid;
 		grid-template-columns: auto;
@@ -128,16 +152,6 @@ body {
 
 			& > 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 {
-					padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
-
-					& > a {
-						padding: 0;
-					}
-				}
 
 				& > .menu-item-has-children > a::after {
 						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
@@ -208,33 +222,19 @@ body {
  */
 #masthead {
 	background: #{map-deep-get($config-global, "color", "foreground", "default")};
-	padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
-	padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+	padding-left: 0;
+	padding-right: 0;
 
 	& > * {
 		position: relative;
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type {
-	margin-left: inherit;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type {
-	margin-right: inherit;
-}
-
 // Site Title
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
 }
 
-.site-title + .site-description {
-	margin-top: -#{map-deep-get($config-global, "spacing", "unit")};
-}
-
 /**
  * Main
  */
@@ -255,9 +255,6 @@ body {
  */
 // Footer Menu
 .footer-navigation .footer-menu {
-	margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
-	margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
-
 	a {
 		font-size: #{map-deep-get($config-global, "font", "size", "xs")};
 		line-height: #{map-deep-get($config-global, "font", "line-height", "xs")};
@@ -289,15 +286,6 @@ body {
 	}
 }
 
-// alignwide spaceing
-.entry-content > .alignwide {
-	@include media(mobile) {
-		width: 100%;
-		padding-left: #{2 * map-deep-get($config-global, "spacing", "unit")};
-		padding-right: #{2 * map-deep-get($config-global, "spacing", "unit")};
-	}
-}
-
 // Table block
 table,
 .wp-block-table {
@@ -325,8 +313,6 @@ table,
 		padding-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 		padding-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 	}
-
-	@extend %responsive-alignfull;
 }
 
 // Entry Meta
@@ -337,7 +323,6 @@ table,
 }
 
 // Sticky
-
 .sticky-post,
 .a8c-posts-list .a8c-posts-list-item__featured span {
 	background: #{map-deep-get($config-global, "color", "background", "light")};

morden/style-rtl.css

@@ -1967,6 +1967,7 @@ table th,
 	text-align: left;
 	float: left;
 	margin-top: 0;
+	margin-right: 16px;
 	margin-bottom: 32px;
 }
 
@@ -1978,9 +1979,9 @@ table th,
 
 .alignright {
 	float: right;
-	margin-left: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
+	margin-left: 16px;
 }
 
 /**
@@ -2415,12 +2416,12 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type {
-	margin-right: -16px;
+.main-navigation > div > ul > li:first-of-type > a {
+	padding-right: 0;
 }
 
-.main-navigation > div > ul > li:last-of-type {
-	margin-left: -16px;
+.main-navigation > div > ul > li:last-of-type > a {
+	padding-left: 0;
 }
 
 .main-navigation > div > ul > li > a {
@@ -2528,12 +2529,12 @@ table th,
 	margin: 0;
 }
 
-.social-navigation > div > ul > li:first-of-type {
-	margin-right: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:first-of-type > a {
+	padding-right: 0;
 }
 
-.social-navigation > div > ul > li:last-of-type {
-	margin-left: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:last-of-type > a {
+	padding-left: 0;
 }
 
 .social-navigation a {
@@ -2631,12 +2632,12 @@ table th,
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-right: -16px;
+.footer-navigation .footer-menu > li:first-of-type > a {
+	padding-right: 0;
 }
 
 .footer-navigation .footer-menu > li:last-of-type {
-	margin-left: -16px;
+	padding-left: 0;
 }
 
 .footer-navigation .footer-menu a {
@@ -3194,45 +3195,45 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 	width: calc(100% + 256px);
-	max-width: calc(100vw - 32px);
+	max-width: calc(100% - 32px);
 	margin-right: auto;
 	margin-left: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 560px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 640px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
@@ -3278,8 +3279,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
-.page-title {
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
 	/* Letting the box-model do all the work here. */
 }
 
@@ -3417,6 +3417,19 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.responsive-max-width,
+.wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote,
+.wp-block-pullquote.alignwide > p,
+.wp-block-pullquote.alignfull > p,
+.wp-block-pullquote.alignwide blockquote,
+.wp-block-pullquote.alignfull blockquote,
+hr.wp-block-separator.is-style-wide,
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	width: calc(100% - 32px);
+}
+
 @media only screen and (min-width: 560px) {
 	body {
 		background: #F8F8F8;
@@ -3426,13 +3439,19 @@ p:not(.site-title) a:hover {
 /**
  * Wide Header & Footer
  */
-#masthead,
-#colophon {
-	margin-right: auto;
-	margin-left: auto;
+#masthead {
 	position: relative;
 }
 
+#masthead .site-header-wrap > * {
+	max-width: 100%;
+}
+
+#colophon {
+	padding-right: 0;
+	padding-left: 0;
+}
+
 /**
  * Mobile-Menu
  */
@@ -3455,7 +3474,7 @@ p:not(.site-title) a:hover {
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
-	.site-header {
+	.site-header-wrap {
 		align-items: center;
 		display: grid;
 		grid-template-columns: auto;
@@ -3463,94 +3482,86 @@ p:not(.site-title) a:hover {
 		grid-column-gap: 16px;
 		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
 	}
-	.site-header:before, .site-header:after {
+	.site-header-wrap:before, .site-header-wrap:after {
 		content: none;
 		display: none;
 	}
-	.site-header > * {
+	.site-header-wrap > * {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
-	.site-header .site-logo {
+	.site-header-wrap .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;
 	}
-	.site-header .site-title {
+	.site-header-wrap .site-title {
 		align-self: flex-end;
 		grid-area: site-title;
 	}
-	.site-header .site-title + .site-description {
+	.site-header-wrap .site-title + .site-description {
 		margin-top: 0;
 	}
-	.site-header .site-description {
+	.site-header-wrap .site-description {
 		align-self: center;
 		grid-area: site-description;
 	}
-	.site-header .main-navigation {
+	.site-header-wrap .main-navigation {
 		align-self: center;
 		grid-area: main-navigation;
 		justify-self: flex-end;
 	}
-	.site-header .main-navigation > div > ul {
+	.site-header-wrap .main-navigation > div > ul {
 		justify-content: flex-end;
-		margin-right: -8px;
-		margin-left: -8px;
 	}
-	.site-header .main-navigation > div > ul > li {
-		padding: 8px;
-	}
-	.site-header .main-navigation > div > ul > li > a {
-		padding: 0;
-	}
-	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
+	.site-header-wrap .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
 	}
-	.site-header .main-navigation > div > ul > li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+	.site-header-wrap .main-navigation > div > ul > li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
 		color: rgba(255, 255, 255, 0.8);
 	}
-	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
-	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+	.site-header-wrap .main-navigation > div > ul > li:hover > ul,
+	.site-header-wrap .main-navigation > div > ul > li.focus > ul,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > ul {
 		background: #303030;
 		border: 1px solid #101010;
 		border-radius: 5px;
 		overflow: hidden;
 	}
-	.site-header .main-navigation > div > ul > li:hover li,
-	.site-header .main-navigation > div > ul > li.focus li,
-	.site-header .main-navigation > div > ul > li.current-menu-item li {
+	.site-header-wrap .main-navigation > div > ul > li:hover li,
+	.site-header-wrap .main-navigation > div > ul > li.focus li,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li {
 		border-top: 1px solid #101010;
 	}
-	.site-header .main-navigation > div > ul > li:hover li:first-child,
-	.site-header .main-navigation > div > ul > li.focus li:first-child,
-	.site-header .main-navigation > div > ul > li.current-menu-item li:first-child {
+	.site-header-wrap .main-navigation > div > ul > li:hover li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li.focus li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:first-child {
 		border-top: 0;
 	}
-	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+	.site-header-wrap .main-navigation > div > ul > li:hover li > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li > a {
 		background: #303030;
 		color: white;
 		padding: 8px 24px;
 	}
-	.site-header .main-navigation > div > ul > li:hover li:hover > a,
-	.site-header .main-navigation > div > ul > li:hover li.focus > a,
-	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+	.site-header-wrap .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
 		background: #CD2220;
 	}
-	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
 		color: inherit;
 		box-shadow: 0 2px 0;
 	}
-	.site-header .social-navigation {
+	.site-header-wrap .social-navigation {
 		align-self: center;
 		grid-area: social-navigation;
 		justify-self: flex-end;
@@ -3566,32 +3577,18 @@ p:not(.site-title) a:hover {
  */
 #masthead {
 	background: #303030;
-	padding-right: 16px;
-	padding-left: 16px;
+	padding-right: 0;
+	padding-left: 0;
 }
 
 #masthead > * {
 	position: relative;
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type {
-	margin-right: inherit;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type {
-	margin-left: inherit;
-}
-
 .site-description {
 	color: white;
 }
 
-.site-title + .site-description {
-	margin-top: -16px;
-}
-
 /**
  * Main
  */
@@ -3609,11 +3606,6 @@ p:not(.site-title) a:hover {
 /**
  * Footer
  */
-.footer-navigation .footer-menu {
-	margin-right: -8px;
-	margin-left: -8px;
-}
-
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
@@ -3645,14 +3637,6 @@ p:not(.site-title) a:hover {
 	margin-bottom: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.entry-content > .alignwide {
-		width: 100%;
-		padding-right: 32px;
-		padding-left: 32px;
-	}
-}
-
 table td,
 table th,
 .wp-block-table td,

morden/style.css

@@ -1969,6 +1969,8 @@ table th,
 	/*rtl:ignore*/
 	float: left;
 	margin-top: 0;
+	/*rtl:ignore*/
+	margin-right: 16px;
 	margin-bottom: 32px;
 }
 
@@ -1982,9 +1984,10 @@ table th,
 	/*rtl:ignore*/
 	float: right;
 	/*rtl:ignore*/
-	margin-left: 16px;
 	margin-top: 0;
 	margin-bottom: 32px;
+	/*rtl:ignore*/
+	margin-left: 16px;
 }
 
 /**
@@ -2419,12 +2422,12 @@ table th,
 	}
 }
 
-.main-navigation > div > ul > li:first-of-type {
-	margin-left: -16px;
+.main-navigation > div > ul > li:first-of-type > a {
+	padding-left: 0;
 }
 
-.main-navigation > div > ul > li:last-of-type {
-	margin-right: -16px;
+.main-navigation > div > ul > li:last-of-type > a {
+	padding-right: 0;
 }
 
 .main-navigation > div > ul > li > a {
@@ -2532,12 +2535,12 @@ table th,
 	margin: 0;
 }
 
-.social-navigation > div > ul > li:first-of-type {
-	margin-left: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:first-of-type > a {
+	padding-left: 0;
 }
 
-.social-navigation > div > ul > li:last-of-type {
-	margin-right: calc(-0.5 * 16px);
+.social-navigation > div > ul > li:last-of-type > a {
+	padding-right: 0;
 }
 
 .social-navigation a {
@@ -2635,12 +2638,12 @@ table th,
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type {
-	margin-left: -16px;
+.footer-navigation .footer-menu > li:first-of-type > a {
+	padding-left: 0;
 }
 
 .footer-navigation .footer-menu > li:last-of-type {
-	margin-right: -16px;
+	padding-right: 0;
 }
 
 .footer-navigation .footer-menu a {
@@ -3198,45 +3201,45 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 	width: calc(100% + 256px);
-	max-width: calc(100vw - 32px);
+	max-width: calc(100% - 32px);
 	margin-left: auto;
 	margin-right: auto;
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 560px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 640px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 640px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 782px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
 @media only screen and (min-width: 1280px) {
-	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery {
+	.entry-content > .alignwide, .entry-content > .alignwide.wp-block-jetpack-gif, .entry-content > .alignwide.wp-block-jetpack-tiled-gallery, #masthead .site-header-wrap {
 		width: calc(calc( 782px - 32px) + 256px);
-		max-width: calc(100vw - 32px);
+		max-width: calc(100% - 32px);
 	}
 }
 
@@ -3282,8 +3285,7 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title,
-.page-title {
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery {
 	/* Letting the box-model do all the work here. */
 }
 
@@ -3433,6 +3435,19 @@ p:not(.site-title) a:hover {
 	}
 }
 
+.responsive-max-width,
+.wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote,
+.wp-block-pullquote.alignwide > p,
+.wp-block-pullquote.alignfull > p,
+.wp-block-pullquote.alignwide blockquote,
+.wp-block-pullquote.alignfull blockquote,
+hr.wp-block-separator.is-style-wide,
+.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
+.entry-content .wp-audio-shortcode, .post-navigation, .pagination {
+	width: calc(100% - 32px);
+}
+
 @media only screen and (min-width: 560px) {
 	body {
 		background: #F8F8F8;
@@ -3442,13 +3457,19 @@ p:not(.site-title) a:hover {
 /**
  * Wide Header & Footer
  */
-#masthead,
-#colophon {
-	margin-left: auto;
-	margin-right: auto;
+#masthead {
 	position: relative;
 }
 
+#masthead .site-header-wrap > * {
+	max-width: 100%;
+}
+
+#colophon {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 /**
  * Mobile-Menu
  */
@@ -3471,7 +3492,7 @@ p:not(.site-title) a:hover {
  * CSS-grid Desktop Menu
  */
 @media only screen and (min-width: 560px) {
-	.site-header {
+	.site-header-wrap {
 		align-items: center;
 		display: grid;
 		grid-template-columns: auto;
@@ -3479,94 +3500,86 @@ p:not(.site-title) a:hover {
 		grid-column-gap: 16px;
 		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description social-navigation";
 	}
-	.site-header:before, .site-header:after {
+	.site-header-wrap:before, .site-header-wrap:after {
 		content: none;
 		display: none;
 	}
-	.site-header > * {
+	.site-header-wrap > * {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
-	.site-header .site-logo {
+	.site-header-wrap .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;
 	}
-	.site-header .site-title {
+	.site-header-wrap .site-title {
 		align-self: flex-end;
 		grid-area: site-title;
 	}
-	.site-header .site-title + .site-description {
+	.site-header-wrap .site-title + .site-description {
 		margin-top: 0;
 	}
-	.site-header .site-description {
+	.site-header-wrap .site-description {
 		align-self: center;
 		grid-area: site-description;
 	}
-	.site-header .main-navigation {
+	.site-header-wrap .main-navigation {
 		align-self: center;
 		grid-area: main-navigation;
 		justify-self: flex-end;
 	}
-	.site-header .main-navigation > div > ul {
+	.site-header-wrap .main-navigation > div > ul {
 		justify-content: flex-end;
-		margin-left: -8px;
-		margin-right: -8px;
-	}
-	.site-header .main-navigation > div > ul > li {
-		padding: 8px;
-	}
-	.site-header .main-navigation > div > ul > li > a {
-		padding: 0;
 	}
-	.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
+	.site-header-wrap .main-navigation > div > ul > .menu-item-has-children > a::after {
 		font-size: 0.5rem;
 	}
-	.site-header .main-navigation > div > ul > li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+	.site-header-wrap .main-navigation > div > ul > li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
 		color: rgba(255, 255, 255, 0.8);
 	}
-	.site-header .main-navigation > div > ul > li:hover > ul,
-	.site-header .main-navigation > div > ul > li.focus > ul,
-	.site-header .main-navigation > div > ul > li.current-menu-item > ul {
+	.site-header-wrap .main-navigation > div > ul > li:hover > ul,
+	.site-header-wrap .main-navigation > div > ul > li.focus > ul,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > ul {
 		background: #303030;
 		border: 1px solid #101010;
 		border-radius: 5px;
 		overflow: hidden;
 	}
-	.site-header .main-navigation > div > ul > li:hover li,
-	.site-header .main-navigation > div > ul > li.focus li,
-	.site-header .main-navigation > div > ul > li.current-menu-item li {
+	.site-header-wrap .main-navigation > div > ul > li:hover li,
+	.site-header-wrap .main-navigation > div > ul > li.focus li,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li {
 		border-top: 1px solid #101010;
 	}
-	.site-header .main-navigation > div > ul > li:hover li:first-child,
-	.site-header .main-navigation > div > ul > li.focus li:first-child,
-	.site-header .main-navigation > div > ul > li.current-menu-item li:first-child {
+	.site-header-wrap .main-navigation > div > ul > li:hover li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li.focus li:first-child,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:first-child {
 		border-top: 0;
 	}
-	.site-header .main-navigation > div > ul > li:hover li > a,
-	.site-header .main-navigation > div > ul > li.focus li > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li > a {
+	.site-header-wrap .main-navigation > div > ul > li:hover li > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li > a {
 		background: #303030;
 		color: white;
 		padding: 8px 24px;
 	}
-	.site-header .main-navigation > div > ul > li:hover li:hover > a,
-	.site-header .main-navigation > div > ul > li:hover li.focus > a,
-	.site-header .main-navigation > div > ul > li:hover li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.focus li:hover > a,
-	.site-header .main-navigation > div > ul > li.focus li.focus > a,
-	.site-header .main-navigation > div > ul > li.focus li.current-menu-item > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li:hover > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li.focus > a,
-	.site-header .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
+	.site-header-wrap .main-navigation > div > ul > li:hover li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li:hover li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.focus li.current-menu-item > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li:hover > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.focus > a,
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
 		background: #CD2220;
 	}
-	.site-header .main-navigation > div > ul > li.current-menu-item > a {
+	.site-header-wrap .main-navigation > div > ul > li.current-menu-item > a {
 		color: inherit;
 		box-shadow: 0 2px 0;
 	}
-	.site-header .social-navigation {
+	.site-header-wrap .social-navigation {
 		align-self: center;
 		grid-area: social-navigation;
 		justify-self: flex-end;
@@ -3582,32 +3595,18 @@ p:not(.site-title) a:hover {
  */
 #masthead {
 	background: #303030;
-	padding-left: 16px;
-	padding-right: 16px;
+	padding-left: 0;
+	padding-right: 0;
 }
 
 #masthead > * {
 	position: relative;
 }
 
-.main-navigation > div > ul > li:first-of-type,
-.social-navigation > div > ul > li:first-of-type {
-	margin-left: inherit;
-}
-
-.main-navigation > div > ul > li:last-of-type,
-.social-navigation > div > ul > li:last-of-type {
-	margin-right: inherit;
-}
-
 .site-description {
 	color: white;
 }
 
-.site-title + .site-description {
-	margin-top: -16px;
-}
-
 /**
  * Main
  */
@@ -3625,11 +3624,6 @@ p:not(.site-title) a:hover {
 /**
  * Footer
  */
-.footer-navigation .footer-menu {
-	margin-left: -8px;
-	margin-right: -8px;
-}
-
 .footer-navigation .footer-menu a {
 	font-size: 0.75614rem;
 }
@@ -3661,14 +3655,6 @@ p:not(.site-title) a:hover {
 	margin-bottom: 0;
 }
 
-@media only screen and (min-width: 560px) {
-	.entry-content > .alignwide {
-		width: 100%;
-		padding-left: 32px;
-		padding-right: 32px;
-	}
-}
-
 table td,
 table th,
 .wp-block-table td,