Rebase master.

seedlet/assets/css/style-editor.css

@@ -317,6 +317,45 @@ a {
 	cursor: pointer;
 }
 
+.wp-block-search .wp-block-search__button, .wp-block-a8c-blog-posts + .button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before, .wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-search .wp-block-search__button:before, .wp-block-a8c-blog-posts + .button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-search .wp-block-search__button:after, .wp-block-a8c-blog-posts + .button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-search .wp-block-search__button:active, .wp-block-a8c-blog-posts + .button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-search .wp-block-search__button:hover, .wp-block-a8c-blog-posts + .button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-a8c-blog-posts + .button:focus, .wp-block-search .has-focus.wp-block-search__button, .wp-block-a8c-blog-posts + .has-focus.button {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 body {
 	--wp--typography--line-height: var(--global--line-height-body);
 	color: var(--global--color-foreground);
@@ -546,22 +585,55 @@ div[data-type="core/button"] {
 }
 
 .wp-block-file .wp-block-file__textlink {
-	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--global--color-primary);
-	text-decoration: none;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 3px;
+	text-decoration-color: var(--global--color-secondary);
+}
+
+.wp-block-file .wp-block-file__button-richtext-wrapper {
+	display: block;
+	margin-left: 0;
 }
 
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
 	color: var(--button--color-text);
+	cursor: pointer;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	line-height: var(--button--line-height);
 	background-color: var(--button--color-background);
 	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
 .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);

seedlet/assets/sass/base/_editor.scss

@@ -1,5 +1,6 @@
 @import '../structure/responsive-logic';
-@import '../base/base';
+@import 'base';
+@import 'extends';
 
 body {
 	--wp--typography--line-height: var(--global--line-height-body);

seedlet/assets/sass/base/_extends.scss

@@ -1,8 +1,4 @@
-// Button Placeholder style
-// - Since buttons appear in various blocks,
-//   let’s use a placeholder to keep them all
-//   in-sync
-%button-style {
+@mixin button-style {
 	@include crop-text(var(--button--line-height));
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -28,6 +24,14 @@
 	}
 }
 
+// Button Placeholder style
+// - Since buttons appear in various blocks,
+//   let’s use a placeholder to keep them all
+//   in-sync
+%button-style {
+	@include button-style;
+}
+
 // Onsale Placeholder style
 // - Since buttons appear in various blocks,
 //   let’s use a placeholder to keep them all

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

@@ -1,26 +1,23 @@
 .wp-block-file {
-
 	.wp-block-file__textlink {
-		border-bottom: 1px solid var(--global--color-secondary);
 		color: var(--global--color-primary);
-		text-decoration: none;
+		text-decoration: underline; 
+		text-decoration-thickness: 1px; // Not yet supported in Chrome
+		text-underline-offset: 3px;  // Not yet supported in Chrome
+		text-decoration-color: var(--global--color-secondary);
+	}
+
+	.wp-block-file__button-richtext-wrapper {
+		display: block;
+		margin-left: 0;
 	}
 
 	.wp-block-file__button {
-		color: var(--button--color-text);
-		font-weight: var(--button--font-weight);
-		font-family: var(--button--font-family);
-		font-size: var(--button--font-size);
-		line-height: var(--button--line-height);
-		background-color: var(--button--color-background);
-		border-radius: var(--button--border-radius);
-		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+		// Extend button style
+		@include button-style;
 
-		&:hover,
-		&:focus,
-		&.has-focus {
-			color: var(--button--color-text-hover);
-			background-color: var(--button--color-background-hover);
-		}
+		display: inline-block;
+		margin: calc( 0.5 * var(--global--spacing-unit) ) 0 0 0;
+		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	}
 }

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

@@ -1,5 +1,4 @@
 .wp-block-file {
-
 	// Undo Gutenberg hover defaults
 	a.wp-block-file__button:active,
 	a.wp-block-file__button:focus,
@@ -9,10 +8,17 @@
 		opacity: inherit;
 	}
 
+	a:after {
+		content: '';
+		display: block;
+	}
+
 	.wp-block-file__button {
 		// Extend button style
-		@extend %button-style;
+		@include button-style;
+
 		display: inline-block;
+		margin: calc( 0.5 * var(--global--spacing-unit) ) 0 0 0;
 		padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 	}
 }

