writing: refactor and style books section

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>

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>

layouts/writing/list.html

@@ -2,21 +2,7 @@
   <div id="writing-page" class="section writing">
     <div>
       {{ partial "essay-section" . }}
-      <div class="flex-row-books">
+      {{ partial "books-section" . }}
-        <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>
       <div class="writing-section">
         <div class="thead">COLLECTIVE WRITING</div>
         {{ range .Params.Collective }}