New layout

11 files changed, 145 insertions, 106 deletions

diff --git a/dev-random/screenshot.png b/dev-random/screenshot.png
index 5ce64c4..a1e468b 100644
--- a/dev-random/screenshot.png
+++ b/dev-random/screenshot.png
diff --git a/dev-random/static/css/main.css b/dev-random/static/css/main.css
index 29818cb..7978af3 100644
--- a/dev-random/static/css/main.css
+++ b/dev-random/static/css/main.css
@@ -84,73 +84,21 @@ pre {
 }
 
 
-/******************************************************************************/
-/*                               Page Structure                               */
-/******************************************************************************/
-
-#page-header {
-    width: 60%;
-    margin: 1em auto 1em auto;
-
-    text-align: center;
-}
-
-
-#page-menu {
-    width: 100%;
-    margin: 0 0 2em 0;
-    padding: .2em 0em;
-
-    border-bottom: thin dashed gray;
-
-    text-align: center;
-}
-
-
-#page-content {
-    display: block;
-    width: 75%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-
-#page-footer {
-    width: 100%;
-    margin-top: 2em;
-
-    border-top: thin dashed gray;
-
-    font-size: .7em;
-    font-weight: lighter;
-}
-
 
 /******************************************************************************/
 /*                              Specific Styles                               */
 /******************************************************************************/
 
 
-#page-header h1 {
-    margin: .2em auto .2em auto;
+.page .head h1 {
+    margin: .7em auto;
 
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 2.8em;
+    text-align: center;
 }
 
-#page-menu ul {
-    display: inline;
-    margin: 0;
-    padding: 0;
-
-    list-style-type: none;
-}
-
-#page-menu ul li {
-    display: inline;
-}
-
-#page-menu ul li a {
+.widget ul li {
     margin: .1em .4em;
 
     font-size: 0.8em;
@@ -159,12 +107,12 @@ pre {
     font-variant: small-caps;
 }
 
-#page-content #page-title {
+.content #page-title {
     font-size: .9em;
 }
 
 
