Update labels, and colors, and things

_config.yml

@@ -249,6 +249,7 @@ author:
   steam            :
   tumblr           :
   twitter          : *twitter
+  vine             :
   weibo            :
   xing             :
   youtube          :

_data/ui-text.yml

@@ -17,7 +17,7 @@ en: &DEFAULT_EN
   date_label          : "Last Updated:"
   comments_label      : "Leave a Comment"
   related_label       : "You May Also Enjoy"
-  follow_label        : "Follow "
+  follow_label        : "Follow:"
   feed_label          : "Feed"
   powered_by          : "Powered by"
 en_US:

_includes/author-profile.html

@@ -19,7 +19,7 @@
 
   <div class="author__urls-wrapper">
     <button class="btn btn--inverse">Follow</button>
-    <ul class="author__urls">
+    <ul class="author__urls social-icons">
       {% if author.uri %}
         <li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a></li>
       {% endif %}
@@ -54,7 +54,7 @@
         <li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a></li>
       {% endif %}
       {% if author.lastfm %}
-        <li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a></li>
+        <li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-lastfm-square"></i> Last.fm</a></li>
       {% endif %}
       {% if author.dribbble %}
         <li><a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a></li>
@@ -83,6 +83,9 @@
       {% if author.codepen %}
         <li><a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a></li>
       {% endif %}
+      {% if author.vine %}
+        <li><a href="https://vine.co/u/{{ author.vine }}" target="_blank"><i class="fa fa-fw fa-vine"></i> Vine</a></li>
+      {% endif %}
     </ul>
   </div>
 </div>

_includes/footer.html

@@ -15,7 +15,7 @@
 {% endif %}
 
 <div class="page__footer-follow">
-  <ul>
+  <ul class="social-icons">
     {% if site.data.ui-text[site.locale].follow_label %}
       <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
     {% endif %}

assets/_scss/_base.scss

