Thinner text and some other stuff.

Gruntfile.js

@@ -47,7 +47,7 @@ module.exports = function(grunt) {
       dist: {
         files: {
           '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
-          '<%= meta.distPath %>theme-classic.css': '<%= meta.srcPath %>sass/theme-classic.scss',
+          '<%= meta.distPath %>ratchet-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss',
           '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss'
         }
       }

docs-assets/css/docs.css

@@ -40,7 +40,7 @@ h1, h2, h3, h4, h5, h6 {
 .docs-header .docs-title {
   margin: 0;
   font-size: 40px;
-  font-weight: 400;
+  font-weight: 300;
 }
 .docs-header .docs-subtitle {
   margin-top: 0;
@@ -51,6 +51,22 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 30px;
 }
 
+.social {
+  padding: 0;
+  list-style: none;
+  text-align: center;
+}
+.social li {
+  height: 20px;
+  padding-bottom: 25px;
+  display: inline-block;
+  vertical-align: top;
+}
+.social [class*="button"] {
+  padding: 0;
+  border: 0;
+}
+
 .container {
   margin-left: auto;
   margin-right: auto;

index.html

@@ -16,18 +16,16 @@ base_url: "./"
   </div>
 </header>
 
-<!--<section class="social">
+<ul class="social">
-    <ul>
+  <li>
-      <li>
+    <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
-        <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+  </li>
-      </li>
+  <li>
-      <li>
+    <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://maker.github.com/ratchet/" data-text="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components." data-via="GoRatchet">Tweet</a>
-        <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://maker.github.com/ratchet/" data-text="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components." data-via="GoRatchet">Tweet</a>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+  </li>
-      </li>
+  <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
-      <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
+    Follow @GoRatchet</a>
-        Follow @GoRatchet</a>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+  </li>
-      </li>
+</ul>
-    </ul>
-  </section>-->

lib/sass/docs.scss

@@ -36,7 +36,7 @@ h1, h2, h3, h4, h5, h6 {
   .docs-title {
     margin: 0;
     font-size: 40px;
-    font-weight: 400;
+    font-weight: 300;
   }
 
   .docs-subtitle {
@@ -49,6 +49,27 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+// Overriding the button styles for the social
+// --------------------------------------------------
+
+.social {
+  padding: 0;
+  list-style: none;
+  text-align: center;
+
+  li {
+    height: 20px;
+    padding-bottom: 25px;
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  [class*="button"] { 
+    padding: 0;
+    border: 0;
+  }
+}
+
 
 // The Chassis grid
 // --------------------------------------------------