catalogo, avanti, grafica

src/components/CCatalogoCard/CCatalogoCard.scss

@@ -12,6 +12,7 @@
 
 .prod_price {
   font-size: 1.1rem;
+  font-style: bold;
 
   @media (max-width: 718px) {
     font-size: 1rem;
@@ -19,7 +20,8 @@
 }
 
 .prod_sale_price {
-  font-size: 1.10rem;  
+  font-size: 1.10rem;
+  font-style: bold;
 
   @media (max-width: 718px) {
     font-size: 1.05rem;
@@ -146,6 +148,11 @@
   }
 }
 
+.book-image-fixed{
+  max-width: 300px;
+  max-height: 600px;
+}
+
 .img-pic {
   width: 100%;
   height: 100%;
@@ -165,6 +172,11 @@
   background-color: #f8f8f8;
 }
 
+.book-card {
+  width: 300px;
+  background-color: #f8f8f8;
+}
+
 .book-card-section {
   display: flex;
 }
@@ -174,7 +186,7 @@
 }
 
 .book-block {
-  display: flex;  
+  display: flex;
 }
 
 .book-image q-img {
@@ -182,7 +194,7 @@
 }
 
 .book-info {
-  flex: 2;
+
   padding: 20px;
 }
 
@@ -193,19 +205,18 @@
   line-height: 20px;
   font-weight: bold;
   color: #333;
-  display: flex;
+  display: block;
   text-align: center;
 }
 
 .book-author {
-  color: #263238;
-  display: flex;
-  font-family: Poppins, sans-serif;
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: center;
-  font-style: italic;
+  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: darkblue; /* Colore scuro per garantire una buona leggibilità */
+  text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
+  background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
+  border-radius: 2px; /* Bordi arrotondati per un aspetto più soft-edged */
+  display: inline-block; /* Tratta il blocco come elementi inline-block per adattarlo al contenuto */
+  font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
 }
 
 .book-description {
@@ -213,14 +224,59 @@
   color: #777;
 }
 
-.block-variazione{
+.block-variazione {
   border: 1px solid gray;
+  // effetto 3d
+  box-shadow: 0 0 5px gray;
   border-radius: 5px;
   padding: 2px;
   margin: 2px;
   cursor: pointer;
 }
 
-.block-variazione-selected{
-  border: 1px solid red !important;
+.block-variazione-selected {
+  border: 2px solid red !important;
+  font-weight: bold;
+}
+
+.book-isbn {
+  font-size: 0.85rem;
+  color: #A0A0A0;
+}
+
+/* Stilizzazione per descrizione breve del libro */
+.book-short-descr {
+  font-size: 1.1em; /* Leggermente più grande per enfatizzare l'importanza */
+  color: #666; /* Colore del testo in tono grigio scuro per un look sobrio */
+  padding: 8px; /* Padding per dare spazio intorno al testo */
+  border-left: 4px solid #007BFF; /* Linea verticale a sinistra come decorazione tradizionale delle citazioni */
+  margin: 10px 0; /* Margine sopra e sotto per distanziare dalla restante contenuto */
+  font-style: italic; /* Stile del font in corsivo per indicare che si tratta di un estratto o citazione */
+  background-color: #f4f4f4; /* Sfondo leggermente diverso per evidenziare la sezione */
+  display: block; /* Assicura che l'elemento sia trattato come blocco, occupando l'intera larghezza */
+  text-align: center; /* Giustifica il testo per una lettura più fluida */
+}
+
+/* Opzionale: Transizione per l'hover su descrizione */
+.book-short-descr:hover {
+  background-color: #e9e9e9; /* Cambio di sfondo al passaggio del mouse per un effetto interattivo */
+}
+
+.ingrandisci:hover {
+  // fai lo scale 
+  transform: scale(1.1);
+}
+
+.title-descr{
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+}
+
+.scheda-book {
+  text-align: center;
+  margin-left: 20px;
+  @media (max-width: 718px) {
+    margin-left: 5px;
+  } 
 }