redesign

- rss plus visible, dans le header - style accueil, posts - sidebar - a-propos - footer
msadouni · Mar 13, 2010 · 38b12f0 · 38b12f0
1 parent 8d8ab46
commit 38b12f0
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 52 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -33,21 +33,24 @@
   <div class="container">
     <div id="wrapper" class="prepend-1 span-22 append-1 last">
       <div id="header">
-        <h1><a href="/">tutoriaux rails</a></h1>
-        <h2>exemples et astuces d'utilisation du framework ruby on rails</h2>
+        <div class="span-17 append-1">
+          <h1><a href="/">tutoriaux rails</a></h1>
+          <h2>exemples et astuces d'utilisation du framework ruby on rails</h2>
+        </div>
+        <div class="span-4 last">
+          <a href="http://feeds.feedburner.com/TutoriauxRails" class="rss">
+            sʼabonner
+          </a>
+        </div>
       </div>
-      <div id="main" class="span-16 append-2">
+      <div id="main" class="span-17 append-1">
         {{ content }}
       </div>
       <div id="sidebar" class="span-4 last">
-        <div id="links">
-          <ul>
-            <li class="a-propos"><a href="/a-propos.html">à propos</a></li>
-            <li class="chronologie"><a href="/chronologie.html">chronologie</a></li>
-            <li class="rss"><a href="http://feeds.feedburner.com/TutoriauxRails">rss</a></li>
-            <li class="email"><a href="mailto:matthieusadouni@gmail.com">email</a></li>
-            <li class="twitter"><a href="http://twitter.com/msadouni">twitter</a></li>
-          </ul>
+        <div id="a-propos">
+          <h3>à propos</h3>
+          <p>tutoriaux-rails propose des articles d'exemples et astuces d'utilisation du framework ruby on rails.</p>
+          <p class="more"><a href="/a-propos.html">en savoir plus</a></p>
         </div>
         <div id="categories">
           <h3>catégories</h3>
@@ -58,6 +61,7 @@ <h3>catégories</h3>
             <li><a href="/interaction.html">interaction ({{ site.categories.interaction | size }})</a></li>
           </ul>
         </div>
+        <p id="chronologie"><a href="/chronologie.html">chronologie</a></p>
       </div>
       <div id="footer" class="span-22 last">
         <a href="http://github.com/msadouni/tutoriaux-rails">versionné sur github</a>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,8 +4,10 @@
 
 <div id="post">
   <h1><a href="{{ page.url }}">{{ page.title }}</a></h1>
-  <div class="date">publié le {{ page.date | date:"%d/%m/%Y" }}</div>
-  <div class="auteur">auteur : {{ page.auteur }}</div>
+  <p class="infos">
+    publié le {{ page.date | date:"%d/%m/%Y" }}
+    par {{ page.auteur }}
+  </p>
   <p>{{ page.chapo }}</p>
   <div id="content">
     {{ content }}

diff --git a/a-propos.html b/a-propos.html
@@ -3,10 +3,21 @@
 title: à propos
 ---
 
-<h2>Le site</h2>
-<p>tutoriaux-rails.com est un site regroupant des tutoriaux pour le framework de développement Web <a href="http://rubyonrails.org">Ruby on Rails</a>, ainsi que pour l'outil de versionning <a href="http://git-scm.com">Git</a>.</p>
-<p>Ruby on Rails est un framework open-source dont le but est de permettre la réalisation rapide d'applications web en prenant du plaisir à coder. Il met en avant l'utilisation de conventions plutôt que de configurations.</p>
-<p>La communauté de développeurs est très active et de nombreuses extensions sont disponibles, couvrant la plupart des besoins courants.</p>
+<div id="a-propos">
+  <h2>le site</h2>
+  <p>tutoriaux-rails.com est un site regroupant des tutoriaux pour le framework de développement Web <a href="http://rubyonrails.org">Ruby on Rails</a>, ainsi que pour l'outil de versionning <a href="http://git-scm.com">Git</a>.</p>
+  <p>Ruby on Rails est un framework open-source dont le but est de permettre la réalisation rapide d'applications web en prenant du plaisir à coder. Il met en avant l'utilisation de conventions plutôt que de configurations.</p>
+  <p>La communauté de développeurs est très active et de nombreuses extensions sont disponibles, couvrant la plupart des besoins courants.</p>
 
-<h2>L'auteur</h2>
-<p><strong>Matthieu Sadouni</strong> est développeur web à Caen pour l'agence <a href="http://www.mh-communication.fr">MH Communication</a></p>
+  <h2>l'auteur</h2>
+  <p><strong>Matthieu Sadouni</strong> est développeur web à Caen pour l'agence <a href="http://www.mh-communication.fr">MH Communication</a>.</p>
+
+  <h3>ailleurs sur internet</h3>
+  <ul class="links">
+    <li>
+      <a href="http://github.com/msadouni">github</a> - <span>code open-source</span>
+    </li>
+    <li><a href="mailto:matthieusadouni@gmail.com">email</a></li>
+    <li><a href="http://twitter.com/msadouni">twitter</a></li>
+  </ul>
+</div>
diff --git a/css/screen.css b/css/screen.css
@@ -1,11 +1,18 @@
 h1, h2, h3, h4 {
     font-family: Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
 }
