ajax_notes

web/themes/custom/popsu_colloque/css/configs/mixin.scss

@@ -29,8 +29,8 @@
   transition: 0.3s transform ease, 0.3s box-shadow ease;
   &:hover{
     transform: scale(1.05);
-    transition: 0.3s all ease;
     box-shadow: 0px 0px 13px 0px $color2;
+    transition: 0.3s transform ease, 0.3s box-shadow ease;
   }
 }
 
@@ -46,7 +46,21 @@
         transition: 0.3s all ease;
         box-shadow: 0px 0px 13px 0px $color2;
       }
-
     }
   }
 }
+
+@mixin shadow_side_note{
+   img{
+    box-shadow: none;
+    transition: 0.3s transform ease, 0.3s box-shadow ease;
+  }
+    &:hover{
+      & > div img{
+        transform: scale(1.05);
+        transition: 0.3s all ease;
+        box-shadow: 0px 0px 13px 0px $color2;
+      }
+    }
+
+}

web/themes/custom/popsu_colloque/css/index.scss

@@ -50,11 +50,71 @@ article img,
   object-fit: cover;
 }
 
+#presentation{
+  .__wrapper{
+    .__wrap_side{
+      position: inherit;
+      @media screen and (min-width: 768px){
+        position: relative;
+      }
+    }
+  }
+}
+
 .side_notes{
-  & > a{
+  position: absolute;
+  width: calc(100% - 30px);
+  left: 30px;
+  width: calc(100% - 45px);
+  @media screen and (min-width: 768px){
+    margin-top: -3rem;
+  }
+  .wrap{
+    position: relative;
+    width: max-content;
+    .__hero{
+      margin: 0!important;
+      height: 200px;
+      max-width: 300px;
+      .__img{
+        height: 200px;
+        img{
+          width: auto;
+          height: 100%;
+        }
+      }
+    }
+    .__head{
+      background: white;
+      padding: 0.5rem;
+      width: max-content;
+      min-width: 300px;
+      & > *{
+        font-family: 'cormorantBold';
+        color: $color2;
+        display:inline;
+      }
+    }
+    .thumbnails.bibliographie{
+      width: 100%;
+    }
+  }
+  .close{
+    cursor: pointer;
+    background: $color2;
     position: absolute;
-    // margin-top: -5.5rem;
-    transform: translateY(-50%);
+    top: -12px;
+    left: -15px;
+    width: 30px;
+    height: 27px;
+    &::after{
+      content: "+";
+      color: white;
+      display: block;
+      margin: auto;
+      text-align: center;
+      transform: rotate(45deg);
+    }
   }
 }
 
@@ -64,7 +124,3 @@ article img,
   flex: 100%;
   max-width: 100%;
 }
-
-.side_notes .d-flex {
-  // flex-direction: column;
-}

web/themes/custom/popsu_colloque/css/pages/front.scss

@@ -62,6 +62,7 @@ header{
      font-size: 0.7rem
    }
  }
+ 
 }
 
 #block-views-block-dernieres-publications-block-1{

web/themes/custom/popsu_colloque/css/pages/layout.scss

@@ -40,7 +40,6 @@ body{
   }
 }
 
-
 article{
   .__title{
     @include croix_or;