--- a/default/blog/articles.html	Thu May 04 00:55:06 2017 +0200
+++ b/default/blog/articles.html	Thu May 04 01:00:23 2017 +0200
@@ -1,22 +1,27 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 {% import 'input/comment.html' as comment %}
 
-{% macro show_items(items) %}
+{% macro show_items(items, comments=False) %}
     {# show items and comments items if present after each item,
        then post form if allow_commenting is set #}
     {% for item in items %}
-        {% include 'blog/item.html' %}
-
-        {% for comments_items in item.comments_items_list %}
+        {% if not comments %}<div class="main_article">{% endif %}
+            {% include 'blog/item.html' %}
+        {% if not comments %}</div>{% endif %}
 
-            {% if allow_commenting %}
-                <div id="comment_post">
-                    {{ comment.comment(service=comments_items.service, node=comments_items.node) }}
+        {# we recursively display comments for all comments nodes (usually there's only one) #}
+        {% for comments_items in item.comments_items_list %}
+            <button class="comments_btn" onclick="document.getElementById('{{comments_panel|next_gidx}}').classList.toggle('show')">show comments ({{comments_items|count}})</button>
+            <div id="{{comments_panel|cur_gidx}}" class="comments_panel">
+                {% if allow_commenting %}
+                    <div class="comment_post">
+                        {{ comment.comment(service=comments_items.service, node=comments_items.node) }}
+                    </div>
+                {% endif %}
+
+                <div class="comments">
+                    {{show_items(comments_items, comments=True)}}
                 </div>
-            {% endif %}
-
-            <div class="comments">
-                {{show_items(comments_items)}}
             </div>
 
         {% endfor %}

--- a/default/blog/item.html	Thu May 04 00:55:06 2017 +0200
+++ b/default/blog/item.html	Thu May 04 01:00:23 2017 +0200
@@ -1,8 +1,17 @@
+{% import 'script/css.js' as css %}
+
 {% block item %}
-<article>
+<article id="{{ item.id }}" class="box" onclick="this.classList.toggle('clicked')">
     <header>
         {% block header %}
         <div class="title">{% block blog_title %}{{ item.title_xhtml or item.title or '' }}{% endblock %}</div>
+            {% block metadata %}
+            <div class="metadata">
+            <span class="author">{{item.author}}</span>
+            <span class="blog_data">{{item.published | blog_date}}</span>
+            </div>
+
+            {% endblock metadata %}
         {% endblock header %}
     </header>
 
@@ -11,5 +20,11 @@
         {{ item.content_xhtml or item.content or ''}}
         {% endblock content %}
     </div>
+
+    <div class="expand_box">
+        <p>
+            Click to to expand…
+        </p>
+    </div>
 </article>
 {% endblock item %}

--- a/default/input/comment.html	Thu May 04 00:55:06 2017 +0200
+++ b/default/input/comment.html	Thu May 04 01:00:23 2017 +0200
@@ -8,7 +8,7 @@
 {% endmacro %}
 
 {% macro body(rows=10, cols=50) %}
-    <textarea name="body" rows="{{rows}}" cols="{{cols}}"></textarea>
+    <textarea name="body" rows="{{rows}}" cols="{{cols}}" placeholder="Your comment"></textarea>
 {% endmacro %}
 
 {% macro submit() %}

--- a/default/static/blog.css	Thu May 04 00:55:06 2017 +0200
+++ b/default/static/blog.css	Thu May 04 01:00:23 2017 +0200
@@ -1,13 +1,38 @@
-article {
+/**** articles ****/
+
+article.box {
+    position: relative;
     margin: 2% auto;
-    width: 80%;
-    border-style: solid;
+    border-style: solid None None;
     border-width: 1px;
-    border-radius: 3px;
-    padding: 1%;
-    background: lightgray;
+    padding: 2%;
+    max-height: 7em;
+    overflow: hidden;
+    transition: max-height 2s;
+}
+
+.main_article article.box:not(.clicked) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
+/* header */
+
+header .metadata {
+    text-align: right;
+}
+
+article .author {
+    font-weight: bold;
+}
+
+article .author::after {
+    content: ", ";
+}
+
+
+/* content */
+
 article div.content {
     text-align: justify;
     font-size: 0.9em;
@@ -15,4 +40,121 @@
 
 article img {
     max-width: 100%;
+    margin: 0;
 }
+
+.expand_box {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.expand_box::before {
+    background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff);
+    display: block;
+    content: "";
+    width: 100%;
+    height: 4em;
+    border: none;
+}
+
+.expand_box p {
+    background-color: white;
+    margin: 0;
+    text-align: center;
+    font-weight: bold;
+    font-size: 0.8em;
+    border-style: solid none dotted none;
+    border-width: 1px 0 1px;
+    border-bottom-color: gray;
+}
+
+.main_article .expand_box {
+    display: initial;
+}
+
+/**** comments ****/
+
+button.comments_btn {
+    border: none;
+    font-weight: bold;
+    display: block;
+    margin: 0 10% 0 auto;
+    border-radius: 1em;
+    background:  #b8bcc4;
+    color: #4d4d4d;
+}
+
+button.comments_btn:active {
+    background: #4d4d4d;
+    color: #b8bcc4;
+}
+
+.comments_panel {
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 2s, opacity 4s;
+    overflow: hidden;
+}
+
+.comments_panel.show {
+    max-height: 10000px;
+    overflow: auto;
+    opacity: 1;
+}
+
+.comments article {
+    background-color: #9ca0a8;
+    border: None;
+}
+
+.comment_post {
+    text-align: center;
+}
+
+.comment_post input {
+    display: block;
+    margin: 0 auto;
+}
+
+.comment_post textarea {
+    border-style: solid;
+    border-width: 1px  0;
+    border-color: black;
+    max-width: 100%;
+}
+
+/**** media queries ****/
+
+@media (min-width: 500px) {
+    article.box {
+        width: 80%;
+        border-style: solid solid none solid;
+    }
+    .comments article.box {
+        width: 30rem;
+        margin: 2% auto;
+        border: none;
+    }
+    .comment_post textarea {
+        border-width: 1px;
+        border-radius: 1em;
+        border: solid 1px;
+        padding: 0.5em;
+    }
+
+}
+
+/**** clicked ****/
+
+.main_article article.clicked {
+    max-height: 10000px;
+    border-bottom-style: solid;
+    overflow: auto;
+}
+
+.clicked .expand_box {
+    display: none;
+}