Fine-tune keywords list in resume

basics/static/css/resume.css

@@ -12,15 +12,32 @@
 
 #keywords {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 100px;
+    left: 100px;
     font-size: 75%;
-    background-color: #7f7f7f;
+    background-color: #4d4d4d;
     color: #ffffff;
     text-align: justify;
     width: 50%;
     padding: .5em;
     border: 1px solid #f18137;
+    z-index: 200;
     display: none;
 }
 
+.keyword-first-letter {
+    font-weight: bold;
+    color: #f18137;
+}
+
+#keywords-close {
+    width: 24px;
+    height: 24px;
+    background-image: url('../images/close.png');
+    z-index: 210;
+    position: absolute;
+    display: block;
+    top: -13px;
+    right: -13px;
+}
+

basics/templates/basics/resume.html

@@ -19,7 +19,7 @@
     <p>Although I don’t plan to change my workplace right now, but when I do so, I look for firms that can develop my skills and give me financial stability through an interesting job.</p>
 </div>
 
-<div id="keywords"></div>
+<div id="keywords"><span id="keywords-close"></span><span id="keywords-list"></span></div>
 <div id="page-disclaimer">You can download the latest version of my resume at <a href="http://{{ site.domain }}{% url "basics:resume" %}">http://{{ site.domain }}{% url "basics:resume" %}</a>.</div>
 
 <script type="text/javascript">
@@ -47,25 +47,30 @@ for (i = 0; i < keyword_tags.length; i++) {
         kw = $(tag).html();
     }
 
+    first_letter = kw.charAt(0);
+    remainder = kw.slice(1);
+
     if (!$(tag).hasClass('noupper')) {
-        kw = kw.charAt(0).toUpperCase() + kw.slice(1);
+        first_letter = first_letter.toUpperCase();
     }
 
+    kw = '<span class="keyword-first-letter">' + first_letter + '</span>' + remainder;
+
     keywords.push(kw);
 
 }
 
-$('#keywords').html(keywords.unique().sort(function(a, b) { if (a.toLowerCase() < b.toLowerCase()) return -1; else if (a.toLowerCase() > b.toLowerCase()) return 1; else return 0; }).join(', '));
+$('#keywords-list').html(keywords.unique().sort(function(a, b) { if (a.toLowerCase() < b.toLowerCase()) return -1; else if (a.toLowerCase() > b.toLowerCase()) return 1; else return 0; }).join(', '));
 
 $('#keywords-button').click(function(e) {
     $('#keywords').css({
-        top: e.pageY - 10,
-        left: e.pageX - 10
+        top: e.pageY + 10,
+        left: e.pageX - 2
     });
     $('#keywords').fadeIn();
 });
 
-$('#keywords').mouseout(function() {
+$('#keywords-close').click(function() {
     $('#keywords').fadeOut();
 });
 </script>