Fix a style bug caused by the insertion of the theme-popup div inside font awesome icon <i>

The div is now inserted after the <i>, the text color has also been changed to the foreground color and the "(default)" text that indicates the default theme is now grey to contrast with the theme name

Fixes #97

Author: azerupi

src/theme/book.css

@@ -249,8 +249,8 @@ table td {
   right: 15px;
 }
 .theme-popup {
-  position: fixed;
-  left: -40px;
+  position: relative;
+  left: 10px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   font-size: 0.7em;
@@ -357,12 +357,16 @@ table td {
   color: #4183c4;
 }
 .light .theme-popup {
+  color: #333;
   background: #fafafa;
   border: 1px solid #ccc;
 }
 .light .theme-popup .theme:hover {
   background-color: #e6e6e6;
 }
+.light .theme-popup .default {
+  color: #ccc;
+}
 .light blockquote {
   margin: 20px 0;
   padding: 0 20px;
@@ -461,12 +465,16 @@ table td {
   color: #2b79a2;
 }
 .coal .theme-popup {
+  color: #98a3ad;
   background: #141617;
   border: 1px solid #43484d;
 }
 .coal .theme-popup .theme:hover {
   background-color: #1f2124;
 }
+.coal .theme-popup .default {
+  color: #43484d;
+}
 .coal blockquote {
   margin: 20px 0;
   padding: 0 20px;
@@ -565,12 +573,16 @@ table td {
   color: #2b79a2;
 }
 .navy .theme-popup {
+  color: #bcbdd0;
   background: #161923;
   border: 1px solid #737480;
 }
 .navy .theme-popup .theme:hover {
   background-color: #282e40;
 }
+.navy .theme-popup .default {
+  color: #737480;
+}
 .navy blockquote {
   margin: 20px 0;
   padding: 0 20px;
@@ -669,12 +681,16 @@ table td {
   color: #2b79a2;
 }
 .rust .theme-popup {
+  color: #262625;
   background: #e1e1db;
   border: 1px solid #b38f6b;
 }
 .rust .theme-popup .theme:hover {
   background-color: #99908a;
 }
+.rust .theme-popup .default {
+  color: #737480;
+}
 .rust blockquote {
   margin: 20px 0;
   padding: 0 20px;

src/theme/book.js

@@ -57,7 +57,7 @@ $( document ).ready(function() {
         var wrapper = $("<a class=\"header\">");
         wrapper.attr("name", $(this).text());
         // Add so that when you click the link actually shows up in the url bar...
-        wrapper.attr("href", $(location).attr('href') + "#" + $(this).text()); 
+        wrapper.attr("href", $(location).attr('href') + "#" + $(this).text());
         return wrapper;
     });
 
@@ -105,13 +105,13 @@ $( document ).ready(function() {
             $('.theme-popup').remove();
         } else {
             var popup = $('<div class="theme-popup"></div>')
-                .append($('<div class="theme" id="light">Light (default)<div>'))
+                .append($('<div class="theme" id="light">Light <span class="default">(default)</span><div>'))
                 .append($('<div class="theme" id="rust">Rust</div>'))
                 .append($('<div class="theme" id="coal">Coal</div>'))
                 .append($('<div class="theme" id="navy">Navy</div>'));
 
 
-            $(this).append(popup);
+            popup.insertAfter(this);
 
             $('.theme').click(function(){
                 var theme = $(this).attr('id');

src/theme/stylus/theme-popup.styl

@@ -1,6 +1,6 @@
 .theme-popup {
-    position: fixed
-    left: -40px
+    position: relative
+    left: 10px
 
     border-radius: 4px
     font-size: 0.7em

src/theme/stylus/themes/base.styl

@@ -61,10 +61,13 @@
     }
 
     .theme-popup {
+        color: $fg
         background: $theme-popup-bg
         border: 1px solid $theme-popup-border
 
         .theme:hover { background-color: $theme-hover }
+
+        .default { color: $icons }
     }
 
     blockquote {