From 23d5c0a58e68bf43f30407e56ca2358f9619a3db Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Sat, 9 Jul 2011 23:06:45 +0200
Subject: [PATCH] Simplification

---
 content/html/en/index.md   |  34 --------
 content/html/fr/index.md   |  34 --------
 multi/index.md             |  34 --------
 site/Scratch/en/index.html |  65 ---------------
 site/Scratch/fr/index.html |  65 ---------------
 site/css/main.css          | 164 +++++++++++++++++++++----------------
 site/index.html            |  73 ++---------------
 site/src/main.sass         |  46 +++++++----
 8 files changed, 128 insertions(+), 387 deletions(-)

diff --git a/content/html/en/index.md b/content/html/en/index.md
index b824327..39dbe89 100644
--- a/content/html/en/index.md
+++ b/content/html/en/index.md
@@ -3,44 +3,10 @@ title: YPassword
 noSubMenu: true
 menupriority: 1
 -----
-<% content_for :js do %>
-<script>
-var blocks=["secure","easy","portable"];
-function show(name) {
-    for ( var i in blocks ) {
-        el=blocks[i];
-        if (el == name) { continue; }
-        // console.log('HIDE: #'+el+'content');
-        $('#'+el+'content').hide();
-    }
-    $('#'+name+'content').show();
-    // console.log('SHOW: #'+name+'content');
-}
-
-$('document').ready(function() {
-    $('.secure').click(function() {show("secure")});
-    $('.easy').click(function() {show("easy")});
-    $('.portable').click(function() {show("portable")});
-    for (var i in blocks) {
-        el=blocks[i];
-        $('#'+el+'content').hide();
-    }
-});
-</script>
-<% end %>
-
 <% content_for :title do %>
     <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
 <% end %>
 
-<div id="mainlinks">
-<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure clickable") %>
-<%= block("Easy","javascript:return false;","Remember only one master password", "left easy clickable") %>
-<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable clickable") %>
-</div>
-
-<div class="flush"></div>
-
 <div id="securecontent" class="slideshow big"><div class="inner">
 YPassword use SHA1
 <img src="/Scratch//img/blog/2011-05-05-Screenshots/main_password.jpg" alt="main password view" style="display:block; margin-left:0;"/>
diff --git a/content/html/fr/index.md b/content/html/fr/index.md
index b824327..39dbe89 100644
--- a/content/html/fr/index.md
+++ b/content/html/fr/index.md
@@ -3,44 +3,10 @@ title: YPassword
 noSubMenu: true
 menupriority: 1
 -----
-<% content_for :js do %>
-<script>
-var blocks=["secure","easy","portable"];
-function show(name) {
-    for ( var i in blocks ) {
-        el=blocks[i];
-        if (el == name) { continue; }
-        // console.log('HIDE: #'+el+'content');
-        $('#'+el+'content').hide();
-    }
-    $('#'+name+'content').show();
-    // console.log('SHOW: #'+name+'content');
-}
-
-$('document').ready(function() {
-    $('.secure').click(function() {show("secure")});
-    $('.easy').click(function() {show("easy")});
-    $('.portable').click(function() {show("portable")});
-    for (var i in blocks) {
-        el=blocks[i];
-        $('#'+el+'content').hide();
-    }
-});
-</script>
-<% end %>
-
 <% content_for :title do %>
     <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
 <% end %>
 
-<div id="mainlinks">
-<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure clickable") %>
-<%= block("Easy","javascript:return false;","Remember only one master password", "left easy clickable") %>
-<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable clickable") %>
-</div>
-
-<div class="flush"></div>
-
 <div id="securecontent" class="slideshow big"><div class="inner">
 YPassword use SHA1
 <img src="/Scratch//img/blog/2011-05-05-Screenshots/main_password.jpg" alt="main password view" style="display:block; margin-left:0;"/>
diff --git a/multi/index.md b/multi/index.md
index b824327..39dbe89 100644
--- a/multi/index.md
+++ b/multi/index.md
@@ -3,44 +3,10 @@ title: YPassword
 noSubMenu: true
 menupriority: 1
 -----
