Add base color, typography, and header styles.

spearhead/assets/js/extend-blocks.js

@@ -4,64 +4,8 @@
         {
             name: "core/group",
             options: {
-                name: "outline",
-                label: "Outline",
-            },
-        },
-        {
-            name: "core/cover",
-            options: {
-                name: "duotone",
-                label: "Duotone",
-            },
-        },
-        {
-            name: "core/gallery",
-            options: {
-                name: "duotone",
-                label: "Duotone",
-            },
-        },
-        {
-            name: "core/image",
-            options: {
-                name: "duotone",
-                label: "Duotone",
-            },
-        },
-        {
-            name: "core/latest-posts",
-            options: {
-                name: "duotone",
-                label: "Duotone",
-            },
-        },
-        {
-            name: "core/paragraph",
-            options: {
-                name: "border-top",
-                label: "Border Top",
-            },
-        },
-        {
-            name: "core/media-text",
-            options: {
-                name: "duotone",
-                label: "Duotone",
-            },
-        },
-        {
-            name: "core/heading",
-            options: {
-                name: "border-top",
-                label: "Border Top",
-            },
-        },
-        {
-            name: "core/paragraph",
-            options: {
-                name: "text-indent",
-                label: "Indent",
+                name: "test",
+                label: "Test",
             },
         },
     ];

spearhead/assets/sass/_block-extends.scss

@@ -1,8 +1,2 @@
-@import "block-extends/button";
-@import "block-extends/cover";
-@import "block-extends/image";
-@import "block-extends/latest-posts";
-@import "block-extends/media-text";
-@import "block-extends/pullquote";
-@import "block-extends/gallery";
-@import "block-extends/group";
+// Import the block extends
+@import "block-extends/button";

spearhead/assets/sass/_header.scss