seedlet/assets/sass/style.scss

@@ -7,7 +7,7 @@ Description: Seedlet is a free WordPress theme. A two-column layout and classica
 Requires at least: 4.9.6
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.0.8-wpcom
+Version: 1.1.0-wpcom
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: seedlet

seedlet/functions.php

@@ -5,7 +5,7 @@
  * @link https://developer.wordpress.org/themes/basics/theme-functions/
  *
  * @package Seedlet
- * @since 1.0.10
+ * @since 1.1.0
  */
 
 /**
@@ -56,8 +56,8 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 		register_nav_menus(
 			array(
 				'primary' => __( 'Primary Navigation', 'seedlet' ),
-				'footer' => __( 'Footer Navigation', 'seedlet' ),
-				'social' => __( 'Social Links Navigation', 'seedlet' ),
+				'footer'  => __( 'Footer Navigation', 'seedlet' ),
+				'social'  => __( 'Social Links Navigation', 'seedlet' ),
 			)
 		);
 
@@ -120,14 +120,15 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 			array(
 				seedlet_fonts_url(),
 				$editor_stylesheet_path,
-		) );
+			)
+		);
 
 		// Add custom editor font sizes.
 		add_theme_support(
 			'editor-font-sizes',
 			array(
 				array(
-				'name'      => __( 'Tiny', 'seedlet' ),
+					'name'      => __( 'Tiny', 'seedlet' ),
 					'shortName' => __( 'XS', 'seedlet' ),
 					'size'      => 14,
 					'slug'      => 'tiny',
@@ -173,27 +174,27 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 				array(
 					'name'  => __( 'Primary', 'seedlet' ),
 					'slug'  => 'primary',
-					'color' => $primary
+					'color' => $primary,
 				),
 				array(
 					'name'  => __( 'Secondary', 'seedlet' ),
 					'slug'  => 'secondary',
-					'color' => $secondary
+					'color' => $secondary,
 				),
 				array(
 					'name'  => __( 'Foreground', 'seedlet' ),
 					'slug'  => 'foreground',
-					'color' => $foreground
+					'color' => $foreground,
 				),
 				array(
 					'name'  => __( 'Tertiary', 'seedlet' ),
 					'slug'  => 'tertiary',
-					'color' => $tertiary
+					'color' => $tertiary,
 				),
 				array(
 					'name'  => __( 'Background', 'seedlet' ),
 					'slug'  => 'background',
-					'color' => $background
+					'color' => $background,
 				),
 			)
 		);
@@ -206,7 +207,7 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 			array(
 				array(
 					'name'     => __( 'Diagonal', 'seedlet' ),
-					'gradient' => 'linear-gradient(to bottom right, ' . $gradient_color_a . ' 49.9%, ' . $gradient_color_b  . ' 50%)',
+					'gradient' => 'linear-gradient(to bottom right, ' . $gradient_color_a . ' 49.9%, ' . $gradient_color_b . ' 50%)',
 					'slug'     => 'hard-diagonal',
 				),
 				array(
@@ -270,9 +271,9 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 		// Add support for WordPress.com Global Styles.
 		add_theme_support(
 			'jetpack-global-styles',
-			[
+			array(
 				'enable_theme_default' => true,
-			]
+			)
 		);
 	}
 endif;
@@ -392,7 +393,8 @@ function seedlet_scripts() {
 	if ( $is_IE ) {
 		// If IE 11 or below, use a ponyfill to add CSS Variable support
 		wp_register_script( 'css-vars-ponyfill', get_stylesheet_directory_uri() . '/assets/js/css-vars-ponyfill2.js' );
-		wp_enqueue_script( 'ie11-fix',
+		wp_enqueue_script(
+			'ie11-fix',
 			get_stylesheet_directory_uri() . '/assets/js/ie11-fix.js',
 			array( 'css-vars-ponyfill' ),
 			'1.0'

seedlet/inc/wpcom-colors-utils.php

@@ -4,57 +4,119 @@
 function seedlet_define_color_annotations( $colors ) {
 	// Background Color
 	// --global--color-background
-	add_color_rule( 'bg', $colors[ 'background' ], array(
+	add_color_rule(
+		'bg',
+		$colors['background'],
+		array(
 
-		// This placeholder is needed to make the color annotations work
-		array( '.global--color-background', 'background-color' ),
+			// This placeholder is needed to make the color annotations work
+			array( '.global--color-background', 'background-color' ),
 
-	), __( 'Background Color' ) );
+		),
+		__( 'Background Color' )
+	);
 
 	// Foreground Color
 	// --global--color-foreground-light
-	add_color_rule( 'txt', $colors[ 'foreground' ], array(
+	add_color_rule(
+		'txt',
+		$colors['foreground'],
+		array(
 
-		// This placeholder is needed to make the color annotations work
-		array( '.global--color-foreground-light', 'color' ),
+			// This placeholder is needed to make the color annotations work
+			array( '.global--color-foreground-light', 'color' ),
 
-	), __( 'Foreground Color' ) );
+		),
+		__( 'Foreground Color' )
+	);
 
 	// Primary Color
 	// --global--color-primary
-	add_color_rule( 'link', $colors[ 'primary' ], array(
+	add_color_rule(
+		'link',
+		$colors['primary'],
+		array(
 
-		// This placeholder is needed to make the color annotations work
-		array( '.global--color-primary', 'color' ),
+			// This placeholder is needed to make the color annotations work
+			array( '.global--color-primary', 'color' ),
 
-	), __( 'Primary Color' ) );
+		),
+		__( 'Primary Color' )
+	);
 
 	// Secondary Color
 	// --global--color-secondary
-	add_color_rule( 'fg1', $colors[ 'secondary' ], array(
+	add_color_rule(
+		'fg1',
+		$colors['secondary'],
+		array(
 
-		// Text-color
-		array( '.global--color-secondary', 'color' ),
+			// Text-color
+			array( '.global--color-secondary', 'color' ),
 
-	), __( 'Secondary Color' ) );
+		),
+		__( 'Secondary Color' )
+	);
 
 	// Tertiary Color
 	// --global--color-tertiary
-	add_color_rule( 'fg2', $colors[ 'tertiary' ], array(
+	add_color_rule(
+		'fg2',
+		$colors['tertiary'],
+		array(
 
-		// Text-color
-		array( '.global--color-tertiary', 'color' ),
+			// Text-color
+			array( '.global--color-tertiary', 'color' ),
 
-	), __( 'Tertiary Color' ) );
+		),
+		__( 'Tertiary Color' )
+	);
+}
+
+// These functions are borrowed from the colorline lib
+function hex_to_rgb( $hex ) {
+	return sscanf( $hex, '%02X%02X%02X' );
+}
+
+// RGB values: 0-255
+// LUM values: 0-1
+function rgb_to_lum( $rgb ) {
+	list( $r, $g, $b ) = $rgb;
+	return sqrt( 0.241 * $r * $r + 0.691 * $g * $g + 0.068 * $b * $b ) / 255;
+}
+
+// RGB values:    0-255, 0-255, 0-255
+// HSV values:    0-360, 0-100, 0-100, 0-100
+function rgb_to_hsvl( $rgb ) {
+	$l                 = rgb_to_lum( $rgb );
+	list( $r, $g, $b ) = $rgb;
+	$r                 = $r / 255;
+	$g                 = $g / 255;
+	$b                 = $b / 255;
+	$max_rgb           = max( $r, $g, $b );
+	$min_rgb           = min( $r, $g, $b );
+	$chroma            = $max_rgb - $min_rgb;
+	$v                 = 100 * $max_rgb;
+	if ( 0 === $chroma ) {
+		return array( 0, 0, $v, $l );
+	}
+	$s = 100 * ( $chroma / $max_rgb );
+	if ( $r === $min_rgb ) {
+		$h = 3 - ( ( $g - $b ) / $chroma );
+	} elseif ( $b === $min_rgb ) {
+		$h = 1 - ( ( $r - $g ) / $chroma );
+	} else { // $g === $min_rgb
+		$h = 5 - ( ( $b - $r ) / $chroma );
+	}
+	$h = 60 * $h;
+	return array( $h, $s, $v, $l );
 }
 
 function change_color_luminescence( $hex, $amount ) {
-	require_lib( 'colorline' );
-	$colorline = new colorline();
 	$hex_without_hash = substr( $hex, 1, strlen( $hex ) );
-	$rgb = $colorline::hex_to_rgb( $hex_without_hash );
-	$hsvl = $colorline::rgb_to_hsvl( $rgb );
-	return 'hsl( ' . $hsvl[ 0 ] . ',' . $hsvl[ 1 ] . '%,' . ( $hsvl[ 2 ] + $amount ) . '%)';
+	$rgb              = hex_to_rgb( $hex_without_hash );
+	$hsvl             = rgb_to_hsvl( $rgb );
+	return 'hsl( ' . $hsvl[0] . ',' . $hsvl[1] . '%,' . ( $hsvl[2] + $amount ) . '%)';
 }
 
 /**
@@ -63,17 +125,17 @@ function change_color_luminescence( $hex, $amount ) {
  */
 function seedlet_custom_colors_extra_css() {
 	$colors_array = get_theme_mod( 'colors_manager' );
-	$background = $colors_array['colors']['bg'];
-	$foreground = $colors_array['colors']['txt'];
-	$primary = $colors_array['colors']['link'];
-	$secondary = $colors_array['colors']['fg1'];
-	$tertiary  = $colors_array['colors']['fg2'];
+	$background   = $colors_array['colors']['bg'];
+	$foreground   = $colors_array['colors']['txt'];
+	$primary      = $colors_array['colors']['link'];
+	$secondary    = $colors_array['colors']['fg1'];
+	$tertiary     = $colors_array['colors']['fg2'];
 
 	$foreground_light = change_color_luminescence( $foreground, 10 );
-	$foreground_dark = change_color_luminescence( $foreground, -10 );
-	$primary_hover = change_color_luminescence( $primary, 10 );
-	$secondary_hover = change_color_luminescence( $secondary, 10 );
-?>
+	$foreground_dark  = change_color_luminescence( $foreground, -10 );
+	$primary_hover    = change_color_luminescence( $primary, 10 );
+	$secondary_hover  = change_color_luminescence( $secondary, 10 );
+	?>
 
 	:root,
 	#editor .editor-styles-wrapper {
@@ -88,33 +150,43 @@ function seedlet_custom_colors_extra_css() {
 		--global--color-tertiary: <?php echo $tertiary; ?>;
 	}
 
-<?php }
+	<?php
+}
 add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );
 
 /**
  * Featured Varia/Seedlet Palettes
  */
 // Light
