From 86c09ba5588711c6c800057d63bd616ba7191dd4 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Thu, 18 Jun 2020 02:22:39 +0530
Subject: [PATCH 01/13] Update blog post page

---
 models/blog.ini                               |  2 +-
 themes/vocabulary_theme/templates/blog.html   | 13 ++++----
 .../templates/macros/posts.html               | 30 ++++++++++++++-----
 webpack/sass/main.scss                        | 12 ++++++++
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/models/blog.ini b/models/blog.ini
index 5c66499f3..c2520e949 100644
--- a/models/blog.ini
+++ b/models/blog.ini
@@ -19,4 +19,4 @@ order_by = -pub_date, title
 
 [pagination]
 enabled = yes
-per_page = 10
+per_page = 12
diff --git a/themes/vocabulary_theme/templates/blog.html b/themes/vocabulary_theme/templates/blog.html
index 81e041ee9..11e6fc0ae 100644
--- a/themes/vocabulary_theme/templates/blog.html
+++ b/themes/vocabulary_theme/templates/blog.html
@@ -3,11 +3,14 @@
 {% from "macros/pagination.html" import render_pagination %}
 {% from "macros/posts.html" import render_posts %}
 
+
 {% block title %}{{ this.title }}{% endblock %}
 {% block body %}
-  {{ this.description }}
-  {{ render_posts(this.pagination.items) }}
-  {% if this.pagination.pages > 1 %}
-    {{ render_pagination(this.pagination) }}
-  {% endif %}
+  <div class="container">
+    {{ this.description }}
+    {{ render_posts(this.pagination.items) }}
+    {% if this.pagination.pages > 1 %}
+      {{ render_pagination(this.pagination) }}
+    {% endif %}
+  </div>
 {% endblock %}
diff --git a/themes/vocabulary_theme/templates/macros/posts.html b/themes/vocabulary_theme/templates/macros/posts.html
index 8aa6a0214..78cf24028 100644
--- a/themes/vocabulary_theme/templates/macros/posts.html
+++ b/themes/vocabulary_theme/templates/macros/posts.html
@@ -1,14 +1,30 @@
 {% from "macros/author_name.html" import render_author_name %}
 
 {% macro render_posts(posts) %}
-  <ul class="blog-index list-unstyled">
+  <div class="columns is-multiline">
     {% for post in posts %}
       {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
-      <li>
-        <a href="{{ post|url }}">{{ post.title }}</a>
-        <p class="text-muted small">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
-          on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</p>
-      </li>
+      <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" />
+            {% endif %}
+          {% endif %}
+          </figure>
+        </header>
+        <div class="blog-content">
+          <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
+          <span class="blog-author">by <a class="author-name" href="{{ author|url }}">{{ render_author_name(author) }}</a>
+          on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
+          <!-- TODO : Discuss how to extract an excerpt -->
+          <div class="excerpt">
+            {{ post.body | excerpt | string | striptags() | truncate(100) }}
+          </div>
+        </div>
+      </article>
     {% endfor %}
-  </ul>
+  </div>
 {% endmacro %}
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 2d12f5a1a..509e1594b 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -33,6 +33,18 @@ $project-card-theme: $blue;
   }
 }
 
