From a19996f43e11a3914c29368baaaf16d89e295f8e Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Tue, 12 Jul 2011 12:04:04 +0200
Subject: [PATCH] Fixed most blog view issues

---
 layouts/article.html                          |   9 +-
 layouts/main.html                             |  10 +-
 lib/multiMenu.rb                              |   2 +-
 lib/tag.rb                                    |   2 +-
 .../en/blog/2011-05-05-Screenshots/index.html |   9 +-
 site/Scratch/en/blog/index.html               |  16 +-
 site/Scratch/en/index.html                    |  10 +-
 site/Scratch/en/support/index.html            |  10 +-
 .../fr/blog/2011-05-05-Screenshots/index.html |   9 +-
 site/Scratch/fr/blog/index.html               |  14 +-
 site/Scratch/fr/index.html                    |  10 +-
 site/Scratch/fr/support/index.html            |  10 +-
 site/css/main.css                             | 274 +++++++++++++-----
 site/index.html                               |  10 +-
 site/src/main.sass                            |  42 ++-
 15 files changed, 322 insertions(+), 115 deletions(-)

diff --git a/layouts/article.html b/layouts/article.html
index 3429755..c121d89 100644
--- a/layouts/article.html
+++ b/layouts/article.html
@@ -104,11 +104,16 @@
         <footer>
         <div id="webpageinfo">
             <%=tradOf(:copyright) %>
+            <div>
+                Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+            </div>
             <div>
                 <%= tradOf(:entirely_done_with) %>
-                <a href="http://www.vim.org">Vim</a>
+                <a href="http://www.vim.org">vim</a>,
+                <a href="http://nanoc.stoneship.org">nanoc</a>,
+                <a href="http://compass-style.org">compass</a>
                 <%= tradOf(:and) %> 
-                <a href="http://nanoc.stoneship.org">nanoc</a>
+                <a href="http://html5boilerplate">html5boilerplate</a>
             </div>
         </div>
         </footer>
diff --git a/layouts/main.html b/layouts/main.html
index 2f0d5e2..f7afbeb 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -71,12 +71,16 @@
     <footer>
       <div id="webpageinfo">
           <%=tradOf(:copyright) %>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               <%= tradOf(:entirely_done_with) %>
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               <%= tradOf(:and) %> 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/lib/multiMenu.rb b/lib/multiMenu.rb
index 015093e..34cf7cb 100644
--- a/lib/multiMenu.rb
+++ b/lib/multiMenu.rb
@@ -48,7 +48,7 @@ def generateBlogSubMenu(language)
                 res<<=%{</ul><script type="text/javascript">$('#archives_#{year}').hide()</script>}
             end
             year=p[:created_at].strftime("%Y") 
