book reviews redo

src/static/css/App.css

@@ -100,7 +100,7 @@ p, li {
   font-size: 1rem;
 }
 
-a {
+a, a p {
   color: #a0a0a0a0;
   text-decoration: none;
 }
@@ -718,6 +718,10 @@ a {
   justify-content: center;
 }
 
+.fullHeight {
+  height: 100%;
+}
+
 .chess {
   max-width: 300px;
   border: none;
@@ -892,8 +896,10 @@ a {
 }
 
 .bookReview {
-  width: 6em;
+  width: min(100%, 30em);
   padding: 1em;
+  border: solid 3px rgba(139, 36, 36, 0.5);
+  flex-grow: 1;
 }
 
 .bookcover {
@@ -901,9 +907,10 @@ a {
 }
 
 .booklist {
-  margin: min(10em, 10%);
+  /* margin: min(10em, 10%);
   margin-bottom: 2em;
-  margin-top: 2em;
+  margin-top: 2em; */
+  justify-content: left;
 }
 
 .boxed {
@@ -913,6 +920,10 @@ a {
   padding: 1em;
 }
 
+.emPad {
+  padding: 1em;
+}
+
 .timeitem {
   transition: .4s;
   overflow-y: clip;

src/static/json/books.json

@@ -43,7 +43,7 @@
     "The Tyranny of Metrics": {
       "filename": "TyrannyOfMetrics.jpg",
       "link": "https://www.amazon.com/Tyranny-Metrics-Jerry-Z-Muller/dp/0691174954",
-      "review": "Library find.  Very appreciated read given my field of study.  Adds a new lens on the cost of information and how it impacts us from the cube office to the oval office"
+      "review": "Library find.  Very appreciated read given my field of study.  Adds a new lens on the cost of information and how it impacts us from the cube office to the oval office."
     },
     "The Accidental Superpower": {
       "filename": "theAccidentalSuperpower.jpeg",

src/static/sitemap.xml

@@ -6,6 +6,6 @@
     <loc>https://asimonson.com/Resume</loc>
     <loc>https://asimonson.com/duck</loc>
     <loc>https://asimonson.com/books</loc>
-    <lastmod>2024-05-19</lastmod>
+    <lastmod>2024-07-24</lastmod>
   </url>
 </urlset>

src/templates/books.html

@@ -16,19 +16,27 @@
     </div>
     {% endfor %}
   </div>
+  <h3>All Reviews</h3>
   <p>Hover to reveal review<br />Read to reveal KNOWLEDGE</p>
-  <div class="booklist flex wrap mobileV">
+  <div class="booklist flex wrap">
     {% for i in var.books.books %}
     <div id="'{{i}}'" class="bookReview">
-      <div class="hover-container">
+      <div class='fullHeight flex'>
+        <div>
+          <div class='heightBox'>
             <img
               class="bookcover"
               alt="{{i}} cover"
               src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
             />
-        <div class="hover-element">
-          <p>{{ var.books.books[i].review }}</p>
-          <a href="{{ var.books.books[i].link }}">Book Source</a>
+          </div>
+        </div>
+        <div class='vFlex emPad spaceBetween'>
+          <div>
+            <h4 class='nomargin'>{{ i }}</h4>
+            <p class='nomargin'>{{ var.books.books[i].review }}</p>
+          </div>
+          <a href="{{ var.books.books[i].link }}"><p>Book Source</p></a>
         </div>
       </div>
     </div>