Use Tachyons.

app/setup.php

@@ -18,7 +18,7 @@ add_action('wp_enqueue_scripts', function () {
         null
     );
     wp_enqueue_style('aldine/main.css', asset_path('styles/main.css'), false, null);
-    wp_enqueue_style(
+    /* wp_enqueue_style(
         'uio/normalize.css',
         get_theme_file_uri() . '/lib/infusion/src/lib/normalize/css/normalize.css',
         false,
@@ -48,8 +48,9 @@ add_action('wp_enqueue_scripts', function () {
         false,
         null
     );
-    wp_enqueue_script('aldine/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
     wp_enqueue_script('uio.js', get_theme_file_uri() . '/lib/infusion/infusion-uiOptions.js', ['jquery'], null, true);
+    */
+    wp_enqueue_script('aldine/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
     wp_localize_script('aldine/main.js', 'SAGE_DIST_PATH', get_theme_file_uri() . '/dist/');
 }, 100);
 

package.json

@@ -127,7 +127,7 @@
     "yargs": "~8.0"
   },
   "dependencies": {
-    "font-awesome": "^4.7.0",
-    "jquery": "1.12.4 - 3"
+    "jquery": "1.12.4 - 3",
+    "tachyons-sass": "~4.7"
   }
 }

resources/assets/styles/autoload/_fontawesome.scss

@@ -1,3 +0,0 @@
-$fa-font-path: '~font-awesome/fonts';
-
-@import "~font-awesome/scss/font-awesome";

resources/assets/styles/autoload/_tachyons.scss

@@ -0,0 +1,4 @@
+// `sage preset` installed this file automatically.
+// Running `sage preset` again could result in automatic deletion of this file.
+// Because of this, we do not recommend editing this file.
+@import "~tachyons-sass/tachyons";

resources/assets/styles/common/_global.scss

@@ -4,7 +4,6 @@
 
 body {
   margin: 0;
-  color: $dark-grey;
   font-family: $font-family-serif;
   font-size: #{$base-font-size}px;
 }
@@ -36,4 +35,5 @@ h2 {
 
 a {
   color: $brand-primary;
+  text-decoration: none;
 }

resources/assets/styles/components/_buttons.scss

@@ -7,7 +7,7 @@
   border: 2px solid $brand-primary;
   border-radius: 3px;
   background: $brand-primary;
-  font-family: Karla, sans-serif;
+  font-family: $font-family-sans-serif;
   font-size: em(16);
   font-weight: 600;
   color: $white;

resources/assets/styles/layouts/_footer.scss

@@ -3,7 +3,7 @@
     background: $brand-secondary;
     margin-bottom: 0;
     padding: 60px 42.5px 40px;
-    font-family: Karla, sans-serif;
+    font-family: $font-family-sans-serif;
     font-size: em(16);
     color: $white;
 
@@ -52,7 +52,7 @@
       }
     }
 
