[theme] improve blog feed

sass/_duniter.sass

@@ -135,9 +135,10 @@ input.search_input
     width: 5em
 
 .tags, .authors, .category
+    display: inline-block
     margin-right: 7px
 
-.date
+.float-right
     float: right
 
 .tags .tag

sass/components/_newslink.sass

-.kkk-newslink
+// displays (thumbnail / taxonomies / preview) of blog articles
+.feed-block
+    border-left: solid 5px #e1eef7
     padding: 1em
-    div
-        color: black
-    img
+    color: black
+    .feed-img
+        // preview
         max-width: 120px
         margin-right: 20px
-    h3
-        display: inline-block
-        margin-top: 0
-    span.date
-        float: right
+    .feed-tax
+        // taxonomies
+    .feed-preview
+        // preview
+        display: block
+        color: black
+        text-decoration: none
+        h3
+            margin-top: 0
+
 
-.kkk-newslink:hover
-    background-color: #FAFAFA
+.feed-block:hover
+    border-left: solid 5px #5096C8
+    background-color: #FAFAFA
\ No newline at end of file

templates/article.html

@@ -8,7 +8,7 @@
 {% block content %}
 <main class="page w3-container w3-content w3-padding-64">
     {{ macros::taxonomies(taxonomies=page.taxonomies) }}
-    <span class="date">{{ page.date }}</span>
+    <span class="date float-right">{{ page.date }}</span>
 
   {% if page.extra.auto_toc %}{{ macros::toc(toc=page.toc, level=1, depth=page.extra.toc_depth | default(value=6)) }}{% endif %}
 

templates/feed.html

@@ -10,29 +10,33 @@
       {{ section.content | safe }}
     </div>
 
-    {% if not section.extra.disable_listing %}
+    {%- if not section.extra.disable_listing %}
     <hr>
       {% for article in section.pages %}
-      <a href="{{ article.permalink }}">
-      <div class="w3-margin-mobile w3-row-padding kkk-newslink">
-        {% if article.extra.thumbnail %}
-        {% set thumbnail = article.extra.thumbnail %}
-          <img class="w3-col s5 m2" src="
-          {%- if thumbnail is matching("[.](jpg|png|jpeg)$") -%}
-          {{ macros::resize_static(path=article.extra.thumbnail) }}
-          {%- else -%}
-          {{ article.extra.thumbnail }}
-          {%- endif -%}
-          "/>
-        {% endif %}
-        <div class="w3-mobile w3-rest">
-          <h3>{{ article.title }}</h3>&nbsp;<span class="date">{{ article.date }}</span>
-          {% if article.description %}<p>{{ article.description }}</p>{% endif %}
+      {% set url = article.permalink -%}
+      <div class="w3-margin-mobile w3-row-padding feed-block">
+        {%- if article.extra.thumbnail -%}
+        {%- set thumbnail = article.extra.thumbnail -%}
+        <img class="w3-col s5 m2 feed-img" src="
+        {%- if thumbnail is matching("[.](jpg|png|jpeg)$") -%}
+        {{ macros::resize_static(path=article.extra.thumbnail) }}
+        {%- else -%}
+        {{ article.extra.thumbnail }}
+        {%- endif -%}
+        "/>
+        {%- endif %}
+        <div class="w3-mobile w3-col s2 feed-tax">
+          {%- set tax = article.taxonomies %}
+          {% if tax.category %}{{ macros::category(category=tax.category )}}{% endif %}
+          {% if tax.authors %}{{ macros::authors(authors=tax.authors )}}{% endif %}
+          {% if tax.tags %}{{ macros::tags(tags=tax.tags )}}{% endif %}
+          <span class="date">{{ article.date }}</span>
         </div>
-      </div>
-      </a>
-      {% endfor %}
+        <a href="{{url}}" class="w3-mobile w3-rest feed-preview">
+          <h3>{{ article.title }}</h3>
+          {%- if article.description -%}<p>{{ article.description }}</p>{%- endif %}
+        </a>
+      </div>{% endfor %}
     {% endif %}
-
   </main>
 {% endblock content %}

templates/macros.html