-.post {
+.content .post {
     clear: both;
     margin: 1em 0 3em 0;
 }
@@ -237,7 +185,7 @@ pre {
 }
 
 
-#page-footer p {
+.page .foot p {
     display: block;
     width: 60%;
 
diff --git a/dev-random/static/css/skeleton.css b/dev-random/static/css/skeleton.css
new file mode 100644
index 0000000..02010f7
--- /dev/null
+++ b/dev-random/static/css/skeleton.css
@@ -0,0 +1,68 @@
+
+.page {
+  display: block;
+  margin-top: 5%;
+}
+
+.page .head,
+.page .main,
+.page .foot {
+  display: block;
+  width: 100%;
+  clear: both;
+}
+
+.page .main {
+  display: table;
+  border-collapse: separate;
+  border-spacing: .5%;
+  width: 75%;
+  margin: .5em auto;
+  clear: both;
+}
+
+.page .main .sidebar {
+  display: table-cell;
+  width: 25%;
+}
+
+.page .main .content {
+  display: table-cell;
+  width: 74%;
+}
+
+@media screen and (max-width: 800px) {
+  .page  .main {
+    width: 100%;
+    clear: both;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .page .main {
+    display: block;
+  }
+
+  .page .main .sidebar,
+  .page .main .content {
+    display: block;
+    margin: 0 .5em;
+    width: 100%;
+    clear: both;
+  }
+
+  .widget {
+    display: block;
+  }
+
+  .widget ul,
+  .widget li {
+    display: inline;
+  } 
+
+  .widget h3 { display: none; }
+}
+
+@media print {
+  .sidebar { display: none; }
+}
diff --git a/dev-random/templates/archives.html b/dev-random/templates/archives.html
index 520d5ed..1ba36dd 100644
--- a/dev-random/templates/archives.html
+++ b/dev-random/templates/archives.html
@@ -3,7 +3,7 @@
 {% block content_title %}{{ SITENAME }} — Archives{% endblock %}
 
 {%- block content %}
-    <section id="page-content">
+    <section class="content">
       <h1>Archives</h1>
        <dl>
        {% for article in articles %}
diff --git a/dev-random/templates/article.html b/dev-random/templates/article.html
index d85c7c5..ab5679c 100644
--- a/dev-random/templates/article.html
+++ b/dev-random/templates/article.html
@@ -9,7 +9,7 @@
 {% block title %}{{ article.title }} — {{ super() }}{% endblock %}
 
 {%- block content %}
-     <article class="post" id="page-content">
+     <article class="post content">
       <header class="post-header">
         <time datetime="{{ article.date.isoformat() }}" pubdate="pubdate">
           {{ article.locale_date }}
diff --git a/dev-random/templates/base.html b/dev-random/templates/base.html
index 1edab44..1424ca4 100644
--- a/dev-random/templates/base.html
+++ b/dev-random/templates/base.html
@@ -4,7 +4,8 @@
   {% block headers %}
     <meta charset="utf-8" />
     <title>{% block title %}{{ SITENAME }}{%endblock%}</title>
-    <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" />
+    <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/skeleton.css" />
+    <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/main.css" />
     <link rel="shortcut icon" type="text/css" href="{{ SITEURL }}/favicon.ico" />
     <link rel="alternate" type="application/atom+xml"
                            title="{{ SITENAME }} — Flux Atom"
@@ -42,47 +43,23 @@
   {% endblock headers %}
   </head>
   <body> 
-    <!--[if lt IE 7]>
-    <div style="font-size: small; background-color: black; color: white; position: fixed; bottom: 0; left: 0; right: 0;border-bottom: 1px solid gray; padding: 2px 5px;"
-         id="outdated">Il est recommandé d'utiliser un navigateur Web
-         moderne, comme <a href="http://www.mozilla.com/firefox/">Mozilla
-         Firefox</a> ou <a href="http://www.google.com/chrome/">Google
-         Chrome</a> pour voir ce site
-    </div>
-    <![endif]-->
-    <header id="page-header">
-      <h1>
-        <a href="{{ SITEURL }}/index.html">{{ SITENAME }}</a>
-      </h1>
-    </header>
+    <div class="page">
+      <header class="head">
+        <h1>
+          <a href="{{ SITEURL }}/index.html">{{ SITENAME }}</a>
+        </h1>
+      </header>
 
-    <nav id="page-menu">
-      <ul>
-        <li><a href="{{ SITEURL }}/index.html">Accueil</a></li>
-      {% for title, link in MENUITEMS %}
-        <li><a href="{{ link|format(SITEURL) }}">{{ title }}</a></li>
-      {% endfor %}
-      {% if DISPLAY_PAGES_ON_MENU %}
-        <li><a href="{{ SITEURL }}/categories.html">Catégories</a></li>
-        {% for p in PAGES %}
-        <li {% if p == page %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url|e }}">{{ p.title }}</a></li>
-        {% endfor %}
-      {% else %}
-        {% for cat, null in categories %}
-        <li {% if cat == category %}class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url|e }}">{{ cat }}</a></li>
-        {% endfor %}
-      {% endif %}
-        <li><a href="{{ SITEURL }}/archives.html">Archives</a></li>
-        <li><a href="{{ SITEURL }}/tags.html">Mots-clés</a></li>
-      </ul>
-    </nav>
-    
-    {% block content %}
-    {% endblock content %}
+      <div class="main">
+        {% include "includes/sidebar.html" %} 
+        {% block content %}
+        {% endblock content %}
+      </div>
 
-    <footer id="page-footer">
-      <p> {{ FOOTER_TEXT or 'Powered by <a href="http://pelican.readthedocs.org">Pelican</a>' }}</p>
-      {% if GITHUB_URL %}<p><a id="github-link" href="{{ GITHUB_URL}}">Fork me on Github</a></p>{% endif %}
-    </footer>
+      <footer class="foot">
+        <p> {{ FOOTER_TEXT or 'Powered by <a href="http://pelican.readthedocs.org">Pelican</a>' }}</p>
+        {% if GITHUB_URL %}<p><a id="github-link" href="{{ GITHUB_URL}}">Fork me on Github</a></p>{% endif %}
+      </footer>
+    </div>
   </body>
 </html>
