Change style of archives page

Update #59

It is a merge between old and new style

static/css/elegant.css

@@ -544,43 +544,42 @@ ul.list-all-articles li time {
 }
 div.blog-archives h2 {
     float: left;
-    line-height: 0.6em;
     position: relative;
+    margin:0;
 }
 div.blog-archives article, div.recent-posts article {
     border-bottom: 1px dotted #AAA;
 }
 div.blog-archives article {
+    font-size: 1.1em;
     margin-left: 6em;
-    padding-bottom: 0.7em;
-    padding-left: 4.5em;
+    padding: .3em .2em;
     position: relative;
+    overflow: scroll;
+}
+div.blog-archives article.last-entry-of-year {
+    margin-bottom: 1em;
 }
-div.blog-archives h1, div.recent-posts h1 {
+div.recent-posts h1 {
     font-size: 2em;
     margin-bottom: 0;
 }
-div.blog-archives h1 small, div.recent-posts h1 small {
+div.recent-posts h1 small {
     font-size: .7em;
 }
 div.blog-archives time {
     float: right;
-    font: .9em 'PT Sans', 'Helvetica Neue', Arial, Sans-Serif;
-    left: 0;
-    line-height: .3em;
-    position: absolute;
     text-align: right;
-    top: 1.8em;
 }
-div.blog-archives footer, div.recent-posts section {
+div.blog-archives time, div.recent-posts section {
     color: #8F8F8F;
     font: .9em 'PT Sans', 'Helvetica Neue', Arial, Sans-Serif;
 }
-div.blog-archives footer a, div.recent-posts section a {
+div.recent-posts section a {
     color: inherit;
     padding-left: .3em;
 }
-div.blog-archives footer a:hover, div.recent-posts section a:hover {
+div.recent-posts section a:hover {
     border-bottom: 1px dashed;
     text-decoration: none;
 }
@@ -595,14 +594,13 @@ div.recent-posts {
     margin-left: 1em;
 }
 @media (max-width: 767px) {
+    div.blog-archives h2 {
+        float: none;
+    }
     div.blog-archives article {
         margin-left: 0;
         padding-left: 0;
     }
-    div.blog-archives time {
-        float: none;
-        position: static;
-    }
 }
 /* MailChimp */
 #mc-embed-signup {

templates/archives.html

@@ -22,17 +22,23 @@ Full archives of {{ SITENAME|striptags }} blog.
             {% for article in dates %}
             {% set year = article.date.strftime('%Y') %}
             {%if last_year != year %}
-            <h2 class="hidden-phone">{{ year }}</h2>
+            <h2 id="{{year }}"><a href="#{{year}}">{{ year }}</a></h2>
             {% set last_year = year %}
             {% endif %}
+            {% set next_year = 0 %}
+            {% if not loop.last %}
+            {% set next = loop.index0 + 1 %}
+            {% set next_article = dates[next] %}
+            {% set next_year = next_article.date.strftime('%Y') %}
+            {% endif %}
+            {% if next_year != year %}
+            <article class="last-entry-of-year">
+            {% else %}
             <article>
-                <h1><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }} {%if article.subtitle %} <small> {{ article.subtitle }} </small> {% endif %} </a></h1>
-                {% set day = article.date.strftime('%d')|int %}
-                <time pubdate="pubdate" datetime="{{ article.date.isoformat() }}">{{ article.date.strftime('%b') }} {{ day }}<span class="visible-phone">{{- article.date.strftime(', %Y') }}</span></time>
-                <footer>posted in 
-                <a href="{{ SITEURL }}/categories.html#{{ article.category.slug }}-ref">{{ article.category }}</a>
-                </footer>
-            </article>    
+            {% endif %}
+            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }} {%if article.subtitle %} <small> {{ article.subtitle }} </small> {% endif %} </a>
+            <time pubdate="pubdate" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
+            </article>
             {% endfor %}
         </div>
     </div>