Add pages (closes #18).

app/controllers/App.php

@@ -43,7 +43,7 @@ class App extends Controller
                 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()

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",

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.8",
     "wpapi": "^1.1.2"
   }
 }

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,99 +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(30);
-  font-weight: 600;
-  color: var(--primary, $brand-primary);
-  letter-spacing: 2px;
-  line-height: (36/30);
-  text-transform: uppercase;
-  text-align: center;
-  margin: 0;
-
-  &::before {
-    content: "";
-    display: block;
-    margin: 0 auto 1em;
-    width: 46px;
-    height: 5px;
-    background: var(--accent, $brand-accent);
-  }
-}
-
-: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);
-}
-
-@media (min-width: $medium) {
-  h2 {
-    font-size: rem(48);
-    line-height: (56/48);
-
-    &::before {
-      width: 74px;
-    }
-  }
-}

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: transparent;
-    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/_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,247 +1,127 @@
-.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);
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      text-align: center;
-      font-weight: 600;
-      line-height: (36/16);
-    }
+.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-color: var(--accent, $brand-accent);
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-align: center;
+    font-weight: 600;
+    line-height: (36/16);
+  }
 
-    a {
-      color: var(--accent-fg, $white);
-      text-decoration: none;
-      border-bottom: solid 1px transparent;
+  a {
+    color: var(--accent-fg, $white);
+    text-decoration: none;
+    border-bottom: solid 1px transparent;
 
-      &:hover,
-      &:focus {
-        border-bottom: solid 1px var(--accent-fg, $white);
-      }
+    &:hover,
+    &:focus {
+      border-bottom: solid 1px var(--accent-fg, $white);
     }
+  }
 
-    &__block {
-      display: none;
-    }
+  &__block {
+    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 {
-      margin: 0 -5px;
-      padding: 0 0 40px;
-    }
+  &__block--1 {
+    margin: 0 -5px;
+    padding: 0 0 40px;
+  }
 
-    .network-footer-block-2 {
-      padding: 30px 7.5px;
+  &__block--2 {
+    padding: 30px 7.5px;
 
-      .widget {
-        margin-bottom: 1em;
-      }
+    .widget {
+      margin-bottom: 1em;
     }
+  }
 
-    .network-footer-menu {
-      padding: 30px 7.5px 0;
-    }
+  &__menu {
+    padding: 30px 7.5px 0;
+  }
 
-    .network-footer-block .social-media {
-      margin-top: 0;
-      width: 100%;
+  &__block .social-media {
+    margin-top: 0;
+    width: 100%;
 
-      a {
-        margin: 0 0.5em 0 0;
-        border-bottom: none;
+    a {
+      margin: 0 0.5em 0 0;
+      border-bottom: none;
 
-        &:hover,
-        &:focus {
-          border-bottom: none;
-        }
+      &:hover,
+      &:focus {
+        border-bottom: none;
       }
     }
   }
+}
 
-  .social-media {
-    margin-top: 1em;
+.social-media {
+  margin-top: 1em;
 
-    a {
-      font-size: rem(32);
-      margin: 0 0.25em;
-      transition: all 0.4s;
-    }
+  a {
+    font-size: rem(32);
+    margin: 0 0.25em;
+    transition: all 0.4s;
   }
+}
 
-  .pressbooks-footer {
+@media (min-width: $medium) {
+  .network-footer {
     display: flex;
-    position: relative;
-    flex-direction: column;
+    flex-direction: row;
     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;
+      text-align: left;
     }
 
-    .pressbooks-links {
+    &__block {
       display: flex;
-      flex-direction: column;
       align-items: center;
-      justify-content: center;
+      height: 142.5px;
+      margin: 0;
+      padding: 0 69.5px;
+      border-top: 0;
+      border-right: solid 1px var(--accent-fg, $white);
     }
-  }
-}
 
-@media (min-width: $medium) {
-  .content-info {
-    .network-footer {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
+    &__block--2 {
+      flex-direction: column;
       justify-content: center;
-
-      ul {
-        text-align: left;
-      }
-
-      .network-footer-block {
-        display: flex;
-        align-items: center;
-        height: 142.5px;
-        margin: 0;
-        padding: 0 69.5px;
-        border-top: 0;
-        border-right: solid 1px $white;
-      }
-
-      .network-footer-block-2 {
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .network-footer-block:last-of-type {
-        border-right: 0;
-      }
     }
 
-    .social-media {
-      a {
-        font-size: rem(24);
-        margin: 0 0.5em 0 0;
-      }
+    &__block:last-of-type {
+      border-right: 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;
-        }
-      }
+  .social-media {
+    a {
+      font-size: rem(24);
+      margin: 0 0.5em 0 0;
     }
   }
 }
 
 @media (min-width: $extra-large) {
-  .content-info {
-    .network-footer {
-      ul {
-        li {
-          display: inline-block;
-          margin-right: 3em;
-        }
+  .network-footer {
+    ul {
+      li {
+        display: inline-block;
+        margin-right: 3em;
       }
     }
   }

resources/assets/styles/layouts/_header.scss

@@ -137,7 +137,7 @@
   }
 }
 
-.page:not(.home) .banner .branding {
+.page:not(.home) .banner__branding {
   display: none;
 }
 

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/_front-page.scss

@@ -340,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/partials/footer.blade.php

@@ -31,8 +31,8 @@
       </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>
-      <div class="pressbooks-links">
+      <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-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">
-        <a class="link hover-silver near-black dib h1 w1" href="https://facebook.com/pressbooks2" title="{{ __('Pressbooks on Facebook', 'aldine') }}">
+      <div class="pressbooks-footer__social">
+        <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>

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"