-            res<<=%{<h4 class="button" onclick="$('#archives_#{year}').slideToggle()">[#{year}]</h4><ul id="archives_#{year}">}
+            res<<=%{<h4 class="button"><a onclick="$('#archives_#{year}').slideToggle();return false;" href="#">[#{year}]</a></h4><ul id="archives_#{year}">}
         end
         res<<='<li>'
         res<<=calendar_for(p[:created_at],language)+
diff --git a/lib/tag.rb b/lib/tag.rb
index 4b3ac5b..07f891d 100644
--- a/lib/tag.rb
+++ b/lib/tag.rb
@@ -99,7 +99,7 @@
             tagCloud <<= %{<div id="#{protected}" class="list"><h4>#{t}</h4><ul style="list-style-type: none; margin: 0;">}
             l.sort{|x,y| y[:created_at] <=> x[:created_at]}.each do |p|
                 tagCloud <<= %{
-                    <li style="line-height: 3em; margin: 0;">
+                    <li>
                         #{calendar_for(p[:created_at], language)}
                         <a href="#{p.path}">#{p[:title]} <span class="nicer">»</span></a>
                     </li>\n}
diff --git a/site/Scratch/en/blog/2011-05-05-Screenshots/index.html b/site/Scratch/en/blog/2011-05-05-Screenshots/index.html
index 88a2adb..6d5fd72 100644
--- a/site/Scratch/en/blog/2011-05-05-Screenshots/index.html
+++ b/site/Scratch/en/blog/2011-05-05-Screenshots/index.html
@@ -130,11 +130,16 @@ Now you can paste it anywhere.</p>
         <footer>
         <div id="webpageinfo">
             <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
+            <div>
+                Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+            </div>
             <div>
                 Entirely done with
-                <a href="http://www.vim.org">Vim</a>
+                <a href="http://www.vim.org">vim</a>,
+                <a href="http://nanoc.stoneship.org">nanoc</a>,
+                <a href="http://compass-style.org">compass</a>
                 and 
-                <a href="http://nanoc.stoneship.org">nanoc</a>
+                <a href="http://html5boilerplate">html5boilerplate</a>
             </div>
         </div>
         </footer>
diff --git a/site/Scratch/en/blog/index.html b/site/Scratch/en/blog/index.html
index 7ae07c6..1ab570a 100644
--- a/site/Scratch/en/blog/index.html
+++ b/site/Scratch/en/blog/index.html
@@ -136,7 +136,7 @@ Now you can paste it anywhere.</p>
                 $('#tag_'+id).addClass('selected');
             }
         </script><div id="tagcloud"><a href="#images" style="font-size: 1.0em;" class="tag" onclick="tagSelected('images')" id="tag_images">images</a> <a href="#screenshot" style="font-size: 1.0em;" class="tag" onclick="tagSelected('screenshot')" id="tag_screenshot">screenshot</a> </div><div id="hiddenDivs" ><div id="images" class="list"><h4>images</h4><ul style="list-style-type: none; margin: 0;">
-                    <li style="line-height: 3em; margin: 0;">
+                    <li>
                         <span class="date">
         <span class="day">5</span>
         <span class="month">May</span>
@@ -145,7 +145,7 @@ Now you can paste it anywhere.</p>
                         <a href="/Scratch/en/blog/2011-05-05-Screenshots/">Screenshots <span class="nicer">»</span></a>
                     </li>
 </ul><a class="return" href="#tagcloud">&uarr;</a></div><div id="screenshot" class="list"><h4>screenshot</h4><ul style="list-style-type: none; margin: 0;">
-                    <li style="line-height: 3em; margin: 0;">
+                    <li>
                         <span class="date">
         <span class="day">5</span>
         <span class="month">May</span>
@@ -159,7 +159,7 @@ Now you can paste it anywhere.</p>
 
 <h2 id="archives">Archives</h2>
 
-<div id="sousliens" class="archive"><h4 class="button" onclick="$('#archives_2011').slideToggle()">[2011]</h4><ul id="archives_2011"><li><span class="date">
+<div id="sousliens" class="archive"><h4 class="button"><a onclick="$('#archives_2011').slideToggle();return false;" href="#">[2011]</a></h4><ul id="archives_2011"><li><span class="date">
         <span class="day">5</span>
         <span class="month">May</span>
         <span class="year">2011</span>
@@ -176,12 +176,16 @@ Now you can paste it anywhere.</p>
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Entirely done with
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               and 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/Scratch/en/index.html b/site/Scratch/en/index.html
index 0fb6356..0df2d3d 100644
--- a/site/Scratch/en/index.html
+++ b/site/Scratch/en/index.html
@@ -109,12 +109,16 @@
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Entirely done with
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               and 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/Scratch/en/support/index.html b/site/Scratch/en/support/index.html
index 1b1d79a..ad49738 100644
--- a/site/Scratch/en/support/index.html
+++ b/site/Scratch/en/support/index.html
@@ -89,12 +89,16 @@
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Entirely done with
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               and 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/Scratch/fr/blog/2011-05-05-Screenshots/index.html b/site/Scratch/fr/blog/2011-05-05-Screenshots/index.html
index ac13ed3..100615b 100644
--- a/site/Scratch/fr/blog/2011-05-05-Screenshots/index.html
+++ b/site/Scratch/fr/blog/2011-05-05-Screenshots/index.html
@@ -129,11 +129,16 @@
         <footer>
         <div id="webpageinfo">
             <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
+            <div>
+                Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+            </div>
             <div>
                 Site entièrement réalisé avec
-                <a href="http://www.vim.org">Vim</a>
+                <a href="http://www.vim.org">vim</a>,
+                <a href="http://nanoc.stoneship.org">nanoc</a>,
+                <a href="http://compass-style.org">compass</a>
                 et 
-                <a href="http://nanoc.stoneship.org">nanoc</a>
+                <a href="http://html5boilerplate">html5boilerplate</a>
             </div>
         </div>
         </footer>
diff --git a/site/Scratch/fr/blog/index.html b/site/Scratch/fr/blog/index.html
index c5bfd6c..a52aeed 100644
--- a/site/Scratch/fr/blog/index.html
+++ b/site/Scratch/fr/blog/index.html
@@ -131,7 +131,7 @@ Les 5 derniers articles
                 $('#tag_'+id).addClass('selected');
             }
         </script><div id="tagcloud"><a href="#images" style="font-size: 1.0em;" class="tag" onclick="tagSelected('images')" id="tag_images">images</a> </div><div id="hiddenDivs" ><div id="images" class="list"><h4>images</h4><ul style="list-style-type: none; margin: 0;">
-                    <li style="line-height: 3em; margin: 0;">
+                    <li>
                         <span class="date">
         <span class="day">5</span>
         <span class="month">Mai</span>
@@ -145,7 +145,7 @@ Les 5 derniers articles
 
 <h2 id="archives">Archives</h2>
 
-<div id="sousliens" class="archive"><h4 class="button" onclick="$('#archives_2011').slideToggle()">[2011]</h4><ul id="archives_2011"><li><span class="date">
+<div id="sousliens" class="archive"><h4 class="button"><a onclick="$('#archives_2011').slideToggle();return false;" href="#">[2011]</a></h4><ul id="archives_2011"><li><span class="date">
         <span class="day">5</span>
         <span class="month">Mai</span>
         <span class="year">2011</span>
@@ -162,12 +162,16 @@ Les 5 derniers articles
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Site entièrement réalisé avec
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               et 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/Scratch/fr/index.html b/site/Scratch/fr/index.html
index 395a900..0baaf12 100644
--- a/site/Scratch/fr/index.html
+++ b/site/Scratch/fr/index.html
@@ -109,12 +109,16 @@
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Site entièrement réalisé avec
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               et 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/Scratch/fr/support/index.html b/site/Scratch/fr/support/index.html
index 4b8a15c..5751231 100644
--- a/site/Scratch/fr/support/index.html
+++ b/site/Scratch/fr/support/index.html
@@ -89,12 +89,16 @@
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Site entièrement réalisé avec
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               et 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/css/main.css b/site/css/main.css
index ea71b32..f85fc05 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -80,7 +80,12 @@ hgroup#maintitle h2 {
   font-size: 0.8em;
 }
 
-/* line 83, ../src/main.sass */
+/* line 80, ../src/main.sass */
+footer {
+  font-size: 0.8em;
+}
+
+/* line 84, ../src/main.sass */
 #container > footer {
   padding: 3em 0;
   color: #0f1011;
@@ -92,42 +97,42 @@ hgroup#maintitle h2 {
   background-image: -ms-linear-gradient(top, #60646c, #51555c);
   background-image: linear-gradient(top, #60646c, #51555c);
 }
-/* line 84, ../src/main.sass */
+/* line 85, ../src/main.sass */
 #container > footer * {
   width: 960px;
   margin: 0 auto;
 }
-/* line 87, ../src/main.sass */
+/* line 88, ../src/main.sass */
 #container > footer a {
   color: #1f2024;
 }
-/* line 89, ../src/main.sass */
+/* line 90, ../src/main.sass */
 #container > footer a:hover {
   color: #002255;
 }
 
