From 941e8eb10c7e9cef883fbbc283f154f3312f0f9b Mon Sep 17 00:00:00 2001 From: Joris Date: Tue, 12 Sep 2023 22:42:49 +0200 Subject: Show book summary in detail modal --- public/main.css | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) (limited to 'public') 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); +} -- cgit v1.2.3