Change main font and some other styles

Author: byvasco

css/main.css

@@ -5,7 +5,7 @@
     <meta name="author" content="Igor Escobar" />
     <title>jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements.</title>
 
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Chivo:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
 
 
@@ -29,7 +29,7 @@
         </ul>
       </div>
     </div>
-    
+
     <div class="hero">
       <div class="container">
         <nav>
@@ -38,7 +38,6 @@
           <a class="github-button" href="https://github.com/igorescobar/jQuery-Mask-Plugin" data-style="mega" data-count-href="/igorescobar/jQuery-Mask-Plugin/stargazers" data-count-api="/repos/igorescobar/jQuery-Mask-Plugin#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star igorescobar/jQuery-Mask-Plugin on GitHub">Star</a>
         </nav>
 
-        <h2>jQuery Mask</h2>
         <h1>Documentation &amp; Customization</h1>
 
         <a href="#" class="button-large">Download Now</a>

docs.html

@@ -5,7 +5,7 @@
     <meta name="author" content="Igor Escobar" />
     <title>jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements.</title>
 
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Chivo:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
 
 
@@ -29,8 +29,8 @@
         </ul>
       </div>
     </div>
-    
-    <div class="hero">
+
+    <div class="hero home">
       <div class="container">
         <nav>
           <a href="./" class="selected">Home</a>

index.html

@@ -1,5 +1,6 @@
 $color-main: #167FFF
-$color-dark: #2E2E2E
+$color-dark: #232E3C
+$color-light: #6B737C
 $color-borders: #EFF3F7
 
 *
@@ -9,26 +10,26 @@ body
   margin: 0
   padding: 0
   -webkit-box-sizing: border-box
-  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-family: Chivo, "Helvetica Neue", Helvetica, Arial, sans-serif
   color: $color-dark
   -webkit-font-smoothing: antialiased
 
 h1
   font-size: 42px
-  font-weight: 100
-  letter-spacing: 2.2px
+  font-weight: 700
+  letter-spacing: 0.1px
   margin: 0
 
 h2
   font-size: 28px
-  font-weight: 500
-  letter-spacing: 0.6px
+  font-weight: 700
+  letter-spacing: -0.2px
   margin: 0
 
 h3
   font-size: 20px
-  font-weight: 500
-  letter-spacing: 0.2px
+  font-weight: 700
+  letter-spacing: -0.14px
   margin: 0
 
 p
@@ -45,12 +46,12 @@ a
 
   &.button-large
     padding: 15px 36px 17px
-    background: $color-main
+    background: $color-dark
     color: #FFF
     border-radius: 6px
 
     &:hover
-      box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px $color-main
+      background: lighten($color-dark, 6%)
 
   &.link-small
     font-size: 14px
@@ -226,6 +227,9 @@ label
       height: 20px
       background-color: #DDDDDD
 
+  &.home
+    color: $color-main
+
 .docs
   margin-top: 100px
   margin-bottom: 120px
@@ -244,10 +248,14 @@ label
     &:not(:last-child)
       border-bottom: 2px solid $color-borders
 
+    h4
+      margin-bottom: 14px
+
     p
       font-size: 14px
       line-height: 20px
-      color: #8C8C8C
+      letter-spacing: 0.1px
+      color: $color-light
       margin-bottom: 20px
 
     div:not(:last-child)