Add fixed-width FA icons and apply button style to "Learn More" link in menu

4 files changed, 28 insertions, 14 deletions

diff --git a/_includes/navigation.html b/_includes/navigation.html
index 6d521d2..cf4f5d6 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -10,36 +10,36 @@
 					<h4>{{ site.owner.name }}</h4>
 					<p>{{ site.owner.bio }}</p>
 				</li>
-				<li><a href="{{ site.url }}/about/">Learn More</a></li>
+				<li><a href="{{ site.url }}/about/"><span class="btn btn-inverse">Learn More</span></a></li>
 				{% if site.owner.email %}<li>
-					<a href="mailto:{{ site.owner.email }}"><i class="fa fa-envelope"></i> Email</a>
+					<a href="mailto:{{ site.owner.email }}"><i class="fa fa-fw fa-envelope"></i> Email</a>
 				</li>{% endif %}
 				{% if site.owner.twitter %}<li>
-					<a href="http://twitter.com/{{ site.owner.twitter }}"><i class="fa fa-twitter"></i> Twitter</a>
+					<a href="http://twitter.com/{{ site.owner.twitter }}"><i class="fa fa-fw fa-twitter"></i> Twitter</a>
 				</li>{% endif %}
 				{% if site.owner.facebook %}<li>
-					<a href="http://facebook.com/{{ site.owner.facebook }}"><i class="fa fa-facebook"></i> Facebook</a>
+					<a href="http://facebook.com/{{ site.owner.facebook }}"><i class="fa fa-fw fa-facebook"></i> Facebook</a>
 				</li>{% endif %}
 				{% if site.owner.google_plus %}<li>
-					<a href="https://google.com/{{ site.owner.google_plus }}"><i class="fa fa-google-plus"></i> Google+</a>
+					<a href="https://google.com/{{ site.owner.google_plus }}"><i class="fa fa-fw fa-google-plus"></i> Google+</a>
 				</li>{% endif %}
 				{% if site.owner.linkedin %}<li>
-					<a href="http://linkedin.com/in/{{ site.owner.linkedin }}"><i class="fa fa-linkedin"></i> LinkedIn</a>
+					<a href="http://linkedin.com/in/{{ site.owner.linkedin }}"><i class="fa fa-fw fa-linkedin"></i> LinkedIn</a>
 				</li>{% endif %}
 				{% if site.owner.github %}<li>
-					<a href="http://github.com/{{ site.owner.github }}"><i class="fa fa-github"></i> GitHub</a>
+					<a href="http://github.com/{{ site.owner.github }}"><i class="fa fa-fw fa-github"></i> GitHub</a>
 				</li>{% endif %}
 				{% if site.owner.stackexchange %}<li>
-					<a href="{{ site.owner.stackexchange }}"><i class="fa fa-stack-exchange"></i> Stackexchange</a>
+					<a href="{{ site.owner.stackexchange }}"><i class="fa fa-fw fa-stack-exchange"></i> Stackexchange</a>
 				</li>{% endif %}
 				{% if site.owner.instagram %}<li>
-					<a href="http://instagram.com/{{ site.owner.instagram }}"><i class="fa fa-instagram"></i> Instagram</a>
+					<a href="http://instagram.com/{{ site.owner.instagram }}"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
 				</li>{% endif %}
 				{% if site.owner.flickr %}<li>
-					<a href="http://www.flickr.com/photos/{{ site.owner.flickr }}"><i class="fa fa-flickr"></i> Flickr</a>
+					<a href="http://www.flickr.com/photos/{{ site.owner.flickr }}"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
 				</li>{% endif %}
 				{% if site.owner.tumblr %}<li>
-					<a href="http://{{ site.owner.tumblr }}.tumblr.com"><i class="fa fa-tumblr"></i> Tumblr</a>
+					<a href="http://{{ site.owner.tumblr }}.tumblr.com"><i class="fa fa-fw fa-tumblr"></i> Tumblr</a>
 				</li>{% endif %}
 			</ul><!-- /.dl-submenu -->
 		</li>
diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss
index 0463c3f..672c4d7 100644
--- a/_sass/_dl-menu.scss
+++ b/_sass/_dl-menu.scss
@@ -81,8 +81,7 @@
 			}
 		}
 		i {
-			display: inline-block;
-			width: 2em;
+			// display: inline-block;
 		}
 		a {
 			display: block;
@@ -157,6 +156,9 @@
 	.dl-submenu {
 		@include rounded(3px);
 		box-shadow: 0 12px 24px rgba($black,0.4);
+		.btn {
+			margin-bottom: 0;
+		}
 	}
 	/* Hide the inner submenus */
 	li .dl-submenu {
diff --git a/_sass/_elements.scss b/_sass/_elements.scss
index 1e54dbf..4847610 100644
--- a/_sass/_elements.scss
+++ b/_sass/_elements.scss
@@ -80,6 +80,18 @@ svg:not(:root) {
     color: $primary;
   }
 }
+.btn-inverse {
+  background-color: $white;
+  color: $primary;
+  border-color: $white;
+  &:visited {
+    color: $primary;
+  }
+  &:hover {
+    background-color: $primary;
+    color: $white;
+  }
+}
 .btn-success {
   background-color: $success;
   color: $white;
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index d5d1c53..df148d7 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -23,7 +23,7 @@ body {
 $base-color				   : rgba(#222,0.8);
 $body-color      		 : #e8e8e8;
 $text-color      		 : rgba(#222,0.8);
-$comp-color 	 		   : complement($base-color); 
+$comp-color 	 		   : complement(#222); 
 $border-color    		 : lighten($base-color,60);
 $white           		 : #fff;
 $black           		 : #000;