bookends 0.6.0 → 2.0.0

data/fixtures/dummy-jekyll/_sass/_base.scss

@@ -0,0 +1,478 @@
+// https://github.com/kennethormandy/my-harp-blog/edit/master/main.less#
+
+$text-color:        #4c4c4c;
+$light-text-color:  #858585;
+$primary-color:     #6e5baa;
+$error-color:       #e65252;
+$secondary-color:   #4A90E2;
+$gray-bg:           #F6F6F6;
+$color-indigo:      #211746;
+
+$border-color:      #e1e1e1;
+$gray-border:       #EBEBEB;
+
+$faded-purple:      #8a7eb1;
+$faded-blue:        #79bbe7;
+$faded-green:       #89c061;
+
+// Mobile thresholds
+$mobile-threshold: 320px;
+$mobile-landscape-threshold: 568px;
+$mobile-max-width: 288px;
+$tablet-threshold: 768px;
+$tablet-landscape-threshold: 1024px;
+$large-screen-threshold: 2000px;
+
+$border-radius: 3px;
+
+$wrapper-width: 94%;
+$wrapper-max-width: 1060px;
+
+@import 'mixins';
+@import 'legacy';
+@import 'search';
+@import 'header';
+@import 'menu-icon';
+@import 'bookends/footer';
+
+@font-face {
+  font-family: 'proxima-nova';
+  src: url('/assets/fonts/ProximaNova/proxima_nova_reg-webfont.eot');
+  src: url('/assets/fonts/ProximaNova/proxima_nova_reg-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/assets/fonts/ProximaNova/proxima_nova_reg-webfont.woff') format('woff'),
+       url('/assets/fonts/ProximaNova/proxima_nova_reg-webfont.ttf') format('truetype'),
+       url('/assets/fonts/ProximaNova/  proxima_nova_reg-webfont.svg#proxima_novaregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@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) {
+    @content;
+  }
+}
+
+@mixin hide-text {
+  color: transparent;
+  font: 0/0 a;
+  text-shadow: none;
+}
+
+@mixin screen($threshold: max-width, $screen: $tablet-threshold) {
+  @media ($threshold: $screen) {
+    @content;
+  }
+}
+
+@mixin clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// base style overrides
+div.container-fluid {
+
+  margin: 0 auto;
+  padding: 1.25em 1.25em 5em 1.25em;
+  max-width: 66.25em;
+
+  ul, ol {
+    padding-left: 0;
+  }
+
+  ul, li {
+  }
+
+  h1 {
+    color: #6e5baa;
+    line-height: normal;
+  }
+
+  address {
+    display: inline;
+  }
+
+  time {
+    display: inline;
+  }
+
+  article {
+
+    margin: 20px 0 0 0;
+
+    h2 {
+      padding: 0;
+      margin: 0;
+    }
+
+    header {
+      background-color: transparent;
+    }
+
+    .byline {
+      padding: 10px 0 0 0;
+    }
+  }
+
+  .byline {
+    color: #999;
+    margin: 0 0 20px 0;
+  }
+}
+
+.wrapper {
+  @include clearfix();
+  position: relative;
+  width: $wrapper-width;
+  max-width: $wrapper-max-width;
+  padding: 2em 0;
+  margin: 0 auto;
+}
+
+.wrapper-full {
+  padding: 20px;
+  width: 100%;
+  max-width: none;
+}
+
+pre {
+  padding: 0.75em;
+  border-radius: 0.15em;
+  background: #444;
+  word-break: break-all;
+  word-wrap: break-word;
+  code {
+    color: #CFCFCF;
+  }
+}
+
+code {
+  font-family: "Source Code Pro", Menlo, monospace;
+  font-size: 90%;
+}
+
+
+#heroku-footer {
+
+  $asset-path: '/assets/images';
+
+  $color-header: #211746;
+  $color-purple: #6e5baa;
+  $color-link: #999;
+  $color-background: #f0f0f0;
+  $color-border: darken($color-background, 10%);
+
+  $threshold-tablet: 900px;
+  $threshold-mobile: 700px;
+
+  padding-top: 15px;
+  background: $color-background;
+  box-shadow: 0 1px 1px 0 fade-out($color-background, .9) inset;
+  font-size: 13px;
+  color: #999;
+  line-height: 1.8em;
+  -webkit-font-smoothing: antialiased;
+
+  * {
+    // @include box-sizing(border-box);
+  }
+
+  a:link,
+  a:visited {
+    color: $color-link;
+    text-decoration: none;
+  }
+
+  a:hover,
+  a:active {
+    color: darken($color-link, 30%);
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    font-weight: 200;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    line-height: 1.1em;
+    padding: 0;
+  }
+
+  h3 {
+    color: $color-purple;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  h4 {
+    margin: 1.33em 0;
+    font-size: 12px;
+    text-align: left;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    color: $color-header;
+
+    @include screen($screen: $threshold-mobile) {
+      text-align: center;
+    }
+  }
+
+  .tertiary {
+    background: fade-out(white, .6);
+    @include screen() {
+      text-align: center;
+    }
+
+    a:link,
+    a:visited {
+      text-decoration: underline;
+    }
+
+    .col {
+      width: 50%;
+    }
+  }
+
+  .col {
+    display: block;
+    float: left;
+
+    ul {
+      margin: 1em 0;
+    }
+
+    li {
+      margin: 0;
+    }
+  }
+
+  .wrapper {
+
+    .col {
+      @include screen() {
+        float: none;
+        width: 100%;
+      }
+    }
+  }
+
+  .heroku-footer-links {
+    @include clearfix();
+    width: 70%;
+
+    .col {
+      width: 25%;
+      padding-right: 2%;
+      @include screen($screen: $threshold-mobile) {
+         width: auto;
+         padding-right: 0;
+         text-align: center;
+      }
+    }
+  }
+
+  .heroku-footer-social {
+    width: 30%;
+    @include screen() {
+      border-top: 1px solid $color-border;
+      text-align: center;
+      margin-top: 30px;
+      padding-top: 10px;
+    }
+
+    h3 {
+      margin: 7px 0 15px;
+      text-align: left;
+      span {
+        margin-right: 6px;
+        top: 4px;
+      }
+    }
+
+    // This has been commented out because the form is styled inside of Pardot.
+    // See template "Newsletter Signup - WWW Footer" to style the newsletter form.
+
+    // form {
+    //   $input-height: 40px;
+
+    //   position: relative;
+    //   width: 100%;
+    //   padding-bottom: 10px;
+    //   @include screen(min-width, $threshold-tablet) {
+    //     border-bottom: 1px solid $color-border;
+    //   }
+
+    //   input[type="text"],
+    //   input[type="email"], {
+    //     -webkit-appearance: none;
+    //     width: 100%;
+    //     height: $input-height;
+    //     padding: 0 10px;
+    //     border-radius: 4px;
+    //     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;
+    //       box-shadow: 0 0 4px fade-out($color-purple, .5);
+    //       border-color: $color-purple;
+    //     }
+    //   }
+
+    //   button {
+    //     -webkit-appearance: none;
+    //     position: absolute;
+    //     top: 0;
+    //     right: 0;
+    //     width: $input-height;
+    //     height: $input-height;
+    //     border: 0;
+    //     background-color: transparent;
+    //     border-radius: 3px;
+    //     &:focus {
+    //       outline: none;
+    //       border: 1px solid fade-out($color-purple, .5);
+    //     }
+    //   }
+    // }
+
+    .social-list {
+      margin: 0;
+      li {
+        display: inline-block;
+        margin-right: 5px;
+      }
+    }
+
+    iframe {
+      position: relative;
+      width: 100%;
+      margin: 0;
+
+      @include screen(min-width, $threshold-tablet) {
+        border-bottom: 1px solid $color-border;
+      }
+    }
+
+  }
+
+  .tertiary {
+    p {
+      margin: 1em 0;
+      padding: 0;
+      font-size: 13px;
+      color: #999;
+    }
+    ul {
+      margin: 13px 0 10px;
+      float: right;
+      @include screen() {
+       float: none;
+      }
+    }
+
+    li {
+      display: inline-block;
+      margin-right: 7px;
+      @include screen() {
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      a {
+        display: block;
+      }
+    }
+  }
+
+    .sfdc-heroku-logo {
+      @include hide-text;
+      display: block;
+      float: left;
+      width: 142px;
+      height: 54px;
+      margin-right: 18px;
+      background-image: url("#{$asset-path}/salesforce_heroku_gray.png");
+      background-size: 100%;
+      @include screen() {
+        display: inline-block;
+        float: none;
+        margin-right: 0;
+      }
+    }
+
+  //Icons
+  [class^="heroku-footer-icon-"] {
+    position: relative;
+    display: inline-block;
+    width: 21px;
+    height: 21px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-image: url("#{$asset-path}/footer_sprite.png");
+    @include hide-text;
+    @include hidpi {
+      background-image: url("#{$asset-path}/footer_sprite@2x.png");
+      background-size: 200px 100px;
+    }
+  }
+
+  //Icon array (class, background position x, y)
+  $icons: (rss 0 0,
+           twitter -21px 0,
+           facebook -42px 0,
+           github -63px 0,
+           vimeo -84px 0,
+           linkedin -105px 0,
+           newsletter -21px -63px,
+           submit 0 -42px
+          );
+
+  //Each loop to create classes
+  .heroku-footer-icon {
+    @each $var in $icons {
+      &-#{nth($var, 1)} {
+        background-position: #{nth($var, 2)} #{nth($var, 3)};
+      }
+    }
+  }
+
+  //Hover state for social links
+  .social-list .heroku-footer-icon {
+    @each $var in $icons {
+      &-#{nth($var, 1)} {
+        &:hover {
+          background-position: #{nth($var, 2)} -21px;
+        }
+      }
+    }
+  }
+
+  .heroku-footer-icon-submit {
+    top: -8px;
+    &:hover {
+      background-position: 0 -63px;
+    }
+  }
+
+}