Further polishing the library

Author: sergioalvz

cms/content/library.json

@@ -63,15 +63,6 @@
       "status": "read",
       "language": "en"
     },
-    {
-      "title": "On Writing: A Memoir of the Craft",
-      "author": "Stephen King",
-      "category": "craft",
-      "readAt": "2020-05-08",
-      "image": "/static/library/on-writing.jpg",
-      "status": "read",
-      "language": "en"
-    },
     {
       "title": "Accelerate: The Science of Lean Software and DevOps: Building and Scaling High Performing Technology Organizations",
       "author": "Nicole Forsgren, Jez Humble, Gene Kim",
@@ -83,7 +74,7 @@
     {
       "title": "Creativity, Inc.: Overcoming the Unseen Forces That Stand in the Way of True Inspiration",
       "author": "Ed Catmull, Amy Wallace",
-      "category": "craft",
+      "category": "mental-models",
       "readAt": "2020-07-12",
       "image": "/static/library/creativity-inc.jpg",
       "status": "read",
@@ -135,7 +126,7 @@
       "language": "en"
     },
     {
-      "title": "The First 90 Days. Updated And Expanded: Proven Strategies for Getting up to Speed faster and smarter",
+      "title": "The First 90 Days: Proven Strategies for Getting up to Speed faster and smarter",
       "author": "Michael D. Watkins",
       "category": "mental-models",
       "image": "/static/library/the-first-90-days.jpg",

pages/library.tsx

@@ -21,7 +21,7 @@ export function LibrarySectionHeading(props: Readonly<React.PropsWithChildren>)
 }
 
 export function LibrarySectionDescription(props: Readonly<React.PropsWithChildren>) {
-  return <Text>{props.children}</Text>;
+  return <Text className="LibrarySection__Description">{props.children}</Text>;
 }
 
 export function LibrarySectionBooks(props: Readonly<{ books: Book[] }>) {

public/static/library/on-writing.jpg

@@ -1,11 +1,17 @@
 .LibrarySection:not(:first-of-type) {
-  margin-top: 2rem;
+  margin-top: 3rem;
+}
+
+.LibrarySection__Description {
+  margin-bottom: 2rem !important; /*  Default margin-bottom from Text component
+                                      has more specificity */
 }
 
 .LibrarySection__Books {
+  column-gap: 1.5rem;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1.5rem;
+  row-gap: 2rem;
 
   list-style-type: none;
 }