Merge pull request #33 from m-r-r/master

Small improvements in the «dev-random» theme

10 files changed, 298 insertions, 138 deletions

diff --git a/dev-random/static/css/main.css b/dev-random/static/css/main.css
index 7978af3..39d8b62 100644
--- a/dev-random/static/css/main.css
+++ b/dev-random/static/css/main.css
@@ -5,25 +5,7 @@
 /******************************************************************************/
 
 
-article, section,
-header, footer, 
-aside, nav {
-    display: block;
-}
-
-html {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
 body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    min-width: 750px;
 
     background-color: white;
     color: #101010;
@@ -47,7 +29,6 @@ h1 a, h2 a,
 h3 a, h4 a, 
 h5 a, h6 a {
     color: inherit;
-
     text-decoration: inherit;
 }
 
@@ -64,11 +45,32 @@ a {
     text-decoration: none;
 }
 
-
 a:hover {
     text-decoration: underline;
 }
 
+img, table, pre {
+    margin: 1em .5em;
+    padding: .25em;
+    border: thin solid silver;
+    overflow: auto;
+}
+
+figure {
+    display: block;
+    margin: 1em auto;
+    border: thin solid silver;
+    text-align: center;
+    font-size: .9em;
+}
+
+figure img {
+    margin: .1em;
+    padding: .1em;
+    border: none;
+    max-width: 100%;
+    overflow: auto;
+}
 
 pre {
     margin: 1em .5em;
@@ -83,6 +85,30 @@ pre {
     overflow: auto;
 }
 
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border-radius: 4px;
+}
+
+table th {
+    font-weight: bolder;
+    margin: .6em .5em;
+}
+
+table td {
+    margin: .4em .5em;
+}
+
+table th,
+table td {
+    border: thin dashed silver;
+}
+
+table tr {
+    border: thin solid silver;
+}
+
 
 
 /******************************************************************************/
@@ -90,7 +116,7 @@ pre {
 /******************************************************************************/
 
 
-.page .head h1 {
+.page-head h1 {
     margin: .7em auto;
 
     font-family: Georgia, "Times New Roman", Times, serif;
@@ -107,12 +133,12 @@ pre {
     font-variant: small-caps;
 }
 
-.content #page-title {
+.page-content #page-title {
     font-size: .9em;
 }
 
 
-.content .post {
+.page-content .post {
     clear: both;
     margin: 1em 0 3em 0;
 }
@@ -185,7 +211,7 @@ pre {
 }
 
 
-.page .foot p {
+.page-footer p {
     display: block;
     width: 60%;
 
@@ -194,25 +220,64 @@ pre {
     margin-right: auto;
 }
 
+#pagination {
+    display: block;
+    clear: both;
+    text-align: center;
+}
+
 
 
 /******************************************************************************/
 /*                                    Misc                                    */
 /******************************************************************************/
 
-#github-link {
+// GitHub button
+
+@media screen and (min-width: 800px) {
+    #github-link {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50px;
+        height: 100px;
+        background-image: url("../img/corner.png");
+        margin: 0;
+        border: none;
+        text-decoration: none;
+        color: transparent;
+        font-size: 0;
+    }
+}
+
+// Tag list
+
+ul#tagslist {
     display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 50px;
-    height: 100px;
-    background-image: url("../img/corner.png");
-    margin: 0;
-    border: none;
-    text-decoration: none;
-    color: transparent;
-    font-size: 0px;
-    text-decoration: none;
+    width: 75%;
+    margin: 1em auto;
+    list-style-type: none;
+}
+
+ul#tagslist li {
+    display: inline-block;
+    list-style-type: none;
+    margin: .5em .2em;
+    transition: transform 1s ease 0s;
+    -o-transition: -o-transform 1s ease 0s;
+    -ms-transition: -ms-transform 1s ease 0s;
+    -moz-transition: -moz-transform 1s ease 0s;
+    -webkit-transition: -webkit-transform 1s ease 0s;
+}
+
+
+
+ul#tagslist li:hover {
+    transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -o-transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -ms-transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -moz-transform: rotate(0deg) scale(1.2, 1.2) !important;
+    -webkit-transform: rotate(0deg) scale(1.2, 1.2) !important;
 }
 
diff --git a/dev-random/static/css/skeleton.css b/dev-random/static/css/skeleton.css
index 02010f7..dba964f 100644
--- a/dev-random/static/css/skeleton.css
+++ b/dev-random/static/css/skeleton.css
@@ -1,68 +1,65 @@
 
+article, section,
+header, footer, 
+aside, nav {
+    display: block;
+}
+
+body, .page {
+    margin: 0;
+    padding: 0;
+}
+
 .page {
-  display: block;
-  margin-top: 5%;
+    display: block;
+    margin: 2% 4%;
 }
 
-.page .head,
-.page .main,
-.page .foot {
+.page-head,
+.page-footer {
   display: block;
   width: 100%;
   clear: both;
 }
 
-.page .main {
-  display: table;
-  border-collapse: separate;
-  border-spacing: .5%;
-  width: 75%;
-  margin: .5em auto;
-  clear: both;
-}
-
-.page .main .sidebar {
-  display: table-cell;
-  width: 25%;
+.page-content {
+    display: block;
+    float: right;
+    margin-left: 1%;
+    margin-right: 1%;
+    width: 68%;
 }
 
-.page .main .content {
-  display: table-cell;
-  width: 74%;
+.page-sidebar {
+    display: block;
+    margin-left: 1%;
+    margin-right: 1%;
+    width: 28%;
+    float: left;
 }
 
-@media screen and (max-width: 800px) {
-  .page  .main {
-    width: 100%;
-    clear: both;
-  }
+@media screen and (min-width: 800px) {
+    .page { margin: 5% 10%; }
 }
 
-@media screen and (max-width: 700px) {
-  .page .main {
-    display: block;
-  }
-
-  .page .main .sidebar,
-  .page .main .content {
-    display: block;
-    margin: 0 .5em;
-    width: 100%;
-    clear: both;
-  }
-
-  .widget {
-    display: block;
-  }
-
-  .widget ul,
-  .widget li {
-    display: inline;
-  } 
-
-  .widget h3 { display: none; }
+@media screen and (max-width: 600px) {
+    .page { margin: 0; }
+    .page-content,
+    .page-sidebar {
+        width: 98%;
+        clear: both;
+    }
 }
 
 @media print {
-  .sidebar { display: none; }
+    .page { margin: 0; }
+    .page-content {
+        width: 98%;
+        clear: both;
+    }
+    .page-head,
+    .page-footer,
+    .page-sidebar {
+        display: none;
+    }
 }
diff --git a/dev-random/static/img/corner.png b/dev-random/static/img/corner.png
index 52e8690..e3f76cc 100644
--- a/dev-random/static/img/corner.png
+++ b/dev-random/static/img/corner.png
diff --git a/dev-random/static/js/hex2ascii.js b/dev-random/static/js/hex2ascii.js
deleted file mode 100644
index 3dde36f..0000000
--- a/dev-random/static/js/hex2ascii.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-window.hex2ascii = {};
-window.hex2ascii.init = function() {
-    var els = document.getElementsByClassName('hex'),
-        hex, text,
-        i, j, e;
-
-    for(i=0; i < els.length; i++) {
-        e = els[i];
-        hex = e.innerHTML.split(' ');
-        text = "";
-
-        for(j=0; j < hex.length; j++) {
-            text += String.fromCharCode(parseInt(hex[j], 16));
-        }
-
-        e.innerHTML = text;
-        e.className = e.className.replace('hex','');
-    }
-};
diff --git a/dev-random/static/js/microTags.js b/dev-random/static/js/microTags.js
new file mode 100644
index 0000000..2f389b0
--- /dev/null
+++ b/dev-random/static/js/microTags.js
@@ -0,0 +1,99 @@
+
+var µTags = function(element, options) {
+    this._el = element;
+    this._children = element.childNodes;
+
+    this._max_size = 3;
+    this._min_size = 0.7;
+    this._max_angle = 15;
+    this._min_angle = -15;
+
+    if (options != undefined)
+        this._set_options(options);
+
+    this._max_count = this._get_max_count();
+    this._set_sizes();
+    this._set_tilt();
+}
+
+µTags.prototype.version = "0.1a"
+
+µTags.prototype._set_options = function(options) {
+    var max_size  = options['max-size'],
+        min_size  = options['min-size'],
+        max_angle = options['max-angle'],
+        min_angle = options['min-angle'];
+
+    if ((max_size >= 1) && (max_size > min_size))
+        this._max_size = max_size;
+    else
+        console.error("µTags: option `max-size` must be >= 1 and > min-size");
+
+    if ((min_size > 0) && (min_size < max_size))
+        this._min_size = min_size;
+    else
+        console.error("µTags: option `min-size` must be > 0 and < max-size");
+
+    if (max_angle > min_angle) {
+        this._max_angle = max_angle;
+        this._min_angle = min_angle;
+    }
+    else
+        console.error("µTags: option `max-angle` must be > `min-angle`");
+        
+}
+
+µTags.prototype.eachTag = function(callback) { 
+    var i, child, tag, count;
+    for (i=0; i < this._children.length; i++) {
+        child = this._children[i];
+        if (child.attributes != undefined) {
+            window._c = child;
+            count = parseInt(child.attributes["data-count"].value || "1");
+            callback(child, count);
+        }
+    }
+}
+
+µTags.prototype._get_max_count = function() {
+    var max = 0;
+    this.eachTag(function(element, count) {
+        max = (max < count) ? count : max;
+    });
+    return max;
+}
+
+µTags.prototype._set_sizes = function() {
+    var size,
+        max = this._max_size,
+        min = this._min_size,
+        max_count = this._max_count;
+
+    this.eachTag(function(element, count) {
+        size = (count * max / max_count);
+        size = (size >= min) ? size : min;
+        console.debug(element+ ': ' + count + ': ' + size );
+        element.style['fontSize'] = size + 'em';
+    });
+}
+
+µTags.prototype._set_tilt = function() {
+    var angle,
+        max = this._max_angle,
+        min = this._min_angle;
+    this.eachTag(function(element, count) {
+        angle = min + (Math.random() * (max - min));
+        element.style['transform']       = 'rotate(' + angle + 'deg)';
+        element.style['MozTransform']    = 'rotate(' + angle + 'deg)';
+        element.style['OTransform']      = 'rotate(' + angle + 'deg)';
+        element.style['WebkitTransform'] = 'rotate(' + angle + 'deg)';
+        element.style['msTransform']     = 'rotate(' + angle + 'deg)';
+    });
+
+}
+
+if (window != undefined) {
+    window.µTags = µTags;
+}
+
+
diff --git a/dev-random/templates/article.html b/dev-random/templates/article.html
index 6048b5a..7255fbc 100644
--- a/dev-random/templates/article.html
+++ b/dev-random/templates/article.html
@@ -1,9 +1,10 @@
+{%- if article.lang %}{% set DEFAULT_LANG = article.lang %}{% endif -%}
 {% extends "base.html" %}
 
 {% block headers %}
     {{ super() }}
     <meta name="author"   content="{{ article.author }}" />
-    <meta name="keywords" content="{{ articles.tags|join(' ')}}" />
+    <meta name="keywords" content="{{ article.tags|join(', ') }}" />
 {% endblock %}
 
 {% block title %}{{ article.title }} — {{ super() }}{% endblock %}
@@ -23,7 +24,14 @@
         </h1>
         <div class="meta">
             Dans «<a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>» 
-            par <a href="{{ SITEURL }}/{{article.author.url}}">{{ article.author}}</a>
+            par <a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author}}</a>
+            {% if article.translations %}
+            &nbsp;&nbsp; Langues: 
+            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.lang or DEFAULT_LANG }}</a>
+              {% for translation in article.translations %}
+            <a href="{{ SITEURL }}/{{ translation.url }}">{{ translation.lang }}</a>
+              {% endfor %}
+            {% endif %}
         </div>
       </header>
       <div class="post-content"> 
@@ -32,7 +40,7 @@
       <footer class="post-footer">
         <div class="meta">
             Posté dans «<a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>» 
-            par <a href="{{ SITEURL }}/{{article.author.url}}">{{ article.author}}</a><br />
+            par <a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author}}</a><br />
             Mots-clés: {% for tag in article.tags %} #<a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>{% endfor %}
         </div>
       </footer>
