breezeblocks 0.0.1

data/source/refills-hero.html.haml

@@ -0,0 +1,15 @@
+.breezeblocks-header
+  .breezeblocks-logo
+    %img{alt: "Breezeblocks logo", src: "/images/breezeblocks-logo.svg"}/
+  %h2
+    %span Breezeblocks
+    are prepackaged patterns and components, built on top of
+    %a{href: "http://www.bourbon.io"} Bourbon
+    and
+    = succeed "." do
+      %a{href: "http://neat.bourbon.io/"} Neat
+  %p
+    Managed by
+    = succeed "," do
+      %a{href: "http://www.thoughtbot.com"} thoughtbot
+    %a{href: "https://github.com/thoughtbot/breezeblocks"} GitHub

data/source/refills-menu.html.haml

@@ -0,0 +1,4 @@
+%ul.breezeblocks-menu
+  %li.menu-item.patterns= link_to 'Patterns', '/index.html'
+  %li.menu-item.components= link_to 'Components', '/components.html'
+  %li.menu-item.type-systems= link_to 'Type Systems', '/type-systems.html'

data/source/refills-page-scripts.html.haml

@@ -0,0 +1,65 @@
+/ Type System tabs
+:javascript
+  var $tabs, $toggles, ACTIVE_CLASS;
+
+  ACTIVE_CLASS = 'js-is-active';
+
+  $tabs = $("[data-role='tab']");
+
+  $toggles = $tabs.find("[data-role='link']");
+
+  $toggles.on('click', function(event) {
+    var $tab, $toggle;
+    event.preventDefault();
+    $toggle = $(this);
+    $tab = $toggle.closest($tabs);
+    if (!$tab.hasClass(ACTIVE_CLASS)) {
+      $tabs.removeClass(ACTIVE_CLASS);
+      return $tab.addClass(ACTIVE_CLASS);
+    }
+  });
+/ Show Code
+:javascript
+  $('a.js-show-code').on('click', function(e){
+    $(this).hide();
+    $(this).siblings('.js-hide-code').css('display', 'inline-block');
+    $(this).parent().siblings('.snippets-table').show();
+    e.preventDefault();
+  })
+
+  $('a.js-hide-code').on('click', function(e) {
+    $(this).hide();
+    $(this).siblings('.js-show-code').css("display", "inline-block");
+    $(this).parent().siblings('.snippets-table').hide();
+    e.preventDefault();
+  });
+/ Copy Code
+:javascript
+  $(document).ready( function() {
+    client = new ZeroClipboard($('.copy-source'), {moviePath: '/images/ZeroClipboard.swf'})
+    client.on('dataRequested', function(client, args) {
+      if ($(this).hasClass("copy-coffee")) {
+        var cell = $(this).parents("tr").find("td.snippet").last();
+      } else {
+        var cell = $(this).parents("td.snippet");
+      }
+
+      var code = cell.children("pre").text();
+      client.setText(code);
+    });
+  });
+:javascript
+  $(document).ready(function(){
+
+    $('.js-menu-trigger-breezeblocks').on('click touchstart', function(e){
+      $('.er_toc').toggleClass('is-visible');
+      $('.js-menu-screen-breezeblocks').toggleClass('is-visible');
+      e.preventDefault();
+    });
+
+    $('.js-menu-screen-breezeblocks').on('click touchstart', function(e){
+      $('.er_toc').toggleClass('is-visible');
+      $('.js-menu-screen-breezeblocks').toggleClass('is-visible');
+      e.preventDefault();
+    });
+  });

data/source/stylesheets/_bourbon-nav.sass

