Make Archive page style responsive

Update #59

static/css/elegant.css

@@ -584,6 +584,16 @@ div.blog-archives footer a:hover {
     border-bottom: 1px dashed;
     text-decoration:none;
 }
+@media (max-width: 767px) {
+    div.blog-archives article {
+        margin-left: 0;
+        padding-left: 0;
+    }
+    div.blog-archives time {
+        float: none;
+        position: static;
+    }
+}
 /* MailChimp */
 #mc-embed-signup {
     font-family: inherit;

templates/archives.html

@@ -22,13 +22,13 @@ Full archives of {{ SITENAME|striptags }} blog.
             {% for article in dates %}
             {% set year = article.date.strftime('%Y') %}
             {%if last_year != year %}
-            <h2>{{ year }}</h2>
+            <h2 class="hidden-phone">{{ year }}</h2>
             {% set last_year = year %}
             {% endif %}
             <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 }}</time>
+                <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>