From 03c4a39c417bbe5c0345d6473b2e23ace8e6bd39 Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Thu, 5 May 2011 11:52:11 +0200
Subject: [PATCH] Added article & images

---
 Rules                                         |   2 +-
 .../html/en/blog/2011-05-05-Screenshots.md    |  26 ++
 .../html/fr/blog/2011-05-05-Screenshots.md    |  25 ++
 latest.md                                     |   2 +-
 layouts/article.html                          | 326 ++++++++----------
 layouts/oldarticle.html                       | 183 ++++++++++
 multi/blog/2011-05-05-Screenshots.md          |  29 ++
 site/css/main.css                             | 186 ++++++----
 site/src/main.scss                            |  34 +-
 tasks/new_blog_entry                          |   2 +-
 10 files changed, 556 insertions(+), 259 deletions(-)
 create mode 100644 content/html/en/blog/2011-05-05-Screenshots.md
 create mode 100644 content/html/fr/blog/2011-05-05-Screenshots.md
 create mode 100644 layouts/oldarticle.html
 create mode 100644 multi/blog/2011-05-05-Screenshots.md
diff --git a/Rules b/Rules
index f5649d6..110f9ff 100644
--- a/Rules
+++ b/Rules
@@ -72,7 +72,7 @@ compile '/html/*' do
     filter :footnotes
 
     if item[:kind] == 'article'
-        layout 'main'
+        layout 'article'
     elsif not item[:layout].nil?
         layout item[:layout]
     else
diff --git a/content/html/en/blog/2011-05-05-Screenshots.md b/content/html/en/blog/2011-05-05-Screenshots.md
new file mode 100644
index 0000000..c4771bd
--- /dev/null
+++ b/content/html/en/blog/2011-05-05-Screenshots.md
@@ -0,0 +1,26 @@
+-----
+isHidden:       false
+menupriority:   1
+kind:           article
+created_at:     2011-05-05T11:27:11+02:00
+title: Captures d'écran
+author_name: Yann Esposito
+author_uri: yannesposito.com
+tags:
+  - images
+  - screenshot
+-----
+<%= blogimage("main.png","îcone") %>
+
+begindiv(intro)
+
+<%= tldr %> Some
+
+
+enddiv
+
+Here are some screenshots of YPassword.
+
+<%= blogimage("screenshot1.png","première image") %>
+
+<%= blogimage("screenshot2.png","seconde image") %>
diff --git a/content/html/fr/blog/2011-05-05-Screenshots.md b/content/html/fr/blog/2011-05-05-Screenshots.md
new file mode 100644
index 0000000..389bf4d
--- /dev/null
+++ b/content/html/fr/blog/2011-05-05-Screenshots.md
@@ -0,0 +1,25 @@
+-----
+isHidden:       false
+menupriority:   1
+kind:           article
+created_at:     2011-05-05T11:27:11+02:00
+title: Screenshots
+author_name: Yann Esposito
+author_uri: yannesposito.com
+tags:
+  - images
+-----
+<%= blogimage("main.png","îcone") %>
+
+begindiv(intro)
+
+
+<%= tlal %>
+
+enddiv
+
+Ceci est une suite de quelques captures d'écran d'YPassword.
+
+<%= blogimage("screenshot1.png","première image") %>
+
+<%= blogimage("screenshot2.png","seconde image") %>
diff --git a/latest.md b/latest.md
index 3000572..fecca15 120000
--- a/latest.md
+++ b/latest.md
@@ -1 +1 @@
-./multi/blog/2011-05-02-First-post.md
\ No newline at end of file
+./multi/blog/2011-05-05-Screeshots.md
\ No newline at end of file
diff --git a/layouts/article.html b/layouts/article.html
index 1b7a722..de92dc8 100644
--- a/layouts/article.html
+++ b/layouts/article.html
@@ -1,183 +1,159 @@
------
------
-<% language, languages, blog, article = setItemConf %><?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <% t=tags %>
-        <% if t.length > 0 %>
-        <meta name="keywords" content="<%= t %>">
-        <% end %>
-        <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/main.css" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/twilight.css" />
-        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/idc.css" />
-        <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocom<%= language %>"/>
-        <% 
-        languages.each do |lang|
-        item_for_lang=item_of_language(lang)
-        if not item_for_lang.nil? %>
-        <link rel="alternate" lang="<%= lang %>" xml:lang="<%= lang %>" title="<%= item_for_lang[:title] %>" type="text/html" hreflang="<%= lang %>" href="<%= item_for_lang.reps[0].path %>" /> <% 
-        end
-        end %>
-        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery-1.3.1.min.js"></script>
-        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery.cookie.js"></script>
-        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/index.js"></script>
-        <!--[if lt IE 9]>
-        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
-        <![endif]-->
-        <!-- < % if containMaths %>
-        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/MathJax/MathJax.js"></script>
-        < % end %>
-        -->
-        <title><%= @item[:title] %></title>
-    </head>
-    <body lang="<%= language %>">
-        <script type="text/javascript">// <![CDATA[
-            document.write('<div id="blackpage"><img src="<%=@config[:webprefix]%>/img/loading.gif" alt="<%= tradOf(:loading) %>"/></div>');
-            // ]]>
-        </script>
+<% language, languages, blog, article = setItemConf %><!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <!-- 
+    Copyright ©Yann Esposito 2011
+    Extended from HTML5boilerplate
+  -->
+  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+       Remove this if you use the .htaccess -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-        <div id="content">
+  <title><%= @item[:title] %></title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <%= meta_tags %>
 