-<% content_for :js do %>
-<script>
-var blocks=["secure","easy","portable"];
-function show(name) {
-    for ( var i in blocks ) {
-        el=blocks[i];
-        if (el == name) { continue; }
-        // console.log('HIDE: #'+el+'content');
-        $('#'+el+'content').hide();
-    }
-    $('#'+name+'content').show();
-    // console.log('SHOW: #'+name+'content');
-}
-
-$('document').ready(function() {
-    $('.secure').click(function() {show("secure")});
-    $('.easy').click(function() {show("easy")});
-    $('.portable').click(function() {show("portable")});
-    for (var i in blocks) {
-        el=blocks[i];
-        $('#'+el+'content').hide();
-    }
-});
-</script>
-<% end %>
-
 <% content_for :title do %>
     <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
 <% end %>
 
-<div id="mainlinks">
-<%= block("Secure","javascript:return false;","SHA1 ensure strong password generation","left secure clickable") %>
-<%= block("Easy","javascript:return false;","Remember only one master password", "left easy clickable") %>
-<%= block("Portable","javascript:return false;","Dashboard widget, Javascript applet, etc...", "left portable clickable") %>
-</div>
-
-<div class="flush"></div>
-
 <div id="securecontent" class="slideshow big"><div class="inner">
 YPassword use SHA1
 <img src="/Scratch//img/blog/2011-05-05-Screenshots/main_password.jpg" alt="main password view" style="display:block; margin-left:0;"/>
diff --git a/site/Scratch/en/index.html b/site/Scratch/en/index.html
index bdd41f7..9f147a0 100644
--- a/site/Scratch/en/index.html
+++ b/site/Scratch/en/index.html
@@ -61,47 +61,6 @@
         <article>
             <div class="content">
                 
-<div id="mainlinks">
-<div class="block left secure clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Secure 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                SHA1 ensure strong password generation
-            </p>
-        </div>
-    </div>
-<div class="block left easy clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Easy 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                Remember only one master password
-            </p>
-        </div>
-    </div>
-<div class="block left portable clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Portable 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                Dashboard widget, Javascript applet, etc...
-            </p>
-        </div>
-    </div>
-</div>
-
-<div class="flush"></div>
-
 <div id="securecontent" class="slideshow big"><div class="inner">
 YPassword use SHA1
 <img src="/Scratch//img/blog/2011-05-05-Screenshots/main_password.jpg" alt="main password view" style="display:block; margin-left:0;" />
@@ -171,30 +130,6 @@ Your password is copied, you can paste it.
   <script src="/js/plugins.js"></script>
   <script src="/js/script.js"></script>
   
-<script>
-var blocks=["secure","easy","portable"];
-function show(name) {
-    for ( var i in blocks ) {
-        el=blocks[i];
-        if (el == name) { continue; }
-        // console.log('HIDE: #'+el+'content');
-        $('#'+el+'content').hide();
-    }
-    $('#'+name+'content').show();
-    // console.log('SHOW: #'+name+'content');
-}
-
-$('document').ready(function() {
-    $('.secure').click(function() {show("secure")});
-    $('.easy').click(function() {show("easy")});
-    $('.portable').click(function() {show("portable")});
-    for (var i in blocks) {
-        el=blocks[i];
-        $('#'+el+'content').hide();
-    }
-});
-</script>
-
   <!-- end scripts-->
   <!--[if lt IE 7 ]>
     <script src="/js/libs/dd_belatedpng.js"></script>
diff --git a/site/Scratch/fr/index.html b/site/Scratch/fr/index.html
index 450cdf6..72ac3a1 100644
--- a/site/Scratch/fr/index.html
+++ b/site/Scratch/fr/index.html
@@ -61,47 +61,6 @@
         <article>
             <div class="content">
                 
-<div id="mainlinks">
-<div class="block left secure clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Secure 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                SHA1 ensure strong password generation
-            </p>
-        </div>
-    </div>
-<div class="block left easy clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Easy 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                Remember only one master password
-            </p>
-        </div>
-    </div>
-<div class="block left portable clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Portable 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                Dashboard widget, Javascript applet, etc...
-            </p>
-        </div>
-    </div>
-</div>
-
-<div class="flush"></div>
-
 <div id="securecontent" class="slideshow big"><div class="inner">
 YPassword use SHA1
 <img src="/Scratch//img/blog/2011-05-05-Screenshots/main_password.jpg" alt="main password view" style="display:block; margin-left:0;" />
