RubyGems - refills - Versions diffs - 0.0.2 → 0.1.0 - Mend

refills 0.0.2 → 0.1.0

Files changed (810) hide show

data/source/{vendor/javascripts → javascripts/vendor}/prism.js RENAMED Viewed

File without changes

data/source/{vendor/javascripts → javascripts/vendor}/smooth-scroll.js RENAMED Viewed

File without changes

data/source/layouts/layout.erb CHANGED Viewed

@@ -1,32 +1,105 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-  <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
-  <link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css'>
-  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
     <meta charset="utf-8">
-    <!-- Always force latest IE rendering engine or request Chrome Frame -->
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <!-- Use title if it's in the page YAML frontmatter -->
-    <title><%= current_page.data.title || "The Middleman" %></title>
-    <link rel="shortcut icon" href="favicon.ico" />
+    <meta name="description" content="Refills are prepackaged patterns and components built with Bourbon, Neat and Bitters.">
+    <title><%= current_page.data.title %></title>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald:400,300,700|Lusitana:400,700|Open+Sans:400,800">
     <%= stylesheet_link_tag "all" %>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-    <script type='text/javascript' src='javascripts/jquery.erToc.js'></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="/javascripts/jquery.erToc.js"></script>
+    <script type="text/javascript">
+      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.0.1";
+      analytics.load("zqKH1nPNSA5uCwV1XiBz3LvGfPH6Muq9");
+      analytics.page()
+      }}();
+    </script>
   </head>
   <body class="<%= page_classes %>">
+    <nav class="bourbon">
+      <ul>
+        <li><a href="//bourbon.io" class="bourbon">Bourbon</a></li>
+        <li><a href="//neat.bourbon.io" class="neat">Neat</a></li>
+        <li><a href="//bitters.bourbon.io" class="bitters">Bitters</a></li>
+        <li><a href="//refills.bourbon.io" class="refills current">Refills</a></li>
+      </ul>
+      <h1>Maintained by the design team at <a href="//thoughtbot.com">thoughtbot</a></h1>
+    </nav>
     <section class="container">
       <section class="inner-content">
         <%= yield %>
         <footer class="refills-footer">
-        <img src="https://raw.github.com/Magnus-G/Random/master/ralph-gray.png" alt="">
-          Refills is maintained and funded by <a href="http://thoughtbot.com">thoughtbot</a>. <br>Refills is Copyright © 2014 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
+          <ul class="footer-links">
+            <li><%= link_to 'Patterns', '/index.html' %></li>
+            <li><%= link_to 'Components', '/components.html' %></li>
+            <li><%= link_to 'Type Systems', '/type-systems.html' %></li>
+          </ul>
+          <div class="refills-footer-logo">
+            <img src="/images/ralph-gray.png" alt="thoughtbot Ralph logo mark">
+          </div>
+          <p>Refills is maintained and funded by <a href="//thoughtbot.com">thoughtbot, inc</a>.</p>
+          <p>Copyright &copy; 2014&ndash;2015 <a href="//thoughtbot.com">thoughtbot, inc</a>. Refills is free software, and may be redistributed under the terms specified in the <a href="//github.com/thoughtbot/refills/blob/master/LICENSE.md">license</a>.</p>
         </footer>
       </section>
     </section>
+    <script src="https://maps.googleapis.com/maps/api/js"></script>
+    <script>
+      var bittersMap = (function () {
+        var myLatlng = new google.maps.LatLng(59.342457, 18.057340),
+            mapCenter = new google.maps.LatLng(59.340458, 18.057340),
+            mapCanvas = document.getElementById('map_canvas'),
+            mapOptions = {
+              center: mapCenter,
+              zoom: 13,
+              scrollwheel: false,
+              draggable: true,
+              disableDefaultUI: true,
+              mapTypeId: google.maps.MapTypeId.ROADMAP
+            },
+            map = new google.maps.Map(mapCanvas, mapOptions),
+            contentString =
+              '<div id="content">'+
+              '<div id="siteNotice">'+
+              '</div>'+
+              '<h1 id="firstHeading" class="firstHeading">thoughtbot</h1>'+
+              '<div id="bodyContent"'+
+              '<p>Sveavägen 98</p>'+
+              '</div>'+
+              '</div>',
+            infowindow = new google.maps.InfoWindow({
+              content: contentString,
+              maxWidth: 300
+            }),
+            marker = new google.maps.Marker({
+              position: myLatlng,
+              map: map,
+              title: 'thoughtbot (Sweden)'
+            });
+        return {
+          init: function () {
+            map.set('styles', [{
+              featureType: 'landscape',
+              elementType: 'geometry',
+              stylers: [
+                { hue: '#ffff00' },
+                { saturation: 30 },
+                { lightness: 10}
+              ]}
+            ]);
+            google.maps.event.addListener(marker, 'click', function () {
+              infowindow.open(map,marker);
+            });
+          }
+        };
+      }());
+      bittersMap.init();
+    </script>
   </body>
