Try to use images.

content/html/en/index.md

@@ -4,12 +4,12 @@ noSubMenu: true
 menupriority: 1
 -----
 <% content_for :title do %>
-    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
+    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
 <% end %>
 
 <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;"/>
+<img src="/img/main/iPhone_Easy.png" class="clean" alt="main password view" />
 </div></div>
 
 <div id="easycontent" class="slideshow big"><div class="inner">

content/html/en/support.md

@@ -4,15 +4,6 @@ noSubMenu: false
 no_entete: true
 menupriority: 4
 ---
-<% content_for :title do %>
-<span style="font-weight: normal; margin-top: 0; line-height: 1ex">
-    <span style="letter-spacing:-.10em">YPassword</span>
-</span>
-<% end %>
-<% content_for :subtitle do %>
-    <span style="letter-spacing: 1em">Support</span>
-<% end %>
-
 A problem? A remark? 
 
 <form name="email" id="email" action="/contact" method="post">

content/html/fr/index.md

@@ -4,12 +4,12 @@ noSubMenu: true
 menupriority: 1
 -----
 <% content_for :title do %>
-    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
+    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
 <% end %>
 
 <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;"/>
+<img src="/img/main/iPhone_Easy.png" class="clean" alt="main password view" />
 </div></div>
 
 <div id="easycontent" class="slideshow big"><div class="inner">

content/html/fr/support.md

@@ -4,15 +4,6 @@ noSubMenu: false
 no_entete: true
 menupriority: 4
 ---
-<% content_for :title do %>
-<span style="font-weight: normal; margin-top: 0; line-height: 1ex">
-    <span style="letter-spacing:-.10em">YPassword</span>
-</span>
-<% end %>
-<% content_for :subtitle do %>
-    <span style="letter-spacing: 1em">Support</span>
-<% end %>
-
 A problem? A remark? 
 
 <form name="email" id="email" action="/contact" method="post">

lib/html.rb

@@ -33,18 +33,18 @@ end
 
 def page_title
     if @item[:content_for_title].nil?
-        h1text=@item[:title]
+        h2text=@item[:title]
     else
-        h1text=@item[:content_for_title]
+        h2text=@item[:content_for_title]
     end
