Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version

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

@@ -450,7 +450,33 @@ html {
     background-color: beige;
 }
 
+.sorting-container{
+    width:100%;
+    float:right;
+    margin-right:5%;
+    margin-left:5%;
+    margin-top:15px;
+    margin-bottom:15px;
+}
 
+.sorting-dropdown{
+    width:fit-content;
+    margin:auto;
+    float:right;
+}
+
+.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
 /* -------------------------------------------------------- */
@@ -458,6 +484,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;
+    }
 }
 
 
@@ -471,6 +529,14 @@ html {
         width: 85%;
     }
 
+    .btn-load-more{
+        width:85%;
+    }
+
+    .btn-load-more{
+        width:85%;
+    }
+
     .featured-img {
         border: 5px purple double;
         width: 100%;