Added flippable book card

Author: kabbagepatch

src/components/Books/Book.vue

@@ -1,8 +1,14 @@
 <template>
   <transition enter-active-class="bouncein" leave-active-class="bounceout">
     <div class="book" v-if="this.imageThumbnail">
-      <img :src='this.imageThumbnail' :alt='this.bookTitle' />
-      <div class="overlay">{{ this.bookName.replace(/\b[A-Z0-9]{5,}\b/g, '') }}</div>
+      <div class="book-inner">
+        <div class="front">
+          <img :src='this.imageThumbnail' :alt='this.bookTitle' class="book-img"/>
+        </div>
+        <div class="back">
+          {{ this.bookName.replace(/\b[A-Z0-9]{5,}\b/g, '') }}
+        </div>
+      </div>
     </div>
   </transition>
 </template>
@@ -59,31 +65,43 @@ export default {
     text-align: center;
     width: auto;
     height: 190px;
+    background-color: transparent;
+    perspective: 1000px;
   }
 
-  .book img {
-    height: 190px;
+  .book-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
   }
 
-  .overlay {
+  .book:hover .book-inner {
+    transform: rotateY(180deg);
+  }
+
+  .front, .back {
     position: absolute;
-    top: 0;
-    left: 0;
-    background: hsla(0, 0%, 0%, 0.7);
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden; /* Safari */
+    backface-visibility: hidden;
+  }
+
+  .book-img {
+    height: 190px;
+  }
+
+  .back {
+    background-color: hsl(209, 50%, 54%);
+    background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 40%) 50%, hsl(209, 64%, 49%) 50%);
     color: white;
+    transform: rotateY(180deg);
     display: flex;
     justify-content: center;
     align-items: center;
-    width: auto;
-    padding: 2rem 0.5rem;
-    margin-left: 1px;
-    text-align: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
-
-  .book:hover .overlay {
-    opacity: 1;
   }
 
   .bouncein {

src/components/Books/BookSection.vue

@@ -73,14 +73,14 @@ export default {
     display: flex;
     justify-content: space-between;
     background-color: hsl(209, 50%, 54%);
-    background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 40%) 50%, hsl(209, 84%, 49%) 50%);
+    background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 40%) 50%, hsl(209, 64%, 49%) 50%);
   }
 
   .book-section-header:hover {
     cursor: pointer;
     transition: background 0.5s ease-in-out;
     background-color: hsl(209, 50%, 57%);
-    background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 44%) 50%, hsl(209, 84%, 52%) 50%);
+    background-image: -webkit-linear-gradient(45deg, hsl(209, 70%, 44%) 50%, hsl(209, 64%, 52%) 50%);
   }
 
   .book {

src/resources/books/bookList2025.txt

@@ -1,13 +1,13 @@
-Tress of the Emerald Sea 9781938570346
-One Night at the Call Center
+Tress of the Emerald Sea by Brandon Sanderson 9781938570346
+One Night at the Call Center by Chetan Bhagat
 The Fellowship of the Ring by JRR Tolkien 9780007322497
-The Grim Steeper
+The Grim Steeper by Gretchen Rue
 Rogue Protocol by Martha Wells
 The Bees by Laline Paull
 Road to Ruin by Hana Lee
-The Will of the Many 9781982141172
-Purrder She Wrote
-2001 A Space Odyssey 0143111574
+The Will of the Many by James Islington 9781982141172
+Purrder She Wrote by Cat Conte
+2001 A Space Odyssey by Arthur Clarke 0143111574
 The Two Towers by JRR Tolkien
 Oathbringer by Brandon Sanderson 076532637X
 Foundation by Isaac Asimov 9780553293357
@@ -26,8 +26,8 @@ Before They Are Hanged by Joe Abercrombe
 The 7 1/2 Deaths of Evelyn Hardcastle by Stuart Turton
 He Who Drowned the World by Shelley Parker-Chan
 We'll Prescribe You a Cat by Syou Ishida
+Last Argument of Kings by Joe Abercrombe
 A Psalm for the Wild-Built by Becky Chambers
 A Prayer for the Crown-Shy by Becky Chambers
 Network Effect by Martha Wells
-A Nest of Nightmares by Lisa Tuttle
-Last Argument of Kings by Joe Abercrombe
+A Nest of Nightmares by Lisa Tuttle