ajout de variable dans settings et correction du check

WildCodeSchool · Feb 25, 2025 · 5897ffe · 5897ffe
1 parent 86d6baa
commit 5897ffe
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 17 deletions.
diff --git a/src/style/card.scss b/src/style/card.scss
@@ -11,7 +11,7 @@
   padding-top: 20px;
 
   .card {
-    background-image: url(pictures/background-amended.jpg);
+    background-image: $background-image-comics;
     width: 170px;
     height: 293px;
     object-fit: cover;
@@ -159,7 +159,6 @@
       display: flex;
       justify-content: center;
       align-items: end;
-      background-color: yellow;
     }
   }
 }
diff --git a/src/style/characters.scss b/src/style/characters.scss
@@ -21,17 +21,17 @@
 
   button.close-search {
     font-size: 22px bold;
-    border: 2px black solid;
+    border: 2px $background-card solid;
     border-radius: 20px;
     padding: 10px;
     background-color: transparent;
-    color: black;
+    color: $background-card;
     cursor: pointer;
 
     &:hover {
       cursor: pointer;
       filter: grayscale(0);
-      box-shadow: 6px 6px black;
+      box-shadow: 6px 6px $background-card;
       transform: translate(-2px, -2px);
     }
   }
@@ -65,7 +65,7 @@
     &:hover {
       cursor: pointer;
       filter: grayscale(0);
-      box-shadow: 6px 6px black;
+      box-shadow: 6px 6px $background-card;
       transform: translate(-2px, -2px);
     }
 
@@ -82,7 +82,7 @@
       margin: 0 auto;
       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/comics-display.scss b/src/style/comics-display.scss
@@ -1,13 +1,13 @@
 @use 'settings.scss' as *;
 
 .comics-display {
-  font-family: 'Aclonica', sans-serif;
-  color: #f4f4f4;
+  font-family: $font-family;
+  color: $text-color;
   display: flex;
   justify-content: space-around;
   align-items: center;
   gap: 12%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: $background-comics;
   max-width: 1000px;
   margin: 0.4% auto;
   overflow: hidden;
@@ -27,7 +27,7 @@
       width: 100%;
       height: 100%;
       border-radius: 0.5rem;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: 0 0 10px 0 $background-comics;
       border-radius: 2.5rem;
       border: 1px solid $text-color;
     }

diff --git a/src/style/not-found.scss b/src/style/not-found.scss
@@ -1,26 +1,25 @@
-@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
+@use 'settings.scss' as *;
 
 .notFound {
-  background: linear-gradient($primary-color, #151414 25% 76%, $primary-color);
+  background: linear-gradient($primary-color, $not-found-color 25% 76%, $primary-color);
   height: 1100px;
   display: column;
   justify-content: center;
   align-items: center;
+  font-family: $font-family;
 
   h1 {
     display: flex;
     justify-content: center;
     font-size: 100px;
     color: $text-color;
     padding-top: 60px;
-    font-family: 'Aclonica', sans-serif;
   }
   h2 {
     display: flex;
     justify-content: center;
     font-size: 50px;
     color: $text-color;
-    font-family: 'Aclonica', sans-serif;
   }
   img {
     height: 450px;
@@ -50,7 +49,6 @@
   }
 
   p {
-    font-family: 'Aclonica', sans-serif;
     font-size: 50px;
     color: $text-color;
   }

diff --git a/src/style/settings.scss b/src/style/settings.scss
@@ -2,11 +2,12 @@
 
 $text-color: #f4f4f4;
 $background-image: url('/pictures/background.png');
-$background-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+$background-image-comics: url('/pictures/background-amended.jpg');
 $background-comics: rgba(0, 0, 0, 0.5);
 $background-card: #000000bf;
 $button-color-hover: rgb(32, 73, 211);
 $primary-color: #670208;
+$not-found-color: #151414;
 
 //border-radius
 $border-radius: 0.4rem;