@@ -171,30 +130,6 @@ Your password is copied, you can paste it.
   <script src="/js/plugins.js"></script>
   <script src="/js/script.js"></script>
   
-<script>
-var blocks=["secure","easy","portable"];
-function show(name) {
-    for ( var i in blocks ) {
-        el=blocks[i];
-        if (el == name) { continue; }
-        // console.log('HIDE: #'+el+'content');
-        $('#'+el+'content').hide();
-    }
-    $('#'+name+'content').show();
-    // console.log('SHOW: #'+name+'content');
-}
-
-$('document').ready(function() {
-    $('.secure').click(function() {show("secure")});
-    $('.easy').click(function() {show("easy")});
-    $('.portable').click(function() {show("portable")});
-    for (var i in blocks) {
-        el=blocks[i];
-        $('#'+el+'content').hide();
-    }
-});
-</script>
-
   <!-- end scripts-->
   <!--[if lt IE 7 ]>
     <script src="/js/libs/dd_belatedpng.js"></script>
diff --git a/site/css/main.css b/site/css/main.css
index 58906aa..a392706 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -1,51 +1,46 @@
-/* line 31, ../src/main.sass */
+/* line 33, ../src/main.sass */
 body {
   margin: 0;
-  font-family: Futura, Molengo;
-  background: #efeff4;
-}
-/* line 35, ../src/main.sass */
-body.bp {
+  font-family: Futura, Molengo, sans-serif;
   background: #efeff4;
 }
 /* line 37, ../src/main.sass */
+body.bp {
+  background: #efeff4;
+}
+/* line 39, ../src/main.sass */
 body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
   color: #60646c;
   font-weight: bold;
   letter-spacing: -0.05em;
-  text-shadow: #41444a -1px -1px 0px, #efeff4 0px 1px 0px;
 }
-/* line 42, ../src/main.sass */
+/* line 43, ../src/main.sass */
 body.bp h1 a, body.bp h2 a, body.bp h3 a, body.bp h4 a, body.bp h5 a, body.bp h6 a {
   color: #9ca1ad;
 }
-/* line 44, ../src/main.sass */
+/* line 45, ../src/main.sass */
 body.bp h1 a:visited, body.bp h2 a:visited, body.bp h3 a:visited, body.bp h4 a:visited, body.bp h5 a:visited, body.bp h6 a:visited {
   color: #9ca1ad;
 }
-/* line 46, ../src/main.sass */
+/* line 47, ../src/main.sass */
 body.bp h1 a:hover, body.bp h1 a:active, body.bp h2 a:hover, body.bp h2 a:active, body.bp h3 a:hover, body.bp h3 a:active, body.bp h4 a:hover, body.bp h4 a:active, body.bp h5 a:hover, body.bp h5 a:active, body.bp h6 a:hover, body.bp h6 a:active {
-  color: #86adff;
+  color: #86adeb;
 }
-/* line 48, ../src/main.sass */
-body.bp h1 a:hover, body.bp h2 a:hover, body.bp h3 a:hover, body.bp h4 a:hover, body.bp h5 a:hover, body.bp h6 a:hover {
-  text-shadow: #41444a -1px -1px 0px, #efeff4 0px 1px 0px, rgba(51, 136, 204, 0.5) 0 0 4px;
-}
-/* line 50, ../src/main.sass */
+/* line 49, ../src/main.sass */
 body.bp a {
   text-decoration: none;
   color: #60646c;
 }
-/* line 53, ../src/main.sass */
+/* line 52, ../src/main.sass */
 body.bp a:visited {
   color: #60646c;
 }
-/* line 55, ../src/main.sass */
+/* line 54, ../src/main.sass */
 body.bp a:hover, body.bp a:active {
-  color: #86adff;
+  color: #86adeb;
 }
 
