modif order

user/themes/gilles_acezat/scss/theme/item.scss

@@ -1,136 +1,57 @@
-body{
-  #page-wrapper.item{
-    margin: 0 10px;
-  .contact{
-    .txt{
-      display: none
+.item{
+  #start{
+    width: calc(100% - 10px);
+  }
+}
+#items{
+  .header-item{
+    width: 100%;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    margin-bottom: 1rem;
+    .info{
+      width: calc(100% / 3);
+      .title{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        h2{
+          text-transform: uppercase;
+        }
+        & > *{
+          margin-right: 0.5rem;
+        }
+      }
+      .content{
+        margin-top: 1rem;
+      }
+    }
+    .prev-next{
+      width: calc(100% / 3);
+      position: relative;
+      .btn-info{
+        width: 250px;
+        position: absolute;
+        top: 20px;
+        left: -80px;
+        -webkit-transform: rotate(-17deg);
+                transform: rotate(-17deg);
+      }
     }
   }
-    #start{
-      margin-top: 5rem;
-    }
-    #body-wrapper.blog-listing {
-      .img-card{
-        width: calc( (100vw / 3 - calc( 41px / 3 ) ) );
-        margin-bottom: 10px;
-      }
-      .header-item{
-        position: relative;
-        margin-bottom: 1.5rem;
-        padding-top: 1.5rem;
-        .title{
-          display: -webkit-inline-box;
-          display: -ms-inline-flexbox;
-          display: inline-flex;
-          -webkit-box-align: baseline;
-              -ms-flex-align: baseline;
-                  align-items: baseline;
-          h2{
-            margin-right: 5px;
-            text-transform: uppercase;
-          }
-          time{
-            margin-right: 5px;
-          }
-          span{
-            margin-right: 5px;
-          }
-        }
-        .content{
-          width: calc((100% / 3) - 15px);
-          margin-top: 20px;
-        }
-        .prev-next{
-          width: calc(100% / 3);
-          height: 100%;
-          position: absolute;
-          top: calc( 50% + 1.5rem );
-          -webkit-transform: translateY(-50%);
-                  transform: translateY(-50%);
-          right: 0px;
-          .btn{
-              display: block;
-              width: auto;
-              height: 100%;
-          .btn-info{
-            position: absolute;
-            -webkit-transform: rotate(-15deg);
-                    transform: rotate(-15deg);
-            margin-left: 40px;
-            margin-top: 20px;
-          }
-          img{
-            float: right;
-            width: 80%;
-          }
-        }
-        }
-      }
-    }
-    .top{
-      text-align: center;
-      margin: 20px auto 20px auto;
-      width: 50px;
-      img{
-        width: 20px;
-        margin-bottom:5px;
-      }
-      p{
-        -webkit-transform: rotate(-10deg);
-                transform: rotate(-10deg);
-      }
-    }
+  .top{
+    cursor: pointer;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 10px;
   }
 }
 
-@media screen and (max-width: 960px) {
-  body{
-    #page-wrapper.item{
-      #body-wrapper.blog-listing{
-        .header-item{
-          .content{
-            width: calc((100% / 2) - 5px);
-          }
-          .prev-next{
-            width: calc((100% / 2) - 5px);
-          }
-        }
-        .img-card{
-          width: calc((100% / 2) - 5px);
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 600px) {
-  body{
-    #page-wrapper.item{
-      #body-wrapper.blog-listing{
-        .header-item{
-          .content{
-            width: calc((100%) - 15px);
-          }
-          .prev-next{
-            width: calc((100%) - 15px);
-            position: relative;
-            -webkit-transform: translateY(0%);
-                    transform: translateY(0%);
-            .btn{
-              .btn-info{
-                  display: none;
-              }
-              img{
-                float: none;
-                width: 100%;
-              }
-            }
-          }
-        }
-        .img-card{
-          width: 100%;
-        }
-      }
-    }
-  }
+.img-card{
+  width: calc((100% / 3) - (10px));
+  margin-bottom: 10px;
 }