+.blog-entry {
+  @extend  .padding-big;
+
+  .blog-title {
+    @extend .has-color-dark-slate-gray;
+  }
+
+  .author-name {
+    @extend .has-color-forest-green;
+  }
+}
+
 h2 {
   font-weight: 600;
   padding-bottom: 0.5rem;

From 2fb3b5e682f1f169aaabbf9d5419ebcf52fda4a5 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Thu, 18 Jun 2020 18:26:21 +0530
Subject: [PATCH 02/13] Update title and description

---
 themes/vocabulary_theme/templates/blog.html   | 21 +++++++++-------
 themes/vocabulary_theme/templates/layout.html | 14 +++--------
 .../templates/macros/posts.html               |  2 +-
 webpack/sass/main.scss                        | 24 +++++++++++++++++--
 4 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/themes/vocabulary_theme/templates/blog.html b/themes/vocabulary_theme/templates/blog.html
index 11e6fc0ae..b73f25345 100644
--- a/themes/vocabulary_theme/templates/blog.html
+++ b/themes/vocabulary_theme/templates/blog.html
@@ -3,14 +3,19 @@
 {% from "macros/pagination.html" import render_pagination %}
 {% from "macros/posts.html" import render_posts %}
 
-
-{% block title %}{{ this.title }}{% endblock %}
 {% block body %}
-  <div class="container">
-    {{ this.description }}
-    {{ render_posts(this.pagination.items) }}
-    {% if this.pagination.pages > 1 %}
-      {{ render_pagination(this.pagination) }}
-    {% endif %}
+  <div class="blog-page">
+    <div class="blog-page-header">
+      <div class="container">
+        <h1>{{ this.title }}</h1>
+        <div class="blog-page-description column is-9 is-paddingless">{{ this.description }}</div>
+      </div>
+    </div>
+    <div class="container blog-page-posts">
+      {{ render_posts(this.pagination.items) }}
+      {% if this.pagination.pages > 1 %}
+        {{ render_pagination(this.pagination) }}
+      {% endif %}
+    </div>
   </div>
 {% endblock %}
diff --git a/themes/vocabulary_theme/templates/layout.html b/themes/vocabulary_theme/templates/layout.html
index c642646fe..bf1b83ed5 100644
--- a/themes/vocabulary_theme/templates/layout.html
+++ b/themes/vocabulary_theme/templates/layout.html
@@ -127,17 +127,9 @@
       </div>
     </nav>
   </header>
-  <div class="container-fluid page-content">
-    <div class="row justify-content-md-center">
-      <div class="col-lg-9 col-md-9 col-sm-12 content-wrap">
-        <div class="page py-3">
-          <h1 class="page-title pb-3 mb-4">{% block header %}{{ this.title }}{% endblock %}</h1>
-          {% block body %}{% endblock %}
-          <a id="back-to-top" href="#top" class="btn btn-dark btn-sm" role="button">Back to top</a>
-        </div>
-      </div>
-    </div>
-  </div>
+
+  {% block body %}{% endblock %}
+
   <footer class="main-footer">
     <div class="container">
       <div class="columns">
diff --git a/themes/vocabulary_theme/templates/macros/posts.html b/themes/vocabulary_theme/templates/macros/posts.html
index 78cf24028..d597d94b1 100644
--- a/themes/vocabulary_theme/templates/macros/posts.html
+++ b/themes/vocabulary_theme/templates/macros/posts.html
@@ -17,7 +17,7 @@
         </header>
         <div class="blog-content">
           <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
-          <span class="blog-author">by <a class="author-name" href="{{ author|url }}">{{ render_author_name(author) }}</a>
+          <span class="blog-author">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
           on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
           <!-- TODO : Discuss how to extract an excerpt -->
           <div class="excerpt">
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 3337c2e33..77631a689 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -3,6 +3,12 @@
 @import "../node_modules/@creativecommons/vocabulary/scss/color.scss";
 @import "../node_modules/@creativecommons/vocabulary/scss/typography.scss";
 
+a {
+  @extend .has-color-forest-green;
+
+  text-decoration: none;
+}
+
 .navbar-item {
   &.has-dropdown {
     .navbar-dropdown {
@@ -22,8 +28,22 @@
   .blog-title {
     @extend .has-color-dark-slate-gray;
   }
+}
+
+.blog-page {
+  .blog-page-header {
+    @extend .padding-top-bigger;
+    @extend .padding-bottom-xl;
+
+    background-color: $color-lighter-gray;
+
+    .blog-page-description {
+      @extend .padding-top-normal;
+      @extend .body-big;
+    }
+  }
 
-  .author-name {
-    @extend .has-color-forest-green;
+  .blog-page-posts {
+    @extend .padding-vertical-xl;
   }
 }

From 3f9463c08640e33cc11221a71c232dde6752a717 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Wed, 24 Jun 2020 03:21:52 +0530
Subject: [PATCH 03/13] Update padding

---
 webpack/sass/main.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 6a5e2377e..1fb9c9ee1 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -46,6 +46,7 @@ a {
 
 .blog-page {
   .blog-page-header {
+    @extend .padding-horizontal-big;
     @extend .padding-top-bigger;
     @extend .padding-bottom-xl;
 

From 20635ed54d406bf2ac09d0d6606705b95d31ab80 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Fri, 26 Jun 2020 18:53:23 +0530
Subject: [PATCH 04/13] Update title and description

---
 content/contributing-code/contents.lr            |  5 ++---
 models/page.ini                                  |  4 ++++
 .../templates/page-with-toc.html                 | 14 +++++++++++++-
 webpack/sass/main.scss                           | 16 ++++++++++++++++
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/content/contributing-code/contents.lr b/content/contributing-code/contents.lr
index b8c968a9c..a7cd83700 100644
--- a/content/contributing-code/contents.lr
+++ b/content/contributing-code/contents.lr
@@ -4,11 +4,10 @@ _template: page-with-toc.html
 ---
 title: Contribution Guidelines
 ---
+description: We do all of our development [on GitHub](https://github.com/creativecommons/). If you are not familiar with GitHub or pull requests, [here is an excellent guide to get started](https://guides.github.com/activities/hello-world/).
+---
 body:
 
-<p class="lead">Thank you for your interest in contributing to Creative Commons open source projects!</p>
-
-We do all of our development [on GitHub](https://github.com/creativecommons/). If you are not familiar with GitHub or pull requests, [here is an excellent guide to get started](https://guides.github.com/activities/hello-world/).
 
 ## Finding an issue
 
diff --git a/models/page.ini b/models/page.ini
index dcddfe824..fdfffb92d 100644
--- a/models/page.ini
+++ b/models/page.ini
@@ -6,6 +6,10 @@ label = {{ this.title }}
 label = Title
 type = string
 
+[fields.description]
+label = Title
+type = markdown
+
 [fields.body]
 label = Body
 type = markdown
diff --git a/themes/vocabulary_theme/templates/page-with-toc.html b/themes/vocabulary_theme/templates/page-with-toc.html
index edab735a9..4350a2724 100644
--- a/themes/vocabulary_theme/templates/page-with-toc.html
+++ b/themes/vocabulary_theme/templates/page-with-toc.html
@@ -1,6 +1,18 @@
 {% extends "layout.html" %}
-{% block title %}{{ this.title }}{% endblock %}
+
 {% block body %}
+  <div class="code-guidelines">
+    <header class="code-guidelines-title">
+      <div class="container is-paddingless">
+        <h1>{{ this.title }}</h1>
+        <div class="description">
+          {{this.description}}
+        </div>
+      </div>
+    </header>
+  </div>
+
+
   <div class="card toc-card bg-light">
     <div class="card-body">
       <ul class="toc list-unstyled">
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 596aa97c5..c173aaca2 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -35,3 +35,19 @@ a {
     }
   }
 }
+
+.code-guidelines {
+  .code-guidelines-title {
+    background-color: $color-lighter-gray;
+
+    .container {
+      @extend .padding-horizontal-bigger;
+
+      .description {
+        @extend .body-bigger;
+        @extend .padding-top-small;
+        @extend .padding-bottom-xl;
+      }
+    }
+  }
+}

From d4f7b70d163bb627ce8636bbbeef66c0f6e3c9f2 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Tue, 30 Jun 2020 21:39:56 +0530
Subject: [PATCH 05/13] Update contribution guidelines page

---
 .../templates/page-with-toc.html              | 70 ++++++++++++++-----
 webpack/sass/main.scss                        | 45 ++++++++++++
 2 files changed, 96 insertions(+), 19 deletions(-)

diff --git a/themes/vocabulary_theme/templates/page-with-toc.html b/themes/vocabulary_theme/templates/page-with-toc.html
index 4350a2724..1267cc75c 100644
--- a/themes/vocabulary_theme/templates/page-with-toc.html
+++ b/themes/vocabulary_theme/templates/page-with-toc.html
@@ -5,29 +5,61 @@
     <header class="code-guidelines-title">
       <div class="container is-paddingless">
         <h1>{{ this.title }}</h1>
-        <div class="description">
-          {{this.description}}
+        <div class="description column is-9 is-paddingless">
+          {{ this.description }}
         </div>
       </div>
     </header>
-  </div>
-
-
-  <div class="card toc-card bg-light">
-    <div class="card-body">
-      <ul class="toc list-unstyled">
-        {% for item in this.body.toc %}
-          <li><a href="#{{ item.anchor }}">{{ item.title }}</a></li>
-          {% if item.children %}
-            <ul class="toc list-unstyled pl-4">
-              {% for subitem in item.children %}
-                <li><a href="#{{ subitem.anchor }}">{{ subitem.title }}</a></li>
-              {% endfor %}
-            </ul>
+    <div class="container code-guidelines-body">
+      <div class="columns">
+        <div class="column is-one-quarter">
+          <div class="row">
+            {% if this.is_child_of('/contributing-code') %}
+            <aside class="menu sidebar-menu">
+              <ul class="menu-list">
+                <li>
+                  <a class="{% if this.is_child_of('/contributing-code/projects') %} is-active {% endif%} link" href="{{ '/contributing-code/projects'|url }}">Project List</a>
+                </li>
+                <hr class="divider">
+                <li>
+                  <a class="{% if this.is_child_of('/contributing-code') %} is-active {% endif%} link" href="{{ '/contributing-code'|url }}">Contribution Guidelines</a>
+                  <ul>
+                    <li><a class="{% if this.is_child_of('/contributing-code/pr-guidelines') %} is-active {% endif%} link" href="{{ '/contributing-code/pr-guidelines'|url }}"><i class="icon circle-filled"></i>PR Guidelines</a></li>
+                    <li><a class="{% if this.is_child_of('/contributing-code/github-repo-guidelines') %} is-active {% endif%} link" href="{{ '/contributing-code/github-repo-guidelines'|url }}"><i class="icon circle-filled"></i>Github Repo Guidelines</a></li>
+                  </ul>
+                </li>
+                <hr class="divider">
+                <li>
+                  <a class="link" href="{{ '/contributing-code/cc-search'|url }}">CC Search</a>
+                </li>
+              </ul>
+            </aside>
           {% endif %}
-        {% endfor %}
-      </ul>
+          </div>
+          <div class="row">
+            <h4 class="b-header">On this page</h4>
+            <aside class="menu table-of-contents">
+              <ul class="menu-list">
+                {% for item in this.body.toc %}
+                  <li>
+                    <a class="link" href="#{{ item.anchor }}">{{ item.title }}</a>
+                    {% if item.children %}
+                      <ul>
+                        {% for subitem in item.children %}
+                          <li><a class="link" href="#{{ subitem.anchor }}"><i class="icon circle-filled"></i>{{ subitem.title }}</a></li>
+                        {% endfor %}
+                      </ul>
+                    {% endif %}
+                  </li>
+                {% endfor %}
+              </ul>
+            </aside>
+          </div>
+        </div>
+        <div class="column markdown content">
+          {{ this.body }}
+        </div>
+      </div>
     </div>
   </div>
-  {{ this.body }}
 {% endblock %}
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index c173aaca2..331e77621 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -10,6 +10,33 @@ a {
   text-decoration: none;
 }
 
+.markdown {
+  @extend .body-big;
+
+  line-height: 1.6875;
+
+  p {
+    @extend .padding-vertical-small;
+  }
+
+  h1,h2,h3,h4,h5,h6 {
+    @extend .padding-top-large;
+    @extend .padding-bottom-small;
+  }
+
+  ol,ul {
+    @extend .padding-horizontal-big;
+  }
+
+  code {
+    @extend .has-color-dark-slate-gray;
+
+    background-color: $color-lighter-gray;
+    border: 1px solid $color-lighter-gray;
+    border-radius: 0.25rem;
+  }
+}
+
 .navbar-item {
   &.has-dropdown {
     .navbar-dropdown {
@@ -50,4 +77,22 @@ a {
       }
     }
   }
+  .code-guidelines-body {
+    @extend .padding-horizontal-big;
+
+    .link {
+      @extend .has-color-forest-green;
+    }
+    .is-active {
+      @extend .has-color-dark-slate-gray;
+    }
+
+    .row {
+      @extend .padding-top-larger;
+    }
+
+    .content {
+      @extend .padding-bottom-xxl;
+    }
+  }
 }

From ebe7096c2aa09a02a57cd20fe135b6cfd605a09e Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Thu, 2 Jul 2020 03:47:06 +0530
Subject: [PATCH 06/13] Add recent posts section

---
 content/contents.lr                           |  2 +
 flowblocks/recent-posts.ini                   |  6 +++
 models/home.ini                               |  2 +-
 .../templates/blocks/recent-posts.html        | 41 +++++++++++++++++++
 webpack/sass/main.scss                        | 28 +++++++++++++
 5 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 flowblocks/recent-posts.ini
 create mode 100644 themes/vocabulary_theme/templates/blocks/recent-posts.html

diff --git a/content/contents.lr b/content/contents.lr
index 39d4ef82c..273260e45 100644
--- a/content/contents.lr
+++ b/content/contents.lr
@@ -70,3 +70,5 @@ links_plugins:
   <h5 class="link-heading"><a href="https://opensource.creativecommons.org/ccsearch-browser-extension/" class="has-text-forest-green">CC Search Browser Extension</a></h5>
   <p class="link-caption">Search the Catalog using our Extension.</p>
 </div>
+#### recent-posts ####
+title: Recent Blog Post
\ No newline at end of file
diff --git a/flowblocks/recent-posts.ini b/flowblocks/recent-posts.ini
new file mode 100644
index 000000000..76d77851d
--- /dev/null
+++ b/flowblocks/recent-posts.ini
@@ -0,0 +1,6 @@
+[block]
+name = Recent Posts
+
+[fields.title]
+label = Title
+type = string
\ No newline at end of file
diff --git a/models/home.ini b/models/home.ini
index 62097f02a..be4ce58d4 100644
--- a/models/home.ini
+++ b/models/home.ini
@@ -9,4 +9,4 @@ type = string
 [fields.block_content]
 label = Block Content
 type = flow
-flow_blocks = hero, get-involved
+flow_blocks = hero, get-involved, recent-posts
diff --git a/themes/vocabulary_theme/templates/blocks/recent-posts.html b/themes/vocabulary_theme/templates/blocks/recent-posts.html
new file mode 100644
index 000000000..0e918ee81
--- /dev/null
+++ b/themes/vocabulary_theme/templates/blocks/recent-posts.html
@@ -0,0 +1,41 @@
+{% from "macros/author_name.html" import render_author_name %}
+
+<section class="recent-posts">
+  <div class="container">
+    <div class="level">
+      <h4 class="is-paddingless level-left">
+        {{ this.title }}
+      </h4>
+      <span class="level-right">
+        <a class="post-links" href="/blog">See all posts <i class="icon angle-right"></i></a>
+      </span>
+    </div>
+    <div class="columns">
+      {% for post in site.query('/blog/entries') %}
+        {% if loop.index <= 3 %}
+          {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
+          <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" />
+                {% endif %}
+              {% endif %}
+              </figure>
+            </header>
+            <div class="blog-content">
+              <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
+              <span class="blog-author">by <a class="author-name" href="{{ author|url }}">{{ render_author_name(author) }}</a>
+              on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
+              <div class="excerpt">
+                {{ post.body | excerpt | string | striptags() | truncate(100) }}
+              </div>
+            </div>
+          </article>
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index ca5c9b241..0052a7bb5 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -90,6 +90,34 @@ a {
   }
 }
 
+.recent-posts {
+  background-color: rgba(4, 166, 53, 0.1);
+
+  .container {
+    @extend .padding-vertical-xl;
+    @extend .padding-horizontal-big;
+
+    .columns {
+      @extend .padding-top-larger;
+      @extend .padding-bottom-xl;
+    }
+  }
+
+  .post-links {
+    @extend .has-color-forest-green;
+    @extend .body-normal;
+
+    font-weight: bold;
+    line-height: 1.5;
+    text-decoration: none;
+
+    .icon {
+      @extend .has-color-forest-green;
+      @extend .padding-left-small;
+    }
+  }
+}
+
 .breadcrumb-container {
   border-top: 4px solid $color-forest-green;
   background-color: $color-lighter-gray;

From 0b1bcb262a0a6ffcfef17401c28fd3f67536f9f3 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Thu, 2 Jul 2020 23:05:51 +0530
Subject: [PATCH 07/13] Update pagination and dividers

---
 themes/vocabulary_theme/templates/blog.html   |  8 ++--
 .../templates/macros/pagination.html          | 42 +++++++++++--------
 .../templates/macros/posts.html               |  3 +-
 webpack/sass/main.scss                        | 25 ++++++++---
 4 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/themes/vocabulary_theme/templates/blog.html b/themes/vocabulary_theme/templates/blog.html
index b73f25345..257c46f77 100644
--- a/themes/vocabulary_theme/templates/blog.html
+++ b/themes/vocabulary_theme/templates/blog.html
@@ -13,9 +13,11 @@ <h1>{{ this.title }}</h1>
     </div>
     <div class="container blog-page-posts">
       {{ render_posts(this.pagination.items) }}
-      {% if this.pagination.pages > 1 %}
-        {{ render_pagination(this.pagination) }}
-      {% endif %}
+      <div class="pagination-wrapper">
+        {% if this.pagination.pages > 1 %}
+          {{ render_pagination(this.pagination) }}
+        {% endif %}
+      </div>
     </div>
   </div>
 {% endblock %}
diff --git a/themes/vocabulary_theme/templates/macros/pagination.html b/themes/vocabulary_theme/templates/macros/pagination.html
index c17dbe1b7..412e2910b 100644
--- a/themes/vocabulary_theme/templates/macros/pagination.html
+++ b/themes/vocabulary_theme/templates/macros/pagination.html
@@ -1,21 +1,27 @@
 {% macro render_pagination(pagination) %}
-  <ul class="pagination table-responsive mb-2">
-    {% if pagination.has_prev %}
-      <li class="page-item"><a class="page-link" href="{{ pagination.prev|url }}">Previous</a></li>
-    {% else %}
-      <li class="page-item disabled"><a class="page-link">Previous</a></li>
-    {% endif %}
-    {% for p in range(pagination.pages) %}
-      {% if pagination.current|url == pagination.for_page(p+1)|url %}
-        <li class="page-item active"><a class="page-link" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a></li>
+  <nav class="pagination" role="navigation" aria-label="pagination">
+    <ul class="pagination-list">
+      <!-- {% if pagination.has_prev %}
+        <li class="page-item"><a class="page-link" href="{{ pagination.prev|url }}">Previous</a></li>
       {% else %}
-        <li class="page-item"><a class="page-link" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a></li>
-      {% endif %}
-    {% endfor %}
-    {% if pagination.has_next %}
-      <li class="page-item"><a class="page-link" href="{{ pagination.next|url }}">Next</a></li>
-    {% else %}
-      <li class="page-item disabled"><a class="page-link">Next</a></li>
-    {% endif %}
-  </ul>
+        <li class="page-item disabled"><a class="page-link">Previous</a></li>
+      {% endif %} -->
+      {% for p in range(pagination.pages) %}
+        {% if pagination.current|url == pagination.for_page(p+1)|url %}
+          <li class="common">
+            <a class="pagination-link is-current common-link" aria-label="Goto page {{p+1}}" aria-current="page" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a>
+          </li>
+        {% else %}
+          <li class="inactive">
+            <a class="pagination-link inactive-link" aria-label="Goto page {{p+1}}" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+      <!-- {% if pagination.has_next %}
+        <li class="page-item"><a class="page-link" href="{{ pagination.next|url }}">Next</a></li>
+      {% else %}
+        <li class="page-item disabled"><a class="page-link">Next</a></li>
+      {% endif %} -->
+    </ul>
+  </nav>
 {% endmacro %}
diff --git a/themes/vocabulary_theme/templates/macros/posts.html b/themes/vocabulary_theme/templates/macros/posts.html
index d597d94b1..d450bbc93 100644
--- a/themes/vocabulary_theme/templates/macros/posts.html
+++ b/themes/vocabulary_theme/templates/macros/posts.html
@@ -1,7 +1,7 @@
 {% from "macros/author_name.html" import render_author_name %}
 
 {% macro render_posts(posts) %}
-  <div class="columns is-multiline">
+  <div class="columns is-multiline blog-entries">
     {% for post in posts %}
       {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
       <article class="card entry-post horizontal no-border blog-entry column is-one-third">
@@ -19,7 +19,6 @@
           <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
           <span class="blog-author">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
           on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
-          <!-- TODO : Discuss how to extract an excerpt -->
           <div class="excerpt">
             {{ post.body | excerpt | string | striptags() | truncate(100) }}
           </div>
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index a6522caf8..dea940846 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -103,22 +103,30 @@ a {
   }
 }
 
-.blog-entry {
-  @extend  .padding-big;
+.blog-entries {
+  .blog-entry {
+    @extend .padding-vertical-larger;
+    @extend .padding-horizontal-big;
+
+    border-bottom: 0.1875rem solid $color-light-gray !important;
 
-  .blog-title {
-    @extend .has-color-dark-slate-gray;
+    .blog-title {
+      @extend .has-color-dark-slate-gray;
+    }
   }
 }
 
 .blog-page {
   .blog-page-header {
-    @extend .padding-horizontal-big;
     @extend .padding-top-bigger;
     @extend .padding-bottom-xl;
 
     background-color: $color-lighter-gray;
 
+    .container {
+      @extend .padding-horizontal-big;
+    }
+
     .blog-page-description {
       @extend .padding-top-normal;
       @extend .body-big;
@@ -126,7 +134,12 @@ a {
   }
 
   .blog-page-posts {
-    @extend .padding-vertical-xl;
+    @extend .padding-top-normal;
+
+    .pagination-wrapper {
+      @extend .padding-top-xl;
+      @extend .padding-bottom-xxl;
+    }
   }
 }
 

From 98ba32dd3b14fe98c27ee859cec901f23351ce79 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Sat, 4 Jul 2020 01:24:55 +0530
Subject: [PATCH 08/13] update all categories page

---
 .../templates/blog-categories.html              | 14 ++++++++++----
 .../templates/macros/categories.html            |  4 +---
 webpack/sass/main.scss                          | 17 +++++++++++++++++
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/themes/vocabulary_theme/templates/blog-categories.html b/themes/vocabulary_theme/templates/blog-categories.html
index 2b5ee8f0a..c4dfe4eb6 100644
--- a/themes/vocabulary_theme/templates/blog-categories.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/macros/categories.html b/themes/vocabulary_theme/templates/macros/categories.html
index 0a67788ee..360b715e3 100644
--- a/themes/vocabulary_theme/templates/macros/categories.html
+++ b/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 %}
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index ca5c9b241..a9daa7e5d 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -223,3 +223,20 @@ a {
     @extend .padding-bottom-xxl;
   }
 }
+
+.all-categories {
+  .title {
+    background-color: $color-lighter-gray;
+
+    .container {
+      @extend .padding-horizontal-big;
+      @extend .padding-bottom-xl;
+    }
+  }
+
+  .categories-list {
+    @extend .padding-horizontal-big;
+    @extend .padding-top-xl;
+    @extend .padding-bottom-xxl;
+  }
+}

From d0b6308b750ca249a267ffa5d4384704f0c5234d Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Sat, 4 Jul 2020 02:14:49 +0530
Subject: [PATCH 09/13] update all series page

---
 .../templates/blog-series-list.html           | 16 ++++++---
 .../templates/macros/series.html              |  7 ++++
 webpack/sass/main.scss                        | 35 +++++++++++++++++++
 3 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 themes/vocabulary_theme/templates/macros/series.html

diff --git a/themes/vocabulary_theme/templates/blog-series-list.html b/themes/vocabulary_theme/templates/blog-series-list.html
index 64097ab31..7bdd92a7f 100644
--- a/themes/vocabulary_theme/templates/blog-series-list.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/macros/series.html b/themes/vocabulary_theme/templates/macros/series.html
new file mode 100644
index 000000000..87b77b8b1
--- /dev/null
+++ b/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 %}
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index ca5c9b241..60cbf72e4 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -223,3 +223,38 @@ 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;
+      }
+    }
+  }
+}

From 28803c8fe13fa82687ddf2518f20db59a27bc8b5 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Tue, 7 Jul 2020 01:49:12 +0530
Subject: [PATCH 10/13] fix title issue

---
 webpack/sass/main.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 331e77621..0f73220cc 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -70,6 +70,8 @@ a {
     .container {
       @extend .padding-horizontal-bigger;
 
+      word-wrap: break-word;
+
       .description {
         @extend .body-bigger;
         @extend .padding-top-small;

From 34273eb1023200200f35d38e727183aea2f33019 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Tue, 7 Jul 2020 19:10:04 +0530
Subject: [PATCH 11/13] fix the no picture problem

---
 .../templates/blog-categories.html            | 14 +++--
 .../templates/blog-series-list.html           | 16 ++++--
 .../templates/macros/categories.html          |  4 +-
 .../templates/macros/posts.html               | 11 ++--
 .../templates/macros/series.html              |  7 +++
 webpack/sass/main.scss                        | 53 +++++++++++++++++++
 6 files changed, 88 insertions(+), 17 deletions(-)
 create mode 100644 themes/vocabulary_theme/templates/macros/series.html

diff --git a/themes/vocabulary_theme/templates/blog-categories.html b/themes/vocabulary_theme/templates/blog-categories.html
index 2b5ee8f0a..c4dfe4eb6 100644
--- a/themes/vocabulary_theme/templates/blog-categories.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/blog-series-list.html b/themes/vocabulary_theme/templates/blog-series-list.html
index 64097ab31..7bdd92a7f 100644
--- a/themes/vocabulary_theme/templates/blog-series-list.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/macros/categories.html b/themes/vocabulary_theme/templates/macros/categories.html
index 0a67788ee..360b715e3 100644
--- a/themes/vocabulary_theme/templates/macros/categories.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/macros/posts.html b/themes/vocabulary_theme/templates/macros/posts.html
index d450bbc93..b253e8386 100644
--- a/themes/vocabulary_theme/templates/macros/posts.html
+++ b/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">
diff --git a/themes/vocabulary_theme/templates/macros/series.html b/themes/vocabulary_theme/templates/macros/series.html
new file mode 100644
index 000000000..87b77b8b1
--- /dev/null
+++ b/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 %}
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index dea940846..64d8680bf 100644
--- a/webpack/sass/main.scss
+++ b/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;
+  }
+}

From c8539f4a54c00b56b3d3b25fb6cbd53f0ae74383 Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Tue, 7 Jul 2020 21:58:41 +0530
Subject: [PATCH 12/13] update hierarchy and merge

---
 models/blog.ini                               |  2 +-
 .../templates/blocks/recent-posts.html        | 38 ++++----
 .../templates/blog-categories.html            | 14 ++-
 .../templates/blog-series-list.html           | 16 +++-
 themes/vocabulary_theme/templates/blog.html   | 22 +++--
 .../templates/macros/categories.html          |  4 +-
 .../templates/macros/pagination.html          | 42 +++++----
 .../templates/macros/posts.html               | 30 ++++--
 .../templates/macros/series.html              |  7 ++
 webpack/sass/main.scss                        | 94 +++++++++++++++++++
 10 files changed, 207 insertions(+), 62 deletions(-)
 create mode 100644 themes/vocabulary_theme/templates/macros/series.html

diff --git a/models/blog.ini b/models/blog.ini
index 5c66499f3..c2520e949 100644
--- a/models/blog.ini
+++ b/models/blog.ini
@@ -19,4 +19,4 @@ order_by = -pub_date, title
 
 [pagination]
 enabled = yes
-per_page = 10
+per_page = 12
diff --git a/themes/vocabulary_theme/templates/blocks/recent-posts.html b/themes/vocabulary_theme/templates/blocks/recent-posts.html
index 0e918ee81..b77273713 100644
--- a/themes/vocabulary_theme/templates/blocks/recent-posts.html
+++ b/themes/vocabulary_theme/templates/blocks/recent-posts.html
@@ -14,26 +14,28 @@ <h4 class="is-paddingless level-left">
       {% for post in site.query('/blog/entries') %}
         {% if loop.index <= 3 %}
           {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
-          <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" />
+          <div class="column is-one-third is-paddingless padding-horizontal-big">
+            <article class="card entry-post horizontal no-border blog-entry">
+              <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" />
+                  {% endif %}
                 {% endif %}
-              {% endif %}
-              </figure>
-            </header>
-            <div class="blog-content">
-              <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
-              <span class="blog-author">by <a class="author-name" href="{{ author|url }}">{{ render_author_name(author) }}</a>
-              on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
-              <div class="excerpt">
-                {{ post.body | excerpt | string | striptags() | truncate(100) }}
+                </figure>
+              </header>
+              <div class="blog-content">
+                <h4 class="b-header"><a class="has-color-dark-slate-gray" href="{{ post|url }}">{{ post.title }}</a></h4>
+                <span class="blog-author">by <a class="author-name" href="{{ author|url }}">{{ render_author_name(author) }}</a>
+                on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
+                <div class="excerpt">
+                  {{ post.body | excerpt | string | striptags() | truncate(100) }}
+                </div>
               </div>
-            </div>
-          </article>
+            </article>
+          </div>
         {% endif %}
       {% endfor %}
     </div>
diff --git a/themes/vocabulary_theme/templates/blog-categories.html b/themes/vocabulary_theme/templates/blog-categories.html
index 2b5ee8f0a..c4dfe4eb6 100644
--- a/themes/vocabulary_theme/templates/blog-categories.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/blog-series-list.html b/themes/vocabulary_theme/templates/blog-series-list.html
index 64097ab31..7bdd92a7f 100644
--- a/themes/vocabulary_theme/templates/blog-series-list.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/blog.html b/themes/vocabulary_theme/templates/blog.html
index 81e041ee9..257c46f77 100644
--- a/themes/vocabulary_theme/templates/blog.html
+++ b/themes/vocabulary_theme/templates/blog.html
@@ -3,11 +3,21 @@
 {% from "macros/pagination.html" import render_pagination %}
 {% from "macros/posts.html" import render_posts %}
 
-{% block title %}{{ this.title }}{% endblock %}
 {% block body %}
-  {{ this.description }}
-  {{ render_posts(this.pagination.items) }}
-  {% if this.pagination.pages > 1 %}
-    {{ render_pagination(this.pagination) }}
-  {% endif %}
+  <div class="blog-page">
+    <div class="blog-page-header">
+      <div class="container">
+        <h1>{{ this.title }}</h1>
+        <div class="blog-page-description column is-9 is-paddingless">{{ this.description }}</div>
+      </div>
+    </div>
+    <div class="container blog-page-posts">
+      {{ render_posts(this.pagination.items) }}
+      <div class="pagination-wrapper">
+        {% if this.pagination.pages > 1 %}
+          {{ render_pagination(this.pagination) }}
+        {% endif %}
+      </div>
+    </div>
+  </div>
 {% endblock %}
diff --git a/themes/vocabulary_theme/templates/macros/categories.html b/themes/vocabulary_theme/templates/macros/categories.html
index 0a67788ee..360b715e3 100644
--- a/themes/vocabulary_theme/templates/macros/categories.html
+++ b/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 %}
diff --git a/themes/vocabulary_theme/templates/macros/pagination.html b/themes/vocabulary_theme/templates/macros/pagination.html
index c17dbe1b7..412e2910b 100644
--- a/themes/vocabulary_theme/templates/macros/pagination.html
+++ b/themes/vocabulary_theme/templates/macros/pagination.html
@@ -1,21 +1,27 @@
 {% macro render_pagination(pagination) %}
-  <ul class="pagination table-responsive mb-2">
-    {% if pagination.has_prev %}
-      <li class="page-item"><a class="page-link" href="{{ pagination.prev|url }}">Previous</a></li>
-    {% else %}
-      <li class="page-item disabled"><a class="page-link">Previous</a></li>
-    {% endif %}
-    {% for p in range(pagination.pages) %}
-      {% if pagination.current|url == pagination.for_page(p+1)|url %}
-        <li class="page-item active"><a class="page-link" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a></li>
+  <nav class="pagination" role="navigation" aria-label="pagination">
+    <ul class="pagination-list">
+      <!-- {% if pagination.has_prev %}
+        <li class="page-item"><a class="page-link" href="{{ pagination.prev|url }}">Previous</a></li>
       {% else %}
-        <li class="page-item"><a class="page-link" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a></li>
-      {% endif %}
-    {% endfor %}
-    {% if pagination.has_next %}
-      <li class="page-item"><a class="page-link" href="{{ pagination.next|url }}">Next</a></li>
-    {% else %}
-      <li class="page-item disabled"><a class="page-link">Next</a></li>
-    {% endif %}
-  </ul>
+        <li class="page-item disabled"><a class="page-link">Previous</a></li>
+      {% endif %} -->
+      {% for p in range(pagination.pages) %}
+        {% if pagination.current|url == pagination.for_page(p+1)|url %}
+          <li class="common">
+            <a class="pagination-link is-current common-link" aria-label="Goto page {{p+1}}" aria-current="page" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a>
+          </li>
+        {% else %}
+          <li class="inactive">
+            <a class="pagination-link inactive-link" aria-label="Goto page {{p+1}}" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+      <!-- {% if pagination.has_next %}
+        <li class="page-item"><a class="page-link" href="{{ pagination.next|url }}">Next</a></li>
+      {% else %}
+        <li class="page-item disabled"><a class="page-link">Next</a></li>
+      {% endif %} -->
+    </ul>
+  </nav>
 {% endmacro %}
diff --git a/themes/vocabulary_theme/templates/macros/posts.html b/themes/vocabulary_theme/templates/macros/posts.html
index 8aa6a0214..b253e8386 100644
--- a/themes/vocabulary_theme/templates/macros/posts.html
+++ b/themes/vocabulary_theme/templates/macros/posts.html
@@ -1,14 +1,30 @@
 {% from "macros/author_name.html" import render_author_name %}
 
 {% macro render_posts(posts) %}
-  <ul class="blog-index list-unstyled">
+  <div class="columns is-multiline blog-entries">
     {% for post in posts %}
       {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
-      <li>
-        <a href="{{ post|url }}">{{ post.title }}</a>
-        <p class="text-muted small">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
-          on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</p>
-      </li>
+      <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" />
+              {% else %}
+                <img class="profile" src="./blank_profile.svg" alt="gravatar" />
+              {% endif %}
+            {% endif %}
+          </figure>
+        </header>
+        <div class="blog-content">
+          <h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
+          <span class="blog-author">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
+          on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
+          <div class="excerpt">
+            {{ post.body | excerpt | string | striptags() | truncate(100) }}
+          </div>
+        </div>
+      </article>
     {% endfor %}
-  </ul>
+  </div>
 {% endmacro %}
diff --git a/themes/vocabulary_theme/templates/macros/series.html b/themes/vocabulary_theme/templates/macros/series.html
new file mode 100644
index 000000000..87b77b8b1
--- /dev/null
+++ b/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 %}
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 0052a7bb5..b67348601 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -131,6 +131,47 @@ a {
   }
 }
 
+.blog-entries {
+  .blog-entry {
+    @extend .padding-vertical-larger;
+    @extend .padding-horizontal-big;
+
+    border-bottom: 0.1875rem solid $color-light-gray !important;
+
+    .blog-title {
+      @extend .has-color-dark-slate-gray;
+    }
+  }
+}
+
+.blog-page {
+  .blog-page-header {
+    @extend .padding-top-bigger;
+    @extend .padding-bottom-xl;
+
+    background-color: $color-lighter-gray;
+
+    .container {
+      @extend .padding-horizontal-big;
+    }
+
+    .blog-page-description {
+      @extend .padding-top-normal;
+      @extend .body-big;
+    }
+  }
+
+  .blog-page-posts {
+    @extend .padding-top-normal;
+
+    .pagination-wrapper {
+      @extend .padding-top-xl;
+      @extend .padding-bottom-xxl;
+    }
+  }
+}
+
+
 .single-post {
   .container {
     @extend .padding-horizontal-xxl;
@@ -251,3 +292,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;
+  }
+}

From 10ba68c14650717fdd79d080555069093f9683cb Mon Sep 17 00:00:00 2001
From: dhruvi16 <dhruvibutti9477@gmail.com>
Date: Wed, 8 Jul 2020 21:47:58 +0530
Subject: [PATCH 13/13] Improve padding

---
 themes/vocabulary_theme/templates/blocks/recent-posts.html | 4 ++--
 webpack/sass/main.scss                                     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/themes/vocabulary_theme/templates/blocks/recent-posts.html b/themes/vocabulary_theme/templates/blocks/recent-posts.html
index b77273713..ca39939dc 100644
--- a/themes/vocabulary_theme/templates/blocks/recent-posts.html
+++ b/themes/vocabulary_theme/templates/blocks/recent-posts.html
@@ -7,14 +7,14 @@ <h4 class="is-paddingless level-left">
         {{ this.title }}
       </h4>
       <span class="level-right">
-        <a class="post-links" href="/blog">See all posts <i class="icon angle-right"></i></a>
+        <a class="posts-link" href="/blog">See all posts <i class="icon angle-right"></i></a>
       </span>
     </div>
     <div class="columns">
       {% for post in site.query('/blog/entries') %}
         {% if loop.index <= 3 %}
           {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
-          <div class="column is-one-third is-paddingless padding-horizontal-big">
+          <div class="column is-one-third is-paddingless padding-horizontal-big padding-top-bigger">
             <article class="card entry-post horizontal no-border blog-entry">
               <header>
                 <figure class="image blog-image">
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
index 9968c0203..94aebad52 100644
--- a/webpack/sass/main.scss
+++ b/webpack/sass/main.scss
@@ -125,12 +125,12 @@ a {
     @extend .padding-horizontal-big;
 
     .columns {
-      @extend .padding-top-larger;
+      @extend .padding-top-bigger;
       @extend .padding-bottom-xl;
     }
   }
 
-  .post-links {
+  .posts-link {
     @extend .has-color-forest-green;
     @extend .body-normal;