Add styles for sticky posts

seedlet/assets/sass/blocks/file/_style.scss

@@ -1,4 +1,7 @@
 .wp-block-file {
+	align-items: start;
+	display: flex;
+	justify-content: space-between;
 
 	// Undo Gutenberg hover defaults
 	a.wp-block-file__button:active,

seedlet/style-rtl.css

@@ -1457,6 +1457,12 @@ object {
 	justify-content: center;
 }
 
+.wp-block-file {
+	align-items: start;
+	display: flex;
+	justify-content: space-between;
+}
+
 .wp-block-file a.wp-block-file__button:active,
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover,

seedlet/style.css

@@ -1457,6 +1457,12 @@ object {
 	justify-content: center;
 }
 
+.wp-block-file {
+	align-items: start;
+	display: flex;
+	justify-content: space-between;
+}
+
 .wp-block-file a.wp-block-file__button:active,
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover,

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

@@ -23,8 +23,23 @@
     }
 }
 
+.site-main > * {
+    margin: 0;
+    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);
+}
+
+.sticky {
+    background: var(--sticky-posts--color-background);
+}
+
 .sticky-post {
     background-color: var( --global--color-primary );
     margin-bottom: 0;
     width: fit-content;
-}
+}

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,6 +52,20 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+.site-main > * {
+	margin: 0;
+	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);
+}
+
+.sticky {
+	background: var(--sticky-posts--color-background);
+}
+
 .sticky-post {
 	background-color: var(--global--color-primary);
 	margin-bottom: 0;
@@ -81,6 +95,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,6 +52,20 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-transform: uppercase;
 }
 
+.site-main > * {
+	margin: 0;
+	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);
+}
+
+.sticky {
+	background: var(--sticky-posts--color-background);
+}
+
 .sticky-post {
 	background-color: var(--global--color-primary);
 	margin-bottom: 0;
@@ -81,6 +95,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,8 @@
 	--latest-posts--title-font-size: var(--global--font-size-lg);
 
 	--list--font-family: var(--global--font-secondary);
+	/* Sticky Posts */
+	--sticky-posts--color-background: #F9F9F9;
 }
 
 @media ( prefers-color-scheme: dark ) {
@@ -83,5 +86,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;
 	}
 }