[dev-random2] Improved the tag cloud

dev-random2/static/css/theme.css

@@ -117,16 +117,22 @@ article:last-of-type:after {
     text-align: center;
 }
 
-#tag-cloud li:hover {
-    -webkit-transform: rotate(0deg), scale(1.3, 1.3) !important;
-    -moz-transform: rotate(0deg), scale(1.3, 1.3) !important;
-    -ms-transform: rotate(0deg), scale(1.3, 1.3) !important;
-    -o-transform: rotate(0deg), scale(1.3, 1.3) !important;
-    transform: rotate(0deg), scale(1.3, 1.3) !important;
+#tag-cloud li {
+    margin: .2em 1em;
+    transition: transform 200ms linear;
 }
 
-#tag-cloud a {
+#tag-cloud li a {
     text-decoration: none;
+    color: #222;
+}
+
+#tag-cloud li:hover {
+    transform: rotate(0deg) scale(1.3, 1.3)!important;
+}
+
+#tag-cloud li:hover a {
+    color: black;
 }
 
 h1.small-title {

dev-random2/templates/tags.html

@@ -5,8 +5,13 @@
     <script type="text/javascript" src="{{ SITEURL }}/theme/js/microTags.js"></script>
     <script>
       function tag_cloud_init() {
-        var el = document.getElementById("tag-cloud");
-        window._tagcloud = new microTags(el);
+        var ul = document.getElementById("tag-cloud");
+        window.tagCloud = new microTags(ul, {
+          'min-size': .95,
+          'max-size': 3.5,
+          'min-angle': -8,
+          'max-angle': 8
+        });
       }
       if (window.addEventListener) window.addEventListener("load", tag_cloud_init, false);
       else if (window.attachEvent) window.attachEvent("onload", tag_cloud_init);
@@ -20,7 +25,7 @@
       <h1>Mots-clés</h1>
       <ul id="tag-cloud">
       {% for tag, articles in tags %}
-      <li data-count="{{ articles|count }}"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
+      <li data-count="{{ articles|count }}" title="{{ articles|count }} article(s)"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
       {% endfor %}
       </ul>
 {% endblock content -%}