Use Block Element Modifier naming conventions (#22)

* Books & blocks.

* Fix catalog.

* Update Tachyons.

* Clean up contact form.

* Update header.

* Some header and footer improvements.

* Add pages (closes #18).

app/admin.php

@@ -9,7 +9,7 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
     // Add postMessage support
     $wp_customize->get_setting('blogname')->transport = 'postMessage';
     $wp_customize->selective_refresh->add_partial('blogname', [
-        'selector' => '.brand',
+        'selector' => '.branding h1 a',
         'render_callback' => function () {
             bloginfo('name');
         }

app/controllers/App.php

@@ -38,12 +38,12 @@ class App extends Controller
                 || get_option('pb_network_twitter')
                 || is_active_sidebar("network-footer-block-$index")
             ) {
-                return "network-footer-block-$index";
+                return "network-footer__block--$index";
             } else {
-                return 'empty';
+                return 'network-footer__block--empty';
             }
         }
-        return (is_active_sidebar("network-footer-block-$index")) ? "network-footer-block-$index" : 'empty';
+        return (is_active_sidebar("network-footer-block-$index")) ? "network-footer__block--$index" : 'network-footer__block--empty';
     }
 
     public static function title()

app/setup.php

@@ -90,8 +90,8 @@ add_action('widgets_init', function () {
     $config = [
         'before_widget' => '<section class="widget %1$s %2$s">',
         'after_widget'  => '</section>',
-        'before_title'  => '<h3 class="tc ttu">',
+        'before_title'  => '<h2>',
-        'after_title'   => '</h3>'
+        'after_title'   => '</h2>'
     ];
     register_sidebar([
         'name'          => __('Front Page Content', 'aldine'),
@@ -102,8 +102,8 @@ add_action('widgets_init', function () {
         'id'            => 'front-page-block',
         'before_widget' => '<section class="block %1$s %2$s">',
         'after_widget'  => '</section>',
-        'before_title'  => '<h3 class="tc ttu">',
+        'before_title'  => '<h2>',
-        'after_title'   => '</h3>'
+        'after_title'   => '</h2>'
     ]);
     register_sidebar([
         'name'          => __('Network Footer Block 1', 'aldine'),

package-lock.json

@@ -110,6 +110,12 @@
         }
       }
     },
+    "aetna": {
+      "version": "github:pressbooks/aetna#3a0a32315b48877bf7ef30c384fad9d3b92f875f",
+      "requires": {
+        "tachyons-sass": "4.8.1"
+      }
+    },
     "after": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/after/-/after-0.8.1.tgz",
@@ -12416,9 +12422,9 @@
       "integrity": "sha512-sh/LFb9MoPt76sBKUSHP1MlMVRBw6zDiv11Ag/t5M4wS1mxQhFnNkDzhGdH6/xIwPO5tqwlNnXfiTI5XwDCJzA=="
     },
     "tachyons-sass": {
-      "version": "4.7.4",
+      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/tachyons-sass/-/tachyons-sass-4.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/tachyons-sass/-/tachyons-sass-4.8.1.tgz",
-      "integrity": "sha512-Z03O0dVpHxGfKxkkk8QSQKdHYGqpS47URS0aV2q7S+3hYxomsvGq5g4AoR0VMkOMvGOpSmXCZnbm1gE5pbO8eQ==",
+      "integrity": "sha512-2lyzsFRpFVCjAi7FzuhD6nRUkj6wVH81850AGvxPD5C9G8n58ok5iIuwIm+s/8CaNiqzcnGXzGthJ4Kiq2Y5Og==",
       "requires": {
         "tachyons": "4.8.1"
       }

package.json

@@ -103,10 +103,10 @@
     "stylelint-webpack-plugin": "^0.8.0"
   },
   "dependencies": {
+    "aetna": "github:pressbooks/aetna#3a0a323",
     "isotope-layout": "^3.0.4",
     "jquery": "1.12.4 - 3",
     "jquery-bridget": "^2.0.1",
-    "tachyons-sass": "~4.7",
     "wpapi": "^1.1.2"
   }
 }

resources/assets/scripts/routes/common.js

@@ -2,10 +2,10 @@ export default {
   init() {
     // JavaScript to be fired on all pages
     $('body').removeClass('no-js').addClass('js');
-    $('.toggle-menu').click((event) => {
+    $('.toggle').click((event) => {
       event.preventDefault();
-      $(event.currentTarget).toggleClass('is-active');
+      $(event.currentTarget).toggleClass('toggle--active');
-      $('.primary-navigation').toggleClass('is-visible');
+      $('.banner__navigation').toggleClass('banner__navigation--visible');
     });
   },
   finalize() {

resources/assets/styles/common/_functions.scss

@@ -1,7 +0,0 @@
-@function rem($pixels, $context: $base-font-size) {
-  @return #{$pixels / $context}rem;
-}
-
-@function percent($target, $context) {
-  @return ($target / $context) * 100%;
-}

resources/assets/styles/common/_global.scss

@@ -1,83 +0,0 @@
-html {
-  -webkit-font-smoothing: antialiased;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: $font-family-serif;
-  font-size: rem(18);
-  background: #fff;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $font-family-sans-serif;
-}
-
-h1 {
-  font-size: rem(30);
-  font-weight: 600;
-  letter-spacing: rem(2);
-  line-height: (36/30);
-  margin: 0;
-}
-
-h2 {
-  font-size: rem(16);
-  font-weight: normal;
-  line-height: (30/16);
-  margin: 0;
-}
-
-.ml-auto {
-  margin-left: auto;
-}
-
-.mr-auto {
-  margin-right: auto;
-}
-
-:root {
-  --primary: $brand-primary;
-  --accent: $brand-accent;
-  --primary-fg: $white;
-  --accent-fg: $white;
-  --header-text: $black;
-}
-
-a {
-  color: var(--primary, $brand-primary);
-  text-decoration: none;
-}
-
-.primary {
-  color: var(--brand-primary, $brand-primary);
-}
-
-.bg-primary {
-  background-color: var(--brand-primary, $brand-primary);
-}
-
-.b--primary {
-  border-color: var(--brand-primary, $brand-primary);
-}
-
-.accent {
-  color: var(--brand-secondary, $brand-accent);
-}
-
-.bg-accent {
-  background-color: var(--brand-secondary, $brand-accent);
-}
-
-.b--accent {
-  border-color: var(--brand-secondary, $brand-accent);
-}

resources/assets/styles/common/_variables.scss

@@ -1,21 +0,0 @@
-/** Colors */
-$brand-primary:      #b01109;
-$brand-accent:       #015d75;
-$light-gray:         #ececec;
-$dark-grey:             #444;
-$black:                 #000;
-$white:                 #fff;
-
-/** Box Model */
-$spacer:                2rem;
-
-/** Breakpoints */
-$small: 768px;
-$medium: 960px;
-$large: 1200px;
-$extra-large: 1650px;
-
-/** Fonts */
-$font-family-sans-serif: 'Karla', sans-serif;
-$font-family-serif: 'Spectral', serif;
-$base-font-size: 16;

resources/assets/styles/components/_buttons.scss

@@ -1,53 +0,0 @@
-.button {
-  display: inline-block;
-  width: rem(250);
-  height: rem(60);
-  padding: rem(19);
-  border: 2px solid var(--primary, $brand-primary);
-  border-radius: 3px;
-  background: var(--primary, $brand-primary);
-  font-family: $font-family-sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--primary-fg, $white);
-  line-height: normal;
-  letter-spacing: rem(2);
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: all 0.5s;
-  vertical-align: middle;
-
-  &:hover,
-  &:focus {
-    background: $white;
-    color: var(--primary, $brand-primary);
-  }
-
-  &.button--small {
-    width: rem(150);
-    height: rem(40);
-    padding: rem(6.5);
-  }
-
-  &.button--wide {
-    width: 19.0625rem;
-  }
-
-  &.button--outline {
-    background: $white;
-    color: var(--primary, $brand-primary);
-
-    &:hover,
-    &:focus {
-      color: var(--primary-fg, $white);
-      background: var(--primary, $brand-primary);
-    }
-  }
-}
-
-@media (min-width: $medium) {
-  .button {
-    width: 275px;
-  }
-}

resources/assets/styles/components/_forms.scss

@@ -1,98 +1,97 @@
-/** Search form */
+.form {
-// TODO: .search-form {}
+  width: rem(354);
-// TODO: .search-form label {}
-// TODO: .search-form .search-field {}
-// TODO: .search-form .search-submit {}
 
-::placeholder {
+  ::placeholder {
     color: $black;
-}
-
-.contact {
-  background: #f6f6f6;
-  padding: rem(65) 0 rem(120);
-
-  h3 {
-    color: var(--primary, $brand-primary);
-
-    &::before {
-      content: '';
-      display: block;
-      margin: 0 auto 1rem;
-      width: rem(46);
-      height: rem(5);
-      background: var(--accent, $brand-accent);
-    }
   }
 
-  p {
+  &__notice {
+    margin-bottom: 2rem;
     font-size: 0.875rem;
     font-weight: 600;
     font-family: $font-family-sans-serif;
 
-    &:last-child {
+    &--error {
-      margin-top: rem(47);
+      color: $dark-red;
-    }
     }
 
-  .success {
+    &--success {
       color: $dark-green;
     }
-
-  .error {
-    color: $dark-red;
   }
 
-  form {
+  &__row {
-    width: 22.125rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
 
-    .error > input[type="text"],
+    &--error > input[type="text"],
-    .error > input[type="email"],
+    &--error > input[type="email"],
-    .error > textarea {
+    &--error > textarea {
       border-bottom: solid 2px $dark-red;
     }
 
-    .error > ::placeholder {
+    &--error > ::placeholder {
       color: $dark-red;
     }
-  }
 
-  label {
+    &:last-child {
-    margin-bottom: 1rem;
+      margin-top: rem(48);
     }
-
-  label,
-  input[type="text"],
-  input[type="email"],
-  textarea {
-    font-size: 0.875rem;
-    font-weight: 600;
-    font-family: $font-family-sans-serif;
-    background: transparent;
-  }
-
-  .button {
-    background: transparent;
   }
+}
 
-  textarea {
+label {
-    height: 7.5em; // TODO
+  margin-bottom: 1rem;
-    resize: none;
+}
-  }
 
-  input[type="text"],
+input[type="text"],
-  input[type="email"],
+input[type="email"],
-  textarea {
+input[type="tel"],
+textarea {
   flex-grow: 1;
   border-top: 0;
   border-right: 0;
   border-left: 0;
   border-bottom: solid 2px $black;
   padding: 0 0 1em;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: $font-family-sans-serif;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 
   &:focus {
     outline: none;
     border-bottom: solid 2px var(--accent, $brand-accent);
   }
+}
+
+textarea {
+  height: 7.5em;
+  resize: none;
+}
+
+input[type="submit"] {
+  cursor: pointer;
+}
+
+// Contact form
+
+.contact {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: rem(65) 0 rem(120);
+  background: #f6f6f6;
+
+  h2 {
+    font-size: rem(24);
+    margin-bottom: rem(40);
   }
 }

resources/assets/styles/components/_wp-classes.scss

@@ -3,6 +3,8 @@
  * @see http://codex.wordpress.org/CSS#WordPress_Generated_Classes
  */
 
+$spacer: 2rem;
+
 /** Media alignment */
 .alignnone {
   margin-left: 0;

resources/assets/styles/layouts/_footer.scss

@@ -1,11 +1,10 @@
-.content-info {
+.network-footer {
-  .network-footer {
   margin-bottom: 0;
   padding: 60px 42.5px 40px;
   font-family: $font-family-sans-serif;
   font-size: rem(16);
   color: var(--accent-fg, $white);
-    background: var(--accent, $brand-accent);
+  background-color: var(--accent, $brand-accent);
 
   ul {
     margin: 0;
@@ -27,24 +26,20 @@
     }
   }
 
-    .network-footer-block.empty {
+  &__block {
-      display: none;
+    border-top: solid 1px var(--accent-fg, $white);
-    }
 
-    .network-footer-block:first-of-type {
+    &:first-of-type {
       border-top: 0;
     }
-
-    .network-footer-block {
-      border-top: solid 1px var(--accent-fg, $white);
   }
 
-    .network-footer-block-1 {
+  &__block--1 {
     margin: 0 -5px;
     padding: 0 0 40px;
   }
 
-    .network-footer-block-2 {
+  &__block--2 {
     padding: 30px 7.5px;
 
     .widget {
@@ -52,11 +47,11 @@
     }
   }
 
-    .network-footer-menu {
+  &__menu {
     padding: 30px 7.5px 0;
   }
 
-    .network-footer-block .social-media {
+  &__block .social-media {
     margin-top: 0;
     width: 100%;
 
@@ -70,9 +65,9 @@
       }
     }
   }
-  }
+}
 
-  .social-media {
+.social-media {
   margin-top: 1em;
 
   a {
@@ -80,69 +75,9 @@
     margin: 0 0.25em;
     transition: all 0.4s;
   }
-  }
-
-  .pressbooks-footer {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 125px;
-    background-color: $dark-grey;
-
-    h1,
-    li,
-    a {
-      color: $white;
-      font-family: $font-family-sans-serif;
-      text-decoration: none;
-      text-transform: none;
-      letter-spacing: normal;
-    }
-
-    h1 {
-      font-size: rem(16);
-      font-weight: normal;
-      margin-bottom: 0;
-
-      .pressbooks {
-        font-weight: 600;
-      }
-    }
-
-    h1 a {
-      border-bottom: solid 1px $dark-grey;
-      transition: all 0.4s;
-
-      &:hover,
-      &:focus {
-        border-bottom: solid 1px $white;
-      }
-    }
-
-    ul {
-      display: none;
-      margin: 0;
-      font-size: rem(14);
-    }
-
-    .pressbooks-icon {
-      display: none;
-    }
-
-    .pressbooks-links {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-  }
 }
 
 @media (min-width: $medium) {
-  .content-info {
   .network-footer {
     display: flex;
     flex-direction: row;
@@ -153,22 +88,22 @@
       text-align: left;
     }
 
-      .network-footer-block {
+    &__block {
       display: flex;
       align-items: center;
       height: 142.5px;
       margin: 0;
       padding: 0 69.5px;
       border-top: 0;
-        border-right: solid 1px $white;
+      border-right: solid 1px var(--accent-fg, $white);
     }
 
-      .network-footer-block-2 {
+    &__block--2 {
       flex-direction: column;
       justify-content: center;
     }
 
-      .network-footer-block:last-of-type {
+    &__block:last-of-type {
       border-right: 0;
     }
   }
@@ -179,63 +114,9 @@
       margin: 0 0.5em 0 0;
     }
   }
-
-    .pressbooks-footer {
-      flex-direction: row;
-      justify-content: space-between;
-      height: 106.76px;
-      padding: 0 38px;
-
-      h1 {
-        font-weight: 600;
-        margin-bottom: 11px;
-      }
-
-      ul {
-        display: block;
-        list-style: none;
-
-        li {
-          display: inline-block;
-
-          &::after {
-            content: "|";
-            color: $white;
-            display: inline-block;
-            margin: 0 0.5em;
-          }
-
-          &:last-child {
-            &::after {
-              content: "";
-              display: none;
-            }
-          }
-        }
-      }
-
-      .pressbooks-icon {
-        display: block;
-        line-height: 1;
-
-        svg path {
-          fill: $white;
-        }
-      }
-
-      .social-media {
-        margin-top: 0;
-
-        a {
-          margin: 0 0 0 0.5em;
-        }
-      }
-    }
-  }
 }
 
 @media (min-width: $extra-large) {
-  .content-info {
   .network-footer {
     ul {
       li {
@@ -244,5 +125,4 @@
       }
     }
   }
-  }
 }

resources/assets/styles/layouts/_header.scss

@@ -1,10 +1,21 @@
 .banner {
+  background-position: bottom;
+  background-size: cover;
+
   .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
     height: 560px;
+    width: 100%;
+    max-width: 100%;
     max-width: 1440px;
   }
 
-  .toggle-menu {
+  .toggle {
+    display: block;
+    position: absolute;
     top: 30px;
     right: 17px;
     width: 25px;
@@ -12,7 +23,9 @@
     z-index: 99;
     text-indent: -9999em;
 
-    .icon {
+    &__icon {
+      display: block;
+      position: absolute;
       top: 7px;
       width: 25px;
       height: 3px;
@@ -39,8 +52,8 @@
       }
     }
 
-    &.is-active .icon {
+    &--active {
-      // TODO
+      .toggle__icon {
         background: var(--primary-fg, $white);
 
         &::before,
@@ -49,8 +62,11 @@
         }
       }
     }
+  }
 
-  .brand {
+  &__brand {
+    display: block;
+    align-self: flex-start;
     width: 6.5625rem;
     height: auto;
     margin: 30px 0 0 17px;
@@ -63,10 +79,18 @@
     }
   }
 
-  .primary-navigation {
+  &__navigation {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    top: 0;
+    width: 100%;
     height: 560px;
     margin: 0 0 0 -100%;
     padding: 0 17px;
+    background: transparent;
 
     a {
       display: none;
@@ -81,7 +105,7 @@
       display: none;
     }
 
-    &.is-visible {
+    &--visible {
       margin: 0;
       padding: 0 52px;
       z-index: 1;
@@ -99,8 +123,13 @@
     }
   }
 
-  .branding {
+  &__branding {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     height: 364px;
+    text-align: center;
 
     p {
       font-family: $font-family-sans-serif;
@@ -108,7 +137,7 @@
   }
 }
 
-.page:not(.home) .banner .branding {
+.page:not(.home) .banner__branding {
   display: none;
 }
 
@@ -119,17 +148,25 @@
       margin: 0 auto;
     }
 
-    .brand {
+    .toggle {
+      display: none;
+    }
+
+    &__brand {
+      align-self: center;
       width: 16.5625rem;
       height: auto;
       margin-top: 40px;
     }
 
-    .primary-navigation {
+    &__navigation {
       top: 40px;
       height: 40px;
       max-width: 1440px;
       margin: 0 auto;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
 
       a {
         display: inline-block;
@@ -157,7 +194,7 @@
       }
     }
 
-    .branding {
+    &__branding {
       height: 576px;
 
       p {

resources/assets/styles/layouts/_pages.scss

@@ -1,2 +1,87 @@
 @import 'pages/front-page';
 @import 'pages/catalog';
+
+.page {
+  .page-header {
+    h1 {
+      font-size: rem(30);
+      font-weight: 600;
+      color: var(--primary, $brand-primary);
+      letter-spacing: 2px;
+      line-height: (36/30);
+      text-transform: uppercase;
+      text-align: center;
+      margin: 0;
+      padding-top: 1rem;
+
+      &::before {
+        content: "";
+        display: block;
+        margin: 0 auto 1em;
+        width: 46px;
+        height: 5px;
+        background: var(--accent, $brand-accent);
+      }
+    }
+  }
+
+  .wrap {
+    padding: 0 rem(8);
+  }
+
+  .content {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0.78125rem;
+    display: flex;
+    height: auto;
+    min-height: rem(445);
+    background-color: $white;
+    margin: rem(-400) auto 0;
+    box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
+    text-align: center;
+
+    p {
+      font-size: rem(18);
+      line-height: (32/16);
+    }
+  }
+}
+
+@media (min-width: $medium) {
+  .page {
+    .wrap {
+      margin-top: rem(-366);
+    }
+
+    .page-header h1 {
+      font-size: rem(48);
+      line-height: (56/48);
+    }
+
+    .content {
+      width: rem(775);
+      min-height: rem(494);
+      margin: rem(-600) auto rem(119);
+      padding: 0 90px;
+
+      &:last-child {
+        margin-bottom: 4.0625rem;
+      }
+
+      p {
+        font-size: rem(18);
+        line-height: (32/18);
+      }
+    }
+  }
+}
+
+@media (min-width: $large) {
+  .page {
+    .content {
+      width: rem(1115);
+    }
+  }
+}

resources/assets/styles/layouts/pages/_catalog.scss

@@ -196,19 +196,19 @@
       text-decoration: none;
     }
 
-    .subject {
+    &__subject {
       height: rem(44);
       font-size: rem(14);
     }
 
-    .title {
+    &__title {
       height: rem(118);
       font-size: rem(16);
       font-weight: 600;
       line-height: (20/16);
     }
 
-    .read-more {
+    &__read-more {
       font-size: rem(14);
     }
   }
@@ -320,19 +320,19 @@
       margin: 0 percent(15, 735) 2rem 0;
       padding: 0 rem(14) rem(21.35);
 
-      .subject {
+      &__subject {
         height: rem(45.85);
         font-size: rem(18);
       }
 
-      .title {
+      &__title {
         height: rem(147.65);
         font-size: rem(22);
         font-weight: 600;
         line-height: (40/30);
       }
 
-      .read-more {
+      &__read-more {
         font-size: rem(16);
       }
     }
@@ -470,19 +470,19 @@
       margin: 0 0 2rem percent(39.5, 1221.5);
       padding: 1.5rem 1.85rem 2.1875rem;
 
-      .subject {
+      &__subject {
         height: 4.625rem;
         font-size: rem(24);
       }
 
-      .title {
+      &__title {
         height: 13rem;
         font-size: rem(30);
         font-weight: 500;
         line-height: (40/30);
       }
 
-      .read-more {
+      &__read-more {
         font-size: rem(18);
       }
     }

resources/assets/styles/layouts/pages/_front-page.scss

@@ -89,27 +89,6 @@
     }
   }
 
-  .block,
-  .latest-books {
-    h3 {
-      font-size: rem(30);
-      font-weight: 600;
-      color: var(--primary, $brand-primary);
-      letter-spacing: 2px;
-      line-height: (36/30);
-      margin: 0;
-
-      &::before {
-        content: "";
-        display: block;
-        margin: 0 auto 1em;
-        width: 46px;
-        height: 5px;
-        background: var(--accent, $brand-accent);
-      }
-    }
-  }
-
   .latest-books {
     height: auto;
     padding: 0 0 rem(154);
@@ -165,14 +144,14 @@
         text-align: center;
       }
 
-      .subject {
+      &__subject {
         height: 4.625rem;
         margin: 0;
         font-size: rem(24);
         text-align: center;
       }
 
-      .title {
+      &__title {
         height: 13rem;
         margin: 0;
         font-size: rem(30);
@@ -181,7 +160,7 @@
         text-align: left;
       }
 
-      .read-more {
+      &__read-more {
         margin: 0;
         font-size: rem(18);
         text-align: left;
@@ -238,15 +217,6 @@
         margin-bottom: 4.0625rem;
       }
 
-      h3 {
-        font-size: rem(48);
-        line-height: (56/48);
-
-        &::before {
-          width: 74px;
-        }
-      }
-
       p {
         font-size: rem(18);
         line-height: (32/18);
@@ -370,7 +340,7 @@
 @media (min-width: $extra-large) {
   .home {
     .block {
-      width: 1115px;
+      width: rem(1115);
       box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
     }
 

resources/assets/styles/main.scss

@@ -6,12 +6,10 @@
  * Prefix your imports with `~` to grab from node_modules/
  * @see https://github.com/webpack-contrib/sass-loader#imports
  */
-@import "~tachyons-sass/tachyons";
+@import '~aetna/assets/styles/aetna.scss';
 
 /** Import theme styles */
-@import "common/functions";
 @import "common/global";
-@import "components/buttons";
 @import "components/comments";
 @import "components/forms";
 @import "components/grid";

resources/views/front-page.blade.php

@@ -5,7 +5,7 @@
   @if(is_active_sidebar('front-page-block'))
     @php(dynamic_sidebar('front-page-block'))
   @else
-    @component('front-page-block')
+    @component('page-block')
       @slot('title')
         {{ __('About Pressbooks', 'aldine') }}
       @endslot

resources/views/partials/book.blade.php

@@ -4,14 +4,14 @@
   data-subject="{{ sanitize_title(@$book['metadata']['keywords']) }}"
 >
   @if(isset($book['metadata']['keywords']))
-  <p class="subject">
+  <p class="book__subject">
     <a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
   </p>
   @endif
-  <p class="title">
+  <p class="book__title">
     <a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
   </p>
-  <p class="read-more">
+  <p class="book__read-more">
     <a href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
   </p>
 </div>

resources/views/partials/contact-form.blade.php

@@ -1,22 +1,22 @@
-<section class="contact flex flex-column justify-center items-center w-100" id="contact">
+<section class="contact" id="contact">
-  <h3 class="tc ttu">{{ $contact_form_title }}</h3>
+  <h2>{{ $contact_form_title }}</h2>
-  <form action="{{ network_home_url('/#contact') }}" method="post">
+  <form class="form" action="{{ network_home_url('/#contact') }}" method="post">
     @if($contact_form_response)
-      <p class="tl mb4 w-100 {{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
+    <p class="form__notice form__notice--{{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
     @endif
     <input type="hidden" name="submitted" value="1">
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_name'){{ 'error' }}@endif">
+    <p class="form__row @if(@$contact_form_response['field'] === 'visitor_name'){{ 'form__row--error' }}@endif">
       <label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label>
-      <input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
+      <input type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif">
+    <p class="form__row @if(@$contact_form_response['field'] === 'visitor_email'){{ 'form__row--error' }}@endif">
       <label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label>
-      <input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
+      <input type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif">
+    <p class="form__row @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'form__row--error' }}@endif">
       <label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label>
-      <input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
+      <input type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
-    <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif">
+    <p class="form__row @if(@$contact_form_response['field'] === 'message'){{ 'form__row--error' }}@endif">
       <label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label>
-      <textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
+      <textarea type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
-    <p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
+    <p class="form__row"><input class="button button--small button--outline" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
   </form>
 </section>

resources/views/partials/footer.blade.php

@@ -1,15 +1,15 @@
-<footer class="content-info">
+<footer class="footer">
   <div class="container">
     @if(get_option('pb_network_contact_form'))
       @include('partials.contact-form')
     @endif
     <section class="network-footer">
-      <div class="network-footer-block {{ App::networkFooter(1) }}">
+      <div class="network-footer__block {{ App::networkFooter(1) }}">
         @if(App::networkFooter(1) !== 'empty')
             @php(dynamic_sidebar('network-footer-block-1'))
         @endif
       </div>
-      <div class="network-footer-block {{ App::networkFooter(2) }}">
+      <div class="network-footer__block {{ App::networkFooter(2) }}">
         @if(App::networkFooter(2) !== 'empty')
           @php(dynamic_sidebar('network-footer-block-2'))
         @endif
@@ -26,13 +26,13 @@
           @endif
         </div>
       </div>
-      <div class="network-footer-block network-footer-menu">
+      <div class="network-footer__block network-footer__menu">
         @php(wp_nav_menu('network-footer-menu'))
       </div>
     </section>
     <section class="pressbooks-footer">
-      <a class="pressbooks-icon" href="https://pressbooks.com" title="Pressbooks">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/pb.svg'))</a>
+      <a class="pressbooks-footer__icon" href="https://pressbooks.com" title="Pressbooks">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/pb.svg'))</a>
-      <div class="pressbooks-links">
+      <div class="pressbooks-footer__links">
         <h1><a href="https://pressbooks.com">{!! sprintf(__('Powered by %s', 'aldine'), '<span class="pressbooks">Pressbooks</span>') !!}</a></h1>
         <ul>
           <li><a href="https://pressbooks.org">{{ __('Open Source', 'aldine') }}</a></li>
@@ -41,11 +41,11 @@
           <li><a href="https://pressbooks.com/about">{{ __('Learn More', 'aldine') }}</a></li>
         </ul>
       </div>
-      <div class="social-media">
+      <div class="pressbooks-footer__social">
-        <a class="link hover-silver near-black dib h1 w1" href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}">
+        <a 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') }}">
+        <a 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>

resources/views/partials/header.blade.php

@@ -1,12 +1,12 @@
-<section class="banner bg-bottom cover" style="background-image: url(@if(is_front_page())
+<section class="banner" style="background-image: url(@if(is_front_page())
   @php(header_image())
 @else
   @asset('images/catalog-header.jpg')
 @endif);">
-  <div class="container flex flex-column justify-between items-center w-100 mw-100">
+  <div class="container">
-    <a class="toggle-menu db dn-l absolute" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon db absolute"></span></a>
+    <a class="toggle" href="#navigation">{{ __('Toggle menu', 'aldine') }}<span class="toggle__icon"></span></a>
-    <a class="brand db self-start self-center-l" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>
+    <a class="banner__brand" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</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">
+    <nav class="banner__navigation" id="navigation">
         <a href="{{ home_url('/catalog') }}">Catalog</a>
         <a href="#contact">Contact</a>
         @if(!is_user_logged_in())
@@ -19,7 +19,7 @@
           <a href="{{ wp_logout_url() }}">{{ __('Sign out', 'aldine') }}</a>
         @endif
     </nav>
-    <header class="branding flex flex-column justify-start items-center tc">
+    <header class="banner__branding">
       <h1><a href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a></h1>
       <p>{{ get_bloginfo('description', 'display') }}</p>
     </header>

yarn.lock

@@ -63,6 +63,12 @@ adjust-sourcemap-loader@^1.1.0:
     object-path "^0.9.2"
     regex-parser "^2.2.1"
 
+"aetna@github:pressbooks/aetna#825dc3e":
+  version "0.1.0"
+  resolved "https://codeload.github.com/pressbooks/aetna/tar.gz/825dc3e585b98b72c7d47d883afa56f2a4d4b810"
+  dependencies:
+    tachyons-sass "~4.8"
+
 after@0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
@@ -6869,13 +6875,13 @@ table@^4.0.1:
     slice-ansi "0.0.4"
     string-width "^2.0.0"
 
-tachyons-sass@~4.7:
+tachyons-sass@~4.8:
-  version "4.7.4"
+  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/tachyons-sass/-/tachyons-sass-4.7.4.tgz#47199472f444f1451692ec4509c5da700569ea57"
+  resolved "https://registry.yarnpkg.com/tachyons-sass/-/tachyons-sass-4.8.1.tgz#5e7b85eb8a1e3cccf45acdff09e97f4ad1844d59"
   dependencies:
-    tachyons "^4.7.4"
+    tachyons "^4.8.1"
 
-tachyons@^4.7.4:
+tachyons@^4.8.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/tachyons/-/tachyons-4.8.1.tgz#9a3183feecb3240c4dcefee7feecc8259acd7381"