Clean up responsive logic and run-s.

spearhead/assets/sass/_responsive.scss

@@ -5,13 +5,10 @@
 /**
  * Required Variables
  */
-$flexwidth: 100%;
-$horizontal_space: var(--global--spacing-horizontal);
-
 $breakpoint_sm: 482px;
 $breakpoint_md: 592px;
-$breakpoint_lg: calc( 780px + 48px ); // default width + the margins
-$breakpoint_xl: calc( 1247px + 48px ); // wide width + the margins
+$breakpoint_lg: calc( 780px + 2 * var(--global--spacing-horizontal) ); // default width + the margins
+$breakpoint_xl: calc( 1247px + 2 * var(--global--spacing-horizontal) ); // wide width + the margins
 $breakpoint_xxl: 1440px;
 
 // Responsive breakpoints mixin

spearhead/package.json

@@ -22,7 +22,7 @@
     "start": "npm run watch",
     "build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1",
     "build:rtl": "rtlcss style.css style-rtl.css",
-    "build": "run-p \"build:*\"",
+    "build": "run-s \"build:*\"",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
   }
 }

spearhead/style-rtl.css

@@ -49,19 +49,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
-@media only screen and (min-width: calc( 780px + 48px)) {
+@media only screen and (min-width: calc( 780px + 2 * var(--global--spacing-horizontal))) {
 	:root {
 		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 780px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}
 }
 
-@media only screen and (min-width: calc( 1247px + 48px)) {
+@media only screen and (min-width: calc( 1247px + 2 * var(--global--spacing-horizontal))) {
 	:root {
-		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--aligndefault-width: calc(calc( 780px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}
@@ -69,8 +69,8 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 @media only screen and (min-width: 1440px) {
 	:root {
-		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--aligndefault-width: calc(calc( 780px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}
@@ -105,6 +105,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .sticky-post {
 	background-color: var(--global--color-primary);
+	margin-bottom: 0;
 	width: fit-content;
 }
 

spearhead/style.css

@@ -49,19 +49,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
-@media only screen and (min-width: calc( 780px + 48px)) {
+@media only screen and (min-width: calc( 780px + 2 * var(--global--spacing-horizontal))) {
 	:root {
 		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 780px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}
 }
 
-@media only screen and (min-width: calc( 1247px + 48px)) {
+@media only screen and (min-width: calc( 1247px + 2 * var(--global--spacing-horizontal))) {
 	:root {
-		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--aligndefault-width: calc(calc( 780px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}
@@ -69,8 +69,8 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 @media only screen and (min-width: 1440px) {
 	:root {
-		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
-		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--aligndefault-width: calc(calc( 780px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 2 * var(--global--spacing-horizontal)) - var(--responsive--spacing-horizontal));
 		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
 	}