breezeblocks 0.0.1

data/source/stylesheets/breezeblocks/_expander.sass

@@ -0,0 +1,40 @@
+.expander
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-font-size: 1em !default
+  $base-line-height: 1.5em !default
+  $base-spacing: 1.5em !default
+  $base-accent-color: #477DCA !default
+  $base-link-color: $base-accent-color !default
+  $dark-gray: #333 !default
+  $light-gray: #DDD !default
+  $base-font-color: $dark-gray !default
+  p
+    color: $base-font-color
+    line-height: $base-line-height
+  a
+    color: $base-link-color
+    text-decoration: none
+  //////////////////////////////////////////////////////////////////////////////////
+  $expander-arrow-width: 0.7em
+  $expander-toggle-size: 1em
+  $expander-toggle-arrow-size: $expander-toggle-size
+  $expander-toggle-margin: 1em
+  width: 60%
+  .expander-trigger
+    +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
+      font-size: $expander-arrow-width
+      content: "\25BC"
+      margin-right: 0.5em
+  .expander-hidden
+    &:before
+      font-size: $expander-arrow-width
+      content: "\25BA"
+  .expander-hidden + .expander-content
+    display: none

data/source/stylesheets/breezeblocks/_fade-in.sass

@@ -0,0 +1,30 @@
+.fade-in-element
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default
+  $base-border-radius: 3px !default
+  $base-background-color: white !default
+  $base-line-height: 1.5em !default
+  $base-spacing: 1.5em !default
+  $dark-gray: #333 !default
+  $base-font-color: $dark-gray !default
+  line-height: $base-line-height
+  p
+    color: $base-font-color
+    line-height: $base-line-height
+  //////////////////////////////////////////////////////////////////////////////////
+  +clearfix
+  background: $base-background-color
+  border-radius: $base-border-radius
+  border: 1px solid silver
+  box-shadow: 0 2px 2px transparentize(black, 0.8)
+  margin-bottom: 4em
+  padding: $base-spacing
+  text-align: center
+  width: 100%
+
+.js-fade-element-hide
+  opacity: 0
+
+.js-fade-element-show
+  +transition(all 0.4s ease-in-out)
+  opacity: 1

data/source/stylesheets/breezeblocks/_flashes.sass

@@ -0,0 +1,32 @@
+$base-spacing: 1.5em !default
+$alert-color: #fff6bf !default
+$error-color: #fbe3e4 !default
+$notice-color: #e5edf8 !default
+$success-color: #e6efc2 !default
+
+=flash($color)
+  background-color: $color
+  color: darken($color, 60%)
+  display: block
+  font-weight: 600
+  margin-bottom: $base-spacing / 2
+  padding: $base-spacing / 2
+  text-align: center
+  a
+    color: darken($color, 70%)
+    text-decoration: underline
+    &:focus,
+    &:hover
+      color: darken($color, 90%)
+
+.flash-alert
+  +flash($alert-color)
+
+.flash-error
+  +flash($error-color)
+
+.flash-notice
+  +flash($notice-color)
+
+.flash-success
+  +flash($success-color)

data/source/stylesheets/breezeblocks/_flex-boxes.sass