-/* line 103, ../src/main.sass */
+/* line 104, ../src/main.sass */
 .clickable {
   cursor: pointer;
 }
 
-/* line 107, ../src/main.sass */
+/* line 108, ../src/main.sass */
 #container {
   width: span(24);
   margin: 0 auto;
 }
 
-/* line 112, ../src/main.sass */
+/* line 113, ../src/main.sass */
 a {
   text-decoration: none;
 }
 
-/* line 115, ../src/main.sass */
+/* line 116, ../src/main.sass */
 h1, h2 {
   text-align: center;
 }
 
-/* line 125, ../src/main.sass */
+/* line 126, ../src/main.sass */
 .block {
   background-color: #e3e5ed;
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -141,28 +146,28 @@ h1, h2 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 122, ../src/main.sass */
+/* line 123, ../src/main.sass */
 .block > * {
   margin: 20px;
 }
-/* line 127, ../src/main.sass */
+/* line 128, ../src/main.sass */
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 171, ../src/main.sass */
+/* line 172, ../src/main.sass */
 #prelinks {
   width: 960px;
   margin: 0.5em auto;
   height: 1em;
 }
 
-/* line 177, ../src/main.sass */
+/* line 178, ../src/main.sass */
 #choixlang {
   float: left;
   font-size: 14px;
 }
-/* line 132, ../src/main.sass */
+/* line 133, ../src/main.sass */
 #choixlang a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -171,16 +176,16 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 136, ../src/main.sass */
