first step towards a structure

theme/wttf/templates/index.html

@@ -1,28 +1,81 @@
 {% extends "base.html" %}
 {% block content %}
-<section id="content">
-{% block content_title %}
-<h2>All articles</h2>
-{% endblock %}
-
-<ol id="post-list">
+{% if articles %}
     {% for article in articles_page.object_list %}
-        <li><article class="hentry">
-                <header> <h2 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2> </header>
-                <footer class="post-info">
-                    <time class="published" datetime="{{ article.date.isoformat() }}"> {{ article.locale_date }} </time>
-                    <address class="vcard author">By
-                    {% for author in article.authors %}
-                        <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
-                    {% endfor %}
-                    </address>
-                </footer><!-- /.post-info -->
-                <div class="entry-content"> {{ article.summary }} </div><!-- /.entry-content -->
-        </article></li>
+        {# First item #}
+        {% if loop.index <= 3 %}
+            <aside id="featured" class="body">
+                <article>
+                    <h1 class="entry-title p-name">
+                        <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+                    </h1>
+                    <div class="entry-subtitle">
+                        A 
+                        <span class="entry-category">{{ article.category }}</span> 
+                        about 
+                        <span class="entry-tags">
+                            {% for tag in article.tags %}
+                                <span itemprop="keywords">
+                                    <a href="/{{ tag.url }}" rel="tag">{{ tag }}</a>
+                                </span> 
                             {% endfor %}
+                        </span> 
+                        published on 
+                        <span class="entry-date dt-published">{{ article.date }}</span>
+                    </div>
+                    <div class="entry-content e-content">{{ article.content }}</div>
+                </article>
+            </aside><!-- /#featured -->
+            {% if loop.index == 3 %}
+                <section id="content" class="body">
+                    <h1>Other articles</h1>
+                    <hr />
+                    <ol id="posts-list" class="hfeed">
+            {% endif %}
+        {# other items #}
+        {% else %}
+            {% if loop.first %}
+                <section id="content" class="body">
+                    <ol id="posts-list" class="hfeed" start="{{ articles_paginator.per_page -1 }}">
+            {% endif %}
+            <li>
+                <article class="hentry">
+                    <header>
+                        <h1 class="p-name">
+                            <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
+                        </h1>
+                        <div class="entry-date dt-published">{{ article.date }}</div>
+                    </header>
+
+                    <div class="entry-content">
+                        <p class="p-summary">{{ article.summary }}</p>
+                        <a class="readmore" href="{{ SITEURL }}/{{ article.url }}"> ... read more</a>
+                    </div><!-- /.entry-content -->
+                </article>
+            </li>
+        {% endif %}
+        {% if loop.last %}
+            {% if loop.length > 1 or articles_page.has_other_pages() %}
                 </ol><!-- /#posts-list -->
                 {% if articles_page.has_other_pages() %}
                     {% include 'pagination.html' %}
                 {% endif %}
                 </section><!-- /#content -->
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+{% else %}
+<section id="content" class="body">
+<h2>Pages</h2>
+    {% for page in pages %}
+        <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a></li>
+    {% endfor %}
+</section>
+{% endif %}
 {% endblock content %}
+
+<section id="content">
+{% block content_title %}
+<h2>All articles</h2>
+{% endblock %}
+