Merge pull request #93 from BeAPI/feature/font-loading

Feature/font loading
BeAPI · Mar 20, 2020 · 276bbd6 · 276bbd6
2 parents f7382b5 + a0b6ce6
commit 276bbd6
Show file tree

Hide file tree

Showing 23 changed files with 652 additions and 862 deletions.
diff --git a/header.php b/header.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--[if lte IE 9 ]> <html class="no-js ie lte-ie9 ie9" <?php language_attributes( ); ?>> <![endif]-->
 <!--[if !(IE)]><! -->
-<html class="fonts-loading no-js" <?php language_attributes( ); ?>>
+<html class="no-js" <?php language_attributes( ); ?>>
 <!--<![endif]-->
 <head>
 	<script type="text/javascript">

diff --git a/inc/async/loadfont.php b/inc/async/loadfont.php
@@ -1,15 +1,2 @@
 <!-- Polyfill.io -->
 <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest,NodeList.prototype.forEach"></script>
-
-<script>
-    // inline loadJS
-    function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
-    // then load your JS
-    if (sessionStorage.getItem('fonts-loaded')) {
-        // fonts cached, add class to document
-        document.documentElement.classList.remove('fonts-loading');
-    } else {
-        // load script with font observing logic
-        loadJS('<?php echo get_theme_file_uri( '/src/js/vendor_async/fonts-css-async.js' );?>');
-    }
-</script>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "browser-sync": "^2.26.7",
     "browser-sync-webpack-plugin": "^2.2.2",
     "concurrently": "^4.1.0",
-    "copy-webpack-plugin": "^5.0.3",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.3.0",
@@ -40,7 +40,7 @@
     "eslint-plugin-standard": "^4.0.0",
     "json2csv": "^4.5.1",
     "mini-css-extract-plugin": "^0.7.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.17.1",