-add_color_palette( array(
-	'#FFFFFF',
-	'#1D1E1E',
-	'#C8133E',
-	'#4E2F4B',
-	'#F9F9F9',
-), /* translators: This is the name for a color scheme */ 'Light' );
+add_color_palette(
+	array(
+		'#FFFFFF',
+		'#1D1E1E',
+		'#C8133E',
+		'#4E2F4B',
+		'#F9F9F9',
+	), /* translators: This is the name for a color scheme */
+	'Light'
+);
 // Medium
-add_color_palette( array(
-	'#EEF4F7',
-	'#242527',
-	'#35845D',
-	'#233252',
-	'#F9F9F9',
-), /* translators: This is the name for a color scheme */ 'Medium' );
+add_color_palette(
+	array(
+		'#EEF4F7',
+		'#242527',
+		'#35845D',
+		'#233252',
+		'#F9F9F9',
+	), /* translators: This is the name for a color scheme */
+	'Medium'
+);
 // Dark
-add_color_palette( array(
-	'#1F2527',
-	'#FFFFFF',
-	'#9FD3E8',
-	'#FBE6AA',
-	'#364043',
-), /* translators: This is the name for a color scheme */ 'Dark' );
+add_color_palette(
+	array(
+		'#1F2527',
+		'#FFFFFF',
+		'#9FD3E8',
+		'#FBE6AA',
+		'#364043',
+	), /* translators: This is the name for a color scheme */
+	'Dark'
+);

