From 74d1f80c481da4007b811375a5ac2d64bb2ee0cd Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Mon, 11 Jul 2011 12:14:02 +0200
Subject: [PATCH] Better footer and layout

---
 content/html/en/index.md        |   1 +
 content/html/fr/index.md        |   1 +
 multi/index.md                  |   1 +
 site/Scratch/en/blog/index.html |   2 +-
 site/Scratch/en/index.html      |   1 +
 site/Scratch/fr/blog/index.html |   2 +-
 site/Scratch/fr/index.html      |   1 +
 site/css/main.css               | 115 +++++++++++++++++++-------------
 site/index.html                 |   1 +
 site/src/main.sass              |  17 ++++-
 10 files changed, 92 insertions(+), 50 deletions(-)

diff --git a/content/html/en/index.md b/content/html/en/index.md
index 6531b5a..7d8c25b 100644
--- a/content/html/en/index.md
+++ b/content/html/en/index.md
@@ -26,6 +26,7 @@ menupriority: 1
 </div>
 
 <div id="portable" class="slideshow">
+    <h3>Portable</h3>
     <p>You can use YPassword on: </p>
     <ul>
         <li> iPhone, </li>
diff --git a/content/html/fr/index.md b/content/html/fr/index.md
index 6531b5a..7d8c25b 100644
--- a/content/html/fr/index.md
+++ b/content/html/fr/index.md
@@ -26,6 +26,7 @@ menupriority: 1
 </div>
 
 <div id="portable" class="slideshow">
+    <h3>Portable</h3>
     <p>You can use YPassword on: </p>
     <ul>
         <li> iPhone, </li>
diff --git a/multi/index.md b/multi/index.md
index 6531b5a..7d8c25b 100644
--- a/multi/index.md
+++ b/multi/index.md
@@ -26,6 +26,7 @@ menupriority: 1
 </div>
 
 <div id="portable" class="slideshow">
+    <h3>Portable</h3>
     <p>You can use YPassword on: </p>
     <ul>
         <li> iPhone, </li>
diff --git a/site/Scratch/en/blog/index.html b/site/Scratch/en/blog/index.html
index 7af9b13..1960fc5 100644
--- a/site/Scratch/en/blog/index.html
+++ b/site/Scratch/en/blog/index.html
@@ -167,7 +167,7 @@ Now you can paste it anywhere.</p>
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>Modified: <time>05/14/2011</time></li>
+                    <li>Modified: <time>07/11/2011</time></li>
                     <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a></li>
                 </ul>
             </footer>
diff --git a/site/Scratch/en/index.html b/site/Scratch/en/index.html
index f062795..91ca233 100644
--- a/site/Scratch/en/index.html
+++ b/site/Scratch/en/index.html
@@ -79,6 +79,7 @@
 </div>
 
 <div id="portable" class="slideshow">
+    <h3>Portable</h3>
     <p>You can use YPassword on: </p>
     <ul>
         <li> iPhone, </li>
diff --git a/site/Scratch/fr/blog/index.html b/site/Scratch/fr/blog/index.html
index 5f6b325..b25cb4d 100644
--- a/site/Scratch/fr/blog/index.html
+++ b/site/Scratch/fr/blog/index.html
@@ -153,7 +153,7 @@ Les 5 derniers articles
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>modifié le : <time>14/05/2011</time></li>
+                    <li>modifié le : <time>11/07/2011</time></li>
                     <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a></li>
                 </ul>
             </footer>
diff --git a/site/Scratch/fr/index.html b/site/Scratch/fr/index.html
index 56ed16e..8454aa9 100644
--- a/site/Scratch/fr/index.html
+++ b/site/Scratch/fr/index.html
@@ -79,6 +79,7 @@
 </div>
 
 <div id="portable" class="slideshow">
+    <h3>Portable</h3>
     <p>You can use YPassword on: </p>
     <ul>
         <li> iPhone, </li>
diff --git a/site/css/main.css b/site/css/main.css
index 892d7a6..699bd8f 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -80,7 +80,7 @@ hgroup#maintitle h2 {
   font-size: 0.8em;
 }
 
-/* line 79, ../src/main.sass */
+/* line 82, ../src/main.sass */
 #container > footer {
   padding: 3em 0;
   color: #0f1011;
