Morden: Import some of Hever styles

morden/functions.php

@@ -128,27 +128,15 @@ function morden_fonts_url() {
 	$fonts_url = '';
 
 	/* Translators: If there are characters in your language that are not
-	* supported by Lora, translate this to 'off'. Do not translate
+	* supported by Noto Sans, translate this to 'off'. Do not translate
 	* into your own language.
 	*/
-	$playfair = esc_html_x( 'on', 'Playfair Display font: on or off', 'morden' );
+	$notosans = esc_html_x( 'on', 'Noto Sans font: on or off', 'morden' );
 
-	/* Translators: If there are characters in your language that are not
-	* supported by Open Sans, translate this to 'off'. Do not translate
-	* into your own language.
-	*/
-	$roboto = esc_html_x( 'on', 'Roboto Sans font: on or off', 'morden' );
-
-	if ( 'off' !== $playfair || 'off' !== $roboto ) {
+	if ( 'off' !== $notosans ) {
 		$font_families = array();
 
-		if ( 'off' !== $playfair ) {
-			$font_families[] = 'Playfair+Display:400,400i';
-		}
-
-		if ( 'off' !== $roboto ) {
-			$font_families[] = 'Roboto:300,300i,700';
-		}
+		$font_families[] = 'Noto+Sans:400,400i,700,700i';
 
 		$query_args = array(
 			'family' => urlencode( implode( '|', $font_families ) ),

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

@@ -10,9 +10,9 @@
 // Vertical Rhythm Multiplier
 $baseline-unit: 8px;
 
-$typescale-root: 18px; // Set 16px/1em default on html
+$typescale-root: 20px; // 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.15; // Run ratio math on 1em == $typescale-base * $typescale-root;
 
 $config-global: (
 
@@ -20,10 +20,10 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
+			"primary": "\"Noto Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"secondary": "\"Noto Sans\"\, -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",
+			"ui": "\"Noto Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 		),
 		/* Font Size */
 		"size": (
@@ -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,29 +61,29 @@ $config-global: (
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": blue,
-			"hover": indigo,
+			"default": #E54343,
+			"hover": #303030,
 		),
 		"secondary": (
-			"default": red,
-			"hover": darkred,
+			"default": #17C16C,
+			"hover": #303030,
 		),
 		"foreground": (
-			"default": #444444,
-			"light": #767676, // must be accessible against background
-			"dark": #111111, // must be accessible against background
+			"default": #303030,
+			"light": #757575, // must be accessible against background
+			"dark": #101010, // must be accessible against background
 		),
 		"background": (
 			"default": white,
-			"light": #FAFAFA, // must be accessible against foreground-default
-			"dark": #DDDDDD, // must be accessible against foreground-default
+			"light": #F8F8F8, // must be accessible against foreground-default
+			"dark": #C5C5C5, // must be accessible against foreground-default
 		),
 		"border": (
-			"default": #DDDDDD,
-			"light": #FAFAFA,
-			"dark": #AAAAAA,
+			"default": #C5C5C5,
+			"light": #F8F8F8,
+			"dark": #A5A5A5,
 		),
-		"text-selection": lightblue,
+		"text-selection": #FCC7B4,
 		"black": black,
 		"white": white,
 	),
@@ -117,9 +117,9 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
-		"sm": (0.5 * $typescale-root),
-		"md": (0.75 * $typescale-root),
-		"lg": $typescale-root,
+		"sm": (0.25 * $typescale-root),
+		"md": (0.5 * $typescale-root),
+		"lg": (0.75 * $typescale-root),
 		"pill": (10 * $typescale-root),
 	),
 );
@@ -149,7 +149,7 @@ $config-elements: (
 		// Borders
 		"border": (
 			"width": 1px,
-			"radius": 3px,
+			"radius": map-deep-get($config-global, "border-radius", "sm"),
 		),
 
 		"padding": #{map-deep-get($config-global, "spacing", "unit")},
@@ -162,16 +162,16 @@ $config-elements: (
 $config-button: (
 	// Colors
 	"color": (
-		"text": map-deep-get($config-global, "color", "background"),
-		"text-hover": map-deep-get($config-global, "color", "background"),
+		"text": map-deep-get($config-global, "color", "background", "default"),
+		"text-hover": map-deep-get($config-global, "color", "background", "default"),
 		"background": map-deep-get($config-global, "color", "primary", "default"),
 		"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
 	),
 	// Fonts
 	"font": (
 		"family": map-deep-get($config-global, "font", "family", "ui"),
-		"size": map-deep-get($config-global, "font", "size", "md"),
-		"weight": 600,
+		"size": map-deep-get($config-global, "font", "size", "base"),
+		"weight": bold,
 		"line-height": 1,
 	),
 	// Borders
@@ -180,7 +180,7 @@ $config-button: (
 	// Padding
 	"padding": (
 		"vertical": map-deep-get($config-global, "spacing", "unit"),
-		"horizontal": map-deep-get($config-global, "spacing", "unit"),
+		"horizontal": #{1.5 * map-deep-get($config-global, "spacing", "unit")},
 	),
 );
 
@@ -227,7 +227,7 @@ $config-heading: (
 			"h1": map-deep-get($config-global, "font", "letter-spacing", "xxxl"),
 		),
 		// Font Weight
-		"weight": normal,
+		"weight": bold,
 	),
 );
 
@@ -286,16 +286,16 @@ $config-header: (
 		// 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"),
+			"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", "xxl"),
+				"weight": bold,
 				"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"),
 			),
 		),
 	),