@@ -0,0 +1,57 @@
+$bourbon-nav-background-color: #5b5e63
+
+nav.bourbon
+  +clearfix
+  background-color: $bourbon-nav-background-color
+  padding: 0 2em 0 1em
+  +media(max-width em(510))
+    padding: 0
+
+  ul
+    text-align: center
+    +media(em(901))
+      float: left
+      text-align: left
+  li
+    display: inline-block
+  a
+    background-position: 1em center
+    background-repeat: no-repeat
+    color: #fff
+    display: inline-block
+    font-weight: bold
+    padding: 1em 1em 1em 3em
+    +media(max-width em(515))
+      padding: 0.75em 0.5em
+      text-align: center
+
+    +media(max-width em(900))
+      display: block
+
+    &:focus,
+    &:hover
+      background-color: darken($bourbon-nav-background-color, 10)
+      color: #fff
+    &.current
+      background-color: darken($bourbon-nav-background-color, 5)
+    $sites: bourbon, neat, bitters, breezeblocks
+    @each $site in $sites
+      &.#{$site}
+        background-image: url("/images/bourbon-nav/#{$site}.png")
+        +hidpi
+          background-image: url("/images/bourbon-nav/#{$site}@2x.png")
+          background-size: 20%
+
+        +media(max-width em(515))
+          background-image: none
+  h1
+    color: rgba(#fff, 0.6)
+    float: right
+    font-size: 1em
+    +media(max-width em(900))
+      display: none
+
+    a
+      padding: 1em 0
+      &:hover
+        background-color: transparent

data/source/stylesheets/_refills-nav.sass

@@ -0,0 +1,80 @@
+$sidebar-width: em(200)
+
+section.inner-content
+  margin-left: auto
+
+.breezeblocks-menu-anchor
+  +position(fixed, 4.5em null null 1em)
+  +size(50px)
+  border: 1px solid darken(desaturate(#93e9be, 50), 15%)
+  border-radius: 50%
+  cursor: pointer
+  display: inline-block
+  font-size: 1em
+  padding: 0.7em 1em
+  margin-bottom: 1.5em
+  transition: all 0.2s ease-in-out
+  z-index: 9999
+  &.fixedsticky-on
+    margin-top: -3.5em
+  &.fixedsticky-off
+    position: fixed
+  img
+    +size(30px 26px)
+    max-width: 100%
+
+.breezeblocks-menu-anchor-moved
+  top: 1em
+
+.fixedsticky-dummy
+  height: 0 !important
+
+.breezeblocks-menu-screen
+  +position(fixed, 0 0 0 0)
+  +transition
+  background-color: teal
+  opacity: 0
+  visibility: hidden
+  z-index: 999998
+  &.is-visible
+    opacity: 0
+    visibility: visible
+
+.er_toc_title,
+.er_toc_top
+  display: none
+
+.er_toc
+  $base-line-height: 1.5em !default
+  +position(fixed, 0 auto 0 0)
+  +size(220px 100%)
+  +transform(translateX(-220px))
+  +transition(all 0.2s linear)
+  background-color: black
+  overflow-y: auto
+  -webkit-font-smoothing: antialiased
+  -webkit-overflow-scrolling: touch
+  transition: all 0.2s linear
+  z-index: 999999
+  ul
+    margin: 0
+    padding: 1em
+  ul li
+    a
+      color: darken(#fff, 15%)
+      font-size: 1em
+      font-weight: 300
+      line-height: $base-line-height
+      text-decoration: none
+      &:focus,
+      &:hover
+        color: #fff
+        text-decoration: none
+  ul ul
+    margin-bottom: 1em
+    margin-top: 0.5em
+    padding: 0
+  ul ul li a
+    font-weight: 200
+  &.is-visible
+    +transform(translateX(0))

data/source/stylesheets/_refills-styles.sass

@@ -0,0 +1,483 @@
+body
+  -webkit-font-smoothing: antialiased
+
+$breezeblocks-body-background-color: #fff
+
+nav.bourbon
+  text-rendering: optimizeLegibility
+  ul
+    list-style-type: none
+    margin: 0
+    padding: 0
+    li a
+      text-decoration: none
+  h1
+    margin: 0
+    a
+      text-decoration: none
+
+$breezeblocks-color: lighten(desaturate(teal, 60%), 40%)
+$breezeblocks-accent-color: #477dca
+$breezeblocks-nav-height: 60px
+$breezeblocks-logo-color: #93e9be
+$breezeblocks-anchor-color: #f55481
+$breezeblocks-hero-background: #e7f1ec
+$breezeblocks-highlight-color: #bbb295
+$breezeblocks-narrow-sans: "Oswald", sans-serif
+$breezeblocks-white-shadow: 0 1px 1px transparentize(#fff, 0.6)
+$breezeblocks-medium-screen: em(640)
+$breezeblocks-large-screen: em(860)
+
+$breezeblocks-serif: "Lusitana", $georgia
+$breezeblocks-second-serif: $georgia
+
+=breezeblocks-inset
+  background: darken($breezeblocks-hero-background, 2%)
+  box-shadow: inset 0 1px 2px darken($breezeblocks-hero-background, 7%), $breezeblocks-white-shadow
+  text-shadow: $breezeblocks-white-shadow
+
+body
+  -webkit-backface-visibility: hidden
+  background: $breezeblocks-body-background-color
+  min-width: 320px
+
+.breezeblocks-header
+  @extend .breezeblocks-header
+  +clearfix
+  background-color: $breezeblocks-hero-background
+  clear: both
+  margin-bottom: 1em
+  padding: 5em 0
+  text-align: center
+  width: 100%
+  +media($breezeblocks-medium-screen)
+    margin-bottom: 4em
+    padding: 6em 0
+
+  +media($breezeblocks-large-screen)
+    margin-bottom: 4em
+    padding: 6em 0 11em 0
+
+  .breezeblocks-logo
+    display: inline-block
+    margin: 0 auto 1.4em auto
+    +media($breezeblocks-medium-screen)
+      max-width: 8em
+      max-height: 8em
+
+    img
+      background: #fff
+      border-radius: 50%
+      padding: 0.3em
+      margin-bottom: 1em
+      max-width: 5em
+      max-height: 5em
+      +media($breezeblocks-medium-screen)
+        margin-bottom: 2em
+        max-width: 8em
+        max-height: 8em
+        padding: 0.5em
+  h2
+    font-family: $breezeblocks-second-serif
+    font-size: 1.4em
+    font-weight: 100
+    margin: 0 auto 2em auto
+    max-width: 90%
+    text-align: center
+    line-height: 1.4em
+    +media($breezeblocks-medium-screen)
+      font-size: 2em
+      margin-bottom: 1em
+      max-width: 90%
+
+    +media($breezeblocks-large-screen)
+      font-size: 3em
+      margin-bottom: 0.8em
+      line-height: 1.3em
+      max-width: 55%
+  h3
+    font-size: 1.3em
+    font-weight: 200
+    margin-bottom: 1em
+    text-align: center
+  a
+    color: $breezeblocks-anchor-color
+    text-decoration: none
+    &:focus,
+    &:hover
+      color: lighten($breezeblocks-anchor-color, 10%)
+  p
+    +breezeblocks-inset
+    border-radius: 30px
+    color: darken(desaturate($breezeblocks-logo-color, 50%), 15%)
+    display: inline
+    font-family: $breezeblocks-narrow-sans
+    font-size: 0.8em
+    font-weight: 400
+    padding: 0.5em 1.4em
+    +media($breezeblocks-large-screen)
+      font-size: 0.8em
+
+.menu-wrapper
+  +clearfix
+
+// Refill menu
+
+ul.breezeblocks-menu
+  font-weight: normal
+  margin-bottom: 5em
+  margin: -3.3em auto 0 auto
+  text-align: center
+  +media($breezeblocks-medium-screen)
+    margin: -6em auto 0 auto
+
+  +media($breezeblocks-large-screen)
+    margin: -6.7em auto 0 auto
+
+  .menu-item
+    display: inline
+    a
+      text-decoration: none
+      border-radius: 3px
+      color: darken($breezeblocks-hero-background, 20%)
+      font-family: "Lusitana", serif
+      font-size: 0.9em
+      padding: 0.5em 0.5em 2em
+      +media($breezeblocks-medium-screen)
+        font-size: 1.1em
+        padding: 0.5em 0.8em 2em
+
+      +media($breezeblocks-large-screen)
+        font-size: 1.3em
+        padding: 0.5em 1.3em 2em
+
+      &:hover
+        color: darken($breezeblocks-hero-background, 30%)
+
+.breezeblocks-patterns li.patterns a
+  background: $breezeblocks-body-background-color
+  &:hover
+    color: darken($breezeblocks-hero-background, 20%)
+
+.breezeblocks-components li.components a
+  background: $breezeblocks-body-background-color
+  &:hover
+    color: darken($breezeblocks-hero-background, 20%)
+
+.breezeblocks-type-systems li.type-systems a
+  background: $breezeblocks-body-background-color
+  &:hover
+    color: darken($breezeblocks-hero-background, 20%)
+
+#example
+  padding-top: 6em
+
+// Refill section
+
+section.refill
+  +clearfix
+  margin-bottom: 2em
+  padding-bottom: 1em
+  position: relative
+  > h3
+    margin-bottom: 1.3em
+    margin-top: 1em
+    padding-top: 0.5em
+
+.breezeblocks-wrapper
+  +outer-container
+  padding: 1em
+  h1.main-header
+    background-color: $breezeblocks-color
+    display: inline-block
+    padding: 0.5em
+
+// this centers the refill and sets back to text-align left below first object
+.refill-centering
+  text-align: center
+  & > *
+    display: inline-block
+    & > *
+      text-align: left
+  script
+    display: none
+
+.line-behind-text
+  border-bottom: 1px solid #cacaca
+  text-align: center
+  margin-bottom: 4.5em
+
+.line-behind-text h6
+  background: #fff
+  color: gray
+  display: inline-block
+  font-family: $breezeblocks-narrow-sans
+  font-size: 1em
+  font-weight: 500
+  padding: 0 10px
+  position: relative
+  text-transform: uppercase
+  top: 34px
+
+.refill h6
+  margin-bottom: 1.5em
+
+// Hiding and showing code
+
+.js-hide-code,
+.js-show-code
+  border-top: 1px dashed #bebcbc
+  color: #7e7a7a
+  font-size: 0.8em
+  text-transform: uppercase
+  width: 9em
+  &:hover
+    color: $breezeblocks-accent-color
+
+.js-show-code
+  display: inline-block
+  padding: 0.5em 1em
+
+.js-hide-code
+  display: none
+  padding: 0.5em 1em
+
+.refill-control
+  display: block
+  margin-bottom: 2em
+  text-align: center
+  width: 100%
+  a
+    line-height: 1.5em
+    text-decoration: none
+
+// Snippet
+
+.refill-snippet
+  margin-top: 4.5em
+  padding: 0 1em
+  table
+    border-collapse: collapse
+    margin: (1.5em / 2) 0
+    table-layout: fixed
+    width: 100%
+  th
+    font-weight: bold
+    padding: (1.5em / 2) 0
+    text-align: left
+  td
+    padding: (1.5em / 2) 0
+  tr,
+  td,
+  th
+    vertical-align: middle
+
+pre[class*="language-"]
+  background-color: #f8f8f8
+  border-top: 2px solid silver
+  height: 300px
+  line-height: 1em
+
+.snippets-table
+  display: none
+  td
+    border-bottom: 0
+  .snippet:nth-child(4n)
+    display: none
+
+.snippet
+  +media($breezeblocks-medium-screen)
+    margin-bottom: 2em
+
+  .copy-source-container
+    min-height: 3.4em
+    +media($breezeblocks-medium-screen)
+      min-height: 2.5em
+
+    +media($breezeblocks-large-screen)
+      min-height: 1em
+  &:nth-of-type(1) .copy-source
+    background: #e98065
+  &:nth-of-type(2) .copy-source
+    background: #55a1d4
+  &:nth-of-type(3) .copy-source:nth-of-type(1)
+    background: #e9c05b
+  &:nth-of-type(3) .copy-source:nth-of-type(2)
+    background: #89b981
+  .copy-source
+    border-bottom-left-radius: 10px
+    border-bottom-right-radius: 0
+    border-top-left-radius: 10px
+    border-top-right-radius: 10px
+    color: #fff
+    display: inline-block
+    font-size: 0.5em
+    font-weight: 800
+    padding: 0.4em 1em
+    text-transform: uppercase
+    &:hover,
+    &:active
+      background-color: lighten(#333, 20%)
+      color: #fff
+  a
+    text-decoration: none
+  code
+    font-size: 0.6em
+    line-height: 1.4em
+    max-height: em(400)
+    overflow: scroll
+
+.token.variable
+  background-color: transparent
+
+// Footer
+
+footer.breezeblocks-footer
+  color: silver
+  padding-bottom: 2em
+  padding-top: 1em
+  text-align: center
+  a
+    color: $breezeblocks-anchor-color
+    text-decoration: none
+  p
+    font-size: 0.8em
+    line-height: 1.5em
+    margin: 0 1em
+    +media($breezeblocks-large-screen)
+      font-size: 1em
+  .breezeblocks-footer-logo
+    margin-bottom: 2em
+  img
+    +clearfix
+    display: block
+    height: 60px
+    margin: auto
+  .footer-links
+    background: #f3f3f3
+    border-radius: 3em
+    box-shadow: inset 0 1px 2px darken(#f3f3f3, 6%)
+    display: inline-block
+    font-size: 0.8em
+    margin-bottom: 2em
+    padding: 0.6em
+    +media($breezeblocks-large-screen)
+      font-size: 1em
+      padding: 1em
+
+    li
+      display: inline
+      padding: 0.4em
+      a
+        color: #a7a7a7
+        text-decoration: none
+        &:hover
+          color: $breezeblocks-anchor-color
+
+// Adjustments
+
+.refill-smaller
+  +media($breezeblocks-large-screen)
+    margin: auto
+    width: 70%
+
+// Type Systems
+
++keyframes(fadeInAccordionTabsArticles)
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+
+.accordion-tabs-type-systems
+  $breezeblocks-border-color: gainsboro
+  $breezeblocks-border-radius: 3px
+  $breezeblocks-spacing: 1.5em
+  $breezeblocks-accent-color: #477dca
+  $breezeblocks-link-color: $breezeblocks-accent-color
+  $dark-gray: #333
+  $light-gray: #ddd
+  $breezeblocks-line-height: 1.5em
+  $tab-border-color: $breezeblocks-border-color
+  $tab-border: 1px solid $tab-border-color
+  $tab-content-background: lighten($light-gray, 15%)
+  $tab-active-background: $tab-content-background
+  $breezeblocks-body-inactive-color: $breezeblocks-body-background-color
+  $tab-inactive-hover-color: darken($light-gray, 5%)
+  $tab-mode: $breezeblocks-medium-screen
+  +clearfix
+  border: $tab-border
+  border-radius: $breezeblocks-border-radius
+  margin-bottom: $breezeblocks-spacing
+  +media($tab-mode)
+    border: none
+
+  .tab
+    +media($tab-mode)
+      display: inline
+
+    &:first-child .tab-link
+      border-top-left-radius: $breezeblocks-border-radius
+      border-top-right-radius: $breezeblocks-border-radius
+    &:last-child .tab-link
+      border-bottom-left-radius: $breezeblocks-border-radius
+      border-bottom-right-radius: $breezeblocks-border-radius
+      +media($tab-mode)
+        border-bottom-left-radius: 0
+        border-bottom-right-radius: 0
+    .tab-link-type-system
+      background-color: transparent
+      border-bottom: 1px solid $tab-border-color
+      color: $dark-gray
+      display: block
+      font-size: 0.9em
+      font-weight: 200
+      letter-spacing: 0.6px
+      padding: ($breezeblocks-spacing / 2) ($gutter / 2)
+      text-align: center
+      +media($tab-mode)
+        display: inline-block
+        border-bottom: 0
+        border-top-left-radius: $breezeblocks-border-radius
+        border-top-right-radius: $breezeblocks-border-radius
+
+      &:hover
+        color: $breezeblocks-link-color
+      &:focus
+        outline: none
+    section
+      padding: $breezeblocks-spacing $gutter
+      background: $tab-content-background
+      display: none
+      overflow: hidden
+      padding: $breezeblocks-line-height $gutter
+      width: 100%
+      +media($tab-mode)
+        +border-bottom-radius($breezeblocks-border-radius)
+        border-top: $tab-border
+        float: left
+        left: 0
+        padding: ($breezeblocks-spacing / 2) $gutter
+
+      .tab-content
+        opacity: 0
+    &.js-is-active
+      border-bottom: $tab-border
+      +media($tab-mode)
+        border-bottom: 0
+
+      .tab-link-type-system
+        background-color: $tab-active-background
+        border-bottom: 0
+        +media($tab-mode)
+          background-color: $tab-active-background
+          border-bottom: 1px solid $tab-active-background
+          border: $tab-border
+          margin-bottom: -1px
+      section
+        display: block
+        .tab-content
+          +animation-name(fadeInAccordionTabsArticles)
+          +animation-duration(1s)
+          opacity: 1