+/* line 137, ../src/main.sass */
 #choixlang a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 139, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #choixlang a {
   color: #9ca1ad;
 }
-/* line 141, ../src/main.sass */
+/* line 142, ../src/main.sass */
 #choixlang a, #choixlang span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -193,11 +198,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #choixlang a:hover, #choixlang span:hover {
   color: #efeff4;
 }
-/* line 149, ../src/main.sass */
+/* line 150, ../src/main.sass */
 #choixlang span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -208,12 +213,12 @@ h1, h2 {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 181, ../src/main.sass */
+/* line 182, ../src/main.sass */
 #choixrss {
   float: right;
   font-size: 14px;
 }
-/* line 132, ../src/main.sass */
+/* line 133, ../src/main.sass */
 #choixrss a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -222,16 +227,16 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 136, ../src/main.sass */
+/* line 137, ../src/main.sass */
 #choixrss a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 139, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #choixrss a {
   color: #9ca1ad;
 }
-/* line 141, ../src/main.sass */
+/* line 142, ../src/main.sass */
 #choixrss a, #choixrss span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -244,11 +249,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #choixrss a:hover, #choixrss span:hover {
   color: #efeff4;
 }
-/* line 149, ../src/main.sass */
+/* line 150, ../src/main.sass */
 #choixrss span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -259,19 +264,19 @@ h1, h2 {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 186, ../src/main.sass */
+/* line 187, ../src/main.sass */
 #mainnav {
   width: 600px;
   padding: 0;
   margin: 2.5em auto;
 }
-/* line 190, ../src/main.sass */
+/* line 191, ../src/main.sass */
 #mainnav ul {
   height: 2.2ex;
   padding: 0;
   list-style-type: none;
 }
-/* line 194, ../src/main.sass */
+/* line 195, ../src/main.sass */
 #mainnav ul li {
   text-align: center;
   float: left;
@@ -279,7 +284,7 @@ h1, h2 {
   margin: 0 20px;
   font-size: 14px;
 }
-/* line 132, ../src/main.sass */
+/* line 133, ../src/main.sass */
 #mainnav ul li a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -288,16 +293,16 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 136, ../src/main.sass */
+/* line 137, ../src/main.sass */
 #mainnav ul li a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 139, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #mainnav ul li a {
   color: #9ca1ad;
 }
-/* line 141, ../src/main.sass */
+/* line 142, ../src/main.sass */
 #mainnav ul li a, #mainnav ul li span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -310,11 +315,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #mainnav ul li a:hover, #mainnav ul li span:hover {
   color: #efeff4;
 }
-/* line 149, ../src/main.sass */
+/* line 150, ../src/main.sass */
 #mainnav ul li span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -324,30 +329,30 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 200, ../src/main.sass */
+/* line 201, ../src/main.sass */
 #mainnav ul li * {
   font-size: 1.5em;
 }
 
-/* line 204, ../src/main.sass */
+/* line 205, ../src/main.sass */
 .flush {
   clear: both !important;
 }
 
-/* line 207, ../src/main.sass */
+/* line 208, ../src/main.sass */
 .clean {
   background: none;
   border: none;
   margin: none;
 }
 
-/* line 212, ../src/main.sass */
+/* line 213, ../src/main.sass */
 #main {
   width: 960px;
   margin: 0 auto;
 }
 
-/* line 216, ../src/main.sass */
+/* line 217, ../src/main.sass */
 body.std #main > article, .slideshow {
   padding: 3em;
   margin: 3em 0;
@@ -363,49 +368,49 @@ body.std #main > article, .slideshow {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 122, ../src/main.sass */
+/* line 123, ../src/main.sass */
 body.std #main > article > *, .slideshow > * {
   margin: 20px;
 }
 
-/* line 221, ../src/main.sass */
+/* line 222, ../src/main.sass */
 .slideshow {
   color: #60646c;
   font-size: 1.3em;
 }
-/* line 224, ../src/main.sass */
+/* line 225, ../src/main.sass */
 .slideshow h3, .slideshow p, .slideshow ul {
   float: left;
   margin-left: 60px;
 }
-/* line 227, ../src/main.sass */
+/* line 228, ../src/main.sass */
 .slideshow h3, .slideshow p, .slideshow ul {
   width: 40%;
 }
-/* line 229, ../src/main.sass */
+/* line 230, ../src/main.sass */
 .slideshow h3 {
   font-size: 2em;
   color: #9ca1ad;
   text-shadow: 0 0 3px white;
 }
 