@@ -313,26 +313,26 @@ $config-header: (
 		// Colors
 		"color": (
 			"text": map-deep-get($config-global, "color", "foreground", "default"),
-			"link": map-deep-get($config-global, "color", "primary", "default"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
+			"link": map-deep-get($config-global, "color", "foreground", "default"),
+			"link-hover": map-deep-get($config-global, "color", "primary", "default"),
 		),
 		// 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": bold,
 			"line-height": 1,
 		),
-		"link-padding": map-deep-get($config-global, "spacing", "unit"),
+		"link-padding": (0.5 * map-deep-get($config-global, "spacing", "unit")),
 	),
 
 	"social-nav": (
 		// Colors
 		"color": (
-			"link": map-deep-get($config-global, "color", "primary", "default"),
-			"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
+			"link": map-deep-get($config-global, "color", "foreground", "light"),
+			"link-hover": map-deep-get($config-global, "color", "primary", "default"),
 		),
-		"link-padding": calc( 0.5 * calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} ) ),
+		"link-padding": (0.5 * map-deep-get($config-global, "spacing", "unit")),
 	),
 );
 

morden/sass/_extra-child-theme.scss

@@ -5,34 +5,426 @@
 
 a {
 	text-decoration: none;
+
+	.wp-block-cover &,
+	.wp-block-cover-image &,
+	.wp-block-media-text &,
+	p:not(.site-title) & {
+		text-decoration: underline;
+
+		&.wp-block-button__link,
+		&:hover {
+			text-decoration: none;
+		}
+	}
 }
 
