Merge pull request #2696 from Automattic/fix/spearhead-sticky-padding

Adjust sticky post padding.

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

@@ -59,6 +59,7 @@
 
 .post.sticky { // .post class needed to make this stronger
 	background: var(--sticky-posts--color-background);
+	padding-bottom: calc(2 * var(--global--spacing-vertical));
 
 	.entry-title {
 		font-size: var(--sticky-posts--entry-title-font-size);
@@ -67,6 +68,16 @@
 	.entry-content {
 		font-size: var(--sticky-posts--entry-content-font-size);
 	}
+
+	// Subsequent sticky posts do not need extra top padding.
+	+ .post.sticky {
+		padding-top: 0;
+	}
+
+	// The first non-sticky post does need extra top padding.
+	+ article:not(.post.sticky) {
+		padding-top: calc(2 * var(--global--spacing-vertical));
+	}
 }
 
 .sticky-post {

spearhead/style-rtl.css

@@ -93,6 +93,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .post.sticky {
 	background: var(--sticky-posts--color-background);
+	padding-bottom: calc(2 * var(--global--spacing-vertical));
 }
 
 .post.sticky .entry-title {
@@ -103,6 +104,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-size: var(--sticky-posts--entry-content-font-size);
 }
 
+.post.sticky + .post.sticky {
+	padding-top: 0;
+}
+
+.post.sticky + article:not(.post.sticky) {
+	padding-top: calc(2 * var(--global--spacing-vertical));
+}
+
 .sticky-post {
 	display: none;
 }

spearhead/style.css

@@ -93,6 +93,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .post.sticky {
 	background: var(--sticky-posts--color-background);
+	padding-bottom: calc(2 * var(--global--spacing-vertical));
 }
 
 .post.sticky .entry-title {
@@ -103,6 +104,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-size: var(--sticky-posts--entry-content-font-size);
 }
 
+.post.sticky + .post.sticky {
+	padding-top: 0;
+}
+
+.post.sticky + article:not(.post.sticky) {
+	padding-top: calc(2 * var(--global--spacing-vertical));
+}
+
 .sticky-post {
 	display: none;
 }