Rivington: Adding typographic improvements and updating header markup to match Hever layout

rivington/sass/_config-child-theme-deep.scss

@@ -12,7 +12,7 @@ $baseline-unit: 8px;
 
 $typescale-root: 18px; // Set 16px/1em default on html
 $typescale-base: 1rem; // Set 1em default on body == $typescale-root;
-$typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
+$typescale-ratio: 1.25; // Run ratio math on 1em == $typescale-base * $typescale-root;
 
 $config-global: (
 
@@ -20,8 +20,8 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
+			"primary": "\"Poppins\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"secondary": "\"Poppins\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 			"code": "monospace, monospace",
 			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 		),
@@ -53,7 +53,7 @@ $config-global: (
 		/* Line Height */
 		"line-height": (
 			"base": strip-unit($typescale-base),
-			"body": 1.78,
+			"body": 1.6,
 			"heading": 1.125,
 		),
 	),
@@ -61,20 +61,20 @@ $config-global: (
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": blue,
-			"hover": indigo,
+			"default": #CAAB57,
+			"hover": #B59439,
 		),
 		"secondary": (
-			"default": red,
-			"hover": darkred,
+			"default": #CAAB57,
+			"hover": #B59439,
 		),
 		"foreground": (
-			"default": #444444,
-			"light": #767676, // must be accessible against background
+			"default": #FFFFFF,
+			"light": darken( #FFFFFF, 20% ), // must be accessible against background
 			"dark": #111111, // must be accessible against background
 		),
 		"background": (
-			"default": white,
+			"default": #080808,
 			"light": #FAFAFA, // must be accessible against foreground-default
 			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
@@ -83,7 +83,7 @@ $config-global: (
 			"light": #FAFAFA,
 			"dark": #AAAAAA,
 		),
-		"text-selection": lightblue,
+		"text-selection": lighten( #CAAB57, 30% ),
 		"black": black,
 		"white": white,
 	),
@@ -201,12 +201,12 @@ $config-heading: (
 		"family": map-deep-get($config-global, "font", "family", "primary"),
 		// Size
 		"size": (
-			"h6": map-deep-get($config-global, "font", "size", "md"),
-			"h5": map-deep-get($config-global, "font", "size", "lg"),
-			"h4": map-deep-get($config-global, "font", "size", "xl"),
-			"h3": map-deep-get($config-global, "font", "size", "xxl"),
-			"h2": map-deep-get($config-global, "font", "size", "xxxl"),
-			"h1": map-deep-get($config-global, "font", "size", "xxxxl"),
+			"h6": map-deep-get($config-global, "font", "size", "sm"),
+			"h5": map-deep-get($config-global, "font", "size", "base"),
+			"h4": map-deep-get($config-global, "font", "size", "md"),
+			"h3": map-deep-get($config-global, "font", "size", "lg"),
+			"h2": map-deep-get($config-global, "font", "size", "xl"),
+			"h1": map-deep-get($config-global, "font", "size", "xxl"),
 		),
 		// Letter spacing
 		"line-height": (
@@ -227,7 +227,7 @@ $config-heading: (
 			"h1": map-deep-get($config-global, "font", "letter-spacing", "xxxl"),
 		),
 		// Font Weight
-		"weight": normal,
+		"weight": 600,
 	),
 );
 
@@ -285,17 +285,17 @@ $config-header: (
 	"branding": (
 		// Colors
 		"color": (
-			"text": map-deep-get($config-global, "color", "foreground", "light"),
-			"link": map-deep-get($config-global, "color", "primary", "default"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
+			"text": map-deep-get($config-global, "color", "foreground", "default"),
+			"link": map-deep-get($config-global, "color", "foreground", "default"),
+			"link-hover": map-deep-get($config-global, "color", "primary", "default"),
 		),
 		// Fonts & Typography
 		"title": (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "md"),
-				"weight": normal,
+				"size": map-deep-get($config-global, "font", "size", "lg"),
+				"weight": 600,
 				"line-height": 1,
 			),
 		),
@@ -304,7 +304,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "secondary"),
-				"size": map-deep-get($config-global, "font", "size", "sm"),
+				"size": map-deep-get($config-global, "font", "size", "xs"),
 			),
 		),
 	),
