From a833f5bf948300afd70bf71f8b6491f7dd8a562e Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Thu, 7 May 2020 20:13:07 +0000
Subject: [PATCH] add typography mixins, google fonts helper

---
 functions.php                        | 20 ++++++++++++
 sass/mixins/_mixins-master.scss      | 46 +++++++++++++++++++++++++---
 sass/typography/_typography.scss     |  8 ++---
 sass/variables-site/_typography.scss |  3 +-
 4 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/functions.php b/functions.php
index d083326a..f9edda3d 100644
--- a/functions.php
+++ b/functions.php
@@ -139,6 +139,24 @@ function _s_widgets_init() {
 }
 add_action( 'widgets_init', '_s_widgets_init' );
 
+function google_fonts() {
+	$google_fonts = apply_filters(
+		'storefront_google_font_families', array(
+			// 'source-sans-pro' => 'Source+Sans+Pro:400,300,300italic,400italic,600,700,900',
+			'montserrat' => 'Montserrat:400,600',
+		)
+	);
+
+	$query_args = array(
+		'family' => implode( '|', $google_fonts ),
+		'subset' => rawurlencode( 'latin,latin-ext' ),
+	);
+
+	$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
+
+	return $fonts_url;
+}
+
 /**
  * Enqueue scripts and styles.
  */
@@ -146,6 +164,8 @@ function _s_scripts() {
 	wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), _S_VERSION );
 	wp_style_add_data( '_s-style', 'rtl', 'replace' );
 
+	wp_enqueue_style( '_s-google-fonts', google_fonts(), array(), null );
+
 	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
 
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
diff --git a/sass/mixins/_mixins-master.scss b/sass/mixins/_mixins-master.scss
index 860eefe8..60bc79ea 100644
--- a/sass/mixins/_mixins-master.scss
+++ b/sass/mixins/_mixins-master.scss
@@ -1,11 +1,49 @@
+@mixin font-1($weight) {
+  // see functions.php->google_fonts()
+  // and functions.php->_s_scripts()
+  font-family: "Montserrat", sans-serif;
+  @if $weight == regular {
+    font-weight: 400;
+  } @else if $weight == bold {
+    font-weight: 600;
+  } @else if $weight == extra-bold {
+    font-weight: 700;
+  } @else {
+    @error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'.";
+  }
+}
+
+@mixin font-body($weight: regular) {
+  @include font-1($weight);
+}
+
+@mixin font-title($weight: regular) {
+  @include font-1($weight);
+}
+
+@mixin font-link($weight: regular) {
+  @include font-1($weight);
+}
+
+@mixin font-code($weight: regular) {
+  font-family: $font-code;
+  font-weight: $weight;
+}
+
+@mixin font-pre($weight: regular) {
+  font-family: $font-pre;
+  font-weight: $weight;
+}
+
 // Center block
 @mixin center-block {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 // Column width with margin
 @mixin column-width($numberColumns: 3) {
-	width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );
+  width: map-get($columns, $numberColumns) -
+    (($columns__margin * ($numberColumns - 1)) / $numberColumns);
 }
diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss
index 34009a00..ccc34cb7 100644
--- a/sass/typography/_typography.scss
+++ b/sass/typography/_typography.scss
@@ -4,10 +4,10 @@ input,
 select,
 optgroup,
 textarea {
-	color: $color__text-main;
-	font-family: $font__main;
-	font-size: 1rem;
-	line-height: $font__line-height-body;
+  color: $color__text-main;
+  @include font-body;
+  font-size: 1rem;
+  line-height: $font__line-height-body;
 }
 
 @import "headings";
diff --git a/sass/variables-site/_typography.scss b/sass/variables-site/_typography.scss
index a90eb282..c2cc2727 100644
--- a/sass/variables-site/_typography.scss
+++ b/sass/variables-site/_typography.scss
@@ -1,5 +1,6 @@
 // stylelint-disable value-keyword-case
-$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
+  Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 // stylelint-enable value-keyword-case
 $font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 $font__pre: "Courier 10 Pitch", courier, monospace;