make cover larger and transparent

frontend/files/app.js

@@ -137,21 +137,19 @@ function BookTemplate({
   volume,
   year,
 }) {
-  return `${coverURL ? `<img src="${coverURL}"/>` : ""}
-  <h1>${title}</h1>
-  <h2>${authors}</h2>
-  <span>${isbn13}</span><br/>
-  <span>${publisher}, ${year}</span><br/>
-  ${
-    series
-      ? `<span>${series}${volume ? `, Volume ${volume}` : ""}</span><br/>`
-      : ""
-  }
-  ${signed ? "<span>Signed by the author ✒</span><br/>" : ""}
-  <span>${format}</span>
-  <div class="description">
-    <p>${description}</p>
-    ${notes ? `<span>Notes:</span><p>${notes}</p>` : ""}
+  return `<img ${coverURL ? `src="${coverURL}"` : ``}/>
+  <div class="bookDetails">
+    <h1>${title}</h1>
+    <h2>${authors}</h2>
+    <span>${isbn13}</span><br/>
+    <span>${publisher}, ${year}</span><br/>
+    ${
+      series
+        ? `<span>${series}${volume ? `, Volume ${volume}` : ""}</span><br/>`
+        : ""
+    }
+    ${signed ? "<span>Signed by the author ✒</span><br/>" : ""}
+    <span>${format}</span>
   </div>`;
 }
 
@@ -167,7 +165,7 @@ function TableRowTemplate({
   return `<tr class="tRow" id="${rowNumber}">
     <td class="title">
       ${title} ${
-    signed ? '<span class="signed" title="Signed by the author" >✒</span>︎' : ""
+    signed ? '<span class="signed" title="Signed by the author" >✒</span>' : ""
   }
     </td>
     <td class="author">${authors}</td>

frontend/files/style.css

@@ -186,6 +186,7 @@ body {
   padding: 20px;
   overflow: auto;
   float: left;
+  position: relative;
 }
 
 #books {
@@ -257,7 +258,7 @@ body {
   font-size: x-large;
   font-weight: bold;
   font-style: italic;
-  padding: 10px 0;
+  padding: 0 0 5px 0;
 }
 
 #current h2 {
@@ -266,10 +267,21 @@ body {
 }
 
 #current img {
-  max-height: 400px;
-  max-width: 100%;
-  display: block;
-  margin: 0 auto;
+  opacity: 0.5;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: auto;
+}
+
+#current .bookDetails {
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 10px;
+  margin: 0;
+  width: 75%;
+  border-radius: 5px;
 }
 
 #current .description p {