fix the no picture problem

Author: Dhruvi16

themes/vocabulary_theme/templates/blog-categories.html

@@ -1,8 +1,14 @@
 {% extends "layout.html" %}
+
 {% from "macros/categories.html" import render_categories %}
-{% block title %}{{ this.parent.children.get('entries').title }}{% endblock %}
-{% block header %}{{ this.parent.children.get('entries').title }}{% endblock %}
+
 {% block body %}
-  <h2>Categories</h2>
-  {{ render_categories(this) }}
+  <div class="all-categories">
+    <div class="title">
+      <h1 class="container">Categories</h1>
+    </div>
+    <div class="categories-list container">
+      {{ render_categories(this) }}
+    </div>
+  </div>
 {% endblock %}

themes/vocabulary_theme/templates/blog-series-list.html

@@ -1,8 +1,14 @@
 {% extends "layout.html" %}
-{% from "macros/categories.html" import render_categories %}
-{% block title %}{{ this.parent.children.get('entries').title }}{% endblock %}
-{% block header %}{{ this.parent.children.get('entries').title }}{% endblock %}
+
+{% from "macros/series.html" import render_series %}
+
 {% block body %}
-  <h2>All Series</h2>
-  {{ render_categories(this) }}
+<div class="all-series">
+  <div class="title">
+    <h1 class="container">All Series</h1>
+  </div>
+  <div class="series-list container">
+    {{ render_series(this) }}
+  </div>
+</div>
 {% endblock %}

themes/vocabulary_theme/templates/macros/categories.html

@@ -1,9 +1,7 @@
 {% from "macros/posts.html" import render_posts %}
 
 {% macro render_categories(categories) %}
-<ul class="list-unstyled">
     {% for category in site.query(categories.path) %}
-      <li><a href="{{ category|url }}">{{ category.name }}</a></li>
+      <a class="button tag margin-vertical-small margin-horizontal-smaller" href="{{ category|url }}">{{ category.name }}</a>
     {% endfor %}
-</ul>
 {% endmacro %}

themes/vocabulary_theme/templates/macros/posts.html

@@ -7,12 +7,13 @@
       <article class="card entry-post horizontal no-border blog-entry column is-one-third">
         <header>
           <figure class="image blog-image">
-          {% if author.about %}
-            {% if author.md5_hashed_email %}
-              <img class="profile" src="https://secure.gravatar.com/avatar/{{ author.md5_hashed_email }}?size=200"
-              alt="gravatar" />
+            {% if author.about %}
+              {% if author.md5_hashed_email %}
+                <img class="profile" src="https://secure.gravatar.com/avatar/{{ author.md5_hashed_email }}?size=200" alt="gravatar" />
+              {% else %}
+                <img class="profile" src="./blank_profile.svg" alt="gravatar" />
+              {% endif %}
             {% endif %}
-          {% endif %}
           </figure>
         </header>
         <div class="blog-content">

themes/vocabulary_theme/templates/macros/series.html

@@ -0,0 +1,7 @@
+{% from "macros/posts.html" import render_posts %}
+
+{% macro render_series(series) %}
+  {% for serie in site.query(series.path) %}
+    <h4 class="series-link"><a class="link" href="{{ serie|url }}">{{ serie.name }}</a></h4>
+  {% endfor %}
+{% endmacro %}

webpack/sass/main.scss

@@ -264,3 +264,56 @@ a {
     @extend .padding-bottom-xxl;
   }
 }
+
+.all-series {
+  .title {
+    background-color: $color-lighter-gray;
+
+    .container {
+      @extend .padding-horizontal-big;
+      @extend .padding-bottom-xl;
+    }
+  }
+
+  .series-list {
+    @extend .padding-horizontal-big;
+    @extend .padding-top-xl;
+    @extend .padding-bottom-xxl;
+
+    .series-link {
+      .link {
+        @extend .has-color-dark-slate-gray;
+      }
+
+      @extend .padding-bottom-big;
+
+      &:not(:last-of-type)::after {
+        @extend .padding-top-big;
+
+        display: block;
+
+        content: '';
+
+        border-bottom:  0.1875rem solid $color-light-gray;
+      }
+    }
+  }
+}
+
+.all-categories {
+  .title {
+    background-color: $color-lighter-gray;
+    overflow-wrap: break-word;
+
+    .container {
+      @extend .padding-horizontal-big;
+      @extend .padding-bottom-xl;
+    }
+  }
+
+  .categories-list {
+    @extend .padding-horizontal-big;
+    @extend .padding-top-xl;
+    @extend .padding-bottom-xxl;
+  }
+}