-  <%= javascript_include_tag  "all" %>
+  <%= javascript_include_tag "all" %>
 </html>

data/source/refills-hero.html.erb ADDED Viewed

@@ -0,0 +1,7 @@
+<div class="refills-header">
+  <div class="refills-logo">
+    <img src="/images/refills-logo.svg" alt="Refills logo">
+  </div>
+  <h2><span>Refills</span> are prepackaged patterns and components, built on top of <a href="http://www.bourbon.io">Bourbon</a> and <a href="http://neat.bourbon.io/">Neat</a>.</h2>
+  <p>Managed by <a href="http://www.thoughtbot.com">thoughtbot</a>, instructions at <a href="https://github.com/thoughtbot/refills">GitHub</a></p>
+</div>

data/source/refills-menu.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<ul class="refills-menu">
+  <li class="menu-item patterns"><%= link_to 'Patterns', '/index.html' %></li>
+  <li class="menu-item components"><%= link_to 'Components', '/components.html' %></li>
+  <li class="menu-item type-systems"><%= link_to 'Type Systems', '/type-systems.html' %></li>
+</ul>

data/source/refills-page-scripts.html.erb ADDED Viewed

@@ -0,0 +1,72 @@
+<!-- Type System tabs -->
+<script>
+  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);
+    }
+  });
+</script>
+<!-- Show Code -->
+<script>
+  $('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();
+  });
+</script>
+<!-- Copy Code -->
+<script>
+  $(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);
+    });
+  });
+</script>
+<script>
+  $(document).ready(function(){
+    $('.js-menu-trigger-refills').on('click touchstart', function(e){
+      $('.er_toc').toggleClass('is-visible');
+      $('.js-menu-screen-refills').toggleClass('is-visible');
+      e.preventDefault();
+    });
+    $('.js-menu-screen-refills').on('click touchstart', function(e){
+      $('.er_toc').toggleClass('is-visible');
+      $('.js-menu-screen-refills').toggleClass('is-visible');
+      e.preventDefault();
+    });
+  });
+</script>

data/source/stylesheets/_bourbon-nav.scss ADDED Viewed