-/* line 234, ../src/main.sass */
+/* line 235, ../src/main.sass */
 .center {
   margin: 0 auto;
   text-align: center;
 }
 
-/* line 238, ../src/main.sass */
+/* line 239, ../src/main.sass */
 .leftimage {
   float: left;
 }
 
-/* line 240, ../src/main.sass */
+/* line 241, ../src/main.sass */
 .rightimage {
   float: right;
 }
 
-/* line 243, ../src/main.sass */
+/* line 244, ../src/main.sass */
 img.left {
   float: left;
   padding: 10px;
@@ -424,50 +429,59 @@ img.left {
   margin: 0 1em;
   background: rgba(239, 239, 244, 0.2);
 }
-/* line 122, ../src/main.sass */
+/* line 123, ../src/main.sass */
 img.left > * {
   margin: 20px;
 }
 
-/* line 251, ../src/main.sass */
+/* line 252, ../src/main.sass */
 ul.article_metadata {
   list-style-type: none;
   text-align: right;
   color: #b4b8c5;
 }
-/* line 255, ../src/main.sass */
+/* line 256, ../src/main.sass */
 ul.article_metadata a {
   color: #9ca1ad;
 }
-/* line 257, ../src/main.sass */
+/* line 258, ../src/main.sass */
 ul.article_metadata a:hover {
   color: #315896;
 }
 
-/* line 260, ../src/main.sass */
+/* line 261, ../src/main.sass */
 #tagcloud {
   background: #efeff4;
-  padding: 2em;
+  background-color: #e3e5ed;
+  -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;
-  -moz-box-shadow: 0 0 3px #333333 inset, 0 0 3px white;
-  -webkit-box-shadow: 0 0 3px #333333 inset, 0 0 3px white;
-  -o-box-shadow: 0 0 3px #333333 inset, 0 0 3px white;
-  box-shadow: 0 0 3px #333333 inset, 0 0 3px white;
-  width: 70%;
-  margin: 0 auto;
+  padding: 1em;
+  width: 600px;
+  margin: 1em auto;
+}
+/* line 123, ../src/main.sass */
+#tagcloud > * {
+  margin: 20px;
+}
+/* line 267, ../src/main.sass */
+#tagcloud a:hover {
+  cursor: pointer;
 }
 
-/* line 268, ../src/main.sass */
+/* line 270, ../src/main.sass */
 #elementblock {
   width: 600px;
   margin: 0 auto 4em auto;
 }
-/* line 271, ../src/main.sass */
+/* line 273, ../src/main.sass */
 #elementblock ul.menu {
   background-color: #efeff4;
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -484,7 +498,7 @@ ul.article_metadata a:hover {
   padding: 10px;
   list-style-type: none;
 }
-/* line 278, ../src/main.sass */
+/* line 280, ../src/main.sass */
 #elementblock ul.menu li {
   display: inline-block;
   text-align: center;
@@ -492,7 +506,7 @@ ul.article_metadata a:hover {
   margin: 0 20px;
   font-size: 14px;
 }
-/* line 132, ../src/main.sass */
+/* line 133, ../src/main.sass */
 #elementblock ul.menu li a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -501,16 +515,16 @@ ul.article_metadata a:hover {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 136, ../src/main.sass */
+/* line 137, ../src/main.sass */
 #elementblock ul.menu li a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 139, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #elementblock ul.menu li a {
   color: #9ca1ad;
 }
-/* line 141, ../src/main.sass */
+/* line 142, ../src/main.sass */
 #elementblock ul.menu li a, #elementblock ul.menu li span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -523,11 +537,11 @@ ul.article_metadata a:hover {
   width: 100%;
   display: inline-block;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #elementblock ul.menu li a:hover, #elementblock ul.menu li span:hover {
   color: #efeff4;
 }
-/* line 149, ../src/main.sass */
+/* line 150, ../src/main.sass */
 #elementblock ul.menu li span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -538,19 +552,133 @@ ul.article_metadata a:hover {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 285, ../src/main.sass */
+/* line 287, ../src/main.sass */
 #related_articles {
   width: 960px;
   margin: 3em auto;
 }
-/* line 288, ../src/main.sass */
+/* line 290, ../src/main.sass */
 #related_articles #previous_articles {
   float: left;
   width: 40%;
 }
-/* line 291, ../src/main.sass */
+/* line 293, ../src/main.sass */
 #related_articles #next_articles {
   float: right;
   text-align: right;
   width: 40%;
 }