@@ -164,8 +164,8 @@ li code,
 figcaption code {
   padding-top: 0.1rem;
   padding-bottom: 0.1rem;
-  background: mix(#fff, $light-gray, 40%);
+  background: mix(#fff, $lighter-gray, 20%);
-  border: 1px solid $light-gray;
+  border: 1px solid $lighter-gray;
   border-radius: $border-radius;
 
   &:before, &:after {

assets/_scss/_buttons.scss

@@ -49,12 +49,13 @@
   /* for dark backgrounds */
 
   &--inverse {
-    color: currentColor !important;
+    color: $gray !important;
-    border: 1px solid currentColor !important; // override
+    border: 1px solid $light-gray !important; // override
     background-color: #fff;
 
     &:hover {
-      background-color: mix(#000, #fff, 20%);
+      color: #fff !important;
+      border-color: $gray;
     }
   }
 

assets/_scss/_footer.scss

@@ -55,8 +55,10 @@
 
   li {
     display: inline-block;
+    padding-top: 5px;
+    padding-bottom: 5px;
     font-family: $sans-serif-narrow;
-    font-size: 16px;
+    font-size: 14px;
     text-transform: uppercase;
   }
 
@@ -66,6 +68,7 @@
   }
 
   a {
+    padding-right: 10px;
     font-weight: bold;
   }
 }

assets/_scss/_masthead.scss

@@ -64,10 +64,4 @@
   list-style-type: none;
   font-size: 16px;
   white-space: nowrap;
-
-  a {
-    &:hover {
-      color: $gray;
-    }
-  }
 }

assets/_scss/_navigation.scss

@@ -75,8 +75,14 @@
 
   a {
     display: block;
-    padding: 10px 20px;
+    margin: 0 20px;
+    padding: 10px 0;
+    color: $gray;
     text-decoration: none;
+
+    &:hover {
+      color: #000;
+    }
   }
 
   button {
@@ -99,17 +105,27 @@
 
       &:first-child {
         font-weight: bold;
+
         a {
-          padding-left: 0;
+          margin-left: 0;
         }
       }
 
       &:last-child {
         a {
-          padding-right: 0;
+          margin-right: 0;
         }
       }
     }
+
+    a {
+      border-bottom: 4px solid transparent;
+
+      &:hover {
+        color: #000;
+        border-bottom-color: $border-color;
+      }
+    }
   }
 
   .hidden-links {
@@ -124,7 +140,14 @@
     box-shadow: 0 0 10px rgba(#000, 0.25);
 
     a {
+      margin: 0;
+      padding: 10px 20px;
       font-size: 0.8em;
+
+      &:hover {
+        color: #000;
+        background: $border-color;
+      }
     }
 
     &:before {
@@ -156,6 +179,7 @@
     li {
       display: block;
       border-bottom: 1px solid $border-color;
+
       &:last-child {
         border-bottom: none;
       }

assets/_scss/_notices.scss

@@ -52,7 +52,7 @@
   }
 
   code {
-    background-color: mix(#fff, $notice-color, 70%)
+    background-color: mix(#fff, $notice-color, 95%)
   }
 }
 

assets/_scss/_sidebar.scss

@@ -214,6 +214,8 @@
     display: block;
     margin-bottom: 5px;
     padding-right: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     font-size: 14px;
     text-decoration: none;
     white-space: nowrap;

assets/_scss/_toc.scss

@@ -36,7 +36,7 @@
 
     &:hover {
       color: #000;
-      background: $border-color;
+      background: $lighter-gray;
     }
   }
 

assets/_scss/_utilities.scss

@@ -153,6 +153,112 @@ body:hover .visually-hidden button {
   vertical-align: middle;
 }
 
+// social icons
+
+.social-icons {
+  .fa-behance,
+  .fa-behance-square {
+    color: $behance-color;
+  }
+
+  .fa-dribbble {
+    color: $dribbble-color;
+  }
+
+  .fa-facebook,
+  .fa-facebook-square {
+    color: $facebook-color;
+  }
+
+  .fa-twitter,
+  .fa-twitter-square {
+    color: $twitter-color;
+  }
+
+  .fa-flickr {
+    color: $flickr-color;
+  }
+
+  .fa-foursquare {
+    color: $foursquare-color;
+  }
+
+  .fa-github,
+  .fa-github-alt,
+  .fa-github-square {
+    color: $github-color;
+  }
+
+  .fa-google-plus,
+  .fa-google-plus-square {
+    color: $google-plus-color;
+  }
+
+  .fa-instagram {
+    color: $instagram-color;
+  }
+
+  .fa-lastfm,
+  .fa-lastfm-square {
+    color: $lastfm-color;
+  }
+
+  .fa-linkedin,
+  .fa-linkedin-square {
+    color: $linkedin-color;
+  }
+
+  .fa-pinterest,
+  .fa-pinterest-p,
+  .fa-pinterest-square {
+    color: $pinterest-color;
+  }
+
+  .fa-rss,
+  .fa-rss-square {
+    color: $rss-color;
+  }
+
+  .fa-soundcloud {
+    color: $soundcloud-color;
+  }
+
+  .fa-stack-exchange,
+  .fa-stack-overflow {
+    color: $stackoverflow-color;
+  }
+
+  .fa-tumblr,
+  .fa-tumblr-square {
+    color: $tumblr-color;
+  }
+
+  .fa-twitter,
+  .fa-twitter-square {
+    color: $twitter-color;
+  }
+
+  .fa-vimeo,
+  .fa-vimeo-square {
+    color: $vimeo-color;
+  }
+
+  .fa-vine {
+    color: $vine-color;
+  }
+
+  .fa-youtube,
+  .fa-youtube-square,
+  .fa-youtube-play {
+    color: $youtube-color;
+  }
+
+  .fa-xing,
+  .fa-xing-square {
+    color: $xing-color;
+  }
+}
+
 
 /*
    Navicons

assets/_scss/_variables.scss

@@ -34,13 +34,13 @@ $garamond           : Garamond, serif;
 
 $gray                : #4c4c4c;
 $dark-gray           : #191413;
-$light-gray         : #e2e2e2;
+$light-gray          : mix(#fff, $gray, 70%);
-$lighter-gray       : #f9f9f9;
+$lighter-gray        : mix(#fff, $gray, 90%);
 
 $body-color          : #fff;
 $background-color    : #fff;
 $text-color          : #333332;
-$border-color       : $light-gray;
+$border-color        : $lighter-gray;
 $base-color          : #343434;
 $comp-color          : spin($base-color, 180);
 $accent-color        : #000;
@@ -53,18 +53,27 @@ $danger-color       : #C64537;
 $info-color          : #308cbc;
 
 /* brands */
+$behance-color       : #1769FF;
+$dribbble-color      : #ea4c89;
 $facebook-color      : #3b5998;
 $flickr-color        : #ff0084;
-$foursquare-color   : #0cbadf;
+$foursquare-color    : #0072b1;
+$github-color        : #171516;
 $google-plus-color   : #dd4b39;
-$instagram-color    : #4e433c;
+$instagram-color     : #517fa4;
-$linkedin-color     : #4875b4;
+$lastfm-color        : #d51007;
+$linkedin-color      : #007bb6;
 $pinterest-color     : #cb2027;
 $rss-color           : #fa9b39;
-$tumblr-color       : #2c4762;
+$soundcloud-color    : #ff3300;
+$stackoverflow-color : #fe7a15;
+$tumblr-color        : #32506d;
 $twitter-color       : #55acee;
 $vimeo-color         : #1ab7ea;
-$youtube-color      : #ff3333;
+$vine-color          : #00bf8f;
+$youtube-color       : #bb0000;
+$xing-color          : #006567;
+
 
 /* links */
 $link-color          : #343434;