Merge pull request creativecommons#327 from creativecommons/add_all_authors

Update all authors page.

Author: Dhruvi16

content/blog/authors/blank_profile.svg

@@ -2,9 +2,15 @@
 
 {% from "macros/authors.html" import render_authors %}
 
-{% block title %}{{ this.parent.children.get('entries').title + ' - Authors' }}{% endblock %}
-{% block header %}{{ this.parent.children.get('entries').title }}{% endblock %}
 {% block body %}
-  <h2>Authors</h2>
-  {{ render_authors(this) }}
+  <div class="all-authors">
+    <div class="title">
+      <h1 class="container">Authors</h1>
+    </div>
+    <div class="authors-list container">
+      <div class="columns is-multiline is-mobile">
+        {{ render_authors(this) }}
+      </div>
+    </div>
+  </div>
 {% endblock %}

themes/vocabulary_theme/templates/authors.html

@@ -1,9 +1,21 @@
 {% from "macros/author_name.html" import render_author_name %}
 
 {% macro render_authors(authors) %}
-  <ul class="list-unstyled">
-    {% for author in site.query(authors.path) %}
-      <li><a href="{{ author|url }}">{{ render_author_name(author) }}</a></li>
-    {% endfor %}
-  </ul>
+  {% for author in site.query(authors.path) %}
+    <div class="author column is-6-mobile is-2-desktop">
+      {% if author.md5_hashed_email %}
+        <figure class="image profile">
+          <img class="profile" src="https://secure.gravatar.com/avatar/{{ author.md5_hashed_email }}?size=200" alt="gravatar" />
+        </figure>
+      {% else %}
+      <figure class="image profile">
+        <img class="profile" src="./blank_profile.svg" alt="gravatar" />
+      </figure>
+      {% endif %}
+      <div class="author-name">
+        <h4 class="desktop b-header"><a class="link" href="{{ author|url }}">{{ render_author_name(author) }}</a></h4>
+        <h6 class="mobile b-header"><a class="link" href="{{ author|url }}">{{ render_author_name(author) }}</a></h6>
+      </div>
+    </div>
+  {% endfor %}
 {% endmacro %}

themes/vocabulary_theme/templates/macros/authors.html

@@ -50,6 +50,19 @@ a {
   }
 }
 
+.breadcrumb-container {
+  border-top: 4px solid $color-forest-green;
+  background-color: $color-lighter-gray;
+
+  .breadcrumb {
+    @extend .padding-bigger;
+
+    .link {
+      @extend .has-color-forest-green;
+    }
+  }
+}
+
 .hero {
   @extend .margin-top-large;
 
@@ -179,19 +192,6 @@ a {
   }
 }
 
-.breadcrumb-container {
-  border-top: 4px solid $color-forest-green;
-  background-color: $color-lighter-gray;
-
-  .breadcrumb {
-    @extend .padding-bigger;
-
-    .link {
-      @extend .has-color-forest-green;
-    }
-  }
-}
-
 .blog-entries {
   .blog-entry {
     @extend .padding-vertical-larger;
@@ -232,7 +232,6 @@ a {
   }
 }
 
-
 .single-post {
   .container {
     @extend .padding-horizontal-xxl;
@@ -407,6 +406,57 @@ a {
   }
 }
 
+.all-authors {
+  .title {
+    background-color: $color-lighter-gray;
+
+    .container {
+      @extend .padding-horizontal-big;
+      @extend .padding-bottom-xl;
+    }
+  }
+
+  .authors-list {
+    @extend .padding-horizontal-big;
+    @extend .padding-top-xl;
+    @extend .padding-bottom-xxl;
+  }
+
+  .author {
+    @extend .padding-big;
+
+    .image {
+      height: 3.75rem;
+      width: 3.75rem;
+    }
+
+    .mobile {
+      display: none;
+    }
+
+    .desktop {
+      display: inline;
+    }
+
+    @media only screen and (max-width: 768px) {
+      .mobile {
+        display: inline;
+      }
+      .desktop {
+        display: none;
+      }
+    }
+
+    .author-name {
+      @extend .padding-top-small;
+
+      .link {
+        @extend .has-color-dark-slate-gray;
+      }
+    }
+  }
+}
+
 .code-guidelines {
   .code-guidelines-title {
     background-color: $color-lighter-gray;