+
+/* line 298, ../src/main.sass */
+.date {
+  font-size: 0.8em;
+  line-height: 2em;
+  float: left;
+  color: #9ca1ad;
+  margin-right: 1em;
+}
+
+/* line 305, ../src/main.sass */
+article article, .archive {
+  background-color: #e3e5ed;
+  -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;
+  background-color: #efeff4;
+  padding: 1em;
+}
+/* line 123, ../src/main.sass */
+article article > *, .archive > * {
+  margin: 20px;
+}
+
+/* line 310, ../src/main.sass */
+#hiddenDivs {
+  width: 600px;
+  margin: 1em auto;
+  background-color: #e3e5ed;
+  -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;
+  background-color: #efeff4;
+  padding: 1em;
+}
+/* line 123, ../src/main.sass */
+#hiddenDivs > * {
+  margin: 20px;
+}
+
+/* line 318, ../src/main.sass */
+.archive .button {
+  font-size: 14px;
+  width: 5em;
+}
+/* line 133, ../src/main.sass */
+.archive .button a:hover {
+  color: #efeff4;
+  background-color: rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+}
+/* line 137, ../src/main.sass */
+.archive .button a:active {
+  background-color: rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 2px black;
+}
+/* line 140, ../src/main.sass */
+.archive .button a {
+  color: #9ca1ad;
+}
+/* line 142, ../src/main.sass */
+.archive .button a, .archive .button span {
+  padding: 0.2em;
+  -moz-border-radius: 2ex;
+  -webkit-border-radius: 2ex;
+  -o-border-radius: 2ex;
+  -ms-border-radius: 2ex;
+  -khtml-border-radius: 2ex;
+  border-radius: 2ex;
+  text-align: center;
+  width: 100%;
+  display: inline-block;
+}
+/* line 148, ../src/main.sass */
+.archive .button a:hover, .archive .button span:hover {
+  color: #efeff4;
+}
+/* line 150, ../src/main.sass */
+.archive .button span {
+  color: #efeff4;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
+}
+
+/* line 322, ../src/main.sass */
+.return {
+  float: right;
+  opacity: 0.3;
+}
+/* line 325, ../src/main.sass */
+.return:hover {
+  opacity: 1;
+}
diff --git a/site/index.html b/site/index.html
index 0fb6356..0df2d3d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -109,12 +109,16 @@
     <footer>
       <div id="webpageinfo">
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
+          <div>
+              Designed by <a href="htt://yannesposito.com">Yann Esposito</a>
+          </div>
           <div>
               Entirely done with
-              <a href="http://www.vim.org">Vim</a>
+              <a href="http://www.vim.org">vim</a>,
+              <a href="http://nanoc.stoneship.org">nanoc</a>,
+              <a href="http://compass-style.org">compass</a>
               and 
-              <a href="http://nanoc.stoneship.org">nanoc</a>
-              <!-- TODO: add compass, blueprint -->
+              <a href="http://html5boilerplate">html5boilerplate</a>
           </div>
       </div>
     </footer>
diff --git a/site/src/main.sass b/site/src/main.sass
index 8964099..320fdc3 100644
--- a/site/src/main.sass
+++ b/site/src/main.sass
@@ -78,6 +78,7 @@ hgroup#maintitle
   +linear-gradient(color-stops($ycolor4,$ycolor5))
 
 footer
+  font-size: .8em
   clear:both
 
 #container>footer
@@ -259,11 +260,12 @@ ul.article_metadata
 
 #tagcloud
   background: $ycolorb
-  padding: 2em
-  +border-radius(5px)
-  +box-shadow(0 0 3px #333 inset, 0 0 3px #FFF)
-  width: 70%
-  margin: 0 auto
+  +innerblock
+  padding: 1em
+  width: $navWidth
+  margin: 1em auto
+  a:hover
+    cursor: pointer
 
 #elementblock
   width: $navWidth
@@ -292,3 +294,33 @@ ul.article_metadata
     float: right
     text-align: right
     width: 40%
+
+.date
+  font-size: .8em
+  line-height: 2em
+  float: left
+  color: $ycolor2
+  margin-right: 1em
+
+article article, .archive
+  +innerblock
+  background-color: $ycolorb
+  padding: 1em
+
+#hiddenDivs
+  width: $navWidth
+  margin: 1em auto
+  +innerblock
+  background-color: $ycolorb
+  padding: 1em
+
+.archive
+  .button
+    +ybutton
+    width: 5em
+
+.return
+  float: right
+  opacity: .3
+  &:hover
+    opacity: 1