Allow to open book detail in modal

1 files changed, 105 insertions, 2 deletions

diff --git a/public/main.css b/public/main.css
index 09c344f..e5d3bcf 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,3 +1,19 @@
+/* Variables */
+
+:root {
+  --color-focus: #888833;
+
+  --width-close-button: 4rem;
+
+  --font-size-dog: 1.5rem;
+
+  --spacing-beetle: 0.25rem;
+  --spacing-mouse: 0.5rem;
+  --spacing-cat: 1rem;
+}
+
+/* Top level */
+
 html {
   height: 100%;
 }
@@ -9,6 +25,51 @@ body {
   font-family: sans-serif;
 }
 
+/* Modal */
+
+.g-Modal {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+.g-Modal__Close {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  cursor: pointer;
+  font-weight: bold;
+  border-radius: 50%;
+  border: 1px solid #EEE;
+  background-color: transparent;
+  width: var(--width-close-button);
+  height: var(--width-close-button);
+  font-size: 2rem;
+  font-family: monospace;
+}
+
+.g-Modal__Close:hover, .g-Modal__Close:focus {
+  background-color: #EEE;
+}
+
+.g-Modal__Content {
+  position: relative;
+  background-color: white;
+  width: 50%;
+  height: 50%;
+  border-radius: 0.2rem;
+  border: 1px solid #EEE;
+  padding: 2rem;
+  padding-right: calc(2rem + var(--width-close-button) + 2rem);
+}
+
 /* Filters */
 
 aside {
@@ -50,7 +111,7 @@ ul {
 }
 
 .g-Filter button:hover {
-  background-color: #888833;
+  background-color: var(--color-focus);
 }
 
 /* Books */
@@ -78,7 +139,49 @@ header {
 }
 
 .g-Book {
-  width: 13rem;
   align-self: center;
   border: 1px solid #DDDDDD;
+  padding: 0;
+  width: fit-content;
+}
+
+.g-Book:hover, .g-Book:focus {
+  cursor: pointer;
+  outline: none;
+}
+
+.g-Book:hover .g-Book__Image, .g-Book:focus .g-Book__Image {
+  transform: scale(105%);
+  opacity: 0.9;
+}
+
+.g-Book__Image {
+  display: flex;
+  width: 13rem;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Book detail */
+
+.g-BookDetail {
+  display: flex;
+  justify-content: space-between;
+}
+
+.g-BookDetail img {
+  width: 10rem;
+}
+
+.g-BookDetail__Title {
+  font-size: var(--font-size-dog);
+  margin-bottom: var(--spacing-beetle);
+}
+
+.g-BookDetail__Subtitle {
+  font-style: italic;
+  margin-bottom: var(--spacing-beetle);
+}
+
+.g-BookDetail__Genres {
+  margin-top: var(--spacing-cat);
 }