Use Tachyons.

7 years ago · 8928885d3e
13 changed files with 74 additions and 107 deletions
--- a/app/setup.php
+++ b/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);

--- a/package.json
+++ b/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"
  }
 }
--- a/resources/assets/styles/autoload/_fontawesome.scss
+++ b/resources/assets/styles/autoload/_fontawesome.scss
@ -1,3 +0,0 @@
-$fa-font-path: '~font-awesome/fonts';
-
-@import "~font-awesome/scss/font-awesome";
--- a/resources/assets/styles/autoload/_tachyons.scss
+++ b/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";
--- a/resources/assets/styles/common/_global.scss
+++ b/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;
 }
--- a/resources/assets/styles/components/_buttons.scss
+++ b/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;
--- a/resources/assets/styles/layouts/_footer.scss
+++ b/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;
--- a/resources/assets/styles/layouts/_header.scss
+++ b/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;
    }
  }
 }
--- a/resources/assets/styles/layouts/_pages.scss
+++ b/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;
        }
--- a/resources/views/layouts/app.blade.php
+++ b/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')
--- a/resources/views/partials/footer.blade.php
+++ b/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>
--- a/resources/views/partials/header.blade.php
+++ b/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>
-  </div>
+      <p>{{ get_bloginfo('description', 'display') }}</p>
    </header>
+  </div>
+</section>
--- a/yarn.lock
+++ b/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"