@@ -92,42 +92,42 @@ hgroup#maintitle h2 {
   background-image: -ms-linear-gradient(top, #60646c, #51555c);
   background-image: linear-gradient(top, #60646c, #51555c);
 }
-/* line 80, ../src/main.sass */
+/* line 83, ../src/main.sass */
 #container > footer * {
   width: 960px;
   margin: 0 auto;
 }
-/* line 83, ../src/main.sass */
+/* line 86, ../src/main.sass */
 #container > footer a {
   color: #1f2024;
 }
-/* line 85, ../src/main.sass */
+/* line 88, ../src/main.sass */
 #container > footer a:hover {
   color: #002255;
 }
 
-/* line 99, ../src/main.sass */
+/* line 102, ../src/main.sass */
 .clickable {
   cursor: pointer;
 }
 
-/* line 103, ../src/main.sass */
+/* line 106, ../src/main.sass */
 #container {
   width: span(24);
   margin: 0 auto;
 }
 
-/* line 108, ../src/main.sass */
+/* line 111, ../src/main.sass */
 a {
   text-decoration: none;
 }
 
-/* line 111, ../src/main.sass */
+/* line 114, ../src/main.sass */
 h1, h2 {
   text-align: center;
 }
 
-/* line 121, ../src/main.sass */
+/* line 124, ../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 +141,28 @@ h1, h2 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 118, ../src/main.sass */
+/* line 121, ../src/main.sass */
 .block > * {
   margin: 20px;
 }
-/* line 123, ../src/main.sass */
+/* line 126, ../src/main.sass */
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 167, ../src/main.sass */
+/* line 170, ../src/main.sass */
 #prelinks {
   width: 960px;
   margin: 0.5em auto;
   height: 1em;
 }
 
-/* line 173, ../src/main.sass */
+/* line 176, ../src/main.sass */
 #choixlang {
   float: left;
   font-size: 14px;
 }
-/* line 128, ../src/main.sass */
+/* line 131, ../src/main.sass */
 #choixlang a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -171,16 +171,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 132, ../src/main.sass */
+/* line 135, ../src/main.sass */
 #choixlang a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 135, ../src/main.sass */
+/* line 138, ../src/main.sass */
 #choixlang a {
   color: #9ca1ad;
 }
-/* line 137, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #choixlang a, #choixlang span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -193,11 +193,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 143, ../src/main.sass */
+/* line 146, ../src/main.sass */
 #choixlang a:hover, #choixlang span:hover {
   color: #efeff4;
 }
-/* line 145, ../src/main.sass */
+/* line 148, ../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 +208,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 177, ../src/main.sass */
+/* line 180, ../src/main.sass */
 #choixrss {
   float: right;
   font-size: 14px;
 }
-/* line 128, ../src/main.sass */
+/* line 131, ../src/main.sass */
 #choixrss a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -222,16 +222,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 132, ../src/main.sass */
+/* line 135, ../src/main.sass */
 #choixrss a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 135, ../src/main.sass */
+/* line 138, ../src/main.sass */
 #choixrss a {
   color: #9ca1ad;
 }
-/* line 137, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #choixrss a, #choixrss span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -244,11 +244,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 143, ../src/main.sass */
+/* line 146, ../src/main.sass */
 #choixrss a:hover, #choixrss span:hover {
   color: #efeff4;
 }
-/* line 145, ../src/main.sass */
+/* line 148, ../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 +259,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 182, ../src/main.sass */
+/* line 185, ../src/main.sass */
 #mainnav {
   width: 600px;
   padding: 0;
   margin: 2.5em auto;
 }
-/* line 186, ../src/main.sass */
+/* line 189, ../src/main.sass */
 #mainnav ul {
   height: 2.2ex;
   padding: 0;
   list-style-type: none;
 }
-/* line 190, ../src/main.sass */
+/* line 193, ../src/main.sass */
 #mainnav ul li {
   text-align: center;
   float: left;
@@ -279,7 +279,7 @@ h1, h2 {
   margin: 0 20px;
   font-size: 14px;
 }
-/* line 128, ../src/main.sass */
+/* line 131, ../src/main.sass */
 #mainnav ul li a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -288,16 +288,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 132, ../src/main.sass */
+/* line 135, ../src/main.sass */
 #mainnav ul li a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 135, ../src/main.sass */
+/* line 138, ../src/main.sass */
 #mainnav ul li a {
   color: #9ca1ad;
 }