-    tmp=%{<h1>#{h1text}</h1>}
+    tmp=%{<h1>YPassword</h1><h2>#{h2text}<h2>}
     unless @item[:subtitle].nil? and @item[:content_for_subtitle].nil?
         if @item[:content_for_subtitle].nil?
-            h2text=@item[:subtitle] 
+            h3text=@item[:subtitle] 
         else 
-            h2text=@item[:content_for_subtitle]
+            h3text=@item[:content_for_subtitle]
         end
-        tmp <<= %{<h2>#{h2text}</h2>}
+        tmp <<= %{<h3>#{h3text}</h3>}
     end
     return tmp
 end

multi/index.md

@@ -4,12 +4,12 @@ noSubMenu: true
 menupriority: 1
 -----
 <% content_for :title do %>
-    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">YPassword</a>
+    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
 <% end %>
 
 <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;"/>
+<img src="/img/main/iPhone_Easy.png" class="clean" alt="main password view" />
 </div></div>
 
 <div id="easycontent" class="slideshow big"><div class="inner">

multi/support.md

@@ -5,15 +5,6 @@ noSubMenu: false
 no_entete: true
 menupriority: 4
 ---
-<% content_for :title do %>
-<span style="font-weight: normal; margin-top: 0; line-height: 1ex">
-    <span style="letter-spacing:-.10em">YPassword</span>
-</span>
-<% end %>
-<% content_for :subtitle do %>
-    <span style="letter-spacing: 1em">Support</span>
-<% end %>
-
 A problem? A remark? 
 
 <form name="email" id="email" action="/contact" method="post">

site/Scratch/en/blog/index.html

@@ -47,7 +47,7 @@
            <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomen">Subscribe</a></div>
        </div>
       <hgroup id="maintitle">
-        <h1>Blog</h1>
+        <h1>YPassword</h1><h2>Blog<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>

site/Scratch/en/index.html

@@ -47,9 +47,9 @@
            <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>
+        <h1>YPassword</h1><h2>
+    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
+<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>
@@ -63,7 +63,7 @@
                 
 <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;" />
+<img src="/img/main/iPhone_Easy.png" class="clean" alt="main password view" />
 </div></div>
 
 <div id="easycontent" class="slideshow big"><div class="inner">
@@ -103,7 +103,7 @@ Your password is copied, you can paste it.
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>Modified: <time>06/28/2011</time></li>
+                    <li>Modified: <time>07/09/2011</time></li>
                     <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a></li>
                 </ul>
             </footer>

site/Scratch/en/support/index.html

@@ -47,13 +47,7 @@
            <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomen">Subscribe</a></div>
        </div>
       <hgroup id="maintitle">
-        <h1>
-<span style="font-weight: normal; margin-top: 0; line-height: 1ex">
-    <span style="letter-spacing:-.10em">YPassword</span>
-</span>
-</h1><h2>
-    <span style="letter-spacing: 1em">Support</span>
-</h2>
+        <h1>YPassword</h1><h2>Support<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>
@@ -64,8 +58,7 @@
       <div id="main" role="main">
         <article>
             <div class="content">
-                
-<p>A problem? A remark? </p>
+                <p>A problem? A remark? </p>
 
 <form name="email" id="email" action="/contact" method="post">
 <input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />

site/Scratch/fr/blog/index.html

@@ -47,7 +47,7 @@
            <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomfr">s'abonner</a></div>
        </div>
       <hgroup id="maintitle">
-        <h1>Blog</h1>
+        <h1>YPassword</h1><h2>Blog<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>

site/Scratch/fr/index.html

@@ -47,9 +47,9 @@
            <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomfr">s'abonner</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>
+        <h1>YPassword</h1><h2>
+    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
+<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>
@@ -63,7 +63,7 @@
                 
 <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;" />
+<img src="/img/main/iPhone_Easy.png" class="clean" alt="main password view" />
 </div></div>
 
 <div id="easycontent" class="slideshow big"><div class="inner">
@@ -103,7 +103,7 @@ Your password is copied, you can paste it.
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>modifié le : <time>28/06/2011</time></li>
+                    <li>modifié le : <time>09/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>

site/Scratch/fr/support/index.html

@@ -47,13 +47,7 @@
            <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/ypasswordespozitocomfr">s'abonner</a></div>
        </div>
       <hgroup id="maintitle">
-        <h1>
-<span style="font-weight: normal; margin-top: 0; line-height: 1ex">
-    <span style="letter-spacing:-.10em">YPassword</span>
-</span>
-</h1><h2>
-    <span style="letter-spacing: 1em">Support</span>
-</h2>
+        <h1>YPassword</h1><h2>Aide<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>
@@ -64,8 +58,7 @@
       <div id="main" role="main">
         <article>
             <div class="content">
-                
-<p>A problem? A remark? </p>
+                <p>A problem? A remark? </p>
 
 <form name="email" id="email" action="/contact" method="post">
 <input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />

site/css/main.css

@@ -24,7 +24,7 @@ body.bp h1 a:visited, body.bp h2 a:visited, body.bp h3 a:visited, body.bp h4 a:v
 }
 /* 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: #86adeb;
+  color: #4269a7;
 }
 /* line 49, ../src/main.sass */
 body.bp a {
@@ -37,7 +37,7 @@ body.bp a:visited {
 }
 /* line 54, ../src/main.sass */
 body.bp a:hover, body.bp a:active {
-  color: #86adeb;
+  color: #4269a7;
 }
 
 /* line 58, ../src/main.sass */
@@ -78,31 +78,35 @@ hgroup#maintitle h1, hgroup#maintitle h1 a, hgroup#maintitle h2, hgroup#maintitl
 hgroup#maintitle h1 a:hover, hgroup#maintitle h2 a:hover {
   color: #002255;
 }
+/* line 71, ../src/main.sass */
+hgroup#maintitle h2 {
+  font-size: 0.8em;
+}
 
-/* line 84, ../src/main.sass */
+/* line 86, ../src/main.sass */
 .clickable {
   cursor: pointer;
 }
 
-/* line 88, ../src/main.sass */
+/* line 90, ../src/main.sass */
 #container {
   width: span(24);
   margin: 0 auto;
 }
 
-/* line 93, ../src/main.sass */
+/* line 95, ../src/main.sass */
 a {
   text-decoration: none;
 }
 
-/* line 96, ../src/main.sass */
+/* line 98, ../src/main.sass */
 h1, h2 {
   text-align: center;
 }
 
-/* line 106, ../src/main.sass */
+/* line 108, ../src/main.sass */
 .block {
-  background-color: rgba(0, 0, 0, 0.02);
+  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;
@@ -114,28 +118,28 @@ h1, h2 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 103, ../src/main.sass */
+/* line 105, ../src/main.sass */
 .block > * {
   padding: 20px;
 }
-/* line 108, ../src/main.sass */
+/* line 110, ../src/main.sass */
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 147, ../src/main.sass */
+/* line 155, ../src/main.sass */
 #prelinks {
-  width: 600px;
+  width: 960px;
   margin: 0.5em auto;
   height: 1em;
 }
 
-/* line 153, ../src/main.sass */
+/* line 161, ../src/main.sass */
 #choixlang {
   float: left;
   font-size: 14px;
 }
