modif fichiers style, ajout conditionnel de l'appartition de la bio

WildCodeSchool · Feb 24, 2025 · 3a58609 · 3a58609
1 parent f27ad74
commit 3a58609
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 58 deletions.
diff --git a/src/components/profile.jsx b/src/components/profile.jsx
@@ -18,7 +18,7 @@ export default function Profile({ characterMarvel, img, title, description, comi
                 {' '}
                 <strong>Bio :</strong>
               </h3>
-              <p>{description}</p>
+              <p>{description ? description : 'Description not avalable'}</p>
             </div>
           </div>
           <div className='comics-section'>

diff --git a/src/style/card.scss b/src/style/card.scss
@@ -98,7 +98,7 @@
       width: 150px;
 
       border: solid, $text-color;
-      background-color: black;
+      background-color: $background-card;
       opacity: 85%;
       height: 70px;
       // margin-top: 10px;

diff --git a/src/style/characters.scss b/src/style/characters.scss
@@ -15,7 +15,7 @@
     align-items: center;
     width: 100%;
     padding: 30px 0;
-    background-color: white;
+    background-color: $text-color;
     z-index: 200;
   }
 
@@ -58,7 +58,7 @@
     align-items: center;
     border:
       solid 4px,
-      white;
+      $text-color;
     border-radius: 8px;
     cursor: pointer;
 
@@ -72,7 +72,7 @@
     .character-img {
       width: 150px;
       height: 150px;
-      border: solid 4px white;
+      border: solid 4px $text-color;
       border-radius: 8px;
     }
     .character-title {
@@ -81,7 +81,7 @@
       align-items: center;
       margin: 0 auto;
       width: 150px;
-      border: solid, white;
+      border: solid, $text-color;
       background-color: black;
       opacity: 85%;
       height: 70px;
@@ -90,7 +90,7 @@
     }
 
     h2 {
-      color: white;
+      color: $text-color;
       text-align: center;
       font-size: 0.7em;
       font-family: $font-family;

diff --git a/src/style/comics-display.scss b/src/style/comics-display.scss
@@ -1,16 +1,23 @@
 @use 'settings.scss' as *;
 
 .comics-display {
-  font-family: $font-family;
-  color: $text-color;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  height: 76svh;
-  background-color: $background-comics;
+  font-family: 'Aclonica', sans-serif;
+  color: #f4f4f4;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 12%;
+  background-color: rgba(0, 0, 0, 0.5);
   max-width: 1000px;
   margin: 0.4% auto;
   overflow: hidden;
 
+  //mobile
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
   .comics-img {
     width: 67%;
     margin: 1.5rem 1rem;
@@ -22,8 +29,7 @@
       border-radius: 0.5rem;
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
       border-radius: 2.5rem;
-      border: 2px solid red;
-      margin: 1rem;
+      border: 1px solid $text-color;
     }
   }
 
@@ -32,7 +38,7 @@
     flex-direction: column;
     justify-content: left;
     width: 80%;
-    margin: 2.5rem 0;
+    padding: 2rem;
     height: 83%;
     gap: 2.5rem;
 

diff --git a/src/style/comics-page.scss b/src/style/comics-page.scss
@@ -11,9 +11,9 @@
     top: 10px;
 
     button {
-      background-color: #670208;
+      background-color: $primary-color;
       border: none;
-      color: white;
+      color: $text-color;
       padding: 10px 20px;
       border-radius: 5px;
       font-size: 1em;
@@ -23,20 +23,17 @@
     }
   }
   .typo-comics {
-    background-color: #670208;
-    font-family: 'Aclonica', sans-serif;
-    padding-top: 60px;
+    background-color: $primary-color;
+    font-family: $font-family;
     width: 140px;
     font-size: 18px;
     padding: 14px;
     border-radius: 10px;
     margin-left: 157px;
-    color: white;
-    box-shadow: 0px 2px 6px black;
-    align-items: center;
-    justify-content: center;
-    text-shadow: 3px 2px 8px black;
-    display: flex;
+    color: $text-color;
+    text-align: center;
+    box-shadow: 0px 2px 6px $background-card;
+    text-shadow: 3px 2px 8px $background-card;
   }
 }
 .comics {
@@ -61,7 +58,7 @@
       font-weight: 700;
       font-size: 1.2em;
       text-transform: lowercase;
-      color: black;
+      color: $background-card;
     }
 
     .comic-card {
@@ -74,7 +71,7 @@
       text-decoration: none;
       border:
         solid 4px,
-        white;
+        $text-color;
       border-radius: 8px;
 
       .caption {
@@ -83,9 +80,9 @@
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
-        color: white;
+        color: $text-color;
         text-align: center;
-        background-color: #0000004b;
+        background: $background-card;
         height: 100%;
 
         &.bottom {
@@ -94,7 +91,7 @@
           left: 50%;
           transform: translateX(-50%);
           opacity: 0;
-          color: white;
+          color: $text-color;
           text-decoration: underline;
           width: 60%;
         }
@@ -103,7 +100,7 @@
       &:hover {
         cursor: pointer;
         filter: grayscale(0);
-        box-shadow: 6px 6px black;
+        box-shadow: 6px 6px $background-card;
         transform: translate(-2px, -2px);
 
         .caption {

diff --git a/src/style/comics.scss b/src/style/comics.scss
@@ -19,7 +19,7 @@
   text-decoration: none;
   border:
     solid 4px,
-    white;
+    $text-color;
   border-radius: 8px;
 
   .comics-title {
@@ -28,17 +28,17 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    color: white;
+    color: $text-color;
     text-align: center;
-    background-color: #0000004b;
+    background-color: $background-card;
     height: 100%;
 
     h3 {
       font-family: $font-family;
       font-weight: 700;
       font-size: 1em;
       text-transform: lowercase;
-      color: white;
+      color: $text-color;
       :hover {
         transition: all 0.2s linear;
       }
@@ -48,7 +48,7 @@
   &:hover {
     cursor: pointer;
     filter: grayscale(0);
-    box-shadow: 6px 6px black;
+    box-shadow: 6px 6px $background-card;
     transform: translate(-2px, -2px);
     transition: all 0.2s linear;
 

diff --git a/src/style/favorite-page.scss b/src/style/favorite-page.scss
@@ -1,23 +1,23 @@
+@use 'settings.scss' as *;
 .favorite {
-  padding-top: 20px;
-  padding-left: 20px;
+  padding: 20px 0 0 20px;
 
   .favor {
     display: none;
   }
 
   .typo {
-    background-color: #670208;
+    background: $primary-color;
     font-family: 'Aclonica', sans-serif;
     padding-top: 60px;
     width: 240px;
     font-size: 16px;
     padding: 14px;
     border-radius: 10px;
     margin-left: 160px;
-    color: white;
-    box-shadow: 0px 2px 6px black;
+    color: $text-color;
+    box-shadow: 0px 2px 6px $background-card;
     align-items: center;
-    text-shadow: 3px 2px 8px black;
+    text-shadow: 3px 2px 8px $background-card;
   }
 }
diff --git a/src/style/footer.scss b/src/style/footer.scss
@@ -1,4 +1,5 @@
 @use 'settings' as *;
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -41,7 +42,7 @@
       font-size: clamp(16px, 2vw, 20px);
       text-decoration: none;
       list-style-type: none;
-      color: white;
+      color: $text-color;
       padding: 5px 10px;
 
       @media screen and (min-width: 301px) and (max-width: 644px) {

diff --git a/src/style/modal.scss b/src/style/modal.scss
@@ -8,7 +8,7 @@
   right: 0;
   bottom: 0;
   z-index: 1000;
-  background: rgba(0, 0, 0, 0.5);
+  background: $background-comics;
 
   .modal-content {
     padding: 0 20px;

diff --git a/src/style/navbar.scss b/src/style/navbar.scss
@@ -19,7 +19,7 @@
     gap: 40px;
 
     .my-link {
-      color: white;
+      color: $text-color;
       text-decoration: none;
       display: flex;
     }
@@ -35,7 +35,7 @@
       display: flex;
       align-items: center;
       font-size: 22px;
-      color: white;
+      color: $text-color;
       font-family: $font-family;
       margin-left: 20px;
     }
@@ -56,11 +56,11 @@
       background-color: transparent;
       font-size: 20px;
       width: 140px;
-      color: white;
+      color: $text-color;
     }
 
     input::placeholder {
-      color: white;
+      color: $text-color;
     }
 
     input:focus {

diff --git a/src/style/not-found.scss b/src/style/not-found.scss
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
 
 .notFound {
-  background: linear-gradient(#670208, #151414 25% 76%, #670208);
+  background: linear-gradient($primary-color, #151414 25% 76%, $primary-color);
   height: 1100px;
   display: column;
   justify-content: center;
@@ -11,15 +11,15 @@
     display: flex;
     justify-content: center;
     font-size: 100px;
-    color: white;
+    color: $text-color;
     padding-top: 60px;
     font-family: 'Aclonica', sans-serif;
   }
   h2 {
     display: flex;
     justify-content: center;
     font-size: 50px;
-    color: white;
+    color: $text-color;
     font-family: 'Aclonica', sans-serif;
   }
   img {
@@ -52,11 +52,11 @@
   p {
     font-family: 'Aclonica', sans-serif;
     font-size: 50px;
-    color: white;
+    color: $text-color;
   }
 
   p:hover {
-    color: #670208;
+    color: $primary-color;
     transition: 0.4s;
   }
 

diff --git a/src/style/profile-page.scss b/src/style/profile-page.scss
@@ -41,8 +41,12 @@
         }
       }
       .bio {
-        margin-left: 16%;
-        margin-top: 2%;
+        margin: 2% 0 0 10%;
+        border: 1px solid $background-card;
+        padding: 1rem;
+        border-radius: $border-radius;
+        background: $background-card;
+
         h3 {
           font-size: 3.3rem;
           font-family: $font-family;

diff --git a/src/style/search.scss b/src/style/search.scss
@@ -16,6 +16,6 @@ input {
   background-color: transparent;
   font-size: 22px;
   width: 100%;
-  color: black;
+  color: $background-card;
   outline: none;
 }