@@ -1,26 +1,29 @@
 .has-main-navigation {
     .site-header {
         @include media( mobile ){
-            padding-top: 0;
+            padding: calc( 2 * var(--global--spacing-vertical) ) 0;
         };
     }
 }
 
 .site-header {
+    display: flex;
+    justify-content: space-between;
+    max-width: var(--responsive--alignwide-width);
+
     .site-branding {
+        flex-grow: 1;
         @include media( mobile ){
-            align-items: center;
-            display: flex;
-            justify-content: space-between;
-            margin-top: var(--global--spacing-unit);
+            // display: flex;
+            // justify-content: space-between;
+            // margin-top: var(--global--spacing-unit);
             text-align: left;
-            width: 100%;
         }
 
         .site-title {
-            letter-spacing: 1px;
-            margin-bottom: 0;
-            text-transform: uppercase;
+            // letter-spacing: 1px;
+            // margin-bottom: 0;
+            // text-transform: uppercase;
             > a {
                 background: inherit;
                 text-shadow: none;
@@ -28,23 +31,14 @@
         }
     }
 
-    .navigation-container {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        .main-navigation {
-            margin-top: 0;
-            .menu-item {
-                margin-right: calc( 2 * var(--global--spacing-unit) );
-                a {
-                    text-transform: uppercase;
-                    letter-spacing: 1px;
-                }
-            }
+    .primary-navigation {
+        flex-grow: 4;
+        justify-content: flex-end;
+        margin-top: 0;
+    }
 
-            .current-menu-item, .current-page-item {
-                border-bottom: 3px solid var(--global--color-border);
-            }
-        }
+    .primary-navigation > div > ul li, .woo-navigation > div > ul li {
+        color: var(--global--color-secondary);
+        margin: 6px calc( var(--global--spacing-horizontal) / 2);
     }
 }

spearhead/assets/sass/_responsive.scss

@@ -10,8 +10,8 @@ $horizontal_space: var(--global--spacing-horizontal);
 
 $breakpoint_sm: 482px;
 $breakpoint_md: 592px;
-$breakpoint_lg: 794px; // default width + the margins
-$breakpoint_xl: 1178px;
+$breakpoint_lg: calc( 780px + 48px ); // default width + the margins
+$breakpoint_xl: calc( 1247px + 48px ); // wide width + the margins
 $breakpoint_xxl: 1440px;
 
 // Responsive breakpoints mixin

spearhead/assets/sass/_text.scss

@@ -1,38 +1,13 @@
-:root {
-    .has-xs-font-size {
-        font-size: var(--global--font-size-xs);
-    }
-    .has-xl-font-size {
-        font-size: var(--global--font-size-xl);
-        line-height: var(--global--line-height-heading);
-    }
-    .has-huge-font-size {
-        font-size: var(--global--font-size-xxl);
-        line-height: var(--global--line-height-heading);
-    }
-}
-
-h4, h5, h6 {
-    text-transform: uppercase;
-}
-
-p, h1, h2, h3, h4, h5, h6 {
-    &.is-style-border-top {
-        border-top: 3px solid var(--global--color-border);
-        display: inline-block;
-        padding-top: var(--global--spacing-unit);
-    }
+a {
+    border-bottom: none;
 }
 
-p {
-    &.is-style-text-indent {
-        text-indent: 30%;
-    }
+.entry-content a {
+    font-weight: 500;
 }
 
-a {
-    border-bottom: 2px solid currentColor;
-    font-weight: 500;
+.post .entry-title {
+    font-size: var(--global--font-size-xl);
 }
 
 // These styles to limit the paragraph may eventually apply to blog page template

spearhead/assets/sass/block-extends/_button.scss

@@ -1,6 +1,4 @@
+// Button block styles go here
 .wp-block-button__link {
-    font-weight: bold;
-    letter-spacing: 1px;
-    min-width: 264px;
-    text-transform: uppercase;
+
 }

spearhead/assets/sass/style.scss

@@ -14,6 +14,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 */
 
 @import "responsive";
-@import "header";
 @import "text";
+@import "header";
 @import "block-extends";

spearhead/functions.php

@@ -79,12 +79,17 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
 				array(
 					'name'  => __( 'Primary', 'spearhead' ),
 					'slug'  => 'primary',
+					'color' => '#DB0042',
+				),
+				array(
+					'name'  => __( 'Foreground', 'spearhead' ),
+					'slug'  => 'foreground',
 					'color' => '#000000',
 				),
 				array(
 					'name'  => __( 'Background', 'spearhead' ),
 					'slug'  => 'background',
-					'color' => '#BFF5A5',
+					'color' => '#FFFFFF',
 				),
 			)
         );
@@ -104,7 +109,6 @@ add_filter( 'seedlet_content_width', 'spearhead_content_width' );
  * Enqueue scripts and styles.
  */
 function spearhead_scripts() {
-
 	// enqueue Google fonts, if necessary
     wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
 
@@ -116,7 +120,6 @@ function spearhead_scripts() {
 
 	// enqueue child RTL styles
 	wp_style_add_data( 'spearhead-style', 'rtl', 'replace' );
-
 }
 add_action( 'wp_enqueue_scripts', 'spearhead_scripts', 11 );
 
@@ -141,8 +144,8 @@ function spearhead_fonts_url() : string {
     $fonts_url = '';
 
 	$font_families   = array();
-	$font_families[] = 'family=Red+Hat+Display:ital,wght@0,900;1,900';
-	$font_families[] = 'family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700';
+	$font_families[] = 'family=Libre+Franklin:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700';
+	$font_families[] = 'family=IBM+Plex+Mono:wght@400;700';
 	$font_families[] = 'display=swap';
 
     // Make a single request for the theme fonts.

spearhead/style-rtl.css

@@ -0,0 +1,123 @@
+/*
+Theme Name: Spearhead
+Theme URI: https://github.com/Automattic/themes/root-child
+Author: Automattic
+Author URI: https://automattic.com/
+Description: Share your podcast with the world using Spearhead.
+Requires at least: WordPress 5.4 
+Version: 1.2.1
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Template: seedlet
+Text Domain: spearhead 
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
+*/
+/**
+ * Repsonsive Styles
+ */
+/**
+ * Required Variables
+ */
+/**
+ * Root Media Query Variables
+ */
+:root {
+	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
+	--responsive--aligndefault-width: 100%;
+	--responsive--alignwide-width: 100%;
+	--responsive--alignfull-width: 100%;
+	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
+	--responsive--alignright-margin: var(--global--spacing-horizontal);
+	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+}
+
+@media only screen and (min-width: 482px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: calc( 780px + 48px)) {
+	:root {
+		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: calc( 1247px + 48px)) {
+	:root {
+		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 1440px) {
+	:root {
+		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+a {
+	border-bottom: none;
+}
+
+.entry-content a {
+	font-weight: 500;
+}
+
+@media only screen and (min-width: 482px) {
+	.has-main-navigation .site-header {
+		padding: calc( 2 * var(--global--spacing-vertical)) 0;
+	}
+}
+
+.site-header {
+	display: flex;
+	justify-content: space-between;
+	max-width: var(--responsive--alignwide-width);
+}
+
+.site-header .site-branding {
+	flex-grow: 1;
+}
+
+@media only screen and (min-width: 482px) {
+	.site-header .site-branding {
+		text-align: right;
+	}
+}
+
+.site-header .site-branding .site-title > a {
+	background: inherit;
+	text-shadow: none;
+}
+
+.site-header .primary-navigation {
+	flex-grow: 4;
+	justify-content: flex-end;
+	margin-top: 0;
+}
+
+.site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
+	color: var(--global--color-secondary);
+	margin: 6px calc( var(--global--spacing-horizontal) / 2);
+}

spearhead/style.css

@@ -0,0 +1,127 @@
+/*
+Theme Name: Spearhead
+Theme URI: https://github.com/Automattic/themes/root-child
+Author: Automattic
+Author URI: https://automattic.com/
+Description: Share your podcast with the world using Spearhead.
+Requires at least: WordPress 5.4 
+Version: 1.2.1
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Template: seedlet
+Text Domain: spearhead 
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
+*/
+/**
+ * Repsonsive Styles
+ */
+/**
+ * Required Variables
+ */
+/**
+ * Root Media Query Variables
+ */
+:root {
+	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
+	--responsive--aligndefault-width: 100%;
+	--responsive--alignwide-width: 100%;
+	--responsive--alignfull-width: 100%;
+	--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
+	--responsive--alignright-margin: var(--global--spacing-horizontal);
+	--responsive--alignleft-margin: var(--global--spacing-horizontal);
+}
+
+@media only screen and (min-width: 482px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 592px) {
+	:root {
+		--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: calc( 780px + 48px)) {
+	:root {
+		--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: calc( 1247px + 48px)) {
+	:root {
+		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+@media only screen and (min-width: 1440px) {
+	:root {
+		--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
+		--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+		--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
+	}
+}
+
+a {
+	border-bottom: none;
+}
+
+.entry-content a {
+	font-weight: 500;
+}
+
+.post .entry-title {
+	font-size: var(--global--font-size-xl);
+}
+
+@media only screen and (min-width: 482px) {
+	.has-main-navigation .site-header {
+		padding: calc( 2 * var(--global--spacing-vertical)) 0;
+	}
+}
+
+.site-header {
+	display: flex;
+	justify-content: space-between;
+	max-width: var(--responsive--alignwide-width);
+}
+
+.site-header .site-branding {
+	flex-grow: 1;
+}
+
+@media only screen and (min-width: 482px) {
+	.site-header .site-branding {
+		text-align: left;
+	}
+}
+
+.site-header .site-branding .site-title > a {
+	background: inherit;
+	text-shadow: none;
+}
+
+.site-header .primary-navigation {
+	flex-grow: 4;
+	justify-content: flex-end;
+	margin-top: 0;
+}
+
+.site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
+	color: var(--global--color-secondary);
+	margin: 6px calc( var(--global--spacing-horizontal) / 2);
+}

spearhead/variables.css

@@ -1,36 +1,37 @@
 :root {
 	/* Globals */
 	/* Font Family */
-	--global--font-primary: 'Red Hat Display', sans-serif;
-	--global--font-secondary: 'Red Hat Text', sans-serif;
-	--global--color-primary: #000000;
-	--global--color-primary-hover: #333333;
-	--global--color-secondary: #000000;
+	--global--font-primary: 'IBM Plex Mono', sans-serif;
+	--global--font-secondary: 'Libre Franklin', sans-serif;
+	--global--color-primary: #DB0042;
+	--global--color-primary-hover: #DB0042;
+	--global--color-secondary: #555555;
 	--global--color-secondary-hover: #333333;
 	--global--color-foreground: #000000;
 	--global--color-foreground-light: #333333;
-	--global--color-background: #BFF5A5;
-	--global--color-background-dark: #BFF5A5;
+	--global--color-background: #fff;
 	--global--color-border: var(--global--color-secondary);
 	/* Font Size */
 	--global--font-size-xs: 14px;
 	--global--font-size-sm: 16px;
 	--global--font-size-root: 18px;
 	--global--font-size-md: 18px;
-	--global--font-size-lg: 20px;
-	--global--font-size-xl: 24px;
-	--global--font-size-xxl: 36px;
+	--global--font-size-lg: 22px;
+	--global--font-size-xl: 48px;
+	/* Spacing */
+	--global--spacing-horizontal: 24px;
 	/* Line Height */
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.7;
 	--global--line-height-heading: 1.3;
-	--heading--font-family: var(--global--font-primary);
+	--heading--font-family: var(--global--font-secondary);
+	--heading--font-weight: bold;
 	--heading--font-size-h1: 48px;
-	--heading--font-size-h2: 36px;
-	--heading--font-size-h3: 30px;
-	--heading--font-size-h4: 20px;
-	--heading--font-size-h5: 16px;
-	--heading--font-size-h6: 14px;
+	--heading--font-size-h2: 22px;
+	--heading--font-size-h3: 18px;
+	--heading--font-size-h4: 16px;
+	--heading--font-size-h5: 14px;
+	--heading--font-size-h6: 12px;
 	--heading--line-height: 1.2;
 	--heading--letter-spacing-h4: 0.1em;
 	--heading--letter-spacing-h5: 0.1em;
@@ -38,7 +39,9 @@
 	--heading--line-height-h1: 1.2;
 	--heading--line-height-h2: 1.4;
 	--heading--line-height-h3: 1.4;
-	--entry-header--font-size: var(--heading--font-size-h1);
+	
+	--entry-header--font-size: var(--heading--font-size-h2);
+	--entry-header--color: var(--global--color-foreground);
 
 	--button--border-radius: 0px;
 	--button--color-text: var(--global--color-background);
@@ -52,9 +55,8 @@
 	--branding--title--font-size: var(--global--font-size-lg);
 
 	--primary-nav--justify-content: space-between;
-	--primary-nav--font-family: var(--global--font-primary);
-	--primary-nav--font-weight: bold;
-	--primary-nav--padding: 0 0 6px 0;
+	--primary-nav--color-link: var(--global--color-secondary);
+	--primary-nav--padding: 0;
 
 	--social-nav--padding: calc( .67 * var(--global--spacing-unit) );
 
@@ -72,17 +74,17 @@
 @media ( min-width: 482px ){
 	:root {
 		/* Font Size */
-		--global--font-size-root: 20px;
+		/* --global--font-size-root: 20px;
 		--global--font-size-md: 20px;
 		--global--font-size-lg: 24px;
 		--global--font-size-xl: 36px;
-		--global--font-size-xxl: 48px;
+		--global--font-size-xxl: 48px; */
 		/* Line Height */
-		--heading--font-size-h1: 72px;
+		/* --heading--font-size-h1: 72px;
 		--heading--font-size-h2: 64px;
 		--heading--font-size-h3: 48px;
 		--heading--line-height-h1: 1.2;
 		--heading--line-height-h2: 1.2;
-		--heading--line-height-h3: 1.4;
+		--heading--line-height-h3: 1.4; */
 	}
 }