Alves: Resyncing with latest changes in Varia and adding global styles support.

alves/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "alves",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

alves/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alves",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Alves",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

alves/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Lora\"\, Georgia\, sans-serif",
-			"secondary": "\"Karla\"\, Arial\, sans-serif",
+			"primary": (
+				"fallback": "\"Lora\"\, Georgia\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Karla\"\, Arial\, sans-serif",
+				"css-var": '--font-base',
+			),
 			"code": "Monaco\, Consolas\, \"Andale Mono\"\, \"DejaVu Sans Mono\"\, monospace",
-			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -146,7 +155,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": bold,
@@ -175,7 +187,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"weight": bold,
 		"line-height": 1,
@@ -208,7 +223,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "base"),
@@ -247,7 +265,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -257,7 +278,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 	// Border
 	"color": (
@@ -276,7 +300,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 );
 
@@ -286,6 +313,7 @@ $config-quote: (
 
 $config-separator: (
 	"height": #{0.25 * $baseline-unit},
+	"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")},
 );
 
 /**
@@ -303,7 +331,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "lg"),
 				"weight": bold,
 				"line-height": 1,
@@ -313,7 +344,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),
@@ -328,7 +362,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": bold,
 			"line-height": 1,
@@ -358,7 +395,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

alves/sass/_config-child-theme.scss

@@ -6,8 +6,8 @@
 // @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, "font" "family" "primary", "fallback", "\'Playfair Display\', serif");
+$config-global: map-deep-set($config-global, "font" "family" "secondary", "fallback", "\'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");
 
@@ -15,12 +15,12 @@ $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
 $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" "family", "fallback", "\'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" "family", "fallback", "\'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" "description" "font" "family", "fallback", "\'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);

alves/sass/_extra-child-theme.scss

@@ -37,13 +37,11 @@ $font_size_md: #{map-deep-get($config-global, "font", "size", "md")};
 $font_size_base: #{map-deep-get($config-global, "font", "size", "base")};
 $font_size_lg: #{map-deep-get($config-global, "font", "size", "lg")};
 $font_size_xl: #{map-deep-get($config-global, "font", "size", "xl")};
-$font_family_primary: #{map-deep-get($config-global, "font", "family", "primary")};
-$font_family_secondary: #{map-deep-get($config-global, "font", "family", "secondary")};
 $font_family_code: #{map-deep-get($config-global, "font", "family", "code")};
 $font_line_height_body: #{map-deep-get($config-global, "font", "line-height", "body")};
 $button_line_height: #{map-deep-get($config-button, "font", "line-height")};
 $button_font_weight: #{map-deep-get($config-button, "font", "weight")};
-$button_font_family: #{map-deep-get($config-button, "font", "family")};
+$button_font_family: #{map-deep-get($config-button, "font", "family", "fallback")};
 $button_font_size: #{map-deep-get($config-button, "font", "size")};
 $button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")};
 $button_spacing_horizontal: #{map-deep-get($config-button, "padding", "horizontal")};
@@ -117,11 +115,11 @@ input[type="submit"],
 }
 
 .widget-title {
-	font-family: $font_family_primary;
+	@include font-family( map-deep-get($config-global, "font", "family", "primary" ) );
 }
 
 blockquote cite {
-	font-family: $font_family_secondary;
+	@include font-family( map-deep-get($config-global, "font", "family", "secondary" ) );
 }
 
 .wp-block-quote p,
@@ -407,7 +405,7 @@ blockquote p {
 
 		a {
 			color: $color_foreground;
-			font-family: $font_family_secondary;
+			@include font-family( map-deep-get( $config-global, "font", "family", "secondary" ) );
 			padding: 0;
 			text-decoration: none;
 

alves/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

alves/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

alves/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #394d55;
 	background-color: #ffffff;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 16px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: #ffffff;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167em;
 	line-height: 1;
 	background-color: #3E7D98;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: normal;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 2.16em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	font-size: 2.592em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: calc(2 * 3.1104em);
 	font-weight: normal;
 }

alves/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -200,6 +204,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167rem;
 	background-color: #3E7D98;
 	border-radius: 160px;
@@ -659,6 +664,7 @@ html {
 html {
 	font-size: 13.33333px;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1436,6 +1442,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	clear: both;
 }
@@ -1527,6 +1534,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1560,6 +1568,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: normal;
 	line-height: 1.125;
@@ -1644,6 +1653,7 @@ img {
 ul,
 ol {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1658,6 +1668,7 @@ ol {
 
 dt {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 }
 
@@ -1731,6 +1742,7 @@ p.has-background {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -1804,6 +1816,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1883,6 +1896,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1965,6 +1979,10 @@ hr.wp-block-separator {
 		 */
 }
 
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 96px;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 	color: #3E7D98;
 	font-size: 2.16rem;
@@ -2011,6 +2029,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 table td,
@@ -2205,6 +2224,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: calc(2 * 3.1104rem);
 	font-weight: normal;
 	line-height: 0.66;
@@ -2351,7 +2371,7 @@ table th,
 .site-title {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
-	font-size: 1.8rem;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2372,6 +2392,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.8rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.04167rem;
 }
 
@@ -2529,7 +2557,7 @@ table th,
 	color: #394d55;
 	display: block;
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -2587,6 +2615,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.04167rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2634,6 +2666,7 @@ table th,
 .site-info {
 	color: #4d6974;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.04167rem;
 }
 
@@ -2708,7 +2741,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -2722,6 +2755,10 @@ table th,
 	color: #2f5f74;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 1.04167rem;
+}
+
 .entry-title {
 	font-size: 2.592rem;
 	letter-spacing: normal;
@@ -2846,6 +2883,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: 600;
 }
@@ -2873,6 +2911,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2935,6 +2974,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -3054,6 +3094,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 /**
@@ -3156,6 +3197,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 }
@@ -3187,6 +3229,7 @@ img#wpstats {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -3648,10 +3691,12 @@ input[type="submit"],
 
 .widget-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 blockquote cite {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 }
 
 .wp-block-quote p,
@@ -3888,6 +3933,7 @@ blockquote p {
 .site-footer #footer-info-wrapper a {
 	color: #394d55;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	padding: 0;
 	text-decoration: none;
 }

alves/style-woocommerce.css

@@ -162,6 +162,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Varia Responsive logic
  */
@@ -254,6 +258,7 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a {
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167rem;
 	background-color: #3E7D98;
 	border-radius: 160px;
@@ -374,7 +379,7 @@ body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-
 	color: #253136;
 	font-size: 1.04167rem;
 	font-weight: 700;
-	font-family: "Lora", Georgia, sans-serif;
+	font-family: ("fallback": '"Lora", Georgia, sans-serif', "css-var": "--font-headings");
 	min-height: 3.236rem;
 	min-width: 3.236rem;
 	padding: 0.202rem;
@@ -405,6 +410,7 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb {
 	margin-bottom: 32px;
 	font-size: 1.25rem;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	color: #4d6974;
 }
 
@@ -708,6 +714,7 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 
 #content .wc-block-grid .wc-block-grid__product-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.25rem;
 }
 
@@ -754,57 +761,6 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 /**
  * Components Imports
  */
-/**
- * Reviews
- */
-body[class*="woocommerce"] #page {
-	/**
-	 * Cart sidebar
-	 */
-}
-
-body[class*="woocommerce"] #page ul.cart_list li a:not(.remove),
-body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
-	font-family: "Lora", Georgia, sans-serif;
-	line-height: 1.125;
-}
-
-body[class*="woocommerce"] #page ul.cart_list li img,
-body[class*="woocommerce"] #page ul.product_list_widget li img {
-	margin-left: 4px;
-	width: 64px;
-}
-
-body[class*="woocommerce"] #page ul.cart_list li dl,
-body[class*="woocommerce"] #page ul.product_list_widget li dl {
-	border-left-color: #3E7D98;
-}
-
-body[class*="woocommerce"] #page ul.cart_list li dl dt,
-body[class*="woocommerce"] #page ul.cart_list li dl dd,
-body[class*="woocommerce"] #page ul.product_list_widget li dl dt,
-body[class*="woocommerce"] #page ul.product_list_widget li dl dd {
-	margin-bottom: 32px;
-}
-
-body[class*="woocommerce"] #page .widget_shopping_cart .total {
-	border-top: none;
-	padding-top: 0;
-}
-
-body[class*="woocommerce"] #page .widget_shopping_cart .cart_list {
-	border-bottom: 1px solid #3E7D98;
-}
-
-body[class*="woocommerce"] #page .widget_shopping_cart .cart_list li {
-	border-top: 1px solid #3E7D98;
-	padding: 16px 0 16px 32px;
-}
-
-body[class*="woocommerce"] #page .widget_shopping_cart .cart_list li a.remove {
-	top: 16px;
-}
-
 /**
  * Cart Collaterals
  */
@@ -924,16 +880,37 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .wooc
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a {
+	clear: right;
 	color: #3E7D98;
 	background-color: #ffffff;
 	margin: 0;
-	text-align: right;
+	float: right;
 }
 
-body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2),
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a {
+	clear: inherit;
+	float: inherit;
+	margin-bottom: 0;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2):not(:last-child),
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:first-child:nth-last-child(2) ~ a:not(:last-child) {
 	margin-right: 8px;
 }
 
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a:not(:last-child) {
+	margin-bottom: 8px;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget .woocommerce-mini-cart__buttons a.wcppec-cart-widget-button {
+	display: inline-block;
+}
+
+body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget p.buttons.wcppec-cart-widget-spb {
+	padding: 0;
+}
+
 body[class*="woocommerce"] #page .main-navigation ul.cart_list li a,
 body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a {
 	padding: 0;
@@ -945,6 +922,7 @@ body[class*="woocommerce"] #page .main-navigation ul.cart_list li a:not(.remove)
 body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a:not(.remove),
 body[class*="woocommerce"] #page .main-navigation .woocommerce-mini-cart__total {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.25rem;
 }
 
@@ -970,6 +948,7 @@ body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers {
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li > * {
 	display: block;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -1059,6 +1038,12 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 	margin-top: inherit;
 }
 
+#woocommerce-wrapper ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .added_to_cart,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .added_to_cart {
+	margin-top: 16px;
+}
+
 #woocommerce-wrapper ul.products li.product .price,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .price,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .price {
@@ -1173,6 +1158,7 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel {
 body[class*="woocommerce"] #page .woocommerce-tabs .panel h2,
 body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: bold;
 }
@@ -1221,6 +1207,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
@@ -1268,7 +1255,8 @@ body[class*="woocommerce"] #page div.summary > *:not(:first-child),
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:first-child),
 body[class*="woocommerce"] #page .products.related > *:not(:first-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
-body[class*="woocommerce"] #page .woocommerce-order > *:not(:first-child) {
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:first-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:first-child) {
 	margin-top: 32px;
 }
 