-/* line 113, ../src/main.sass */
+/* line 115, ../src/main.sass */
 #choixlang a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -144,13 +148,17 @@ 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 117, ../src/main.sass */
+/* line 119, ../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 */
+/* line 122, ../src/main.sass */
 #choixlang a {
+  color: #9ca1ad;
+}
+/* line 124, ../src/main.sass */
+#choixlang a, #choixlang span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
   -webkit-border-radius: 2ex;
@@ -161,19 +169,28 @@ h1, h2 {
   text-align: center;
   width: 100%;
   display: inline-block;
-  color: #9ca1ad;
 }
-/* line 127, ../src/main.sass */
-#choixlang a:hover {
+/* line 130, ../src/main.sass */
+#choixlang a:hover, #choixlang span:hover {
   color: #efeff4;
 }
+/* line 132, ../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);
+  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 157, ../src/main.sass */
+/* line 165, ../src/main.sass */
 #choixrss {
   float: right;
   font-size: 14px;
 }
-/* line 113, ../src/main.sass */
+/* line 115, ../src/main.sass */
 #choixrss a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -182,13 +199,17 @@ 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 117, ../src/main.sass */
+/* line 119, ../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 */
+/* line 122, ../src/main.sass */
 #choixrss a {
+  color: #9ca1ad;
+}
+/* line 124, ../src/main.sass */
+#choixrss a, #choixrss span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
   -webkit-border-radius: 2ex;
@@ -199,26 +220,35 @@ h1, h2 {
   text-align: center;
   width: 100%;
   display: inline-block;
-  color: #9ca1ad;
 }
-/* line 127, ../src/main.sass */
-#choixrss a:hover {
+/* line 130, ../src/main.sass */
+#choixrss a:hover, #choixrss span:hover {
   color: #efeff4;
 }
+/* line 132, ../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);
+  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 161, ../src/main.sass */
+/* line 170, ../src/main.sass */
 #mainnav {
   width: 600px;
   padding: 0;
   margin: 2.5em auto;
 }
-/* line 165, ../src/main.sass */
+/* line 174, ../src/main.sass */
 #mainnav ul {
   height: 2.2ex;
   padding: 0;
   list-style-type: none;
 }
-/* line 169, ../src/main.sass */
+/* line 178, ../src/main.sass */
 #mainnav ul li {
   text-align: center;
   float: left;
@@ -226,7 +256,7 @@ h1, h2 {
   margin: 0 20px;
   font-size: 14px;
 }
-/* line 113, ../src/main.sass */
+/* line 115, ../src/main.sass */
 #mainnav ul li a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -235,13 +265,17 @@ 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 117, ../src/main.sass */
+/* line 119, ../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 */
+/* line 122, ../src/main.sass */
 #mainnav ul li a {
+  color: #9ca1ad;
+}
+/* line 124, ../src/main.sass */
+#mainnav ul li a, #mainnav ul li span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
   -webkit-border-radius: 2ex;
@@ -252,21 +286,31 @@ h1, h2 {
   text-align: center;
   width: 100%;
   display: inline-block;
-  color: #9ca1ad;
 }
-/* line 127, ../src/main.sass */
-#mainnav ul li a:hover {
+/* line 130, ../src/main.sass */
+#mainnav ul li a:hover, #mainnav ul li span:hover {
   color: #efeff4;
 }
-/* line 176, ../src/main.sass */
+/* line 132, ../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);
+  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 184, ../src/main.sass */
 #mainnav ul li * {
   font-size: 1.5em;
-  font-weight: bold;
 }
 
