Merge pull request #2681 from Automattic/fix/spearhead-spacing-archive-headers

Spearhead: fixed archive headers margins to fit design

spearhead/assets/sass/_posts-and-pages.scss

@@ -27,11 +27,23 @@
 	}
 }
 
-.site-main > * {
-	margin: 0 auto;
-	padding: var(--global--spacing-vertical) 0;
-	&:first-child {
-		padding-top: 0;
+.site-main {
+	& > * {
+		margin: 0 auto;
+		padding: var(--global--spacing-vertical) 0;
+		&:first-child {
+			padding-top: 0;
+		}
+	}
+	article > * {
+		margin-top: calc( 0.48 * var(--global--spacing-vertical) );
+		margin-bottom: calc( 0.48 * var(--global--spacing-vertical) );
+ 
+		/* This overrides Seedlet's style for this breakpoint */
+	 	@include media(mobile) {
+			margin-top: calc( 0.48 * var(--global--spacing-vertical) );
+			margin-bottom: calc( 0.48 * var(--global--spacing-vertical) );
+	 	}
 	}
 }
 

spearhead/navigation-rtl.css

@@ -41,12 +41,12 @@
 
 .has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -76,7 +76,7 @@
 .has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
 .primary-navigation .button.close, .has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * var(--marketing-bar--height));
+	top: calc(-1 * var(--wpcom-marketing-bar--height));
 }
 
 .admin-bar .menu-button-container .button.close, .admin-bar
@@ -88,7 +88,7 @@
 .admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
 .primary-navigation .button.close, .admin-bar.has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * (var(--wpadmin-bar--height) + var(--marketing-bar--height)));
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -223,7 +223,7 @@
 .woo-navigation,
 .has-marketing-bar
 .woo-navigation > div {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar .primary-navigation,
@@ -239,7 +239,7 @@
 .woo-navigation,
 .admin-bar.has-marketing-bar
 .woo-navigation > div {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 @media only screen and (min-width: 830px) {

spearhead/navigation.css

@@ -41,12 +41,12 @@
 
 .has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -76,7 +76,7 @@
 .has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
 .primary-navigation .button.close, .has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * var(--marketing-bar--height));
+	top: calc(-1 * var(--wpcom-marketing-bar--height));
 }
 
 .admin-bar .menu-button-container .button.close, .admin-bar
@@ -88,7 +88,7 @@
 .admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
 .primary-navigation .button.close, .admin-bar.has-marketing-bar
 .woo-navigation .button.close {
-	top: calc(-1 * (var(--wpadmin-bar--height) + var(--marketing-bar--height)));
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -223,7 +223,7 @@
 .woo-navigation,
 .has-marketing-bar
 .woo-navigation > div {
-	top: var(--marketing-bar--height);
+	top: var(--wpcom-marketing-bar--height);
 }
 
 .admin-bar .primary-navigation,
@@ -239,7 +239,7 @@
 .woo-navigation,
 .admin-bar.has-marketing-bar
 .woo-navigation > div {
-	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 @media only screen and (min-width: 830px) {

spearhead/style-rtl.css

@@ -69,6 +69,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	padding-top: 0;
 }
 
+.site-main article > * {
+	margin-top: calc( 0.48 * var(--global--spacing-vertical));
+	margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+	/* This overrides Seedlet's style for this breakpoint */
+}
+
+@media only screen and (min-width: 482px) {
+	.site-main article > * {
+		margin-top: calc( 0.48 * var(--global--spacing-vertical));
+		margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+	}
+}
+
 .has-sticky-post .site-main {
 	background: var(--sticky-posts--alt-color-background);
 }

spearhead/style.css

@@ -69,6 +69,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	padding-top: 0;
 }
 
+.site-main article > * {
+	margin-top: calc( 0.48 * var(--global--spacing-vertical));
+	margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+	/* This overrides Seedlet's style for this breakpoint */
+}
+
+@media only screen and (min-width: 482px) {
+	.site-main article > * {
+		margin-top: calc( 0.48 * var(--global--spacing-vertical));
+		margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+	}
+}
+
 .has-sticky-post .site-main {
 	background: var(--sticky-posts--alt-color-background);
 }