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] 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>