Frontend and editor styles.

stow/functions.php

@@ -83,9 +83,9 @@ if ( ! function_exists( 'stow_setup' ) ) :
 					'color' => '#767676',
 				),
 				array(
-					'name'  => __( 'White', 'stow' ),
+					'name'  => __( 'White Smoke', 'stow' ),
 					'slug'  => 'background',
-					'color' => '#FFFFFF',
+					'color' => '#f0f0f0',
 				),
 			)
 		);
@@ -117,35 +117,38 @@ function stow_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
-	* into your own language.
-	*/
-	$playfair = esc_html_x( 'on', 'Playfair Display font: on or off', 'stow' );
+	/* translators: If there are characters in your language that are not supported
+	 * by Source Sans Pro, translate this to 'off'. Do not translate into your own language.
+	 */
+	$source_sans_pro  = _x( 'on', 'Source Sans Pro font: on or off',  'stow' );
+
+	/* translators: If there are characters in your language that are not supported
+	 * by Droid Serif, translate this to 'off'. Do not translate into your own language.
+	 */
+	$droid_serif = _x( 'on', 'Droid Serif font: on or off', 'stow' );
 
-	/* 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', 'stow' );
+	/* translators: If there are characters in your language that are not supported
+	 * by Oswald, translate this to 'off'. Do not translate into your own language.
+	 */
+	$oswald  = _x( 'on', 'Oswald font: on or off',  'stow' );
 