@@ -319,8 +319,8 @@ $config-header: (
 		// Fonts
 		"font": (
 			"family": map-deep-get($config-global, "font", "family", "secondary"),
-			"size": map-deep-get($config-global, "font", "size", "md"),
-			"weight": normal,
+			"size": map-deep-get($config-global, "font", "size", "base"),
+			"weight": 600,
 			"line-height": 1,
 		),
 		"link-padding": map-deep-get($config-global, "spacing", "unit"),
@@ -329,7 +329,7 @@ $config-header: (
 	"social-nav": (
 		// Colors
 		"color": (
-			"link": map-deep-get($config-global, "color", "primary", "default"),
+			"link": map-deep-get($config-global, "color", "foreground", "default"),
 			"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
 		),
 		"link-padding": calc( 0.5 * calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} ) ),

rivington/sass/_extra-child-theme.scss

@@ -1,15 +1,166 @@
 /**
  * Extra Child Theme Styles
  */
-// @import "";
 
+$color_background: map-deep-get($config-global, "color", "background", "default");
+$color_foreground: map-deep-get($config-global, "color", "foreground", "default");
+$color_foreground_light: map-deep-get($config-global, "color", "foreground", "light");
+$color_primary: map-deep-get($config-global, "color", "primary", "default");
+$color_primary_hover: map-deep-get($config-global, "color", "primary", "hover");
+
+$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
+$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
+$spacing_unit: map-deep-get($config-global, "spacing", "unit");
+
+/**
+ * Elements
+ */
 a {
 	text-decoration: none;
 }
 
-.site-branding,
-.site-info,
-.main-navigation,
+/**
+ * Header
+ */
+#masthead {
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: $spacing_unit;
+	padding-right: $spacing_unit;
+	position: relative;
+	@extend %responsive-width-full;
+
+	@include media(mobile) {
+		padding-left: $spacing_vertical;
+		padding-right: $spacing_vertical;
+	}
+}
+
+/**
+ * CSS-grid Desktop Menu
+ */
+@include media(mobile) {
+	.site-header {
+		align-items: center;
+		display: grid;
+		grid-template-columns: auto;
+		grid-template-rows: auto;
+		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
+		grid-template-areas:
+			"site-logo site-logo"
+			"site-title main-navigation"
+			"site-description social-navigation";
+
+		&:before,
+		&:after {
+			content: none;
+			display: none;
+		}
+
+		& > * {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+
+		.site-logo {
+			grid-area: site-logo;
+			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+		}
+
+		.site-title {
+			align-self: flex-end;
+			grid-area: site-title;
+
+			& + .site-description {
+				margin-top: 0;
+			}
+		}
+
+		.site-description {
+			align-self: center;
+			grid-area: site-description;
+		}
+
+		.main-navigation {
+			align-self: center;
+			grid-area: main-navigation;
+			justify-self: flex-end;
+
+			& > div > ul {
+				justify-content: flex-end;
+				margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+				margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+
+				& > li > a {
+					padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
+				}
+
+				& > .menu-item-has-children > a::after {
+					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+				}
+			}
+
+			& > div > ul > li:hover,
+			& > div > ul > li.focus,
+			& > div > ul > li.current-menu-item {
+
+				& > a {
+					color: #{map-deep-get($config-global, "color", "primary", "default")};
+				}
+
+				& > ul {
+					box-shadow: none;
+					overflow: hidden;
+
+					&:before {
+						border-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid #{map-deep-get($config-global, "color", "primary", "default")};
+						border-left: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent;
+						border-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")} solid transparent;
+						content: "";
+						display: block;
+						margin-left: #{map-deep-get($config-global, "spacing", "unit")};
+						width: #{map-deep-get($config-global, "spacing", "unit")};
+					}
+				}
+
+				& li {
+
+					& > a {
+						background: #{map-deep-get($config-global, "color", "primary", "default")};
+						color: #{map-deep-get($config-global, "color", "background", "default")};
+					}
+
+					&:hover > a,
+					&.focus > a,
+					&.current-menu-item > a {
+						background: #{map-deep-get($config-global, "color", "primary", "hover")};
+					}
+				}
+			}
+		}
+
+		.social-navigation {
+			align-self: center;
+			grid-area: social-navigation;
+			justify-self: flex-end;
+		}
+	}
+}
+
+/**
+ * Content
+ */
+
+.entry .entry-title a {
+
+	color: $color_foreground;
+
+	&:hover,
+	&:active {
+		color: $color_foreground_light;
+	}
+}
+
 .entry-header,
 .entry-footer,
 .page-title,
@@ -19,10 +170,6 @@ a {
 	text-align: center;
 }
 
-.main-navigation > div {
-	text-align: left;
-}
-
 .comment-reply-title {
 	display: inherit;
 }
@@ -31,8 +178,36 @@ a {
 	display: flex;
 }
 
-.main-navigation > div > ul,
-.social-navigation > div > ul,
 .pagination .nav-links {
 	justify-content: center;
 }
+
+/**
+ * Blocks
+ */
+
+.wp-block-cover {
+
+	h1, h2, h3, h4, h5, h6 {
+		font-weight: 700;
+	}
+
+	h6 {
+		font-size: map-deep-get($config-global, "font", "size", "lg");
+	}
+	h5 {
+		font-size: map-deep-get($config-global, "font", "size", "xl");
+	}
+	h4 {
+		font-size: map-deep-get($config-global, "font", "size", "xxl");
+	}
+	h3 {
+		font-size: map-deep-get($config-global, "font", "size", "xxxl");
+	}
+	h2 {
+		font-size: map-deep-get($config-global, "font", "size", "xxxxl");
+	}
+	h1 {
+		font-size: ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio);
+	}
+}