-/* line 59, ../src/main.sass */
+/* line 58, ../src/main.sass */
 * {
   -moz-transition-property: all;
   -webkit-transition-property: all;
@@ -57,7 +52,7 @@ body.bp a:hover, body.bp a:active {
   transition-duration: 0.5s;
 }
 
-/* line 62, ../src/main.sass */
+/* line 61, ../src/main.sass */
 hgroup#maintitle {
   margin: 0.5em 0;
   font-size: 2em;
@@ -73,34 +68,39 @@ hgroup#maintitle {
   background-image: -o-linear-gradient(top, #60646c, #51555c);
   background-image: linear-gradient(top, #60646c, #51555c);
 }
-/* line 66, ../src/main.sass */
+/* line 65, ../src/main.sass */
 hgroup#maintitle h1, hgroup#maintitle h1 a, hgroup#maintitle h2, hgroup#maintitle h2 a {
+  font-weight: normal;
   color: #0f1011;
   text-shadow: 0 0 2px rgba(239, 239, 244, 0.5);
 }
+/* line 69, ../src/main.sass */
+hgroup#maintitle h1 a:hover, hgroup#maintitle h2 a:hover {
+  color: #002255;
+}
 
-/* line 82, ../src/main.sass */
+/* line 84, ../src/main.sass */
 .clickable {
   cursor: pointer;
 }
 
-/* line 86, ../src/main.sass */
+/* line 88, ../src/main.sass */
 #container {
   width: span(24);
   margin: 0 auto;
 }
 
-/* line 91, ../src/main.sass */
+/* line 93, ../src/main.sass */
 a {
   text-decoration: none;
 }
 
-/* line 94, ../src/main.sass */
-h1 {
+/* line 96, ../src/main.sass */
+h1, h2 {
   text-align: center;
 }
 
-/* line 104, ../src/main.sass */
+/* line 106, ../src/main.sass */
 .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;
@@ -114,37 +114,42 @@ h1 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 101, ../src/main.sass */
+/* line 103, ../src/main.sass */
 .block > * {
   padding: 20px;
 }
-/* line 106, ../src/main.sass */
+/* line 108, ../src/main.sass */
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 139, ../src/main.sass */
+/* line 147, ../src/main.sass */
 #prelinks {
   width: 600px;
   margin: 0.5em auto;
   height: 1em;
 }
 
-/* line 145, ../src/main.sass */
+/* line 153, ../src/main.sass */
 #choixlang {
   float: left;
   font-size: 14px;
 }
-/* line 111, ../src/main.sass */
+/* line 113, ../src/main.sass */
 #choixlang 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 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
-  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
-  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
+  -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 115, ../src/main.sass */
+/* line 117, ../src/main.sass */
+#choixlang a:active {
+  background-color: rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 2px black;
+}
+/* line 120, ../src/main.sass */
 #choixlang a {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -156,28 +161,33 @@ h1 {
   text-align: center;
   width: 100%;
   display: inline-block;
-  color: #b4b8c5;
+  color: #9ca1ad;
 }
-/* line 122, ../src/main.sass */
+/* line 127, ../src/main.sass */
 #choixlang a:hover {
   color: #efeff4;
 }
 
-/* line 149, ../src/main.sass */
+/* line 157, ../src/main.sass */
 #choixrss {
   float: right;
   font-size: 14px;
 }
-/* line 111, ../src/main.sass */
+/* line 113, ../src/main.sass */
 #choixrss 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 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
-  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
-  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
+  -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 115, ../src/main.sass */
+/* line 117, ../src/main.sass */
+#choixrss a:active {
+  background-color: rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 2px black;
+}
+/* line 120, ../src/main.sass */
 #choixrss a {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -189,41 +199,48 @@ h1 {
   text-align: center;
   width: 100%;
   display: inline-block;
-  color: #b4b8c5;
+  color: #9ca1ad;
 }
-/* line 122, ../src/main.sass */
+/* line 127, ../src/main.sass */
 #choixrss a:hover {
   color: #efeff4;
 }
 
-/* line 153, ../src/main.sass */
+/* line 161, ../src/main.sass */
 #mainnav {
-  width: 50%;
+  width: 600px;
+  padding: 0;
+  margin: 2.5em auto;
 }
-/* line 155, ../src/main.sass */
+/* line 165, ../src/main.sass */
 #mainnav ul {