-            <div id="choix"> 
-                <div class="return"><a href="#entete">&darr; Menu &darr;</a></div>
-                <div id="choixlang">
-                    <%= languages.map do |l|
-                    dest=@item_rep.path.sub(%r{#{@config[:webprefix]}/../}, %{#{config[:webprefix]}/#{l}/}) 
-                    if @item_rep.path != dest
-                    %{<a href="#{dest}" onclick="setLanguage('#{l}')">#{ tradOfKeywordIn(:switchTo,l)}</a>}
-                    else
-                    nil
-                    end
-                    end.join() %>
-                </div>
-            </div>
-            <div id="titre">
-                <h1>
-                    <%= @item[:title] %>
-                </h1>
-                <% unless @item[:subtitle].nil? %> 
-                <h2>
-                    <%= @item[:subtitle] %> 
-                </h2>
-                <% end %>
+
+  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
+  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
+  <link rel="shortcut icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+
+  <!-- CSS: implied media="all" -->
+  <link rel="stylesheet" href="/css/less.css"/>
+  <link href='http://fonts.googleapis.com/css?family=Expletus+Sans:bold' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Kreon:regular,bold' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="/css/main.css">
+
+  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
+  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
+
+  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+  <script src="/js/libs/modernizr-1.7.min.js"></script>
+
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="<%= @config[:rss_uri][language.intern] %>"/>
+
+</head>
+
+<body lang="<%= language %>">
+  <header>
+    <div id="choixrss"><%= choixrss %></div>
+    <div id="choixlang"><%= choixlang %></div>
+    <nav id="mainnav">
+        <ul>
+            <%= generateMenu %>
+        </ul>
+    </nav>
+  </header>
+  <div id="metacontainer">
+    <div id="container">
+
+      <div id="main" role="main">
+        <hgroup>
+          <h1><%= @item[:content_for_title].nil? ? @item[:title] : @item[:content_for_title] %></h1>
+          <% unless @item[:subtitle].nil? and @item[:content_for_subtitle].nil? %> 
+          <h2>
+          <%= @item[:content_for_subtitle].nil? ? @item[:subtitle] : @item[:content_for_subtitle] %>
+          </h2>
+          <% end %>
+        </hgroup>
+        
+        <article>
+            <div class="content">
+                <%= yield %>
             </div>
+            <footer>
+                <ul class="article_metadata">
+                    <li><%=tradOf(:created_at)%>: <time><%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %></time></li>
+                    <li><%=tradOf(:last_modified)%>: <time> <%= gitmtime.strftime(@config[:dateFormat][language.intern]) %></time></li>
+                    <li><%=tradOf(:copyright) %></li>
+                </ul>
+            </footer>
+        </article>
 
-            <div class="flush"></div>
-
-            <% if @item[:content_for_summary] %>
-            <div class="corps summary">
-                <% @item[:content_for_summary] %>
+      </div>
+      <div id="related_articles">
+        <div id="previous_articles">
+            <h4> <%= tradOf(:previousArticles) %> </h4>
+            <% 
+               (1..3).each do |n|
+               a=article_brother(-n)
+               if not a.nil?
+           %>
+            <div class="previous_article">
+              <%= link_to( %{<span class="nicer">«</span>&nbsp;}+ a[:title], a)  %>
             </div>
             <% end %>
-
-            <%= generateSubMenu %>
-
-            <div class="flush"></div>
-            <div id="afterheader">
-                <div class="corps">
-                    <%= yield %>
-                </div>
-            <% depth = depthOf(@item) %>
-                <% if depth > 3 or ( depth == 3 and @item.children.length > 0 ) %>
-                    <div class="navigation">
-                        <div class="navigationprev"><%= previousFor(@item) %></div>
-                        <div class="navigationnext"><%= nextFor(@item) %></div>
-                    </div>
-                    <div class="flush"></div>
-                <% end %>
-
-                <div id="choixrss">
-                    <a id="rss" href="http://feeds.feedburner.com/yannespositocom<%= language %>">
-                        <%= tradOf(:subscribe) %>
-                    </a>
-                </div>
-                <script type="text/javascript">
-                    $(document).ready(function(){ 
-                            $('#comment').hide(); 
-                            $('#clickcomment').click(showComments); 
-                        });
-                    function showComments() {
-                        $('#comment').show();
-                        $('#clickcomment').fadeOut();
-                    }
-                    document.write('<div id="clickcomment"><%= tradOf(:clickForComment) %></div>');
-                </script>
-                <div class="flush"></div>
-                <div class="corps" id="comment">
-                    <h2 class="first"><%= tradOf(:comment) %></h2>
-                    <noscript>
-                        <%= tradOf(:enableJavascriptToComment) %>
-                    </noscript>
-                    <%= generateIntenseDebateThread %>
-                </div>
-
-            <div id="entete" class="corps_spaced">
-                <div id="liens">
-                    <%= generateMenu %>
-                </div>
-                <div class="flush"></div>
-                <hr/>
-                <div id="next_before_articles">
-                    <div id="previous_articles">
-                        <%= tradOf(:previousArticles) %>
-                        <% 
-                        (1..3).each do |n|
-                        a=article_brother(-n)
-                        if not a.nil?
-                        %>
-                        <div class="previous_article">
-                            <%= link_to( %{<span class="nicer">«</span>&nbsp;}+ a[:title], a)  %>
-                        </div>
-                        <% end %>
-                        <% end %>
-                    </div>
-                    <div id="next_articles">
-                        <%= tradOf(:nextArticles) %>
-                        <% 
-                        (1..3).each do |n|
-                        a=article_brother(n)
-                        if not a.nil?
-                        %>
-                        <div class="next_article">
-                            <%= link_to(a[:title] + %{&nbsp;<span class="nicer">»</span>}, a)  %>
-                        </div>
-                        <% end %>
-                        <% end %>
-                    </div>
-                    <div class="flush"></div>
-                </div>
-            </div>
-
-
-            <div id="bottom">
-                <div>
-                    <%=tradOf(:copyright) %>
-                </div>
-                <div id="lastmod">
-                    <%=tradOf(:created_at)%>: <%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %>
-                    <%=tradOf(:last_modified)%>: <%= gitmtime.strftime(@config[:dateFormat][language.intern]) %> 
-                </div>
-                <div>
-                    <%= tradOf(:entirely_done_with) %>
-                    <a href="http://www.vim.org">Vim</a>
-                    <%= tradOf(:and) %> 
-                    <a href="http://nanoc.stoneship.org">nanoc</a>
-                </div>
-                <div>
-                    <a href="<%=@config[:webprefix]%>/<%=language%>/validation/">Validation</a> 
-                    <a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
-                    .
-                    <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
-                    .
-                    <a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com<%=@config[:webprefix]%>/<%=language%>/blog/feed/feed.xml">[rss]</a>
-                </div>
-            </div>
-            <div class="clear"></div>
+          <% end %>
         </div>
-        <%= clicky_analytics %>
-    </body>
+        <div id="next_articles">
+            <h4><%= tradOf(:nextArticles) %></h4>
+        <% 
+           (1..3).each do |n|
+              a=article_brother(n)
+              if not a.nil?
+        %>
+                <div class="next_article">
+                    <%= link_to(a[:title] + %{&nbsp;<span class="nicer">»</span>}, a)  %>
+                </div>
+                <% end %>
+            <% end %>
+        </div>
+        <div class="flush"></div>
+      </div>
+
+    </div> <!--! end of #container -->
+  </div> <!--! end of #metacontainer -->
+  <footer>
+    <div id="webpageinfo">
+        <%=tradOf(:copyright) %>
+        <div>
+            <%= tradOf(:entirely_done_with) %>
+            <a href="http://www.vim.org">Vim</a>
+            <%= tradOf(:and) %> 
+            <a href="http://nanoc.stoneship.org">nanoc</a>
+        </div>
+    </div>
+  </footer>
+
+
+  <!-- JavaScript at the bottom for fast page loading -->
+
+  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
+  <script>window.jQuery || document.write("<script src='/js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
+
+
+  <!-- scripts concatenated and minified via ant build script-->
+  <script src="/js/plugins.js"></script>
+  <script src="/js/script.js"></script>
+  <%= @item[:content_for_js] %>
+  <!-- end scripts-->
+
+
+  <!--[if lt IE 7 ]>
+    <script src="/js/libs/dd_belatedpng.js"></script>
+    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
+  <![endif]-->
+
+
+  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
+  <script>
+    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
+    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
+    s.parentNode.insertBefore(g,s)}(document,"script"));
+  </script>
+
+  <%= clicky_analytics %>
+</body>
 </html>
diff --git a/layouts/oldarticle.html b/layouts/oldarticle.html
new file mode 100644
index 0000000..1b7a722
--- /dev/null
+++ b/layouts/oldarticle.html
@@ -0,0 +1,183 @@
+-----
+-----
+<% language, languages, blog, article = setItemConf %><?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <% t=tags %>
+        <% if t.length > 0 %>
+        <meta name="keywords" content="<%= t %>">
+        <% end %>
+        <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/main.css" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/twilight.css" />
+        <link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/idc.css" />
+        <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocom<%= language %>"/>
+        <% 
+        languages.each do |lang|
+        item_for_lang=item_of_language(lang)
+        if not item_for_lang.nil? %>
+        <link rel="alternate" lang="<%= lang %>" xml:lang="<%= lang %>" title="<%= item_for_lang[:title] %>" type="text/html" hreflang="<%= lang %>" href="<%= item_for_lang.reps[0].path %>" /> <% 
+        end
+        end %>
+        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery-1.3.1.min.js"></script>
+        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery.cookie.js"></script>
+        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/index.js"></script>
+        <!--[if lt IE 9]>
+        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
+        <![endif]-->
+        <!-- < % if containMaths %>
+        <script type="text/javascript" src="<%=@config[:webprefix]%>/js/MathJax/MathJax.js"></script>
+        < % end %>
+        -->
+        <title><%= @item[:title] %></title>
+    </head>
+    <body lang="<%= language %>">
+        <script type="text/javascript">// <![CDATA[
+            document.write('<div id="blackpage"><img src="<%=@config[:webprefix]%>/img/loading.gif" alt="<%= tradOf(:loading) %>"/></div>');
+            // ]]>
+        </script>
+
+        <div id="content">
+
+            <div id="choix"> 
+                <div class="return"><a href="#entete">&darr; Menu &darr;</a></div>
+                <div id="choixlang">
+                    <%= languages.map do |l|
+                    dest=@item_rep.path.sub(%r{#{@config[:webprefix]}/../}, %{#{config[:webprefix]}/#{l}/}) 
+                    if @item_rep.path != dest
+                    %{<a href="#{dest}" onclick="setLanguage('#{l}')">#{ tradOfKeywordIn(:switchTo,l)}</a>}
+                    else
+                    nil
+                    end
+                    end.join() %>
+                </div>
+            </div>
+            <div id="titre">
+                <h1>
+                    <%= @item[:title] %>
+                </h1>
+                <% unless @item[:subtitle].nil? %> 
+                <h2>
+                    <%= @item[:subtitle] %> 
+                </h2>
+                <% end %>
+            </div>
+
+            <div class="flush"></div>
+
+            <% if @item[:content_for_summary] %>
+            <div class="corps summary">
+                <% @item[:content_for_summary] %>
+            </div>
+            <% end %>
+
+            <%= generateSubMenu %>
+
+            <div class="flush"></div>
+            <div id="afterheader">
+                <div class="corps">
+                    <%= yield %>
+                </div>
+            <% depth = depthOf(@item) %>
+                <% if depth > 3 or ( depth == 3 and @item.children.length > 0 ) %>
+                    <div class="navigation">
+                        <div class="navigationprev"><%= previousFor(@item) %></div>
+                        <div class="navigationnext"><%= nextFor(@item) %></div>
+                    </div>
+                    <div class="flush"></div>
+                <% end %>
+
+                <div id="choixrss">
+                    <a id="rss" href="http://feeds.feedburner.com/yannespositocom<%= language %>">
+                        <%= tradOf(:subscribe) %>
+                    </a>
+                </div>
+                <script type="text/javascript">
+                    $(document).ready(function(){ 
+                            $('#comment').hide(); 
+                            $('#clickcomment').click(showComments); 
+                        });
+                    function showComments() {
+                        $('#comment').show();
+                        $('#clickcomment').fadeOut();
+                    }
+                    document.write('<div id="clickcomment"><%= tradOf(:clickForComment) %></div>');
+                </script>
+                <div class="flush"></div>
+                <div class="corps" id="comment">
+                    <h2 class="first"><%= tradOf(:comment) %></h2>
+                    <noscript>
+                        <%= tradOf(:enableJavascriptToComment) %>
+                    </noscript>
+                    <%= generateIntenseDebateThread %>
+                </div>
+
+            <div id="entete" class="corps_spaced">
+                <div id="liens">
+                    <%= generateMenu %>
+                </div>
+                <div class="flush"></div>
+                <hr/>
+                <div id="next_before_articles">
+                    <div id="previous_articles">
+                        <%= tradOf(:previousArticles) %>
+                        <% 
+                        (1..3).each do |n|
+                        a=article_brother(-n)
+                        if not a.nil?
+                        %>
+                        <div class="previous_article">
+                            <%= link_to( %{<span class="nicer">«</span>&nbsp;}+ a[:title], a)  %>
+                        </div>
+                        <% end %>
+                        <% end %>
+                    </div>
+                    <div id="next_articles">
+                        <%= tradOf(:nextArticles) %>
+                        <% 
+                        (1..3).each do |n|
+                        a=article_brother(n)
+                        if not a.nil?
+                        %>
+                        <div class="next_article">
+                            <%= link_to(a[:title] + %{&nbsp;<span class="nicer">»</span>}, a)  %>
+                        </div>
+                        <% end %>
+                        <% end %>
+                    </div>
+                    <div class="flush"></div>
+                </div>
+            </div>
+
+
+            <div id="bottom">
+                <div>
+                    <%=tradOf(:copyright) %>
+                </div>
+                <div id="lastmod">
+                    <%=tradOf(:created_at)%>: <%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %>
+                    <%=tradOf(:last_modified)%>: <%= gitmtime.strftime(@config[:dateFormat][language.intern]) %> 
+                </div>
+                <div>
+                    <%= tradOf(:entirely_done_with) %>
+                    <a href="http://www.vim.org">Vim</a>
+                    <%= tradOf(:and) %> 
+                    <a href="http://nanoc.stoneship.org">nanoc</a>
+                </div>
+                <div>
+                    <a href="<%=@config[:webprefix]%>/<%=language%>/validation/">Validation</a> 
+                    <a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
+                    .
+                    <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
+                    .
+                    <a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com<%=@config[:webprefix]%>/<%=language%>/blog/feed/feed.xml">[rss]</a>
+                </div>
+            </div>
+            <div class="clear"></div>
+        </div>
+        <%= clicky_analytics %>
+    </body>
+</html>
diff --git a/multi/blog/2011-05-05-Screenshots.md b/multi/blog/2011-05-05-Screenshots.md
new file mode 100644
index 0000000..148bb6d
--- /dev/null
+++ b/multi/blog/2011-05-05-Screenshots.md
@@ -0,0 +1,29 @@
+-----
+isHidden:       false
+menupriority:   1
+kind:           article
+created_at:     2011-05-05T11:27:11+02:00
+fr: title: Screenshots
+en: title: Captures d'écran
+author_name: Yann Esposito
+author_uri: yannesposito.com
+tags:
+  - images
+en:   - screenshot
+-----
+<%= blogimage("main.png","îcone") %>
+
+begindiv(intro)
+
+en: <%= tldr %> Some
+
+fr: <%= tlal %>
+
+enddiv
+
+fr: Ceci est une suite de quelques captures d'écran d'YPassword.
+en: Here are some screenshots of YPassword.
+
+<%= blogimage("screenshot1.png","première image") %>
+
+<%= blogimage("screenshot2.png","seconde image") %>
diff --git a/site/css/main.css b/site/css/main.css
index 3817773..de515f7 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -30,17 +30,48 @@ a:hover {
 }
 
 /* line 85, ../src/main.scss */
+img {
+  max-width: 100%;
+}
+
+/* line 88, ../src/main.scss */
+article img {
+  background-color: rgba(0, 0, 0, 0.02);
+  -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  -webkit-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  -o-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  padding: 15px;
+  width: 344px;
+  margin-right: 24px;
+}
+/* line 40, ../src/main.scss */
+article img > * {
+  padding: 20px;
+}
+/* line 43, ../src/main.scss */
+article img:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* line 95, ../src/main.scss */
 .corps {
   margin: 48px 0;
   line-height: 32px;
 }
 
-/* line 90, ../src/main.scss */
+/* line 100, ../src/main.scss */
 #metacontainer {
   border-bottom: 1px solid #888;
 }
 
-/* line 93, ../src/main.scss */
+/* line 103, ../src/main.scss */
 body > header {
   margin: 0;
   color: #CCC;
@@ -53,7 +84,7 @@ body > header {
   box-shadow: 0px 0px 5px #333333;
 }
 
-/* line 101, ../src/main.scss */
+/* line 111, ../src/main.scss */
 body > footer {
   border-top: solid 1px rgba(0, 0, 0, 0.1);
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
@@ -68,30 +99,55 @@ body > footer {
   -o-box-shadow: rgba(0, 0, 0, 0.2) 0 0 7px inset;
   box-shadow: rgba(0, 0, 0, 0.2) 0 0 7px inset;
 }
-/* line 111, ../src/main.scss */
+/* line 121, ../src/main.scss */
 body > footer a {
   color: #2c5490;
 }
 
-/* line 116, ../src/main.scss */
+/* line 126, ../src/main.scss */
 article > footer {
-  color: #88aadd;
   margin: 48px 0;
+  width: 252px;
+  margin-right: 24px;
+  background-color: rgba(0, 0, 0, 0.02);
+  -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  -webkit-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  -o-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  font-size: .7em;
 }
-/* line 119, ../src/main.scss */
+/* line 128, ../src/main.scss */
+article > footer ul {
+  list-style-type: none;
+}
+/* line 40, ../src/main.scss */
+article > footer > * {
+  padding: 20px;
+}
+/* line 43, ../src/main.scss */
+article > footer:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+/* line 134, ../src/main.scss */
 article > footer ul {
   list-style-type: none;
 }
 
-/* line 126, ../src/main.scss */
+/* line 141, ../src/main.scss */
 nav {
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
-/* line 129, ../src/main.scss */
+/* line 144, ../src/main.scss */
 nav ul {
   list-style-type: none;
 }
-/* line 131, ../src/main.scss */
+/* line 146, ../src/main.scss */
 nav ul li {
   display: inline-block;
   height: 50px;
@@ -101,7 +157,7 @@ nav ul li {
   border-left: solid 1px rgba(255, 255, 255, 0.1);
   border-right: solid 1px rgba(0, 0, 0, 0.2);
 }
-/* line 139, ../src/main.scss */
+/* line 154, ../src/main.scss */
 nav ul li * {
   display: block;
   margin-right: 0px;
@@ -110,21 +166,21 @@ nav ul li * {
   height: 100%;
   text-shadow: -1px -1px rgba(0, 0, 0, 0.2), 1px 1px rgba(0, 0, 0, 0.2);
 }
-/* line 147, ../src/main.scss */
+/* line 162, ../src/main.scss */
 nav ul li span.active {
   background-color: rgba(0, 0, 0, 0.1);
 }
-/* line 150, ../src/main.scss */
+/* line 165, ../src/main.scss */
 nav ul li a {
   color: rgba(255, 255, 255, 0.8);
 }
-/* line 152, ../src/main.scss */
+/* line 167, ../src/main.scss */
 nav ul li a:hover {
   color: rgba(255, 255, 255, 0.8);
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-/* line 161, ../src/main.scss */
+/* line 176, ../src/main.scss */
 header #choixrss, header #choixlang {
   display: block;
   margin-right: 0px;
@@ -137,7 +193,7 @@ header #choixrss, header #choixlang {
   border-left: solid 1px rgba(255, 255, 255, 0.1);
   border-right: solid 1px rgba(0, 0, 0, 0.2);
 }
-/* line 172, ../src/main.scss */
+/* line 187, ../src/main.scss */
 header #choixrss a, header #choixlang a {
   color: #bcd0ee;
   display: block;
@@ -146,13 +202,13 @@ header #choixrss a, header #choixlang a {
   padding: 0 10px 0 10px;
   text-align: center;
 }
-/* line 180, ../src/main.scss */
+/* line 195, ../src/main.scss */
 header #choixrss a:hover, header #choixlang a:hover {
   color: rgba(255, 255, 255, 0.8);
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-/* line 187, ../src/main.scss */
+/* line 202, ../src/main.scss */
 nav ul li a:hover, #choixlang a:hover, #choixrss a:hover {
   -moz-box-shadow: #333377 0 0 8px inset;
   -webkit-box-shadow: #333377 0 0 8px inset;
@@ -160,12 +216,12 @@ nav ul li a:hover, #choixlang a:hover, #choixrss a:hover {
   box-shadow: #333377 0 0 8px inset;
 }
 
-/* line 192, ../src/main.scss */
+/* line 207, ../src/main.scss */
 #main, #container {
   margin: 0px auto;
 }
 
-/* line 196, ../src/main.scss */
+/* line 211, ../src/main.scss */
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Expletus Sans',Futura,sans-serif;
   text-shadow: 0px -1px 0px #223366, 0px 1px 0px white;
@@ -174,12 +230,12 @@ h1, h2, h3, h4, h5, h6 {
   margin: 48px 0;
   text-align: center;
 }
-/* line 205, ../src/main.scss */
+/* line 220, ../src/main.scss */
 h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
   text-shadow: 0px -1px 0px #441111, 0px 1px 0px white;
 }
 
-/* line 211, ../src/main.scss */
+/* line 226, ../src/main.scss */
 article article {
   background-color: rgba(0, 0, 0, 0.02);
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -192,6 +248,7 @@ article article {
   -ms-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
+  margin: 24px 0;
 }
 /* line 40, ../src/main.scss */
 article article > * {
@@ -201,13 +258,13 @@ article article > * {
 article article:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
-/* line 213, ../src/main.scss */
+/* line 228, ../src/main.scss */
 article article .date {
   float: right;
   padding: 0;
   margin: 20px;
 }
-/* line 214, ../src/main.scss */
+/* line 230, ../src/main.scss */
 article article h1, article article h2, article article h3, article article h4, article article h5, article article h6 {
   text-align: left;
   font-size: 36px;
@@ -215,17 +272,17 @@ article article h1, article article h2, article article h3, article article h4,
   margin: 0 0 16px;
 }
 
-/* line 222, ../src/main.scss */
+/* line 238, ../src/main.scss */
 .intro {
   margin-bottom: 24px;
 }
 
-/* line 226, ../src/main.scss */
+/* line 242, ../src/main.scss */
 .sc {
   font-variant: small-caps;
 }
 
-/* line 230, ../src/main.scss */
+/* line 246, ../src/main.scss */
 .block {
   background-color: rgba(0, 0, 0, 0.02);
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -253,29 +310,29 @@ article article h1, article article h2, article article h3, article article h4,
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
-/* line 234, ../src/main.scss */
+/* line 250, ../src/main.scss */
 .block h3 {
   text-size: .6em;
   text-align: left;
   margin: 0 0 12px;
 }
 
-/* line 243, ../src/main.scss */
+/* line 259, ../src/main.scss */
 .right {
   float: right;
 }
 
-/* line 246, ../src/main.scss */
+/* line 262, ../src/main.scss */
 .left {
   float: left;
 }
 
-/* line 249, ../src/main.scss */
+/* line 265, ../src/main.scss */
 .flush {
   clear: both;
 }
 
-/* line 252, ../src/main.scss */
+/* line 268, ../src/main.scss */
 .slideshow {
   background: #88aadd;
   color: #fafafa;
@@ -297,12 +354,12 @@ article article h1, article article h2, article article h3, article article h4,
 .slideshow > * {
   margin: 20px;
 }
-/* line 254, ../src/main.scss */
+/* line 270, ../src/main.scss */
 .slideshow > * {
   padding: 3em;
 }
 
-/* line 259, ../src/main.scss */
+/* line 275, ../src/main.scss */
 .date {
   font-size: 0.8em;
   border: 1px solid #7689a6;
@@ -313,18 +370,18 @@ article article h1, article article h2, article article h3, article article h4,
   vertical-align: middle;
   margin-right: 1em;
 }
-/* line 268, ../src/main.scss */
+/* line 284, ../src/main.scss */
 .date .day, .date .month, .date .year {
   display: block;
 }
-/* line 271, ../src/main.scss */
+/* line 287, ../src/main.scss */
 .date .day {
   float: left;
   width: 1.7em;
   background: #a9c5ee;
   color: #2c5490;
 }
-/* line 277, ../src/main.scss */
+/* line 293, ../src/main.scss */
 .date .month {
   float: right;
   width: 2.3em;
@@ -332,7 +389,7 @@ article article h1, article article h2, article article h3, article article h4,
   background: #2c5490;
   border-left: 1px solid #88aadd;
 }
-/* line 284, ../src/main.scss */
+/* line 300, ../src/main.scss */
 .date .year {
   line-height: 3ex;
   clear: both;
@@ -341,7 +398,7 @@ article article h1, article article h2, article article h3, article article h4,
   border-top: 1px solid #223366;
 }
 
-/* line 294, ../src/main.scss */
+/* line 310, ../src/main.scss */
 .archive {
   background-color: rgba(0, 0, 0, 0.02);
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -357,27 +414,27 @@ article article h1, article article h2, article article h3, article article h4,
   padding: 2em;
 }
 
-/* line 300, ../src/main.scss */
+/* line 316, ../src/main.scss */
 .tag {
   cursor: pointer;
 }
 
-/* line 303, ../src/main.scss */
+/* line 319, ../src/main.scss */
 .nicer {
   font-family: "Lucida Grande", Tahoma;
 }
 
-/* line 308, ../src/main.scss */
+/* line 324, ../src/main.scss */
 #elementblock ul {
   list-style-type: none;
 }
-/* line 310, ../src/main.scss */
+/* line 326, ../src/main.scss */
 #elementblock ul li {
   display: inline-block;
   width: 252px;
   margin-right: 24px;
 }
-/* line 313, ../src/main.scss */
+/* line 329, ../src/main.scss */
 #elementblock ul li a {
   float: left;
   background-color: rgba(0, 0, 0, 0.02);
@@ -395,12 +452,12 @@ article article h1, article article h2, article article h3, article article h4,
   text-align: center;
   width: 80%;
 }
-/* line 322, ../src/main.scss */
+/* line 338, ../src/main.scss */
 #elementblock ul li a:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 329, ../src/main.scss */
+/* line 345, ../src/main.scss */
 .return {
   background-color: rgba(0, 0, 0, 0.02);
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -425,33 +482,16 @@ article article h1, article article h2, article article h3, article article h4,
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 335, ../src/main.scss */
-article footer {
-  width: 252px;
+/* line 352, ../src/main.scss */
+#related_articles #previous_articles {
+  width: 344px;
   margin-right: 24px;
-  background-color: rgba(0, 0, 0, 0.02);
-  -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
-  -webkit-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
-  -o-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
-  box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -o-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -khtml-border-radius: 5px;
-  border-radius: 5px;
-  font-size: .7em;
-  opacity: .6;
+  float: left;
 }
-/* line 40, ../src/main.scss */
-article footer > * {
-  padding: 20px;
-}
-/* line 43, ../src/main.scss */
-article footer:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-/* line 340, ../src/main.scss */
-article footer ul {
-  list-style-type: none;
+/* line 356, ../src/main.scss */
+#related_articles #next_articles {
+  float: right;
+  text-align: right;
+  width: 344px;
+  margin-right: 24px;
 }
diff --git a/site/src/main.scss b/site/src/main.scss
index 754cdef..445ec1b 100644
--- a/site/src/main.scss
+++ b/site/src/main.scss
@@ -82,6 +82,16 @@ a:hover {
     color: $hoverColor;
 }
 
+img {
+    max-width: 100%; }
+article {
+    img {
+        @include innerblock();
+        padding: 15px;
+        @include column(4);
+    }
+}
+
 .corps {
     margin: 48px 0;
     line-height: 32px;
@@ -114,11 +124,16 @@ body > footer {
 }
 
 article > footer  {
-    color: $mainColor;
     margin: 48px 0;
     ul {
         list-style-type: none;
     }
+    @include column(3);
+    @include innerblock;
+    font-size: .7em;
+    ul {
+        list-style-type: none;
+    }
 }
 
 $menuItemWidth: 8em;
@@ -211,6 +226,7 @@ h1, h2, h3, h4, h5, h6 {
 article article {
     @include innerblock();
     .date { float: right; padding: 0; margin: 20px; }
+    margin: 24px 0;
     h1, h2, h3, h4, h5, h6 {
         text-align: left;
         font-size: 36px;
@@ -332,12 +348,14 @@ article article {
     margin: 1em 0;
 }
 
-article footer {
-    @include column(3);
-    @include innerblock;
-    font-size: .7em;
-    opacity: .6;
-    ul {
-        list-style-type: none;
+#related_articles {
+    #previous_articles {
+        @include column(4);
+        float: left;
+    }
+    #next_articles {
+        float: right;
+        text-align: right;
+        @include column(4);
     }
 }
diff --git a/tasks/new_blog_entry b/tasks/new_blog_entry
index ae76cca..1ab505e 100755
--- a/tasks/new_blog_entry
+++ b/tasks/new_blog_entry
@@ -22,7 +22,7 @@ yearmonthday=$( date "+%Y-%m-%d" )
 linkname="$root/latest.md"
 filename="$root/multi/blog/${yearmonthday}-$basefilename.md"
 [[ ! -d ${filename:h} ]] && mkdir -p ${filename:h}
-dirname="$root/output/Scratch/img/blog/${yearmonthday}-${basefilename}"
+dirname="$root/site/img/blog/${yearmonthday}-${basefilename}"
 
 [[ -e $filename ]] && {
     print -P -- "%BAttention%b : $filename existe déjà."