-	if ( 'off' !== $playfair || 'off' !== $roboto ) {
+	if ( 'off' !== $source_sans_pro || 'off' !== $droid_serif || 'off' !== $oswald ) {
 		$font_families = array();
 
-		if ( 'off' !== $playfair ) {
-			$font_families[] = 'Playfair+Display:400,400i';
+		if ( 'off' !== $source_sans_pro ) {
+			$font_families[] = 'Source Sans Pro:300,300italic,400,400italic,600';
 		}
-
-		if ( 'off' !== $roboto ) {
-			$font_families[] = 'Roboto:300,300i,700';
+		if ( 'off' !== $droid_serif ) {
+			$font_families[] = 'Droid Serif:400,400italic';
+		}
+		if ( 'off' !== $oswald ) {
+			$font_families[] = 'Oswald:300,400';
 		}
-
 		$query_args = array(
 			'family' => urlencode( implode( '|', $font_families ) ),
 			'subset' => urlencode( 'latin,latin-ext' ),
 		);
-
-		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
+		$fonts_url = add_query_arg( $query_args, "https://fonts.googleapis.com/css" );
 	}
 
 	return esc_url_raw( $fonts_url );
@@ -157,7 +160,7 @@ function stow_fonts_url() {
 function stow_scripts() {
 
 	// enqueue Google fonts, if necessary
-	// wp_enqueue_style( 'stow-fonts', stow_fonts_url(), array(), null );
+	wp_enqueue_style( 'stow-fonts', stow_fonts_url(), array(), null );
 
 	// dequeue parent styles
 	wp_dequeue_style( 'varia-style' );

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

@@ -20,9 +20,9 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
-			"code": "monospace, monospace",
+			"primary": "\"Oswald\"\, sans-serif",	
+			"secondary": "\"Source Sans Pro\"\, Arial\, sans-serif",
+			"code": "\"Courier 10 Pitch\"\, Courier\, monospace",
 			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 		),
 		/* Font Size */
@@ -42,13 +42,13 @@ $config-global: (
 		/* Letter Spacing */
 		"letter-spacing": (
 			"base": normal,
-			"xs": normal,
-			"sm": normal,
-			"md": normal,
-			"lg": normal,
-			"xl": normal,
-			"xxl": normal,
-			"xxxl": normal,
+			"xs": 2px,
+			"sm": 2px,
+			"md": 2px,
+			"lg": 2px,
+			"xl": 2px,
+			"xxl": 2px,
+			"xxxl": 2px,
 		),
 		/* Line Height */
 		"line-height": (
@@ -61,19 +61,19 @@ $config-global: (
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": blue,
-			"hover": indigo,
+			"default": #404040,
+			"hover": #e1122a,
 		),
 		"secondary": (
-			"default": red,
-			"hover": darkred,
+			"default": #f25f70,
+			"hover": #4f4f4f,
 		),
 		"foreground": (
 			"default": #444444,
 			"light": #767676, // must be accesible!
 			"dark": #111111, // must be accesible!
 		),
-		"background": white,
+		"background": #f0f0f0,
 		"border": (
 			"default": #DDDDDD,
 			"light": #FAFAFA,
@@ -160,8 +160,8 @@ $config-button: (
 	"color": (
 		"text": map-deep-get($config-global, "color", "background"),
 		"text-hover": map-deep-get($config-global, "color", "background"),
-		"background": map-deep-get($config-global, "color", "primary", "default"),
-		"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
+		"background": map-deep-get($config-global, "color", "secondary", "default"),
+		"background-hover": map-deep-get($config-global, "color", "secondary", "hover"),
 	),
 	// Fonts
 	"font": (
@@ -197,12 +197,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": (
@@ -223,7 +223,7 @@ $config-heading: (
 			"h1": map-deep-get($config-global, "font", "letter-spacing", "xxxl"),
 		),
 		// Font Weight
-		"weight": normal,
+		"weight": 300,
 	),
 );
 
@@ -243,7 +243,7 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": #{map-deep-get($config-global, "font", "family", "secondary")},
 	),
 	// Border
 	"color": (
@@ -262,7 +262,7 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": #{map-deep-get($config-global, "font", "family", "secondary")},
 	),
 );
 
@@ -291,8 +291,8 @@ $config-header: (
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
 				"size": map-deep-get($config-global, "font", "size", "md"),
-				"weight": normal,
-				"line-height": 1,
+				"weight": 300,
+				"line-height": 1.3333,
 			),
 		),
 		// Fonts & Typography
@@ -316,7 +316,7 @@ $config-header: (
 		"font": (
 			"family": map-deep-get($config-global, "font", "family", "secondary"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
-			"weight": normal,
+			"weight": 700,
 			"line-height": 1,
 		),
 		"link-padding": map-deep-get($config-global, "spacing", "unit"),
@@ -338,9 +338,9 @@ $config-header: (
 $config-footer: (
 	// 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", "white"),
+		"link": map-deep-get($config-global, "color", "white"),
+		"link-hover": map-deep-get($config-global, "color", "secondary", "default"),
 	),
 	// Fonts
 	"font": (

stow/sass/_config-child-theme.scss

@@ -5,22 +5,22 @@
 
 // @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Roboto:400,400i,700&display=swap');
 
-$config-global: map-deep-set($config-global, "font" "size" "root", "20px");
-$config-global: map-deep-set($config-global, "font" "family" "primary", "\'Playfair Display\', serif");
-$config-global: map-deep-set($config-global, "font" "family" "secondary", "\'Roboto\', sans-serif");
-$config-global: map-deep-set($config-global, "color" "primary" "default", pink);
-$config-global: map-deep-set($config-global, "font" "size" "root", "20px");
+// $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
+// $config-global: map-deep-set($config-global, "font" "family" "primary", "\'Playfair Display\', serif");
+// $config-global: map-deep-set($config-global, "font" "family" "secondary", "\'Roboto\', sans-serif");
+// $config-global: map-deep-set($config-global, "color" "primary" "default", pink);
+// $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
 
-// Button
-$config-button: map-deep-set($config-button, "color" "background", orange);
+// // Button
+// $config-button: map-deep-set($config-button, "color" "background", orange);
 
-// Headings
-$config-heading: map-deep-set($config-heading, "font" "family", "\'Playfair Display\', serif");
-$config-heading: map-deep-set($config-heading, "font" "weight", 200);
+// // Headings
+// $config-heading: map-deep-set($config-heading, "font" "family", "\'Playfair Display\', serif");
+// $config-heading: map-deep-set($config-heading, "font" "weight", 200);
 
-// Header
-$config-header: map-deep-set($config-header, "branding" "title" "font" "family", "\'Playfair Display\', serif");
-$config-header: map-deep-set($config-header, "branding" "title" "font" "weight", 200);
-$config-header: map-deep-set($config-header, "branding" "description" "font" "family", "\'Roboto\', sans-serif");
-$config-header: map-deep-set($config-header, "branding" "color" "link", orange);
-$config-header: map-deep-set($config-header, "main-nav" "color" "link", orange);
+// // Header
+// $config-header: map-deep-set($config-header, "branding" "title" "font" "family", "\'Playfair Display\', serif");
+// $config-header: map-deep-set($config-header, "branding" "title" "font" "weight", 200);
+// $config-header: map-deep-set($config-header, "branding" "description" "font" "family", "\'Roboto\', sans-serif");
+// $config-header: map-deep-set($config-header, "branding" "color" "link", orange);
+// $config-header: map-deep-set($config-header, "main-nav" "color" "link", orange);

stow/sass/_extra-child-theme.scss

@@ -1,7 +1,27 @@
 /**
  * Extra Child Theme Styles
+ *
+ * 1. General Helper Styles
+ * 2. Header
+ * 3. Main Wrapper
+ * 4. Navigation Menu
+ * 5. Footer
+ * 6. Archive Pagination and Post Navigation
+ * 7. Block Specific Styles
+ * 7.1. Column Block
+ * 7.2. Quote Block
+ * 7.3. Hero Block and Cover Block
+ * 7.4. File Block
+ * 7.5. Latest Comments Block
+ * 8. Widgets
  */
-// @import "";
+
+/**
+ * 1. General Helper Styles
+ */
+body {
+	font-weight: 300;
+}
 
 a {
 	text-decoration: none;
@@ -16,23 +36,339 @@ a {
 .author-title,
 .comments-title,
 .comment-reply-title {
-	text-align: center;
+	text-transform: uppercase;
 }
 
-.main-navigation > div {
-	text-align: left;
-}
+// .main-navigation > div {
+// 	text-align: left;
+// }
 
-.comment-reply-title {
-	display: inherit;
-}
+// .comment-reply-title {
+// 	display: inherit;
+// }
 
-.comment .comment-reply-title {
-	display: flex;
-}
+// .comment .comment-reply-title {
+// 	display: flex;
+// }
 
 .main-navigation > div > ul,
 .social-navigation > div > ul,
 .pagination .nav-links {
 	justify-content: center;
 }
+
+/**
+ * 2. Header
+ */
+#masthead {
+	background-color: #{map-deep-get($config-global, "color", "white")};
+	padding: 0;
+	.site-title {
+		font-size: #{map-deep-get($config-global, "font", "size", "xxl")};
+	}
+	.site-description {
+		color: #333;
+	}
+	.site-branding {
+		text-align: center;
+		background: #fff;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		text-align: center;
+		height: 100%;
+		min-height: 72px;
+		padding: 3em 0 36px;
+	}
+	margin: 0 auto;
+	max-width: 1180px;
+	.social-navigation {
+		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+		ul {
+			li {
+				a {
+					color: #{map-deep-get($config-global, "color", "secondary", "default")};
+					&:hover {
+						color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+					}
+				}
+			}
+		}
+	}
+}
+
+/**
+ * 3. Main Wrapper
+ */
+.site {
+	max-width:1180px;
+	margin: 0 auto;
+	padding: 0;
+}
+
+.site-content {
+	background-color: #{map-deep-get($config-global, "color", "white")};
+}
+
+/**
+ * 4. Navigation Menu
+ */
+#site-navigation {
+	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
+	border-bottom: 2px solid rgba(0,0,0,.15);
+	&.main-navigation {
+		ul {
+			li {
+				padding-left: #{map-deep-get($config-global, "spacing", "unit")};
+				&.current-menu-item {
+					a {
+						color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+					}
+				}
+				a {
+					color: #{map-deep-get($config-global, "color", "white")};
+					text-decoration: none;
+					&:hover {
+						color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+					}
+				}
+				@include media(mobile) {
+					list-style-type: disc;
+					&.current-menu-item {
+						a {
+							color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+						}
+					}
+					a {
+						color: #{map-deep-get($config-global, "color", "white")};
+						&:hover {
+							color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+						}
+						&::after {
+							color: #ffa4ad;
+							content: " \2022";
+							margin-left: 1em;
+							display: inline;
+							font-size: #{map-deep-get($config-global, "font", "size", "base")};
+						}
+					}
+					&:last-child {
+						a {
+							&::after {
+								content: "";
+							}
+						}
+					}
+				}
+			}
+			ul {
+				@include media(mobile) {
+					background-color: #{map-deep-get($config-global, "color", "white")};
+					box-shadow: rgba(0,0,0,.1) 0 1px 2px;
+					li {
+						&.current-menu-item {
+							a {
+								color: #{map-deep-get($config-global, "color", "secondary", "default")};
+							}
+						}
+						a {
+							color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+							&::after {
+								content: "";
+							}
+							&:hover {
+								color: #{map-deep-get($config-global, "color", "primary", "hover")};
+							}
+						}
+						&:hover {
+							background: #f2f2f2;
+						}
+					}
+				}
+			}
+		}
+		
+		#toggle-menu {
+			display: block;
+			text-align: center;
+			text-decoration: none;
+			&:hover, 
+			&:focus,
+			&:visited {
+				text-decoration: none;
+			}
+		}
+		
+	}
+}
+
+/**
+ * 5. Footer
+ */
+.site-footer {
+	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
+	max-width: 1180px;
+	margin: 0 auto;
+	padding: #{map-deep-get($config-global, "spacing", "vertical")};
+}
+
+
+
+// UNSURE ABOUT KEEPING
+
+/**
+ * 6. Archive Pagination and Post Navigation
+ */
+.pagination .nav-links > *, 
+.post-navigation .post-title {
+	font-weight: normal;
+}
+
+
+/**
+ * 7. Block Specific Styles
+ */
+
+/**
+ * 7.1. Column Block
+ */
+.wp-block-coblocks-column {
+	h1, 
+	h2, 
+	h3, 
+	h4, 
+	h5, 
+	h6 {
+		margin-bottom: .857em;
+		&::before {
+			content: " - ";
+		}
+		&::after {
+			content: " - ";
+		}
+	}
+	a {
+		color: #{map-deep-get($config-global, "color", "secondary", "default")};
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+		}
+	}
+}
+
+/**
+ * 7.2. Quote Block
+ */
+.wp-block-quote, 
+.wp-block-quote[style*="text-align:center"], 
+.wp-block-quote[style*="text-align:right"] {
+	border: 1px solid #f2f2f2;
+	padding: #{map-deep-get($config-global, "spacing", "horizontal")};;
+	p {
+		font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+	}
+	cite {
+		color: #{map-deep-get($config-global, "color", "secondary", "default")};
+	}
+}
+
+/**
+ * 7.3. Hero Block and Cover Block
+ */
+.wp-block-coblocks-hero__box, 
+.wp-block-cover__inner-container {
+	background: #fff;
+    box-shadow: rgba(0,0,0,.1) 0 1px 2px;
+	padding: #{map-deep-get($config-global, "spacing", "vertical")};
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+	p {
+		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+}
+
+/**
+ * 7.4. File Block
+ */
+.wp-block-file {
+	a {
+		&.wp-block-file__button {
+			line-height: #{map-deep-get($config-button, "font", "line-height")};
+			color: #{map-deep-get($config-button, "color", "text")};
+			cursor: pointer;
+			font-weight: #{map-deep-get($config-button, "font", "weight")};
+			font-family: #{map-deep-get($config-button, "font", "family")};
+			font-size: #{map-deep-get($config-button, "font", "size")};
+			background-color: #{map-deep-get($config-button, "color", "background")};
+			border-radius: #{map-deep-get($config-button, "border-radius")};
+			border-width: #{map-deep-get($config-button, "border-width")};
+			padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+			display: inline-block;
+			&:focus, 
+			&:hover, 
+			&:visited {
+				color: #{map-deep-get($config-button, "color", "text-hover")};
+				background-color: #{map-deep-get($config-button, "color", "background-hover")};
+				opacity: 1;
+			}
+		}
+	}
+}
+
+/**
+ * 7.5. Latest Comments Block
+ */
+.wp-block-latest-comments {
+	.wp-block-latest-comments__comment-meta {
+		font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+		.wp-block-latest-comments__comment-date {
+			font-size: #{map-deep-get($config-global, "font", "size", "xs")};
+		}
+	}
+}
+
+/**
+ * 8. Widgets
+ */
+.site-footer {
+	.widget-area {
+		color: map-deep-get($config-footer, "color", "text");
+		a {
+			color: map-deep-get($config-footer, "color", "link");
+			&:hover {
+				color: map-deep-get($config-footer, "color", "link-hover");
+			}
+		}
+		.widget-title {
+			margin-bottom: .857em;
+			&::before {
+				content: " - ";
+			}
+			&::after {
+				content: " - ";
+			}
+		}
+	}
+}
+
+// ONLY IF HOME WITH NO HEADER - REMOVE FOR PRODUCTION
+.home {
+	&.page {
+		.site-main {
+			padding: 0;
+			article {
+				.entry-content {
+					margin-top: 0;
+				}
+			}
+		}
+		.entry-header {
+			display: none;
+		}		
+	}
+}

stow/sass/style-child-theme-editor.scss

@@ -34,8 +34,134 @@
 @import "../../varia/sass/blocks/editor";
 
 /**
- * Extras
+ * Extra Editor Styles
+ *
+ * 1. General Styles
+ * 2. Block Specific Styles
+ * 2.1. Column Block
+ * 2.2. Quote Block
+ * 2.3. Hero Block and Cover Block
+ * 2.4. File Block
+ * 7.5. Pre Block and Verse Block
  */
+
 .editor-post-title__input {
 	text-align: center;
 }
+
+/**
+ * 1. General Styles
+ */
+body {
+	background-color: #{map-deep-get($config-global, "color", "white")};
+	font-weight: 300;
+}
+
+a {
+	text-decoration: none;
+}
+
+/**
+ * 2. Block Specific Styles
+ */
+
+/**
+ * 2.1. Column Block
+ */
+ .wp-block-coblocks-column {
+	h1, 
+	h2, 
+	h3, 
+	h4, 
+	h5, 
+	h6 {
+		margin-bottom: .857em;
+		&::before {
+			content: " - ";
+		}
+		&::after {
+			content: " - ";
+		}
+	}
+	a {
+		color: #{map-deep-get($config-global, "color", "secondary", "default")};
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "secondary", "hover")};
+		}
+	}
+}
+
+/**
+ * 2.2. Quote Block
+ */
+ .wp-block-quote, 
+ .wp-block-quote[style*="text-align:center"], 
+ .wp-block-quote[style*="text-align:right"] {
+	 border: 1px solid #f2f2f2;
+	 padding: #{map-deep-get($config-global, "spacing", "horizontal")};;
+	 p {
+		 font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+	 }
+	 .wp-block-quote__citation {
+		 color: #{map-deep-get($config-global, "color", "secondary", "default")};
+	 }
+ }
+
+/**
+ * 2.3. Hero Block and Cover Block
+ */
+ .wp-block-coblocks-hero__box, 
+ .wp-block-cover__inner-container {
+	background: #fff;
+    box-shadow: rgba(0,0,0,.1) 0 1px 2px;
+	padding: #{map-deep-get($config-global, "spacing", "unit")};
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		padding: #{map-deep-get($config-global, "spacing", "unit")};
+	}
+	p {
+		padding: #{map-deep-get($config-global, "spacing", "unit")};
+	}
+ }
+
+ /**
+ * 2.4. File Block
+ */
+.wp-block-file {
+	div {
+		&.wp-block-file__button {
+			line-height: #{map-deep-get($config-button, "font", "line-height")};
+			color: #{map-deep-get($config-button, "color", "text")};
+			cursor: pointer;
+			font-weight: #{map-deep-get($config-button, "font", "weight")};
+			font-family: #{map-deep-get($config-button, "font", "family")};
+			font-size: #{map-deep-get($config-button, "font", "size")};
+			background-color: #{map-deep-get($config-button, "color", "background")};
+			border-radius: #{map-deep-get($config-button, "border-radius")};
+			border-width: #{map-deep-get($config-button, "border-width")};
+			padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+			display: inline-block;
+			&:focus, 
+			&:hover, 
+			&:visited {
+				color: #{map-deep-get($config-button, "color", "text-hover")};
+				background-color: #{map-deep-get($config-button, "color", "background-hover")};
+				opacity: 1;
+			}
+		}
+	}
+}
+
+/**
+ * 2.5. Pre Block and Verse Block
+ */
+.wp-block-preformatted,
+.wp-block-verse {
+	pre {
+		font-family: #{map-deep-get($config-global, "font", "family", "code")};
+	}
+}

stow/style-editor.css

@@ -169,8 +169,8 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  */
 body {
 	color: #444444;
-	background-color: white;
-	font-family: serif;
+	background-color: #f0f0f0;
+	font-family: "Source Sans Pro", Arial, sans-serif;
 	font-size: 18px;
 	font-weight: normal;
 	line-height: 1.78;
@@ -188,11 +188,11 @@ p {
 }
 
 a {
-	color: blue;
+	color: #404040;
 }
 
 a:hover {
-	color: indigo;
+	color: #e1122a;
 }
 
 button,
@@ -213,15 +213,15 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.728rem;
-	letter-spacing: normal;
+	font-size: 1.2rem;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 blockquote cite,
 blockquote footer {
 	font-size: 0.83333rem;
-	letter-spacing: normal;
+	letter-spacing: 2px;
 }
 
 blockquote > * {
@@ -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;
 }
@@ -251,7 +251,7 @@ blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
 	font-size: 0.69444rem;
-	letter-spacing: normal;
+	letter-spacing: 2px;
 }
 
 figcaption {
@@ -304,29 +304,29 @@ object {
 }
 
 .wp-block-button .wp-block-button__link {
-	color: white;
+	color: #f0f0f0;
 	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;
 	line-height: 1;
-	background-color: blue;
+	background-color: #f25f70;
 	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: #f0f0f0;
+	background-color: #4f4f4f;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
+	color: #f25f70;
 	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: #4f4f4f;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -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: #f0f0f0;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
@@ -360,8 +360,8 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.48832em;
-	letter-spacing: normal;
+	font-size: 1.728em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 	padding: 0;
 	max-width: inherit;
@@ -389,44 +389,44 @@ 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: "Oswald", sans-serif;
+	font-weight: 300;
 	clear: both;
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 2.98598em;
-	letter-spacing: normal;
+	font-size: 2.0736em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 2.48832em;
-	letter-spacing: normal;
+	font-size: 1.728em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 2.0736em;
-	letter-spacing: normal;
+	font-size: 1.44em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 1.728em;
-	letter-spacing: normal;
+	font-size: 1.2em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.44em;
-	letter-spacing: normal;
+	font-size: 1em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.2em;
-	letter-spacing: normal;
+	font-size: 0.83333em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
@@ -474,9 +474,9 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
-	letter-spacing: normal;
+	font-family: "Source Sans Pro", Arial, sans-serif;
+	font-size: 1.2em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
@@ -489,7 +489,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote footer {
 	color: #767676;
 	font-size: 0.83333em;
-	letter-spacing: normal;
+	letter-spacing: 2px;
 }
 
 .wp-block-pullquote:not(.is-style-solid-color) {
@@ -497,8 +497,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: blue;
-	color: white;
+	background-color: #404040;
+	color: #f0f0f0;
 }
 
 .wp-block-pullquote.is-style-solid-color.alignleft blockquote,
@@ -527,14 +527,14 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: blue;
+	border-left-color: #404040;
 	margin: 32px 0;
 	padding-left: 16px;
 }
 
 .wp-block-quote p {
-	font-size: 1.728em;
-	letter-spacing: normal;
+	font-size: 1.2em;
+	letter-spacing: 2px;
 }
 
 .wp-block-quote.is-large, .wp-block-quote.is-style-large {
@@ -543,8 +543,8 @@ 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;
-	letter-spacing: normal;
+	font-size: 1.44em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
@@ -577,7 +577,7 @@ hr.is-style-dots:before {
 
 table th,
 .wp-block-table th {
-	font-family: sans-serif;
+	font-family: "Oswald", sans-serif;
 }
 
 table td,
@@ -593,19 +593,19 @@ table th,
  */
 .editor-post-title__block .editor-post-title__input {
 	color: #444444;
-	font-family: sans-serif;
-	font-weight: normal;
-	font-size: 2.48832em;
-	letter-spacing: normal;
+	font-family: "Oswald", sans-serif;
+	font-weight: 300;
+	font-size: 1.728em;
+	letter-spacing: 2px;
 	line-height: 1.125;
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: #404040 !important;
 }
 
 .has-secondary-color[class] {
-	color: red !important;
+	color: #f25f70 !important;
 }
 
 .has-foreground-color[class] {
@@ -621,12 +621,12 @@ table th,
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #f0f0f0 !important;
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
-	color: white;
+	background-color: #404040 !important;
+	color: #f0f0f0;
 }
 
 .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 {
@@ -634,8 +634,8 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: red !important;
-	color: white;
+	background-color: #f25f70 !important;
+	color: #f0f0f0;
 }
 
 .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 {
@@ -644,7 +644,7 @@ table th,
 
 .has-foreground-background-color[class] {
 	background-color: #444444 !important;
-	color: white;
+	color: #f0f0f0;
 }
 
 .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 {
@@ -653,7 +653,7 @@ table th,
 
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
-	color: white;
+	color: #f0f0f0;
 }
 
 .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 {
@@ -662,7 +662,7 @@ table th,
 
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
-	color: white;
+	color: #f0f0f0;
 }
 
 .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 {
@@ -670,7 +670,7 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
+	background-color: #f0f0f0 !important;
 	color: #444444;
 }
 
@@ -704,14 +704,158 @@ table th,
 }
 
 .has-drop-cap:not(:focus)::first-letter {
-	font-family: sans-serif;
-	font-size: calc(2 * 2.98598em);
-	font-weight: normal;
+	font-family: "Oswald", sans-serif;
+	font-size: calc(2 * 2.0736em);
+	font-weight: 300;
 }
 
 /**
- * Extras
+ * Extra Editor Styles
+ *
+ * 1. General Styles
+ * 2. Block Specific Styles
+ * 2.1. Column Block
+ * 2.2. Quote Block
+ * 2.3. Hero Block and Cover Block
+ * 2.4. File Block
+ * 7.5. Pre Block and Verse Block
  */
 .editor-post-title__input {
 	text-align: center;
 }
+
+/**
+ * 1. General Styles
+ */
+body {
+	background-color: white;
+	font-weight: 300;
+}
+
+a {
+	text-decoration: none;
+}
+
+/**
+ * 2. Block Specific Styles
+ */
+/**
+ * 2.1. Column Block
+ */
+.wp-block-coblocks-column h1,
+.wp-block-coblocks-column h2,
+.wp-block-coblocks-column h3,
+.wp-block-coblocks-column h4,
+.wp-block-coblocks-column h5,
+.wp-block-coblocks-column h6 {
+	margin-bottom: .857em;
+}
+
+.wp-block-coblocks-column h1::before,
+.wp-block-coblocks-column h2::before,
+.wp-block-coblocks-column h3::before,
+.wp-block-coblocks-column h4::before,
+.wp-block-coblocks-column h5::before,
+.wp-block-coblocks-column h6::before {
+	content: " - ";
+}
+
+.wp-block-coblocks-column h1::after,
+.wp-block-coblocks-column h2::after,
+.wp-block-coblocks-column h3::after,
+.wp-block-coblocks-column h4::after,
+.wp-block-coblocks-column h5::after,
+.wp-block-coblocks-column h6::after {
+	content: " - ";
+}
+
+.wp-block-coblocks-column a {
+	color: #f25f70;
+}
+
+.wp-block-coblocks-column a:hover {
+	color: #4f4f4f;
+}
+
+/**
+ * 2.2. Quote Block
+ */
+.wp-block-quote,
+.wp-block-quote[style*="text-align:center"],
+.wp-block-quote[style*="text-align:right"] {
+	border: 1px solid #f2f2f2;
+	padding: 16px;
+}
+
+.wp-block-quote p,
+.wp-block-quote[style*="text-align:center"] p,
+.wp-block-quote[style*="text-align:right"] p {
+	font-family: "Source Sans Pro", Arial, sans-serif;
+}
+
+.wp-block-quote .wp-block-quote__citation,
+.wp-block-quote[style*="text-align:center"] .wp-block-quote__citation,
+.wp-block-quote[style*="text-align:right"] .wp-block-quote__citation {
+	color: #f25f70;
+}
+
+/**
+ * 2.3. Hero Block and Cover Block
+ */
+.wp-block-coblocks-hero__box,
+.wp-block-cover__inner-container {
+	background: #fff;
+	box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+	padding: 16px;
+}
+
+.wp-block-coblocks-hero__box h1,
+.wp-block-coblocks-hero__box h2,
+.wp-block-coblocks-hero__box h3,
+.wp-block-coblocks-hero__box h4,
+.wp-block-coblocks-hero__box h5,
+.wp-block-coblocks-hero__box h6,
+.wp-block-cover__inner-container h1,
+.wp-block-cover__inner-container h2,
+.wp-block-cover__inner-container h3,
+.wp-block-cover__inner-container h4,
+.wp-block-cover__inner-container h5,
+.wp-block-cover__inner-container h6 {
+	padding: 16px;
+}
+
+.wp-block-coblocks-hero__box p,
+.wp-block-cover__inner-container p {
+	padding: 16px;
+}
+
+/**
+ * 2.4. File Block
+ */
+.wp-block-file div.wp-block-file__button {
+	line-height: 1;
+	color: #f0f0f0;
+	cursor: pointer;
+	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.2rem;
+	background-color: #f25f70;
+	border-radius: 9px;
+	border-width: 2px;
+	padding: 16px 16px;
+	display: inline-block;
+}
+
+.wp-block-file div.wp-block-file__button:focus, .wp-block-file div.wp-block-file__button:hover, .wp-block-file div.wp-block-file__button:visited {
+	color: #f0f0f0;
+	background-color: #4f4f4f;
+	opacity: 1;
+}
+
+/**
+ * 2.5. Pre Block and Verse Block
+ */
+.wp-block-preformatted pre,
+.wp-block-verse pre {
+	font-family: "Courier 10 Pitch", Courier, monospace;
+}