-  width: +span(9);
   height: 2.2ex;
-  margin: 0 auto;
-  padding-left: 0;
+  padding: 0;
   list-style-type: none;
-  margin: 0 auto;
 }
-/* line 162, ../src/main.sass */
+/* line 169, ../src/main.sass */
 #mainnav ul li {
   text-align: center;
+  float: left;
+  width: 160px;
+  margin: 0 20px;
   font-size: 14px;
 }
-/* line 111, ../src/main.sass */
+/* line 113, ../src/main.sass */
 #mainnav ul li 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 0;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
-  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
-  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 0;
+  -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 115, ../src/main.sass */
+/* line 117, ../src/main.sass */
+#mainnav ul li a:active {
+  background-color: rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 2px black;
+}
+/* line 120, ../src/main.sass */
 #mainnav ul li a {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -235,14 +252,19 @@ h1 {
   text-align: center;
   width: 100%;
   display: inline-block;
-  color: #b4b8c5;
+  color: #9ca1ad;
 }
-/* line 122, ../src/main.sass */
+/* line 127, ../src/main.sass */
 #mainnav ul li a:hover {
   color: #efeff4;
 }
+/* line 176, ../src/main.sass */
+#mainnav ul li * {
+  font-size: 1.5em;
+  font-weight: bold;
+}
 
-/* line 166, ../src/main.sass */
+/* line 180, ../src/main.sass */
 .slideshow {
   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;
@@ -256,18 +278,18 @@ h1 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 101, ../src/main.sass */
+/* line 103, ../src/main.sass */
 .slideshow > * {
   padding: 20px;
 }
 
-/* line 169, ../src/main.sass */
+/* line 183, ../src/main.sass */
 .flush {
   clear: both;
 }
 
-/* line 172, ../src/main.sass */
+/* line 186, ../src/main.sass */
 #main {
-  width: 50%;
-  margin-left: 25%;
+  width: 600px;
+  margin: 0 auto;
 }
diff --git a/site/index.html b/site/index.html
index 9a2451f..9f147a0 100644
--- a/site/index.html
+++ b/site/index.html
@@ -42,9 +42,11 @@
 <body lang="en" class="bp">
   <div id="container">
     <header>
-      <div id="choixlang"><a href="/Scratch/fr/" onclick="setLanguage('fr')">en Français</a></div>
-      <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomen">Subscribe</a></div>
-      <hgroup>
+      <div id="prelinks">
+           <div id="choixlang"><a href="/Scratch/fr/" onclick="setLanguage('fr')">en Français</a></div>
+           <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomen">Subscribe</a></div>
+       </div>
+      <hgroup id="maintitle">
         <h1>
     <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
 </h1>
@@ -59,47 +61,6 @@
         <article>
             <div class="content">
                 
-<div id="mainlinks">
-<div class="block left secure clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Secure 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                SHA1 ensure strong password generation
-            </p>
-        </div>
-    </div>
-<div class="block left easy clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Easy 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                Remember only one master password
-            </p>
-        </div>
-    </div>
-<div class="block left portable clickable">
-        <div class="inner">
-            <h3>
-                <a href="javascript:return false;"> Portable 
-                    <span class="nicer">»</span> 
-                </a>
-            </h3>
-            <p>
-                Dashboard widget, Javascript applet, etc...
-            </p>
-        </div>
-    </div>
-</div>
-
-<div class="flush"></div>
-
 <div id="securecontent" class="slideshow big"><div class="inner">
 YPassword use SHA1
 <img src="/Scratch//img/blog/2011-05-05-Screenshots/main_password.jpg" alt="main password view" style="display:block; margin-left:0;" />
@@ -169,30 +130,6 @@ Your password is copied, you can paste it.
   <script src="/js/plugins.js"></script>
   <script src="/js/script.js"></script>
   
