Use lighter style consistent with documentation

4 files changed, 101 insertions, 98 deletions

diff --git a/themes/lv2/static/css/main.css b/themes/lv2/static/css/main.css
index 799cb10..61cb6fa 100644
--- a/themes/lv2/static/css/main.css
+++ b/themes/lv2/static/css/main.css
@@ -1,15 +1,16 @@
 /* Page Style */
 
 body {
-	font-family: sans-serif;
-	font-size: 100%;
-	background-color: #fff;
-	color: #000;
-	margin: 0;
-	padding: 0;
-	max-width: 60em;
+	background: #FFF;
+	color: #222;
+	font-style: normal;
+	line-height: 1.6em;
 	margin-left: auto;
 	margin-right: auto;
+	padding: 0 1em 0 1em;
+	max-width: 60em;
+	font-family: "DejaVu Serif",Palatino,serif;
+	text-rendering: optimizeLegibility;
 }
 
 a:link {
@@ -21,54 +22,54 @@ a:visited {
 }
 
 a:link {
-	color: #3D8C57;
+	color: #546E00;
 }
 
 a:visited {
-	color: #50755E;
+	color: #344E00;
 }
 
 a:hover {
 	text-decoration: underline;
 }
 
+.biglink {
+	font-size: large;
+	font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
+}
+
+.siglink {
+	font-style: italic;
+}
+
 img {
 	border: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
-	line-height: 1.125em;
-	margin: 1em 0 0.75em 0;
-}
-
-h1 {
-	font-size: 180%;
-	font-weight: 900;
+	line-height: 1.0125em;
+	color: #444;
+	font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
+	margin: 1em 0 0.5em 0;
+	font-weight: 400;
 }
 
 h2 {
-	font-size: 140%;
-	font-weight: 700;
+	font-size: 160%;
 }
 
 h3 {
-	font-size: 120%;
-	font-weight: 600;
+	font-size: 140%;
 }
 
 h4 {
-	font-size: 115%;
-	font-weight: 700;
-}
-
-h5 {
-	font-size: 105%;
-	font-weight: 700;
+	font-size: 120%;
+	font-weight: 500;
 }
 
-h6 {
-	font-size: 100%;
-	font-weight: 700;
+h5, h6 {
+	font-size: 110%;
+	font-weight: 600;
 }
 
 table {
@@ -94,8 +95,8 @@ th {
 }
 
 time, #sitename {
-	color: #c0c0c0;
-	font-size: 75%;
+	color: #666;
+	font-size: small;
 	font-variant: small-caps;
 }
 
@@ -118,12 +119,29 @@ p.caption {
 	margin-top: 0;
 }
 
+div.article h2 {
+	margin-bottom: 0;
+}
+
+.postmeta {
+	font-size: small;
+	font-style: italic;
+	color: #666;
+}
+
+hr {
+	height: 0;
+	border: none;
+	border-top: 1px solid #DDD;
+	margin: 2em 0;
+}
+
 ul, ol {
 	padding: .25em 0em 0 3em;
 }
 
-ul li, ol li {
-	padding: 0 0 1em 0;
+li {
+	list-style-type: circle;
 }
 
 strong {
@@ -131,7 +149,7 @@ strong {
 }
 
 tt, pre {
-	font-family: monospace;
+	font-family: "DejaVu Sans Mono",monospace,fixed;
 	line-height: 1.2em;
 }
 
@@ -144,53 +162,43 @@ pre {
 }
 
 nav {
-	background-color: #222;
-	background: linear-gradient(to bottom, #444 0%, #000 100%);
-	border-bottom: solid 2px #444;
-	border-left: solid 2px #444;
-	border-right: solid 2px #444;
-	border-radius: 0 0 6px 6px;
-	color: #EEE;
-	margin: 0;
-	padding: 0.5em;
+	border-bottom: 1px solid #DDD;
+	padding: 0.75em 0;
+	vertical-align: baseline;
+	font-size: small;
 }
 
 nav a, nav a:link, nav a:visited {
-	border-bottom: none;
-	color: #EEE;
+	text-decoration: none;
 }
 
 nav ul {
 	margin: 0;
 	padding: 0;
-	font-size: large;
-	font-weight: bold;
+	font-family: "DejaVu Sans",Helvetica,Arial,sans-serif;
 }
 
 nav li {
 	display: inline;
-	margin-right: 1em;
+	margin-right: 0.75em;
 }
 
 #logo {
-	vertical-align: middle;
+	vertical-align: baseline;
 }
 
 header a#page-title {
-	font-weight: bold;
-	font-size: x-large;
-	color: black;
+	color: #444;
 }
 
 #content {
-	padding: 0.5em 2em 2em 2em;
+	padding: 0;
 }
 
 .highlight {
-	font-family: monospace;
-	background-color: black;
+	font-family: "DejaVu Sans Mono",monospace,fixed;
 	border: solid 1px #eee;
-	color: white;
+	color: #444;
 	border-radius: 6px;
 }
 
@@ -289,4 +297,4 @@ header a#page-title {
 .vc { color: #00cdcd } /* Name.Variable.Class */
 .vg { color: #00cdcd } /* Name.Variable.Global */
 .vi { color: #00cdcd } /* Name.Variable.Instance */
-.il { color: #cd00cd } /* Literal.Number.Integer.Long */
\ No newline at end of file
+.il { color: #cd00cd } /* Literal.Number.Integer.Long */
diff --git a/themes/lv2/static/css/slideshow.css b/themes/lv2/static/css/slideshow.css
index 508761c..6234fbb 100644
--- a/themes/lv2/static/css/slideshow.css
+++ b/themes/lv2/static/css/slideshow.css
@@ -1,22 +1,20 @@
 #slideshow {
-	line-height: 20em;
-	margin: 2em;
-	margin-left: auto;
-	margin-right: auto;
-	position: relative;
-	text-align: center;
+    width: 16em;
+    height: 16em;
+    float: right;
+    margin: 0 0 2em 2em;
+    right: 0;
+    top: 0;
+	line-height: 16em;
 	transform-style: preserve-3d;
 	vertical-align: middle;
-	width: 640px;
-	height: 480px;
 }
 
 #slideshow img {
 	border-radius: 6px;
 	height: auto;
 	left: 0;
-	margin-left: auto;
-	margin-right: auto;
+    margin: auto auto auto auto;
 	max-height: 100%;
 	max-width: 100%;
 	opacity: 0;
diff --git a/themes/lv2/templates/index.html b/themes/lv2/templates/index.html
index 0fad03c..4a2822a 100644
--- a/themes/lv2/templates/index.html
+++ b/themes/lv2/templates/index.html
@@ -1,35 +1,32 @@
 {% extends "base.html" %}
 {% block content_title %}{% endblock %}
-{% block content %}        
+{% block content %}
   {% if articles %}
-    {% for article in articles %}        
+    {% for article in articles_page.object_list %}
+      <div class="article" itemscope itemtype="http://schema.org/BlogPosting">
+        <a href="{{ SITEURL }}/{{ article.url }}">
+	      <h2 itemprop="name headline">{{ article.title }}</h2>
+        </a>
+        <span class="postmeta">
+          Posted on <time datetime="{{ article.date.isoformat() }}" itemprop="datePublished">{{ article.date.strftime('%Y-%m-%d %H:%M') }}</time>
+          in
+          {% if article.tags %}
+            {% for tag in article.tags %}
+              <span itemprop="keywords">
+	            <a href="{{ SITEURL }}/{{ tag.url }}" rel="tag">{{ tag }}</a>
+                {% if not loop.last %}
+                  ,
+                {% endif %}
+              </span>
+            {% endfor %}
+          {% endif %}
+        </span>
+        <div class="summary">{{ article.summary }}</div>
+      </div>
+      <hr>
+    {% endfor %} {# For article #}
+  {% endif %}
 
-      {# First item #}
-      {% if loop.first %}
-        <header>
-          <h1><a href="{{ SITEURL }}/{{ article.url }}" id="page-title">{{ article.title }}</a></h1>
-          <span id="sitename"><a href="{{ SITEURL }}" id="site-title">{{ SITENAME }} {% if SITESUBTITLE %} <strong>{{ SITESUBTITLE }}</strong>{% endif %}</a> &sdot;</span>
-          {% if not HIDE_DATE %}<time datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>{% endif %}
-        </header>
+  {% include "pagination.html" %}
 
-        <article>
-          {{ article.content }}
-        </article>
-        {% if loop.length > 1 %}
-          <section id="article-list">
-            <h2>Tous les articles</h2>
-            <ol>
-        {% endif %}
-        {# other items #}
-      {% else %} 
-        <li><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></li>
-      {% endif %}
-    {% endfor %}
-    {% if loop.length > 1 %}
-            </ol>
-          </section><!-- #article-list -->
-    {% endif %}
-  {% else %}
-    No articles.
-  {% endif %}
 {% endblock content %}
diff --git a/themes/lv2/templates/page.html b/themes/lv2/templates/page.html
index 6adfc0d..107092e 100644
--- a/themes/lv2/templates/page.html
+++ b/themes/lv2/templates/page.html
@@ -16,7 +16,6 @@
       <h1><a href="{{ SITEURL }}/pages/{{ page.slug }}.html" id="page-title">{{ page.title }}</a></h1>
     {% endif %}
   </header>
-  {{ page.content }}
   {% if page.gallery %}
     <div id="slideshow">
       {% for photo_set in page.gallery.photos %}
@@ -25,4 +24,5 @@
     </div>
     <script type="text/javascript" src="{{ SITEURL }}/theme/js/slideshow.js"></script>
   {% endif %}
+  {{ page.content }}
 {% endblock %}