bookends 9.1.0.pre1 → 10.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 31b03895a78d33269f8326ba465092fb250384ce
-  data.tar.gz: d9accc5cafff04f9ed736ceb28cd9f6d55f5e625
+  metadata.gz: 32dca044f06f46fe94525c2471caaabf7eef1ca6
+  data.tar.gz: a70a836b5cc553b79fb528b487cd2ac2a51598ca
 SHA512:
-  metadata.gz: 38abeb958b8231674dc73b9cb8bf939d5798703825c0a24598346d13a5a020ba87812aacda6da4ad487007f013837ca23953eed7ea365f63458f27a47db45b3e
-  data.tar.gz: 5c06628946658f8ce3122079ad687805209bb9e8df4e07d1a43584d795162eca58f89eceb16ebe3e9895a0f46aa8138e47aa453037029cf6dcff65e9a0f18124
+  metadata.gz: 1752930c6c711ff718787fefa4a6a4532dd4dc78889415f0e493d902aadf48e71806a76aec4b5f5ae9182105e383977fff29dd4c8db539df7418b991fba42553
+  data.tar.gz: b88c30fa5bceb4ff0ebd842fe45854a70b3a176f67eecf3f0be2f54a5d8496d2b4d37814f676e082402ae1f2a4556c3dbc621f405900596e2ea0aa70cf90e06d

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