-    .network-footer-block-3 {
+    .network-footer-menu {
       padding: 30px 7.5px 0;
     }
 
@@ -96,7 +96,7 @@
     li,
     a {
       color: $white;
-      font-family: Karla, sans-serif;
+      font-family: $font-family-sans-serif;
       text-decoration: none;
       text-transform: none;
       letter-spacing: normal;

resources/assets/styles/layouts/_header.scss

@@ -1,32 +1,19 @@
 .banner {
-  background: url('../images/banner-mobile.jpg');
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: bottom center;
+  background-image: url('../images/banner-mobile.jpg');
 
   .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    max-width: 1440px;
     height: 560px;
   }
 
   .toggle-menu {
-    display: block;
-    position: absolute;
     top: 30px;
     right: 17px;
-    z-index: 99;
-    text-indent: -9999em;
     width: 25px;
     height: 20px;
+    z-index: 99;
+    text-indent: -9999em;
 
     .icon {
-      display: block;
-      position: absolute;
       top: 7px;
       width: 25px;
       height: 3px;
@@ -34,9 +21,9 @@
 
       &::before,
       &::after {
-        content: '';
         width: 25px;
         height: 3px;
+        content: '';
         background: $brand-primary;
       }
 
@@ -65,37 +52,25 @@
   }
 
   .brand {
-    display: block;
     width: 109px;
     height: 17px;
     margin: 30px 0 0 17px;
-    align-self: flex-start;
     background-image: url('../images/logo.png');
     background-size: 109px 17px;
-    text-indent: -9999em;
   }
 
   .primary-navigation {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    top: 0;
-    width: 100%;
     height: 560px;
     margin: 0 0 0 -100%;
     padding: 0 17px;
-    background: transparent;
-    transition: background 0.5s;
 
     a {
-      font-family: Karla, sans-serif;
+      display: none;
+      font-family: $font-family-sans-serif;
       font-size: em(24);
+      line-height: (80/24);
       color: $white;
       letter-spacing: 0;
-      line-height: (80/24);
-      text-decoration: none;
-      display: none;
     }
 
     .sep {
@@ -103,11 +78,10 @@
     }
 
     &.is-visible {
-      z-index: 1;
-      background: $brand-primary;
-      justify-content: center;
       margin: 0;
       padding: 0 52px;
+      z-index: 1;
+      background: $brand-primary;
 
       a {
         display: block;
@@ -117,74 +91,47 @@
         &:last-child {
           border-bottom: 0;
         }
-
-        &.brand {
-          display: none;
-        }
       }
     }
   }
 
   .branding {
-    display: flex;
     height: 364px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-  }
-}
-
-.banner h1 {
-  text-align: center;
 
-  a {
-    text-decoration: none;
+    p {
+      font-family: $font-family-sans-serif;
+    }
   }
 }
 
-.banner h2 {
-  text-align: center;
-}
-
-@media (min-width: $medium) {
+@media #{$breakpoint-large} {
   .banner {
     background-image: url('../images/banner-desktop.jpg');
 
     .container {
-      margin: 0 auto;
       height: 880px;
-    }
-
-    .toggle-menu {
-      display: none;
+      margin: 0 auto;
     }
 
     .brand {
-      align-self: center;
-      margin-top: 40px;
       width: 265px;
       height: 40px;
+      margin-top: 40px;
       background-image: url('../images/logo@2x.png');
       background-size: 265px 40px;
     }
 
     .primary-navigation {
-      position: absolute;
-      width: 100%;
+      top: 40px;
       max-width: 1440px;
       height: 40px;
-      top: 40px;
-      margin: 0;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
+      margin-left: 0;
 
       a {
-        font-size: em(18);
         display: inline-block;
-        line-height: normal;
+        font-size: em(18);
         color: $black;
+        line-height: normal;
 
         &:hover,
         &:focus {
@@ -208,19 +155,19 @@
 
     .branding {
       height: 576px;
+
+      p {
+        font-size: em(30);
+        letter-spacing: 0.75px;
+        line-height: (40/30);
+      }
     }
 
     h1 {
+      margin-bottom: 0.5em;
       font-size: em(72);
-      letter-spacing: 1.8px;
       line-height: (40/72);
-      margin-bottom: 0.5em;
-    }
-
-    h2 {
-      font-size: em(30);
-      letter-spacing: 0.75px;
-      line-height: (40/30);
+      letter-spacing: 1.8px;
     }
   }
 }

resources/assets/styles/layouts/_pages.scss

@@ -65,7 +65,7 @@
         // transition: 0.4s all;
 
         a {
-          font-family: Karla, sans-serif;
+          font-family: $font-family-sans-serif;
           color: $white;
           text-decoration: none;
         }

resources/views/layouts/app.blade.php

@@ -1,7 +1,7 @@
 <!doctype html>
 <html @php(language_attributes())>
   @include('partials.head')
-  <body @php(body_class())>
+  <body @php(body_class('no-js'))>
     {{-- @include('partials.uio') --}}
     @php(do_action('get_header'))
     @include('partials.header')

resources/views/partials/footer.blade.php

@@ -12,10 +12,14 @@
         @endif
         <div class="social-media">
           @if($network_facebook)
-            <a class="facebook" href="{{ $network_facebook }}" title="{{ sprintf(__('%s on Facebook', 'aldine'), get_bloginfo('name', 'display')) }}"><i class="fa fa-facebook-official"></i></a>
+            <a class="link near-black hover-silver dib h2 w2 mr3" href="{{ $network_facebook }}" title="{{ sprintf(__('%s on Facebook', 'aldine'), get_bloginfo('name', 'display')) }}">
+              <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+            </a>
           @endif
           @if($network_twitter)
-            <a class="twitter" href="{{ $network_twitter }}" title="{{ sprintf(__('%s on Twitter', 'aldine'), get_bloginfo('name', 'display')) }}"><i class="fa fa-twitter"></i></a>
+            <a class="link near-black hover-silver dib h2 w2 mr3" href="{{ $network_twitter }}" title="{{ sprintf(__('%s on Twitter', 'aldine'), get_bloginfo('name', 'display')) }}">
+              <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+            </a>
           @endif
         </div>
       </div>
@@ -35,8 +39,12 @@
         </ul>
       </div>
       <div class="social-media">
-        <a class="facebook" href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}"><i class="fa fa-facebook-official"></i></a>
-        <a class="twitter" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="{{ __('Pressbooks on Twitter', 'aldine') }}"><i class="fa fa-twitter"></i></a>
+        <a class="link hover-silver near-black dib h1 w1" href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}">
+          <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+        </a>
+        <a class="link hover-silver near-black dib h1 w1" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="{{ __('Pressbooks on Twitter', 'aldine') }}">
+          <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+        </a>
       </div>
     </section>
   </div>

resources/views/partials/header.blade.php

@@ -1,8 +1,8 @@
-<header class="banner">
-  <div class="container">
-    <a class="toggle-menu" href="#primary-navigation">Toggle menu<span class="icon"></span></a>
-    <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
-    <nav id="primary-navigation" class="primary-navigation">
+<section class="banner bg-bottom cover">
+  <div class="container flex flex-column justify-between items-center w-100 mw-100">
+    <a class="toggle-menu db dn-l absolute" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon db absolute"></span></a>
+    <a class="brand db self-start self-center-l" href="{{ home_url('/') }}"><span class="clip>"{{ get_bloginfo('name', 'display') }}</a></a>
+    <nav id="primary-navigation" class="primary-navigation absolute flex flex-column justify-center items-start top-0 w-100 bg-transparent bg-animate flex-row-l justify-start-l items-center-l">
         <a class="catalog" href="{{ home_url('/catalog') }}">Catalog</a>
         <a class="contact" href="#contact">Contact</a>
         @if(!is_user_logged_in())
@@ -15,9 +15,9 @@
           <a class="signin" href="{{ wp_logout_url() }}">{{ __('Sign out', 'aldine') }}</a>
         @endif
     </nav>
-    <div class="branding">
+    <header class="branding flex flex-column justify-start items-center tc">
       <h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
-      <h2>{{ get_bloginfo('description', 'display') }}</h2>
-    </div>
+      <p>{{ get_bloginfo('description', 'display') }}</p>
+    </header>
   </div>
-</header>
+</section>

yarn.lock

@@ -6074,6 +6074,16 @@ table@^4.0.1:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
+tachyons-sass@~4.7:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/tachyons-sass/-/tachyons-sass-4.7.4.tgz#47199472f444f1451692ec4509c5da700569ea57"
+  dependencies:
+    tachyons "^4.7.4"
+
+tachyons@^4.7.4:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/tachyons/-/tachyons-4.8.1.tgz#9a3183feecb3240c4dcefee7feecc8259acd7381"
+
 tapable@^0.2.7, tapable@~0.2.5:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"