Merge pull request #2572 from Automattic/add/spearhead-sticky-posts

Spearhead: Add styles for sticky posts

spearhead/assets/sass/_header.scss

@@ -9,6 +9,9 @@
     }
 }
 
+.has-sticky-post .site-header {
+	background: var(--sticky-posts--color-background);
+}
 
 .site-header {
     display: flex;

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

@@ -1,30 +1,51 @@
 .home .post .entry-title {
-    font-size: var(--global--font-size-lg);
-    margin-bottom: 0;
+	font-size: var(--global--font-size-lg);
+	margin-bottom: 0;
 }
 
 .post .entry-header {
-    display: flex;
-    flex-direction: column;
-    .entry-title {
-        margin-bottom: 0;
-    }
-    .entry-meta {
-        order: -1;
-        .posted-on {
-            svg {
-                display: none;
-            }
-            a {
-                font-family: var(--global--font-primary);
-                text-transform: uppercase;
-            }
-        }
-    }
+	display: flex;
+	flex-direction: column;
+	.entry-title {
+		margin-bottom: 0;
+	}
+	.entry-meta {
+		order: -1;
+		.posted-on {
+			svg {
+				display: none;
+			}
+			a {
+				font-family: var(--global--font-primary);
+				text-transform: uppercase;
+			}
+		}
+	}
+}
+
+.site-main > * {
+	margin: 0 auto;
+	padding: calc(3 * var(--global--spacing-vertical)) 0;
+}
+
+// Sticky posts
+.has-sticky-post .site-main > *:first-child {
+	margin-top: calc( 0px - var(--global--spacing-vertical) );
+	padding-top: var(--global--spacing-vertical);
+}
+
+.post.sticky { // .post class needed to make this stronger
+	background: var(--sticky-posts--color-background);
+
+	.entry-title {
+		font-size: var(--sticky-posts--entry-title-font-size);
+	}
+
+	.entry-content {
+		font-size: var(--sticky-posts--entry-content-font-size);
+	}
 }
 
 .sticky-post {
-    background-color: var( --global--color-primary );
-    margin-bottom: 0;
-    width: fit-content;
-}
+	display: none;
+}

spearhead/functions.php

@@ -174,3 +174,16 @@ function seedlet_entry_meta_header() : void {
  * Block Patterns.
  */
 require get_stylesheet_directory() . '/inc/block-patterns.php';
+
+add_filter(
+	'body_class',
+	function( $classes ) {
+		$stickies = get_option( 'sticky_posts' );
+
+		if ( count( $stickies ) && is_home() ) {
+			return array_merge( $classes, array( 'has-sticky-post' ) );
+		}
+
+		return $classes;
+	}
+);

spearhead/style-rtl.css

@@ -52,10 +52,30 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+.site-main > * {
+	margin: 0 auto;
+	padding: calc(3 * var(--global--spacing-vertical)) 0;
+}
+
+.has-sticky-post .site-main > *:first-child {
+	margin-top: calc( 0px - var(--global--spacing-vertical));
+	padding-top: var(--global--spacing-vertical);
+}
+
+.post.sticky {
+	background: var(--sticky-posts--color-background);
+}
+
+.post.sticky .entry-title {
+	font-size: var(--sticky-posts--entry-title-font-size);
+}
+
+.post.sticky .entry-content {
+	font-size: var(--sticky-posts--entry-content-font-size);
+}
+
 .sticky-post {
-	background-color: var(--global--color-primary);
-	margin-bottom: 0;
-	width: fit-content;
+	display: none;
 }
 
 .has-link-color a, a {
@@ -81,6 +101,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+.has-sticky-post .site-header {
+	background: var(--sticky-posts--color-background);
+}
+
 .site-header {
 	display: flex;
 	justify-content: space-between;

spearhead/style.css

@@ -52,10 +52,30 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+.site-main > * {
+	margin: 0 auto;
+	padding: calc(3 * var(--global--spacing-vertical)) 0;
+}
+
+.has-sticky-post .site-main > *:first-child {
+	margin-top: calc( 0px - var(--global--spacing-vertical));
+	padding-top: var(--global--spacing-vertical);
+}
+
+.post.sticky {
+	background: var(--sticky-posts--color-background);
+}
+
+.post.sticky .entry-title {
+	font-size: var(--sticky-posts--entry-title-font-size);
+}
+
+.post.sticky .entry-content {
+	font-size: var(--sticky-posts--entry-content-font-size);
+}
+
 .sticky-post {
-	background-color: var(--global--color-primary);
-	margin-bottom: 0;
-	width: fit-content;
+	display: none;
 }
 
 .has-link-color a, a {
@@ -81,6 +101,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
+.has-sticky-post .site-header {
+	background: var(--sticky-posts--color-background);
+}
+
 .site-header {
 	display: flex;
 	justify-content: space-between;

spearhead/variables.css

@@ -3,6 +3,7 @@
 	/* Font Family */
 	--global--font-primary: 'IBM Plex Mono', sans-serif;
 	--global--font-secondary: 'Libre Franklin', sans-serif;
+	/* Colors */
 	--global--color-primary: #DB0042;
 	--global--color-primary-hover: #DB0042;
 	--global--color-secondary: #555555;
@@ -71,6 +72,10 @@
 	--latest-posts--title-font-size: var(--global--font-size-lg);
 
 	--list--font-family: var(--global--font-secondary);
+	/* Sticky Posts */
+	--sticky-posts--color-background: #F9F9F9;
+	--sticky-posts--entry-title-font-size: 24px;
+	--sticky-posts--entry-content-font-size: 20px;
 }
 
 @media ( prefers-color-scheme: dark ) {
@@ -83,5 +88,7 @@
 		--global--color-foreground-light: #ffffff;
 		--global--color-background: #080b11;
 		--global--color-text-selection: #000000;
+		--primary-nav--color-background: var(--global--color-foreground-light);
+		--sticky-posts--color-background: #1E1F21;
 	}
 }