rivington/style-editor.css

@@ -168,12 +168,12 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Reset the browser
  */
 body {
-	color: #444444;
-	background-color: white;
-	font-family: serif;
+	color: #FFFFFF;
+	background-color: #080808;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 18px;
 	font-weight: normal;
-	line-height: 1.78;
+	line-height: 1.6;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
@@ -184,15 +184,15 @@ body {
 
 p {
 	font-size: 1em;
-	line-height: 1.78;
+	line-height: 1.6;
 }
 
 a {
-	color: blue;
+	color: #CAAB57;
 }
 
 a:hover {
-	color: indigo;
+	color: #B59439;
 }
 
 button,
@@ -213,14 +213,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.728rem;
+	font-size: 1.25rem;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.83333rem;
+	font-size: 0.8rem;
 	letter-spacing: normal;
 }
 
@@ -242,7 +242,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.44rem;
+	font-size: 1rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -250,13 +250,13 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.69444rem;
+	font-size: 0.64rem;
 	letter-spacing: normal;
 }
 
 figcaption {
-	color: #767676;
-	font-size: 0.69444rem;
+	color: #cccccc;
+	font-size: 0.64rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -304,29 +304,29 @@ object {
 }
 
 .wp-block-button .wp-block-button__link {
-	color: white;
+	color: #080808;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2em;
+	font-size: 1.25em;
 	line-height: 1;
-	background-color: blue;
+	background-color: #CAAB57;
 	border-radius: 9px;
 	padding: 16px 16px;
 }
 
 .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
-	color: white;
-	background-color: indigo;
+	color: #080808;
+	background-color: #B59439;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
+	color: #CAAB57;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: indigo;
+	color: #B59439;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -335,7 +335,7 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #444444;
+	background-color: #FFFFFF;
 	min-height: calc( 15 * 32px);
 	/* Treating H2 separately to account for legacy /core styles */
 }
@@ -346,7 +346,7 @@ object {
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: #080808;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
@@ -360,7 +360,7 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.48832em;
+	font-size: 1.95312em;
 	letter-spacing: normal;
 	line-height: 1.125;
 	padding: 0;
@@ -389,43 +389,43 @@ object {
 .wp-block-heading h4, h4, .h4,
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
-	font-family: sans-serif;
-	font-weight: normal;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-weight: 600;
 	clear: both;
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 2.98598em;
+	font-size: 2.44141em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 2.48832em;
+	font-size: 1.95312em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 2.0736em;
+	font-size: 1.5625em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 1.728em;
+	font-size: 1.25em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.44em;
+	font-size: 1em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.2em;
+	font-size: 0.8em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -475,7 +475,7 @@ p.has-background:not(.has-background-background-color) a {
 	border-top-width: 4px;
 	border-bottom-color: #DDDDDD;
 	border-bottom-width: 4px;
-	color: #444444;
+	color: #FFFFFF;
 	/**
 	 * Block Options
 	 */
@@ -486,8 +486,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1.25em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -499,8 +499,8 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote .wp-block-pullquote__citation,
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
-	color: #767676;
-	font-size: 0.83333em;
+	color: #cccccc;
+	font-size: 0.8em;
 	letter-spacing: normal;
 }
 
@@ -509,8 +509,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: blue;
-	color: white;
+	background-color: #CAAB57;
+	color: #080808;
 }
 
 .wp-block-pullquote.is-style-solid-color.alignleft blockquote,
@@ -539,14 +539,14 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: blue;
+	border-left-color: #CAAB57;
 	margin: 32px 0;
 	padding-left: 16px;
 }
 
 .wp-block-quote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1.25em;
 	letter-spacing: normal;
 }
 