@@ -1276,7 +1264,8 @@ body[class*="woocommerce"] #page div.summary > *:not(:last-child),
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(:last-child),
 body[class*="woocommerce"] #page .products.related > *:not(:last-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:last-child),
-body[class*="woocommerce"] #page .woocommerce-order > *:not(:last-child) {
+body[class*="woocommerce"] #page .woocommerce-order > *:not(:last-child),
+.woocommerce-account #page .entry-content .woocommerce > *:not(:last-child) {
 	margin-bottom: 32px;
 }
 
@@ -1289,7 +1278,9 @@ body[class*="woocommerce"] #page .products.related > .form-row-last,
 body[class*="woocommerce"] #page .up-sells > *:empty + *,
 body[class*="woocommerce"] #page .up-sells > .form-row-last,
 body[class*="woocommerce"] #page .woocommerce-order > *:empty + *,
-body[class*="woocommerce"] #page .woocommerce-order > .form-row-last {
+body[class*="woocommerce"] #page .woocommerce-order > .form-row-last,
+.woocommerce-account #page .entry-content .woocommerce > *:empty + *,
+.woocommerce-account #page .entry-content .woocommerce > .form-row-last {
 	margin-top: 0;
 }
 
@@ -1297,7 +1288,8 @@ body[class*="woocommerce"] #page div.summary > *:not(img):empty,
 body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(img):empty,
 body[class*="woocommerce"] #page .products.related > *:not(img):empty,
 body[class*="woocommerce"] #page .up-sells > *:not(img):empty,
-body[class*="woocommerce"] #page .woocommerce-order > *:not(img):empty {
+body[class*="woocommerce"] #page .woocommerce-order > *:not(img):empty,
+.woocommerce-account #page .entry-content .woocommerce > *:not(img):empty {
 	margin: 0;
 }
 
@@ -1499,6 +1491,7 @@ body[class*="woocommerce"] #page td.product-thumbnail img {
 
 body[class*="woocommerce"] #page td.product-name {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: 700;
 }
 
@@ -1532,6 +1525,7 @@ body[class*="woocommerce"] #page table.cart td.actions .input-text {
  */
 body[class*="woocommerce"] #page .woocommerce-order h2 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: bold;
 }
@@ -1547,6 +1541,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
 	border: none;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.04167rem;
 	margin-right: 0;
 	padding: 16px;
@@ -1563,6 +1558,7 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:no
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.5rem;
 	line-height: 1.125;
 }
@@ -1612,17 +1608,21 @@ body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coup
 	margin: 0 16px 0 0;
 }
 
-body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout {
+body[class*="woocommerce"] #page .wc-proceed-to-checkout {
 	padding: 32px 0;
 }
 
-body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout a.checkout-button {
-	margin-bottom: 32px;
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.checkout-button {
+	margin-bottom: 16px;
 	font-size: 1.5rem;
 	padding: 16px;
 }
 
-body[class*="woocommerce"] #page #add_payment_method .checkout .create-account small {
+body[class*="woocommerce"] #page .wc-proceed-to-checkout a.wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .checkout .create-account small {
 	font-size: 0.86806rem;
 	color: #4d6974;
 }
@@ -1735,6 +1735,7 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
 
 body[class*="woocommerce"] #page .checkout h3 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: bold;
 }
@@ -1781,6 +1782,10 @@ body[class*="woocommerce"] #page .addresses .title .edit {
 	line-height: 1;
 }
 
+.woocommerce-account .entry-content .woocommerce > h2 {
+	font-size: 1.8rem;
+}
+
 /**
  * Products Page
  */
@@ -1926,9 +1931,78 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 	vertical-align: middle;
 }
 
+.single-product #page #woocommerce-wrapper div.product form.cart div.quantity.hidden,
+.single-product #page #woocommerce-wrapper div.product form.cart button.hidden {
+	display: none;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div {
+	text-align: left;
+}
+
+.single-product #page #woocommerce-wrapper div.product .woo_pp_cart_buttons_div .wcppec-checkout-buttons__button {
+	padding-top: 0;
+}
+
 /**
  * Widget Imports
  */
+/**
+ * Cart Widget
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Cart Widget product list
+	 */
+}
+
+body[class*="woocommerce"] #page ul.cart_list li a:not(.remove),
+body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
+	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
+	line-height: 1.125;
+}
+
+body[class*="woocommerce"] #page ul.cart_list li img,
+body[class*="woocommerce"] #page ul.product_list_widget li img {
+	margin-left: 4px;
+	width: 64px;
+}
+
+body[class*="woocommerce"] #page ul.cart_list li dl,
+body[class*="woocommerce"] #page ul.product_list_widget li dl {
+	border-left-color: #3E7D98;
+}
+
+body[class*="woocommerce"] #page ul.cart_list li dl dt,
+body[class*="woocommerce"] #page ul.cart_list li dl dd,
+body[class*="woocommerce"] #page ul.product_list_widget li dl dt,
+body[class*="woocommerce"] #page ul.product_list_widget li dl dd {
+	margin-bottom: 32px;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .total {
+	border-top: none;
+	padding-top: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list {
+	border-bottom: 1px solid #3E7D98;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li {
+	border-top: 1px solid #3E7D98;
+	padding: 16px 0 16px 32px;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .cart_list li a.remove {
+	top: 16px;
+}
+
+body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a#woo_pp_ec_button {
+	padding: 0;
+}
+
 /**
  * Filter by Price Widget
  */
@@ -1941,6 +2015,27 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 	background-color: #4d6974;
 }
 
+/**
+ * Filter by Product List Widgets
+ */
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li {
+		flex: 0 1 auto;
+		margin-bottom: 32px;
+		padding: 0;
+		width: calc((100% / 3) - 16px);
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li:nth-child(3n+2):last-child {
+		margin-left: 24px;
+		margin-right: auto;
+	}
+}
+
 /**
  * WC Wrap
  */

alves/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -200,6 +204,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167rem;
 	background-color: #3E7D98;
 	border-radius: 160px;
