Merge pull request #2602 from Automattic/add/spearhead-typography-2592

Spearhead: refine typography styles

spearhead/assets/sass/_footer.scss

@@ -0,0 +1,12 @@
+.site-footer {
+	> .site-info {
+		font-family: var(--global--font-secondary);
+		a.site-name {
+			color: var(--global--color-primary);
+			font-family: var(--global--font-primary);
+		}
+		a:hover {
+			color: var(--global--color-primary-hover);
+		}
+	}
+}

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

@@ -11,14 +11,17 @@
 		margin-bottom: 0;
 	}
 	.entry-meta {
+		margin-bottom: var(--global--spacing-vertical);
 		order: -1;
+
 		.posted-on {
 			svg {
 				display: none;
 			}
 			a {
+				color: var(--global--color-foreground-light);
 				font-family: var(--global--font-primary);
-				text-transform: uppercase;
+				font-size: var(--global--font-size-md);
 			}
 		}
 	}
@@ -47,6 +50,9 @@
 
 	.entry-content {
 		font-size: var(--sticky-posts--entry-content-font-size);
+		> * {
+			color: var(--global--color-foreground-light);
+		}
 	}
 }
 
@@ -84,4 +90,4 @@
 			margin-left: 1rem;
 		}
 	}
-}
+}

spearhead/assets/sass/style.scss

@@ -19,6 +19,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 @import "posts-and-pages";
 @import "text";
 @import "header";
+@import "footer";
 @import "archive";
 @import "block-extends";
 @import "search";

spearhead/style-rtl.css

@@ -46,6 +46,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post .entry-header .entry-meta {
+	margin-bottom: var(--global--spacing-vertical);
 	order: -1;
 }
 
@@ -54,8 +55,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post .entry-header .entry-meta .posted-on a {
+	color: var(--global--color-foreground-light);
 	font-family: var(--global--font-primary);
-	text-transform: uppercase;
+	font-size: var(--global--font-size-md);
 }
 
 .site-main > * {
@@ -84,6 +86,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-size: var(--sticky-posts--entry-content-font-size);
 }
 
+.post.sticky .entry-content > * {
+	color: var(--global--color-foreground-light);
+}
+
 .sticky-post {
 	display: none;
 }
@@ -287,6 +293,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-footer > .site-info {
+	font-family: var(--global--font-secondary);
+}
+
+.site-footer > .site-info a.site-name {
+	color: var(--global--color-primary);
+	font-family: var(--global--font-primary);
+}
+
+.site-footer > .site-info a:hover {
+	color: var(--global--color-primary-hover);
+}
+
 .archive .page-header {
 	line-height: var(--heading--line-height-h1);
 	margin-bottom: 16px;

spearhead/style.css

@@ -46,6 +46,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post .entry-header .entry-meta {
+	margin-bottom: var(--global--spacing-vertical);
 	order: -1;
 }
 
@@ -54,8 +55,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .post .entry-header .entry-meta .posted-on a {
+	color: var(--global--color-foreground-light);
 	font-family: var(--global--font-primary);
-	text-transform: uppercase;
+	font-size: var(--global--font-size-md);
 }
 
 .site-main > * {
@@ -84,6 +86,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-size: var(--sticky-posts--entry-content-font-size);
 }
 
+.post.sticky .entry-content > * {
+	color: var(--global--color-foreground-light);
+}
+
 .sticky-post {
 	display: none;
 }
@@ -287,6 +293,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-footer > .site-info {
+	font-family: var(--global--font-secondary);
+}
+
+.site-footer > .site-info a.site-name {
+	color: var(--global--color-primary);
+	font-family: var(--global--font-primary);
+}
+
+.site-footer > .site-info a:hover {
+	color: var(--global--color-primary-hover);
+}
+
 .archive .page-header {
 	line-height: var(--heading--line-height-h1);
 	margin-bottom: 16px;

spearhead/variables.css

@@ -25,7 +25,7 @@
 	--global--content-width: 900px;
 	/* Line Height */
 	--global--line-height-base: 1;
-	--global--line-height-body: 1.7;
+	--global--line-height-body: 1.8;
 	--global--line-height-heading: 1.3;
 	--heading--font-family: var(--global--font-secondary);
 	--heading--font-weight: bold;
@@ -68,6 +68,7 @@
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
 	--primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
+	--primary-nav--font-size: 17px;
 
 	--social-nav--padding: var(--global--spacing-unit);
 
@@ -105,5 +106,7 @@
 		--global--color-text-selection: #000000;
 		--primary-nav--color-background: var(--global--color-foreground-light);
 		--sticky-posts--color-background: #1E1F21;
+		--button--padding-vertical: 24px;
+		--button--padding-horizontal: 32px;
 	}
 }