placed cards formes

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -5,6 +5,7 @@
 a, a:visited{
   text-decoration: none;
   color: inherit;
+  transition: color 0.15s ease-out;
 }
 
 body{
@@ -261,7 +262,60 @@ nav[role="breadcrumb"]{
 // \_|  |_/\__,_|_|_| |_|
                       
 main[role="main"]{
-  div.layout-content{
+  &>div.layout-content{
+    &>.wrapper{
+      position:relative;
+      padding-bottom: 20em;
+    }
+    nav.arrow-more{
+      text-align: center;
+      a.arrow{
+        position: relative;
+        display: inline-block;
+        $wh:30px;
+        width: $wh; height: $wh;
+        background-color: $bleu_site;
+        border-radius: $wh / 2;
+        text-indent: $wh * 3;
+        overflow: hidden;
+        
+        $bw:3px;
+        // triangle
+        &::before {
+          content: '';
+          display: block;
+          width: $wh / 3;
+          height: $wh / 3;
+          top: 50%;
+          left: 50%;
+          border-style: solid;
+          border-color: #fff;
+          border-width: $bw $bw 0 0;
+          position: absolute;
+          transform-origin: 50% 50%;
+          // downward
+          transform: rotate(135deg) translateY($wh / 3);
+        }
+        // bare
+        &::after {
+          content: '';
+          display: block;
+          top: 50%;
+          left: 50%;
+          border-style: solid;
+          border-color: #fff;
+          position: absolute;
+          transform-origin: 50% 50%;  
+          // downward
+          width: 0;
+          height: $wh / 3;
+          border-width: 0 $bw 0 0;
+          transform: translateX(-2px) translateY(-$wh / 5);
+        }
+
+      }
+
+    }
     
     article{
       
@@ -353,6 +407,10 @@ main[role="main"]{
           }
         }
       }
+
+      
+
+      }
     }
     div#partie-principes-pratique{
       position: relative;
@@ -406,6 +464,40 @@ main[role="main"]{
       }
 
     }
+
+    // FORMES
+    .bg-forme{
+        position: absolute;
+        // background-color: red;
+        width:300px; height:300px;
+        top:50%;
+        left:-300px;
+
+        z-index: -1;
+
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+
+        // &.pyramide{ background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg'); }
+        // &.infinite{ background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg'); }
+        // &.prct{ background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg'); }
+        // &.pi{ background-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg'); }
+        // &.supeg{ background-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg'); }
+        // &.cone{ background-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg'); }
+        // &.cube{ background-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg'); }
+        // &.diamant{ background-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg'); }
+        // &.croissant{ background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg'); }
+        // &.cylindre{ background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg'); }
+
+        // svg{
+        //   width: 100%;
+        //   height: 100%;
+        //   path,line,rect,circle,ellipse,polygon,polyline{
+        //     stroke-width: 1px!important;
+        //   }
+
+        // }
   }
 }
 

web_main/themes/custom/mathallo/assets/scss/partials/mixins.scss

@@ -31,6 +31,6 @@
   padding:2em;
   box-shadow: 0 0 10px rgba(0,0,0,0.25);
   max-width: 50em;
-  margin: 5em auto 0;
+  margin: 10em auto 0;
 }