Merge pull request #24 from harryfinn/release/v1.7.0

Release v1.7.0

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) [2017] [Harry Finn]
+Copyright (c) [2018] [Harry Finn]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/javascripts/web-font-loader.js

@@ -14,7 +14,7 @@ function clearFout() {
 
 (function(d) {
   var wf = d.createElement('script'), s = d.scripts[0];
-  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
+  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
   s.parentNode.insertBefore(wf, s);
   if(sessionStorage.fonts) {
     d.getElementsByTagName('html')[0].classList.add('wf-active');

app/stylesheets/objects/_wrappers.scss

@@ -14,3 +14,13 @@
     padding: 0 calc(#{$container-padding} * 2);
   }
 }
+
+@media only screen
+and (device-width: 375px)
+and (device-height: 812px)
+and (-webkit-device-pixel-ratio: 3)
+and (orientation: landscape) {
+  .container {
+    padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
+  }
+}

app/stylesheets/settings/_variables.scss

@@ -6,4 +6,4 @@ $color-black: #000;
 // Global vars
 
 $container-width: 1280px;
-$container-padding: 10px;
+$container-padding: 20px;

app/stylesheets/styles.scss

@@ -1,7 +1,8 @@
 @import 'settings/variables';
 
 @import 'tools/mixins',
-        'tools/gridz';
+        'tools/gridz',
+        'tools/wordpress-core';
 
 @import 'globals/reset',
         'globals/fout';

app/stylesheets/tools/_gridz.scss

@@ -2,23 +2,23 @@ $_num-grid-col: 12;
 $_breakpoints: (
   xs: (
     min-width: 320,
-    gutter-spacing: 10
+    gutter-spacing: 20
   ),
   sm: (
     min-width: 640,
-    gutter-spacing: 10
+    gutter-spacing: 20
   ),
   md: (
     min-width: 768,
     gutter-spacing: 20
   ),
   lg: (
     min-width: 1024,
-    gutter-spacing: 20
+    gutter-spacing: 30
   ),
   xl: (
     min-width: 1280,
-    gutter-spacing: 20
+    gutter-spacing: 30
   )
 );
 
@@ -40,6 +40,10 @@ $_breakpoints: (
     margin-left: 0;
   }
 
+  %grid-gutter-default {
+    margin-left: -20px;
+  }
+
   @each $breakpoint, $map in $_breakpoints {
     @for $i from 1 through $_num-grid-col {
       .col-#{$breakpoint}-#{$i} {
@@ -49,6 +53,18 @@ $_breakpoints: (
       .col-push-#{$breakpoint}-#{$i} {
         @extend %col-push-default;
       }
+
+      .grid--gutter {
+        @extend %grid-gutter-default;
+      }
+
+      $percentage-width: 100%;
+      $gutter-spacing: 20;
+
+      .grid--gutter > .col-#{$breakpoint}-#{$i} {
+        margin-left: #{$gutter-spacing}px;
+        width: calc(#{$percentage-width} - #{$gutter-spacing}px);
+      }
     }
   }
 }
@@ -60,7 +76,6 @@ $_breakpoints: (
   @media only screen and (min-width: #{$min-width}px) {
     .grid--gutter {
       margin-left: -#{$gutter-spacing}px;
-      margin-top: -#{$gutter-spacing}px;
     }
 
     @for $i from 1 through $_num-grid-col {
@@ -74,9 +89,8 @@ $_breakpoints: (
         margin-left: $percentage-width;
       }
 
-      .grid--gutter .col-#{$breakpoint}-#{$i} {
+      .grid--gutter > .col-#{$breakpoint}-#{$i} {
         margin-left: #{$gutter-spacing}px;
-        margin-top: #{$gutter-spacing}px;
         width: calc(#{$percentage-width} - #{$gutter-spacing}px);
       }
     }

app/stylesheets/tools/_wordpress-core.scss

@@ -0,0 +1,108 @@
+//scss-lint:disable all
+
+/* =WordPress Core
+-------------------------------------------------------------- */
+.alignnone {
+    margin: 5px 20px 20px 0;
+}
+
+.aligncenter,
+div.aligncenter {
+    display: block;
+    margin: 5px auto 5px auto;
+}
+
+.alignright {
+    float:right;
+    margin: 5px 0 20px 20px;
+}
+
+.alignleft {
+    float: left;
+    margin: 5px 20px 20px 0;
+}
+
+a img.alignright {
+    float: right;
+    margin: 5px 0 20px 20px;
+}
+
+a img.alignnone {
+    margin: 5px 20px 20px 0;
+}
+
+a img.alignleft {
+    float: left;
+    margin: 5px 20px 20px 0;
+}
+
+a img.aligncenter {
+    display: block;
+    margin-left: auto;
+    margin-right: auto
+}
+
+.wp-caption {
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    max-width: 96%; /* Image does not overflow the content area */
+    padding: 5px 3px 10px;
+    text-align: center;
+}
+
+.wp-caption.alignnone {
+    margin: 5px 20px 20px 0;
+}
+
+.wp-caption.alignleft {
+    margin: 5px 20px 20px 0;
+}
+
+.wp-caption.alignright {
+    margin: 5px 0 20px 20px;
+}
+
+.wp-caption img {
+    border: 0 none;
+    height: auto;
+    margin: 0;
+    max-width: 98.5%;
+    padding: 0;
+    width: auto;
+}
+
+.wp-caption p.wp-caption-text {
+    font-size: 11px;
+    line-height: 17px;
+    margin: 0;
+    padding: 0 4px 5px;
+}
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+.screen-reader-text:focus {
+  background-color: #f1f1f1;
+  border-radius: 3px;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+  clip: auto !important;
+  color: #21759b;
+  display: block;
+  font-size: 14px;
+  font-size: 0.875rem;
+  font-weight: bold;
+  height: auto;
+  left: 5px;
+  line-height: normal;
+  padding: 15px 23px 14px;
+  text-decoration: none;
+  top: 5px;
+  width: auto;
+  z-index: 100000; /* Above WP toolbar. */
+}

functions.php

@@ -1,42 +1,55 @@
 <?php
 
 require_once(get_template_directory() . '/includes/constants.php');
-require_once(THEME_FOLDER . '/includes/class.wp-brunch.php');
+require_once(INCLUDES_DIR . '/class.wp-brunch.php');
+require_once(INCLUDES_DIR . '/class.autoloaders.php');
+require_once(INCLUDES_DIR . '/wordpress-helpers.php');
 
 class WPTheme extends WPBrunch {
   public static function init() {
     parent::init();
 
-    spl_autoload_register([__CLASS__, 'autoloadClasses']);
-    spl_autoload_register([__CLASS__, 'autoloadLibClasses']);
+    Autoloaders::init();
 
     add_action('wp_enqueue_scripts', [__CLASS__, 'styleScriptIncludes']);
     add_action('after_setup_theme', [__CLASS__, 'themeSupport']);
     add_action('after_setup_theme', [__CLASS__, 'customImageSizes']);
     add_action('after_setup_theme', [__CLASS__, 'registerNavMenus']);
     add_action('init', [__CLASS__, 'includeAdditionalFiles'], LOAD_ON_INIT);
 
+    add_filter('script_loader_tag', [__CLASS__, 'deferParsingOfJS'], 10);
+
     // Uncomment action below once you have customised the logo and colours for
     // the admin login page
     // add_action('login_head', [__CLASS__, 'customLoginLogo']);
   }
 
   public static function styleScriptIncludes() {
-    wp_enqueue_script(['jquery', 'underscore']);
-    wp_register_style(
-      'font-awesome-lib',
-      '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
-      '',
-      '4.7.0'
+    wp_register_script(
+      'fontawesome-svg-js',
+      '//use.fontawesome.com/releases/v5.0.2/js/all.js',
+      [],
+      '5.0.2',
+      true
     );
-    wp_enqueue_style('font-awesome-lib');
+    wp_enqueue_script(['jquery', 'underscore', 'fontawesome-svg-js']);
     wp_localize_script(
       'theme_js',
       'wpAjax',
       ['ajaxurl' => admin_url('admin-ajax.php')]
     );
   }
 
+  public function deferParsingOfJS($tag) {
+    $scripts_to_exclude = ['jquery', 'underscore'];
+
+    foreach($scripts_to_exclude as $exclude_script) {
+      if(strpos($tag, $exclude_script) !== false) return $tag;
+    }
+
+    return str_replace(' src', ' defer src', $tag);
+  }
+
   public static function themeSupport() {
     add_theme_support('html5', ['search-form']);
     add_theme_support('automatic-feed-links');
@@ -83,30 +96,6 @@ public static function customLoginLogo() {
 
     <?php
   }
-
-  public static function autoloadClasses($name) {
-    $class_name = self::formatClassFilename($name);
-    $class_path = get_template_directory() . '/includes/class.'
-      . $class_name . '.php';
-
-    if(file_exists($class_path)) require_once $class_path;
-  }
-
-  public static function autoloadLibClasses($name) {
-    $lib_class_name = THEME_FOLDER . '/includes/class.'
-      . strtolower($name) . '.php';
-
-    if(file_exists($lib_class_name)) require_once($lib_class_name);
-  }
-
-  private static function formatClassFilename($filename) {
-    return strtolower(
-      implode(
-        '-',
-        preg_split('/(?=[A-Z])/', $filename, -1, PREG_SPLIT_NO_EMPTY)
-      )
-    );
-  }
 }
 
 WPTheme::init();

header.php

@@ -2,7 +2,8 @@
 <html <?php language_attributes(); ?>>
   <head>
     <meta charset="<?php bloginfo('charset'); ?>" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
 
     <?php wp_head(); ?>
 

includes/class.autoloaders.php

@@ -0,0 +1,32 @@
+<?php
+
+class Autoloaders {
+  public static function init() {
+    spl_autoload_register([__CLASS__, 'autoloadClasses']);
+    spl_autoload_register([__CLASS__, 'autoloadLibClasses']);
+  }
+
+  public static function autoloadClasses($name) {
+    $class_name = self::formatClassFilename($name);
+    $class_path = get_template_directory() . '/includes/class.'
+      . $class_name . '.php';
+
+    if(file_exists($class_path)) require_once $class_path;
+  }
+
+  public static function autoloadLibClasses($name) {
+    $lib_class_name = INCLUDES_DIR . '/class.'
+      . strtolower($name) . '.php';
+
+    if(file_exists($lib_class_name)) require_once($lib_class_name);
+  }
+
+  private static function formatClassFilename($filename) {
+    return strtolower(
+      implode(
+        '-',
+        preg_split('/(?=[A-Z])/', $filename, -1, PREG_SPLIT_NO_EMPTY)
+      )
+    );
+  }
+}