diff --git a/dev-random/templates/base.html b/dev-random/templates/base.html
index 1424ca4..0df9663 100644
--- a/dev-random/templates/base.html
+++ b/dev-random/templates/base.html
@@ -15,48 +15,38 @@
                            title="{{ SITENAME }} — Flux RSS"
                            href="{{ SITEURL }}/{{ FEED_RSS }}" /> 
     {% endif %}
-    <script src="{{ SITEURL }}/theme/js/hex2ascii.js"></script>
     <!--[if lte IE 8]><script src="{{ SITEURL }}/theme/js/html5shiv.js"></script><![endif]-->
+    <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
     {% if GOOGLE_ANALYTICS %}
     <script type="text/javascript">
-      // Google analytics:
-      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-      function enableGA() {
-          try {
-              var pageTracker = _gat._getTracker("{{ GOOGLE_ANALYTICS }}");
-              pageTracker._trackPageview();
-              _gaq.push(['_setCustomVar',
-                1,                   // This custom var is set to slot #1.  Required parameter.
-                'User-Agent',      
-                navigator.userAgent
-              ]);
-              console.log('GA loaded');
-          } catch(err) {
-              setTimeout(500,'enableGA()');
-              console.log('Waiting GA ...');
-          }
-      }
-      setTimeout('enableGA()', 200);
+      var _gaq = _gaq || [];
+          _gaq.push(['_setAccount', '{{ GOOGLE_ANALYTICS }}']);
+          _gaq.push(['_trackPageview']);
+      (function() {
+        var ga = document.createElement('script'); 
+        ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
     </script>
     {% endif %}
   {% endblock headers %}
   </head>
-  <body> 
+  <body>
     <div class="page">
-      <header class="head">
+      <header class="page-head">
         <h1>
           <a href="{{ SITEURL }}/index.html">{{ SITENAME }}</a>
         </h1>
       </header>
 
-      <div class="main">
-        {% include "includes/sidebar.html" %} 
+      <div class="page-content">
         {% block content %}
         {% endblock content %}
       </div>
+      {% include "includes/sidebar.html" %} 
 
-      <footer class="foot">
+      <footer class="page-footer">
         <p> {{ FOOTER_TEXT or 'Powered by <a href="http://pelican.readthedocs.org">Pelican</a>' }}</p>
         {% if GITHUB_URL %}<p><a id="github-link" href="{{ GITHUB_URL}}">Fork me on Github</a></p>{% endif %}
       </footer>
diff --git a/dev-random/templates/includes/sidebar.html b/dev-random/templates/includes/sidebar.html
index 3c42ef9..803ae08 100644
--- a/dev-random/templates/includes/sidebar.html
+++ b/dev-random/templates/includes/sidebar.html
@@ -1,4 +1,4 @@
-    <aside class="sidebar">
+    <aside class="page-sidebar">
       <nav class="widget">
       <h3>Site</h3>
         <ul>
diff --git a/dev-random/templates/index.html b/dev-random/templates/index.html
index aeb5986..0c27024 100644
--- a/dev-random/templates/index.html
+++ b/dev-random/templates/index.html
@@ -19,7 +19,14 @@
           </h1>
           <div class="meta">
               Dans «<a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>» 
-              par <a href="{{ SITEURL }}/{{article.author.url}}">{{ article.author}}</a>
+              par <a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author }}</a>
+              {% if article.translations %}
+              &nbsp;&nbsp; Langues: 
+              <a href="{{ SITEURL }}/{{ article.url }}">{{ article.lang or DEFAULT_LANG }}</a>
+                {% for translation in article.translations %}
+              <a href="{{ SITEURL }}/{{ translation.url }}">{{ translation.lang }}</a>
+                {% endfor %}
+              {% endif %}
           </div>
         </header>
         <div class="post-content"> 
