Merge pull request 'Adding book picture, update theme' (#2) from em_add-to-book-section into main

Reviewed-on: autonomic-cooperative/sophie-lewis-hugo#2

content/writing.md

@@ -7,7 +7,14 @@ octo: octo-4.webp
     <tbody>
         <tr>
             <td class="thead">BOOKS</td>
-            <td>
+            <td class="book-cell">
+                <div class="book-cover">
+                    <img src="/img/books/abolish-the-family.jpg" alt='Abolish the Family Cover'>
+                </div>
+                <p class="book-stats"><b>Abolish the Family: A Manifesto for Care and Liberation</b></p>
+                <p class="book-stats"><i>Coming soon!</i></p>
+            </td>
+            <td class="book-cell">
                 <div class="book-cover">
                     <img src="/img/books/fsn-cover.jpg" alt='Full Surrogacy Now Cover'>
                     <a href="/writing/full-surrogacy-now/">
@@ -16,8 +23,8 @@ octo: octo-4.webp
                         </p>
                     </a>
                 </div>
-                <p><b>Full Surrogacy Now!</b></p>
+                <p class="book-stats"><b>Full Surrogacy Now!</b></p>
-                <p><i>Published in May 2019</i></p>
+                <p class="book-stats"><i>Published in May 2019</i></p>
             </td>
         </tr>
         <tr>

themes/sophie-lewis/assets/scss/main.scss

@@ -120,9 +120,17 @@ hr {
         padding-bottom: 1rem;
     }
     &.writing {
+        img {
+            margin-bottom: 0.75em;
+        }
+
+        .book-cell {
+            padding-right: 2em;
+        }
+
         .book-cover {
             float: left;
-            margin-right: 1rem;
+            width: 100%;
             text-align: center;
             img {
                 height: 184px;
@@ -142,6 +150,10 @@ hr {
                 background-color: #adadad;
             }
         }
+
+        .book-stats {
+            text-align: center;
+        }
     }
 }