🎨 replace Texta with Work Sans font

🍹 fix gulp watch for gulp 4
🐞 fix leftover ' in highlight code block
📝 remove top-banner
📝 v4

Author: desandro

content/index.hbs

@@ -35,9 +35,9 @@ description: New! JavaScript and jQuery plugin to automatically add next pages.
 <p>Link directly to Infinite Scroll files on <a href="https://unpkg.com/">unpkg</a>.</p>
 
 ``` html
-<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
+<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
 <!-- or -->
-<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
+<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.js"></script>
 ```
 
 {{! ----------------------------------------------------------------- }}

css/base.css

@@ -6,18 +6,17 @@
 }
 
 body {
-  font-family: 'Texta', sans-serif;
+  font-family: 'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
   color: #444;
   line-height: 1.5;
   margin: 0;
   padding: 0;
 }
 
-.export body { font-family: sans-serif; }
+.export body { font-family: -apple-system, Helvetica, Arial, sans-serif; }
 
 /* font size on html for rem */
-html { font-size: 17px; }
-html.export { font-size: 15px; }
+html { font-size: 15px; }
 
 a {
   color: #19F;
@@ -153,8 +152,7 @@ tr:nth-child(2) td {
 
 @media screen and (min-width: 768px) {
 
-  html { font-size: 19px; }
-  html.export { font-size: 16px; }
+  html { font-size: 17px; }
 
   .container {
     padding: 0 30px;

css/web-fonts.css

@@ -1,36 +1,26 @@
 /* web fonts
 ------------------------- */
 
-@import url("//hello.myfonts.net/count/2d333f");
-
-/*
-  Just use WOFF2 and WOFF for webfonts
-  https://css-tricks.com/snippets/css/using-font-face/ */
-
-/* Texta Heavy */
+/* Work Sans Regular */
 @font-face {
-  font-family: 'Texta';
-  font-weight: bold;
+  font-family: 'Work Sans';
+  font-weight: 400;
   font-style: normal;
-  src:
-    url('../fonts/2D333F_0_0.woff2') format('woff2'),
-    url('../fonts/2D333F_0_0.woff') format('woff');
+  src: url('../fonts/WorkSans-Regular.woff2') format('woff2');
 }
 
-/* Texta Italic */
+/* Work Sans Italic */
 @font-face {
-  font-family: 'Texta';
-  font-weight: normal;
+  font-family: 'Work Sans';
+  font-weight: 400;
   font-style: italic;
-  src:
-    url('../fonts/2D333F_1_0.woff2') format('woff2'),
-    url('../fonts/2D333F_1_0.woff') format('woff');
+  src: url('../fonts/WorkSans-Italic.woff2') format('woff2');
 }
 
-/* Texta Regular */
+/* Work Sans Semi-bold */
 @font-face {
-  font-family: 'Texta';
-  src:
-    url('../fonts/2D333F_2_0.woff2') format('woff2'),
-    url('../fonts/2D333F_2_0.woff') format('woff');
+  font-family: 'Work Sans';
+  font-weight: 600;
+  font-style: normal;
+  src: url('../fonts/WorkSans-SemiBold.woff2') format('woff2');
 }

gulpfile.js

@@ -9,15 +9,10 @@ let site = {
   // templating data
   data: {
     productName: 'Infinite Scroll',
-    majorVersion: 3,
+    majorVersion: 4,
     isDev: taskName == 'dev',
     isExport: taskName == 'export',
   },
-  // src to watch, tasks to trigger
-  watches: [],
-  watch: function( src, tasks ) {
-    site.watches.push([ src, tasks ]);
-  },
 };
 
 // ----- tasks ----- //
@@ -55,8 +50,4 @@ gulp.task( 'dev', gulp.parallel(
     'dist',
     'prod-assets',
     'content',
-), function() {
-  site.watches.forEach( function( watchable ) {
-    gulp.watch( ...watchable );
-  } );
-} );
+) );

modules/site-nav/site-nav.hbs

@@ -1,9 +1,3 @@
-<div class="top-banner">
-  <div class="container">
-    This is the archived documentation site for Infinite Scroll v3. <a href="https://infinite-scroll.com">For the latest version, view infinite-scroll.com</a>.
-  </div>
-</div>
-
 <ol class="site-nav">
   <li class="site-nav__item site-nav__item--homepage">
     <a href="{{@file.rootPath}}.">Infinite Scroll v3</a>

modules/top-banner/top-banner.css

@@ -38,7 +38,7 @@ let helpers = {
 
 module.exports = function( site ) {
 
-  gulp.task( 'content', function() {
+  gulp.task( 'buildContent', function() {
     // exclude 404 if export
     let filterQuery = site.data.isExport ? [ '**', '!**/404.*' ] : '**';
 
@@ -70,9 +70,14 @@ module.exports = function( site ) {
       .pipe( gulp.dest('build') );
   } );
 
-  site.watch( contentSrc, [ 'content' ] );
-  site.watch( pageTemplateSrc, [ 'content' ] );
-  site.watch( dataSrc, [ 'content' ] );
-  site.watch( partialsSrc, [ 'content' ] );
+  let contentTask = gulp.parallel('buildContent');
+  gulp.task( 'content', contentTask );
+
+  if ( site.data.isDev ) {
+    gulp.watch( contentSrc, contentTask );
+    gulp.watch( pageTemplateSrc, contentTask );
+    gulp.watch( dataSrc, contentTask );
+    gulp.watch( partialsSrc, contentTask );
+  }
 
 };

tasks/content.js

@@ -37,7 +37,7 @@ function replaceCodeBlock( match, leadingWhiteSpace, block ) {
     block;
   // wrap in <pre><code>
   let classAttr = language ? `class="${language}"` : '';
-  return `\n<pre><code ${classAttr}>${highlighted}</code></pre>'`;
+  return `\n<pre><code ${classAttr}>${highlighted}</code></pre>`;
 }
 
 module.exports = function() {