Rockfield: Recompile styles with fixed .alignfull logic, update header markup to respect full-width rules

rockfield/header.php

@@ -23,7 +23,7 @@
 <div id="page" class="site">
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'rockfield' ); ?></a>
 
-		<header id="masthead" class="site-header responsive-max-width">
+		<header id="masthead" class="site-header">
 
 			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 

rockfield/sass/_extra-child-theme.scss

@@ -1,7 +1,6 @@
 /**
  * Extra Child Theme Styles
  */
-// @import "";
 
 /**
  * Reset
@@ -45,7 +44,7 @@ a {
 	text-align: left;
 	z-index: 9999;
 
-	@extend %responsive-alignfull;
+	//@extend %responsive-alignfull;
 
 	@include media(mobile) {
 		align-items: flex-end;
@@ -604,7 +603,7 @@ table,
 .social-navigation {
 	background: #{map-deep-get($config-global, "color", "foreground", "dark")};
 	padding: #{map-deep-get($config-global, "spacing", "vertical")} 0;
-	width: 100%;
+	width: calc(100% + #{map-deep-get($config-global, "spacing", "horizontal")});
 
 	@extend %responsive-alignfull;
 
@@ -618,6 +617,11 @@ table,
 /**
  * Footer Menu
  */
+.site-footer {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .site-footer > * {
 	padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 	padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};

rockfield/style-rtl.css

@@ -3294,7 +3294,18 @@ img#wpstats {
 }
 
 .entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
-	/* Letting the box-model do all the work here. */
+	margin-right: -16px;
+	margin-left: -16px;
+	width: calc(100% + 32px);
+	/* Letting the box-model do most of the work here. */
+}
+
+@media only screen and (min-width: 560px) {
+	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
+		margin-right: inherit;
+		margin-left: inherit;
+		width: inherit;
+	}
 }
 
 .entry-content > .alignright {
@@ -3992,7 +4003,7 @@ table th,
 .social-navigation {
 	background: #111111;
 	padding: 32px 0;
-	width: 100%;
+	width: calc(100% + 16px);
 }
 
 .social-navigation .social-links-menu {
@@ -4004,6 +4015,11 @@ table th,
 /**
  * Footer Menu
  */
+.site-footer {
+	padding-right: 0;
+	padding-left: 0;
+}
+
 .site-footer > * {
 	padding-right: 16px;
 	padding-left: 16px;

rockfield/style.css

@@ -3298,8 +3298,19 @@ img#wpstats {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, #masthead, .widget-area:before, .social-navigation {
-	/* Letting the box-model do all the work here. */
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .widget-area:before, .social-navigation {
+	margin-left: -16px;
+	margin-right: -16px;
+	width: calc(100% + 32px);
+	/* Letting the box-model do most of the work here. */
+}
+
+@media only screen and (min-width: 560px) {
+	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .widget-area:before, .social-navigation {
+		margin-left: inherit;
+		margin-right: inherit;
+		width: inherit;
+	}
 }
 
 .entry-content > .alignright {
@@ -4009,7 +4020,7 @@ table th,
 .social-navigation {
 	background: #111111;
 	padding: 32px 0;
-	width: 100%;
+	width: calc(100% + 16px);
 }
 
 .social-navigation .social-links-menu {
@@ -4021,6 +4032,11 @@ table th,
 /**
  * Footer Menu
  */
+.site-footer {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 .site-footer > * {
 	padding-left: 16px;
 	padding-right: 16px;