Ajout des filtres et image de chargement.

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -353,7 +353,7 @@ html {
 
 .btn-primary{
     background-color: purple;
-    color:beige;
+    color:white;
     border-color: darkslateblue;
 }
 
@@ -369,10 +369,36 @@ html {
     margin-right: auto;
     margin-top:10px;
     margin-bottom: 10px;
-    width:85%;
+    width:30%;
 }
 
+.sorting-dropdown{
+    width:fit-content;
+    margin:auto;
+    float:right;
+}
 
+.sorting-container{
+    width:100%;
+    float:right;
+    margin-right:5%;
+    margin-left:5%;
+    margin-top:15px;
+    margin-bottom:15px;
+}
+
+.cat-load{
+    display:block;
+    margin:auto;
+    width:auto;
+    background-image: url("/public/images/cat-yarn.gif");
+    background-repeat: no-repeat;
+    background-color: white;
+    background-size: contain;
+    background-position: center;
+    mix-blend-mode: multiply;
+    height:200px;
+}
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */
@@ -380,6 +406,38 @@ html {
     .item{
         width:45%;
     }
+
+    .btn-load-more{
+        width:45%;
+    }
+
+    .sorting-dropdown{
+        
+        width:100%;
+        float:none;
+    }
+
+    .sorting-dropdown button{
+        height:60px !important; 
+        width: 100% !important;
+        font-size: larger;
+    }
+
+    .sorting-container{
+        width: 90%;
+        float:none;
+    }
+
+    .sorting-menu{
+        width: 100%;
+    }
+
+    .sorting-menu a {
+        font-size: larger;
+        height: 50px;
+        background-color: beige;
+        border: 2px white solid;
+    }
 }
 
 
@@ -393,6 +451,10 @@ html {
         width:85%;
     }
 
+    .btn-load-more{
+        width:85%;
+    }
+
     .featured-img {
         border: 5px purple double;
         width: 100%;