--- a/sat_templates/templates/default/blog/item.html	Fri Sep 14 19:49:15 2018 +0200
+++ b/sat_templates/templates/default/blog/item.html	Wed Oct 03 21:00:24 2018 +0200
@@ -11,34 +11,22 @@
 
 {% if item.language and locale and locale.language != item.language %}
     {# we may display items in different language in a specific way #}
-    {% set other_lang = " other_lang" %}
+    {% set other_lang = " other_lang" if expanded else " other_lang state_init" %}
 {% endif %}
 
-{% if expanded %}
-    {# FIXME: the style attribute is not nice, but due to the use of clicked_mh_fix. A cleaner way would be welcomed #}
-    <article id="{{item.id}}" class="init box{{other_lang}} clicked" style="max-height: none">
-{% else %}
-    <article id="{{item.id}}" class="init box{{other_lang}}" >
-{% endif %}
+    <article id="{{item.id}}" class="box {{"box--comment" if comment else "box--large"}} {{"" if (expanded or comment) else "box--expand"}}{{other_lang}}" >
 
     {# following message is displayed if item lang is different from page locale #}
     {% if other_lang is defined %}
-        <div class="info"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
+        <div class="info show_if_parent_init"><p>{% trans language=locale.language_name %}This message is not in {{language}}, click to display anyway{% endtrans %}</p></div>
     {% endif %}
 
-    {# we put a reduce button at the top #}
-    <div class="expand_box box_top" onclick="clicked_mh_fix('{{item.id}}')">
-        <p>
-            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
-        </p>
-    </div>
-
     <header>
         {% block header %}
         {# title and publication date link to a HTTP page if items_http_uri is set #}
         {% set item_http_uri = items_http_uri.get(item.id) if items_http_uri is defined else none %}
 
-        <div class="title">
+        <div class="blog__title">
             {% block blog_title scoped %}
                 {% set title = item.title_xhtml or item.title or '' %}
                 {% if item_http_uri %}
@@ -49,15 +37,18 @@
             {% endblock %}
         </div>
             {% block metadata scoped %}
-            <div class="metadata">
+            <div class="blog__metadata">
             {% if identities is defined %}
-                <span class="author">{{identities[item.author_jid].nick | default(item.author)}}</span>
+                {% if avatar is defined %}
+                    {{ avatar.avatar(item.author_jid, "avatar--float-left") }}
+                {% endif %}
+                <span class="blog__author">{{identities[item.author_jid].nick | default(item.author)}}</span>
             {% else %}
-                <span class="author">{{item.author}}</span>
+                <span class="blog__author">{{item.author}}</span>
             {% endif %}
             {% set published = item.published|date_fmt(fmt=dates_format) %}
             {% if item_http_uri %}
-                <span class="blog_data"><a href="{{item_http_uri}}">{{published}}</a></span>
+                <span class="blog__date"><a href="{{item_http_uri}}">{{published}}</a></span>
             {% else %}
                 {{- published -}}
             {% endif %}
@@ -79,20 +70,12 @@
         {% endblock header %}
     </header>
 
-    <div class="content{{' text' if not item.content_xhtml}}">
+    <div class="box__content{{' box__content--plaintext' if not item.content_xhtml}}">
         {% block content %}
         {{- item.content_xhtml or item.content|urlize or '' -}}
         {% endblock content %}
     </div>
 
-    {# and the bottom button to expand/reduce the article #}
-    <div class="expand_box box_bottom" onclick="clicked_mh_fix('{{item.id}}')">
-        <p>
-            <span class='show'>{% trans %}Click to expand…{% endtrans %}</span>
-            <span class='hide'>{% trans %}Click to reduce…{% endtrans %}</span>
-        </p>
-    </div>
-
 </article>
 
 {% endblock item %}