staple 0.0.9 → 0.1.0

data/source/stylesheets/staple/_centered-navigation.scss

@@ -1,251 +0,0 @@
-.centered-navigation {
-  $centered-navigation-padding: 1em;
-  $centered-navigation-logo-height: 2em;
-  $centered-navigation-background: #E7F1EC;
-  $centered-navigation-color: transparentize($base-font-color, 0.3);
-  $centered-navigation-color-hover: $base-font-color;
-  $centered-navigation-height: 60px;
-  $centered-navigation-item-padding: 1em;
-  $centered-navigation-submenu-padding: 1em;
-  $centered-navigation-submenu-width: 12em;
-  $centered-navigation-item-nudge: 2.2em;
-  $horizontal-bar-mode: $large-screen;
-
-  background-color: $centered-navigation-background;
-  border-bottom: 1px solid darken($centered-navigation-background, 6);
-  font-family: $serif;
-  height: $centered-navigation-height;
-  width: 100%;
-  z-index: 9999;
-  
-  // Mobile view
-
-  .mobile-logo {
-    display: inline;    
-    float: left;
-    max-height: $centered-navigation-height;
-    padding-left: $centered-navigation-padding;
-
-    img {
-      max-height: $centered-navigation-height;
-      opacity: .6;
-      padding: .8em 0;
-    }
-
-    @include media($horizontal-bar-mode) {
-      display: none;
-    }
-  }
-
-  .centered-navigation-menu-button {
-    color: $centered-navigation-color;
-    display: block;
-    float: right;
-    font-weight: 700;
-    line-height: $centered-navigation-height;
-    margin: 0;
-    padding-right: $centered-navigation-submenu-padding;
-    text-transform: uppercase;
-
-    @include media ($horizontal-bar-mode) {
-      display: none;
-    }
-
-    &:hover {
-      color: $centered-navigation-color-hover;
-    }
-  }
-
-  // Nav menu
-
-  .centered-navigation-wrapper {
-    @include outer-container;
-    @include clearfix;
-    position: relative;
-    z-index: 999;
-  }
-
-  ul.centered-navigation-menu {    
-    -webkit-transform-style: preserve-3d; // stop webkit flicker
-    clear: both;
-    display: none;
-    margin: 0 auto;
-    overflow: visible;
-    padding: 0;
-    width: 100%;
-    z-index: 99999;
-
-    @include media ($horizontal-bar-mode) {
-      display: block;
-      text-align: center;
-    }
-  }
-
-  // The nav items
-
-  .nav-link:first-child {
-    @include media($horizontal-bar-mode) {
-      margin-left: $centered-navigation-item-nudge;
-    }
-  }
-
-  ul li.nav-link {
-    background: $centered-navigation-background;
-    display: block;
-    line-height: $centered-navigation-height;
-    overflow: hidden;
-    padding-right: $centered-navigation-submenu-padding;
-    text-align: right;
-    width: 100%;
-    z-index: 9999;
-
-    @include media($horizontal-bar-mode) {
-      background: transparent;
-      display: inline;
-      line-height: $centered-navigation-height;  
-
-      a {
-        padding-right: $centered-navigation-item-padding;
-      }
-    }
-    
-    a {
-      color: $centered-navigation-color;
-      display: inline-block;
-
-
-      &:hover {
-        color: $centered-navigation-color-hover;
-      }
-    }
-  }
-
-  li.logo.nav-link {
-    display: none;
-    line-height: 0;
-
-    @include media($large-screen) {
-      display: inline;
-    }
-  }
-
-  .logo img {
-    margin-bottom: -$centered-navigation-logo-height / 3;
-    max-height: $centered-navigation-logo-height;
-    opacity: .6;
-  }
-
-  // Sub menus
-
-  li.more.nav-link {
-    padding-right: 0;
-
-    @include media($large-screen) {
-      padding-right: $centered-navigation-submenu-padding;
-    }
-
-    > ul > li:first-child a  {
-      padding-top: 1em;
-    }
-
-    a {
-      margin-right: $centered-navigation-submenu-padding;
-    }
-
-    > a {
-      padding-right: 0.6em;
-    }
-
-    > a:after {
-      @include position(absolute, auto -.4em auto auto);
-      color: $centered-navigation-color;
-      content: '\25BE';
-    }
-  }
-
-  li.more {
-    overflow: visible;
-    padding-right: 0;
-
-    a {
-      padding-right: $centered-navigation-submenu-padding;
-    }
-
-    > a {
-      padding-right: 1.6em;
-      position: relative;
-
-      @include media($large-screen) {
-        margin-right: $centered-navigation-submenu-padding;
-      }
-
-      &:after {
-        content: '›';
-        font-size: 1.2em;
-        position: absolute;
-        right: $centered-navigation-submenu-padding / 2;
-      }      
-    }
-
-    &:hover > .submenu {
-      display: block;
-    }
-
-    @include media($horizontal-bar-mode) {
-      padding-right: $centered-navigation-submenu-padding;
-      position: relative;
-    }
-  }
-
-  ul.submenu {
-    display: none;
-    padding-left: 0;
-
-    @include media($horizontal-bar-mode) {
-      left: -$centered-navigation-submenu-padding;
-      position: absolute;
-      top: 1.5em;
-    }
-
-    .submenu {
-      @include media($horizontal-bar-mode) {
-        left: $centered-navigation-submenu-width - .2em;
-        top: 0;
-      }
-    }
-
-    li {
-      display: block;
-      padding-right: 0;
-
-      @include media($horizontal-bar-mode) {
-        line-height: $centered-navigation-height / 1.3;
-
-        &:first-child > a {
-          border-top-left-radius: $base-border-radius;
-          border-top-right-radius: $base-border-radius;
-        }
-
-        &:last-child > a {
-          border-bottom-left-radius: $base-border-radius;
-          border-bottom-right-radius: $base-border-radius;
-          padding-bottom: .7em;
-        }
-      }
-
-      a {
-        background-color: darken($centered-navigation-background, 3);
-        display: inline-block;
-        text-align: right;
-        width: 100%;
-
-        @include media($horizontal-bar-mode) {
-          background-color: $centered-navigation-background;
-          padding-left: $centered-navigation-submenu-padding;
-          text-align: left;
-          width: $centered-navigation-submenu-width;
-        }
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_comment.scss

@@ -1,60 +0,0 @@
-.comment {
-  $comment-gutter: 1.4em;
-  $comment-image-padding: .7em;
-  $comment-image-width: 4em;
-  $comment-color: $base-font-color;
-  $comment-background: lighten($base-accent-color, 15);
-  $comment-detail-color: transparentize($comment-color, .5);
-  $comment-image-vert-alignment: top;
-
-  display: table;
-  width: 100%;
-  margin-bottom: $base-spacing;
-  padding-bottom: 1em;
-  border-bottom: 1px solid transparentize($comment-color, .9);
-
-  .comment-image,
-  .comment-content {
-    display: table-cell;
-    vertical-align: $comment-image-vert-alignment;
-  }
-
-  .comment-image {
-    padding-right: $comment-gutter;
-
-    > img {
-      width: $comment-image-width;
-      height: auto;
-      border-radius: $base-border-radius;
-      padding: $comment-image-padding;
-      background: $comment-background;
-      display: block;
-      max-width: none;
-    }
-
-    .comment-reverse-order & {
-      padding-right: 0;
-      padding-left: 10px;
-    }
-  }
-
-  .comment-content {
-    width: 100%;
-
-    h1 {
-      font-size: 1em;
-      margin-bottom: .5em;
-    }
-
-    p {
-      margin-bottom: .5em;
-    }
-
-    p.comment-detail {
-      font-style: italic;
-      font-size: .9em;
-      color: $comment-detail-color;
-    }
-  }
-}
-

data/source/stylesheets/staple/_device.scss

@@ -1,83 +0,0 @@
-$device-padding-vertical: 5em;
-$device-padding-horizontal: .4em;
-$device-screen-width: 14em;
-$device-screen-height: 25em;
-$device-background: darken(gray, 40);
-$device-backside-background: darken($device-background, 10);
-$device-text-color: white;
-
-$device-background-top: #162C4C; 
-$device-background-bottom: #0A120D;
-$gradient-angle: 10deg;
-$device-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';
-$device-screen-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg';
-
-.device-background {
-  @include background(url($device-image), linear-gradient($gradient-angle, $device-background-bottom, $device-background-top), no-repeat $device-background-top scroll);
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-  height: 20em;
-}
-
-.device-text {
-  color: $device-text-color;
-  padding: 2em;
-
-  @include media($large-screen) {
-    max-width: 50%;
-    padding: 4em;
-    float: left;
-  }
-
-  h4 {
-    margin-bottom: .5em;
-    padding-bottom: .5em;
-    border-bottom: 1px solid transparentize($device-text-color, .7);
-  }
-
-  p {
-    font-family: $serif;
-    margin-bottom: 1.5em;
-  }
-}
-
-.device {
-  display: none;
-  position: relative;
-
-  @include media($large-screen) {
-    @include transform(
-      perspective(800px) 
-      translateX(0px) 
-      translateY(-100px) 
-      translateZ(50px) 
-      rotateX(0deg) 
-      rotateY(-20deg) 
-      rotateZ(-0deg));
-    display: block;
-    float: right;
-    margin-bottom: -12em;
-    margin-right: 5em;
-    padding: $device-padding-vertical 0;
-    width: $device-screen-width + (2 * $device-padding-horizontal);
-    border-radius: 2em;
-    background: $device-background;
-    box-shadow: 
-      1px 0px lighten($device-backside-background, 20), 
-      4px 0px lighten($device-backside-background, 2),
-      7px 0px $device-backside-background,
-      10px 0px $device-backside-background,
-      13px 0px $device-backside-background;
-      z-index: 99999;
-
-    .screen {
-      @include size($device-screen-width $device-screen-height);
-      background-image: url($device-screen-image);
-      background-size: cover;
-      box-shadow: inset 0 1px 8px transparentize(black, .5);
-      margin: auto;
-      border-radius: .2em;
-    }
-  }
-}

data/source/stylesheets/staple/_dropdown.scss

@@ -1,127 +0,0 @@
-$dropdown-color: $base-font-color;
-$dropdown-description-color: lighten($dropdown-color, 40);
-$dropdown-border: 1px solid silver;
-$dropdown-background: $base-background-color;
-$dropdown-background-hover: darken($dropdown-background, 3);
-$dropdown-inner-border: 1px solid silver;
-$dropdown-height: 40px;
-$dropdown-padding: 1em;
-$dropdown-distance-from-menu: 50px;
-$dropdown-arrow-top-distance: 0;
-
-.dropdown {
-  text-align: center;
-}
-
-.dropdown-container {
-  display: inline-block;
-  position: relative;
-}
-
-.dropdown-description {
-  background: $dropdown-background;
-  border-bottom-left-radius: $base-border-radius;
-  border-bottom: $dropdown-border;
-  border-left: $dropdown-border;
-  border-top-left-radius: $base-border-radius;
-  border-top: $dropdown-border;
-  color: $dropdown-description-color;
-  float: left;
-  font-size: .7em;
-  line-height: $dropdown-height;
-  margin-bottom: 0;
-  padding: 0 ($dropdown-padding / 2) 0 $dropdown-padding;
-
-  @include media($large-screen) {
-    font-size: 1em;
-  }
-}
-
-.dropdown-button {
-  background: $dropdown-background;
-  border-bottom-right-radius: $base-border-radius;
-  border-top-right-radius: $base-border-radius;
-  border-top: $dropdown-border;
-  border-right: $dropdown-border;
-  border-bottom: $dropdown-border;
-  cursor: pointer;
-  float: right;
-  font-size: .7em;
-  font-weight: 800;
-  line-height: $dropdown-height;
-  margin-bottom: 0;
-  padding: 0 ($dropdown-padding * 3.5) 0 ($dropdown-padding / 2);
-  position: relative;
-
-  @include media($large-screen) {
-    font-size: 1em;
-    padding: 0 ($dropdown-padding * 2.5) 0 ($dropdown-padding / 2);
-  }
-}
-
-.dropdown-button:hover{
-  background-color: $dropdown-background-hover;
-}
-
-.dropdown-button:after {
-  color: $base-font-color;
-  content: "\25BE";
-  display: block;
-  position: absolute;
-  right: $dropdown-padding;
-  top: $dropdown-arrow-top-distance;
-}
-
-.menu {
-  @include transition (all 0.2s ease-in-out);
-  background: $dropdown-background;
-  border-radius: $base-border-radius;
-  border: $dropdown-border;
-  box-shadow: 0 2px 2px transparentize(black, .8);
-  color: $dropdown-color;
-  cursor: pointer;
-  display: none;
-  overflow: show;
-  position: absolute;
-  right: 0;
-  top: $dropdown-distance-from-menu;
-  width: 228px;
-  z-index: 99999;
-
-  &:before {
-    @include position(absolute, 0 1em 0 0);
-    color: $dropdown-background;
-    content: "\25b2";
-    font-size: 1.4em;
-    pointer-events: none;
-    text-shadow: 0 -2px 2px transparentize(black, .7);
-    top: -1em;
-  }
-}
-
-.menu li {
-  border-bottom: $dropdown-inner-border;
-  color: $dropdown-color; 
-  padding: $dropdown-padding / 2;
-}
-
-.menu li:hover {
-  background: $dropdown-background-hover;
-}
-
-.menu li:first-child {
-  border-top-left-radius: $base-border-radius;
-  border-top-right-radius: $base-border-radius;
-}
-
-.menu li:last-child {
-  border: none;
-  border-bottom-left-radius: $base-border-radius;
-  border-bottom-right-radius: $base-border-radius;
-}
-
-.show-menu {
-  display: block;
-}
-
-// Inspired by code by www.HUSAMUI.com

data/source/stylesheets/staple/_expander.scss

@@ -1,30 +0,0 @@
-$expander-arrow-width: 5px;
-$expander-toggle-size: 1em;
-$expander-toggle-arrow-size: $expander-toggle-size * .75;
-$expander-toggle-margin: 1em;
-
-.expander {
-  margin: auto;
-  width: 60%;
-}
-
-.expander a.expander-toggle {
-  @include user-select(none);
-  border-bottom: 1px solid $light-gray;
-  cursor: pointer;
-  display: block;
-  font-size: $expander-toggle-size;
-  margin-bottom: $expander-toggle-size;
-  padding-bottom: $expander-toggle-size / 4;
-
-  &:before {
-    content: '\25BA';
-    font-size: $expander-toggle-arrow-size;
-    margin-right: 1em;
-  }
-}
-
-.expander.expanded .expander-toggle:before {
-  content: '\25BC';
-  margin-right: .95em;
-}

data/source/stylesheets/staple/_flashes.scss

@@ -1,29 +0,0 @@
-$flash-red: #FBE3E4;
-$flash-yellow: #FFF6BF;
-$flash-green: #E6EFC2;
-
-%flash-base {
-  display: block;
-  font-weight: bold;
-  margin-bottom: $base-spacing / 2;
-  padding: $base-spacing / 2;
-}
-
-$flashes: (alert: $flash-yellow, error: $flash-red, notice: lighten($base-accent-color, 40), success: $flash-green);
-
-@each $flash, $color in $flashes {
-  .flash-#{$flash} {
-    @extend %flash-base;
-    background: $color;
-    color: darken($color, 60);
-
-    a {
-      color: darken($color, 70);
-      border-bottom: 1px solid transparentize(darken($color, 70), .7);
-
-      &:hover {
-        color: darken($color, 90);
-      }
-    }
-  }
-}

data/source/stylesheets/staple/_footer-2.scss

@@ -1,117 +0,0 @@
-// Uncomment this for a sticky footer.
-//
-// .wrapper-for-content-outside-of-footer {
-//   min-height: 100%;
-//   height: auto !important;
-//   height: 100%;
-//   margin: 0 auto -4em;
-// }
-
-// html, body {
-//  height: 100%;
-// }
-
-// .wrapper-for-content-outside-of-footer:after {
-//   content: "";
-//   display: block;
-// }
-
-// .footer-2, .wrapper-for-content-outside-of-footer:after {
-//   height: 17em;
-
-//   @include media($large-screen) {
-//     height: 4em;
-//   }
-// }
-
-.footer-2 {
-  $footer-background: desaturate(darken($base-accent-color, 20), 30);
-  $footer-color: white;
-  $footer-link-color: transparentize($footer-color, .6);
-  $footer-disclaimer-color: transparentize($footer-color, .6);
-
-  background: $footer-background;
-  padding: $base-spacing;
-  width: 100%;
-
-  .footer-logo {
-    margin-right: 1em;
-    margin-bottom: 1em;
-
-    @include media($large-screen) {
-      float: left;
-      margin-bottom: 0;
-    }
-  }
-
-  .footer-logo img {
-    height: 1.6em;
-  } 
-
-  ul {
-    margin-bottom: 1em;
-    @include media($large-screen) {
-      float: left;
-      margin-left: 1em;
-      margin-bottom: 0;
-    }
-  }
-
-  ul li {
-    padding-right: 1em;
-    font-weight: 800;
-
-    @include media($large-screen) {
-      display: inline;
-      text-align: left;
-    }
-  }
-
-  ul li a {
-    color: $footer-link-color;
-
-    &:hover {
-      color: transparentize($footer-color, 0);
-    }
-  }
-
-  .footer-secondary-links {
-    @include media($large-screen) {
-      float: right;
-    }
-
-    li {
-      font-size: .8em;
-      font-weight: 400;
-    }
-
-    ul.footer-social {
-      margin-top: 1em;
-
-      @include media($large-screen) {
-        float: right;
-        margin-top: 0;
-      }
-
-      li {
-        float: left;
-        font-size: 1em;
-        padding-right: .7em;
-
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-
-      img {
-        opacity: .7;
-        height: 1.6em;
-        padding: 1px;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-  }
-}