Various updates

Author: rowanhogan

_default_settings.scss

@@ -173,7 +173,7 @@ $select-focus-border-color:     $color-success !default;
 // Breakpoints
 
 $breakpoint-small:        32em !default;
-$breakpoint-medium:       50em !default;
+$breakpoint-medium:       48em !default;
 $breakpoint-large:        75em !default;
 
 

docs/css/docs.css

@@ -1,4 +1,3 @@
-@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
@@ -376,7 +375,7 @@ main address, main audio, main embed, main object, main map, main svg, main vide
   margin-bottom: 1.7em; }
 
 .container {
-  max-width: 50em;
+  max-width: 48em;
   padding: 3.4em;
   margin-left: auto;
   margin-right: auto; }
@@ -416,7 +415,8 @@ pre {
   padding: 0.85em;
   white-space: pre-wrap;
   max-height: 80vh;
-  overflow: scroll; }
+  overflow-x: hidden;
+  overflow-y: scroll; }
 
 details {
   margin-bottom: 1.7em; }
@@ -476,30 +476,30 @@ math {
 .grid-module-container {
   padding: 1.7em 1.275em;
   margin: 0 auto;
-  max-width: 52.55em; }
+  max-width: 50.55em; }
   .grid-module-container:before, .grid-module-container:after {
     content: "";
     display: table; }
   .grid-module-container:after {
     clear: both; }
-  @media screen and (min-width: 28.825em) {
+  @media screen and (min-width: 27.825em) {
     .grid-module-container {
-      max-width: 26.275em;
+      max-width: 25.275em;
       padding: 3.4em 1.275em; }
       .grid-module-container .grid-module {
-        width: 26.275em; } }
-  @media screen and (min-width: 55.1em) {
+        width: 25.275em; } }
+  @media screen and (min-width: 53.1em) {
     .grid-module-container {
-      max-width: 52.55em; } }
-  @media screen and (min-width: 81.375em) {
+      max-width: 50.55em; } }
+  @media screen and (min-width: 78.375em) {
     .grid-module-container {
-      max-width: 78.825em; } }
-  @media screen and (min-width: 107.65em) {
+      max-width: 75.825em; } }
+  @media screen and (min-width: 103.65em) {
     .grid-module-container {
-      max-width: 105.1em; } }
-  @media screen and (min-width: 133.925em) {
+      max-width: 101.1em; } }
+  @media screen and (min-width: 128.925em) {
     .grid-module-container {
-      max-width: 131.375em; } }
+      max-width: 126.375em; } }
 
 .absolute-top-left, .absolute-top-right, .fixed-top-left, .fixed-top-right {
   top: 0; }
@@ -842,13 +842,11 @@ select {
   select:hover {
     color: #5694bd;
     background-color: #d6e6ef;
-    border-color: #5694bd;
-    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path fill=\"#5694bd\" d=\"M8 12l8 8 8-8z\" /></svg>"); }
+    border-color: #5694bd; }
   select:focus {
     color: #91ce3b;
     background-color: #e2f2ca;
-    border-color: #91ce3b;
-    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path fill=\"#91ce3b\" d=\"M8 12l8 8 8-8z\" /></svg>"); }
+    border-color: #91ce3b; }
   select[multiple] {
     background-image: none; }
 