diff --git a/dev-random/templates/tags.html b/dev-random/templates/tags.html
index 5d8a8c7..9373427 100644
--- a/dev-random/templates/tags.html
+++ b/dev-random/templates/tags.html
@@ -1,13 +1,27 @@
 {% extends "base.html" %}
 
+{% block headers %}
+{{ super() }}
+    <script type="text/javascript" src="{{ SITEURL }}/theme/js/microTags.js"></script>
+    <script>
+      function tag_cloud_init() {
+        var el = document.getElementById("tagslist");
+        window._tagcloud = new µTags(el);
+      }
+      if (window.addEventListener) window.addEventListener("load", tag_cloud_init, false);
+      else if (window.attachEvent) window.attachEvent("onload", tag_cloud_init);
+      else window.onload = tag_cloud_init;
+    </script>
+{% endblock headers %}
+
 {% block title %}{{ super() }} — Mots-clés{% endblock title %}
 
 {%- block content %}
     <section class="content">
       <h1>Mots-clés</h1>
       <ul id="tagslist">
-      {% for tag in tag_cloud %}
-        <li class="tag-{{ tag.1 }}"><a href="{{ SITEURL }}/{{ tag.0.url }}">{{ tag.0 }}</a></li>
+      {% for tag, articles in tags %}
+      <li data-count="{{ articles|count }}"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a></li>
       {% endfor %}
       </ul>
     </section>