-.site-branding,
-.site-info,
-.main-navigation,
-.entry-header,
-.entry-footer,
-.page-title,
-.author-title,
-.comments-title,
-.comment-reply-title {
+/**
+ * Wide Header & Footer
+ */
+#masthead,
+#colophon {
+	margin-left: auto;
+	margin-right: auto;
+	position: relative;
+
+	@extend %responsive-width-wide;
+}
+
+#masthead {
+	padding-bottom: 0;
+}
+
+/**
+ * Mobile-Menu
+ */
+
+
+/**
+ * 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 {
+					padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
+
+					& > a {
+						padding: 0;
+					}
+				}
+
+				& > .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;
+		}
+	}
+}
+
+// Social Menu
+.social-navigation {
+	& > div > ul {
+		flex-wrap: wrap;
+	}
+}
+
+/**
+ * Site Title
+ */
+.site-description {
+	color: #{map-deep-get($config-header, "branding", "color", "text")};
+}
+
+.site-title + .site-description {
+	margin-top: -#{map-deep-get($config-global, "spacing", "unit")};
+}
+
+/**
+ * Footer Menu
+ */
+.footer-navigation .footer-menu {
+	margin-left: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+	margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+}
+
+/**
+ * Blocks
+ */
+// Cover & Hero block
+.wp-block-cover .wp-block-cover__inner-container,
+.wp-block-coblocks-hero .wp-block-coblocks-hero__box {
+	& > * {
+		margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
+		margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
+
+		@include media(mobile) {
+			margin-top: map-deep-get($config-global, "spacing", "vertical");
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		}
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+// Table block
+table,
+.wp-block-table {
+	td,
+	th {
+		border-color: #{map-deep-get($config-global, "color", "border", "default")};
+	}
+}
+
+/**
+ * Hentry
+ */
+// Entry Title
+.singular .hentry .entry-title,
+.page-title {
 	text-align: center;
+
+	&:before,
+	&:after {
+		background: map-deep-get($config-global, "color", "border", "light");;
+		height: 1px;
+		content: "";
+		display: block;
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+		@extend %responsive-width-full;
+	}
+
+	&:after {
+		margin-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
+}
+
+// Entry Meta
+.entry-header {
+	.entry-meta {
+		display: none;
+	}
+}
+
+// Entry Title Link
+article .entry-header .entry-title,
+.page-title,
+.a8c-posts-list .a8c-posts-list-item__title {
+  a {
+    color: inherit;
+		text-decoration: none;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: #{map-deep-get($config-global, "color", "primary", "default")};
+    }
+  }
+}
+
+// Remove margin if alignfull is first element
+.singular {
+	.hentry .entry-content {
+		& > *:first-child {
+			&.alignfull {
+				margin-top: -#{0.666 * map-deep-get($config-global, "spacing", "vertical")};
+
+				@include media(mobile) {
+					margin-top: -#{2 * map-deep-get($config-global, "spacing", "vertical")};
+				}
+			}
+		}
+	}
+}
+
+.home.hide-homepage-title {
+	.hentry .entry-content {
+		& > *:first-child {
+			&.alignfull {
+				margin-top: 0;
+
+				@include media(mobile) {
+					margin-top: 0;
+				}
+			}
+		}
+	}
+}
+
+/**
+ * Comments
+ */
+.comment {
+	.avatar {
+		border-radius: 50%;
+	}
+}
+
+.comment-respond {
+	.form-submit {
+		display: flex;
+		justify-content: flex-end;
+	}
+}
+
+/**
+ * Widgets
+ */
+.widget-area {
+	max-width: 100%;
+	width: 100%;
+
+	& > *:last-child {
+		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	}
+
+	.widget-title,
+	.widgettitle {
+  	font-size: #{map-deep-get($config-global, "font", "size", "md")};
+    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  @include media(laptop) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.widget {
+			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")})
+		}
+
+		& > *:nth-child(2) {
+      margin-top: 0;
+    }
+  }
+
+	@include media(desktop) {
+		.widget {
+			width: calc(33.3333% - #{1.333 * map-deep-get($config-global, "spacing", "horizontal")})
+		}
+
+		& > *:nth-child(3) {
+      margin-top: 0;
+    }
+  }
+}
+
+.widget_calendar,
+.widget_calendar {
+  caption {
+    font-weight: bold;
+  }
+
+  td,
+  th {
+	   text-align: center;
+  }
+}
+
+.widget_archive,
+.widget_categories,
+.widget_links,
+.widget_meta,
+.widget_nav_menu,
+.widget_pages,
+.widget_recent_comments,
+.widget_recent_entries,
+.widget_rss,
+.widget_rss_links,
+.widget_top-posts,
+.widget_authors,
+.widget_jp_blogs_i_follow,
+.widget_top-click,
+.widget_upcoming_events_widget {
+  ul {
+    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+    list-style: none;
+    margin-left: 0;
+  }
+
+  li {
+    border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+  }
 }
 
-.main-navigation > div {
-	text-align: left;
+.widget_categories .children,
+.widget_nav_menu .sub-menu,
+.widget_pages .children {
+  border-bottom: 0;
+  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+  padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
-.comment-reply-title {
-	display: inherit;
+.widget_recent_entries .post-date {
+  display: block;
 }
 
-.comment .comment-reply-title {
-	display: flex;
+.widget_rss {
+  cite,
+  .rssSummary,
+  .rss-date {
+    display: block;
+  }
 }
 
-.main-navigation > div > ul,
-.social-navigation > div > ul,
-.pagination .nav-links {
-	justify-content: center;
+.widget_search {
+  input[type="search"] {
+    display: block;
+    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+    width: 100%;
+  }
 }

morden/style-editor.css

@@ -168,31 +168,31 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Reset the browser
  */
 body {
-	color: #444444;
+	color: #303030;
 	background-color: white;
-	font-family: serif;
-	font-size: 18px;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 20px;
 	font-weight: normal;
-	line-height: 1.78;
+	line-height: 1.6;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
 
 .editor-post-title__block {
-	font-size: 18px;
+	font-size: 20px;
 }
 
 p {
 	font-size: 1em;
-	line-height: 1.78;
+	line-height: 1.6;
 }
 
 a {
-	color: blue;
+	color: #E54343;
 }
 
 a:hover {
-	color: indigo;
+	color: #303030;
 }
 
 button,
@@ -213,14 +213,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.728rem;
+	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.83333rem;
+	font-size: 0.86957rem;
 	letter-spacing: normal;
 }
 
@@ -242,7 +242,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.44rem;
+	font-size: 1.3225rem;
 	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.75614rem;
 	letter-spacing: normal;
 }
 
 figcaption {
-	color: #767676;
-	font-size: 0.69444rem;
+	color: #757575;
+	font-size: 0.75614rem;
 	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: ("default": white, "light": #FAFAFA, "dark": #DDDDDD);
-	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;
+	color: white;
+	font-weight: bold;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1em;
 	line-height: 1;
-	background-color: blue;
-	border-radius: 9px;
-	padding: 16px 16px;
+	background-color: #E54343;
+	border-radius: 5px;
+	padding: 16px 24px;
 }
 
 .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: ("default": white, "light": #FAFAFA, "dark": #DDDDDD);
-	background-color: indigo;
+	color: white;
+	background-color: #303030;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
+	color: #E54343;
 	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: #303030;
 }
 
 .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: #303030;
 	min-height: calc( 15 * 32px);
 	/* Treating H2 separately to account for legacy /core styles */
 }
@@ -360,7 +360,7 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.48832em;
+	font-size: 2.01136em;
 	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: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-weight: bold;
 	clear: both;
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 2.98598em;
+	font-size: 2.31306em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 2.48832em;
+	font-size: 2.01136em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 2.0736em;
+	font-size: 1.74901em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 1.728em;
+	font-size: 1.52087em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.44em;
+	font-size: 1.3225em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.2em;
+	font-size: 1.15em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -459,11 +459,11 @@ p.has-background:not(.has-background-background-color) a {
 	margin-left: 0;
 	margin-right: 0;
 	text-align: center;
-	border-top-color: #DDDDDD;
+	border-top-color: #C5C5C5;
 	border-top-width: 4px;
-	border-bottom-color: #DDDDDD;
+	border-bottom-color: #C5C5C5;
 	border-bottom-width: 4px;
-	color: #444444;
+	color: #303030;
 	/**
 	 * Block Options
 	 */
@@ -474,8 +474,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: 1.52087em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -487,8 +487,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: #757575;
+	font-size: 0.86957em;
 	letter-spacing: normal;
 }
 
@@ -497,7 +497,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: blue;
+	background-color: #E54343;
 	color: white;
 }
 
@@ -527,13 +527,13 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: blue;
+	border-left-color: #E54343;
 	margin: 32px 0;
 	padding-left: 16px;
 }
 
 .wp-block-quote p {
-	font-size: 1.728em;
+	font-size: 1.52087em;
 	letter-spacing: normal;
 }
 
@@ -543,21 +543,21 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
-	font-size: 2.0736em;
+	font-size: 1.74901em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .wp-block-separator,
 hr {
-	border-bottom: 2px solid #DDDDDD;
+	border-bottom: 2px solid #C5C5C5;
 	clear: both;
 }
 
 .wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"],
 hr[style*="text-align:right"],
 hr[style*="text-align: right"] {
-	border-right-color: #DDDDDD;
+	border-right-color: #C5C5C5;
 }
 
 .wp-block-separator.is-style-wide,
@@ -572,12 +572,12 @@ hr.is-style-dots {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: #DDDDDD;
+	color: #C5C5C5;
 }
 
 table th,
 .wp-block-table th {
-	font-family: sans-serif;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
 table td,
@@ -592,40 +592,40 @@ 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: #303030;
+	font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-weight: bold;
+	font-size: 2.01136em;
 	letter-spacing: normal;
 	line-height: 1.125;
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: #E54343 !important;
 }
 
 .has-secondary-color[class] {
-	color: red !important;
+	color: #17C16C !important;
 }
 
 .has-foreground-color[class] {
-	color: #444444 !important;
+	color: #303030 !important;
 }
 
 .has-foreground-light-color[class] {
-	color: #767676 !important;
+	color: #757575 !important;
 }
 
 .has-foreground-dark-color[class] {
-	color: #111111 !important;
+	color: #101010 !important;
 }
 
 .has-background-light-color[class] {
-	color: #FAFAFA !important;
+	color: #F8F8F8 !important;
 }
 
 .has-background-dark-color[class] {
-	color: #DDDDDD !important;
+	color: #C5C5C5 !important;
 }
 
 .has-background-color[class] {
@@ -633,7 +633,7 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
+	background-color: #E54343 !important;
 	color: white;
 }
 
@@ -642,7 +642,7 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: red !important;
+	background-color: #17C16C !important;
 	color: white;
 }
 
@@ -651,7 +651,7 @@ table th,
 }
 
 .has-foreground-background-color[class] {
-	background-color: #444444 !important;
+	background-color: #303030 !important;
 	color: white;
 }
 
@@ -660,7 +660,7 @@ table th,
 }
 
 .has-foreground-light-background-color[class] {
-	background-color: #767676 !important;
+	background-color: #757575 !important;
 	color: white;
 }
 
@@ -669,7 +669,7 @@ table th,
 }
 
 .has-foreground-dark-background-color[class] {
-	background-color: #111111 !important;
+	background-color: #101010 !important;
 	color: white;
 }
 
@@ -678,8 +678,8 @@ table th,
 }
 
 .has-background-light-background-color[class] {
-	background-color: #FAFAFA !important;
-	color: #444444;
+	background-color: #F8F8F8 !important;
+	color: #303030;
 }
 
 .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 {
@@ -687,8 +687,8 @@ table th,
 }
 
 .has-background-dark-background-color[class] {
-	background-color: #DDDDDD !important;
-	color: #444444;
+	background-color: #C5C5C5 !important;
+	color: #303030;
 }
 
 .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 {
@@ -697,7 +697,7 @@ table th,
 
 .has-background-background-color[class] {
 	background-color: white !important;
-	color: #444444;
+	color: #303030;
 }
 
 .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 {
@@ -706,33 +706,33 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.83333em;
+	font-size: 0.86957em;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.2em;
+	font-size: 1.15em;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.44em;
+	font-size: 1.3225em;
 	line-height: 1.125;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.728em;
+	font-size: 1.52087em;
 	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: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-size: calc(2 * 2.31306em);
+	font-weight: bold;
 }
 
 /**