-/* line 180, ../src/main.sass */
+/* line 187, ../src/main.sass */
 .slideshow {
-  background-color: rgba(0, 0, 0, 0.02);
+  padding: 3em;
+  margin: 3em;
+  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;
@@ -278,18 +322,25 @@ h1, h2 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 103, ../src/main.sass */
+/* line 105, ../src/main.sass */
 .slideshow > * {
   padding: 20px;
 }
 
-/* line 183, ../src/main.sass */
+/* line 192, ../src/main.sass */
 .flush {
   clear: both;
 }
 
-/* line 186, ../src/main.sass */
+/* line 195, ../src/main.sass */
+.clean {
+  background: none;
+  border: none;
+  margin: none;
+}
+
+/* line 200, ../src/main.sass */
 #main {
-  width: 600px;
+  width: 960px;
   margin: 0 auto;
 }

site/index.html

@@ -47,9 +47,9 @@
            <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>
+        <h1>YPassword</h1><h2>
+    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
+<h2>
       </hgroup>
       <nav id="mainnav">
           <ul>
@@ -63,7 +63,7 @@
                 
 <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;" />
+<img src="/img/main/iPhone_Easy.png" class="clean" alt="main password view" />
 </div></div>
 
 <div id="easycontent" class="slideshow big"><div class="inner">
@@ -103,7 +103,7 @@ Your password is copied, you can paste it.
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>Modified: <time>06/28/2011</time></li>
+                    <li>Modified: <time>07/09/2011</time></li>
                     <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a></li>
                 </ul>
             </footer>

site/src/main.sass

@@ -20,7 +20,7 @@ $ycolor8: #1F2024
 $ycolor9: #0F1011
 
 // $higlightcolor:  #28C
-$higlightcolor:  $ycolor3 + #025
+$higlightcolor:  $ycolor3 + #025 - #444
 $higlightcolor-shadow:  #058
 $higlightcolor-reflect:  #6AF
 
@@ -68,6 +68,8 @@ hgroup#maintitle
       text-shadow: 0 0 2px rgba($ycolorb,.5)
     a:hover
       color: $dark_highlight
+  h2
+    font-size: .8em
   border:
     top: solid 1px #000
     bottom: solid 1px #FFF
@@ -97,7 +99,7 @@ h1,h2
   text-align: center
 
 =innerblock
-  background-color: rgba(#000,0.02)
+  background-color: $ycolorc
   +box-shadow(#FFF 0 0 3px, rgba(#000,0.2) 0 0 3px inset)
   +border-radius()
   & > *
@@ -118,14 +120,20 @@ h1,h2
     background-color: rgba(#000,.5)
     text-shadow: 0 0 2px #000
   a
+    color: $ycolor2
+  a,span
     padding: .2em
     +border-radius(2ex)
     text-align: center
     width: 100%
     display: inline-block
-    color: $ycolor2
     &:hover
       color: $ycolorb
+  span
+    color: $ycolorb
+    text-shadow: 0 -1px 0 rgba(#000,.3), 0 1px 0 rgba(#FFF,.3)
+    background-color: rgba(#000,.15)
+    +box-shadow(rgba(#000,.3) 0 1px 3px inset,rgba(#FFF,.3) 0 1px 3px inset)  
 
 =button
   +text-shadow(rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
@@ -142,7 +150,7 @@ h1,h2
     +text-shadow(#3AF 0 0 4px, rgba(#000,0.5) 0px -1px 0px,rgba(#FFF,0.5) 0px 1px 0px )
 
 
-$stdWidth: 600px
+$stdWidth: 960px
 
 #prelinks
   width: $stdWidth
@@ -158,8 +166,9 @@ $stdWidth: 600px
   float: right
   +ybutton
 
+$navWidth: 600px
 #mainnav
-  width: $stdWidth
+  width: $navWidth
   padding: 0
   margin: 2.5em auto
   ul
@@ -167,22 +176,27 @@ $stdWidth: 600px
     padding: 0
     list-style-type: none
     li
-      *
       text-align: center
       float: left
-      width: ($stdWidth - 120px)/3
+      width: ($navWidth - 120px)/3
       margin: 0 20px
       +ybutton
       *
         font-size: 1.5em
-        font-weight: bold
 
 .slideshow
+  padding: 3em
+  margin: 3em
   +innerblock
 
 .flush
   clear: both
 
+.clean
+  background: none
+  border: none
+  margin: none
+
 #main
   width: $stdWidth
   margin: 0 auto

tasks/correctpng.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env zsh
+rootdir="${0:h}/.."
+for fic in $rootdir/site/img/**/*.png; do
+    print -n "$fic"
+    newname=${fic}.uncorrected
+    mv "$fic" "$newname" && \
+    convert -colorspace sRGB "$newname" "${fic}" && \
+    print "\t[DONE]"
+done