@@ -659,6 +664,7 @@ html {
 html {
 	font-size: 13.33333px;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1436,6 +1442,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	clear: both;
 }
@@ -1527,6 +1534,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1560,6 +1568,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: normal;
 	line-height: 1.125;
@@ -1644,6 +1653,7 @@ img {
 ul,
 ol {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1658,6 +1668,7 @@ ol {
 
 dt {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 }
 
@@ -1731,6 +1742,7 @@ p.has-background {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -1804,6 +1816,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1883,6 +1896,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1965,6 +1979,10 @@ hr.wp-block-separator {
 		 */
 }
 
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 96px;
+}
+
 hr.wp-block-separator.is-style-dots:before {
 	color: #3E7D98;
 	font-size: 2.16rem;
@@ -2011,6 +2029,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 table td,
@@ -2210,6 +2229,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: calc(2 * 3.1104rem);
 	font-weight: normal;
 	line-height: 0.66;
@@ -2368,7 +2388,7 @@ table th,
 .site-title {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
-	font-size: 1.8rem;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2389,6 +2409,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.8rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.04167rem;
 }
 
@@ -2546,7 +2574,7 @@ table th,
 	color: #394d55;
 	display: block;
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -2604,6 +2632,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.04167rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2651,6 +2683,7 @@ table th,
 .site-info {
 	color: #4d6974;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.04167rem;
 }
 
@@ -2725,7 +2758,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -2739,6 +2772,10 @@ table th,
 	color: #2f5f74;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 1.04167rem;
+}
+
 .entry-title {
 	font-size: 2.592rem;
 	letter-spacing: normal;
@@ -2863,6 +2900,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: 600;
 }
@@ -2890,6 +2928,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2952,6 +2991,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -3071,6 +3111,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 /**
@@ -3173,6 +3214,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 }
@@ -3204,6 +3246,7 @@ img#wpstats {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -3677,10 +3720,12 @@ input[type="submit"],
 
 .widget-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 blockquote cite {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 }
 
 .wp-block-quote p,
@@ -3917,6 +3962,7 @@ blockquote p {
 .site-footer #footer-info-wrapper a {
 	color: #394d55;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	padding: 0;
 	text-decoration: none;
 }

balasana/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "balasana",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

balasana/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balasana",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Balasana",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

balasana/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Roboto Condensed\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"primary": (
+				"fallback": "\"Roboto Condensed\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -137,7 +146,10 @@ $config-elements: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": bold,
@@ -164,7 +176,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "ui"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"weight": 700,
 		"line-height": 1,
@@ -197,7 +212,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -236,7 +254,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -246,7 +267,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 	// Border
 	"color": (
@@ -265,7 +289,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 );
 
@@ -275,6 +302,7 @@ $config-quote: (
 
 $config-separator: (
 	"height": #{0.25 * $baseline-unit},
+	"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")},
 );
 
 /**
@@ -292,7 +320,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "lg"),
 				"weight": 700,
 				"line-height": 1,
@@ -302,7 +333,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),
@@ -317,7 +351,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": 400,
 			"line-height": 1,
@@ -347,7 +384,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

balasana/sass/_extra-child-theme.scss

@@ -38,6 +38,7 @@ input[type="submit"] {
 
 dt {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }
 
 .entry-header,
@@ -329,6 +330,7 @@ dt {
 	border-radius: $border_radius_sm;
 	color: $color_foreground;
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 	padding: #{0.5 * $spacing_unit} $spacing_unit;
 }
 
@@ -337,6 +339,7 @@ dt {
  */
 .pagination .nav-links > * {
 	font-family: inherit;
+	font-family: var( --font-headings, inherit );
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -373,6 +376,7 @@ dt {
 .comment-navigation {
 	a {
 		font-family: inherit;
+		font-family: var( --font-headings, inherit );
 		font-size: inherit;
 		font-weight: 400;
 	}
@@ -385,6 +389,7 @@ dt {
 	.comment-author {
 		.fn {
 			font-family: inherit;
+			font-family: var( --font-headings, inherit );
 
 			a {
 				color: inherit;
@@ -417,6 +422,7 @@ dt {
 .trackback {
 	.url {
 		font-family: inherit;
+		font-family: var( --font-headings, inherit );
 	}
 }
 
@@ -439,6 +445,7 @@ dt {
 // Latest Comments
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: inherit;
+	font-family: var( --font-headings, inherit );
 }
 
 // Pullquote

balasana/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without support for CSS custom properties.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

balasana/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Balasana is a clean and minimalist business theme designed with health and wellness-focused sites in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.3
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

balasana/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #303030;
 	background-color: white;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -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.6;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
 	background-color: #19744C;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #303030;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	font-size: 2.48832em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598em);
 	font-weight: 700;
 }

balasana/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Balasana is a clean and minimalist business theme designed with health and wellness-focused sites in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.3
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #19744C;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #303030;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.44rem;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.44rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #303030;
 	display: block;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #303030;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #19744C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #D0D0D0;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3590,6 +3629,7 @@ input[type="submit"]:hover {
 
 dt {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 .entry-header,
@@ -3865,6 +3905,7 @@ dt {
 	border-radius: 4px;
 	color: #303030;
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 	padding: 8px 16px;
 }
 
@@ -3873,6 +3914,7 @@ dt {
  */
 .pagination .nav-links > * {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3906,6 +3948,7 @@ dt {
  */
 .comment-navigation a {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3915,6 +3958,7 @@ dt {
  */
 .comment-meta .comment-author .fn {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .comment-meta .comment-author .fn a {
@@ -3942,6 +3986,7 @@ dt {
 .pingback .url,
 .trackback .url {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 /**
@@ -3959,6 +4004,7 @@ dt {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .wp-block-pullquote blockquote {

balasana/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Balasana is a clean and minimalist business theme designed with health and wellness-focused sites in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.3
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #19744C;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #303030;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.44rem;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.44rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #303030;
 	display: block;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #303030;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #19744C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #D0D0D0;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3619,6 +3658,7 @@ input[type="submit"]:hover {
 
 dt {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 .entry-header,
@@ -3894,6 +3934,7 @@ dt {
 	border-radius: 4px;
 	color: #303030;
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 	padding: 8px 16px;
 }
 
@@ -3902,6 +3943,7 @@ dt {
  */
 .pagination .nav-links > * {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3935,6 +3977,7 @@ dt {
  */
 .comment-navigation a {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3944,6 +3987,7 @@ dt {
  */
 .comment-meta .comment-author .fn {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .comment-meta .comment-author .fn a {
@@ -3971,6 +4015,7 @@ dt {
 .pingback .url,
 .trackback .url {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 /**
@@ -3988,6 +4033,7 @@ dt {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .wp-block-pullquote blockquote {

barnsbury/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "barnsbury",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

barnsbury/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barnsbury",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Barnsbury",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

barnsbury/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
-			"secondary": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
+			"primary": (
+				"fallback": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": bold,
@@ -169,7 +181,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "base"),
 		"weight": bold,
 		"line-height": 1,
@@ -202,7 +217,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -251,7 +272,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 );
 
@@ -280,6 +307,7 @@ $config-quote: (
 
 $config-separator: (
 	"height": #{0.33 * $baseline-unit},
+	"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")},
 );
 
 /**
@@ -297,7 +325,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xl"),
 				"weight": bold,
 				"line-height": 1,
@@ -307,7 +338,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xs"),
 			),
 		),
@@ -322,7 +356,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": bold,
 			"line-height": 1,
@@ -352,7 +389,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

barnsbury/sass/_extra-child-theme.scss

@@ -347,6 +347,7 @@ a {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }
 
 /**

barnsbury/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without support for CSS custom properties.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

barnsbury/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

barnsbury/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #3C2323;
 	background-color: #FFFDF6;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: #FFFDF6;
 	font-weight: bold;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1em;
 	line-height: 1;
 	background-color: #20603C;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	font-weight: bold;
 	line-height: 1.15;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303em;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.93878em;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #3C2323;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 2.28776em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: calc(2 * 2.69955em);
 	font-weight: bold;
 }

barnsbury/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.94915px;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1rem;
 	background-color: #20603C;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	font-weight: bold;
 	line-height: 1.15;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: calc(2 * 2.69955rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #0D1B24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1.64303rem;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.64303rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.71818rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #3C2323;
 	display: block;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #133a24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 0.84746rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 0.84746rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #20603C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.84746rem;
+}
+
 .entry-title {
 	font-size: 2.28776rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.3924rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.15;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #3C2323;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -3918,6 +3957,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

barnsbury/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.94915px;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1rem;
 	background-color: #20603C;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	font-weight: bold;
 	line-height: 1.15;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: calc(2 * 2.69955rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #0D1B24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1.64303rem;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.64303rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.71818rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #3C2323;
 	display: block;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #133a24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 0.84746rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 0.84746rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #20603C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.84746rem;
+}
+
 .entry-title {
 	font-size: 2.28776rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.3924rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.15;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #3C2323;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -3947,6 +3986,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

brompton/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "brompton",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

brompton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brompton",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Brompton",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

brompton/print.css

@@ -28,6 +28,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "Lora, Cambria, \"Hoefler Text\"\, Utopia, \"Liberation Serif\"\, \"Nimbus Roman No9 L Regular\"\, Times, \"Times New Roman\"\, serif",
+			"primary": (
+				"fallback": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "Lora, Cambria, \"Hoefler Text\"\, Utopia, \"Liberation Serif\"\, \"Nimbus Roman No9 L Regular\"\, Times, \"Times New Roman\"\, serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": bold,
@@ -169,7 +181,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "ui"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "base"),
 		"weight": 900,
 		"line-height": 1,
@@ -202,7 +217,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -251,7 +272,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-global, "font", "family", "secondary")},
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-global, "font", "family", "secondary")},
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -298,7 +325,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xl"),
 				"weight": 900,
 				"line-height": 1,
@@ -308,7 +338,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),
@@ -323,7 +356,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "primary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": 900,
 			"line-height": 1,
@@ -353,7 +389,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "xs"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "xs"),
 	),

brompton/sass/_extra-child-theme.scss

@@ -292,7 +292,7 @@ article .entry-header .entry-title,
 // Quote block
 .wp-block-quote {
   p {
-    font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
   }
 }
 
@@ -393,14 +393,14 @@ table,
 
 	.meta-nav {
 		color: #{map-deep-get($config-global, "color", "foreground", "default")};
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 		font-weight: 900;
 		text-transform: uppercase;
 	}
 
 	.post-title {
-		font-family: #{map-deep-get($config-global, "font", "family", "secondary")};;
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 		font-weight: normal;
 	}
@@ -511,7 +511,7 @@ table,
 
 	.reply {
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};;
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-size: #{map-deep-get($config-global, "font", "size", "base")};
 		font-weight: 900;
 		text-align: center;

brompton/sass/print.scss

@@ -35,6 +35,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 
   body {
     font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

brompton/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Running a business is no small task. But with the right tools and support, creating a website doesn’t have to be another chore on your to-do list: enter Brompton, a simple yet powerful theme for small-business owners and entrepreneurs.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

brompton/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #252E36;
 	background-color: #E8E4DD;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.78;
@@ -299,6 +304,7 @@ object {
 	color: #E8E4DD;
 	font-weight: 900;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito 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: #252E36;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 900;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #252E36;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	font-size: 2.48832em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598em);
 	font-weight: 900;
 }

brompton/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Running a business is no small task. But with the right tools and support, creating a website doesn’t have to be another chore on your to-do list: enter Brompton, a simple yet powerful theme for small-business owners and entrepreneurs.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 900;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	background-color: #252E36;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 900;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -2003,6 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2197,6 +2212,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 900;
 	line-height: 0.66;
@@ -2343,7 +2359,7 @@ table th,
 .site-title {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2364,6 +2380,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2521,7 +2545,7 @@ table th,
 	color: #FFFFFF;
 	display: block;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 8px 0;
 }
@@ -2579,6 +2603,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2626,6 +2654,7 @@ table th,
 .site-info {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.69444rem;
 }
 
@@ -2700,7 +2729,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 16px;
 	color: currentColor;
@@ -2714,6 +2743,10 @@ table th,
 	color: rgba(255, 255, 255, 0.5);
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2838,6 +2871,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2865,6 +2899,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2927,6 +2962,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -3046,6 +3082,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3148,6 +3185,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3179,6 +3217,7 @@ img#wpstats {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3828,6 +3867,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 }
 
 table td,
@@ -3913,6 +3953,7 @@ table th,
 .post-navigation .meta-nav {
 	color: #252E36;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	font-weight: 900;
 	text-transform: uppercase;
@@ -3920,6 +3961,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 0.83333rem;
 	font-weight: normal;
 }
@@ -4025,6 +4067,7 @@ table th,
 .comments-area .reply {
 	color: #666666;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	font-weight: 900;
 	text-align: center;

brompton/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Running a business is no small task. But with the right tools and support, creating a website doesn’t have to be another chore on your to-do list: enter Brompton, a simple yet powerful theme for small-business owners and entrepreneurs.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 900;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	background-color: #252E36;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 900;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -2003,6 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2202,6 +2217,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 900;
 	line-height: 0.66;
@@ -2360,7 +2376,7 @@ table th,
 .site-title {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2381,6 +2397,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2538,7 +2562,7 @@ table th,
 	color: #FFFFFF;
 	display: block;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 8px 0;
 }
@@ -2596,6 +2620,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2643,6 +2671,7 @@ table th,
 .site-info {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.69444rem;
 }
 
@@ -2717,7 +2746,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 16px;
 	color: currentColor;
@@ -2731,6 +2760,10 @@ table th,
 	color: rgba(255, 255, 255, 0.5);
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2855,6 +2888,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2882,6 +2916,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2944,6 +2979,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -3063,6 +3099,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3165,6 +3202,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3196,6 +3234,7 @@ img#wpstats {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3857,6 +3896,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 }
 
 table td,
@@ -3942,6 +3982,7 @@ table th,
 .post-navigation .meta-nav {
 	color: #252E36;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	font-weight: 900;
 	text-transform: uppercase;
@@ -3949,6 +3990,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 0.83333rem;
 	font-weight: normal;
 }
@@ -4054,6 +4096,7 @@ table th,
 .comments-area .reply {
 	color: #666666;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	font-weight: 900;
 	text-align: center;

calm-business/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "calm-business",
-  "version": "1.0.0",
+  "version": "1.6.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -44,15 +44,15 @@
       "dev": true
     },
     "@types/node": {
-      "version": "11.13.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.9.tgz",
-      "integrity": "sha512-NJ4yuEVw5podZbINp3tEqUIImMSAEHaCXRiWCf3KC32l6hIKf0iPJEh2uZdT0fELfRYk310yLmMXqy2leZQUbg==",
+      "version": "12.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
+      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
       "dev": true
     },
     "@wordpress/browserslist-config": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.3.0.tgz",
-      "integrity": "sha512-bNOahe6ntNF3pRvCaeh2tGgnpPxe35U6UBfvRjDcOk3sIRvN1S7XlG0rlGZOOD+vJU93VLDM8AUj4uL6VPqPgQ==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.6.0.tgz",
+      "integrity": "sha512-vRgzGoxhcNVChBP30XZlyK4w6r/9ZpO+Fi1dzmButp31lUEb1pT5WBxTIQl3HE0JZ9YTEJ00WWGO5sjGi5MHZA==",
       "dev": true
     },
     "abbrev": {
@@ -249,17 +249,18 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.5.1.tgz",
-      "integrity": "sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ==",
+      "version": "9.6.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
+      "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.5.4",
-        "caniuse-lite": "^1.0.30000957",
+        "browserslist": "^4.7.0",
+        "caniuse-lite": "^1.0.30000999",
+        "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.14",
-        "postcss-value-parser": "^3.3.1"
+        "postcss": "^7.0.18",
+        "postcss-value-parser": "^4.0.2"
       }
     },
     "aws-sign2": {
@@ -360,9 +361,9 @@
       }
     },
     "bluebird": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
-      "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==",
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
       "dev": true
     },
     "brace-expansion": {
@@ -405,14 +406,14 @@
       }
     },
     "browserslist": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.6.tgz",
-      "integrity": "sha512-o/hPOtbU9oX507lIqon+UvPYqpx3mHc8cV3QemSBTXwkG8gSQSK6UKvXcE/DcleU3+A59XTUHyCvZ5qGy8xVAg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.1.tgz",
+      "integrity": "sha512-QtULFqKIAtiyNx7NhZ/p4rB8m3xDozVo/pi5VgTlADLF2tNigz/QH+v0m5qhn7XfHT7u+607NcCNOnC0HZAlMg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30000963",
-        "electron-to-chromium": "^1.3.127",
-        "node-releases": "^1.1.17"
+        "caniuse-lite": "^1.0.30000999",
+        "electron-to-chromium": "^1.3.284",
+        "node-releases": "^1.1.36"
       }
     },
     "cache-base": {
@@ -438,6 +439,30 @@
       "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=",
       "dev": true
     },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
+    },
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -463,9 +488,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000966",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000966.tgz",
-      "integrity": "sha512-qqLQ/uYrpZmFhPY96VuBkMEo8NhVFBZ9y/Bh+KnvGzGJ5I8hvpIaWlF2pw5gqe4PLAL+ZjsPgMOvoXSpX21Keg==",
+      "version": "1.0.30000999",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz",
+      "integrity": "sha512-1CUyKyecPeksKwXZvYw0tEoaMCo/RwBlXmEtN5vVnabvO0KPd9RQLcaAuR9/1F+KDMv6esmOFWlsXuzDk+8rxg==",
       "dev": true
     },
     "caseless": {
@@ -497,9 +522,9 @@
       }
     },
     "chokidar": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.1.tgz",
-      "integrity": "sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
+      "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
       "dev": true,
       "requires": {
         "anymatch": "^2.0.0",
@@ -513,25 +538,25 @@
         "normalize-path": "^3.0.0",
         "path-is-absolute": "^1.0.0",
         "readdirp": "^2.2.1",
-        "upath": "^1.1.0"
+        "upath": "^1.1.1"
       }
     },
     "chokidar-cli": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.2.tgz",
-      "integrity": "sha512-Yx0OYKcAkS7YMPP3/co6aN+1AOx2L6WmscqWvnqs7z+9AhDsn4zpezaErNoPACri1iUVjtxk8E77sMGntkBh3Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.3.tgz",
+      "integrity": "sha512-HcHjqeQaT/u0Swy4eaqqg0NhPjsXq6ZN9YzP48EYc81FXBLQuvMXBsrEMDkgH+Puup1mBc0gD0qqECDy/WiMOA==",
       "dev": true,
       "requires": {
-        "bluebird": "3.5.3",
-        "chokidar": "2.1.1",
-        "lodash": "4.17.13",
-        "yargs": "12.0.5"
+        "bluebird": "3.5.5",
+        "chokidar": "2.1.5",
+        "lodash": "4.17.15",
+        "yargs": "13.3.0"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.13",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
-          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
           "dev": true
         }
       }
@@ -560,14 +585,53 @@
       }
     },
     "cliui": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
       "dev": true,
       "requires": {
-        "string-width": "^2.1.1",
-        "strip-ansi": "^4.0.0",
-        "wrap-ansi": "^2.0.0"
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        }
       }
     },
     "code-point-at": {
@@ -653,15 +717,15 @@
       "dev": true
     },
     "cosmiconfig": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
-      "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
       "dev": true,
       "requires": {
+        "import-fresh": "^2.0.0",
         "is-directory": "^0.3.1",
-        "js-yaml": "^3.9.0",
-        "parse-json": "^4.0.0",
-        "require-from-string": "^2.0.1"
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
       },
       "dependencies": {
         "parse-json": {
@@ -833,15 +897,21 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.130",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.130.tgz",
-      "integrity": "sha512-UY2DI+gsnqGtQJqO8wXN0DnpJY+29FwJafACj0h18ZShn5besKnrRq6+lXWUbKzdxw92QQcnTqRLgNByOKXcUg==",
+      "version": "1.3.285",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.285.tgz",
+      "integrity": "sha512-DYR9KW723sUbGK++DCmCmM95AbNXT4Q0tlCFMcYijFjayhuDqlGYR68OemlP8MJj0gjkwdeItIUfd0oLCgw+4A==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
       "dev": true
     },
     "end-of-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
       "dev": true,
       "requires": {
         "once": "^1.4.0"
@@ -1048,9 +1118,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.6.tgz",
-      "integrity": "sha512-0BvMaZc1k9F+MeWWMe8pL6YltFzZYcJsYU7D4JyDA6PAczaXvxqQQ/z+mDF7/4Mw01DeUc+i3CTKajnkANkV4w==",
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+      "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
       "dev": true,
       "requires": {
         "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -1178,7 +1248,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1199,12 +1270,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1219,17 +1292,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1346,7 +1422,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1358,6 +1435,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1372,6 +1450,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1379,12 +1458,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1403,6 +1484,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1483,7 +1565,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1495,6 +1578,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1580,7 +1664,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1616,6 +1701,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1635,6 +1721,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1678,12 +1765,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -1875,7 +1964,7 @@
       "dev": true,
       "requires": {
         "glob": "~7.1.1",
-        "lodash": "~4.17.13",
+        "lodash": "~4.17.10",
         "minimatch": "~3.0.2"
       }
     },
@@ -2009,6 +2098,16 @@
         "import-from": "^2.1.0"
       }
     },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      }
+    },
     "import-from": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
@@ -2431,9 +2530,9 @@
       }
     },
     "map-age-cleaner": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
-      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"
@@ -2496,9 +2595,9 @@
       }
     },
     "merge2": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
-      "integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
+      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
       "dev": true
     },
     "micromatch": {
@@ -2662,12 +2761,20 @@
       }
     },
     "node-releases": {
-      "version": "1.1.17",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.17.tgz",
-      "integrity": "sha512-/SCjetyta1m7YXLgtACZGDYJdCSIBAWorDWkGCGZlydP2Ll7J48l7j/JxNYZ+xsgSPbWfdulVS/aY+GdjUsQ7Q==",
+      "version": "1.1.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.36.tgz",
+      "integrity": "sha512-ggXhX6QGyJSjj3r+6ml2LqqC28XOWmKtpb+a15/Zpr9V3yoNazxJNlcQDS9bYaid5FReEWHEgToH1mwoUceWwg==",
       "dev": true,
       "requires": {
-        "semver": "^5.3.0"
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
       }
     },
     "node-sass": {
@@ -2683,7 +2790,7 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.11",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
         "nan": "^2.13.2",
@@ -3014,9 +3121,9 @@
       "dev": true
     },
     "p-limit": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
-      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
+      "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
       "dev": true,
       "requires": {
         "p-try": "^2.0.0"
@@ -3133,9 +3240,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
-      "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
+      "version": "7.0.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz",
+      "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -3144,9 +3251,9 @@
       }
     },
     "postcss-cli": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.2.tgz",
-      "integrity": "sha512-jIWfIkqt8cTThSpH8DBaNxHlBf99OKSem2RseRpfVPqWayxHKQB0IWdS/IF5XSGeFU5QslSDTdVHnw6qggXGkA==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.3.tgz",
+      "integrity": "sha512-eieqJU+OR1OFc/lQqMsDmROTJpoMZFvoAQ+82utBQ8/8qGMTfH9bBSPsTdsagYA8uvNzxHw2I2cNSSJkLAGhvw==",
       "dev": true,
       "requires": {
         "chalk": "^2.1.0",
@@ -3163,21 +3270,62 @@
         "yargs": "^12.0.1"
       },
       "dependencies": {
+        "cliui": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
         "get-stdin": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
           "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
           "dev": true
+        },
+        "yargs": {
+          "version": "12.0.5",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^3.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^11.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
         }
       }
     },
     "postcss-load-config": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
-      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^4.0.0",
+        "cosmiconfig": "^5.0.0",
         "import-cwd": "^2.0.0"
       }
     },
@@ -3188,15 +3336,15 @@
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.11",
         "log-symbols": "^2.2.0",
         "postcss": "^7.0.7"
       }
     },
     "postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
+      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
       "dev": true
     },
     "pretty-hrtime": {
@@ -3403,12 +3551,6 @@
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
       "dev": true
     },
-    "require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true
-    },
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@@ -3514,7 +3656,7 @@
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
         "yargs": "^7.0.0"
       },
@@ -4218,9 +4360,9 @@
       }
     },
     "upath": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
-      "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "dev": true
     },
     "uri-js": {
@@ -4367,29 +4509,67 @@
       "dev": true
     },
     "yargs": {
-      "version": "12.0.5",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-      "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+      "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
       "dev": true,
       "requires": {
-        "cliui": "^4.0.0",
-        "decamelize": "^1.2.0",
+        "cliui": "^5.0.0",
         "find-up": "^3.0.0",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^3.0.0",
+        "get-caller-file": "^2.0.1",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "^2.0.0",
         "set-blocking": "^2.0.0",
-        "string-width": "^2.0.0",
+        "string-width": "^3.0.0",
         "which-module": "^2.0.0",
-        "y18n": "^3.2.1 || ^4.0.0",
-        "yargs-parser": "^11.1.1"
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "yargs-parser": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-      "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+      "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
       "dev": true,
       "requires": {
         "camelcase": "^5.0.0",

calm-business/package.json

@@ -1,14 +1,14 @@
 {
   "name": "calm-business",
-  "version": "1.0.0",
+  "version": "1.6.1",
   "description": "Style Variation of the Default WP Theme",
   "devDependencies": {
-    "@wordpress/browserslist-config": "^2.3.0",
-    "autoprefixer": "^9.5.0",
-    "chokidar-cli": "^1.2.2",
+    "@wordpress/browserslist-config": "^2.6.0",
+    "autoprefixer": "^9.6.5",
+    "chokidar-cli": "^1.2.3",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.2",
+    "postcss-cli": "^6.1.3",
     "rtlcss": "^2.4.0"
   },
   "rtlcssConfig": {

calm-business/sass/blocks/_blocks.scss

@@ -932,19 +932,16 @@
 			}
 			&.is-stacked-on-mobile {
 				.wp-block-media-text__media {
-					grid-area: media-text-content;
+					grid-row: 1;
 				}
 				.wp-block-media-text__content {
-					grid-area: media-text-media;
+					grid-row: 2;
 				}
 			}
 			@include media(mobile) {
 				&.is-stacked-on-mobile {
-					.wp-block-media-text__media {
-						grid-area: media-text-media;
-					}
 					.wp-block-media-text__content {
-						grid-area: media-text-content;
+						grid-row: 1;
 					}
 				}
 			}

calm-business/style-editor.css

@@ -297,7 +297,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -404,7 +403,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -424,7 +422,6 @@ body.page .main-navigation {
     left: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -489,7 +486,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -513,7 +509,6 @@ body.page .main-navigation {
     left: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }

calm-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.6
+Version: 1.6.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business
@@ -1190,7 +1190,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -1297,7 +1296,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1317,7 +1315,6 @@ body.page .main-navigation {
     right: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -1382,7 +1379,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1406,7 +1402,6 @@ body.page .main-navigation {
     right: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -4514,19 +4509,16 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-  grid-area: media-text-content;
+  grid-row: 1;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-  grid-area: media-text-media;
+  grid-row: 2;
 }
 
 @media only screen and (min-width: 600px) {
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-    grid-area: media-text-media;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-    grid-area: media-text-content;
+    grid-row: 1;
   }
 }
 

calm-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.6
+Version: 1.6.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business
@@ -1190,7 +1190,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -1297,7 +1296,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1317,7 +1315,6 @@ body.page .main-navigation {
     left: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -1382,7 +1379,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1406,7 +1402,6 @@ body.page .main-navigation {
     left: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -4526,19 +4521,16 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-  grid-area: media-text-content;
+  grid-row: 1;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-  grid-area: media-text-media;
+  grid-row: 2;
 }
 
 @media only screen and (min-width: 600px) {
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-    grid-area: media-text-media;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-    grid-area: media-text-content;
+    grid-row: 1;
   }
 }
 

calm-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://wordpress.com
 Template: twentynineteen
 Description: Your classy establishment needs an equally classy website to showcase your stylish rooms and quality products! With its bold typography and peaceful color scheme, Calm Business exudes a calm, inviting atmosphere as a bed and breakfast, time share, or brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.6
+Version: 1.6.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: calm-business

coutoire/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "coutoire",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

coutoire/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coutoire",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Coutoire",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

coutoire/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"EB Garamond\", serif",
-			"secondary": "\"Work Sans\", sans-serif",
+			"primary": (
+				"fallback": "\"EB Garamond\", serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Work Sans\", sans-serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": bold,
@@ -169,7 +181,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "ui"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"weight": 600,
 		"line-height": 1,
@@ -202,7 +217,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -251,7 +272,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
+			"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
+			"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
+		),
 	),
 );
 
@@ -298,7 +325,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xxxl"),
 				"weight": normal,
 				"line-height": 1,
@@ -308,7 +338,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xxxl"),
 			),
 		),
@@ -323,7 +356,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": 600,
 			"line-height": 1,
@@ -353,7 +389,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

coutoire/sass/_config-child-theme.scss

@@ -6,8 +6,8 @@
 // @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, "font" "family" "primary", "fallback", "\'Playfair Display\', serif");
+$config-global: map-deep-set($config-global, "font" "family" "secondary", "fallback", "\'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");
 
@@ -15,12 +15,12 @@ $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
 $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" "family", "fallback", "\'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" "family", "fallback", "\'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" "description" "font" "family", "fallback", "\'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);

coutoire/sass/_extra-child-theme.scss

@@ -77,7 +77,7 @@ a {
 
 .sticky-post {
 	text-transform: uppercase;
-	font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 }
 
 #main .page-header {
@@ -86,7 +86,7 @@ a {
 
 	.page-title {
 		font-size: #{map-deep-get($config-global, "font", "size", "base")};
-		font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 		font-weight: 500;
 		text-transform: uppercase;
 		line-height: 1;

coutoire/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

coutoire/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

coutoire/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #444444;
 	background-color: white;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-size: 17px;
 	font-weight: normal;
 	line-height: 1.78;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
 	background-color: black;
@@ -398,6 +404,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	clear: both;
 }
@@ -476,6 +483,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
@@ -573,6 +581,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1;
@@ -632,6 +641,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -643,6 +653,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1;
@@ -712,6 +723,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 table td,
@@ -728,6 +740,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #444444;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	font-size: 2.48832em;
 	letter-spacing: normal;
@@ -843,6 +856,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: calc(2 * 2.98598em);
 	font-weight: 200;
 }

coutoire/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 14.16667px;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	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-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: black;
 	border-width: 0;
@@ -1423,6 +1429,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	clear: both;
 }
@@ -1514,6 +1521,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1547,6 +1555,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
@@ -1631,6 +1640,7 @@ img {
 ul,
 ol {
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1645,6 +1655,7 @@ ol {
 
 dt {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 }
 
@@ -1718,6 +1729,7 @@ p.has-background {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1791,6 +1803,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -1870,6 +1883,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -2002,6 +2016,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 table td,
@@ -2196,6 +2211,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 200;
 	line-height: 0.66;
@@ -2342,7 +2358,7 @@ table th,
 .site-title {
 	color: black;
 	font-family: "EB Garamond", serif;
-	font-size: 2.48832rem;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2363,6 +2379,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 2.48832rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 2.48832rem;
 }
 
@@ -2520,7 +2544,7 @@ table th,
 	color: black;
 	display: block;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 5px 0;
 }
@@ -2578,6 +2602,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2625,6 +2653,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2699,7 +2728,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 10px;
 	color: currentColor;
@@ -2713,6 +2742,10 @@ table th,
 	color: #FF7A5C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2837,6 +2870,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2864,6 +2898,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2926,6 +2961,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2945,19 +2981,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #DDDDDD;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3045,6 +3081,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 /**
@@ -3147,6 +3184,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3178,6 +3216,7 @@ img#wpstats {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3629,6 +3668,7 @@ a:hover, a:focus {
 .sticky-post {
 	text-transform: uppercase;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 }
 
 #main .page-header {
@@ -3638,6 +3678,7 @@ a:hover, a:focus {
 #main .page-header .page-title {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 500;
 	text-transform: uppercase;
 	line-height: 1;

coutoire/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 14.16667px;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	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-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: black;
 	border-width: 0;
@@ -1423,6 +1429,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	clear: both;
 }
@@ -1514,6 +1521,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1547,6 +1555,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
@@ -1631,6 +1640,7 @@ img {
 ul,
 ol {
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1645,6 +1655,7 @@ ol {
 
 dt {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 }
 
@@ -1718,6 +1729,7 @@ p.has-background {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1791,6 +1803,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -1870,6 +1883,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -2002,6 +2016,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 table td,
@@ -2201,6 +2216,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 200;
 	line-height: 0.66;
@@ -2359,7 +2375,7 @@ table th,
 .site-title {
 	color: black;
 	font-family: "EB Garamond", serif;
-	font-size: 2.48832rem;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2380,6 +2396,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 2.48832rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 2.48832rem;
 }
 
@@ -2537,7 +2561,7 @@ table th,
 	color: black;
 	display: block;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 5px 0;
 }
@@ -2595,6 +2619,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2642,6 +2670,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2716,7 +2745,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 10px;
 	color: currentColor;
@@ -2730,6 +2759,10 @@ table th,
 	color: #FF7A5C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2854,6 +2887,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2881,6 +2915,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2943,6 +2978,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2962,19 +2998,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #DDDDDD;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3062,6 +3098,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 /**
@@ -3164,6 +3201,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3195,6 +3233,7 @@ img#wpstats {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3658,6 +3697,7 @@ a:hover, a:focus {
 .sticky-post {
 	text-transform: uppercase;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 }
 
 #main .page-header {
@@ -3667,6 +3707,7 @@ a:hover, a:focus {
 #main .page-header .page-title {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 500;
 	text-transform: uppercase;
 	line-height: 1;

dalston/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dalston",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -383,6 +383,15 @@
       "integrity": "sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==",
       "dev": true
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
@@ -3345,6 +3354,7 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -3352,7 +3362,8 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
         }
       }
     },
@@ -3410,6 +3421,7 @@
         "request": "^2.87.0",
         "rimraf": "2",
         "semver": "~5.3.0",
+        "tar": "^2.0.0",
         "which": "1"
       },
       "dependencies": {
@@ -3418,15 +3430,6 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
-        },
-        "tar": {
-          "version": "4.4.10",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.10.tgz",
-          "integrity": "sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==",
-          "requires": {
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2"
-          }
         }
       }
     },
@@ -4385,7 +4388,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -4820,6 +4824,17 @@
         "has-flag": "^3.0.0"
       }
     },
+    "tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "dev": true,
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",

dalston/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalston",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Dalston",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

dalston/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
-			"secondary": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+			"primary": (
+				"fallback": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+				"css-var": '--font-base',
+			),
 			"code": "Menlo\, monaco\, Consolas\, Lucida Console\, monospace",
-			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": 600,
@@ -169,7 +181,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "base"),
 		"weight": 600,
 		"line-height": 1,
@@ -202,7 +217,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -251,7 +272,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
+			"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
+			"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
+		),
 	),
 );
 
@@ -280,6 +307,7 @@ $config-quote: (
 
 $config-separator: (
 	"height": #{0.25 * $baseline-unit},
+	"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")},
 );
 
 /**
@@ -297,7 +325,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xxl"),
 				"weight": 600,
 				"line-height": 1,
@@ -307,7 +338,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xxl"),
 			),
 		),
@@ -322,7 +356,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": 600,
 			"line-height": 1,
@@ -352,7 +389,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "xs"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

dalston/sass/_config-child-theme.scss

@@ -6,8 +6,8 @@
 // @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, "font" "family" "primary", "fallback", "\'Playfair Display\', serif");
+$config-global: map-deep-set($config-global, "font" "family" "secondary", "fallback", "\'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");
 
@@ -15,12 +15,12 @@ $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
 $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" "family", "fallback", "\'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" "family", "fallback", "\'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" "description" "font" "family", "fallback", "\'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);

dalston/sass/_extra-child-theme.scss

@@ -203,6 +203,7 @@ a {
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
 	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
+	@include font-family( map-deep-get($config-header, "branding", "description", "font", "family") );
 }
 
 .site-title + .site-description {

dalston/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

dalston/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

dalston/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #1e1e1e;
 	background-color: #FFFFFF;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 19px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: #FFFFFF;
 	font-weight: 600;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1em;
 	line-height: 1;
 	background-color: #0073AA;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	font-weight: 600;
 	line-height: 1.2;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087em;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.74901em;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #1e1e1e;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	font-size: 2.01136em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: calc(2 * 2.31306em);
 	font-weight: 600;
 }

dalston/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.52174px;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1rem;
 	background-color: #0073AA;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	font-weight: 600;
 	line-height: 1.2;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: calc(2 * 2.31306rem);
 	font-weight: 600;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.74901rem;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.74901rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.74901rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #0073AA;
 	display: block;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 0.75614rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #005177;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.86957rem;
+}
+
 .entry-title {
 	font-size: 2.01136rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.3225rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -3728,6 +3767,8 @@ a {
 .site-description {
 	color: #000000;
 	line-height: 1.2;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .site-title + .site-description {

dalston/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.52174px;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1rem;
 	background-color: #0073AA;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	font-weight: 600;
 	line-height: 1.2;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: calc(2 * 2.31306rem);
 	font-weight: 600;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.74901rem;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.74901rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.74901rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #0073AA;
 	display: block;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 0.75614rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #005177;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.86957rem;
+}
+
 .entry-title {
 	font-size: 2.01136rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.3225rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -3757,6 +3796,8 @@ a {
 .site-description {
 	color: #000000;
 	line-height: 1.2;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .site-title + .site-description {

elegant-business/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "elegant-business",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -44,15 +44,15 @@
       "dev": true
     },
     "@types/node": {
-      "version": "11.13.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.9.tgz",
-      "integrity": "sha512-NJ4yuEVw5podZbINp3tEqUIImMSAEHaCXRiWCf3KC32l6hIKf0iPJEh2uZdT0fELfRYk310yLmMXqy2leZQUbg==",
+      "version": "12.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
+      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
       "dev": true
     },
     "@wordpress/browserslist-config": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.3.0.tgz",
-      "integrity": "sha512-bNOahe6ntNF3pRvCaeh2tGgnpPxe35U6UBfvRjDcOk3sIRvN1S7XlG0rlGZOOD+vJU93VLDM8AUj4uL6VPqPgQ==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.6.0.tgz",
+      "integrity": "sha512-vRgzGoxhcNVChBP30XZlyK4w6r/9ZpO+Fi1dzmButp31lUEb1pT5WBxTIQl3HE0JZ9YTEJ00WWGO5sjGi5MHZA==",
       "dev": true
     },
     "abbrev": {
@@ -249,17 +249,18 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.5.1.tgz",
-      "integrity": "sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ==",
+      "version": "9.6.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
+      "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.5.4",
-        "caniuse-lite": "^1.0.30000957",
+        "browserslist": "^4.7.0",
+        "caniuse-lite": "^1.0.30000999",
+        "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.14",
-        "postcss-value-parser": "^3.3.1"
+        "postcss": "^7.0.18",
+        "postcss-value-parser": "^4.0.2"
       }
     },
     "aws-sign2": {
@@ -360,9 +361,9 @@
       }
     },
     "bluebird": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
-      "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==",
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
       "dev": true
     },
     "brace-expansion": {
@@ -405,14 +406,14 @@
       }
     },
     "browserslist": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.6.tgz",
-      "integrity": "sha512-o/hPOtbU9oX507lIqon+UvPYqpx3mHc8cV3QemSBTXwkG8gSQSK6UKvXcE/DcleU3+A59XTUHyCvZ5qGy8xVAg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.1.tgz",
+      "integrity": "sha512-QtULFqKIAtiyNx7NhZ/p4rB8m3xDozVo/pi5VgTlADLF2tNigz/QH+v0m5qhn7XfHT7u+607NcCNOnC0HZAlMg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30000963",
-        "electron-to-chromium": "^1.3.127",
-        "node-releases": "^1.1.17"
+        "caniuse-lite": "^1.0.30000999",
+        "electron-to-chromium": "^1.3.284",
+        "node-releases": "^1.1.36"
       }
     },
     "cache-base": {
@@ -438,6 +439,30 @@
       "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=",
       "dev": true
     },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
+    },
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -463,9 +488,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000966",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000966.tgz",
-      "integrity": "sha512-qqLQ/uYrpZmFhPY96VuBkMEo8NhVFBZ9y/Bh+KnvGzGJ5I8hvpIaWlF2pw5gqe4PLAL+ZjsPgMOvoXSpX21Keg==",
+      "version": "1.0.30000999",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz",
+      "integrity": "sha512-1CUyKyecPeksKwXZvYw0tEoaMCo/RwBlXmEtN5vVnabvO0KPd9RQLcaAuR9/1F+KDMv6esmOFWlsXuzDk+8rxg==",
       "dev": true
     },
     "caseless": {
@@ -497,9 +522,9 @@
       }
     },
     "chokidar": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.1.tgz",
-      "integrity": "sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
+      "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
       "dev": true,
       "requires": {
         "anymatch": "^2.0.0",
@@ -513,25 +538,25 @@
         "normalize-path": "^3.0.0",
         "path-is-absolute": "^1.0.0",
         "readdirp": "^2.2.1",
-        "upath": "^1.1.0"
+        "upath": "^1.1.1"
       }
     },
     "chokidar-cli": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.2.tgz",
-      "integrity": "sha512-Yx0OYKcAkS7YMPP3/co6aN+1AOx2L6WmscqWvnqs7z+9AhDsn4zpezaErNoPACri1iUVjtxk8E77sMGntkBh3Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.3.tgz",
+      "integrity": "sha512-HcHjqeQaT/u0Swy4eaqqg0NhPjsXq6ZN9YzP48EYc81FXBLQuvMXBsrEMDkgH+Puup1mBc0gD0qqECDy/WiMOA==",
       "dev": true,
       "requires": {
-        "bluebird": "3.5.3",
-        "chokidar": "2.1.1",
-        "lodash": "4.17.13",
-        "yargs": "12.0.5"
+        "bluebird": "3.5.5",
+        "chokidar": "2.1.5",
+        "lodash": "4.17.15",
+        "yargs": "13.3.0"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.13",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
-          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
           "dev": true
         }
       }
@@ -560,14 +585,53 @@
       }
     },
     "cliui": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
       "dev": true,
       "requires": {
-        "string-width": "^2.1.1",
-        "strip-ansi": "^4.0.0",
-        "wrap-ansi": "^2.0.0"
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        }
       }
     },
     "code-point-at": {
@@ -653,15 +717,15 @@
       "dev": true
     },
     "cosmiconfig": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
-      "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
       "dev": true,
       "requires": {
+        "import-fresh": "^2.0.0",
         "is-directory": "^0.3.1",
-        "js-yaml": "^3.9.0",
-        "parse-json": "^4.0.0",
-        "require-from-string": "^2.0.1"
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
       },
       "dependencies": {
         "parse-json": {
@@ -833,15 +897,21 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.130",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.130.tgz",
-      "integrity": "sha512-UY2DI+gsnqGtQJqO8wXN0DnpJY+29FwJafACj0h18ZShn5besKnrRq6+lXWUbKzdxw92QQcnTqRLgNByOKXcUg==",
+      "version": "1.3.285",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.285.tgz",
+      "integrity": "sha512-DYR9KW723sUbGK++DCmCmM95AbNXT4Q0tlCFMcYijFjayhuDqlGYR68OemlP8MJj0gjkwdeItIUfd0oLCgw+4A==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
       "dev": true
     },
     "end-of-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
       "dev": true,
       "requires": {
         "once": "^1.4.0"
@@ -1048,9 +1118,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.6.tgz",
-      "integrity": "sha512-0BvMaZc1k9F+MeWWMe8pL6YltFzZYcJsYU7D4JyDA6PAczaXvxqQQ/z+mDF7/4Mw01DeUc+i3CTKajnkANkV4w==",
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+      "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
       "dev": true,
       "requires": {
         "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -1178,7 +1248,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1199,12 +1270,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1219,17 +1292,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1346,7 +1422,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1358,6 +1435,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1372,6 +1450,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1379,12 +1458,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1403,6 +1484,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1483,7 +1565,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1495,6 +1578,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1580,7 +1664,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1616,6 +1701,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1635,6 +1721,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1678,12 +1765,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -1875,7 +1964,7 @@
       "dev": true,
       "requires": {
         "glob": "~7.1.1",
-        "lodash": "~4.17.13",
+        "lodash": "~4.17.10",
         "minimatch": "~3.0.2"
       }
     },
@@ -2009,6 +2098,16 @@
         "import-from": "^2.1.0"
       }
     },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      }
+    },
     "import-from": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
@@ -2496,9 +2595,9 @@
       }
     },
     "merge2": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
-      "integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
+      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
       "dev": true
     },
     "micromatch": {
@@ -2662,12 +2761,20 @@
       }
     },
     "node-releases": {
-      "version": "1.1.17",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.17.tgz",
-      "integrity": "sha512-/SCjetyta1m7YXLgtACZGDYJdCSIBAWorDWkGCGZlydP2Ll7J48l7j/JxNYZ+xsgSPbWfdulVS/aY+GdjUsQ7Q==",
+      "version": "1.1.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.36.tgz",
+      "integrity": "sha512-ggXhX6QGyJSjj3r+6ml2LqqC28XOWmKtpb+a15/Zpr9V3yoNazxJNlcQDS9bYaid5FReEWHEgToH1mwoUceWwg==",
       "dev": true,
       "requires": {
-        "semver": "^5.3.0"
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
       }
     },
     "node-sass": {
@@ -2683,7 +2790,7 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.11",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
         "nan": "^2.13.2",
@@ -3014,9 +3121,9 @@
       "dev": true
     },
     "p-limit": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
-      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
+      "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
       "dev": true,
       "requires": {
         "p-try": "^2.0.0"
@@ -3133,9 +3240,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
-      "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
+      "version": "7.0.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz",
+      "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -3144,9 +3251,9 @@
       }
     },
     "postcss-cli": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.2.tgz",
-      "integrity": "sha512-jIWfIkqt8cTThSpH8DBaNxHlBf99OKSem2RseRpfVPqWayxHKQB0IWdS/IF5XSGeFU5QslSDTdVHnw6qggXGkA==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.3.tgz",
+      "integrity": "sha512-eieqJU+OR1OFc/lQqMsDmROTJpoMZFvoAQ+82utBQ8/8qGMTfH9bBSPsTdsagYA8uvNzxHw2I2cNSSJkLAGhvw==",
       "dev": true,
       "requires": {
         "chalk": "^2.1.0",
@@ -3163,21 +3270,62 @@
         "yargs": "^12.0.1"
       },
       "dependencies": {
+        "cliui": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
         "get-stdin": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
           "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
           "dev": true
+        },
+        "yargs": {
+          "version": "12.0.5",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^3.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^11.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
         }
       }
     },
     "postcss-load-config": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
-      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^4.0.0",
+        "cosmiconfig": "^5.0.0",
         "import-cwd": "^2.0.0"
       }
     },
@@ -3188,20 +3336,20 @@
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.11",
         "log-symbols": "^2.2.0",
         "postcss": "^7.0.7"
       }
     },
     "postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
+      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
       "dev": true
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },
@@ -3403,12 +3551,6 @@
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
       "dev": true
     },
-    "require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true
-    },
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@@ -3514,7 +3656,7 @@
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
         "yargs": "^7.0.0"
       },
@@ -4218,9 +4360,9 @@
       }
     },
     "upath": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
-      "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "dev": true
     },
     "uri-js": {
@@ -4367,29 +4509,67 @@
       "dev": true
     },
     "yargs": {
-      "version": "12.0.5",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-      "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+      "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
       "dev": true,
       "requires": {
-        "cliui": "^4.0.0",
-        "decamelize": "^1.2.0",
+        "cliui": "^5.0.0",
         "find-up": "^3.0.0",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^3.0.0",
+        "get-caller-file": "^2.0.1",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "^2.0.0",
         "set-blocking": "^2.0.0",
-        "string-width": "^2.0.0",
+        "string-width": "^3.0.0",
         "which-module": "^2.0.0",
-        "y18n": "^3.2.1 || ^4.0.0",
-        "yargs-parser": "^11.1.1"
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "yargs-parser": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-      "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+      "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
       "dev": true,
       "requires": {
         "camelcase": "^5.0.0",

elegant-business/package.json

@@ -1,14 +1,14 @@
 {
   "name": "elegant-business",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "description": "Style Variation of the Default WP Theme",
   "devDependencies": {
-    "@wordpress/browserslist-config": "^2.3.0",
-    "autoprefixer": "^9.5.0",
-    "chokidar-cli": "^1.2.2",
+    "@wordpress/browserslist-config": "^2.6.0",
+    "autoprefixer": "^9.6.5",
+    "chokidar-cli": "^1.2.3",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.2",
+    "postcss-cli": "^6.1.3",
     "rtlcss": "^2.4.0"
   },
   "rtlcssConfig": {

elegant-business/sass/blocks/_blocks.scss

@@ -826,20 +826,17 @@
 
 		&.has-media-on-the-right.is-stacked-on-mobile {
 			.wp-block-media-text__media {
-				grid-area: media-text-content;
+				grid-row: 1;
 			}
 			.wp-block-media-text__content {
-				grid-area: media-text-media;
+				grid-row: 2;
 			}
 		}
 
 		@include media(mobile) {
 			&.has-media-on-the-right.is-stacked-on-mobile {
-				.wp-block-media-text__media {
-					grid-area: media-text-media;
-				}
 				.wp-block-media-text__content {
-					grid-area: media-text-content;
+					grid-row: 1;
 				}
 			}
 		}

elegant-business/style-editor.css

@@ -279,7 +279,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -376,7 +375,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -396,7 +394,6 @@ body.page .main-navigation {
     left: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -460,7 +457,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -484,7 +480,6 @@ body.page .main-navigation {
     left: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }

elegant-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, beautiful typography, Elegant Business conveys quality and integrity, which makes it especially good fit for coffee shops, pop-up shops, and brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.4.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: elegant-business
@@ -1179,7 +1179,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -1276,7 +1275,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1296,7 +1294,6 @@ body.page .main-navigation {
     right: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -1360,7 +1357,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1384,7 +1380,6 @@ body.page .main-navigation {
     right: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -4272,19 +4267,16 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-  grid-area: media-text-content;
+  grid-row: 1;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-  grid-area: media-text-media;
+  grid-row: 2;
 }
 
 @media only screen and (min-width: 600px) {
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-    grid-area: media-text-media;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-    grid-area: media-text-content;
+    grid-row: 1;
   }
 }
 

elegant-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, beautiful typography, Elegant Business conveys quality and integrity, which makes it especially good fit for coffee shops, pop-up shops, and brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.4.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: elegant-business
@@ -1179,7 +1179,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -1276,7 +1275,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1296,7 +1294,6 @@ body.page .main-navigation {
     left: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -1360,7 +1357,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1384,7 +1380,6 @@ body.page .main-navigation {
     left: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -4284,19 +4279,16 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-  grid-area: media-text-content;
+  grid-row: 1;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-  grid-area: media-text-media;
+  grid-row: 2;
 }
 
 @media only screen and (min-width: 600px) {
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-    grid-area: media-text-media;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-    grid-area: media-text-content;
+    grid-row: 1;
   }
 }
 

elegant-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, yet sophisticated, with subtle, beautiful typography, Elegant Business conveys quality and integrity, which makes it especially good fit for coffee shops, pop-up shops, and brick & mortar store fronts.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.4.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: elegant-business

exford/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "exford",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

exford/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exford",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Exford",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

exford/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "\"Source Serif Pro\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\", serif",
+			"primary": (
+				"fallback": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Source Serif Pro\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\", serif",
+				"css-var": '--font-base',
+			),
 			"code": "Monaco, Consolas, Lucida Console, monospace",
-			"ui": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": bold,
@@ -169,7 +181,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "ui"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"weight": 700,
 		"line-height": 1,
@@ -202,7 +217,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "sm"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": #{map-deep-get($config-global, "font", "family", "secondary")},
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -251,7 +272,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-global, "font", "family", "primary")},
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-global, "font", "family", "primary")},
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 	),
 );
 
@@ -280,6 +307,7 @@ $config-quote: (
 
 $config-separator: (
 	"height": #{0.25 * $baseline-unit},
+	"width": #{6 * map-deep-get($config-global, "spacing", "horizontal")},
 );
 
 /**
@@ -297,7 +325,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "xl"),
 				"weight": 700,
 				"line-height": 1,
@@ -307,7 +338,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),
@@ -322,7 +356,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "primary"),
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": 700,
 			"line-height": 1,
@@ -352,7 +389,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

exford/sass/_extra-child-theme.scss

@@ -320,6 +320,7 @@ a {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }
 
 /**

exford/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif ) ;
     line-height: 1.3;
     background: #fff !important;
     color: #000;

exford/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online presence as striking and stylish as your business with Exford.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

exford/style-editor.css

@@ -115,6 +115,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Name
  */
@@ -163,6 +167,7 @@ body {
 	color: #111111;
 	background-color: #FFFFFF;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 700;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
 	background-color: #23883D;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #111111;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	font-size: 1.728em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.0736em);
 	font-weight: 700;
 }

exford/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online presence as striking and stylish as your business with Exford.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #23883D;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.0736rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #111111;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #23883D;
 	display: block;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #6E6E6E;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #195f2b;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 1.728rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3912,6 +3951,7 @@ p:not(.site-title) a:hover {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

exford/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online presence as striking and stylish as your business with Exford.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -136,6 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Child Theme Deep
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #23883D;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.0736rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #111111;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #23883D;
 	display: block;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #6E6E6E;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #195f2b;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 1.728rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3941,6 +3980,7 @@ p:not(.site-title) a:hover {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

friendly-business/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "friendly-business",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -44,15 +44,15 @@
       "dev": true
     },
     "@types/node": {
-      "version": "11.13.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.9.tgz",
-      "integrity": "sha512-NJ4yuEVw5podZbINp3tEqUIImMSAEHaCXRiWCf3KC32l6hIKf0iPJEh2uZdT0fELfRYk310yLmMXqy2leZQUbg==",
+      "version": "12.11.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
+      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
       "dev": true
     },
     "@wordpress/browserslist-config": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.3.0.tgz",
-      "integrity": "sha512-bNOahe6ntNF3pRvCaeh2tGgnpPxe35U6UBfvRjDcOk3sIRvN1S7XlG0rlGZOOD+vJU93VLDM8AUj4uL6VPqPgQ==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@wordpress/browserslist-config/-/browserslist-config-2.6.0.tgz",
+      "integrity": "sha512-vRgzGoxhcNVChBP30XZlyK4w6r/9ZpO+Fi1dzmButp31lUEb1pT5WBxTIQl3HE0JZ9YTEJ00WWGO5sjGi5MHZA==",
       "dev": true
     },
     "abbrev": {
@@ -249,17 +249,18 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.5.1.tgz",
-      "integrity": "sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ==",
+      "version": "9.6.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
+      "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.5.4",
-        "caniuse-lite": "^1.0.30000957",
+        "browserslist": "^4.7.0",
+        "caniuse-lite": "^1.0.30000999",
+        "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.14",
-        "postcss-value-parser": "^3.3.1"
+        "postcss": "^7.0.18",
+        "postcss-value-parser": "^4.0.2"
       }
     },
     "aws-sign2": {
@@ -360,9 +361,9 @@
       }
     },
     "bluebird": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
-      "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==",
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz",
+      "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
       "dev": true
     },
     "brace-expansion": {
@@ -405,14 +406,14 @@
       }
     },
     "browserslist": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.5.6.tgz",
-      "integrity": "sha512-o/hPOtbU9oX507lIqon+UvPYqpx3mHc8cV3QemSBTXwkG8gSQSK6UKvXcE/DcleU3+A59XTUHyCvZ5qGy8xVAg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.1.tgz",
+      "integrity": "sha512-QtULFqKIAtiyNx7NhZ/p4rB8m3xDozVo/pi5VgTlADLF2tNigz/QH+v0m5qhn7XfHT7u+607NcCNOnC0HZAlMg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30000963",
-        "electron-to-chromium": "^1.3.127",
-        "node-releases": "^1.1.17"
+        "caniuse-lite": "^1.0.30000999",
+        "electron-to-chromium": "^1.3.284",
+        "node-releases": "^1.1.36"
       }
     },
     "cache-base": {
@@ -438,6 +439,30 @@
       "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=",
       "dev": true
     },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
+    },
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -463,9 +488,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000966",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000966.tgz",
-      "integrity": "sha512-qqLQ/uYrpZmFhPY96VuBkMEo8NhVFBZ9y/Bh+KnvGzGJ5I8hvpIaWlF2pw5gqe4PLAL+ZjsPgMOvoXSpX21Keg==",
+      "version": "1.0.30000999",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz",
+      "integrity": "sha512-1CUyKyecPeksKwXZvYw0tEoaMCo/RwBlXmEtN5vVnabvO0KPd9RQLcaAuR9/1F+KDMv6esmOFWlsXuzDk+8rxg==",
       "dev": true
     },
     "caseless": {
@@ -497,9 +522,9 @@
       }
     },
     "chokidar": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.1.tgz",
-      "integrity": "sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.5.tgz",
+      "integrity": "sha512-i0TprVWp+Kj4WRPtInjexJ8Q+BqTE909VpH8xVhXrJkoc5QC8VO9TryGOqTr+2hljzc1sC62t22h5tZePodM/A==",
       "dev": true,
       "requires": {
         "anymatch": "^2.0.0",
@@ -513,25 +538,25 @@
         "normalize-path": "^3.0.0",
         "path-is-absolute": "^1.0.0",
         "readdirp": "^2.2.1",
-        "upath": "^1.1.0"
+        "upath": "^1.1.1"
       }
     },
     "chokidar-cli": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.2.tgz",
-      "integrity": "sha512-Yx0OYKcAkS7YMPP3/co6aN+1AOx2L6WmscqWvnqs7z+9AhDsn4zpezaErNoPACri1iUVjtxk8E77sMGntkBh3Q==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/chokidar-cli/-/chokidar-cli-1.2.3.tgz",
+      "integrity": "sha512-HcHjqeQaT/u0Swy4eaqqg0NhPjsXq6ZN9YzP48EYc81FXBLQuvMXBsrEMDkgH+Puup1mBc0gD0qqECDy/WiMOA==",
       "dev": true,
       "requires": {
-        "bluebird": "3.5.3",
-        "chokidar": "2.1.1",
-        "lodash": "4.17.11",
-        "yargs": "12.0.5"
+        "bluebird": "3.5.5",
+        "chokidar": "2.1.5",
+        "lodash": "4.17.15",
+        "yargs": "13.3.0"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.11",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
-          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
           "dev": true
         }
       }
@@ -560,14 +585,53 @@
       }
     },
     "cliui": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-      "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
       "dev": true,
       "requires": {
-        "string-width": "^2.1.1",
-        "strip-ansi": "^4.0.0",
-        "wrap-ansi": "^2.0.0"
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        }
       }
     },
     "code-point-at": {
@@ -653,15 +717,15 @@
       "dev": true
     },
     "cosmiconfig": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
-      "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
       "dev": true,
       "requires": {
+        "import-fresh": "^2.0.0",
         "is-directory": "^0.3.1",
-        "js-yaml": "^3.9.0",
-        "parse-json": "^4.0.0",
-        "require-from-string": "^2.0.1"
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
       },
       "dependencies": {
         "parse-json": {
@@ -833,15 +897,21 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.130",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.130.tgz",
-      "integrity": "sha512-UY2DI+gsnqGtQJqO8wXN0DnpJY+29FwJafACj0h18ZShn5besKnrRq6+lXWUbKzdxw92QQcnTqRLgNByOKXcUg==",
+      "version": "1.3.285",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.285.tgz",
+      "integrity": "sha512-DYR9KW723sUbGK++DCmCmM95AbNXT4Q0tlCFMcYijFjayhuDqlGYR68OemlP8MJj0gjkwdeItIUfd0oLCgw+4A==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
       "dev": true
     },
     "end-of-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
       "dev": true,
       "requires": {
         "once": "^1.4.0"
@@ -1048,9 +1118,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.6.tgz",
-      "integrity": "sha512-0BvMaZc1k9F+MeWWMe8pL6YltFzZYcJsYU7D4JyDA6PAczaXvxqQQ/z+mDF7/4Mw01DeUc+i3CTKajnkANkV4w==",
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+      "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
       "dev": true,
       "requires": {
         "@mrmlnc/readdir-enhanced": "^2.2.1",
@@ -1178,7 +1248,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1199,12 +1270,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1219,17 +1292,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1346,7 +1422,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1358,6 +1435,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1372,6 +1450,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1379,12 +1458,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1403,6 +1484,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1483,7 +1565,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1495,6 +1578,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1580,7 +1664,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1616,6 +1701,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1635,6 +1721,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1678,12 +1765,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2009,6 +2098,16 @@
         "import-from": "^2.1.0"
       }
     },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      }
+    },
     "import-from": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
@@ -2431,9 +2530,9 @@
       }
     },
     "map-age-cleaner": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
-      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"
@@ -2496,9 +2595,9 @@
       }
     },
     "merge2": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
-      "integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
+      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
       "dev": true
     },
     "micromatch": {
@@ -2662,12 +2761,20 @@
       }
     },
     "node-releases": {
-      "version": "1.1.17",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.17.tgz",
-      "integrity": "sha512-/SCjetyta1m7YXLgtACZGDYJdCSIBAWorDWkGCGZlydP2Ll7J48l7j/JxNYZ+xsgSPbWfdulVS/aY+GdjUsQ7Q==",
+      "version": "1.1.36",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.36.tgz",
+      "integrity": "sha512-ggXhX6QGyJSjj3r+6ml2LqqC28XOWmKtpb+a15/Zpr9V3yoNazxJNlcQDS9bYaid5FReEWHEgToH1mwoUceWwg==",
       "dev": true,
       "requires": {
-        "semver": "^5.3.0"
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
       }
     },
     "node-sass": {
@@ -3014,9 +3121,9 @@
       "dev": true
     },
     "p-limit": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
-      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
+      "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
       "dev": true,
       "requires": {
         "p-try": "^2.0.0"
@@ -3133,9 +3240,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
-      "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
+      "version": "7.0.18",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz",
+      "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -3144,9 +3251,9 @@
       }
     },
     "postcss-cli": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.2.tgz",
-      "integrity": "sha512-jIWfIkqt8cTThSpH8DBaNxHlBf99OKSem2RseRpfVPqWayxHKQB0IWdS/IF5XSGeFU5QslSDTdVHnw6qggXGkA==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-6.1.3.tgz",
+      "integrity": "sha512-eieqJU+OR1OFc/lQqMsDmROTJpoMZFvoAQ+82utBQ8/8qGMTfH9bBSPsTdsagYA8uvNzxHw2I2cNSSJkLAGhvw==",
       "dev": true,
       "requires": {
         "chalk": "^2.1.0",
@@ -3163,21 +3270,62 @@
         "yargs": "^12.0.1"
       },
       "dependencies": {
+        "cliui": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
         "get-stdin": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
           "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
           "dev": true
+        },
+        "yargs": {
+          "version": "12.0.5",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
+          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^3.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1 || ^4.0.0",
+            "yargs-parser": "^11.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
+          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
         }
       }
     },
     "postcss-load-config": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
-      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
       "dev": true,
       "requires": {
-        "cosmiconfig": "^4.0.0",
+        "cosmiconfig": "^5.0.0",
         "import-cwd": "^2.0.0"
       }
     },
@@ -3194,9 +3342,9 @@
       }
     },
     "postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
