Improves spacing between elements and typography

demo.css

@@ -1,5 +1,5 @@
 body {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Lato', sans-serif;
 }
 
 .gradient {
@@ -12,27 +12,39 @@ body {
     background: linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd964', endColorstr='#5ac8fa', GradientType=1 );
     margin: 0 auto;
-    padding: 36px 0;
 }
 
 /* ==========================================================================
    Header
    ========================================================================== */
 
+.header {
+    padding-top: 92px;
+}
+
 .title {
-    font-size: 64px;
     color: white;
-    font-weight: 700;
+    font-size: 64px;
-    font-family: 'Montserrat', sans-serif;
+    font-weight: 900;
     letter-spacing: -1px;
+    margin: 0 0 20px;
 }
 
 .subtitle {
-    font-size: 27px;
     color: #16a085;
+    font-size: 27px;
     font-weight: 400;
-    font-family: 'Montserrat', sans-serif;
+    margin: 0 0 20px;
-    letter-spacing: -1px;
+}
+
+.subtitle + .subtitle {
+    color: white;
+}
+
+.gh-btns {
+    margin: 92px 0 0;
+    background: rgba(0, 0, 0, .1);
+    padding: 20px 0 10px;
 }
 
 /* ==========================================================================
@@ -40,24 +52,47 @@ body {
    ========================================================================== */
 
 .wrap {
-    margin: 0 auto 60px;
+    margin: 0 auto 90px;
     width: 500px;
 }
 
+p {
+    color: #333;
+    font-size: 18px;
+    line-height: 1.7;
+}
+
+a {
+    color: #1BC1A1;
+    border-bottom: 1px dotted #1BC1A1;
+    -webkit-transition: opacity .3s ease-in-out;
+    transition: opacity .3s ease-in-out;
+}
+
+a:hover,
+a:focus {
+    text-decoration: none;
+    opacity: .7;
+}
+
 h1 {
     margin-top: 80px;
 }
 
 h3 {
     color: #333;
-    margin-top: 40px;
+    margin: 40px 0;
     font-size: 18px;
+    font-weight: 300;
+    text-align: center;
 }
 
-p {
+/* Code
-    color: #333;
+   ========================================================================== */
-    font-size: 16px;
+
-    line-height: 1.6;
+pre code {
+    font-size: 14px;
+    line-height: 20px;
 }
 
 code {
@@ -73,26 +108,6 @@ code {
     font-weight: normal;
 }
 
-.form-actions {
-    margin-top: 15px;
-}
-
-.form-actions .btn {
-    float: left;
-}
-
-textarea {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 100%;
-}
-
-pre code {
-    font-size: 14px;
-    line-height: 20px;
-}
-
 /* Example
    ========================================================================== */
 
@@ -131,6 +146,24 @@ pre code {
     padding: 20px 5px 0;
 }
 
+/* Live example
+   ========================================================================== */
+
+.form-actions {
+    margin-top: 15px;
+}
+
+.form-actions .btn {
+    float: left;
+}
+
+textarea {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+}
+
 /* Support
    ========================================================================== */
 
@@ -141,7 +174,7 @@ pre code {
 .support li {
     display: inline-block;
     text-align: center;
-    margin: 10px 10px 0;
+    margin: 5px 8px 0;
 }
 
 .support p {
@@ -152,22 +185,26 @@ pre code {
    Footer
    ========================================================================== */
 
+.footer {
+    padding: 36px 0;
+}
+
 .credits {
     font-weight: 400;
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'Lato', sans-serif;
-    font-size: 16px;
+    font-size: 20px;
     color: #16a085;
 }
 
 .credits-link {
     color: white;
-    text-decoration: none;
+    border-color: white;
-    border-bottom: 1px dotted white;
 }
 
 .credits-link:hover,
 .credits-link:focus {
     text-decoration: none;
+    border-color: white;
 }
 
 .love {

index.html

@@ -7,14 +7,20 @@
     <link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
     <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
     <link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900">
     <link rel="stylesheet" href="demo.css">
 </head>
 <body>
-    <header class="gradient text-center">
+    <header class="header gradient text-center">
         <h1 class="title">clipboard.js</h1>
         <h2 class="subtitle">A modern approach to copy &amp; cut to the clipboard</h2>
-        <h2 class="subtitle" style="color: white">No Flash. No dependencies. Just 2kb</h2>
+        <h2 class="subtitle">No Flash. No dependencies. Just 2kb</h2>
+        <p class="gh-btns">
+            <iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&amp;repo=clipboard.js&amp;type=watch&amp;count=true&amp;size=large"
+allowtransparency="true" frameborder="0" scrolling="0" width="152" height="30"></iframe>
+            <iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&amp;repo=clipboard.js&amp;type=fork&amp;count=true&amp;size=large"
+allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"></iframe>
+        </p>
     </header>
 
     <main class="wrap">
@@ -42,7 +48,7 @@
 
         <h1>Usage</h1>
 
-        <p>There are different options for you to use and they all take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a>.</p>
+        <p>We're living a <em>declarative renaissance</em>, that's why we decided to take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a> for better usability.</p>
 
         <h3>Copy text from attribute</h3>
 
@@ -130,7 +136,7 @@
         </ul>
     </main>
 
-    <footer class="gradient text-center">
+    <footer class="footer gradient text-center">
         <p class="credits">
             Made with <span class="love">♥</span> by <a class="credits-link" href="http://zenorocha.com/">Zeno Rocha</a> under <a class="credits-link" href="http://zenorocha.mit-license.org/">MIT license</a>
         </p>