seedlet/inc/wpcom-customize-preview.js

@@ -37,7 +37,7 @@ function hexToHSL( hex ) {
 
 function changeColorLuminescence( hex, amount ) {
 	var hsl = hexToHSL( hex );
-	return 'hsl( ' + hsl.h + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100  + amount ) + '%)';
+	return 'hsl( ' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100  + amount ) + '%)';
 }
 
 

seedlet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seedlet",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "description": "Seedlet",
   "bugs": {
     "url": "https://github.com/Automattic/seedlet/issues"

seedlet/readme.txt

@@ -18,6 +18,12 @@ Seedlet is a great option for professionals and creatives looking for a sophisti
 
 == Changelog ==
 
+= 1.1.0 =
+* Use ponyfill for IE11 support
+* Add CSS sourcemaps
+* Simplify the responsive rules and alignments
+* Bug fixes and improvements
+
 = 1.0.8 =
 * Add block editor theme tags
 * Correct text color rules for nested blocks

seedlet/style-rtl.css

@@ -7,7 +7,7 @@ Description: Seedlet is a free WordPress theme. A two-column layout and classica
 Requires at least: 4.9.6
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.0.8-wpcom
+Version: 1.1.0-wpcom
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: seedlet
@@ -569,7 +569,7 @@ body {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -586,10 +586,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -599,21 +599,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -621,13 +621,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1465,11 +1465,53 @@ object {
 	opacity: inherit;
 }
 
+.wp-block-file a:after {
+	content: '';
+	display: block;
+}
+
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -3951,7 +3993,7 @@ img#wpstats {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -3968,10 +4010,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -3981,21 +4023,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -4003,13 +4045,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

seedlet/style.css

@@ -7,7 +7,7 @@ Description: Seedlet is a free WordPress theme. A two-column layout and classica
 Requires at least: 4.9.6
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.0.8-wpcom
+Version: 1.1.0-wpcom
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: seedlet
@@ -569,7 +569,7 @@ body {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -586,10 +586,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -599,21 +599,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -621,13 +621,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1465,11 +1465,53 @@ object {
 	opacity: inherit;
 }
 
+.wp-block-file a:after {
+	content: '';
+	display: block;
+}
+
 .wp-block-file .wp-block-file__button {
+	line-height: var(--button--line-height);
+	color: var(--button--color-text);
+	cursor: pointer;
+	font-weight: var(--button--font-weight);
+	font-family: var(--button--font-family);
+	font-size: var(--button--font-size);
+	background-color: var(--button--color-background);
+	border-radius: var(--button--border-radius);
+	border-width: 0;
+	text-decoration: none;
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 	display: inline-block;
+	margin: calc( 0.5 * var(--global--spacing-unit)) 0 0 0;
 	padding: calc(0.5 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
 }
 
+.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-file .wp-block-file__button:before {
+	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
+}
+
+.wp-block-file .wp-block-file__button:after {
+	margin-top: -calc(.5em * var(--button--line-height) + -.39);
+}
+
+.wp-block-file .wp-block-file__button:active {
+	color: var(--button--color-text-active);
+	background-color: var(--button--color-background-active);
+}
+
+.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+	color: var(--button--color-text-hover);
+	background-color: var(--button--color-background-hover);
+}
+
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -3972,7 +4014,7 @@ img#wpstats {
 button,
 .button,
 input[type="submit"],
-.wp-block-button__link, .wp-block-file .wp-block-file__button, .a8c-posts-list__view-all, button[data-load-more-btn] {
+.wp-block-button__link, .a8c-posts-list__view-all, button[data-load-more-btn] {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);
 	cursor: pointer;
@@ -3989,10 +4031,10 @@ input[type="submit"],
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before, button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -4002,21 +4044,21 @@ input[type="submit"]:after,
 button:before,
 .button:before,
 input[type="submit"]:before,
-.wp-block-button__link:before, .wp-block-file .wp-block-file__button:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
+.wp-block-button__link:before, .a8c-posts-list__view-all:before, button[data-load-more-btn]:before {
 	margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
 }
 
 button:after,
 .button:after,
 input[type="submit"]:after,
-.wp-block-button__link:after, .wp-block-file .wp-block-file__button:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
+.wp-block-button__link:after, .a8c-posts-list__view-all:after, button[data-load-more-btn]:after {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
 button:active,
 .button:active,
 input:active[type="submit"],
-.wp-block-button__link:active, .wp-block-file .wp-block-file__button:active, .a8c-posts-list__view-all:active {
+.wp-block-button__link:active, .a8c-posts-list__view-all:active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
@@ -4024,13 +4066,13 @@ input:active[type="submit"],
 button:hover,
 .button:hover,
 input:hover[type="submit"],
-.wp-block-button__link:hover, .wp-block-file .wp-block-file__button:hover, .a8c-posts-list__view-all:hover, button:focus,
+.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
-.wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus, .a8c-posts-list__view-all:focus, button.has-focus,
+.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .wp-block-file .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all {
+.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

spearhead/assets/sass/_header.scss

@@ -17,6 +17,10 @@ $site-branding-height: 68px;
 	}
 }
 
+.has-sticky-post .site-header {
+	background: var(--sticky-posts--color-background);
+}
+
 .site-header {
 	display: flex;
 	flex-wrap: wrap;

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

@@ -5,7 +5,7 @@
  * @link https://developer.wordpress.org/themes/basics/theme-functions/
  *
  * @package WordPress
- * @subpackage Sk8prk
+ * @subpackage Spearhead
  * @since 1.0.0
  */
 
@@ -179,3 +179,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/inc/block-patterns.php

@@ -6,34 +6,52 @@
  * @since   1.0.0
  */
 
-/**
- * Register Block Pattern Category.
- */
-if ( function_exists( 'register_block_pattern_category' ) ) {
+if ( ! function_exists( 'spearhead_register_block_patterns' ) ) :
+	/**
+	 * Sets up support for block patterns and unregisters Seedlet's.
+	 */
+	function spearhead_register_block_patterns() {
+		/**
+		 * Register Block Pattern Category.
+		 */
+		if ( function_exists( 'register_block_pattern_category' ) ) {
 
-	unregister_block_pattern_category( 'seedlet' );
+			register_block_pattern_category(
+				'spearhead',
+				array( 'label' => __( 'Spearhead', 'spearhead' ) )
+			);
+		}
 
-	register_block_pattern_category(
-		'spearhead',
-		array( 'label' => __( 'Spearhead', 'spearhead' ) )
-	);
-}
+		/**
+		 * Register Block Patterns.
+		 */
+		if ( function_exists( 'register_block_pattern' ) ) {
 
-/**
- * Register Block Patterns.
- */
-if ( function_exists( 'register_block_pattern' ) ) {
+			register_block_pattern(
+				'spearhead/related-posts',
+				array(
+					'title'      => __( 'Related Posts', 'spearhead' ),
+					'categories' => array( 'spearhead' ),
+					'content'    => '<!-- wp:separator {"className":"is-style-wide"} --><hr class="wp-block-separator is-style-wide"/><!-- /wp:separator --><!-- wp:paragraph {"fontSize":"medium"} --><p class="has-medium-font-size">Related</p><!-- /wp:paragraph --><!-- wp:jetpack/related-posts /-->',
+				)
+			);
+		}
 
-	unregister_block_pattern( 'seedlet/group-split-background' );
-	unregister_block_pattern( 'seedlet/group-image-overlap' );
-	unregister_block_pattern( 'seedlet/latest-posts-alternating-grid' );
+		/**
+		 * Unregister SeedletBlock Pattern Category.
+		 */
+		if ( function_exists( 'unregister_block_pattern_category' ) ) {
+			unregister_block_pattern_category( 'seedlet' );
+		}
 
-	register_block_pattern(
-		'spearhead/related-posts',
-		array(
-			'title'      => __( 'Related Posts', 'spearhead' ),
-			'categories' => array( 'spearhead' ),
-			'content'    => '<!-- wp:separator {"className":"is-style-wide"} --><hr class="wp-block-separator is-style-wide"/><!-- /wp:separator --><!-- wp:paragraph {"fontSize":"medium"} --><p class="has-medium-font-size">Related</p><!-- /wp:paragraph --><!-- wp:jetpack/related-posts /-->',
-		)
-	);
-}
+		/**
+		 * Unregister Block Patterns from Seedlet.
+		 */
+		if ( function_exists( 'unregister_block_pattern' ) ) {
+			unregister_block_pattern( 'seedlet/group-split-background' );
+			unregister_block_pattern( 'seedlet/group-image-overlap' );
+			unregister_block_pattern( 'seedlet/latest-posts-alternating-grid' );
+		}
+	}
+endif;
+add_action( 'after_setup_theme', 'spearhead_register_block_patterns', 12 );

spearhead/navigation-rtl.css

@@ -56,9 +56,17 @@
 .primary-navigation .button.close,
 .woo-navigation .button.close {
 	display: none;
+	position: absolute;
+	left: 0;
 	z-index: 501;
 }
 
+.admin-bar .menu-button-container .button.close, .admin-bar
+.primary-navigation .button.close, .admin-bar
+.woo-navigation .button.close {
+	top: -46px;
+}
+
 .menu-button-container .button#woo-open-menu,
 .primary-navigation .button#woo-open-menu,
 .woo-navigation .button#woo-open-menu {

spearhead/navigation.css

@@ -56,9 +56,17 @@
 .primary-navigation .button.close,
 .woo-navigation .button.close {
 	display: none;
+	position: absolute;
+	right: 0;
 	z-index: 501;
 }
 
+.admin-bar .menu-button-container .button.close, .admin-bar
+.primary-navigation .button.close, .admin-bar
+.woo-navigation .button.close {
+	top: -46px;
+}
+
 .menu-button-container .button#woo-open-menu,
 .primary-navigation .button#woo-open-menu,
 .woo-navigation .button#woo-open-menu {

spearhead/style-rtl.css

@@ -57,10 +57,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 {
@@ -90,6 +110,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;
 	flex-wrap: wrap;

spearhead/style.css

@@ -57,10 +57,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 {
@@ -90,6 +110,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;
 	flex-wrap: wrap;

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;
@@ -75,6 +76,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 ) {
@@ -88,5 +93,6 @@
 		--global--color-background: #080b11;
 		--global--color-text-selection: #000000;
 		--primary-nav--color-background: var(--global--color-foreground-light);
+		--sticky-posts--color-background: #1E1F21;
 	}
 }