@@ -556,8 +556,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
-	font-family: sans-serif;
-	font-size: 2.0736em;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1.5625em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -591,7 +591,7 @@ hr.is-style-dots:before {
 
 table th,
 .wp-block-table th {
-	font-family: sans-serif;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
 table td,
@@ -606,28 +606,28 @@ table th,
  * - Needs a special styles
  */
 .editor-post-title__block .editor-post-title__input {
-	color: #444444;
-	font-family: sans-serif;
-	font-weight: normal;
-	font-size: 2.48832em;
+	color: #FFFFFF;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-weight: 600;
+	font-size: 1.95312em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: #CAAB57 !important;
 }
 
 .has-secondary-color[class] {
-	color: red !important;
+	color: #CAAB57 !important;
 }
 
 .has-foreground-color[class] {
-	color: #444444 !important;
+	color: #FFFFFF !important;
 }
 
 .has-foreground-light-color[class] {
-	color: #767676 !important;
+	color: #cccccc !important;
 }
 
 .has-foreground-dark-color[class] {
@@ -643,12 +643,12 @@ table th,
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #080808 !important;
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
-	color: white;
+	background-color: #CAAB57 !important;
+	color: #080808;
 }
 
 .has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
@@ -657,8 +657,8 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: red !important;
-	color: white;
+	background-color: #CAAB57 !important;
+	color: #080808;
 }
 
 .has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
@@ -667,8 +667,8 @@ table th,
 }
 
 .has-foreground-background-color[class] {
-	background-color: #444444 !important;
-	color: white;
+	background-color: #FFFFFF !important;
+	color: #080808;
 }
 
 .has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
@@ -677,8 +677,8 @@ table th,
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #767676 !important;
-	color: white;
+	background-color: #cccccc !important;
+	color: #080808;
 }
 
 .has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
@@ -688,7 +688,7 @@ table th,
 
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
-	color: white;
+	color: #080808;
 }
 
 .has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
@@ -698,7 +698,7 @@ table th,
 
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
-	color: #444444;
+	color: #FFFFFF;
 }
 
 .has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
@@ -708,7 +708,7 @@ table th,
 
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
-	color: #444444;
+	color: #FFFFFF;
 }
 
 .has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
@@ -717,8 +717,8 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
-	color: #444444;
+	background-color: #080808 !important;
+	color: #FFFFFF;
 }
 
 .has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
@@ -728,33 +728,33 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.83333em;
+	font-size: 0.8em;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.2em;
+	font-size: 1.25em;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.44em;
+	font-size: 1.5625em;
 	line-height: 1.125;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.728em;
+	font-size: 1.95312em;
 	line-height: 1.125;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
-	font-family: sans-serif;
-	font-size: calc(2 * 2.98598em);
-	font-weight: normal;
+	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: calc(2 * 2.44141em);
+	font-weight: 600;
 }
 
 /**

rivington/template-parts/header/site-branding.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Displays header site branding
+ *
+ * @package WordPress
+ * @subpackage Varia
+ * @since 1.0.0
+ */
+?>
+
+<?php if ( has_custom_logo() ) : ?>
+	<div class="site-logo"><?php the_custom_logo(); ?></div>
+<?php endif; ?>
+
+<?php $blog_info = get_bloginfo( 'name' ); ?>
+<?php if ( ! empty( $blog_info ) ) : ?>
+	<?php if ( is_front_page() && is_home() ) : ?>
+		<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+	<?php else : ?>
+		<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
+	<?php endif; ?>
+<?php endif; ?>
+
+<?php
+$description = get_bloginfo( 'description', 'display' );
+if ( $description || is_customize_preview() ) :
+	?>
+		<p class="site-description">
+			<?php echo $description; ?>
+		</p>
+<?php endif; ?>