add anime+boucleproj

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

@@ -1,19 +1,27 @@
 body{
-  & >.item{
+  #page-wrapper.item{
+    margin: 0 10px;
+  .contact{
+    .txt{display: none}
+  }
+    #start{
+      margin-top: 112px;
+    }
     #body-wrapper.blog-listing{
-      border-top: 1px solid black;
-      padding-top: 20px;
       .img-card{
-        width: 49%;
-        margin-bottom: 20px;
+        width: calc((100% / 3) - 6.5px);
+        margin-bottom: 10px;
       }
       .header-item{
         position: relative;
+        margin-bottom: 20px;
+        padding-top: 20px;
         .title{
           display: inline-flex;
           align-items: baseline;
           h2{
             margin-right: 5px;
+            text-transform: uppercase;
           }
           time{
             margin-right: 5px;
@@ -23,15 +31,20 @@ body{
           }
         }
         .content{
-          width: calc(100% / 3);
-          margin: 20px  0;
+          width: calc((100% / 3) - 15px);
+          margin-top: 20px;
         }
         .prev-next{
           width: calc(100% / 3);
-          padding-left: 20px;
+          height: 100%;
           position: absolute;
-          top: 0;
-          right: 0;
+          top: calc( 50% + 10px );
+          transform: translateY(-50%);
+          right: 0px;
+          .btn{
+              display: block;
+              width: auto;
+              height: 100%;
           .btn-info{
             position: absolute;
             transform: rotate(-15deg);
@@ -43,6 +56,7 @@ body{
             width: 80%;
           }
         }
+        }
       }
     }
     .top{
@@ -59,3 +73,54 @@ body{
     }
   }
 }
+
+@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;
+            transform: translateY(0%);
+            .btn{
+              .btn-info{
+                  display: none;
+              }
+              img{
+                float: none;
+                width: 100%;
+              }
+            }
+          }
+        }
+        .img-card{
+          width: 100%;
+        }
+      }
+    }
+  }
+}