bookends 2.8.0 → 3.0.0.beta1

data/{lib/bookends/templates/js → app/assets/javascripts}/newsletter-init.js

@@ -1,4 +1,4 @@
-//= require bookends/newsletter
+//= require newsletter
 var Heroku = Heroku || {};
 
 $(function() {

data/app/assets/stylesheets/bookends/_base.scss

@@ -0,0 +1,21 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  font-family: $font-main;
+  font-size: $font-base;
+  font-weight: $font-normal;
+  line-height: $line-height-base;
+  background: $white;
+  color: $text-color;
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+}

data/app/assets/stylesheets/bookends/_colors.scss

@@ -0,0 +1,62 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+//- Monochromatic
+$white: #fff;
+$off-white: #F9F9FB;
+$gray: #9B9FA2;
+$gray-light: #CCCDCF;
+$gray-light-2: #E4E4E7;
+$gray-light-3: #F2F2F5;
+$gray-dark: #73787C;
+$gray-dark-2: #383E40;
+$black: #111;
+
+//- Mains
+$purple: #79589F;
+$purple-light: lighten(#79589F, 20%);
+$indigo: #211746;
+$blue: #4A90E2;
+$green: #74C080;
+$orange: #FA9F47;
+$red: #D64242;
+
+//- Brand
+$brand-primary: $purple;
+$brand-info: $blue;
+$brand-success: $green;
+$brand-warning: $orange;
+$brand-danger: $red;
+
+//- Utility
+$dim: fade-out($black, .5);
+$dimmer: fade-out($black, .2);
+$error: $brand-danger;
+$valid: $brand-success;
+$info: $brand-info;
+$warning: $brand-warning;
+
+$brand-facebook: #03539e;
+$brand-twitter: #35ccff;
+$brand-linkedin: #217bc1;
+
+$text-color: $gray-dark-2;
+$text-color-light: $gray-dark;
+
+//- Gradients
+
+$grad-purple: #58488a;
+$grad-purple-blue: #5d64d0;
+
+@mixin grad-purple() {
+  @include linear-gradient(to bottom, $grad-purple, $grad-purple-blue, $fallback: $grad-purple);
+}
+
+@mixin grad-purple-dark() {
+  @include linear-gradient(to bottom, #4A4090, #372E6C, $fallback: #4A4090);
+}
+
+@mixin grad-gray-light() {
+  @include linear-gradient(top, fade-out($gray-light-3, .5), $white 50%, $fallback: $white);
+}

data/app/assets/stylesheets/bookends/_fonts.scss

@@ -0,0 +1,12 @@
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
+//- Primary font
+@include font-face(BentonSans, 'bentonsans-book', 200, $file-formats: eot woff ttf svg);
+@include font-face(BentonSans, 'bentonsans-regular', normal, $file-formats: eot woff ttf svg);
+@include font-face(BentonSans, 'bentonsans-medium', bold, $file-formats: eot woff ttf svg);
+
+//- Monospace font
+@include font-face(Inconsolata, 'inconsolata-bold', bold, $file-formats: eot woff ttf svg);
+@include font-face(Inconsolata, 'inconsolata-regular', normal, $file-formats: eot woff ttf svg);

data/{lib/bookends/templates/scss/footer.scss → app/assets/stylesheets/bookends/_footer.scss}

@@ -11,7 +11,7 @@
   $asset-path: 'bookends/footer';
 
   $footer-width: 94%;
-  $footer-max-width: 1200px;
+  $footer-max-width: 1060px;
 
   $color-header: #211746;
   $color-purple: #6e5baa;
@@ -120,7 +120,7 @@
     letter-spacing: .1em;
     color: $color-header;
 
-    @include screen($screen: $threshold-tablet) {
+    @include screen($screen: $threshold-mobile) {
       text-align: center;
     }
   }
@@ -171,7 +171,7 @@
     .col {
       width: 25%;
       padding-right: 2%;
-      @include screen($screen: $threshold-tablet) {
+      @include screen($screen: $threshold-mobile) {
          width: auto;
          padding-right: 0;
          text-align: center;
@@ -291,7 +291,7 @@
   .tertiary {
     p {
       float: right;
-      margin: 13px 0 10px;
+      margin: 1em 0;
       padding: 0;
       font-size: 13px;
       color: #999;
@@ -369,8 +369,8 @@
            facebook -42px 0,
            github -63px 0,
            vimeo -84px 0,
-           linkedin -105px 0,
            instagram -129px 0,
+           linkedin -105px 0,
            newsletter -21px -63px,
            submit 0 -42px
           );
@@ -424,15 +424,18 @@
     min-width: 200px;
     font-size: 14px;
     font-weight: normal;
-    display: block;
-    position: absolute;
-    background: #fff;
-    border-radius: 4px;
-    z-index: 3;
-    padding: $dropdown-padding/2 $dropdown-padding;
-    overflow: visible;
-    box-shadow: 0 2px 7px fade-out(#000, .825);
-    text-align: left;
+    display: none;
+
+    @include screen(min-width, $threshold-tablet) {
+      display: block;
+      position: absolute;
+      background: #fff;
+      border-radius: 4px;
+      z-index: 3;
+      padding: $dropdown-padding/2 $dropdown-padding;
+      overflow: visible;
+      box-shadow: 0 2px 7px fade-out(#000, .825);
+    }
 
     [class^="heroku-footer-icon-"] {
       margin-right: 5px;

data/app/assets/stylesheets/bookends/_grid-settings.scss

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Grid settings for Neat
+// ==========================================================================
+
+@import "neat-helpers";
+
+$default-feature: max-width;
+
+// Breakpoints
+$mobile: new-breakpoint($bp-xs);                             // 480px
+$mobile-landscape: new-breakpoint($bp-sm);                   // 600px
+$tablet: new-breakpoint($bp-med);                            // 768px
+$tablet-landscape: new-breakpoint($bp-med-plus);             // 1024px
+$desktop: new-breakpoint($bp-lg);                            // 1100px
+$large-screen: new-breakpoint($bp-xl);                       // 1400px
+
+// Standard Space
+$horizontal-spacer: 6em;

data/app/assets/stylesheets/bookends/_header.scss

@@ -0,0 +1,745 @@
+// ==========================================================================
+// Headers
+// ==========================================================================
+
+
+// Header
+//
+// - Navigation
+// - Logo
+// - Hero
+
+.wrapper-full {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 66.25em;
+  width: 93.96226%;
+  position: relative;
+  max-width: none;
+  width: 100%;
+  padding: 20px;
+
+  &:after {
+      content: "";
+      display: table;
+      clear: both;
+  }
+}
+
+#header {
+  background-color: #3B2F63;
+  @include background-image(radial-gradient(50% top, circle, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%),
+                            radial-gradient(right top, circle, rgba(121, 74, 162, 1) 0%, rgba(121, 74 ,162, 0) 57%));
+  background-repeat: no-repeat;
+  // Show only the top of the gradient when rendering
+  // a header without hero
+  background-size: 100% 1000px;
+  color: lighten($purple, 30%);
+  margin: 0;
+}
+
+#navigation {
+  $padding-nav: 20px;
+  $padding-nav-inner: 7px;
+  $color-link: #F2EEFF;
+  $font-size: 14px;
+  $font-size-sm: (($font-size / 1px) - 1) + px;
+  $font-size-xs: (($font-size / 1px) - 2) + px;
+  $dropdown-padding: 16px;
+
+  position: relative;
+  font-size: 14px;
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
+
+  * {
+    @include box-sizing(border-box);
+  }
+
+  ul {
+    position: relative;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    float: left;
+    margin: 0;
+    padding: 0 10px;
+
+    @include media($desktop) {
+      float: none;
+      padding: 0;
+    }
+
+    a {
+      text-decoration: none;
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    > a {
+      display: inline-block;
+      padding: $padding-nav-inner 0;
+      text-decoration: none;
+      color: fade-out($color-link, .4);
+
+      &:hover {
+        color: $white;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+
+      &.highlight {
+        background: fade-out(black, .8);
+        border-radius: $border-radius;
+        color: $white;
+        padding: 6px 12px;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+  }
+
+  .has-dropdown {
+
+    > a {
+
+      //Caret
+      &:after {
+        content: "";
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        @include size(10px 6px);
+        margin-left: 5px;
+        background-image: asset-url('nav-dropdown-caret.svg');
+        background-repeat: no-repeat;
+        opacity: .5;
+      }
+    }
+
+    &[class*="glostick"] {
+
+      a:after {
+        display: none;
+      }
+    }
+
+    //Dropdown hover
+    &:hover {
+
+      .dropdown {
+        visibility: visible;
+        opacity: 1;
+        margin-top: 3px;
+        @include transition-delay(0s);
+      }
+
+      > a {
+        color: $white;
+
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+
+  }
+
+  .dropdown {
+    margin-top: 0;
+    font-size: $font-sm;
+    min-width: 200px;
+    font-size: 14px;
+    font-weight: normal;
+
+    @media screen and (min-width: $bp-lg) {
+      position: absolute;
+      background: $white;
+      border-radius: $border-radius;
+      z-index: 3;
+      padding: $dropdown-padding/2 $dropdown-padding;
+      overflow: visible;
+      box-shadow: 0 2px 7px fade-out($black, .825);
+    }
+
+    &[class*="glostick"] {
+      padding: 0;
+
+      @include media($desktop) {
+        display: none;
+      }
+    }
+
+    // Hit area
+    &:after {
+      content: "";
+      position: absolute;
+      top: -3px;
+      left: 0;
+      background: transparent;
+      height: 3px;
+      width: 100%;
+    }
+
+    // Transition
+    visibility: hidden;
+    opacity: 0;
+    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s);
+
+    li a {
+      color: #444;
+      font-weight: 400;
+
+      &:hover {
+        color: $purple;
+      }
+
+      &.bookends-icon:before {
+        background-repeat: no-repeat;
+        opacity: .9;
+        content: '';
+        display: inline-block;
+        height: 24px;
+        width: 24px;
+        vertical-align: middle;
+        margin-right: 8px;
+        position: relative;
+        top: -2px;
+      }
+
+      &.elements:before {
+        background-image: asset-url('bookends/icons/elements-information.svg');
+      }
+      &.addons:before {
+        background-image: asset-url('bookends/icons/addons.svg');
+      }
+      &.buttons:before {
+        background-image: asset-url('bookends/icons/buttons.svg');
+      }
+      &.buildpacks:before {
+        background-image: asset-url('bookends/icons/buildpacks.svg');
+      }
+      &.platform:before {
+        background-image: asset-url('bookends/icons/platform.svg');
+      }
+      &.postgres:before {
+        background-image: asset-url('bookends/icons/postgres.svg');
+      }
+      &.redis:before {
+          background-image: asset-url('bookends/icons/redis.svg');
+      }
+      &.connect:before {
+        background-image: asset-url('bookends/icons/connect.svg');
+      }
+      &.enterprise:before {
+        background-image: asset-url('bookends/icons/enterprise.svg');
+      }
+      &.teams:before {
+        background-image: asset-url('bookends/icons/teams.svg');
+      }
+    }
+
+    p a {
+      color: #222;
+    }
+
+    &.more {
+      width: 160%;
+      max-width: 160%;
+      position: absolute;
+      left: 0;
+      right: 0;
+      display: block;
+      padding: $dropdown-padding/2 0 $dropdown-padding 0;
+
+      .more-title {
+        color: #999;
+        display: block;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        margin: 12px 0 $dropdown-padding/2;
+        padding-bottom: ceil($dropdown-padding/1.5);
+        border-bottom: 1px solid #ddd;
+      }
+
+      section {
+        display: inline-block;
+        float: left;
+        height: 100%;
+        margin: 0;
+        padding: 0 $dropdown-padding;
+
+        @include media($tablet) {
+          float: none;
+          height: auto;
+          padding: 0;
+          margin: 12px 0;
+        }
+
+        > ul {
+          padding-left: 1px;
+          padding-right: 1px;
+        }
+      }
+
+      .more-resources,
+      .more-languages {
+        width: 25%;
+
+        @include media($tablet) {
+          width: 100%;
+        }
+      }
+
+      .more-blog {
+        width: 50%;
+
+        @include media($tablet) {
+          width: 100%;
+        }
+
+        a {
+          color: $purple;
+        }
+
+        h3 {
+          margin-top: 13px;
+          margin-bottom: 2px;
+          padding: 0;
+          font-size: 16px;
+          line-height: 1.4em;
+          text-align: left;
+        }
+
+        p {
+          font-size: $font-sm;
+          line-height: 1.4;
+          color: #333;
+          font-weight: 500;
+
+          a {
+            color: #333;
+            font-weight: 600;
+
+            &:hover {
+              color: $purple;
+            }
+          }
+        }
+
+        .blog-date {
+          margin: 1px 0;
+          color: #888;
+          font-size: $font-xs;
+        }
+      }
+
+      .btn-inline {
+        margin: 5px 0;
+        font-size: $font-xs;
+        padding-left: 1.5em;
+        padding-right: 1.5em;
+      }
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    li {
+      float: none;
+      $white-space: nowrap;
+      padding: 0;
+    }
+
+  }
+
+  .main-nav {
+    float: left;
+    margin: 7px 0 0 15px;
+  }
+
+  @include media($desktop) {
+    .nav-more {
+      display: none;
+    }
+  }
+
+  .tool-nav {
+    float: right;
+    margin: ($padding-nav-inner + 1) 0 0 0;
+
+    li {
+      font-size: $font-sm;
+      padding: 0 ceil($padding-nav-inner/2);
+      margin: 0 10px;
+      &:last-child {
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  .user {
+
+    li {
+      font-size: $font-base;
+    }
+
+    > span {
+      color: lighten($purple, 10%);
+      color: fade-out($white, .8);
+      margin: 0 .2em;
+    }
+
+    &.logged-in {
+      > a:first-child {
+        margin-right: 12px;
+      }
+    }
+  }
+
+
+
+  .nav-wrapper {
+    @include media($desktop) {
+      display: none;
+      overflow: auto;
+    }
+  }
+
+  &.active {
+
+    .nav-wrapper {
+
+      $nav-wrapper-bg: fade-out(darken($purple, 45%), .05);
+
+      display: block;
+      position: fixed;
+      z-index: 11;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: $nav-wrapper-bg;
+
+      &:before {
+        content: "";
+        width: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100px;
+        z-index: 0;
+        @include linear-gradient($nav-wrapper-bg 50%, fade-out($nav-wrapper-bg, 1) 100%, $fallback: transparent);
+      }
+    }
+
+    #logo {
+      position: fixed;
+      z-index: 12;
+
+      a {
+        @include media($bp-sm) {
+          overflow: hidden;
+          width: 40px;
+        }
+      }
+    }
+
+    .main-nav {
+      position: relative;
+      width: 100%;
+      padding: 100px 40px;
+      font-size: 1.5em;
+      margin: 0;
+      z-index: -1;
+
+      @include media($bp-sm) {
+        padding: 100px 20px;
+      }
+
+    }
+
+    .tool-nav {
+      position: fixed;
+      top: 20px;
+      right: 50px;
+      margin: 8px 0 0 0;
+
+      @include media($bp-sm) {
+        width: 100%;
+        padding-left: 150px;
+      }
+
+      li {
+        float: left;
+        margin: 0 16px 0 0;
+        padding: 0;
+
+      }
+
+    }
+
+    .glostick__menu-icon:first-child {
+      display: none;
+    }
+
+    .site-search {
+      margin-right: 0;
+    }
+
+    .dropdown {
+      margin-top: 8px;
+      margin-bottom: 16px;
+      visibility: visible;
+      opacity: 1;
+      width: 100%;
+
+      li {
+        display: block;
+        font-size: 1.25em;
+
+        a {
+          color: fade-out($white, .2);
+          font-weight: 500;
+
+          &:hover {
+            color: $blue;
+          }
+        }
+      }
+
+      &.more {
+        margin-top: 35px;
+        text-align: left;
+        position: relative;
+
+        section {
+          padding: 0 16px 0 0;
+        }
+
+        .more-title {
+          color: $purple;
+          border-bottom: 1px solid $purple;
+        }
+
+        .btn-default {
+          background: transparent;
+          color: $white;
+        }
+
+        .more-blog {
+
+          h3,
+          h3 a {
+            color: $white;
+          }
+
+          p {
+            color: fade-out($white, .2);
+
+            a {
+              color: $white;
+            }
+          }
+        }
+      }
+
+    }
+
+
+    li {
+
+      &.has-dropdown {
+
+        .dropdown {
+          margin-top: 8px;
+          margin-bottom: 16px;
+          margin-left: 0;
+
+          &.more {
+            margin-bottom: 0;
+          }
+        }
+
+        > a {
+          &:after {
+            display: none;
+          }
+        }
+      }
+
+      > a {
+        color: fade-out($white, .1);
+
+        &:hover {
+          color: $white;
+        }
+
+        &.highlight {
+          background: $purple;
+          padding: 9px 12px;
+        }
+      }
+
+      .more-link {
+        display: none;
+      }
+    }
+
+    .mobile-nav {
+      position: fixed;
+    }
+
+  }
+
+  .mobile-nav {
+    display: none;
+    position: absolute;
+    top: 32px;
+    right: 23px;
+    z-index: 12;
+
+    @include media($desktop) {
+      display: block;
+    }
+  }
+
+  .site-search {
+    position: relative;
+    display: block;
+    float: right;
+    margin-top: -2px;
+    margin-right: -10px;
+
+    @include media($bp-sm) {
+      float: none;
+    }
+
+    .gsc-input input.gsc-input {
+      width: 145px !important;
+      background: fade-out($white, .9) !important;
+      color: $white;
+      color: fade-out($white, .5);
+      font-size: 13px !important;
+      @include transition(.15s ease-in-out);
+      -webkit-font-smoothing: subpixel-antialiased;
+
+      @include media($bp-sm) {
+        width: 100% !important;
+      }
+
+      &:hover {
+        box-shadow: 0;
+      }
+
+      &:focus {
+        background: fade-out($white, .1) !important;
+        color: #222;
+      }
+    }
+
+    .gsc-search-button {
+      // Temporary
+      input {
+        display: none;
+      }
+    }
+  }
+}
+
+#logo {
+  float: left;
+  font-size: 1em;
+  margin: 0;
+
+  a {
+    @include hide-text;
+    @include size(143px 40px);
+    background-image: url(logo.svg);
+    display: block;
+    background-repeat: no-repeat;
+  }
+}
+
+.prop-label {
+  display: block;
+  float: left;
+  padding: .7em 0 0 .8em;
+  font-size: 1.25em;
+  font-weight: 400;
+}
+
+#hero {
+  @include background-image(radial-gradient(0% bottom, ellipse, rgba(118, 72, 160, 0.7) 0%, rgba(118, 72, 160, 0) 60%),
+                            radial-gradient(90% bottom, ellipse, rgba(82, 63, 140, 1) 0%, rgba(82, 63, 140, 0) 40%));
+
+  color: lighten($purple, 30%);
+  padding: 0;
+
+  .wrapper {
+    padding-bottom: 5.625em;
+    padding-top: 4em;
+    position: relative;
+  }
+
+  .button {
+    @include background-image(linear-gradient($white, #E7E4EE));
+    background-color: $white;
+    color: darken($purple, 10%);
+    display: inline-block;
+    min-width: 240px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  .header-group {
+    margin: 0;
+  }
+
+  h1 {
+    color: $white;
+  }
+
+  h2, h3, h4, h5 {
+    color: $purple-light;
+
+    &.white {
+      color: $white;
+    }
+  }
+
+  h4, h5 {
+    font-weight: $font-normal;
+  }
+}
+
+body.purple {
+  background-color: #3B2F63;
+  @include background-image(radial-gradient(50% top, circle, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%),
+                            radial-gradient(right top, circle, rgba(121, 74, 162, 1) 0%, rgba(121, 74 ,162, 0) 57%));
+  background-repeat: no-repeat;
+  background-size: 100% 1000px;
+  color: lighten($purple, 30%);
+  margin: 0;
+  padding: 0;
+
+  #header {
+    background: transparent;
+  }
+
+  .page-content {
+    background: transparent;
+  }
+}