From 3bd1b0145a82cb03d664bf6cc4c7b107206b681c Mon Sep 17 00:00:00 2001
From: Borys Levytskyi <blevtisky@yandex.ru>
Date: Thu, 23 Apr 2015 21:16:47 +0300
Subject: [PATCH] Styled icons.

---
 src/css/styles.css | 20 ++++++++++++++------
 src/index.html     | 27 ++++++++++++---------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index 5009e50..4135c3b 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,7 +1,11 @@
 body { font-family: Verdana; font-size: 0.8em; padding: 20px 100px 0 100px; margin: 0  }
 code { font-size: 1.2em; font-weight: bold; }
 
-.links { float: right; position: absolute; right: 10px; top: 10px; }
+ul.links { position: absolute; right: 10px; top: 10px; list-style-type: none; margin: 0 }
+ul.links li { float: left; padding-left: 10px; }
+.links a { display: inline-block; padding: 10px 10px 10px 0px}
+.links .icon { margin-right: 5px; }
+
 .mono { font-family: monospace; font-size: 1.3em }
 .expressionInput { width: 500px; padding: 3px; border: solid 1px lightgray; }
 
@@ -35,15 +39,18 @@ code { font-size: 1.2em; font-weight: bold; }
 
 .cur { color: lightgray; }
 
-.icon { width: 16px; height: 16px; display: inline-block }
-.twitter { background: url('../img/twitter.png') }
-.feedback { background: url('../img/feedback.gif') }
+.icon { width: 16px; height: 16px; display: inline-block; }
+.light .twitter { background: url('../img/twitter-light.png') }
+.dark .twitter { background: url('../img/twitter-dark.png') }
+
+.light .feedback { background: url('../img/feedback-light.png') }
+.dark .feedback { background: url('../img/feedback-dark.png') }
 
 .dark .github { background: url('../img/github-dark.png') }
 .light .github { background: url('../img/github-light.png') }
 
 /* Light */
-.light { background: rgb(250, 250, 250); }
+.light { background: #fafafa; }
 .light a, .light a:visited { color: #222; }
 .light .one { color: black; }
 .light .zero { color: #888; }
@@ -53,7 +60,7 @@ code { font-size: 1.2em; font-weight: bold; }
 .light .other { color: #bbb }
 .light .hashLink, .light .hashLink:visited { color: #ddd }
 .light .hashLink:hover { color: #888 }
-
+.light ul.links li:hover { background: #ddd }
 
 /* Dark */
 .dark { background: #121212; color: white;}
@@ -66,4 +73,5 @@ code { font-size: 1.2em; font-weight: bold; }
 .dark  .other { color: #444;}
 .dark .hashLink, .dark .hashLink:visited { color: #333 }
 .dark .hashLink:hover { color: #999 }
+.dark ul.links li:hover { background: #333 }
 
diff --git a/src/index.html b/src/index.html
index fe3164f..1ede043 100644
--- a/src/index.html
+++ b/src/index.html
@@ -47,20 +47,17 @@
 <header>
     <h1>Bitwise<span style="color: #c5c5c5;">Cmd</span></h1>
 
-    <div class="links">
-        <span>
-            <i class="icon github">&nbsp;</i>
-            <a href="https://github.com/BorisLevitskiy/BitwiseCmd">Project on GitHub</a>&nbsp;
-        </span>
-        <span>
-            <i class="icon feedback">&nbsp;</i>
-        </span>
-        <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback">Send Feedback</a>
-        <span>
-            <i class="icon twitter">&nbsp;</i>
-            <a href="https://twitter.com/BitwiseCmd">Twitter</a>
-        </span>
-    </div>
+    <ul class="links">
+        <li>
+            <a href="https://github.com/BorisLevitskiy/BitwiseCmd"><i class="icon github">&nbsp;</i>Project on GitHub</a>&nbsp;
+        </li>
+        <li>
+            <a href="https://twitter.com/BitwiseCmd"><i class="icon twitter">&nbsp;</i>Twitter</a>
+        </li>
+        <li>
+            <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback"><i class="icon feedback">&nbsp;</i>Send Feedback</a>
+        </li>
+    </ul>
 
     <div>
         <input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
@@ -123,7 +120,7 @@
 <script data-template="aboutTpl" type="text/template">
     <div class="aboutTpl">
         <p> Created by <a href="http://boryslevytskyi.github.io/">Borys Levytskyi</a></p>
-        <p>If you have an idea, suggestion or you've spotted a bug here, please send it to <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback">&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a>. Your feedback is greatly appreciated.</p>
+        <p>If you have an idea, suggestion or you've spotted a bug here, please send it to <a href="mailto:&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;?subject=Feedback">&#098;&#105;&#116;&#119;&#105;&#115;&#101;&#099;&#109;&#100;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a> or tweet on <a href="http://twitter.com/BitwiseCmd">@BitwiseCmd</a>. Your feedback is greatly appreciated.</p>
         <p><a href="https://github.com/BorisLevitskiy/BitwiseCmd">Project on <strong>GitHub</strong></a></p>
     </div>
 </script>