@@ -0,0 +1,59 @@
+.flex-boxes
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-radius: 3px !default
+  $base-background-color: white !default
+  $dark-gray: #333 !default
+  $light-gray: #DDD !default
+  $base-font-color: $dark-gray !default
+  a
+    text-decoration: none
+  //////////////////////////////////////////////////////////////////////////////////
+  $flex-box-border-color: $light-gray
+  $flex-box-border: 1px solid $flex-box-border-color
+  $flex-box-background: lighten($light-gray, 10%)
+  $flex-box-gutter: 0.4em
+  $flex-box-width: 18em
+  $flex-box-color: transparentize($base-font-color, 0.3)
+  $flex-box-top-colors: tomato, #72BFBF, #92B1E3, #E3D743, #CCC, #F6C05C
+  +clearfix
+  +display(flex)
+  +justify-content(center)
+  +align-items(stretch)
+  +flex-wrap(wrap)
+  clear: both
+  text-align: center
+  .flex-box
+    +transition(all 0.2s ease-in-out)
+    +flex(2 2 15em)
+    +align-self(stretch)
+    background: $flex-box-background
+    border-radius: $base-border-radius
+    box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%)
+    display: block
+    margin: $flex-box-gutter
+    padding: 2em 2em 3em 2em
+    @for $i from 1 to 7
+      // assign colors from $flex-box-top-colors list
+      &:nth-child(#{$i})
+        $color-from-list: nth($flex-box-top-colors, $i)
+        border-top: 6px solid $color-from-list
+        &:focus,
+        &:hover
+          background-color: transparentize($color-from-list, 0.9)
+    img
+      display: block
+      height: 3em
+      margin-bottom: 2em
+      margin: auto
+      opacity: 0.4
+    .flex-title
+      color: $flex-box-color
+      font-size: 1.2em
+      font-weight: 800
+      margin-bottom: 0.5em
+    p
+      color: transparentize($flex-box-color, 0.1)
+      line-height: 1.5em
+      margin: auto
+  .flex-box-big
+    +flex(1 1 40em)

data/source/stylesheets/breezeblocks/_footer-2.sass

@@ -0,0 +1,102 @@
+// 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
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-spacing: 1.5em !default
+  $base-accent-color: #477DCA !default
+  $medium-screen: em(640) !default
+  $large-screen: em(860) !default
+  ul
+    margin: 0
+    padding: 0
+    line-height: 1.5em
+  li
+    list-style: none
+  a
+    text-decoration: none
+  //////////////////////////////////////////////////////////////////////////////////
+  $footer-background: desaturate(darken($base-accent-color, 20%), 30%)
+  $footer-color: white
+  $footer-link-color: transparentize($footer-color, 0.6)
+  $footer-disclaimer-color: transparentize($footer-color, 0.6)
+  background: $footer-background
+  padding: $base-spacing
+  width: 100%
+  display: inline-block
+  .footer-logo
+    margin-right: 1em
+    margin-bottom: 1em
+    +media($large-screen)
+      float: left
+      margin-bottom: 0
+  .footer-logo img
+    height: 1.6em
+  ul
+    margin-bottom: 1em
+    +media($large-screen)
+      float: left
+      line-height: 1.8em
+      margin-left: 1em
+      margin-bottom: 0
+  ul li
+    font-weight: 800
+    padding-right: 1em
+    +media($large-screen)
+      display: inline
+      text-align: left
+  ul li a
+    color: $footer-link-color
+    &:focus,
+    &:hover
+      color: transparentize($footer-color, 0)
+  .footer-secondary-links
+    +media($large-screen)
+      float: right
+
+    li
+      font-size: 0.8em
+      font-weight: 400
+    ul.footer-social
+      margin-top: 1em
+      +media($large-screen)
+        float: right
+        margin-top: 0
+
+      li
+        font-size: 1em
+        float: left
+        line-height: 0
+        padding-right: 0.7em
+        &:last-child
+          padding-right: 0
+      img
+        height: 1.6em
+        opacity: 0.7
+        padding: 1px
+        &:focus,
+        &:hover
+          opacity: 1

data/source/stylesheets/breezeblocks/_footer.sass

@@ -0,0 +1,62 @@
+.footer
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-spacing: 1.5em !default
+  $base-accent-color: #477DCA !default
+  $medium-screen: em(640) !default
+  $large-screen: em(860) !default
+  ul
+    padding: 0
+  li
+    list-style: none
+    line-height: 1.5em
+  a
+    text-decoration: none
+  //////////////////////////////////////////////////////////////////////////////////
+  $footer-background: desaturate(darken($base-accent-color, 20%), 30%)
+  $footer-color: white
+  $footer-link-color: transparentize($footer-color, 0.6)
+  $footer-disclaimer-color: transparentize($footer-color, 0.6)
+  background: $footer-background
+  padding: ($base-spacing * 2) $gutter
+  width: 100%
+  .footer-logo
+    margin-bottom: 2em
+    text-align: center
+    img
+      height: 3em
+  .footer-links
+    +clearfix
+    margin-bottom: $base-spacing
+    +media($medium-screen)
+      +shift(3)
+  ul
+    margin-bottom: $base-spacing * 2
+    +media($medium-screen)
+      +span-columns(3)
+      +omega(3n)
+      +clearfix
+  li
+    text-align: center
+    +media($medium-screen)
+      text-align: left
+  li a
+    color: $footer-link-color
+    &:focus,
+    &:hover
+      color: transparentize($footer-color, 0)
+  li h3
+    color: $footer-color
+    font-size: 1em
+    font-weight: 800
+    margin-bottom: 0.4em
+  hr
+    border: 1px solid transparentize($footer-disclaimer-color, 0.3)
+    margin: 0 auto $base-spacing
+    width: 12em
+  p
+    color: $footer-disclaimer-color
+    font-size: 0.9em
+    line-height: 1.5em
+    margin: auto
+    max-width: 35em
+    text-align: center

data/source/stylesheets/breezeblocks/_grid-items-lines.sass

@@ -0,0 +1,76 @@
+=grid-item-columns($columns)
+  width: 100% / 12 * $columns
+
+.grid-items-lines
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-background-color: white !default
+  $dark-gray: #333 !default
+  $light-gray: #DDD !default
+  $medium-screen: em(640) !default
+  $large-screen: em(860) !default
+  $base-font-color: $dark-gray !default
+  p
+    line-height: 1.5em
+  a
+    text-decoration: none
+  //////////////////////////////////////////////////////////////////////////////////
+  $grid-items-background: $base-background-color
+  $grid-item-background: $base-background-color
+  $grid-item-border: 1px solid transparentize($base-font-color, 0.8)
+  $grid-item-columns: 4
+  $grid-item-big-columns: 8
+  $grid-item-color: $base-font-color
+  $grid-item-height: 14em
+  +clearfix
+  position: relative
+  .grid-item
+    +transition(all 0.2s ease-in-out)
+    background: $grid-item-background
+    border-bottom: $grid-item-border
+    border-right: $grid-item-border
+    cursor: pointer
+    float: left
+    height: $grid-item-height
+    overflow: hidden
+    outline: none
+    padding: 2em
+    width: 100%
+    +media($large-screen)
+      +grid-item-columns($grid-item-columns)
+
+    &:focus,
+    &:hover
+      background: transparentize($grid-item-color, 0.95)
+  .grid-item img
+    display: block
+    height: 2.5em
+    margin-bottom: 1.2em
+    opacity: 0.2
+  .grid-item h1
+    color: $grid-item-color
+    font-size: 1.3em
+    margin-bottom: 0.4em
+  .grid-item p
+    color: transparentize($grid-item-color, 0.4)
+    +media($medium-screen)
+      max-width: 70%
+  .grid-item-big
+    +media($large-screen)
+      +grid-item-columns($grid-item-big-columns)
+
+    p
+      +media($medium-screen)
+        max-width: 60%
+  // this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
+  .bottom-cover
+    background: $grid-items-background
+    bottom: 0px
+    height: 3px
+    position: absolute
+    width: 100%
+  .right-cover
+    background: $grid-items-background
+    height: 100%
+    position: absolute
+    right: 0px
+    width: 4px

data/source/stylesheets/breezeblocks/_grid-items.sass

@@ -0,0 +1,80 @@
+=grid-item-columns($columns)
+  width: 100% / 12 * $columns
+
+.grid-items
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-accent-color: #477DCA !default
+  $base-background-color: white !default
+  $medium-screen: em(640) !default
+  $large-screen: em(860) !default
+  p
+    line-height: 1.5em
+  a
+    text-decoration: none
+  //////////////////////////////////////////////////////////////////////////////////
+  $grid-items-background: $base-background-color
+  $grid-item-background: desaturate($base-accent-color, 30%)
+  $grid-item-colors: desaturate($base-accent-color, 30%), #3581A5, #5FBEBE, #98C79A, #A7A891, #BDCC97, #979EA0
+  $grid-item-border-size: 9px
+  $grid-item-columns: 4
+  $grid-item-big-columns: 8
+  $grid-item-color: white
+  $grid-item-height: 14em
+  +clearfix
+  .grid-item
+    +transition(all 0.2s ease-in-out)
+    background: $grid-item-background
+    border-bottom: $grid-item-border-size solid $grid-items-background
+    border-left: ($grid-item-border-size / 2) solid $grid-items-background
+    border-right: ($grid-item-border-size / 2) solid $grid-items-background
+    border-top: 0
+    cursor: pointer
+    float: left
+    height: $grid-item-height
+    overflow: hidden
+    outline: none
+    padding: 2em
+    text-align: center
+    width: 100%
+    +media($large-screen)
+      +grid-item-columns($grid-item-columns)
+
+    @for $i from 1 through length($grid-item-colors)
+      // assign colors from $grid-item-colors list
+      &:nth-child(#{$i})
+        $background-from-list: nth($grid-item-colors, $i)
+        background-color: $background-from-list
+        box-shadow: inset 0px 0px 1px 2px darken($background-from-list, 10%)
+        &:focus,
+        &:hover
+          background-color: darken($background-from-list, 10%)
+          background-repeat: no-repeat
+          background-position: top
+          background-size: cover
+  .grid-item img
+    display: block
+    height: 3em
+    margin-bottom: 1em
+    margin: auto
+  .grid-item h1
+    color: $grid-item-color
+    font-size: 1.3em
+    margin-bottom: 0.4em
+  .grid-item p
+    margin: auto
+    color: transparentize($grid-item-color, 0.3)
+    +media($medium-screen)
+      max-width: 70%
+  .grid-item-big
+    +media($large-screen)
+      +grid-item-columns($grid-item-big-columns)
+
+    p
+      +media($medium-screen)
+        max-width: 60%
+  .grid-item-image
+    background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png")
+    background-color: $grid-item-background
+    background-position: top
+    background-repeat: no-repeat
+    background-size: cover