@@ -0,0 +1,87 @@
+$bourbon-nav-background-color: #5b5e63;
+nav.bourbon {
+  @include clearfix;
+  background-color: $bourbon-nav-background-color;
+  padding: 0 2em 0 1em;
+  @include media(max-width em(510)) {
+    padding: 0;
+  };
+  ul {
+    text-align: center;
+    @include 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;
+    @include media(max-width em(515)) {
+      padding: 0.75em 0.5em;
+      text-align: center;
+    };
+    @include 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, refills;
+    @each $site in $sites {
+      &.#{$site} {
+        background-image: url("/images/bourbon-nav/#{$site}.png");
+        @include hidpi {
+          background-image: url("/images/bourbon-nav/#{$site}@2x.png");
+          background-size: 20%;
+        }
+        @include media(max-width em(515)) {
+          background-image: none;
+        };
+      }
+    }
+  }
+  h1 {
+    color: rgba(#fff, 0.6);
+    float: right;
+    font-size: 1em;
+    @include media(max-width em(900)) {
+      display: none;
+    };
+    a {
+      padding: 1em 0;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}

data/source/stylesheets/_refills-nav.scss CHANGED Viewed

@@ -5,30 +5,44 @@ section.inner-content {
 }
 .refills-menu-anchor {
-  @include inline-block;
-  cursor: pointer;
-  border: 1px solid gray;
-  height: 50px;
-  width: 50px;
-  padding: .7em 1em;
+  @include position(fixed, 4.5em null null 1em);
+  @include size(50px);
+  border: 1px solid darken(desaturate(#93e9be, 50), 15%);
   border-radius: 50%;
-  font-size: $base-font-size;
-  margin-bottom: $base-line-height;
-  position: fixed;
-  top: 1em;
-  left: 1em;
+  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 {
-    height: 26px;
-    width: 30px;
+    @include size(30px 26px);
+    max-width: 100%;
   }
 }
+.refills-menu-anchor-moved {
+  top: 1em;
+}
+.fixedsticky-dummy {
+  height: 0 !important;
+}
 .refills-menu-screen {
-  @include position(fixed, 0px 0px 0px 0px);
+  @include position(fixed, 0 0 0 0);
   @include transition;
-  background: teal;
+  background-color: teal;
   opacity: 0;
   visibility: hidden;
   z-index: 999998;
@@ -39,53 +53,56 @@ section.inner-content {
   }
 }
-.er_toc_title {
-  display: none;
-}
+.er_toc_title,
 .er_toc_top {
   display: none;
 }
 .er_toc {
-  @include position(fixed, 0px auto 0px 0px);
+  $base-line-height: 1.5em !default;
+  @include position(fixed, 0 auto 0 0);
   @include size(220px 100%);
   @include transform(translateX(-220px));
-  @include transition(all .2s linear);
-  overflow-y: scroll;
+  @include transition(all 0.2s linear);
+  background-color: black;
+  overflow-y: auto;
+  -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
-  background: #1D3842;
+  transition: all 0.2s linear;
   z-index: 999999;
   ul {
+    margin: 0;
     padding: 1em;
   }
-  ul li {
+  ul li {
     a {
-      color: $light-gray;
-      font-weight: 800;
-      font-size: $base-font-size;
+      color: darken(#fff, 15%);
+      font-size: 1em;
+      font-weight: 300;
+      line-height: $base-line-height;
+      text-decoration: none;
+      &:focus,
       &:hover {
-        color: #FFF;
+        color: #fff;
         text-decoration: none;
       }
     }
   }
   ul ul {
-    margin-top: .5em;
     margin-bottom: 1em;
+    margin-top: 0.5em;
     padding: 0;
   }
   ul ul li a {
     font-weight: 200;
   }
   &.is-visible {
     @include transform(translateX(0));
   }
 }

data/source/stylesheets/_refills-styles.scss CHANGED Viewed

@@ -1,362 +1,453 @@
-@mixin texture($bg-color, $texture-number, $inverted) { $texture-list: "paper.png"             // Fabric and paper
-  "rice_paper.png"
-  "noise_lines.png"
-  "fabric_plaid.png"
-  "first_aid_kit.png"
-  "texturetastic_gray.png"
-  "lil_fiber.png"
-  "tex2res5.png"
-  "skin_side_up.png"
-  "light_noise_diagonal.png"
-  "chruch.png"
-  "45degreee_fabric.png"
-  "bgnoise_lg.png"
-  "little_pluses.png"
-  "squairy_light.png"
-  "white_texture.png"
-  "binding_light.png"
-  "double_lined.png"      // Grid, mesh and squares
-  "grid.png"
-  "absurdidad.png"
-  "grid_noise.png"
-  "fancy_deboss.png"
-  "graphy.png"
-  "noise_pattern_with_crosslines.png"
-  "old_mathematics.png"
-  "ps_neutral.png"
-  "subtle_freckles.png"
-  "wavegrid.png"
-  "az_subtle.png"
-  "tiny_grid.png"
-  "wavegrid.png"
-  "gridme.png"
-  "noisy_grid.png"
-  "subtlenet2.png"
-  "white_carbon.png"
-  "lghtmesh.png"
-  "p5.png"                 // Dots
-  "worn_dots.png"
-  "subtle_dots.png"
-  "brillant.png"
-  "farmer.png"
-  "retina_dust.png"        // Lines
-  "pinstripe.png"
-  "line_horizontal1.png"
-  "line_horizontal2.png"
-  "linen.png"
-  "vintage_speckles.png"   // Patina and irregular
-  "subtle_grunge.png"
-  "old_wall.png"
-  "brushed.png"
-  "stucco.png"
-  "mooning.png"
-  "husk.png"
-  "concrete_wall_2.png"
-  "noisy.png"
-  "concrete_wall_3.png"
-  "subtle_surface.png"
-  "dust.png"
-  "light_alu.png"
-  "corrugation.png"
-  "kindajean.png"           // Diagonal
-  "line_diagonal1.png"
-  "line_diagonal2.png"
-  "groovepaper.png"
-  "brushed_alu.png"
-  "rough_diagonal.png"
-  "diagonal-noise.png"
-  "cross_scratches.png"
-  "striped_lens.png"
-  "debut_light.png"
-  "diagonal_waves.png"    // Special
-  "honey_im_subtle.png"
-  "pw_maze_white.png"
-  "subtle_zebra_3d.png"
-  "white_wave.png"
-  "circles.png"
-  "crosses.png"
-  "grilled.png"
-  "pw_pattern.png"
-  "struckaxiom.png"
-  "vichy.png"
-  "wavecut.png"
-  "whitey.png"
-  "cream_pixels.png"
-  "grey.png"
-  "shinedotted.png"
-  "stacked_circles.png"
-  "noisy_grid_simple.png"
-  ;
-  @if ($inverted == 1) {
-    background: url("https://raw.github.com/Magnus-G/texture-mixin/gh-pages/textures/inverted/#{nth($texture-list, $texture-number)}");
-    background-color: $bg-color;
-  }
-  @else {
-    background: url("https://raw.github.com/Magnus-G/texture-mixin/gh-pages/textures/#{nth($texture-list, $texture-number)}");
-    background-color: $bg-color;
-  }
+body {
+  -webkit-font-smoothing: antialiased;
 }
-$refills-color: lighten(desaturate(teal, 60), 40);
-$base-body-color: white;
-$refills-nav-height: 60px;
-$refills-anchor-color: #FF4286;
+$refills-body-background-color: #fff;
-.external a {
-  height: 84px;
-  width: 84px;
-  border: 2px solid white;
-  padding: 2px;
-  display: block;
-  margin: auto;
-  margin-bottom: 3em;
-  background-image: url(../images/cat.png);
-  background-size: 80px 80px;
-  background-repeat: no-repeat;
+nav.bourbon {
+  text-rendering: optimizeLegibility;
-  &:hover {
-    cursor: pointer;
-    border: 2px solid yellow;
-    border-radius: 50%;
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    li a {
+      text-decoration: none;
+    }
+  }
+  h1 {
+    margin: 0;
+    a {
+      text-decoration: none;
+    }
   }
 }
+$refills-color: lighten(desaturate(teal, 60%), 40%);
+$refills-accent-color: #477dca;
+$refills-nav-height: 60px;
+$refills-logo-color: #93e9be;
+$refills-anchor-color: #f55481;
+$refills-hero-background: #e7f1ec;
+$refills-highlight-color: #bbb295;
+$refills-narrow-sans: "Oswald", sans-serif;
+$refills-white-shadow: 0 1px 1px transparentize(#fff, 0.6);
+$refills-medium-screen: em(640);
+$refills-large-screen: em(860);
+$refills-serif: "Lusitana", $georgia;
+$refills-second-serif: $georgia;
+@mixin refills-inset {
+  background: darken($refills-hero-background, 2%);
+  box-shadow: inset 0 1px 2px darken($refills-hero-background, 7%), $refills-white-shadow;
+  text-shadow: $refills-white-shadow;
+}
 body {
-  background-color: $base-body-color;
-  min-width: 320px;
   -webkit-backface-visibility: hidden;
+  background: $refills-body-background-color;
+  min-width: 320px;
 }
 .refills-header {
+  @extend .refills-header;
   @include clearfix;
-  background-color: #DDF0EF;
+  background-color: $refills-hero-background;
   clear: both;
-  margin-bottom: 4em;
-  width: 100%;
-  text-align: center;
-  @include texture(#DDF0EF, 30, 1);
+  margin-bottom: 1em;
   padding: 5em 0;
+  text-align: center;
+  width: 100%;
-  @include media($medium-screen) {
+  @include media($refills-medium-screen) {
+    margin-bottom: 4em;
     padding: 6em 0;
   }
-  @include media($large-screen) {
-    padding: 9em 0;
+  @include media($refills-large-screen) {
+    margin-bottom: 4em;
+    padding: 6em 0 11em 0;
   }
-  h1 {
-    font-size: 1em;
-    text-align: center;
-    text-transform: uppercase;
-    padding: .5em 1em;
-    background: #FF4286;
-    color: white;
+  .refills-logo {
     display: inline-block;
-    margin-bottom: 2em;
-    font-family: 'Open Sans', sans-serif;
-    font-weight: 800;
+    margin: 0 auto 1.4em auto;
+    @include media($refills-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;
+      @include media($refills-medium-screen) {
+        margin-bottom: 2em;
+        max-width: 8em;
+        max-height: 8em;
+        padding: 0.5em;
+      }
+    }
   }
   h2 {
-    font-size: 1.8em;
-    text-align: center;
+    font-family: $refills-second-serif;
+    font-size: 1.4em;
     font-weight: 100;
-    font-family: 'Lusitana', serif;
-    margin: 0 0 $base-line-height*.25;
-    margin: auto;
+    margin: 0 auto 2em auto;
     max-width: 90%;
-    margin-bottom: 1em;
+    text-align: center;
+    line-height: 1.4em;
-    @include media($medium-screen) {
-      font-size: 3em;
-      max-width: 90%;
+    @include media($refills-medium-screen) {
+      font-size: 2em;
       margin-bottom: 1em;
+      max-width: 90%;
     }
-    @include media($large-screen) {
+    @include media($refills-large-screen) {
       font-size: 3em;
-      max-width: 60%;
-      margin-bottom: .8em;
+      margin-bottom: 0.8em;
+      line-height: 1.3em;
+      max-width: 55%;
     }
   }
   h3 {
-    text-align: center;
-    font-weight: 200;
     font-size: 1.3em;
+    font-weight: 200;
     margin-bottom: 1em;
+    text-align: center;
   }
   a {
     color: $refills-anchor-color;
+    text-decoration: none;
+    &:focus,
+    &:hover {
+      color: lighten($refills-anchor-color, 10%);
+    }
   }
   p {
-    font-family: 'Open Sans', sans-serif;
+    @include refills-inset;
+    border-radius: 30px;
+    color: darken(desaturate($refills-logo-color, 50%), 15%);
     display: inline;
-    padding-top: 1em;
-    @include media($medium-screen) {
-      border-top: 1px solid darken(#DDF0EF, 20);
+    font-family: $refills-narrow-sans;
+    font-size: 0.8em;
+    font-weight: 400;
+    padding: 0.5em 1.4em;
+    @include media($refills-large-screen) {
+      font-size: 0.8em;
     }
   }
 }
-/////////////////////////////////
 .menu-wrapper {
   @include clearfix;
 }
-.refills-wrapper {
-    @include outer-container;
-    padding: 1em;
+// Refill menu
-  h1.main-header {
-    background-color: $refills-color;
-    display: inline-block;
-    padding: 0.5em;
+ul.refills-menu {
+  font-weight: normal;
+  margin-bottom: 5em;
+  margin: -3.3em auto 0 auto;
+  text-align: center;
+  @include media($refills-medium-screen) {
+    margin: -6em auto 0 auto;
+  }
+  @include media($refills-large-screen) {
+    margin: -6.7em auto 0 auto;
+  }
+  .menu-item {
+    display: inline;
+    a {
+      text-decoration: none;
+      border-radius: 3px;
+      color: darken($refills-hero-background, 20%);
+      font-family: "Lusitana", serif;
+      font-size: 0.9em;
+      padding: 0.5em 0.5em 2em;
+      @include media($refills-medium-screen) {
+        font-size: 1.1em;
+        padding: 0.5em 0.8em 2em;
+      }
+      @include media($refills-large-screen) {
+        font-size: 1.3em;
+        padding: 0.5em 1.3em 2em;
+      }
+      &:hover {
+        color: darken($refills-hero-background, 30%);
+      }
+    }
   }
 }
-h5 {
-  font-family: 'Lusitana', serif;
-  font-size: 2em;
-  color: #BBB295;
-  text-align: center;
+.refills-patterns li.patterns a {
+  background: $refills-body-background-color;
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+.refills-components li.components a {
+  background: $refills-body-background-color;
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+.refills-type-systems li.type-systems a {
+  background: $refills-body-background-color;
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+#example {
+  padding-top: 6em;
 }
-//////////////////
+// Refill section
-.refill {
+section.refill {
+  @include clearfix;
   margin-bottom: 2em;
   padding-bottom: 1em;
   position: relative;
-  @include clearfix;
   > h3 {
-    padding-top: 0.5em;
-    margin-top: 1em;
     margin-bottom: 1.3em;
+    margin-top: 1em;
+    padding-top: 0.5em;
+  }
+}
+.refills-wrapper {
+  @include outer-container;
+  padding: 1em;
+  h1.main-header {
+    background-color: $refills-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;
+      text-align: left;
     }
   }
   script {
     display: none;
   }
 }
 .line-behind-text {
+  border-bottom: 1px solid #cacaca;
   text-align: center;
-  border-bottom: 1px solid #CACACA;
-  margin-bottom: $base-line-height *3;
+  margin-bottom: 4.5em;
 }
 .line-behind-text h6 {
-  font-family: 'Oswald', sans-serif;
-  text-transform: uppercase;
+  background: #fff;
   color: gray;
-  font-weight: 500;
   display: inline-block;
-  position: relative;
+  font-family: $refills-narrow-sans;
   font-size: 1em;
-  top: 34px;
-  background: white;
+  font-weight: 500;
   padding: 0 10px;
+  position: relative;
+  text-transform: uppercase;
+  top: 34px;
 }
 .refill h6 {
-  margin-bottom: $base-line-height;
+  margin-bottom: 1.5em;
 }
-/////////////////////////
+// Hiding and showing code
-.js-hide-code,
+.js-hide-code,
 .js-show-code {
-  border-top: 1px dashed #BEBCBC;
-  color: #7E7A7A;
+  border-top: 1px dashed #bebcbc;
+  color: #7e7a7a;
+  font-size: 0.8em;
   text-transform: uppercase;
-  font-size: .8em;
   width: 9em;
   &:hover {
-    // background: darken(desaturate(#F5F2F0, 10), 3);
-    color: $base-accent-color;
+    color: $refills-accent-color;
   }
 }
 .js-show-code {
   display: inline-block;
   padding: 0.5em 1em;
-  // border-radius: $base-border-radius;
 }
 .js-hide-code {
   display: none;
   padding: 0.5em 1em;
-  // border-radius: $base-border-radius;
 }
-.refill-snippet {
-  margin-top: $base-line-height *3;
-}
 .refill-control {
   display: block;
-  text-align: center;
   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-"] {
-  height: 300px;
+  background-color: #f8f8f8;
   border-top: 2px solid silver;
-  background: #F8F8F8;
+  height: 300px;
   line-height: 1em;
 }
-.copy-source {
-  background-color: lighten($dark-gray, 20);
-  border-radius: 10px;
-  font-size: $base-font-size/2;
-  color: white;
-  text-transform: uppercase;
-  font-weight: 800;
-  padding: 0.4em 1em;
+.snippets-table {
+  display: none;
-  &:hover, &:active {
-    background-color: lighten($dark-gray, 20);
-    color: white;
+  td {
+    border-bottom: 0;
+  }
+  .snippet:nth-child(4n) {
+    display: none;
   }
 }
 .snippet {
-  display: none;
-  @include media($medium-screen) {
-    width: 50%;
-    float: left;
+  @include media($refills-medium-screen) {
     margin-bottom: 2em;
   }
+  .copy-source-container {
+    min-height: 3.4em;
+    @include media($refills-medium-screen) {
+      min-height: 2.5em;
+    }
+    @include media($refills-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 {
-    max-height: em(400);
-    font-size: .7em;
+    font-size: 0.6em;
     line-height: 1.4em;
+    max-height: em(400);
     overflow: scroll;
   }
 }
@@ -365,126 +456,182 @@ pre[class*="language-"] {
   background-color: transparent;
 }
+// Footer
 footer.refills-footer {
-  padding-top: 1em;
-  padding-bottom: 2em;
   color: silver;
+  padding-bottom: 2em;
+  padding-top: 1em;
   text-align: center;
   a {
     color: $refills-anchor-color;
+    text-decoration: none;
+  }
+  p {
+    font-size: 0.8em;
+    line-height: 1.5em;
+    margin: 0 1em;
+    @include media($refills-large-screen) {
+      font-size: 1em;
+    }
+  }
+  .refills-footer-logo {
+    margin-bottom: 2em;
   }
   img {
+    @include 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;
+    @include media($refills-large-screen) {
+      font-size: 1em;
+      padding: 1em;
+    }
+    li {
+      display: inline;
+      padding: 0.4em;
+      a {
+        color: #a7a7a7;
+        text-decoration: none;
+        &:hover {
+          color: $refills-anchor-color;
+        }
+      }
+    }
   }
 }
-///////////////////////// refill adjustments
+// Adjustments
 .refill-smaller {
-  @include media($large-screen) {
-    width: 70%;
+  @include media($refills-large-screen) {
     margin: auto;
+    width: 70%;
   }
 }
-/////////////////////////
+// Type Systems
 @include keyframes(fadeInAccordionTabsArticles) {
-  0% { opacity: 0; }
+  0%   { opacity: 0; }
   100% { opacity: 1; }
 }
 .accordion-tabs-type-systems {
-  $tab-border-color: $base-border-color;
+  $refills-border-color: gainsboro;
+  $refills-border-radius: 3px;
+  $refills-spacing: 1.5em;
+  $refills-accent-color: #477dca;
+  $refills-link-color: $refills-accent-color;
+  $dark-gray: #333;
+  $light-gray: #ddd;
+  $refills-line-height: 1.5em;
+  $tab-border-color: $refills-border-color;
   $tab-border: 1px solid $tab-border-color;
-  $tab-content-background: lighten($light-gray, 15);
+  $tab-content-background: lighten($light-gray, 15%);
   $tab-active-background: $tab-content-background;
-  $tab-inactive-color: $base-body-color;
-  $tab-inactive-hover-color: darken($light-gray, 5);
-  $tab-mode: $medium-screen;
+  $refills-body-inactive-color: $refills-body-background-color;
+  $tab-inactive-hover-color: darken($light-gray, 5%);
+  $tab-mode: $refills-medium-screen;
   @include clearfix;
-  border-radius: $base-border-radius;
   border: $tab-border;
-  margin-bottom: $base-line-height;
+  border-radius: $refills-border-radius;
+  margin-bottom: $refills-spacing;
   @include media($tab-mode) {
     border: none;
   }
   .tab {
     @include media($tab-mode) {
       display: inline;
     }
     &:first-child .tab-link {
-      border-top-left-radius: $base-border-radius;
-      border-top-right-radius: $base-border-radius;
+      border-top-left-radius: $refills-border-radius;
+      border-top-right-radius: $refills-border-radius;
     }
     &:last-child .tab-link {
-      border-bottom-left-radius: $base-border-radius;
-      border-bottom-right-radius: $base-border-radius;
+      border-bottom-left-radius: $refills-border-radius;
+      border-bottom-right-radius: $refills-border-radius;
       @include 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: .9em;
-      letter-spacing: .6px;
+      font-size: 0.9em;
       font-weight: 200;
-      padding: $base-line-height/2 $gutter/2;
+      letter-spacing: 0.6px;
+      padding: ($refills-spacing / 2) ($gutter / 2);
       text-align: center;
       @include media($tab-mode) {
-        @include inline-block;
+        display: inline-block;
         border-bottom: 0;
-        border-top-right-radius: $base-border-radius;
-        border-top-left-radius: $base-border-radius;
+        border-top-left-radius: $refills-border-radius;
+        border-top-right-radius: $refills-border-radius;
       }
       &:hover {
-        color: $base-link-color;
+        color: $refills-link-color;
       }
       &:focus {
         outline: none;
       }
     }
     section {
-      padding: $base-line-height $gutter;
+      padding: $refills-spacing $gutter;
       background: $tab-content-background;
       display: none;
       overflow: hidden;
+      padding: $refills-line-height $gutter;
       width: 100%;
       @include media($tab-mode) {
-        border-bottom-left-radius: $base-border-radius;
-        border-bottom-right-radius: $base-border-radius;
+        @include border-bottom-radius($refills-border-radius);
         border-top: $tab-border;
         float: left;
         left: 0;
-        padding: $base-line-height/2 $gutter;
+        padding: ($refills-spacing / 2) $gutter;
       }
       .tab-content {
         opacity: 0;
       }
     }
     &.js-is-active {
       border-bottom: $tab-border;
@@ -495,15 +642,15 @@ footer.refills-footer {
       .tab-link-type-system {
         background-color: $tab-active-background;
         border-bottom: 0;
         @include media($tab-mode) {
           background-color: $tab-active-background;
-          border: $tab-border;
           border-bottom: 1px solid $tab-active-background;
+          border: $tab-border;
           margin-bottom: -1px;
         }
       }
       section {
         display: block;