-<script>
-var blocks=["secure","easy","portable"];
-function show(name) {
-    for ( var i in blocks ) {
-        el=blocks[i];
-        if (el == name) { continue; }
-        // console.log('HIDE: #'+el+'content');
-        $('#'+el+'content').hide();
-    }
-    $('#'+name+'content').show();
-    // console.log('SHOW: #'+name+'content');
-}
-
-$('document').ready(function() {
-    $('.secure').click(function() {show("secure")});
-    $('.easy').click(function() {show("easy")});
-    $('.portable').click(function() {show("portable")});
-    for (var i in blocks) {
-        el=blocks[i];
-        $('#'+el+'content').hide();
-    }
-});
-</script>
-
   <!-- end scripts-->
   <!--[if lt IE 7 ]>
     <script src="/js/libs/dd_belatedpng.js"></script>
diff --git a/site/src/main.sass b/site/src/main.sass
index 9e20ffd..b22239d 100644
--- a/site/src/main.sass
+++ b/site/src/main.sass
@@ -20,17 +20,19 @@ $ycolor8: #1F2024
 $ycolor9: #0F1011
 
 // $higlightcolor:  #28C
-$higlightcolor:  $ycolor3 + #027
+$higlightcolor:  $ycolor3 + #025
 $higlightcolor-shadow:  #058
 $higlightcolor-reflect:  #6AF
 
+$dark_highlight: #025
+
 $main-background-color: $ycolorb
 
 
 // Background colors
 body
   margin: 0
-  font-family: Futura, Molengo
+  font-family: Futura, Molengo, sans-serif
   background: $main-background-color
   &.bp 
     background: $main-background-color
@@ -38,15 +40,12 @@ body
       color: $ycolor4
       font-weight: bold
       letter-spacing: -0.05em
-      +text-shadow($ycolor6 -1px -1px 0px,$ycolorb 0px 1px 0px )
       a
         color: $ycolor2
         &:visited
           color: $ycolor2
         &:hover, &:active
           color: $higlightcolor
-      a:hover
-        +text-shadow($ycolor6 -1px -1px 0px ,$ycolorb 0px 1px 0px ,rgba(#38C,0.5) 0 0 4px  )
     a
       text-decoration: none
       color: $ycolor4
@@ -64,8 +63,11 @@ hgroup#maintitle
   font-size: 2em
   h1,h2
     &,a
+      font-weight: normal
       color: $ycolor9
       text-shadow: 0 0 2px rgba($ycolorb,.5)
+    a:hover
+      color: $dark_highlight
   border:
     top: solid 1px #000
     bottom: solid 1px #FFF
@@ -91,7 +93,7 @@ hgroup#maintitle
 a
   text-decoration: none
 
-h1
+h1,h2
   text-align: center
 
 =innerblock
@@ -111,14 +113,17 @@ h1
   a:hover
     color: $ycolorb
     background-color: rgba(#000,.3)
-    +box-shadow(rgba(#000,.3) 0 1px 3px inset,rgba(#FFF,.3) 0 1px 0)  
+    +box-shadow(rgba(#000,.3) 0 1px 3px inset,rgba(#FFF,.3) 0 1px 3px inset)  
+  a:active
+    background-color: rgba(#000,.5)
+    text-shadow: 0 0 2px #000
   a
     padding: .2em
     +border-radius(2ex)
     text-align: center
     width: 100%
     display: inline-block
-    color: $ycolor1
+    color: $ycolor2
     &:hover
       color: $ycolorb
 
@@ -136,8 +141,11 @@ h1
   &:active
     +text-shadow(#3AF 0 0 4px, rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
 
+
+$stdWidth: 600px
+
 #prelinks
-  width: 600px
+  width: $stdWidth
   margin: .5em auto
   height: 1em
 
@@ -151,17 +159,23 @@ h1
   +ybutton
 
 #mainnav
-  width: 50%
+  width: $stdWidth
+  padding: 0
+  margin: 2.5em auto
   ul
-    width: +span(9)
     height: 2.2ex
-    margin: 0 auto
-    padding-left: 0
+    padding: 0
     list-style-type: none
-    margin: 0 auto
     li
+      *
       text-align: center
+      float: left
+      width: ($stdWidth - 120px)/3
+      margin: 0 20px
       +ybutton
+      *
+        font-size: 1.5em
+        font-weight: bold
 
 .slideshow
   +innerblock
@@ -170,5 +184,5 @@ h1
   clear: both
 
 #main
-  width: 50%
-  margin-left: 25%
+  width: $stdWidth
+  margin: 0 auto