+      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
       "dev": true
     },
     "pretty-hrtime": {
@@ -3403,12 +3551,6 @@
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
       "dev": true
     },
-    "require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true
-    },
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@@ -4218,9 +4360,9 @@
       }
     },
     "upath": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz",
-      "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "dev": true
     },
     "uri-js": {
@@ -4367,29 +4509,67 @@
       "dev": true
     },
     "yargs": {
-      "version": "12.0.5",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-      "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
+      "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
       "dev": true,
       "requires": {
-        "cliui": "^4.0.0",
-        "decamelize": "^1.2.0",
+        "cliui": "^5.0.0",
         "find-up": "^3.0.0",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^3.0.0",
+        "get-caller-file": "^2.0.1",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "^2.0.0",
         "set-blocking": "^2.0.0",
-        "string-width": "^2.0.0",
+        "string-width": "^3.0.0",
         "which-module": "^2.0.0",
-        "y18n": "^3.2.1 || ^4.0.0",
-        "yargs-parser": "^11.1.1"
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "yargs-parser": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-      "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+      "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
       "dev": true,
       "requires": {
         "camelcase": "^5.0.0",

friendly-business/package.json

@@ -1,14 +1,14 @@
 {
   "name": "friendly-business",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "description": "Style Variation of the Default WP Theme",
   "devDependencies": {
-    "@wordpress/browserslist-config": "^2.3.0",
-    "autoprefixer": "^9.5.0",
-    "chokidar-cli": "^1.2.2",
+    "@wordpress/browserslist-config": "^2.6.0",
+    "autoprefixer": "^9.6.5",
+    "chokidar-cli": "^1.2.3",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.2",
+    "postcss-cli": "^6.1.3",
     "rtlcss": "^2.4.0"
   },
   "rtlcssConfig": {

friendly-business/sass/blocks/_blocks.scss

@@ -824,10 +824,10 @@
 
 		&.has-media-on-the-right.is-stacked-on-mobile {
 			.wp-block-media-text__media {
-				grid-area: media-text-content;
+				grid-row: 1;
 			}
 			.wp-block-media-text__content {
-				grid-area: media-text-media;
+				grid-row: 2;
 			}
 		}
 
@@ -838,11 +838,8 @@
 			}
 
 			&.has-media-on-the-right.is-stacked-on-mobile {
-				.wp-block-media-text__media {
-					grid-area: media-text-media;
-				}
 				.wp-block-media-text__content {
-					grid-area: media-text-content;
+					grid-row: 1;;
 				}
 			}
 		}

friendly-business/style-editor.css

@@ -274,7 +274,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -379,7 +378,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -399,7 +397,6 @@ body.page .main-navigation {
     left: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -463,7 +460,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -487,7 +483,6 @@ body.page .main-navigation {
     left: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }

friendly-business/style-rtl.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, approachable, with bold, handsome typography, Friendly Business conveys quality and sustainability, which makes it especially good fit for education, agriculture and family-run businesses.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.4.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: friendly-business
@@ -1212,7 +1212,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -1317,7 +1316,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1337,7 +1335,6 @@ body.page .main-navigation {
     right: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -1401,7 +1398,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1425,7 +1421,6 @@ body.page .main-navigation {
     right: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -4280,11 +4275,11 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-  grid-area: media-text-content;
+  grid-row: 1;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-  grid-area: media-text-media;
+  grid-row: 2;
 }
 
 @media only screen and (min-width: 600px) {
@@ -4292,11 +4287,8 @@ body.page .main-navigation {
     top: 5.6%;
     height: 88.8%;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-    grid-area: media-text-media;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-    grid-area: media-text-content;
+    grid-row: 1;
   }
 }
 

friendly-business/style.css

@@ -7,7 +7,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, approachable, with bold, handsome typography, Friendly Business conveys quality and sustainability, which makes it especially good fit for education, agriculture and family-run businesses.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.4.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: friendly-business
@@ -1212,7 +1212,6 @@ body.page .main-navigation {
 @media only screen and (min-width: 768px) {
   .main-navigation .sub-menu {
     width: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
   }
@@ -1317,7 +1316,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1337,7 +1335,6 @@ body.page .main-navigation {
     left: auto;
     display: block;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -1401,7 +1398,6 @@ body.page .main-navigation {
     top: auto;
     bottom: auto;
     height: auto;
-    min-width: -moz-max-content;
     min-width: -webkit-max-content;
     min-width: max-content;
     transform: none;
@@ -1425,7 +1421,6 @@ body.page .main-navigation {
     left: auto;
     display: table;
     width: -webkit-max-content;
-    width: -moz-max-content;
     width: max-content;
   }
 }
@@ -4292,11 +4287,11 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-  grid-area: media-text-content;
+  grid-row: 1;
 }
 
 .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-  grid-area: media-text-media;
+  grid-row: 2;
 }
 
 @media only screen and (min-width: 600px) {
@@ -4304,11 +4299,8 @@ body.page .main-navigation {
     top: 5.6%;
     height: 88.8%;
   }
-  .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__media {
-    grid-area: media-text-media;
-  }
   .entry .entry-content .wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile .wp-block-media-text__content {
-    grid-area: media-text-content;
+    grid-row: 1;
   }
 }
 

friendly-business/style.scss

@@ -6,7 +6,7 @@ Author URI: https://wordpress.org/
 Template: twentynineteen
 Description: Simple, approachable, with bold, handsome typography, Friendly Business conveys quality and sustainability, which makes it especially good fit for education, agriculture and family-run businesses.
 Requires at least: WordPress 4.9.6
-Version: 1.4
+Version: 1.4.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: friendly-business

hever/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

hever/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Hever",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

hever/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;