@@ -98,38 +98,38 @@
 
 
 {# === tags === #}
-{% macro tags(tags) %}
+{%- macro tags(tags) -%}
 <span class="tags">
-    {% for tag in tags %}
-    {%- set url = get_taxonomy_url(kind="tags", name=tag) %}
+    {%- for tag in tags -%}
+    {%- set url = get_taxonomy_url(kind="tags", name=tag) -%}
     <a class="tag" href="{{url}}">{{ tag }}</a>
-    {% endfor %}
+    {%- endfor -%}
 </span>
-{%- endmacro %}
+{%- endmacro -%}
 
 {# === author === #}
-{% macro authors(authors) %}
+{%- macro authors(authors) -%}
 <span class="authors">
-    {% for author in authors %}
-    {%- set url = get_taxonomy_url(kind="authors", name=author) %}
-    <a class="author" href="{{url}}"><i class="fa fa-user-circle-o"></i> {{ author }}</a>
-    {% endfor %}
+    {%- for author in authors -%}
+    {%- set url = get_taxonomy_url(kind="authors", name=author) -%}
+    <a class="author" href="{{url}}"><i class="fa fa-user-circle-o"></i>&nbsp;{{ author }}</a>
+    {%- endfor -%}
 </span>
-{%- endmacro %}
+{%- endmacro -%}
 
 {# === category === #}
-{% macro category(category) %}
+{%- macro category(category) -%}
 <span class="category">
-    {% for cat in category %}
-    {%- set url = get_taxonomy_url(kind="category", name=cat) %}
-    <a class="cat" href="{{url}}"><i class="fa fa-bookmark"></i> {{ cat }}</a>
-    {% endfor %}
+    {%- for cat in category -%}
+    {%- set url = get_taxonomy_url(kind="category", name=cat) -%}
+    <a class="cat" href="{{url}}"><i class="fa fa-bookmark"></i>&nbsp;{{ cat }}</a>
+    {%- endfor -%}
 </span>
-{%- endmacro %}
+{%- endmacro -%}
 
 {# === taxonomies === #}
-{% macro taxonomies(taxonomies) %}
-{% if taxonomies.tags %}{{ macros::tags(tags=taxonomies.tags )}}{% endif %}
-{% if taxonomies.authors %}{{ macros::authors(authors=taxonomies.authors )}}{% endif %}
-{% if taxonomies.category %}{{ macros::category(category=taxonomies.category )}}{% endif %}
-{%- endmacro %}
+{%- macro taxonomies(taxonomies) -%}
+{%- if taxonomies.category -%}{{ macros::category(category=taxonomies.category )}}{%- endif -%}
+{%- if taxonomies.authors -%}{{ macros::authors(authors=taxonomies.authors )}}{%- endif -%}
+{%- if taxonomies.tags -%}{{ macros::tags(tags=taxonomies.tags )}}{%- endif -%}
+{%- endmacro -%}

templates/nav.html

 <nav class="w3-bar w3-large">
   <a href="/" class="w3-bar-item w3-button {% if current_path %}{% if current_path == "/" %}active{% endif %}{% endif %}"><img alt="" class="icon" src="/img/duniter-logo_alt.svg"/> Duniter</a>
   
-  {% set index = get_section(path="_index.md") %}
-  {% set contributeurs = get_section(path="contributeurs/_index.md") %}
+  {%- set index = get_section(path="_index.md") -%}
+  {%- set contributeurs = get_section(path="contributeurs/_index.md") -%}
 
-  {% for p in index.pages | concat(with=contributeurs) %}
-    {% if not p.extra.hide %}
+  {%- for p in index.pages | concat(with=contributeurs) %}
+    {%- if not p.extra.hide -%}
     <a href="{{ p.permalink }}" class="w3-bar-item w3-button
-      {% if current_path %}{% if current_path == p.path %}active{% endif %}{% endif %}">
-      {{p.title}}
-    </a>
-    {% endif %}
+      {%- if current_path %}{% if current_path == p.path %}active{% endif %}{% endif -%}
+      ">{{p.title}}</a>
+    {%- endif -%}
   {% endfor %}
 
   <div class="w3-dropdown-hover w3-dropdown-click w3-right">
@@ -30,14 +29,13 @@
     </div>
   </div>
 
-  {% for s in index.subsections | reverse %}
-  {% set subsection = get_section(path=s) %}
-    {% if not subsection.extra.hide and subsection.path != contributeurs.path %}
+  {%- for s in index.subsections | reverse -%}
+  {%- set subsection = get_section(path=s) -%}
+    {%- if not subsection.extra.hide and subsection.path != contributeurs.path -%}
     <a href="{{ subsection.permalink }}" class="w3-bar-item w3-button w3-right
-      {% if current_path %}{% if current_path is starting_with(subsection.path) %}active{% endif %}{% endif %}">
-      {{subsection.title}}
-    </a>
-    {% endif %}
-  {% endfor %}
+      {%- if current_path %}{% if current_path is starting_with(subsection.path) %}active{% endif %}{% endif -%}
+      ">{{subsection.title}}</a>
+    {%- endif -%}
+  {%- endfor -%}
 
 </nav>
\ No newline at end of file