match the menu to the design

spearhead/assets/sass/_header.scss

@@ -1,7 +1,9 @@
+@import '~@wordpress/base-styles/breakpoints';
+@import '~@wordpress/base-styles/mixins';
+
 .has-main-navigation {
     .site-header {
         @include media( mobile-only ){
-            padding-top: 4px;
             .site-description {
                 display: none;
             }
@@ -41,6 +43,14 @@
     }
 
     > .site-branding, > nav {
-        margin: 0 calc( var( --global--spacing-horizontal ) / 2 );
+        margin: 0;
     }
-}
+}
+
+.menu-button-container {
+	display: flex;
+
+	@include break-medium() {
+		display: none;
+	}
+}

spearhead/assets/sass/_responsive.scss

@@ -82,4 +82,4 @@ $breakpoint_xxl: 1440px;
 		--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$default_width});
 		--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$alignwide_width});
 	}
-}
+}

spearhead/assets/sass/_structure.scss

@@ -0,0 +1,9 @@
+.has-main-navigation .site-header {
+	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+}
+
+.site-content {
+	margin: 0 auto;
+	max-width: var(--global--content-width);
+	padding: 0 var(--global--spacing-horizontal);
+}

spearhead/assets/sass/_variables.scss

@@ -0,0 +1,9 @@
+@import '~@wordpress/base-styles/breakpoints';
+@import '~@wordpress/base-styles/mixins';
+
+@include break-medium() {
+	:root {
+		--global--spacing-horizontal: 60px;
+		--global--spacing-vertical: 35px;
+	}
+}

spearhead/assets/sass/style.scss

@@ -4,17 +4,19 @@ Theme URI: https://github.com/Automattic/themes/root-child
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Share your podcast with the world using Spearhead.
-Requires at least: WordPress 5.4 
+Requires at least: WordPress 5.4
 Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
-Text Domain: spearhead 
+Text Domain: spearhead
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 */
 
+@import "variables";
 @import "responsive";
+@import "structure";
 @import "posts-and-pages";
 @import "text";
 @import "header";
-@import "block-extends";
+@import "block-extends";

spearhead/package.json

@@ -10,16 +10,18 @@
   "author": "automattic",
   "license": "GPL-2.0",
   "devDependencies": {
+    "@wordpress/base-styles": "^2.0.1",
     "@wordpress/browserslist-config": "^2.2.2",
     "chokidar-cli": "^2.1.0",
+    "minimist": "^1.2.2",
     "node-sass": "^4.13.1",
+    "node-sass-package-importer": "^5.3.2",
     "npm-run-all": "^4.1.5",
-    "minimist": "^1.2.2",
     "rtlcss": "^2.4.0"
   },
   "scripts": {
     "start": "npm run watch",
-    "build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1  --source-map true",
+    "build:style": "node-sass assets/sass/style.scss --importer node_modules/node-sass-package-importer/dist/cli.js style.css --output-style expanded --indent-type tab --indent-width 1  --source-map true",
     "build:rtl": "rtlcss style.css style-rtl.css",
     "build": "run-s \"build:*\"",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"

spearhead/style-rtl.css

@@ -4,14 +4,52 @@ Theme URI: https://github.com/Automattic/themes/root-child
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Share your podcast with the world using Spearhead.
-Requires at least: WordPress 5.4 
+Requires at least: WordPress 5.4
 Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
-Text Domain: spearhead 
+Text Domain: spearhead
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+@media (min-width: 782px) {
+	:root {
+		--global--spacing-horizontal: 60px;
+		--global--spacing-vertical: 35px;
+	}
+}
+
 /**
  * Repsonsive Styles
  */
@@ -25,6 +63,16 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+.has-main-navigation .site-header {
+	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+}
+
+.site-content {
+	margin: 0 auto;
+	max-width: var(--global--content-width);
+	padding: 0 var(--global--spacing-horizontal);
+}
+
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
 	margin-bottom: 0;
@@ -72,10 +120,38 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-weight: 500;
 }
 
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 @media only screen and (max-width: 481px) {
-	.has-main-navigation .site-header {
-		padding-top: 4px;
-	}
 	.has-main-navigation .site-header .site-description {
 		display: none;
 	}
@@ -113,7 +189,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header > .site-branding, .site-header > nav {
-	margin: 0 calc( var( --global--spacing-horizontal ) / 2);
+	margin: 0;
+}
+
+.menu-button-container {
+	display: flex;
+}
+
+@media (min-width: 782px) {
+	.menu-button-container {
+		display: none;
+	}
 }
 
 .wp-block-latest-posts > li > a {

spearhead/style.css

@@ -4,14 +4,52 @@ Theme URI: https://github.com/Automattic/themes/root-child
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Share your podcast with the world using Spearhead.
-Requires at least: WordPress 5.4 
+Requires at least: WordPress 5.4
 Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
-Text Domain: spearhead 
+Text Domain: spearhead
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+@media (min-width: 782px) {
+	:root {
+		--global--spacing-horizontal: 60px;
+		--global--spacing-vertical: 35px;
+	}
+}
+
 /**
  * Repsonsive Styles
  */
@@ -25,6 +63,16 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+.has-main-navigation .site-header {
+	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+}
+
+.site-content {
+	margin: 0 auto;
+	max-width: var(--global--content-width);
+	padding: 0 var(--global--spacing-horizontal);
+}
+
 .home .post .entry-title {
 	font-size: var(--global--font-size-lg);
 	margin-bottom: 0;
@@ -72,10 +120,38 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-weight: 500;
 }
 
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 @media only screen and (max-width: 481px) {
-	.has-main-navigation .site-header {
-		padding-top: 4px;
-	}
 	.has-main-navigation .site-header .site-description {
 		display: none;
 	}
@@ -113,7 +189,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header > .site-branding, .site-header > nav {
-	margin: 0 calc( var( --global--spacing-horizontal ) / 2);
+	margin: 0;
+}
+
+.menu-button-container {
+	display: flex;
+}
+
+@media (min-width: 782px) {
+	.menu-button-container {
+		display: none;
+	}
 }
 
 .wp-block-latest-posts > li > a {

spearhead/variables.css

@@ -20,6 +20,8 @@
 	--global--font-size-xl: 48px;
 	/* Spacing */
 	--global--spacing-horizontal: 24px;
+	--global--spacing-vertical: 27px;
+	--global--content-width: 900px;
 	/* Line Height */
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.7;