Show book summary in detail modal

1 files changed, 25 insertions, 6 deletions

diff --git a/public/main.css b/public/main.css
index 5a531fd..d920a26 100644
--- a/public/main.css
+++ b/public/main.css
@@ -34,6 +34,10 @@ dd {
   margin-left: 0;
 }
 
+p {
+  margin: 0;
+}
+
 /* Modal */
 
 .g-Modal {
@@ -45,7 +49,7 @@ dd {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
 }
 
@@ -53,7 +57,6 @@ dd {
   position: relative;
   background-color: white;
   width: 50%;
-  max-height: 75%;
   border-radius: 0.2rem;
   border: 1px solid #EEE;
 }
@@ -67,7 +70,9 @@ dd {
 }
 
 .g-Modal__Body {
-  padding: var(--spacing-dog) var(--spacing-horse);
+  padding: var(--spacing-horse);
+  max-height: 50vh;
+  overflow-y: scroll;
 }
 
 .g-Modal__Close {
@@ -160,12 +165,12 @@ header {
   width: fit-content;
 }
 
-.g-Book:hover, .g-Book:focus {
+.g-Book:hover {
   cursor: pointer;
   outline: none;
 }
 
-.g-Book:hover .g-Book__Image, .g-Book:focus .g-Book__Image {
+.g-Book:hover .g-Book__Image {
   transform: scale(105%);
   opacity: 0.9;
 }
@@ -180,11 +185,12 @@ header {
 
 .g-BookDetail {
   display: flex;
+  align-items: flex-start;
 }
 
 .g-BookDetail img {
   width: 13rem;
-  margin-right: var(--spacing-dog);
+  margin-right: var(--spacing-horse);
   border: 1px solid #EEE;
 }
 
@@ -202,6 +208,7 @@ header {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-cat);
+  margin-bottom: var(--spacing-dog);
 }
 
 .g-BookDetail dt {
@@ -212,3 +219,15 @@ header {
 .g-BookDetail dd {
   display: inline;
 }
+
+.g-BookDetail p {
+  font-family: serif;
+  text-align: justify;
+  line-height: 1.4rem;
+  font-size: 1.1rem;
+  text-indent: 1.5rem;
+}
+
+.g-BookDetail p:not(:last-child) {
+  margin-bottom: var(--spacing-dog);
+}