@@ -1,20 +1,8 @@
-*,
-*:after,
-*:before {
-  box-sizing: border-box;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
+#header {
   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

@@ -50,13 +50,16 @@ $grad-purple: #58488a;
 $grad-purple-blue: #5d64d0;
 
 @mixin grad-purple() {
-  @include linear-gradient(to bottom, $grad-purple, $grad-purple-blue, $fallback: $grad-purple);
+  background-color: $grad-purple;
+  background-image: linear-gradient(to bottom, $grad-purple, $grad-purple-blue);
 }
 
 @mixin grad-purple-dark() {
-  @include linear-gradient(to bottom, #4A4090, #372E6C, $fallback: #4A4090);
+  background-color: #4A4090;
+  background-image: linear-gradient(to bottom, #4A4090, #372E6C);
 }
 
 @mixin grad-gray-light() {
-  @include linear-gradient(top, fade-out($gray-light-3, .5), $white 50%, $fallback: $white);
+  background-color: $white;
+  background-image: linear-gradient(top, fade-out($gray-light-3, .5), $white 50%);
 }

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

@@ -2,11 +2,37 @@
 // Fonts
 // ==========================================================================
 
-//- Primary font
-@include font-face(BentonSans, 'bentonsans-book', $font-light, $asset-pipeline: true, $file-formats: eot woff ttf svg);
-@include font-face(BentonSans, 'bentonsans-regular', $font-normal, $asset-pipeline: true, $file-formats: eot woff ttf svg);
-@include font-face(BentonSans, 'bentonsans-medium', $font-bold, $asset-pipeline: true, $file-formats: eot woff ttf svg);
-
-//- Monospace font
-@include font-face(Inconsolata, 'inconsolata-regular', $font-normal, $asset-pipeline: true, $file-formats: eot woff ttf svg);
-@include font-face(Inconsolata, 'inconsolata-bold', $font-bold, $asset-pipeline: true, $file-formats: eot woff ttf svg);
+@font-face {
+  font-family: BentonSans;
+  font-weight: $font-light;
+  src: font-url("bentonsans-book.woff2") format("woff2"),
+       url("bentonsans-book.woff") format("woff");
+}
+
+@font-face {
+  font-family: BentonSans;
+  font-weight: $font-normal;
+  src: font-url("bentonsans-regular.woff2") format("woff2"),
+       url("bentonsans-regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: BentonSans;
+  font-weight: $font-bold;
+  src: font-url("bentonsans-medium.woff2") format("woff2"),
+       url("bentonsans-medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: Inconsolata;
+  font-weight: $font-normal;
+  src: font-url("inconsolata-regular.woff2") format("woff2"),
+       url("inconsolata-regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: Inconsolata;
+  font-weight: $font-bold;
+  src: font-url("inconsolata-bold.woff2") format("woff2"),
+       url("inconsolata-bold.woff") format("woff");
+}

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

@@ -22,12 +22,13 @@
   $threshold-tablet: 900px;
   $threshold-mobile: 700px;
 
-  @mixin hidpi($ratio: 1.3) {
-    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
-    only screen and (min--moz-device-pixel-ratio: $ratio),
-    only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
-    only screen and (min-resolution: #{round($ratio*96)}dpi),
-    only screen and (min-resolution: #{$ratio}dppx) {
+  @mixin hidpi() {
+    @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
+    only screen and ( min--moz-device-pixel-ratio: 1.25),
+    only screen and ( -o-min-device-pixel-ratio: 1.25/1),
+    only screen and ( min-device-pixel-ratio: 1.25),
+    only screen and ( min-resolution: 200dpi),
+    only screen and ( min-resolution: 1.25dppx) {
       @content;
     }
   }
@@ -67,11 +68,11 @@
   -webkit-font-smoothing: antialiased;
 
   * {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
   }
 
   .wrapper {
-    @include clearfix();
+    @include clearfix;
     position: relative;
     width: $footer-width;
     max-width: $footer-max-width;
@@ -165,7 +166,7 @@
   }
 
   .heroku-footer-links {
-    @include clearfix();
+    @include clearfix;
     width: 70%;
 
     .col {
@@ -217,7 +218,6 @@
         border: 1px solid $color-border;
         box-shadow: 0 0 4px fade-out($color-purple, 1);
         transition: all .2s ease;
-        -webkit-transition: all .2s ease;
 
         &:focus {
           outline: none;
@@ -430,7 +430,7 @@
         visibility: visible;
         opacity: 1;
         margin-top: 3px;
-        @include transition-delay(0s);
+        transition-delay: 0s;
       }
     }
 
@@ -465,7 +465,7 @@
     // Transition
     visibility: hidden;
     opacity: 0;
-    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s);
+    transition: visibility 0s 0.15s, opacity 0.15s, margin-top .15s;
 
     ul {
       margin: .5em 0 0;

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

@@ -76,7 +76,7 @@ $gs-asset-path: 'bookends/glostick_icons';
     visibility: visible;
     opacity: 1;
     margin-top: 3px;
-    @include transition-delay(0s);
+    transition-delay: 0s;
   }
 }
 
@@ -89,7 +89,7 @@ $gs-asset-path: 'bookends/glostick_icons';
       visibility: visible;
       opacity: 1;
       margin-top: 3px;
-      @include transition-delay(0s);
+      transition-delay: 0s;
     }
   }
 

data/app/assets/stylesheets/bookends/_google-cse.scss

@@ -129,7 +129,7 @@ input.gsc-input,
     border: 1px solid #DDD !important;
     border-radius: 4px !important;
     box-shadow: none !important;
-    @include transition(all .15s linear);
+    transition: all .15s linear;
     box-shadow: 0 0 25px fade-out($purple, 1) !important;
     input.gsc-input {
       color: #777 !important;
@@ -151,10 +151,8 @@ input.gsc-input,
     width: 22px;
     height: 21px;
     opacity: .8;
-    @include retina-image(
-      components/search-sprite-large,
-      42px 42px,
-      $asset-pipeline: true);
+    background-image: image-url('bookends/components/search-sprite-large_2x.png');
+    background-size: 44px 42px;
     &:hover {
       opacity: 1;
     }
@@ -220,7 +218,7 @@ input.gsc-input,
     min-width: 75px !important;
     border-radius: 0 !important;
     font-weight: $font-light !important;
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     &:hover, &:focus {
       background: transparent !important;
       color: $purple !important;
@@ -263,7 +261,11 @@ input.gsc-input,
     position: absolute;
     left: -12px;
     top: 5px;
-    @include triangle(12px, $purple, right);
+    height: 0;
+    width: 0;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid $purple;
+    border-top: 6px solid transparent;
   }
   &:hover {
     text-decoration: none !important;

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

@@ -1,18 +1,11 @@
 // ==========================================================================
-// Grid settings for Neat
+// Grid settings
 // ==========================================================================
 
-@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;
+$mobile: $bp-xs;                             // 480px
+$mobile-landscape: $bp-sm;                   // 600px
+$tablet: $bp-med;                            // 768px
+$tablet-landscape: $bp-med-plus;             // 1024px
+$desktop: $bp-lg;                            // 1100px
+$large-screen: $bp-xl;                       // 1400px

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

@@ -10,8 +10,6 @@
 // - Hero
 
 .wrapper-full {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 auto;
   max-width: 66.25em;
@@ -30,8 +28,7 @@
 
 #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-image: radial-gradient(circle at 50% top, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%), radial-gradient(circle at right top, 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
@@ -57,7 +54,7 @@
   line-height: 1;
 
   * {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
   }
 
   ul {
@@ -72,7 +69,7 @@
     padding: 0 10px;
     line-height: 1.4;
 
-    @include media($desktop) {
+    @media screen and (max-width: $desktop) {
       float: none;
       padding: 0;
     }
@@ -118,7 +115,8 @@
         display: inline-block;
         position: relative;
         top: -1px;
-        @include size(10px 6px);
+        width: 10px; 
+        height: 6px;
         margin-left: 5px;
         background-image: asset-url('nav-dropdown-caret.svg');
         background-repeat: no-repeat;
@@ -157,7 +155,7 @@
         visibility: visible;
         opacity: 1;
         margin-top: 3px;
-        @include transition-delay(0s);
+        transition-delay: 0s;
       }
     }
 
@@ -180,7 +178,8 @@
             display: inline-block;
             position: relative;
             top: 1px;
-            @include size(6px 10px);
+            width: 6px;
+            height: 10px;
             margin-left: 7px;
             background-image: asset-url('nav-flyout-caret.svg');
             background-repeat: no-repeat;
@@ -224,7 +223,7 @@
     &[class*="glostick"] {
       padding: 0;
 
-      @include media($desktop) {
+      @media screen and (max-width: $desktop) {
         display: none;
       }
     }
@@ -243,7 +242,7 @@
     // Transition
     visibility: hidden;
     opacity: 0;
-    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s, left .15s);
+    transition: visibility 0s 0.15s, opacity 0.15s, margin-top .15s, left .15s;
 
     li a {
       color: #444;
@@ -360,7 +359,7 @@
         margin: 0;
         padding: 0 $dropdown-padding;
 
-        @include media($tablet) {
+        @media screen and (max-width: $tablet) {
           float: none;
           height: auto;
           padding: 0;
@@ -377,7 +376,7 @@
       .more-heroku-is {
         width: 20%;
 
-        @include media($tablet) {
+        @media screen and (max-width: $tablet) {
           width: 100%;
         }
       }
@@ -385,7 +384,7 @@
       .more-languages {
         width: 15%;
 
-        @include media($tablet) {
+        @media screen and (max-width: $tablet) {
           width: 100%;
         }
       }
@@ -399,7 +398,7 @@
           margin-bottom: 10px;
         }
 
-        @include media($tablet) {
+        @media screen and (max-width: $tablet) {
           width: 100%;
           a:last-child {
             color: #926BC6;
@@ -485,7 +484,7 @@
     margin: 7px 0 0 15px;
   }
 
-  @include media($desktop) {
+  @media screen and (max-width: $desktop) {
     .nav-more {
       display: none;
     }
@@ -545,7 +544,7 @@
 
 
   .nav-wrapper {
-    @include media($desktop) {
+    @media screen and (max-width: $desktop) {
       display: none;
       overflow: auto;
     }
@@ -574,7 +573,8 @@
         left: 0;
         height: 100px;
         z-index: 0;
-        @include linear-gradient($nav-wrapper-bg 50%, fade-out($nav-wrapper-bg, 1) 100%, $fallback: transparent);
+        background-color: transparent;
+        background-image: linear-gradient($nav-wrapper-bg 50%, fade-out($nav-wrapper-bg, 1) 100%);
       }
     }
 
@@ -585,7 +585,7 @@
       left: 20px;
 
       a {
-        @include media($bp-sm) {
+        @media screen and (max-width: $mobile-landscape) {
           overflow: hidden;
           width: 40px;
         }
@@ -600,7 +600,7 @@
       margin: 0;
       z-index: -1;
 
-      @include media($bp-sm) {
+      @media screen and (max-width: $mobile-landscape) {
         padding: 100px 20px;
       }
 
@@ -612,7 +612,7 @@
       right: 50px;
       margin: 8px 0 0 0;
 
-      @include media($bp-sm) {
+      @media screen and (max-width: $mobile-landscape) {
         width: 100%;
         padding-left: 150px;
       }
@@ -673,6 +673,11 @@
         .btn-default {
           background: transparent;
           color: $white;
+          box-shadow: inset 0 0 0 1px rgba(121,88,159,0.6);
+          border-radius: 3px;
+          padding: 5px 16px;
+          margin: 5px 0;
+          display: inline-block;
         }
 
         .more-blog {
@@ -760,11 +765,11 @@
         }
 
         &:nth-child(2) {
-          @include transform(rotate(45deg));
+          transform: rotate(45deg);
         }
 
         &:nth-child(3) {
-          @include transform(rotate(-45deg));
+          transform: rotate(-45deg);
         }
 
         &:nth-child(4) {
@@ -783,11 +788,11 @@
     top: 32px;
     right: 23px;
     z-index: 12;
-    @include hide-text();
+    @include hide-text;
     width: 30px;
     height: 22px;
-    @include transform(rotate(0deg));
-    @include transition(.3s ease-in-out);
+    transform: rotate(0deg);
+    transition: .3s ease-in-out;
     cursor: pointer;
 
     span {
@@ -799,8 +804,8 @@
       border-radius: 9px;
       opacity: 1;
       left: 0;
-      @include transform(rotate(0deg));
-      @include transition(.15s ease-in-out);
+      transform: rotate(0deg);
+      transition: .15s ease-in-out;
 
       &:nth-child(1) {
         top: 0px;
@@ -816,7 +821,7 @@
       }
     }
 
-    @include media($desktop) {
+    @media screen and (max-width: $desktop) {
       display: block;
     }
   }
@@ -826,14 +831,14 @@
   $search-icon-size: 14px;
 
   .site-search {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     position: relative;
     display: block;
     float: right;
     margin-top: -2px;
     margin-right: -10px;
 
-    @include media($bp-sm) {
+    @media screen and (max-width: $mobile-landscape) {
       float: none;
     }
 
@@ -848,14 +853,14 @@
         font-size: 13px !important;
         line-height: 1.35;
         font-weight: $font-light;
-        @include transition(.15s ease-in-out);
+        transition: .15s ease-in-out;
         -webkit-font-smoothing: subpixel-antialiased;
 
-        @include placeholder {
+        &::placeholder {
           color: fade-out(#fff, .5);
         }
 
-        @include media($bp-sm) {
+        @media screen and (max-width: $mobile-landscape) {
           width: 100% !important;
         }
 
@@ -867,7 +872,7 @@
           background: fade-out($white, .1) !important;
           color: #222;
 
-          @include placeholder {
+          &::placeholder {
             color: #aaa;
           }
 
@@ -909,7 +914,7 @@
       padding: 7px $search-icon-size*2 7px 10px;
       border: none;
       border-radius: $border-radius;
-      @include box-sizing(border-box);
+      box-sizing: border-box;
 
       &:focus {
         outline: 0;
@@ -919,12 +924,12 @@
 }
 
 .mobile-nav {
-  @include hide-text();
+  @include hide-text;
   width: 30px;
   height: 20px;
   position: relative;
-  @include transform(rotate(0deg));
-  @include transition(.3s ease-in-out);
+  transform: rotate(0deg);
+  transition: .3s ease-in-out;
   cursor: pointer;
 
   span {
@@ -936,8 +941,8 @@
     border-radius: 9px;
     opacity: 1;
     left: 0;
-    @include transform(rotate(0deg));
-    @include transition(.15s ease-in-out);
+    transform: rotate(0deg);
+    transition: .15s ease-in-out;
 
     &:nth-child(1) {
       top: 0px;
@@ -966,11 +971,11 @@
       }
 
       &:nth-child(2) {
-        @include transform(rotate(45deg));
+        transform: rotate(45deg);
       }
 
       &:nth-child(3) {
-        @include transform(rotate(-45deg));
+        transform: rotate(-45deg);
       }
 
       &:nth-child(4) {
@@ -990,7 +995,8 @@
 
   a {
     @include hide-text;
-    @include size(143px 40px);
+    width: 143px;
+    height: 40px;
     background-image: asset-url('logo.svg');
     display: block;
     background-repeat: no-repeat;
@@ -1006,8 +1012,7 @@
 }
 
 #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%));
+  background-image: radial-gradient(ellipse at 0% bottom, rgba(118, 72, 160, 0.7) 0%, rgba(118, 72, 160, 0) 60%), radial-gradient(ellipse at 90% bottom, rgba(82, 63, 140, 1) 0%, rgba(82, 63, 140, 0) 40%);
 
   color: lighten($purple, 30%);
   padding: 0;
@@ -1020,7 +1025,7 @@
   }
 
   .button {
-    @include background-image(linear-gradient($white, #E7E4EE));
+    background-image: linear-gradient($white, #E7E4EE);
     background-color: $white;
     color: darken($purple, 10%);
     display: inline-block;
@@ -1060,8 +1065,7 @@
 
 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-image: radial-gradient(circle at 50% top, rgba(84, 90, 182, 0.6) 0%, rgba(84, 90, 182, 0) 75%), radial-gradient(circle at right top, rgba(121, 74, 162, 1) 0%, rgba(121, 74 ,162, 0) 57%);
   background-repeat: no-repeat;
   background-size: 100% 1000px;
   color: lighten($purple, 30%);