+h2, h3, h4 {
+    font-weight: bold;
+    color: #852A2C;
+}
+h3 {
+    line-height: 1.25em;
+}
 a {
     color: #000;
 }
 a:visited {
-    color: #999;
+    color: #5f5f5f;
 }
 a:hover {
     color: #852A2C;
@@ -20,9 +27,9 @@ body {
 #header {
     overflow: hidden;
     margin-bottom: 3em;
+    position: relative;
 }
 #header h1 {
-    float: left;
     margin-bottom: 0;
     font-size: 4em;
 }
@@ -36,9 +43,14 @@ body {
     color: #000;
 }
 #header h2 {
-    float: left;
+    font-weight: normal;
     font-size: 1.33em;
-    margin: 1.33em 0 0 1em;
+    color: #6f6f6f;
+    margin: 0;
+}
+#header .rss {
+    position: absolute;
+    bottom: 5px;
 }
 #sidebar {
     font-size: 1.167em;
@@ -48,20 +60,21 @@ body {
     padding: 0;
     list-style: none;
 }
-#sidebar #links {
-    margin-bottom: 2em;
-}
-#sidebar #links li {
-    letter-spacing: 1px;
-}
-#sidebar .chronologie, #sidebar .rss {
-    margin-bottom: 1em;
-}
 #sidebar h3 {
-    margin-bottom: 1em;
+    margin-bottom: 0.25em;
     color: #852A2C;
     font-weight: bold;
 }
+#sidebar #a-propos {
+    margin-bottom: 2em;
+}
+#sidebar #a-propos p {
+    font-size: 0.875em;
+    margin:0;
+}
+#sidebar #categories {
+    margin-bottom: 2em;
+}
 #main h1 a {
     font-weight: bold;
     text-decoration: none;
@@ -73,16 +86,14 @@ body {
 #main h1 a:hover {
     color: #852A2C;
 }
-#main .date, #main .auteur {
+#main p.infos {
     margin-bottom: 1em;
     color: #999;
+    font-size: 1em;
 }
-#main .more {
+.more {
     text-align: right;
-}
-#main h2, #main h3, #main h4 {
     font-weight: bold;
-    color: #852A2C;
 }
 #main p, #main li {
     font-size:1.167em;
@@ -155,8 +166,17 @@ body {
     color: #999;
     font-size: 0.857em;
 }
-
+#main #a-propos .links a {
+    font-weight: bold;
+}
+.rss {
+    display: block;
+    padding-left: 18px;
+    background:url(/img/feed-icon-12x12-orange.gif) top left no-repeat;
+    line-height: 12px;
+}
 #footer {
     margin-top: 1em;
     padding-top: 1em;
+    border-top: 1px solid #ccc;
 }
diff --git a/img/feed-icon-12x12-orange.gif b/img/feed-icon-12x12-orange.gif
diff --git a/index.html b/index.html
@@ -5,35 +5,40 @@
 {% assign first_post = site.posts.first %}
 <div id="post">
   <h1><a href="{{ first_post.url }}">{{ first_post.title }}</a></h1>
-  <div class="date">publié le {{ first_post.date | date:"%d/%m/%Y" }}</div>
-  <div class="auteur">auteur : {{ first_post.auteur }}</div>
+  <p class="infos">
+    publié le {{ first_post.date | date:"%d/%m/%Y" }}
+    par {{ first_post.auteur }}
+  </p>
   <p>{{ first_post.chapo }}</p>
-  <div class="more">
+  <p class="more">
     <a href="{{ first_post.url }}">Lire la suite &raquo;</a>
-  </div>
+  </p>
 </div>
 <div id="articles-recents" class="span-17 last">
-  <h2>articles récents</h2>
   {% for recent_post in site.posts limit:2 offset:1 %}
     <div class="recent-post span-8 {% if forloop.first %}append-1{% else %}last{% endif %}">
       <h3><a href="{{ recent_post.url }}">{{ recent_post.title }}</a></h3>
-      <div class="date">publié le {{ recent_post.date | date:"%d/%m/%Y" }}</div>
-      <div class="auteur">auteur : {{ recent_post.auteur }}</div>
+      <p class="infos">
+        publié le {{ recent_post.date | date:"%d/%m/%Y" }}
+        par {{ recent_post.auteur }}
+      </p>
       <p>{{ recent_post.chapo }}</p>
-      <div class="more">
+      <p class="more">
         <a href="{{ recent_post.url }}">Lire la suite &raquo;</a>
-      </div>
+      </p>
     </div>
   {% endfor %}
   {% for recent_post in site.posts limit:2 offset:3 %}
     <div class="recent-post span-8 {% if forloop.first %}append-1{% else %}last{% endif %}">
       <h3><a href="{{ recent_post.url }}">{{ recent_post.title }}</a></h3>
-      <div class="date">publié le {{ recent_post.date | date:"%d/%m/%Y" }}</div>
-      <div class="auteur">auteur : {{ recent_post.auteur }}</div>
+      <p class="infos">
+        publié le {{ recent_post.date | date:"%d/%m/%Y" }}
+        par {{ recent_post.auteur }}
+      </p>
       <p>{{ recent_post.chapo }}</p>
-      <div class="more">
+      <p class="more">
         <a href="{{ recent_post.url }}">Lire la suite &raquo;</a>
-      </div>
+      </p>
     </div>
   {% endfor %}
 </div>