From 1960b3cb8d69e0a1a3330331b52a10907652e035 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 10 Jun 2020 01:58:19 +0100
Subject: [PATCH 01/22] Fixing search bar on mobile

---
 src/scss/search-bar.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scss/search-bar.scss b/src/scss/search-bar.scss
index 8a4cef3..99fe2be 100644
--- a/src/scss/search-bar.scss
+++ b/src/scss/search-bar.scss
@@ -3,7 +3,7 @@ form#search-form {
     margin-top: 2px;
 
     & input {
-        width: 80%;
+        width: 79%;
         padding-top: 10px;
     }
 
@@ -20,3 +20,7 @@ form#search-form {
 form.form-single {
     width: 80% !important;
 }
+
+.input-group {
+    width: 20% !important;
+}

From b6ebe66d34472fc76ece02cccd9e5d73cd24c5e7 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 10 Jun 2020 01:58:29 +0100
Subject: [PATCH 02/22] Updating TOC

---
 src/scss/toc.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/toc.scss b/src/scss/toc.scss
index 1ee7b75..8ff5ed5 100644
--- a/src/scss/toc.scss
+++ b/src/scss/toc.scss
@@ -2,7 +2,7 @@ div.toc-sidebar {
     position: fixed;
     right: 0;
     // background-color: rgb(245,245,245);
-    background: repeating-linear-gradient(135deg, rgba(128, 50, 50, 0.05), rgba(160, 60, 60, 0.05) 5px, rgba(0,0,0,0) 5px, rgba(0,0,0,0) 10px);
+    background: repeating-linear-gradient(135deg, rgba(128, 50, 50, 0.025), rgba(160, 60, 60, 0.025) 5px, rgba(0,0,0,0) 5px, rgba(0,0,0,0) 10px);
     height: 100%;
     margin-top: -500%;
     padding-top: 500%;

From 536a54e4007bec4eda55991e03d783aaa248a79e Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 10 Jun 2020 01:58:47 +0100
Subject: [PATCH 03/22] Adding cards

---
 layouts/post/card-large.html | 38 +++++++++++++++++++++++++++
 layouts/post/card.html       | 24 +++++++----------
 src/scss/cards.scss          | 51 ++++++++++++++++++++++++++++++++++++
 src/scss/styles.scss         |  1 +
 4 files changed, 99 insertions(+), 15 deletions(-)
 create mode 100644 layouts/post/card-large.html
 create mode 100644 src/scss/cards.scss

diff --git a/layouts/post/card-large.html b/layouts/post/card-large.html
new file mode 100644
index 0000000..26d4d57
--- /dev/null
+++ b/layouts/post/card-large.html
@@ -0,0 +1,38 @@
+<div class="d-flex justify-content-center align-items-center py-md-4 card-large">
+    {{ $page:= . }}
+    {{- with .Resources.Match "images/banner.svg" -}}
+    {{ range . }}
+    {{- $image := . -}}
+    <div class="col-md-6 card-large-image" style="background-image: url('{{ $image.RelPermalink }}');">
+        <!-- <a href="{{ $page.RelPermalink }}" class="d-block">
+            <img data-src="{{ $image.RelPermalink }}" class="" alt="{{ $page.Title }}" data-aos="zoom-in" style="">
+        </a> -->
+        <div style="background-image: url('{{ $image.RelPermalink }}')"></div>
+        {{- end -}}
+        {{- end -}}
+    </div>
+    <div class="col-md-6">
+        <div class="d-flex justify-content-between align-items-start">
+            <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
+            <p class="text-muted">{{ $page.ReadingTime }} min read</p>
+        </div>
+        <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+
+        <div class="content">
+            {{ $page.Summary }}
+        </div>
+        <div>
+            {{- with $page.Params.tags -}}
+            <div class="d-flex justify-content-start">
+                <div class="tags">
+                    {{- range . -}}
+                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                        <i class="fas fa-tag mr-2"></i>{{ . }}
+                    </a>
+                    {{- end -}}
+                </div>
+            </div>
+            {{- end -}}
+        </div>
+    </div>
+</div>
diff --git a/layouts/post/card.html b/layouts/post/card.html
index b2a7076..9d6c4fc 100644
--- a/layouts/post/card.html
+++ b/layouts/post/card.html
@@ -1,18 +1,12 @@
-<div class="card h-100" data-aos="zoom-in">
+<div class="d-flex">
     {{ $page := . }}
-    <a href="{{ $page.RelPermalink }}" class="d-block">
-                {{- with .Resources.Match "images/banner.svg" -}}
-                {{ range . }}
-                    {{- $image := . -}}
-                    <img data-src="{{ $image.RelPermalink }}" class="card-img-top mx-auto d-block pt-2" alt="{{ $page.Title }}">
-                {{- end -}}
-            {{- end -}}
-        <div class="card-body">
-            <h4 class="card-title">{{ $page.Title }}</h4>
-            <p class="card-text text-muted text-uppercase">{{ $page.Date.Format "January 2, 2006" }}</p>
-            <div class="card-text">
-                {{ $page.Summary | plainify }}
-            </div>
+    {{- with .Resources.Match "images/banner.svg" -}}
+    {{ range . }}
+    {{- $image := . -}}
+    <div class="card-large-image" style="background-image: url('{{ $image.RelPermalink }}');">
+        <div style="background-image: url('{{ $image.RelPermalink }}')">
         </div>
-    </a>
+    </div>
+    {{- end -}}
+    {{- end -}}
 </div>
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
new file mode 100644
index 0000000..2d2bce2
--- /dev/null
+++ b/src/scss/cards.scss
@@ -0,0 +1,51 @@
+.card-large, .card-regular {
+    background-color: white;
+    z-index: 1;
+    border: 1px solid rgb(204, 18, 18);
+    border-top-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-right-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-right-style: solid;
+    border-right-width: 1px;
+    border-bottom-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-left-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-image-source: initial;
+    border-image-slice: initial;
+    border-image-width: initial;
+    border-image-outset: initial;
+    border-image-repeat: initial;
+    border-radius: .45rem;
+    border-top-left-radius: 0.45rem;
+    border-top-right-radius: 0.45rem;
+    border-bottom-right-radius: 0.45rem;
+    border-bottom-left-radius: 0.45rem;
+    -webkit-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    -moz-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    transition-property: all;
+    transition-duration: 1s;
+    overflow: hidden;
+
+    &:hover {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -moz-transform: translate(-2px, -2px);
+    -ms-transform: translate(-2px, -2px);
+    -o-transform: translate(-2px, -2px);
+    -webkit-transform: translate(-2px, -2px);
+    transform: translate(-2px, -2px);
+    }
+
+    & .card-large-image {
+        height: 250%;
+        background-position: center;
+        background-size: cover;
+        overflow: hidden;
+    }
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 6759daf..c19bd93 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -8,4 +8,5 @@
 @import "toc";
 @import "scroll-bar";
 @import "admonition-icons";
+@import "cards";
 @import "fonts";

From f5c15abac5072eab11a358a6f88aad0bf00f20d5 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 10 Jun 2020 01:59:00 +0100
Subject: [PATCH 04/22] Adding pagination to list of posts

---
 layouts/post/list.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 layouts/post/list.html

diff --git a/layouts/post/list.html b/layouts/post/list.html
new file mode 100644
index 0000000..ad894a0
--- /dev/null
+++ b/layouts/post/list.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+<main class="list container pt-7 pb-5>">
+    <div class="row">
+        <div class="col-12 col-md-8">
+            <h1>All Posts</h1>
+        </div>
+    </div>
+    <div class="row row-cols-1 row-cols-md-3">
+        {{ $paginator := .Paginate (where .Pages "Type" "post") }}
+        {{ range $paginator.Pages }}
+        {{ .Render "card" }}
+        {{ end }}
+    </div>
+    <div class="d-flex justify-content-center pt-5">
+        {{ template "_internal/pagination.html" . }}
+    </div>
+</main>
+{{ end }}

From 8877a9e4f4e675f5f9a6c43ef99991b9f9ef663c Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 10 Jun 2020 01:59:16 +0100
Subject: [PATCH 05/22] Fixing searchbar on mobile

---
 layouts/partials/header.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 27ceffa..96533d2 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,6 @@
 {{ $current := . }}
 <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" id="navbar-main-menu">
     <div class="container">
-
         <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="/images/icons/Gods.png" width="50" height="50" class="mr-3 rotate-a-20" id="navbar-brand-image" />{{ .Site.Title }}</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -16,10 +15,10 @@
                 <li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
                 {{ end }}
                 {{ end }}
-                <li class="nav-item" id="nav-search">
+                <li class="nav-item d-none d-md-block" id="nav-search">
                     <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
                         <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
-                        <div class="input-group">
+                        <div class="input-group ">
                             <div class="input-group-append">
                                 <!-- <div> -->
                                 <button type="submit" id="search-button" class="btn btn-primary"> <i class="fa fa-search fa-sm"></i></button>

From 5312ff8f52565a41e8b0fd86a533cb23b9339e6d Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 10 Jun 2020 01:59:28 +0100
Subject: [PATCH 06/22] Updating latest

---
 data/panaetius-theme/assets.json |  2 +-
 layouts/_default/list.html       | 14 +++--
 layouts/index.html               | 88 ++++++++++++++------------------
 layouts/post/single.html         |  2 +-
 layouts/search/single.html       |  1 -
 5 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index cc2c8b4..2f6bf5f 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.056eb67e3d086eb33a6f.min.css",
+    "css": "main.fe1e79a2ceb1a3e11a99.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 806c57b..20c97f1 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -15,10 +15,18 @@
 
     <div class="row row-cols-1 row-cols-lg-3">
         {{ range .Pages }}
-            <div class="col mb-3">
-                {{ .Render "card" }}
-            </div>
+        <div class="col mb-3">
+            {{ .Render "card" }}
+        </div>
         {{ end }}
     </div>
+    <div class="row">
+        {{ $paginator := .Paginate (where .Pages "Type" "post") }}
+        {{ range $paginator.Pages }}
+        {{.}}
+        {{ end }}
+        {{ template "_internal/pagination.html" . }}
+
+    </div>
 </main>
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 733e1b9..871be8d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,62 +1,52 @@
 {{ define "main" }}
 <img src="/images/front-wallpaper.svg" class="front-background">
 <main class="homepage container py-6">
-        <div class="hero row pt-3 pt-md-6">
-            <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
-                <div>
-                    <h1 class="display-4">{{ .Site.Title }}</h1>
-                    {{- with .Site.Params.description -}}
-                </div>
-                <div>
-                    <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
-                    {{- end -}}
-                </div>
+    <div class="hero row pt-3 pt-md-6">
+        <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
+            <div>
+                <h1 class="display-4">{{ .Site.Title }}</h1>
+                {{- with .Site.Params.description -}}
             </div>
-            <div class="col-0 col-md-6 d-flex">
-                {{- with .Site.Params.homepageImage -}}
-                {{/*  <div class="homepage-image" data-aos="zoom-in">  */}}
-                <div class="homepage-image d-none d-sm-block">
-                    <img data-src="{{ . | relURL }}" class="img-fluid">
-                </div>
+            <div>
+                <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
                 {{- end -}}
             </div>
         </div>
-        <div class="row">
-
-            <!-- Latest article -->
-            {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
-            {{ $page := . }}
-            <div class="latest row py-lg-5">
-                <div class="col-lg-6 mb-3">
-                    {{- with .Resources.Match "images/banner.svg" -}}
-                    {{ range . }}
-                    {{- $image := . -}}
-                    <a href="{{ $page.RelPermalink }}" class="d-block">
-                        <img data-src="{{ $image.RelPermalink }}" class="img-fluid rounded" alt="{{ $page.Title }}" data-aos="zoom-in">
-                    </a>
-                    {{- end -}}
-                    {{- end -}}
-                </div>
-                <div class="col-lg-6 mb-3">
-                    <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
-                    <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
-
-                    <div class="content">
-                        {{ $page.Summary }}
-                    </div>
-                </div>
+        <div class="col-0 col-md-6 d-flex">
+            {{- with .Site.Params.homepageImage -}}
+            {{/*  <div class="homepage-image" data-aos="zoom-in">  */}}
+            <div class="homepage-image d-none d-sm-block">
+                <img data-src="{{ . | relURL }}" class="img-fluid">
             </div>
             {{- end -}}
-
-            <!-- Articles -->
-            <div class="articles row row-cols-1 row-cols-lg-3">
-                {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
-                <div class="col mb-3" data-aos="zoom-in">
-                    {{ .Render "card" }}
-                </div>
-                {{ end }}
-            </div>
         </div>
     </div>
+    <div class="row">
+
+        <!-- Latest article -->
+        {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
+        <!-- <div class="latest row py-lg-5"> -->
+        <div class="latest row py-lg-5">
+            {{ .Render "card-large" }}
+        </div>
+        {{- end -}}
+
+        <!-- Articles -->
+        <div class="articles row row-cols-1 row-cols-lg-3">
+            {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
+            <div class="col mb-3" data-aos="zoom-in">
+                {{ .Render "card" }}
+            </div>
+            {{ end }}
+        </div>
+    </div>
+    <div class="row">
+        <div class="col d-flex justify-content-center text-center">
+            <a href="/post">
+                <button type="button" class="btn btn-lg btn-outline-primary">See all posts</button>
+            </a>
+        </div>
+    </div>
+
 </main>
 {{ end }}
diff --git a/layouts/post/single.html b/layouts/post/single.html
index d5674ee..27e31a7 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -23,7 +23,7 @@
                             <div>{{ partial "authors.html" $page }}</div>
                             <div class="meta text-muted mb-3 d-flex flex-column justify-content-start">
                                 <div>
-                                    <p class="text-muted">Posted on:</p>
+                                    <p class="text-muted">Posted on</p>
                                 </div>
                                 <div>
                                     <p class="created text-muted text-uppercase font-weight-bold mb-1">{{ $page.Date.Format "January 2, 2006" }}</p>
diff --git a/layouts/search/single.html b/layouts/search/single.html
index e5b7fc8..4db7c2d 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -42,7 +42,6 @@
         {{ $post := dict "link" .RelPermalink "author" (index .Params.authors 0) "tags" .Params.tags "title" .Title "date" (.Params.date.Format "January 2, 2006") "image" ($.Scratch.Get "image") "content" (substr .Plain 0 200) -}}
         {{ $p = $p | append $post -}}
         {{ end }}
-        {{ $p | jsonify }}
     </div>
     <script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script>
     <script>

From 4c6e97ff5e56e123af6ed2d61bd404c9837e8548 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 11 Jun 2020 02:13:06 +0100
Subject: [PATCH 07/22] Updating latest

---
 data/panaetius-theme/assets.json |  2 +-
 layouts/index.html               | 70 ++++++++++++++++++--------------
 layouts/partials/header.html     |  3 +-
 layouts/post/card-large.html     |  4 +-
 layouts/post/card-start.html     | 17 ++++++++
 layouts/post/card.html           | 25 ++++++++++--
 src/scss/cards.scss              | 70 +++++++++++++++++++++++++-------
 7 files changed, 140 insertions(+), 51 deletions(-)
 create mode 100644 layouts/post/card-start.html

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index 2f6bf5f..938effe 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.fe1e79a2ceb1a3e11a99.min.css",
+    "css": "main.cdd48a316d2fd0c38b94.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/index.html b/layouts/index.html
index 871be8d..1a78c53 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,42 +1,52 @@
 {{ define "main" }}
 <img src="/images/front-wallpaper.svg" class="front-background">
-<main class="homepage container py-6">
-    <div class="hero row pt-3 pt-md-6">
-        <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
-            <div>
-                <h1 class="display-4">{{ .Site.Title }}</h1>
-                {{- with .Site.Params.description -}}
-            </div>
-            <div>
-                <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
+<main class="homepage py-6">
+    <div class="container">
+        <div class="hero row pt-3 pt-md-6">
+            <div class="col-12 col-md-6 d-flex flex-column justify-content-center text-center text-md-left">
+                <div>
+                    <h1 class="display-4">{{ .Site.Title }}</h1>
+                </div>
+                {{- with .Site.Params.homepageImage -}}
+                <div class="homepage-image d-xs-block d-md-none pb-4">
+                    <img data-src="{{ . | relURL }}" class="img-fluid">
+                </div>
                 {{- end -}}
+                <div>
+                    {{- with .Site.Params.description -}}
+                    <h3 class="font-weight-normal">{{ . | safeHTML }}</h3>
+                    {{- end -}}
+                </div>
+            </div>
+            <div class="col-12 col-md-6 d-flex">
+                {{- with .Site.Params.homepageImage -}}
+                <div class="homepage-image d-none d-sm-block">
+                    <img data-src="{{ . | relURL }}" class="img-fluid">
+                </div>
+                {{- end -}}
+
             </div>
         </div>
-        <div class="col-0 col-md-6 d-flex">
-            {{- with .Site.Params.homepageImage -}}
-            {{/*  <div class="homepage-image" data-aos="zoom-in">  */}}
-            <div class="homepage-image d-none d-sm-block">
-                <img data-src="{{ . | relURL }}" class="img-fluid">
+        <div class="row">
+
+            <!-- Latest article -->
+            {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
+
+            <div class="latest row py-lg-5">
+                {{ .Render "card-large" }}
             </div>
             {{- end -}}
+
         </div>
     </div>
-    <div class="row">
-
-        <!-- Latest article -->
-        {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
-        <!-- <div class="latest row py-lg-5"> -->
-        <div class="latest row py-lg-5">
-            {{ .Render "card-large" }}
-        </div>
-        {{- end -}}
-
-        <!-- Articles -->
-        <div class="articles row row-cols-1 row-cols-lg-3">
-            {{ range after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
-            <div class="col mb-3" data-aos="zoom-in">
-                {{ .Render "card" }}
-            </div>
+    <!-- <div class="container-fluid" style="padding-left: 15%; padding-right: 15%;"> -->
+    <div class="container">
+        <div class="row d-flex justify-content-center justify-content-md-between align-content-between">
+            {{ range first 1 (after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
+            {{ .Render "card" }}
+            {{ end }}
+            {{ range first 2 (after 2 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
+            {{ .Render "card" }}
             {{ end }}
         </div>
     </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 96533d2..c8def1f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -15,7 +15,8 @@
                 <li class="nav-item{{ if or (eq $current.URL .URL) ($current.HasMenuCurrent "main" .) }} active{{ end }}"><a class="nav-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
                 {{ end }}
                 {{ end }}
-                <li class="nav-item d-none d-md-block" id="nav-search">
+                <li class="nav-item" id="nav-search">
+                <!-- <li class="nav-item d-none d-md-block" id="nav-search"> -->
                     <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
                         <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
                         <div class="input-group ">
diff --git a/layouts/post/card-large.html b/layouts/post/card-large.html
index 26d4d57..177a6cc 100644
--- a/layouts/post/card-large.html
+++ b/layouts/post/card-large.html
@@ -16,10 +16,10 @@
             <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
             <p class="text-muted">{{ $page.ReadingTime }} min read</p>
         </div>
-        <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+        <h2><a class="card-title-gray" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
 
         <div class="content">
-            {{ $page.Summary }}
+            {{ $page.Summary | truncate 200 }}
         </div>
         <div>
             {{- with $page.Params.tags -}}
diff --git a/layouts/post/card-start.html b/layouts/post/card-start.html
new file mode 100644
index 0000000..66929a7
--- /dev/null
+++ b/layouts/post/card-start.html
@@ -0,0 +1,17 @@
+<div class="d-flex flex-column card-regular col-md-3 my-2 my-md-5 px-0" style="height: 500px; overflow: hidden;">
+    {{ $page := . }}
+    {{- with .Resources.Match "images/banner.svg" -}}
+    {{ range . }}
+    {{- $image := . -}}
+    <div style="height: 60%; overflow: hidden;">
+        <div class="ma-0 pa-0" style="background-image: url('{{ $image.RelPermalink }}'); background-position: center; background-size: cover; height: 250%;">
+        </div>
+    </div>
+    {{- end -}}
+    {{- end -}}
+    <div class="mx-3 my-3">
+        <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
+        <p class="text-muted">{{ $page.ReadingTime }} min read</p>
+    </div>
+</div>
+
diff --git a/layouts/post/card.html b/layouts/post/card.html
index 9d6c4fc..704dc46 100644
--- a/layouts/post/card.html
+++ b/layouts/post/card.html
@@ -1,12 +1,31 @@
-<div class="d-flex">
+<div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 px-0">
     {{ $page := . }}
     {{- with .Resources.Match "images/banner.svg" -}}
     {{ range . }}
     {{- $image := . -}}
-    <div class="card-large-image" style="background-image: url('{{ $image.RelPermalink }}');">
-        <div style="background-image: url('{{ $image.RelPermalink }}')">
+    <div class="card-regular-image-parent">
+        <div class="ma-0 pa-0 card-regular-image" style="background-image: url('{{ $image.RelPermalink }}');">
         </div>
     </div>
     {{- end -}}
     {{- end -}}
+    <div class="mx-3 my-3">
+        <h5 class="created text-muted text-uppercase font-weight-bold mb-0">{{ $page.Date.Format "January 2, 2006" }}</h5>
+        <p class="text-muted">{{ $page.ReadingTime }} min read</p>
+        <h2><a class="card-title-gray" href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+        <p>{{ $page.Summary | truncate 200 }}</p>
+        <div>
+            {{- with $page.Params.tags -}}
+            <div class="d-flex justify-content-start">
+                <div class="tags">
+                    {{- range . -}}
+                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                        <i class="fas fa-tag mr-2"></i>{{ . }}
+                    </a>
+                    {{- end -}}
+                </div>
+            </div>
+            {{- end -}}
+        </div>
+    </div>
 </div>
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index 2d2bce2..2738d54 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -1,4 +1,10 @@
-.card-large, .card-regular {
+@mixin image-zoom {
+    background-position: center;
+    background-size: cover;
+    overflow: hidden;
+}
+
+@mixin card-border {
     background-color: white;
     z-index: 1;
     border: 1px solid rgb(204, 18, 18);
@@ -24,28 +30,64 @@
     border-top-right-radius: 0.45rem;
     border-bottom-right-radius: 0.45rem;
     border-bottom-left-radius: 0.45rem;
-    -webkit-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
-    -moz-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
-    box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    -webkit-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
+    -moz-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
+    box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
     transition-property: all;
     transition-duration: 1s;
     overflow: hidden;
 
     &:hover {
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-    -moz-transform: translate(-2px, -2px);
-    -ms-transform: translate(-2px, -2px);
-    -o-transform: translate(-2px, -2px);
-    -webkit-transform: translate(-2px, -2px);
-    transform: translate(-2px, -2px);
+        -webkit-box-shadow: none;
+        -moz-box-shadow: none;
+        box-shadow: none;
+        -moz-transform: translate(-2px, -2px);
+        -ms-transform: translate(-2px, -2px);
+        -o-transform: translate(-2px, -2px);
+        -webkit-transform: translate(-2px, -2px);
+        transform: translate(-2px, -2px);
     }
+}
+
+.card-title-gray {
+    color: $text-gray !important;
+}
+
+.card-large {
+    @include card-border;
 
     & .card-large-image {
         height: 250%;
-        background-position: center;
-        background-size: cover;
+        @include image-zoom;
+    }
+
+
+}
+
+.card-regular {
+    @include card-border;
+    min-height: 600px;
+
+    & .card-regular-image {
+        @include image-zoom;
+        height: 150%;
+        background-size: initial;
+    }
+
+    & .card-regular-image-parent {
+        height: 40%;
         overflow: hidden;
     }
 }
+
+@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
+    .card-regular-width {
+        width: 30%;
+    }
+}
+
+@media only screen and (max-width: map-get($grid-breakpoints, "md")) {
+    .card-regular-width {
+        width: 80%
+    }
+}

From bd8888720f3e0cba72aa331dde208c0e49d18ef3 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 11 Jun 2020 14:26:55 +0100
Subject: [PATCH 08/22] Finishing card layout

---
 data/panaetius-theme/assets.json | 2 +-
 layouts/index.html               | 5 +----
 layouts/post/card.html           | 4 ++--
 src/scss/cards.scss              | 4 ++--
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index 938effe..cc0bfe4 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.cdd48a316d2fd0c38b94.min.css",
+    "css": "main.9098d523cee24093a1f2.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/index.html b/layouts/index.html
index 1a78c53..1003822 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -42,10 +42,7 @@
     <!-- <div class="container-fluid" style="padding-left: 15%; padding-right: 15%;"> -->
     <div class="container">
         <div class="row d-flex justify-content-center justify-content-md-between align-content-between">
-            {{ range first 1 (after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
-            {{ .Render "card" }}
-            {{ end }}
-            {{ range first 2 (after 2 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
+            {{ range first 3 (after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
             {{ .Render "card" }}
             {{ end }}
         </div>
diff --git a/layouts/post/card.html b/layouts/post/card.html
index 704dc46..9cff82c 100644
--- a/layouts/post/card.html
+++ b/layouts/post/card.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 px-0">
+<div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 px-0 align-items-stretch">
     {{ $page := . }}
     {{- with .Resources.Match "images/banner.svg" -}}
     {{ range . }}
@@ -16,7 +16,7 @@
         <p>{{ $page.Summary | truncate 200 }}</p>
         <div>
             {{- with $page.Params.tags -}}
-            <div class="d-flex justify-content-start">
+            <div class="d-flex justify-content-start align-items-stretch">
                 <div class="tags">
                     {{- range . -}}
                     <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index 2738d54..8320641 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -66,7 +66,7 @@
 
 .card-regular {
     @include card-border;
-    min-height: 600px;
+    // min-height: 700px;
 
     & .card-regular-image {
         @include image-zoom;
@@ -75,7 +75,7 @@
     }
 
     & .card-regular-image-parent {
-        height: 40%;
+        height: 200px;
         overflow: hidden;
     }
 }

From 220801930c7e2fcc046138e91d99c148a477298b Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 11 Jun 2020 23:21:56 +0100
Subject: [PATCH 09/22] Updating latest

Adding cards to search layout
Finishing cards to homepage
---
 data/panaetius-theme/assets.json |  2 +-
 layouts/_default/list.html       |  1 -
 layouts/index.html               | 56 +++++++++++++++++++-------
 layouts/post/list.html           |  2 +-
 layouts/search/single.html       | 68 ++++++++++++++------------------
 layouts/tags/list.html           | 26 ++++++++++++
 src/scss/cards.scss              |  2 +-
 src/scss/panaetius-theme.scss    |  1 -
 8 files changed, 100 insertions(+), 58 deletions(-)
 create mode 100644 layouts/tags/list.html

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index cc0bfe4..7e02739 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.9098d523cee24093a1f2.min.css",
+    "css": "main.8112076fb5e1095426f4.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 20c97f1..3385bae 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -26,7 +26,6 @@
         {{.}}
         {{ end }}
         {{ template "_internal/pagination.html" . }}
-
     </div>
 </main>
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 1003822..81cf6ba 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,7 +9,7 @@
                 </div>
                 {{- with .Site.Params.homepageImage -}}
                 <div class="homepage-image d-xs-block d-md-none pb-4">
-                    <img data-src="{{ . | relURL }}" class="img-fluid">
+                    <img data-src="{{ . | relURL }}" class="img-fluid" data-aos="zoom-in">
                 </div>
                 {{- end -}}
                 <div>
@@ -21,25 +21,29 @@
             <div class="col-12 col-md-6 d-flex">
                 {{- with .Site.Params.homepageImage -}}
                 <div class="homepage-image d-none d-sm-block">
-                    <img data-src="{{ . | relURL }}" class="img-fluid">
+                    <img data-src="{{ . | relURL }}" class="img-fluid" data-aos="zoom-in">
                 </div>
                 {{- end -}}
 
             </div>
         </div>
-        <div class="row">
-
-            <!-- Latest article -->
+    </div>
+    <div class="container">
+        <div class="row d-none d-md-block">
             {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
-
-            <div class="latest row py-lg-5">
+            <div class="latest d-flex py-lg-5">
                 {{ .Render "card-large" }}
             </div>
             {{- end -}}
-
+        </div>
+        <div class="row d-block d-md-none">
+            {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
+            <div class="latest d-flex justify-content-center py-lg-5">
+                {{ .Render "card" }}
+            </div>
+            {{- end -}}
         </div>
     </div>
-    <!-- <div class="container-fluid" style="padding-left: 15%; padding-right: 15%;"> -->
     <div class="container">
         <div class="row d-flex justify-content-center justify-content-md-between align-content-between">
             {{ range first 3 (after 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
@@ -47,13 +51,35 @@
             {{ end }}
         </div>
     </div>
-    <div class="row">
-        <div class="col d-flex justify-content-center text-center">
-            <a href="/post">
-                <button type="button" class="btn btn-lg btn-outline-primary">See all posts</button>
-            </a>
+    <div class="container">
+        <div class="row d-none d-md-block">
+            {{- range first 1 (after 4 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) -}}
+            <div class="latest d-flex py-lg-5">
+                {{ .Render "card-large" }}
+            </div>
+            {{- end -}}
+        </div>
+        <div class="row d-block d-md-none">
+            {{- range first 1 (after 4 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) -}}
+            <div class="latest d-flex justify-content-center py-lg-5">
+                {{ .Render "card" }}
+            </div>
+            {{- end -}}
+        </div>
+    </div>
+    <div class="container">
+        <div class="row d-flex justify-content-center justify-content-md-between align-content-between">
+            {{ range first 3 (after 5 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)) }}
+            {{ .Render "card" }}
+            {{ end }}
+        </div>
+        <div class="row">
+            <div class="col d-flex justify-content-center text-center pt-5">
+                <a href="/post">
+                    <button type="button" class="btn btn-lg btn-outline-primary">See all posts</button>
+                </a>
+            </div>
         </div>
     </div>
-
 </main>
 {{ end }}
diff --git a/layouts/post/list.html b/layouts/post/list.html
index ad894a0..ed08f9b 100644
--- a/layouts/post/list.html
+++ b/layouts/post/list.html
@@ -5,7 +5,7 @@
             <h1>All Posts</h1>
         </div>
     </div>
-    <div class="row row-cols-1 row-cols-md-3">
+    <div class="row d-flex justify-content-center justify-content-md-around">
         {{ $paginator := .Paginate (where .Pages "Type" "post") }}
         {{ range $paginator.Pages }}
         {{ .Render "card" }}
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 4db7c2d..3cf4903 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -19,27 +19,22 @@
                     </form>
                 </div>
             </div>
-            <!-- <div class="search-input-wrap">
-                    <form id="search-form" method="get" action="">
-                        <input id="search" name="q" type="text" />
-                        <br>
-                        <button id="search-button" type="submit" class="button">Search</button>
-                        <a id="search-clear" href="/search/">Clear</a>
-                    </form>
-                </div> -->
             <br>
-            <div id="app-search" class="row listrecent"></div>
+
         </div>
     </div>
-    <div id="app-search" class="row listrecent"></div>
-
+    <div class="">
+    <div id="app-search" class="row d-flex justify-content-center justify-content-md-between align-content-between">
+    </div>
+    </div>
+</div>
 
     <div class="row">
         {{ $p := slice }}
         {{ range (where .Site.RegularPages "Section" "==" "post") }}
         {{ $.Scratch.Set "image" .RelPermalink }}
         {{ $.Scratch.Add "image" (index .Params.images 0) }}
-        {{ $post := dict "link" .RelPermalink "author" (index .Params.authors 0) "tags" .Params.tags "title" .Title "date" (.Params.date.Format "January 2, 2006") "image" ($.Scratch.Get "image") "content" (substr .Plain 0 200) -}}
+        {{ $post := dict "link" .RelPermalink "author" (index .Params.authors 0) "tags" .Params.tags "title" .Title "date" (.Params.date.Format "January 2, 2006") "image" ($.Scratch.Get "image") "content" (substr .Plain 0 200) "readingtime" .ReadingTime -}}
         {{ $p = $p | append $post -}}
         {{ end }}
     </div>
@@ -73,32 +68,29 @@
             console.log(matchPosts[0].tags)
             try {
                 $target.innerHTML = matchPosts.map(p => {
-                    return `<br><div class="col-lg-4 col-md-6 mb-30px card-group">
-            <div class="card h-100">
-                <div class="maxthumb">
-                    <a href="${p.link}">
-                          <img class="img-fluid" src="${p.image}" alt="An thumbnail image.">
-                    </a>
-                </div>
-                <div class="card-body">
-                    <h2 class="card-title"><a class="text-dark" href="${p.link}">${p.title}</a></h2>
-                    <h5 class="card-text">${p.content}...</h5>
-                </div>
-                <div style="padding-right: 10px; padding-left: 10px;" class=>
-                ${
-                  p.tags.map(function (tag) {
-                  return "<span style='white-space: nowrap;'>" + '<i class="fas fa-tag mr-2" style="margin-right: 4px !important; font-size: 0.8em !important;"></i>' + tag + " </span>"}).join('')
-                }
-              </div>
-                    <div class="wrapfooter">
-                        <span class="author-meta">
-                        <span class="post-name"><a href="/author/${p.authorurlized}">${p.author}</a></span><br/>
-                        <span class="post-date">${p.date}</span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>`;
+                    return `
+                    <div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 mx-0 px-0 align-items-stretch">
+                        <div class="card-regular-image-parent">
+                            <div class="ma-0 pa-0 card-regular-image" style="background-image: url('${p.image}');"></div>
+                        </div>
+                        <div class="mx-3 my-3">
+                            <h5 class="created text-muted text-uppercase font-weight-bold mb-0">${p.date}</h5>
+                            <p class="text-muted">${p.readingtime} min read</p>
+                            <h2><a class="card-title-gray" href="${p.link}">${p.title}</a></h2>
+                            <p>${p.content}...</p>
+                            <div>
+                                <div class="d-flex justify-content-start align-items-stretch">
+                                    <div class="tags">
+                                        ${
+                                          p.tags.map(function (tag) {
+                                          return "<a class='badge badge-dark mr-2' href='/tags/" + tag.toLowerCase() +"'>" + "<i class='fas fa-tag mr-2'></i>" + tag + "</a>"
+                                          }).join('')
+                                        }
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>`;
                 }).join('');
             } catch (TypeError) {
                 $target.innerHTML = `<div>No search results found.</div>`;
diff --git a/layouts/tags/list.html b/layouts/tags/list.html
new file mode 100644
index 0000000..1947597
--- /dev/null
+++ b/layouts/tags/list.html
@@ -0,0 +1,26 @@
+{{ define "main" }}
+<main class="list container py-6">
+    {{- if or .Title .Content -}}
+    <div class="row py-3">
+        <div class="col">
+            {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+            {{- with .Content -}}
+            <div class="content">
+                {{ . }}
+            </div>
+            {{- end -}}
+        </div>
+    </div>
+    {{- end -}}
+
+    <div class="row d-flex justify-content-around">
+        {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
+        {{ range $paginator.Pages }}
+        {{ .Render "card" }}
+        {{ end }}
+    </div>
+    <div class="d-flex justify-content-center">
+        {{ template "_internal/pagination.html" . }}
+    </div>
+</main>
+{{ end }}
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index 8320641..b7f336c 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -57,7 +57,7 @@
     @include card-border;
 
     & .card-large-image {
-        height: 250%;
+        height: 150%;
         @include image-zoom;
     }
 
diff --git a/src/scss/panaetius-theme.scss b/src/scss/panaetius-theme.scss
index 48f09ff..1ec90d9 100644
--- a/src/scss/panaetius-theme.scss
+++ b/src/scss/panaetius-theme.scss
@@ -46,7 +46,6 @@ pre code {
     background-color: transparent;
 }
 
-.latest h2 a,
 .navbar a,
 .card>a,
 a.badge {

From 412ab931c34399a3902f3c3cb7861f31988db368 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Mon, 15 Jun 2020 01:35:25 +0100
Subject: [PATCH 10/22] Adding series admonition

---
 data/panaetius-theme/assets.json |  2 +-
 layouts/authors/terms.html       |  2 +-
 layouts/partials/related.html    | 12 ++++-----
 layouts/post/single.html         |  5 +++-
 layouts/series/list.html         | 25 +++++++++++++++++++
 layouts/series/terms.html        | 43 ++++++++++++++++++++++++++++++++
 layouts/shortcodes/img.html      |  2 +-
 layouts/tags/terms.html          |  8 +++---
 src/scss/cards.scss              |  5 ++++
 9 files changed, 89 insertions(+), 15 deletions(-)
 create mode 100644 layouts/series/list.html
 create mode 100644 layouts/series/terms.html

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index 7e02739..e158b3a 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.8112076fb5e1095426f4.min.css",
+    "css": "main.dd57d66cbe4e4a43f89f.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/layouts/authors/terms.html b/layouts/authors/terms.html
index 1268680..d19bcbb 100644
--- a/layouts/authors/terms.html
+++ b/layouts/authors/terms.html
@@ -14,7 +14,7 @@
                     </ul>
                 </div>
                 <ul>
-                    {{ range .Site.Taxonomies.tags }}
+                    {{ range .Site.Taxonomies.series }}
                     <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}</li>
                     {{ end }}
                 </ul>
diff --git a/layouts/partials/related.html b/layouts/partials/related.html
index 391db76..05516e9 100644
--- a/layouts/partials/related.html
+++ b/layouts/partials/related.html
@@ -1,10 +1,8 @@
 {{- $related := .Site.RegularPages.Related . | first 3 -}}
 {{- with $related -}}
-    <div class="related-content row mt-5 row-cols-1 row-cols-lg-5">
-        {{- range . -}}
-            <div class="col mb-3">
-                {{ .Render "card" }}
-            </div>
-        {{- end -}}
-    </div>
+<div class="related-content row d-flex justify-content-around">
+    {{- range . -}}
+    {{ .Render "card" }}
+    {{- end -}}
+</div>
 {{- end -}}
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 27e31a7..e357ccd 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -67,8 +67,12 @@
                     </div>
                 </div>
                 {{- end -}}
+
             </article>
         </div>
+        <div class="col-12 col-lg-9">
+            {{ partial "related.html" $page }}
+        </div>
         <div id="" class="col-lg-2 toc-sidebar d-none d-md-block">
             <aside>
                 <h5 class="text-center text-uppercase">Table of contents</h5>
@@ -82,6 +86,5 @@
         </div>
     </div>
 
-    {{ partial "related.html" $page }}
 </main>
 {{ end }}
diff --git a/layouts/series/list.html b/layouts/series/list.html
new file mode 100644
index 0000000..fb8530a
--- /dev/null
+++ b/layouts/series/list.html
@@ -0,0 +1,25 @@
+{{ define "main" }}
+<main class="list container py-6">
+    {{- if or .Title .Content -}}
+    <div class="row py-3">
+        <div class="col">
+            {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+            {{- with .Content -}}
+            <div class="content">
+                {{ . }}
+            </div>
+            {{- end -}}
+        </div>
+    </div>
+    {{- end -}}
+    <div class="row d-flex justify-content-around">
+        {{ $paginator := .Paginate (where .Pages "Type" "post") }}
+        {{ range $paginator.Pages.ByDate }}
+        {{ .Render "card" }}
+        {{ end }}
+    </div>
+    <div class="row d-flex justify-content-center">
+        {{ template "_internal/pagination.html" . }}
+    </div>
+</main>
+{{ end }}
diff --git a/layouts/series/terms.html b/layouts/series/terms.html
new file mode 100644
index 0000000..c4ce20b
--- /dev/null
+++ b/layouts/series/terms.html
@@ -0,0 +1,43 @@
+{{ define "main" }}
+<main class="list container py-6">
+    {{- if or .Title .Content -}}
+    <div class="row py-3">
+        <div class="col">
+            {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+            {{- with .Content -}}
+            <div class="content">
+                {{ . }}
+            </div>
+            {{- end -}}
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <p>Groups of articles that form a series.</p>
+        </div>
+    </div>
+    {{- end -}}
+    <div class="row row-cols-1 row-cols-lg-3">
+        {{ range $name, $taxonomy := .Site.Taxonomies.series }}
+        <div>
+            <a href="{{ $.Site.BaseURL }}series/{{ $name }}" style="text-decoration: none;">
+                <div class="h-100 card-series">
+                    {{ with $.Site.GetPage (printf "/%s" $name) }}
+                    <div class="card-body d-flex flex-column">
+                        <h5 class="lead" style="margin-bottom: 0px; ">{{ .Params.Title }}</h5>
+                        <p class="text-muted">
+                            {{ len $taxonomy }} articles
+                        </p>
+                        <p class="mb-0">
+                            {{ .Params.Description }}
+                        </p>
+                    </div>
+                    {{ end }}
+                </div>
+        </div>
+        </a>
+    </div>
+    {{ end }}
+    </div>
+</main>
+{{ end }}
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 6d167b9..7bfdf6f 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -1,5 +1,5 @@
 {{ $img := $.Page.Resources.GetMatch (.Get 0)}}
-<figure>
+<figure class="d-flex justify-content-center">
     <img data-src="{{ $img.RelPermalink }}" alt="(.Get 1)" />
     <figcaption>{{.Get 1}}</figcaption>
 </figure>
diff --git a/layouts/tags/terms.html b/layouts/tags/terms.html
index ba98937..4dba934 100644
--- a/layouts/tags/terms.html
+++ b/layouts/tags/terms.html
@@ -14,11 +14,11 @@
     {{- end -}}
     <div class="row row-cols-1 row-cols-lg-3">
         {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
-        <div class="col">
+        <div class="col my-1">
             <a href="{{ $.Site.BaseURL }}tags/{{ $name }}" style="text-decoration: none;">
-                <div class="card h-100" data-aos="zoom-in">
-                    <div class="card-body" data-aos="zoom-in">
-                        <h5 class="lead" style="margin-bottom: 0px; "><i class="fas fa-tag"></i>[{{ len $taxonomy }}] {{ $name }}</h4>
+                <div class="card-regular h-100" >
+                    <div class="card-body" >
+                        <h5 class="lead" style="margin-bottom: 0px; "><i class="fas fa-tag" style="font-size: 0.8em;"></i> {{ $name }}</h4> {{ len $taxonomy }} articles
                     </div>
                 </div>
             </a>
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index b7f336c..11a4186 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -80,6 +80,11 @@
     }
 }
 
+.card-series {
+    @include card-border;
+    color: $text-gray
+}
+
 @media only screen and (min-width: map-get($grid-breakpoints, "md")) {
     .card-regular-width {
         width: 30%;

From 9c394151dc54aba757d3e5993298a6ee79a0d84b Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Tue, 21 Jul 2020 23:27:03 +0100
Subject: [PATCH 11/22] Updating URLs for deployment

Adding trailing '/'
---
 layouts/partials/header.html | 2 +-
 layouts/post/card-large.html | 2 +-
 layouts/post/card.html       | 2 +-
 layouts/post/single.html     | 2 +-
 layouts/search/single.html   | 4 ++--
 layouts/series/terms.html    | 2 +-
 layouts/tags/terms.html      | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c8def1f..32e2c64 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -17,7 +17,7 @@
                 {{ end }}
                 <li class="nav-item" id="nav-search">
                 <!-- <li class="nav-item d-none d-md-block" id="nav-search"> -->
-                    <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
+                    <form id="search-form" method="get" action="/search/" method="POST" class="form-inline">
                         <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
                         <div class="input-group ">
                             <div class="input-group-append">
diff --git a/layouts/post/card-large.html b/layouts/post/card-large.html
index 177a6cc..900f955 100644
--- a/layouts/post/card-large.html
+++ b/layouts/post/card-large.html
@@ -26,7 +26,7 @@
             <div class="d-flex justify-content-start">
                 <div class="tags">
                     {{- range . -}}
-                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">
                         <i class="fas fa-tag mr-2"></i>{{ . }}
                     </a>
                     {{- end -}}
diff --git a/layouts/post/card.html b/layouts/post/card.html
index 9cff82c..72e1c94 100644
--- a/layouts/post/card.html
+++ b/layouts/post/card.html
@@ -19,7 +19,7 @@
             <div class="d-flex justify-content-start align-items-stretch">
                 <div class="tags">
                     {{- range . -}}
-                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">
                         <i class="fas fa-tag mr-2"></i>{{ . }}
                     </a>
                     {{- end -}}
diff --git a/layouts/post/single.html b/layouts/post/single.html
index e357ccd..32b5cdb 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -41,7 +41,7 @@
                     <div class="col-lg-9">
                         <div class="tags my-3">
                             {{- range . -}}
-                            <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                            <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/">
                                 <i class="fas fa-tag mr-2"></i>{{ . }}
                             </a>
                             {{- end -}}
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 3cf4903..db9c1b7 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -10,7 +10,7 @@
         <div class="row">
             <div class="col">
                 <div class="d-flex justify-content-center">
-                    <form id="search-form" method="get" action="/search" method="POST" class="form-inline form-single">
+                    <form id="search-form" method="get" action="/search/" method="POST" class="form-inline form-single">
                         <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
                         <div class="input-group">
                             <div class="input-group-append">
@@ -83,7 +83,7 @@
                                     <div class="tags">
                                         ${
                                           p.tags.map(function (tag) {
-                                          return "<a class='badge badge-dark mr-2' href='/tags/" + tag.toLowerCase() +"'>" + "<i class='fas fa-tag mr-2'></i>" + tag + "</a>"
+                                          return "<a class='badge badge-dark mr-2' href='/tags/" + tag.toLowerCase() +"/'>" + "<i class='fas fa-tag mr-2'></i>" + tag + "</a>"
                                           }).join('')
                                         }
                                     </div>
diff --git a/layouts/series/terms.html b/layouts/series/terms.html
index c4ce20b..9078c0e 100644
--- a/layouts/series/terms.html
+++ b/layouts/series/terms.html
@@ -20,7 +20,7 @@
     <div class="row row-cols-1 row-cols-lg-3">
         {{ range $name, $taxonomy := .Site.Taxonomies.series }}
         <div>
-            <a href="{{ $.Site.BaseURL }}series/{{ $name }}" style="text-decoration: none;">
+            <a href="{{ $.Site.BaseURL }}series/{{ $name }}/" style="text-decoration: none;">
                 <div class="h-100 card-series">
                     {{ with $.Site.GetPage (printf "/%s" $name) }}
                     <div class="card-body d-flex flex-column">
diff --git a/layouts/tags/terms.html b/layouts/tags/terms.html
index 4dba934..85041bd 100644
--- a/layouts/tags/terms.html
+++ b/layouts/tags/terms.html
@@ -15,7 +15,7 @@
     <div class="row row-cols-1 row-cols-lg-3">
         {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
         <div class="col my-1">
-            <a href="{{ $.Site.BaseURL }}tags/{{ $name }}" style="text-decoration: none;">
+            <a href="{{ $.Site.BaseURL }}tags/{{ $name }}/" style="text-decoration: none;">
                 <div class="card-regular h-100" >
                     <div class="card-body" >
                         <h5 class="lead" style="margin-bottom: 0px; "><i class="fas fa-tag" style="font-size: 0.8em;"></i> {{ $name }}</h4> {{ len $taxonomy }} articles

From 5ef8a8389b4dc874a068028a677a49552612658d Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 22 Jul 2020 03:17:05 +0100
Subject: [PATCH 12/22] Changing scrollbar to blue

---
 src/scss/scroll-bar.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/scss/scroll-bar.scss b/src/scss/scroll-bar.scss
index d179f35..f8d3ac1 100644
--- a/src/scss/scroll-bar.scss
+++ b/src/scss/scroll-bar.scss
@@ -1,9 +1,11 @@
 .line-scroll {
-    background-image: linear-gradient(90deg, rgba(238,136,5,1) 0%, rgba(191,48,48,1) 41%, rgba(209,28,28,1) 100%);
-    height: 5px;
+    // background-image: linear-gradient(90deg, rgba(238,136,5,1) 0%, rgba(191,48,48,1) 41%, rgba(209,28,28,1) 100%);
+    background-image: linear-gradient(90deg, #1563ff 1.56%, #08368b);
+    height: 3px;
     left: 0;
-    top: 83px;
+    // top: 83px;
+    top: 56px;
     position: fixed;
     width: 0;
     z-index: 10;
-  }
+}

From 335f1bb87bff158eb02d0302f6ec90f61fb34695 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 22 Jul 2020 03:17:34 +0100
Subject: [PATCH 13/22] Changing theme to blue

---
 data/panaetius-theme/assets.json |  2 +-
 src/scss/_variables.scss         |  6 ++++--
 src/scss/cards.scss              | 32 ++++++++++++++++----------------
 src/scss/panaetius-theme.scss    |  3 ++-
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index e158b3a..798cc82 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,7 +9,7 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.dd57d66cbe4e4a43f89f.min.css",
+    "css": "main.0cbee9de77c807b0b044.min.css",
     "js": "main.48637aff6f96e597ae05.min.js"
   },
   "vendors~app": {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 1a6d55e..7812ee4 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -13,7 +13,8 @@ $gray-900: #082333;
 
 $text-gray: #343a40;
 
-$primary: #a02f2f;
+// $primary: #a02f2f;
+$primary: #1563ff;
 $secondary: #773A6B;
 
 $table-dark-color: $white;
@@ -24,7 +25,8 @@ $table-dark-bg: $primary;
 $text-muted: $gray-400;
 $body-color: $text-gray;
 $light: $white;
-$dark: $gray-900;
+// $dark: $gray-900;
+$dark: #0c3484;
 $headings-color: $text-gray;
 $headings-font-family: "Rotunda",
 sans-serif;
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index 11a4186..a305293 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -7,19 +7,19 @@
 @mixin card-border {
     background-color: white;
     z-index: 1;
-    border: 1px solid rgb(204, 18, 18);
-    border-top-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
-    border-top-style: solid;
-    border-top-width: 1px;
-    border-right-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
-    border-right-style: solid;
-    border-right-width: 1px;
-    border-bottom-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    border-left-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
-    border-left-style: solid;
-    border-left-width: 1px;
+    // border: 1px solid rgb(204, 18, 18);
+    // border-top-color: rgba(80, 42, 184, 0.2);
+    // border-top-style: solid;
+    // border-top-width: 1px;
+    // border-right-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    // border-right-style: solid;
+    // border-right-width: 1px;
+    // border-bottom-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    // border-bottom-style: solid;
+    // border-bottom-width: 1px;
+    // border-left-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    // border-left-style: solid;
+    // border-left-width: 1px;
     border-image-source: initial;
     border-image-slice: initial;
     border-image-width: initial;
@@ -30,9 +30,9 @@
     border-top-right-radius: 0.45rem;
     border-bottom-right-radius: 0.45rem;
     border-bottom-left-radius: 0.45rem;
-    -webkit-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
-    -moz-box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
-    box-shadow: 4px 4px 36px -10px rgba(255, 0, 94, 0.79);
+    -webkit-box-shadow: 4px 4px 36px -10px rgba(12, 45, 192, 0.15);
+    -moz-box-shadow: 4px 4px 36px -10px rgba(12, 45, 192, 0.15);
+    box-shadow: 4px 4px 36px -10px rgba(12, 45, 192, 0.15);
     transition-property: all;
     transition-duration: 1s;
     overflow: hidden;
diff --git a/src/scss/panaetius-theme.scss b/src/scss/panaetius-theme.scss
index 1ec90d9..9ac6201 100644
--- a/src/scss/panaetius-theme.scss
+++ b/src/scss/panaetius-theme.scss
@@ -82,7 +82,8 @@ footer a:not(.icons) {
 }
 
 .navbar {
-    border-bottom: 1px solid #a02f2f;
+    // border-bottom: 1px solid #a02f2f;
+    border-bottom: 1px solid #2f3ba0;
 }
 
 .rotate-a-20 {

From 5f25e8b2b05316721339dc5f3f95deff9aaf0f30 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 22 Jul 2020 03:17:42 +0100
Subject: [PATCH 14/22] Changing navbar logo

---
 layouts/partials/header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 32e2c64..48101f4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,7 @@
 {{ $current := . }}
 <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" id="navbar-main-menu">
     <div class="container">
-        <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="/images/icons/Gods.png" width="50" height="50" class="mr-3 rotate-a-20" id="navbar-brand-image" />{{ .Site.Title }}</a>
+        <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="/images/icons/pillar.png" height="15" class="mr-2 rotate-a-20" id="navbar-brand-image" />{{ .Site.Title }}</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>

From e0e96bf8bb4ad2ee7c5f2f08ddf890bd30692fc6 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 22 Jul 2020 03:18:04 +0100
Subject: [PATCH 15/22] Updating TOC

---
 layouts/post/single.html | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/layouts/post/single.html b/layouts/post/single.html
index 32b5cdb..730e5b4 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -3,13 +3,13 @@
 </div>
 <main class="content-page container-fluid pt-7 pb-5">
     {{ $page := . }}
-    <div class="row">
-        <div class="col-lg-8">
+    <div class="row justify-content-around">
+        <div class="col-lg-7" style="background-color: white;">
             {{- with .Resources.Match "images/banner.svg" -}}
             {{ range . }}
             <div class="row justify-content-center mb-3">
                 <div class="col-lg-10">
-                    <img data-src="{{ .RelPermalink }}" class="img-fluid rounded mx-auto d-block" alt="{{ $page.Title }}" data-aos="zoom-in">
+                    <img data-src="{{ .RelPermalink }}" class="img-fluid rounded mx-auto d-block mt-3" alt="{{ $page.Title }}" data-aos="zoom-in">
                 </div>
             </div>
             {{- end -}}
@@ -70,20 +70,28 @@
 
             </article>
         </div>
+        <div class="col-lg-2" style="background-color: white;">
+            <div class="sticky-top" style="top: 56px;">
+                <p class="text-uppercase text-muted pt-2">On this page</p>
+                <div class="toc-contents">
+                    {{ .TableOfContents }}
+                </div>
+            </div>
+        </div>
         <div class="col-12 col-lg-9">
             {{ partial "related.html" $page }}
         </div>
-        <div id="" class="col-lg-2 toc-sidebar d-none d-md-block">
+        {{/*  <div id="" class="col-lg-2 toc-sidebar d-none d-md-block">
             <aside>
                 <h5 class="text-center text-uppercase">Table of contents</h5>
                 <div class="toc-contents">
                     {{ .TableOfContents }}
-                </div>
-            </aside>
-            <div class="d-flex justify-content-center">
-                <img src="/images/icons/Wizard.png" style="width: 50%;" />
-            </div>
-        </div>
+    </div>
+    </aside>
+    <div class="d-flex justify-content-center">
+        <img src="/images/icons/Wizard.png" style="width: 50%;" />
+    </div>
+    </div> */}}
     </div>
 
 </main>

From 70b1821afbda4d39a313de8b62bbe3ba6ba8e885 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 22 Jul 2020 20:50:56 +0100
Subject: [PATCH 16/22] Updating TOC to new theme

---
 data/panaetius-theme/assets.json |   7 +-
 layouts/post/single.html         |  31 +++-----
 src/js/toc.js                    | 122 +++++++++++++++++++++++++++++++
 src/main.js                      |   2 +
 src/scss/code-block.scss         |   3 +
 src/scss/styles.scss             |   4 +-
 src/scss/toc-marker.scss         |  41 +++++++++++
 src/scss/toc.scss                |  34 ++-------
 8 files changed, 192 insertions(+), 52 deletions(-)
 create mode 100644 src/js/toc.js
 create mode 100644 src/scss/code-block.scss
 create mode 100644 src/scss/toc-marker.scss

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index 798cc82..0b66a91 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,8 +9,8 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.0cbee9de77c807b0b044.min.css",
-    "js": "main.48637aff6f96e597ae05.min.js"
+    "css": "main.26e4723e96e8bcd78b5f.min.css",
+    "js": "main.fc08d5d267c5846c8341.min.js"
   },
   "vendors~app": {
     "js": "4.vendors~app.7827f3b332495242afbd.min.js"
@@ -47,6 +47,7 @@
       "a88fa636656948bd2edb86bce59f0eec.otf",
       "cf6ea537acbd7e39208334261f95783e.otf",
       "da9fb05ff6c5f02b52f5b416cfe61d39.otf"
-    ]
+    ],
+    "js": "6.6.91402cdcff834b1793e6.min.js"
   }
 }
\ No newline at end of file
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 730e5b4..8039221 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -3,8 +3,8 @@
 </div>
 <main class="content-page container-fluid pt-7 pb-5">
     {{ $page := . }}
-    <div class="row justify-content-around">
-        <div class="col-lg-7" style="background-color: white;">
+    <div class="row justify-content-center">
+        <div class="col-12 col-lg-7 order-1 order-lg-0 shadow-lg" style="background-color: white;">
             {{- with .Resources.Match "images/banner.svg" -}}
             {{ range . }}
             <div class="row justify-content-center mb-3">
@@ -17,11 +17,11 @@
             <article>
                 <div class="row justify-content-center">
                     <div class="col-lg-9">
-                        <h1 class="display-3">{{ $page.Title }}</h1>
+                        <h1 class="card-title-gray pt-4">{{ $page.Title }}</h1>
 
-                        <div class="d-flex justify-content-between  align-items-stretch post-info">
+                        <div class="d-inline-flex justify-content-between  align-items-stretch post-info">
                             <div>{{ partial "authors.html" $page }}</div>
-                            <div class="meta text-muted mb-3 d-flex flex-column justify-content-start">
+                            <div class="text-muted mb-3 d-flex flex-column justify-content-start">
                                 <div>
                                     <p class="text-muted">Posted on</p>
                                 </div>
@@ -70,28 +70,17 @@
 
             </article>
         </div>
-        <div class="col-lg-2" style="background-color: white;">
-            <div class="sticky-top" style="top: 56px;">
-                <p class="text-uppercase text-muted pt-2">On this page</p>
-                <div class="toc-contents">
+        <div class="col-12 col-lg-2 order-0 ml-lg-2 d-none d-lg-block">
+            <div class="sticky-top shadow-sm toc-container">
+                <p class="text-uppercase text-center text-muted pt-4">On this page</p>
+                <div class="toc-contents toc pb-3">
                     {{ .TableOfContents }}
                 </div>
             </div>
         </div>
-        <div class="col-12 col-lg-9">
+        <div class="col-12 col-lg-9 order-2">
             {{ partial "related.html" $page }}
         </div>
-        {{/*  <div id="" class="col-lg-2 toc-sidebar d-none d-md-block">
-            <aside>
-                <h5 class="text-center text-uppercase">Table of contents</h5>
-                <div class="toc-contents">
-                    {{ .TableOfContents }}
-    </div>
-    </aside>
-    <div class="d-flex justify-content-center">
-        <img src="/images/icons/Wizard.png" style="width: 50%;" />
-    </div>
-    </div> */}}
     </div>
 
 </main>
diff --git a/src/js/toc.js b/src/js/toc.js
new file mode 100644
index 0000000..09b507c
--- /dev/null
+++ b/src/js/toc.js
@@ -0,0 +1,122 @@
+export function animatedToc() {
+  var toc = document.querySelector(".toc");
+  var tocPath = document.querySelector(".toc-marker path");
+  var tocItems;
+
+  // Factor of screen size that the element must cross
+  // before it's considered visible
+  var TOP_MARGIN = 0.1,
+    BOTTOM_MARGIN = 0.2;
+
+  var pathLength;
+
+  var lastPathStart, lastPathEnd;
+
+  window.addEventListener("resize", drawPath, false);
+  window.addEventListener("scroll", sync, false);
+
+  drawPath();
+
+  function drawPath() {
+    tocItems = [].slice.call(toc.querySelectorAll("li"));
+
+    // Cache element references and measurements
+    tocItems = tocItems.map(function (item) {
+      var anchor = item.querySelector("a");
+      var target = document.getElementById(
+        anchor.getAttribute("href").slice(1)
+      );
+
+      return {
+        listItem: item,
+        anchor: anchor,
+        target: target,
+      };
+    });
+
+    // Remove missing targets
+    tocItems = tocItems.filter(function (item) {
+      return !!item.target;
+    });
+
+    var path = [];
+    var pathIndent;
+
+    tocItems.forEach(function (item, i) {
+      var x = item.anchor.offsetLeft - 5,
+        y = item.anchor.offsetTop,
+        height = item.anchor.offsetHeight;
+
+      if (i === 0) {
+        path.push("M", x, y, "L", x, y + height);
+        item.pathStart = 0;
+      } else {
+        // Draw an additional line when there's a change in
+        // indent levels
+        if (pathIndent !== x) path.push("L", pathIndent, y);
+
+        path.push("L", x, y);
+
+        // Set the current path so that we can measure it
+        tocPath.setAttribute("d", path.join(" "));
+        item.pathStart = tocPath.getTotalLength() || 0;
+
+        path.push("L", x, y + height);
+      }
+
+      pathIndent = x;
+
+      tocPath.setAttribute("d", path.join(" "));
+      item.pathEnd = tocPath.getTotalLength();
+    });
+
+    pathLength = tocPath.getTotalLength();
+
+    sync();
+  }
+
+  function sync() {
+    var windowHeight = window.innerHeight;
+
+    var pathStart = pathLength,
+      pathEnd = 0;
+
+    var visibleItems = 0;
+
+    tocItems.forEach(function (item) {
+      var targetBounds = item.target.getBoundingClientRect();
+
+      if (
+        targetBounds.bottom > windowHeight * TOP_MARGIN &&
+        targetBounds.top < windowHeight * (1 - BOTTOM_MARGIN)
+      ) {
+        pathStart = Math.min(item.pathStart, pathStart);
+        pathEnd = Math.max(item.pathEnd, pathEnd);
+
+        visibleItems += 1;
+
+        item.listItem.classList.add("visible");
+      } else {
+        item.listItem.classList.remove("visible");
+      }
+    });
+
+    // Specify the visible path or hide the path altogether
+    // if there are no visible items
+    if (visibleItems > 0 && pathStart < pathEnd) {
+      if (pathStart !== lastPathStart || pathEnd !== lastPathEnd) {
+        tocPath.setAttribute("stroke-dashoffset", "1");
+        tocPath.setAttribute(
+          "stroke-dasharray",
+          "1, " + pathStart + ", " + (pathEnd - pathStart) + ", " + pathLength
+        );
+        tocPath.setAttribute("opacity", 1);
+      }
+    } else {
+      tocPath.setAttribute("opacity", 0);
+    }
+
+    lastPathStart = pathStart;
+    lastPathEnd = pathEnd;
+  }
+}
diff --git a/src/main.js b/src/main.js
index dedd193..633a72c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,10 +5,12 @@ window.addEventListener("DOMContentLoaded", async (event) => {
   const { default: App } = await import(
     /* webpackChunkName: "app" */ "./js/App"
   );
+  const animatedToc = await import("./js/toc");
   App.bootstrapify();
   App.lazyload();
   App.loadFontAwesome();
   // App.navbarFade();
   App.aos();
   App.scrollBar();
+  animatedToc.animatedToc();
 });
diff --git a/src/scss/code-block.scss b/src/scss/code-block.scss
new file mode 100644
index 0000000..1f5d32c
--- /dev/null
+++ b/src/scss/code-block.scss
@@ -0,0 +1,3 @@
+div.highlight {
+    padding-bottom: 20px;
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index c19bd93..577f42b 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -5,8 +5,10 @@
 @import "sticky-footer";
 @import "search";
 @import "search-bar";
-@import "toc";
 @import "scroll-bar";
 @import "admonition-icons";
 @import "cards";
 @import "fonts";
+@import "toc-marker";
+@import "code-block";
+@import "toc";
diff --git a/src/scss/toc-marker.scss b/src/scss/toc-marker.scss
new file mode 100644
index 0000000..8e8fa59
--- /dev/null
+++ b/src/scss/toc-marker.scss
@@ -0,0 +1,41 @@
+@mixin toc-selected {
+    color: $text-gray;
+    transform: translate(5px);
+}
+
+.toc {
+    line-height: 2;
+
+    ul {
+        list-style: none;
+        padding-left: 0px;
+    }
+
+    ul ul {
+        padding-left: 1em;
+    }
+
+    li a {
+        display: inline-block;
+        color: $text-muted;
+        text-decoration: none;
+        transition: all 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
+        font-size: 0.9rem;
+
+        &:hover {
+            @include toc-selected;
+        }
+    }
+
+    li.visible>a {
+        @include toc-selected;
+    }
+}
+
+// Adds offset to the headers in the post content to ignore the navbar height (avoids underscroll).
+:target[id]:before {
+    content: '';
+    display: block;
+    height: 58px;
+    margin: -30px 0 0;
+}
diff --git a/src/scss/toc.scss b/src/scss/toc.scss
index 8ff5ed5..aff1b59 100644
--- a/src/scss/toc.scss
+++ b/src/scss/toc.scss
@@ -1,30 +1,10 @@
-div.toc-sidebar {
-    position: fixed;
-    right: 0;
-    // background-color: rgb(245,245,245);
-    background: repeating-linear-gradient(135deg, rgba(128, 50, 50, 0.025), rgba(160, 60, 60, 0.025) 5px, rgba(0,0,0,0) 5px, rgba(0,0,0,0) 10px);
-    height: 100%;
-    margin-top: -500%;
-    padding-top: 500%;
-    padding-bottom: 500%;
-    margin-right: 5%;
-    font-size: 0.9em;
+div {
+    &.toc-container {
+        top: 56px;
+        background-color: white;
+    }
 
-    & li {
-        list-style: none;
-        padding-bottom: 10px;
+    &.toc-contents {
+        padding-left: 10px;
     }
 }
-
-#TableOfContents > ul {
-    margin-left: -40px;
-
-    & > li ul {
-        margin-left: -15px;
-    }
-}
-
-div.toc-contents a {
-    // color: $text-muted
-    color: $gray-700
-}

From 0b8b8c1d7ee95ec17db1d523237b509c0df45c37 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 22 Jul 2020 20:54:19 +0100
Subject: [PATCH 17/22] Adding webpackChunkName

---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 633a72c..831e0af 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
   const { default: App } = await import(
     /* webpackChunkName: "app" */ "./js/App"
   );
-  const animatedToc = await import("./js/toc");
+  const animatedToc = await import(/* webpackChunkName: "toc" */ "./js/toc");
   App.bootstrapify();
   App.lazyload();
   App.loadFontAwesome();

From 29233272f036488dab8f8246355bff35087abda7 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 23 Jul 2020 00:01:11 +0100
Subject: [PATCH 18/22] Changing scrollbar z-index

---
 src/scss/scroll-bar.scss | 2 --
 src/scss/toc.scss        | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scss/scroll-bar.scss b/src/scss/scroll-bar.scss
index f8d3ac1..071623a 100644
--- a/src/scss/scroll-bar.scss
+++ b/src/scss/scroll-bar.scss
@@ -1,9 +1,7 @@
 .line-scroll {
-    // background-image: linear-gradient(90deg, rgba(238,136,5,1) 0%, rgba(191,48,48,1) 41%, rgba(209,28,28,1) 100%);
     background-image: linear-gradient(90deg, #1563ff 1.56%, #08368b);
     height: 3px;
     left: 0;
-    // top: 83px;
     top: 56px;
     position: fixed;
     width: 0;
diff --git a/src/scss/toc.scss b/src/scss/toc.scss
index aff1b59..5fae773 100644
--- a/src/scss/toc.scss
+++ b/src/scss/toc.scss
@@ -2,9 +2,11 @@ div {
     &.toc-container {
         top: 56px;
         background-color: white;
+        z-index: 0;
     }
 
     &.toc-contents {
         padding-left: 10px;
+        // z-index: 1;
     }
 }

From 524a2be0120e9fdd828c5827e3ac5f4aa7c50792 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 23 Jul 2020 00:01:24 +0100
Subject: [PATCH 19/22] Fixing layout

---
 data/panaetius-theme/assets.json | 14 ++++++++------
 layouts/partials/header.html     |  4 ----
 layouts/post/single.html         | 27 ++++++++++++++-------------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/data/panaetius-theme/assets.json b/data/panaetius-theme/assets.json
index 0b66a91..694c4c2 100644
--- a/data/panaetius-theme/assets.json
+++ b/data/panaetius-theme/assets.json
@@ -9,14 +9,17 @@
     "js": "2.lazyload.1168fc21175de558d316.min.js"
   },
   "main": {
-    "css": "main.26e4723e96e8bcd78b5f.min.css",
-    "js": "main.fc08d5d267c5846c8341.min.js"
+    "css": "main.b8f5fbcfbcd649f85b5e.min.css",
+    "js": "main.5f08acb7138457c0f12a.min.js"
+  },
+  "toc": {
+    "js": "4.toc.cadd3d10b2475406483a.min.js"
   },
   "vendors~app": {
-    "js": "4.vendors~app.7827f3b332495242afbd.min.js"
+    "js": "5.vendors~app.c54336286ff97590d35b.min.js"
   },
   "vendors~bootstrap": {
-    "js": "5.vendors~bootstrap.ebc6358ec2d8424a6fb0.min.js"
+    "js": "6.vendors~bootstrap.f09f391b73c48906a4a7.min.js"
   },
   "": {
     "ttf": [
@@ -47,7 +50,6 @@
       "a88fa636656948bd2edb86bce59f0eec.otf",
       "cf6ea537acbd7e39208334261f95783e.otf",
       "da9fb05ff6c5f02b52f5b416cfe61d39.otf"
-    ],
-    "js": "6.6.91402cdcff834b1793e6.min.js"
+    ]
   }
 }
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 48101f4..b314f75 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -16,17 +16,13 @@
                 {{ end }}
                 {{ end }}
                 <li class="nav-item" id="nav-search">
-                <!-- <li class="nav-item d-none d-md-block" id="nav-search"> -->
                     <form id="search-form" method="get" action="/search/" method="POST" class="form-inline">
                         <input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
                         <div class="input-group ">
                             <div class="input-group-append">
-                                <!-- <div> -->
                                 <button type="submit" id="search-button" class="btn btn-primary"> <i class="fa fa-search fa-sm"></i></button>
-                                <!-- <button type="submit" id="search-button" class="btn btn-primary form-control form-control-sm"> <i class="fa fa-search"></i></button> -->
                             </div>
                     </form>
-                    <!-- <i class="fas fa-search" data-fa-transform="down-5"></i> -->
                 </li>
             </ul>
         </div>
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 8039221..0db1038 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -4,7 +4,7 @@
 <main class="content-page container-fluid pt-7 pb-5">
     {{ $page := . }}
     <div class="row justify-content-center">
-        <div class="col-12 col-lg-7 order-1 order-lg-0 shadow-lg" style="background-color: white;">
+        <div class="col-12 col-lg-7 order-1 order-lg-0 shadow-lg">
             {{- with .Resources.Match "images/banner.svg" -}}
             {{ range . }}
             <div class="row justify-content-center mb-3">
@@ -18,19 +18,20 @@
                 <div class="row justify-content-center">
                     <div class="col-lg-9">
                         <h1 class="card-title-gray pt-4">{{ $page.Title }}</h1>
-
-                        <div class="d-inline-flex justify-content-between  align-items-stretch post-info">
-                            <div>{{ partial "authors.html" $page }}</div>
-                            <div class="text-muted mb-3 d-flex flex-column justify-content-start">
-                                <div>
-                                    <p class="text-muted">Posted on</p>
+                        <div class="row">
+                            {{/*  <div class="d-flex justify-content-end align-items-stretch post-info">  */}}
+                                <div class="col-6">{{ partial "authors.html" $page }}</div>
+                                <div class="text-muted mb-3 d-flex flex-column justify-content-start col-6">
+                                    <div>
+                                        <p class="text-muted">Posted on</p>
+                                    </div>
+                                    <div>
+                                        <p class="created text-muted text-uppercase font-weight-bold mb-1">{{ $page.Date.Format "January 2, 2006" }}</p>
+                                        <span class="mr-2"><i class="fas fa-book-open mr-2"></i>{{ $page.WordCount }} words</span>
+                                        <span><i class="fas fa-clock mr-2"></i>{{ $page.ReadingTime }} min read</span>
+                                    </div>
                                 </div>
-                                <div>
-                                    <p class="created text-muted text-uppercase font-weight-bold mb-1">{{ $page.Date.Format "January 2, 2006" }}</p>
-                                    <span class="mr-2"><i class="fas fa-book-open mr-2"></i>{{ $page.WordCount }} words</span>
-                                    <span><i class="fas fa-clock mr-2"></i>{{ $page.ReadingTime }} min read</span>
-                                </div>
-                            </div>
+                            {{/*  </div>  */}}
                         </div>
                     </div>
                 </div>

From 955905b84ec567395f68fcd0a67f47c53c7d1a15 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 23 Jul 2020 01:11:47 +0100
Subject: [PATCH 20/22] Adding centre to card-large

---
 layouts/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/index.html b/layouts/index.html
index 81cf6ba..caf262c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -31,7 +31,7 @@
     <div class="container">
         <div class="row d-none d-md-block">
             {{- range first 1 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
-            <div class="latest d-flex py-lg-5">
+            <div class="latest d-flex py-lg-5 justify-content-center">
                 {{ .Render "card-large" }}
             </div>
             {{- end -}}

From 78641f4935521d9a57a1c5b9db17ac8977df57d8 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Thu, 23 Jul 2020 19:49:03 +0100
Subject: [PATCH 21/22] Adding trailing '/' to all posts button on homepage

---
 layouts/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/index.html b/layouts/index.html
index caf262c..ef79142 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -75,7 +75,7 @@
         </div>
         <div class="row">
             <div class="col d-flex justify-content-center text-center pt-5">
-                <a href="/post">
+                <a href="/post/">
                     <button type="button" class="btn btn-lg btn-outline-primary">See all posts</button>
                 </a>
             </div>

From bde22342b43ec73ad1f750ecbfa942838b1d27b1 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Fri, 24 Jul 2020 14:20:48 +0100
Subject: [PATCH 22/22] Adding matomo

---
 layouts/_default/baseof.html |  1 +
 layouts/partials/matomo.html | 15 +++++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 layouts/partials/matomo.html

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4f295ce..9f09513 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,6 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     {{ partial "head.html" . }}
     {{ partial "schema.html" . }}
+    {{ partial "matomo.html" }}
 </head>
 
 <body>
diff --git a/layouts/partials/matomo.html b/layouts/partials/matomo.html
new file mode 100644
index 0000000..cf2a186
--- /dev/null
+++ b/layouts/partials/matomo.html
@@ -0,0 +1,15 @@
+<!-- Matomo -->
+<script type="text/javascript">
+    var _paq = window._paq || [];
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+      var u="//matomo.panaetius.co.uk/";
+      _paq.push(['setTrackerUrl', u+'matomo.php']);
+      _paq.push(['setSiteId', '2']);
+      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+    })();
+  </script>
+  <!-- End Matomo Code -->