diff --git a/dev-random/templates/categories.html b/dev-random/templates/categories.html
index ca9a7b1..0a5b0f4 100644
--- a/dev-random/templates/categories.html
+++ b/dev-random/templates/categories.html
@@ -3,7 +3,7 @@
 {% block title %}{{ super() }} — Catégories{% endblock title %}
 
 {%- block content %}
-    <section id="page-content">
+    <section class="content">
       <h1>Catégories</h1>
       <ul id="category-list">
       {% for category, n in categories %}
diff --git a/dev-random/templates/includes/sidebar.html b/dev-random/templates/includes/sidebar.html
new file mode 100644
index 0000000..3c42ef9
--- /dev/null
+++ b/dev-random/templates/includes/sidebar.html
@@ -0,0 +1,46 @@
+    <aside class="sidebar">
+      <nav class="widget">
+      <h3>Site</h3>
+        <ul>
+          <li><a href="{{ SITEURL }}">Accueil</a></li>
+          <li><a href="{{ SITEURL }}/archives.html">Archives</a></li>
+          <li><a href="{{ SITEURL }}/tags.html">Mots-clés</a></li>
+        {% if MENUITEMS %}
+          {% for name, uri in MENUITEMS %}
+          <li><a href="{{ uri|format(SITEURL)|e}}">{{ name }}</a></li>
+          {% endfor %}
+        {% endif %}
+        {% if DISPLAY_PAGES_ON_MENU %}
+          {% for p in PAGES %}
+          <li><a href="{{ SITEURL}}/{{ p.url|e }}"{% if p == page %} class="active"{% endif %}>{{ p.title }}</a></li>
+          {% endfor %}
+        {% endif %}
+        </ul>
+      </nav>
+
+     {% if categories %}
+      <nav class="widget">
+        <h3>Catégories</h3>
+        <ul>
+        {% for cat, null in categories %}
+          <li><a href="{{ SITEURL }}/{{ cat.url|e }}">{{ cat }}</a></li>
+        {% endfor %}
+        </ul>
+      </nav>
+      {% endif %}
+
+      {% if SOCIAL %}
+      <nav class="widget">
+        <h3>Social</h3>
+        <ul>
+        {% for url, name in SOCIAL %}
+          <li><a href="{{ url|e }}">{{ name }}</a></li>
+        {% endfor %}
+          <li><a href="{{ SITEURL }}/{{ FEED }}" rel="alternate">Flux Atom</a></li>
+        {% if FEED_RSS %}
+          <li><a href="{{ SITEURL }}/{{ FEED_RSS }}" rel="alternate">Flux RSS</a></li>
+        {% endif %}
+        </ul>
+      </nav>
+      {% endif %}
+    </aside>
diff --git a/dev-random/templates/index.html b/dev-random/templates/index.html
index ad01608..11314d1 100644
--- a/dev-random/templates/index.html
+++ b/dev-random/templates/index.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {%- block content %}
-    <section id="page-content">
+    <section class="content">
       <h1 id="page-title">{% block index_title %}Tous les articles{% endblock index_title %}</h1>
      
          {% for article in articles_page.object_list %}        
diff --git a/dev-random/templates/page.html b/dev-random/templates/page.html
index 25acc8e..f0bc3c9 100644
--- a/dev-random/templates/page.html
+++ b/dev-random/templates/page.html
@@ -3,7 +3,7 @@
 {% block title %}{{ super() }} — {{ page.url }}{% endblock title %}
 
 {%- block content %}
-    <section id="page-content">
+    <section class="content">
       <h1>{{ page.title }}</h1>
       {{ page.content }}
     </section>
diff --git a/dev-random/templates/tags.html b/dev-random/templates/tags.html
index 45b883b..b95d401 100644
--- a/dev-random/templates/tags.html
+++ b/dev-random/templates/tags.html
@@ -3,7 +3,7 @@
 {% block title %}{{ super() }} — Mots-clés{% endblock title %}
 
 {%- block content %}
-    <section id="page-content">
+    <section class="content">
       <h1>Mots-clés</h1>
       <ul id="tagslist">
       {% for tag in tag_cloud %}