From d7ffb0f14e54a28487e0119fc81f31992f48c0c4 Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Tue, 27 Dec 2022 12:24:56 +0500
Subject: [PATCH] writing: refactor and style books section

---
 layouts/partials/books-section.html | 23 +++++++++++++++++++++++
 layouts/partials/head.html          | 24 +++++++++++++++++++++++-
 layouts/writing/list.html           | 16 +---------------
 3 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 layouts/partials/books-section.html

diff --git a/layouts/partials/books-section.html b/layouts/partials/books-section.html
new file mode 100644
index 0000000..da95a97
--- /dev/null
+++ b/layouts/partials/books-section.html
@@ -0,0 +1,23 @@
+<div id="books-section" class="columns">
+  <div class="column is-one-fifth">
+    <div class="thead">BOOKS</div>
+  </div>
+  <div class="column">
+    <div class="columns">
+      {{ range .Params.Books }}
+      <div class="column is-half">
+        <div class="book-cell">
+            <h3>{{ .title }}</h3>
+            <div class="book-cover">
+                <a href={{ .path }}>
+                  <img src={{ .imgsrc }} alt={{ .title }}>
+                </a>
+            </div>
+            <p class="book-stats"><b>{{ .body }}</b></p>
+            <p class="book-stats"><a href={{ .path }}>Details</a></p>
+        </div>
+      </div>
+      {{ end}}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f4837f3..b0882e0 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -50,7 +50,29 @@
       }
 
       .writing-section {
-        padding-bottom: 28px;
+        padding-bottom: 64px;
+      }
+
+      #books-section {
+        padding-bottom: 24px;
+      }
+
+      #books-section h3 {
+        font-size: 21px;
+        font-weight: 700;
+        text-align: center;
+        height: 7rem;
+      }
+
+      .book-cell {
+        text-align: center;
+      }
+      .book-cover img {
+        max-width: 140px;
+      }
+
+      .book-stats {
+        padding-top: 10px;
       }
 
     </style>
diff --git a/layouts/writing/list.html b/layouts/writing/list.html
index dd1f8da..dcdd643 100644
--- a/layouts/writing/list.html
+++ b/layouts/writing/list.html
@@ -2,21 +2,7 @@
   <div id="writing-page" class="section writing">
     <div>
       {{ partial "essay-section" . }}
-      <div class="flex-row-books">
-        <div class="thead">BOOKS</div>
-        {{ range .Params.Books }}
-        <div class="book-cell">
-            <h6>{{ .title }}</h6>
-            <div class="book-cover">
-                <a href={{ .path }}>
-                  <img src={{ .imgsrc }} alt={{ .title }}>
-                </a>
-            </div>
-            <p class="book-stats"><i><a href={{ .path }}>Details</a></i></p>
-            <p class="book-stats"><b>{{ .body }}</b></p>
-        </div>
-        {{ end}}
-      </div>
+      {{ partial "books-section" . }}
       <div class="writing-section">
         <div class="thead">COLLECTIVE WRITING</div>
         {{ range .Params.Collective }}