@@ -857,7 +855,9 @@ select {
     -moz-appearance: none;
     text-indent: 0.01px;
     text-overflow: '';
-    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path d=\"M8 12l8 8 8-8z\" /></svg>"); } }
+    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path d=\"M8 12l8 8 8-8z\" /></svg>"); }
+    select:hover, select:focus {
+      background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path d=\"M8 12l8 8 8-8z\" /></svg>"); } }
 
 input[type='text'], input[type='search'], input[type='tel'], input[type='email'], input[type='password'], input[type='url'], input[type='date'], input[type='datetime'], input[type='time'], input[type='number'], input[list], textarea {
   -webkit-appearance: none;
@@ -1559,7 +1559,7 @@ article header {
   .show-html:before {
     content: '</>';
     margin-right: 0.5em; }
-  @media screen and (max-width: 50em) {
+  @media screen and (max-width: 48em) {
     .show-html {
       text-indent: -9999px;
       width: 3em; }
@@ -1608,7 +1608,7 @@ article header {
         .menu li ul li a {
           text-transform: none; }
 
-@media screen and (max-width: 50em) {
+@media screen and (max-width: 48em) {
   #nav-menu + div {
     display: none !important; }
   .menu, .nav-toggle {
@@ -1717,3 +1717,46 @@ article header {
       .menu-push-toright .nav-toggle {
         left: 100%;
         margin-left: -3em; } } }
+
+footer {
+  background: whitesmoke; }
+  footer .social-share {
+    text-align: right; }
+
+.hideshare-wrap {
+  position: relative;
+  display: inline-block;
+  width: auto !important;
+  height: auto !important; }
+
+.hideshare-list {
+  position: absolute;
+  right: 0;
+  left: auto !important;
+  bottom: 100% !important;
+  top: auto !important;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+  background: white;
+  width: auto !important;
+  margin-bottom: 0.75em;
+  white-space: nowrap; }
+  .hideshare-list:after {
+    content: '';
+    position: absolute;
+    border: 0.5em solid transparent;
+    border-top-color: white;
+    bottom: -1em;
+    right: 1.5em; }
+  .hideshare-list li {
+    display: inline-block;
+    zoom: 1;
+    *display: inline; }
+    .hideshare-list li a {
+      display: block;
+      padding: 0.25em 0.5em;
+      border-left: thin solid #eeeeee; }
+    .hideshare-list li:first-child a {
+      border-left-width: 0; }

docs/css/docs.scss

@@ -1,4 +1,3 @@
-@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
 
 // Settings
 
@@ -363,3 +362,59 @@ article header {
     }
   }
 }
+
+
+footer {
+  background: whitesmoke;
+
+  .social-share { text-align: right; }
+}
+
+
+.hideshare-wrap {
+  position: relative;
+  display: inline-block;
+  width: auto !important;
+  height: auto !important;
+}
+
+.hideshare-list {
+  position: absolute;
+  right: 0;
+  left: auto !important;
+  bottom: 100% !important;
+  top: auto !important;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;
+  background: white;
+  width: auto !important;
+  margin-bottom: 0.75em;
+  white-space: nowrap;
+
+  &:after {
+    content: '';
+    position: absolute;
+    border: 0.5em solid transparent;
+    border-top-color: white;
+    bottom: -1em;
+    right: 1.5em;
+  }
+
+  li {
+    display: inline-block;
+    zoom: 1;
+    *display: inline;
+
+    a {
+      display: block;
+      padding: 0.25em .5em;
+      border-left: thin solid #eee;
+    }
+
+    &:first-child a {
+      border-left-width: 0;
+    }
+  }
+}

docs/index.html

@@ -21,17 +21,22 @@
   <meta content="http://www.terrain.io" property="og:url">
   <meta content="A collection of structural stylesheets for your projects." property="og:description">
 
-  <meta name="description" content="A collection of structural stylesheets for your projects.">
+  <meta name="description" content="A collection of structural stylesheets for your web projects.">
+  <meta name="keywords" content="css, stylesheets, sass, scss, front-end, design, responsive">
+
   <meta name="viewport" content="width = device-width, initial-scale = 1">
 
   <link rel="icon" href="favicon.ico">
+  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic' rel='stylesheet' type='text/css'>
+
   <link rel="stylesheet" href="css/docs.css">
 </head>
 
 <body class="menu-push">
   <header class="hero">
     <div class="hero-background">
       <img id="heroImage" class="hero-image" src="images/mountain.jpg" />
+      <!-- Photo by Uwe Gille - http://commons.wikimedia.org/wiki/File:Nuptse-fromLobuche.jpg -->
       <svg id='triangleGrid' preserveaspectratio='xMidYMin slice' version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000">
         <rect x="-17.678" y="-17.678" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0 0)" fill="none" width="35.355" height="35.355"/>
         <rect x="32.322" y="-17.678" transform="matrix(0.7071 -0.7071 0.7071 0.7071 14.6447 35.3553)" fill="none" width="35.355" height="35.355"/>
@@ -1594,22 +1599,47 @@ <h2>Menus</h2>
   </main>
 
 
-  <footer>
+  <div id="comments">
     <div class="container">
-      Made by <a href="https://triggerapp.com">Trigger</a>.
+      <div id="disqus_thread"></div>
+      <script type="text/javascript">
+          /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+          var disqus_shortname = 'terraincss'; // required: replace example with your forum shortname
+
+          /* * * DON'T EDIT BELOW THIS LINE * * */
+          (function() {
+              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+              dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+          })();
+      </script>
+      <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+      <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+    </div>
+  </div>
 
-      &nbsp;&nbsp;&nbsp;
 
-      <span>Contact us: <a href="https://twitter.com/terraincss">@terraincss</a></span>
+  <footer>
+    <div class="container">
+      <div class="grid-container">
+        <div class='one-half'>
+          Made by <a href="https://triggerapp.com">Trigger</a>.
+          <span>Contact us: <a href="https://twitter.com/terraincss">@terraincss</a></span>
+        </div>
+        <div class='one-half social-share'>
+          <a class="button submit share-button" href="#">Share</a>
+        </div>
+      </div>
     </div>
   </footer>
 
   <div id="nav-toggle-overlay" class="nav-toggle-overlay"></div>
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.sticky-kit.js"></script>
-
+  <script type="text/javascript" src="js/share.min.js"></script>
   <script type="text/javascript" src="js/color-sampler.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.0/fastclick.min.js"></script>
   <script type="text/javascript" src="js/main.js"></script>
 
   <script>

docs/js/main.js

@@ -1,7 +1,22 @@
 (function (global) {
 
+  $(".share-button").hideshare({
+    media: "http://triggerapp.s3.amazonaws.com/images/terrain/avatar.jpg",
+    description: "A collection of structural stylesheets for your projects.",
+    position: "top",
+    facebook: true,
+    twitter: true,
+    googleplus: true,
+    pinterest: false,
+    linkedin: false
+  });
+
   $("#nav-menu").stick_in_parent();
 
+  setTimeout(function() {
+    $(document.body).trigger("sticky_kit:recalc");
+  }, 7500);
+
   $('[href=' + window.location.hash + ']').addClass('active')
 
   $("#nav-menu a").on('click', function(e) {
@@ -120,3 +135,8 @@
     });
   })();
 })(window || this);
+
+
+$(function() {
+  FastClick.attach(document.body);
+});

docs/js/share.min.js

@@ -32,14 +32,12 @@ select {
     color: $select-hover-foreground-color;
     background-color: $select-hover-background-color;
     border-color: $select-hover-border-color;
-    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path fill=\"#{ $select-hover-foreground-color }\" d=\"M8 12l8 8 8-8z\" /></svg>");
   }
 
   &:focus {
     color: $select-focus-foreground-color;
     background-color: $select-focus-background-color;
     border-color: $select-focus-border-color;
-    background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path fill=\"#{ $select-focus-foreground-color }\" d=\"M8 12l8 8 8-8z\" /></svg>");
   }
 
   &[multiple] { background-image: none; }
@@ -56,5 +54,9 @@ select {
     text-indent: 0.01px;
     text-overflow: '';
     background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path d=\"M8 12l8 8 8-8z\" /></svg>");
+
+    &:hover, &:focus {
+      background-image: url("data:image/svg+xml;utf8, <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\"><path d=\"M8 12l8 8 8-8z\" /></svg>");
+    }
   }
 }

terrain/interactive/_selects.scss

@@ -49,7 +49,8 @@ pre {
   padding: $line-height / 2;
   white-space: pre-wrap;
   max-height: 80vh;
-  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 details {