@@ -52,7 +52,7 @@
   "dependencies": {
     "autoprefixer": "^9.5.1",
     "cheerio": "^1.0.0-rc.3",
-    "favicons": "^5.4.1",
+    "favicons": "^6.0.0",
     "lazysizes": "^5.1.0",
     "normalize-scss": "^7.0.1",
     "ora": "^3.4.0",

diff --git a/src/fonts/Circular/CircularStdBlack.woff b/src/fonts/Circular/CircularStdBlack.woff
diff --git a/src/fonts/Circular/CircularStdBlack.woff2 b/src/fonts/Circular/CircularStdBlack.woff2
diff --git a/src/fonts/Circular/CircularStdBold.woff b/src/fonts/Circular/CircularStdBold.woff
diff --git a/src/fonts/Circular/CircularStdBold.woff2 b/src/fonts/Circular/CircularStdBold.woff2
diff --git a/src/fonts/Circular/CircularStdBook.woff b/src/fonts/Circular/CircularStdBook.woff
diff --git a/src/fonts/Circular/CircularStdBook.woff2 b/src/fonts/Circular/CircularStdBook.woff2
diff --git a/src/fonts/Circular/CircularStdMedium.woff b/src/fonts/Circular/CircularStdMedium.woff
diff --git a/src/fonts/Circular/CircularStdMedium.woff2 b/src/fonts/Circular/CircularStdMedium.woff2
diff --git a/src/img/sample/beasample-01.jpg b/src/img/sample/beasample-01.jpg
diff --git a/src/js/app.js b/src/js/app.js
@@ -9,7 +9,6 @@ import 'lazysizes/plugins/native-loading/ls.native-loading'
 import 'lazysizes/plugins/object-fit/ls.object-fit'
 
 import './src/menu'
-import './src/button-href'
 
 /**
  * LazySizes configuration

diff --git a/src/js/src/button-href.js b/src/js/src/button-href.js
diff --git a/src/js/src/menu.js b/src/js/src/menu.js
@@ -11,19 +11,23 @@ class Menu {
     this.resizeBreakpoint = window.matchMedia('(min-width: 1024px)')
   }
   init() {
-    // Events to handle toggle menu
-    this.menuOpen.addEventListener('click', this.openMenu.bind(this), false)
-    this.menuClose.addEventListener('click', this.closeMenu.bind(this), false)
-    // Detect if clicked outside menu
-    document.addEventListener('click', event => {
-      const menu = this.menu.contains(event.target)
-      const buttonContainer = this.buttonContainer.contains(event.target)
-      if (!menu && !buttonContainer) {
-        this.closeMenu()
-      }
-    })
-    // Event breakpoint
-    this.resizeBreakpoint.addListener(this.menuResizing.bind(this))
+    if (this.menu) {
+      // Events to handle toggle menu
+      this.menuOpen.addEventListener('click', this.openMenu.bind(this), false)
+      this.menuClose.addEventListener('click', this.closeMenu.bind(this), false)
+      // Detect if clicked outside menu
+      document.addEventListener('click', event => {
+        const menu = this.menu.contains(event.target)
+        const buttonContainer = this.buttonContainer.contains(event.target)
+        if (!menu && !buttonContainer) {
+          this.closeMenu()
+        }
+      })
+      // Event breakpoint
+      this.resizeBreakpoint.addListener(this.menuResizing.bind(this))
+    } else {
+      console.log('No menu')
+    }
   }
   /**
    * Open menu

diff --git a/src/js/vendor_async/fonts-css-async.js b/src/js/vendor_async/fonts-css-async.js
diff --git a/src/scss/abstract/_fonts.scss b/src/scss/abstract/_fonts.scss
@@ -4,7 +4,7 @@
 $font-sansserif: Arial, Helvetica, sans-serif;
 $font-serif: Times, Georgia, serif;
 $customfont-1: Roboto, sans-serif;
-$customfont-2: Circular, sans-serif;
+$customfont-2: sofia-pro, sans-serif;
 
 /**
  * Font Size
@@ -18,13 +18,74 @@ $heading-font-size: 25px;
 $base-lh: 1.4;
 $heading-line-height: 1.2;
 
-//Roboto for body text
+// Roboto for body text
 @include declare-font-face("Roboto", "#{$fonts-url}/roboto-v15-latin/roboto-v15-latin-regular"); //regularx400
 @include declare-font-face("Roboto", "#{$fonts-url}/roboto-v15-latin/roboto-v15-latin-500", 500); //mediumx500
 @include declare-font-face("Roboto", "#{$fonts-url}/roboto-v15-latin/roboto-v15-latin-700", bold); //boldx700
 
-//Circular for Hn
-@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdBook"); //regularx400
-@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdMedium", 500); //mediumx500
-@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdBold", bold); //boldx700
-@include declare-font-face("Circular", "#{$fonts-url}/Circular/CircularStdBlack", 900); //blackx900
+// Sofia Pro for Hn
+// Use this script to add external ressource like typekit: https://github.com/swissspidy/local-webfont
+// example: npx local-webfont https://use.typekit.net/bjc8obi.css src/scss/abstract/temp_to_copy_paste_delete.css swap
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/0c5f71/00000000000000003b9b1aa0/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"), url("https://use.typekit.net/af/0c5f71/00000000000000003b9b1aa0/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"), url("https://use.typekit.net/af/0c5f71/00000000000000003b9b1aa0/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 900;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 700;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/1ca530/00000000000000003b9b1a94/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"), url("https://use.typekit.net/af/1ca530/00000000000000003b9b1a94/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"), url("https://use.typekit.net/af/1ca530/00000000000000003b9b1a94/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 200;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/572508/00000000000000003b9b1a96/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"), url("https://use.typekit.net/af/572508/00000000000000003b9b1a96/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"), url("https://use.typekit.net/af/572508/00000000000000003b9b1a96/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 300;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/b4d13d/00000000000000003b9b1a9a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/b4d13d/00000000000000003b9b1a9a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/b4d13d/00000000000000003b9b1a9a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 500;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/7158ff/00000000000000003b9b1a9c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/7158ff/00000000000000003b9b1a9c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/7158ff/00000000000000003b9b1a9c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
+    font-style: normal;
+    font-weight: 600;
+}
+
+@font-face {
+    font-display: swap;
+    font-family: "sofia-pro";
+    src: url("https://use.typekit.net/af/0a60d4/00000000000000003b9b1a92/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3") format("woff2"), url("https://use.typekit.net/af/0a60d4/00000000000000003b9b1a92/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3") format("woff"), url("https://use.typekit.net/af/0a60d4/00000000000000003b9b1a92/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i1&v=3") format("opentype");
+    font-style: italic;
+    font-weight: 100;
+}
diff --git a/src/scss/abstract/_mixins.scss b/src/scss/abstract/_mixins.scss
@@ -279,10 +279,6 @@
 	line-height: $heading-line-height;
 	font-family: $customfont-2;
 
-	.fonts-loading & {
-		font-family: $font-sansserif;
-	}
-
 	@if $size == XXL {
 		font-size: 40px;
 

diff --git a/src/scss/base/_text.scss b/src/scss/base/_text.scss
@@ -30,11 +30,6 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	overflow-x: hidden;
-	//Fonts loading FOUT
-	//Adjust FOUT with tools like https://meowni.ca/font-style-matcher/
-	.fonts-loading & {
-		font-family: $font-sansserif;
-	}
 }
 
 a {

diff --git a/src/scss/wp/_wysiwyg.scss b/src/scss/wp/_wysiwyg.scss
@@ -1,15 +1,15 @@
 .wysiwyg {
 	@include clearfix;
 
-	// * {
-	// 	margin-bottom: $base-spacing;
+	>* {
+		margin-bottom: $base-spacing;
 
-	// 	&:last-child {
-	// 		margin-bottom: 0;
-	// 	}
-	// }
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
 
-	a:not([class]) {
+	>a:not([class]) {
 		text-decoration: underline;
 
 		@include hover {
@@ -27,6 +27,7 @@
 
 	img {
 		@include img__responsive;
+
 		&.alignright,
 		&.alignleft {
 			max-width: 50%;

diff --git a/src/templates/partials/footer.php b/src/templates/partials/footer.php
@@ -29,21 +29,6 @@
 		<!-- Polyfill.io -->
 		<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest,NodeList.prototype.forEach"></script>
 
-
-		<script>
-			// inline loadJS
-			function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
-
-			// then load your JS
-			if (sessionStorage.getItem('fonts-loaded')) {
-				// fonts cached, add class to document
-				document.documentElement.classList.remove('fonts-loading')
-			} else {
-				// load script with font observing logic
-				loadJS('assets/js/vendor_async/fonts-css-async.js')
-			}
-		</script>
-
 		<!-- Theme js -->
 		<?php
 		if ( is_readable( dirname( __FILE__ ) . '/../WebpackBuiltFiles.php' ) ) {

diff --git a/src/templates/partials/header.php b/src/templates/partials/header.php
@@ -2,7 +2,7 @@
 <!doctype html>
 <!--[if lte IE 9 ]> <html class="no-js ie lte-ie9 ie9" lang="fr"> <![endif]-->
 <!--[if !(IE)]><! -->
-<html class="fonts-loading no-js" lang="fr"><!--<![endif]-->
+<html class="no-js" lang="fr"><!--<![endif]-->
 	<head>
 
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">