-/* line 137, ../src/main.sass */
+/* line 140, ../src/main.sass */
 #mainnav ul li a, #mainnav ul li span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -310,11 +310,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 143, ../src/main.sass */
+/* line 146, ../src/main.sass */
 #mainnav ul li a:hover, #mainnav ul li span:hover {
   color: #efeff4;
 }
-/* line 145, ../src/main.sass */
+/* line 148, ../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 +324,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 196, ../src/main.sass */
+/* line 199, ../src/main.sass */
 #mainnav ul li * {
   font-size: 1.5em;
 }
 
-/* line 200, ../src/main.sass */
+/* line 203, ../src/main.sass */
 .flush {
   clear: both !important;
 }
 
-/* line 203, ../src/main.sass */
+/* line 206, ../src/main.sass */
 .clean {
   background: none;
   border: none;
   margin: none;
 }
 
-/* line 208, ../src/main.sass */
+/* line 211, ../src/main.sass */
 #main {
   width: 960px;
   margin: 0 auto;
 }
 
-/* line 212, ../src/main.sass */
+/* line 215, ../src/main.sass */
 body.std #main > article, .slideshow {
   padding: 3em;
   margin: 3em 0;
@@ -363,34 +363,55 @@ body.std #main > article, .slideshow {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 118, ../src/main.sass */
+/* line 121, ../src/main.sass */
 body.std #main > article > *, .slideshow > * {
   margin: 20px;
 }
 
-/* line 217, ../src/main.sass */
+/* line 220, ../src/main.sass */
 .slideshow {
   color: #60646c;
   font-size: 1.3em;
 }
-/* line 220, ../src/main.sass */
-.slideshow img, .slideshow h3, .slideshow p, .slideshow ul {
+/* line 223, ../src/main.sass */
+.slideshow h3, .slideshow p, .slideshow ul {
   float: left;
   margin-left: 60px;
 }
-/* line 223, ../src/main.sass */
+/* line 226, ../src/main.sass */
 .slideshow h3, .slideshow p, .slideshow ul {
   width: 40%;
 }
-/* line 225, ../src/main.sass */
+/* line 228, ../src/main.sass */
 .slideshow h3 {
   font-size: 2em;
   color: #9ca1ad;
   text-shadow: 0 0 3px white;
 }
 
-/* line 230, ../src/main.sass */
+/* line 233, ../src/main.sass */
 .center {
   margin: 0 auto;
   text-align: center;
 }
+
+/* line 237, ../src/main.sass */
+.leftimage {
+  float: left;
+}
+
+/* line 239, ../src/main.sass */
+.rightimage {
+  float: right;
+}
+
+/* line 242, ../src/main.sass */
+ul.article_metadata {
+  list-style-type: none;
+  text-align: right;
+  color: #b4b8c5;
+}
+/* line 246, ../src/main.sass */
+ul.article_metadata a {
+  color: #9ca1ad;
+}
diff --git a/site/index.html b/site/index.html
index f062795..91ca233 100644
--- a/site/index.html
+++ b/site/index.html
@@ -79,6 +79,7 @@
 </div>
 
 <div id="portable" class="slideshow">
+    <h3>Portable</h3>
     <p>You can use YPassword on: </p>
     <ul>
         <li> iPhone, </li>
diff --git a/site/src/main.sass b/site/src/main.sass
index 4bb03b6..5f1615e 100644
--- a/site/src/main.sass
+++ b/site/src/main.sass
@@ -76,6 +76,9 @@ hgroup#maintitle
   +box-shadow(rgba(#000,.6) 0 0 15px inset)
   +linear-gradient(color-stops($ycolor4,$ycolor5))
 
+footer
+  clear:both
+
 #container>footer
   *
     width: $stdWidth
@@ -217,7 +220,7 @@ body.std #main > article, .slideshow
 .slideshow
   color: $ycolor4
   font-size: 1.3em
-  img,h3,p,ul
+  h3,p,ul
     float: left
     margin-left: 60px
   h3,p,ul
@@ -230,3 +233,15 @@ body.std #main > article, .slideshow
 .center
   margin: 0 auto
   text-align: center
+
+.leftimage
+  float: left
+.rightimage
+  float: right
+
+ul.article_metadata
+  list-style-type: none
+  text-align: right
+  color: $ycolor1
+  a
+    color: $ycolor2