bookshelf style

src/static/css/App.css

@@ -666,10 +666,21 @@ a {
 .bookshelf {
   width: 360px;
   padding: 10px;
+  border: solid 2px #553;
+  background-image: url("https://wallpapercave.com/wp/wp4292426.jpg");
+}
+
+.bookshelfHeader {
+  color: lightgray;
+  margin: .5em;
+  border-bottom: solid black 3px;
+  margin-right: 5em;
+}
+
+.bookContainer {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
-  background-color: #a58a45;
 }
 
 .book {
@@ -686,7 +697,9 @@ a {
 
 .book h4 {
   font-size: x-small;
-  color: black;
+  color: lightgray;
+  margin-bottom: 0;
+  text-align: center;
 }
 
 .bookReview {

src/templates/partials/bookshelf.html

@@ -1,17 +1,20 @@
 {% macro bookshelf(books) %}
 <a href="/books">
   <div class="bookshelf">
-    {% for i in books.selection %} {% set book = books.books[i] %}
+    <h5 class="bookshelfHeader">I read things:</h5>
-    <a href="/books#'{{i}}'">
+    <div class="bookContainer">
-      <div class="book">
+      {% for i in books.selection %} {% set book = books.books[i] %}
-        <img
+      <a href="/books#'{{i}}'">
-          alt="{{ i }} cover"
+        <div class="book">
-          src="{{ url_for('static', filename=('photos/books/' + book.filename))}}"
+          <img
-        />
+            alt="{{ i }} cover"
-        <h4>{{ i }}</h4>
+            src="{{ url_for('static', filename=('photos/books/' + book.filename))}}"
-      </div>
+          />
-    </a>
+          <h4>{{ i }}</h4>
-    {% endfor %}
+        </div>
+      </a>
+      {% endfor %}
+    </div>
   </div>
 </a>
 {% endmacro %}