souligné H1, pas réussi animation js on scroll. alimation css hover ok

user/themes/epau-antimatter/css-compiled/template.css

@@ -835,16 +835,35 @@ ul.pagination {
 .callout h1, h2, h3, p {
   text-align: left !important; }
 
-.callout h1 {
+.callout {
-  padding-bottom: 5rem; }
+  padding-right: 0rem !important;
+  padding-left: 0rem !important; }
+  .callout h2 {
+    text-transform: capitalize;
+    font-weight: 300;
+    font-size: 1rem; }
+
+.titre_nsb {
+  display: block;
+  margin-right: 52%; }
+  .titre_nsb h1 {
+    margin-bottom: 0rem !important;
+    text-align: right;
+    padding-right: 0rem !important; }
 
 .titre_bsn {
   display: block;
-  margin-left: 40%;
+  margin-left: 40%; }
-  margin-right: 15%; }
   .titre_bsn h1 {
     text-align: left;
-    padding-bottom: 3rem; }
+    margin-bottom: 0rem !important; }
+  .titre_bsn p {
+    padding-right: 15%; }
+
+.after-h1 {
+  transition: width 5s ease-in-out; }
+  .after-h1:hover {
+    width: 100%; }
 
 .programmes {
   display: flex;

user/themes/epau-antimatter/css/custom.css

@@ -1,186 +0,0 @@
-/* #header #navbar ul.navigation li a {
-    font-family: "Sarabun", sans-serif;
-    font-weight: 400;
-    text-transform: uppercase;
-    font-size: 1rem;
-    display: inline-block;
-    padding: 0.3rem 0.8rem;
-    -webkit-backface-visibility: hidden;
-
-}
-
-
-  #header.scrolled #navbar  ul.navigation li a {
-      color: black !important;
-      font-size: 0.95rem;
-
-      transition:0.6s ease-in-out;
-
-  }
-
-
-.callout {
-  background-color: #000;
-  color: white;
-  padding-top: 0.5rem;
-}
-
-.callout h1, h2, h3, p {
-  text-align: left !important;
-
-  }
-
-.callout h1 {
-  padding-bottom: 5rem;
-}
-
-h2 {
-  font-size: 30px;
-  font-weight: lighter;
-  line-height: 35px;
-}
-
-.titre_bsn {
-  display: block;
-  margin-left: 40%;
-  margin-right: 15%;
-}
-
-.titre_bsn h1 {
-  text-align: left;
-  padding-bottom: 3rem;
-}
-
-
-
-.programmes {
-  display: flex;
-  flex-wrap: wrap;
-  background-color: #d5d2d1;
-  justify-content: center;
-  padding-left: 15%;
-  padding-right: 15%;
-
-  padding-top: 8rem;
-  padding-bottom: 8rem;
-}
-
-
-
-    .programme {
-      max-width: 45%;
-      padding: 1.5rem;
-      background-color: white;
-      margin: 0.4rem;
-
-    }
-
-    .programme h4 {
-      text-transform: uppercase;
-    }
-
-    .programme img {
-      max-width: 30%;
-    }
-
-    .programmes :hover {
-      background-color: #000;
-      color: #ffffff;
-      transition:0.2s ease-in-out;
-    }
-
-    /* .titre_nsb {
-      display: block;
-      position: absolute;
-      margin-right: 39%;
-    } */
-
-
-/* .ressources {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    background-color: #ffffff;
-    padding-top: 8rem;
-    padding-right: 5rem;
-    padding-left: 5rem;
-  } */
-
-    /* .ressource {
-      max-width: 20%;
-      margin-block: 5rem;
-      flex-wrap: wrap;
-      flex: 0 1 15%;
-    } */
-
-
-/*
-.ressources h1 {
-  text-transform: uppercase;
-  background-color: #fff;
-  color: #000;
-  padding-top: 5rem;
-  padding-bottom: 6rem;
-} */
-
-/* .ressources {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 3rem;
-  grid-auto-rows: auto;
-  background-color: #ffffff;
-  padding-top: 18rem;
-  justify-items: center;
-  position: relative;
-  margin-right: 10%;
-  margin-bottom: 6rem;
-  margin-left: 10%;
-} */
-
-/* .ressources img {
-  max-width: 50%;
-} */
-
-/* .ressource h1 h2 h3 h4 {
-  margin: 0.2rem;
-} */
-/* 
-.gouvernance {
-  background-color: #000;
-  color: #ffffff;
-  text-transform: uppercase;
-  padding-bottom: 6rem;
-  padding-top: 2rem;
-}
-.gouverance h1 {
-  padding-bottom: 5rem;
-}
-
-.mozaique_personnes {
-  background-color: #d5d2d1
-}
-
-.mozaique_personnes h3 {
-  margin-top: 0px !important;
-  padding-top: 3rem;
-  padding-left: 15%;
-  padding-right: 15%;
-  font-family: "Sarabun";
-  font-weight: 800;
-  font-size: 1rem;
-  line-height: 20px;
-}
-
-.personne {
-  background-color: #fff;
-  display: flex;
-
-  justify-items: center;
-  position: relative;
-  margin-right: 10%;
-  margin-bottom: 6rem;
-  margin-left: 10%;
-}
-.portrait {
-  max-width: 20%;
-} */ */

user/themes/epau-antimatter/js/antimatter.js

@@ -9,10 +9,31 @@ function scrollHeader() {
         $("#header").removeClass("scrolled");
 }
 
+// Souligné horizontal sur titre block
+//
+//
+//   var title = $(document).querySelectorAll("h1");
+//   var start = (document).querySelectorAll(".after-h1");
+// //     var finish = document.querySelectorAll(".after-h1-finish")
+// function isInView(event, visible) {
+//     if title(visible == true) {
+//       console.log("je te vois");
+//     }
+//     else {
+//       console.log("je ne te vois pas");
+//     }
+// };
+
+
 jQuery(document).ready(function($){
 
-    // paralax
+
-  //  $('.parallax-window').parallax({imageSrc: '{/pages/02._programmes/10361_web_01.jpg}'});
+// jQuery('.your-class-here').one('inview', function (event, visible) {
+//     if (visible == true) {
+//       //Enjoy !
+//     }
+// });
+
 
 
     // ON SCROLL EVENTS
@@ -59,4 +80,42 @@ jQuery(document).ready(function($){
     });
 
 
+    // Animate on scroll
+    $(function() {
+
+      var $window           = $(window),
+          win_height_padded = $window.height() * 1.1,
+          isTouch           = Modernizr.touch;
+
+      if (isTouch) { $('.after-h1').addClass('animated'); }
+
+      $window.on('scroll', revealOnScroll);
+
+      function revealOnScroll() {
+        var scrolled = $window.scrollTop(),
+            win_height_padded = $window.height() * 1.1;
+
+        // Show...
+        $(".after-h1:not(.animated)").each(function () {
+          var $this     = $(this),
+              offsetTop = $this.offset().top;
+
+          if (scrolled + win_height_padded > offsetTop) {
+            if ($this.data('timeout')) {
+              window.setTimeout(function(){
+                $this.addClass('animated ' + $this.data('animation'));
+              }, parseInt($this.data('timeout'),10));
+            } else {
+              $this.addClass('animated ' + $this.data('animation'));
+            }
+          }
+        });
+      }
+
+      revealOnScroll();
+    });
+
+
+
+
 });

user/themes/epau-antimatter/js/parallax.js

@@ -1,412 +0,0 @@
-/*!
- * parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
- * @copyright 2016 PixelCog, Inc.
- * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
- */
-
-;(function ( $, window, document, undefined ) {
-
-  // Polyfill for requestAnimationFrame
-  // via: https://gist.github.com/paulirish/1579671
-
-  (function() {
-    var lastTime = 0;
-    var vendors = ['ms', 'moz', 'webkit', 'o'];
-    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
-      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
-    }
-
-    if (!window.requestAnimationFrame)
-      window.requestAnimationFrame = function(callback) {
-        var currTime = new Date().getTime();
-        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
-          timeToCall);
-        lastTime = currTime + timeToCall;
-        return id;
-      };
-
-    if (!window.cancelAnimationFrame)
-      window.cancelAnimationFrame = function(id) {
-        clearTimeout(id);
-      };
-  }());
-
-
-  // Parallax Constructor
-
-  function Parallax(element, options) {
-    var self = this;
-
-    if (typeof options == 'object') {
-      delete options.refresh;
-      delete options.render;
-      $.extend(this, options);
-    }
-
-    this.$element = $(element);
-
-    if (!this.imageSrc && this.$element.is('img')) {
-      this.imageSrc = this.$element.attr('src');
-    }
-
-    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
-
-    if (positions.length < 1) {
-      positions.push('center');
-    }
-    if (positions.length == 1) {
-      positions.push(positions[0]);
-    }
-
-    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
-      positions = [positions[1], positions[0]];
-    }
-
-    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
-    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
-
-    self.positionX = positions[0];
-    self.positionY = positions[1];
-
-    if (this.positionX != 'left' && this.positionX != 'right') {
-      if (isNaN(parseInt(this.positionX))) {
-        this.positionX = 'center';
-      } else {
-        this.positionX = parseInt(this.positionX);
-      }
-    }
-
-    if (this.positionY != 'top' && this.positionY != 'bottom') {
-      if (isNaN(parseInt(this.positionY))) {
-        this.positionY = 'center';
-      } else {
-        this.positionY = parseInt(this.positionY);
-      }
-    }
-
-    this.position =
-      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
-      this.positionY + (isNaN(this.positionY)? '' : 'px');
-
-    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
-      if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
-        this.$element.css({
-          backgroundImage: 'url(' + this.imageSrc + ')',
-          backgroundSize: 'cover',
-          backgroundPosition: this.position
-        });
-      }
-      return this;
-    }
-
-    if (navigator.userAgent.match(/(Android)/)) {
-      if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
-        this.$element.css({
-          backgroundImage: 'url(' + this.imageSrc + ')',
-          backgroundSize: 'cover',
-          backgroundPosition: this.position
-        });
-      }
-      return this;
-    }
-
-    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
-
-    var slider = this.$element.find('>.parallax-slider');
-    var sliderExisted = false;
-
-    if (slider.length == 0)
-      this.$slider = $('<img />').prependTo(this.$mirror);
-    else {
-      this.$slider = slider.prependTo(this.$mirror)
-      sliderExisted = true;
-    }
-
-    this.$mirror.addClass('parallax-mirror').css({
-      visibility: 'hidden',
-      zIndex: this.zIndex,
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      overflow: 'hidden'
-    });
-
-    this.$slider.addClass('parallax-slider').one('load', function() {
-      if (!self.naturalHeight || !self.naturalWidth) {
-        self.naturalHeight = this.naturalHeight || this.height || 1;
-        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
-      }
-      self.aspectRatio = self.naturalWidth / self.naturalHeight;
-
-      Parallax.isSetup || Parallax.setup();
-      Parallax.sliders.push(self);
-      Parallax.isFresh = false;
-      Parallax.requestRender();
-    });
-
-    if (!sliderExisted)
-      this.$slider[0].src = this.imageSrc;
-
-    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
-      this.$slider.trigger('load');
-    }
-
-  }
-
-
-  // Parallax Instance Methods
-
-  $.extend(Parallax.prototype, {
-    speed:    0.2,
-    bleed:    0,
-    zIndex:   -100,
-    iosFix:   true,
-    androidFix: true,
-    position: 'center',
-    overScrollFix: false,
-    mirrorContainer: 'body',
-
-    refresh: function() {
-      this.boxWidth        = this.$element.outerWidth();
-      this.boxHeight       = this.$element.outerHeight() + this.bleed * 2;
-      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
-      this.boxOffsetLeft   = this.$element.offset().left;
-      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
-
-      var winHeight = Parallax.winHeight;
-      var docHeight = Parallax.docHeight;
-      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
-      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
-      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
-      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
-      var margin;
-
-      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
-        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
-        this.imageHeight   = imageHeightMin;
-        this.offsetBaseTop = imageOffsetMin;
-
-        margin = this.imageWidth - this.boxWidth;
-
-        if (this.positionX == 'left') {
-          this.offsetLeft = 0;
-        } else if (this.positionX == 'right') {
-          this.offsetLeft = - margin;
-        } else if (!isNaN(this.positionX)) {
-          this.offsetLeft = Math.max(this.positionX, - margin);
-        } else {
-          this.offsetLeft = - margin / 2 | 0;
-        }
-      } else {
-        this.imageWidth    = this.boxWidth;
-        this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
-        this.offsetLeft    = 0;
-
-        margin = this.imageHeight - imageHeightMin;
-
-        if (this.positionY == 'top') {
-          this.offsetBaseTop = imageOffsetMin;
-        } else if (this.positionY == 'bottom') {
-          this.offsetBaseTop = imageOffsetMin - margin;
-        } else if (!isNaN(this.positionY)) {
-          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
-        } else {
-          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
-        }
-      }
-    },
-
-    render: function() {
-      var scrollTop    = Parallax.scrollTop;
-      var scrollLeft   = Parallax.scrollLeft;
-      var overScroll   = this.overScrollFix ? Parallax.overScroll : 0;
-      var scrollBottom = scrollTop + Parallax.winHeight;
-
-      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
-        this.visibility = 'visible';
-        this.mirrorTop = this.boxOffsetTop  - scrollTop;
-        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
-        this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
-      } else {
-        this.visibility = 'hidden';
-      }
-
-      this.$mirror.css({
-        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
-        visibility: this.visibility,
-        height: this.boxHeight,
-        width: this.boxWidth
-      });
-
-      this.$slider.css({
-        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
-        position: 'absolute',
-        height: this.imageHeight,
-        width: this.imageWidth,
-        maxWidth: 'none'
-      });
-    }
-  });
-
-
-  // Parallax Static Methods
-
-  $.extend(Parallax, {
-    scrollTop:    0,
-    scrollLeft:   0,
-    winHeight:    0,
-    winWidth:     0,
-    docHeight:    1 << 30,
-    docWidth:     1 << 30,
-    sliders:      [],
-    isReady:      false,
-    isFresh:      false,
-    isBusy:       false,
-
-    setup: function() {
-      if (this.isReady) return;
-
-      var self = this;
-
-      var $doc = $(document), $win = $(window);
-
-      var loadDimensions = function() {
-        Parallax.winHeight = $win.height();
-        Parallax.winWidth  = $win.width();
-        Parallax.docHeight = $doc.height();
-        Parallax.docWidth  = $doc.width();
-      };
-
-      var loadScrollPosition = function() {
-        var winScrollTop  = $win.scrollTop();
-        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
-        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
-        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
-        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
-        Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
-      };
-
-      $win.on('resize.px.parallax load.px.parallax', function() {
-          loadDimensions();
-          self.refresh();
-          Parallax.isFresh = false;
-          Parallax.requestRender();
-        })
-        .on('scroll.px.parallax load.px.parallax', function() {
-          loadScrollPosition();
-          Parallax.requestRender();
-        });
-
-      loadDimensions();
-      loadScrollPosition();
-
-      this.isReady = true;
-
-      var lastPosition = -1;
-
-      function frameLoop() {
-        if (lastPosition == window.pageYOffset) {   // Avoid overcalculations
-          window.requestAnimationFrame(frameLoop);
-          return false;
-        } else lastPosition = window.pageYOffset;
-
-        self.render();
-        window.requestAnimationFrame(frameLoop);
-      }
-
-      frameLoop();
-    },
-
-    configure: function(options) {
-      if (typeof options == 'object') {
-        delete options.refresh;
-        delete options.render;
-        $.extend(this.prototype, options);
-      }
-    },
-
-    refresh: function() {
-      $.each(this.sliders, function(){ this.refresh(); });
-      this.isFresh = true;
-    },
-
-    render: function() {
-      this.isFresh || this.refresh();
-      $.each(this.sliders, function(){ this.render(); });
-    },
-
-    requestRender: function() {
-      var self = this;
-      self.render();
-      self.isBusy = false;
-    },
-    destroy: function(el){
-      var i,
-          parallaxElement = $(el).data('px.parallax');
-      parallaxElement.$mirror.remove();
-      for(i=0; i < this.sliders.length; i+=1){
-        if(this.sliders[i] == parallaxElement){
-          this.sliders.splice(i, 1);
-        }
-      }
-      $(el).data('px.parallax', false);
-      if(this.sliders.length === 0){
-        $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
-        this.isReady = false;
-        Parallax.isSetup = false;
-      }
-    }
-  });
-
-
-  // Parallax Plugin Definition
-
-  function Plugin(option) {
-    return this.each(function () {
-      var $this = $(this);
-      var options = typeof option == 'object' && option;
-
-      if (this == window || this == document || $this.is('body')) {
-        Parallax.configure(options);
-      }
-      else if (!$this.data('px.parallax')) {
-        options = $.extend({}, $this.data(), options);
-        $this.data('px.parallax', new Parallax(this, options));
-      }
-      else if (typeof option == 'object')
-      {
-        $.extend($this.data('px.parallax'), options);
-      }
-      if (typeof option == 'string') {
-        if(option == 'destroy'){
-            Parallax.destroy(this);
-        }else{
-          Parallax[option]();
-        }
-      }
-    });
-  }
-
-  var old = $.fn.parallax;
-
-  $.fn.parallax             = Plugin;
-  $.fn.parallax.Constructor = Parallax;
-
-
-  // Parallax No Conflict
-
-  $.fn.parallax.noConflict = function () {
-    $.fn.parallax = old;
-    return this;
-  };
-
-
-  // Parallax Data-API
-
-  $( function () { 
-    $('[data-parallax="scroll"]').parallax(); 
-  });
-
-}(jQuery, window, document));

user/themes/epau-antimatter/package-lock.json

@@ -9,9 +9,9 @@
       "version": "1.0.0",
       "license": "GPL-3.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "node-sass": "^5.0.0"
-      },
+      }
-      "devDependencies": {}
     },
     "node_modules/abbrev": {
       "version": "1.1.1",
@@ -41,6 +41,11 @@
         "node": ">=0.4.2"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
@@ -1853,6 +1858,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",

user/themes/epau-antimatter/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "animate.css": "^4.1.1",
     "node-sass": "^5.0.0"
   },
   "scripts": {
@@ -12,7 +13,6 @@
   "directories": {
     "test": "tests"
   },
-  "devDependencies": {},
   "repository": {
     "type": "git",
     "url": "https://figureslibres.io/gogs/ouidade/dev-epau.archi.fr"

user/themes/epau-antimatter/scss/template/_custom.scss

@@ -58,9 +58,47 @@
   padding: 0.5rem;
 }
 
-h1::after {
+//tentative animation when in View
+// @media () {
+//
+//   @viewport {
+//
+//   }
+//   rect.after-h1 {
+//     animation-duration: 4s;
+//     animation-timing-function: linear;
+//     animation-timeline: grow-timeline;
+//   }
+//
+//   @scroll-timeline grow-timeline {
+//     source: selector(.test);
+//     orientation: block;
+//     scroll-offsets: 250px, 300px;
+//   }
+//
+//   @keyframes grow {
+//     to { transform: translate(300px) }
+//   }
+//   @k
+
+// @keyframes souligne {
+//   0% { width: 0.5%;
+//   }
+//   100%{
+//     width: 50%;
+//   }
+// }
+//
+// // selecteur:hover,
+// // selecteur:focus,
+// selecteur:hover{
+//   animation: souligne 2s ease-in-out;
+// }
+
+
+
+
 
-}
 
 .callout {
   padding-top: 0.5rem;
@@ -71,22 +109,56 @@ h1::after {
   text-align: left !important;
   }
 
-.callout h1 {
+.callout {
-  padding-bottom: 5rem;
+    padding-right: 0rem !important;
+    padding-left: 0rem !important;
+
+    // h1 {
+    // margin-bottom: 0rem !important;
+    // }
+    h2 {
+      text-transform: capitalize;
+      font-weight: 300;
+      font-size: 1rem;
+    }
+
+}
+.titre_nsb {
+    display: block;
+    margin-right: 52%;
+
+      h1 {
+        margin-bottom: 0rem !important;
+        text-align: right;
+        padding-right: 0rem !important;
+      }
 }
 
 .titre_bsn {
   display: block;
   margin-left: 40%;
-  margin-right: 15%;
+  // padding-right: 15%;
 
     h1 {
       text-align: left;
-      padding-bottom: 3rem;
+      margin-bottom: 0rem !important;
+      // padding-bottom: 3rem;
     }
 
+    p {
+      padding-right: 15%;
+    }
 }
 
+.after-h1 {     // fonctionne mais manque "when in View"
+  transition: width 5s ease-in-out;
+  &:hover {
+    width: 100%;
+    // transition: width 5s ease-in-out;
+  }
+}
+
+
 
 // fond images en grille pour parallax
 
@@ -186,7 +258,7 @@ h1::after {
   }
 
   h4 {
-    color: #fff;    
+    color: #fff;
   }
 }
 

user/themes/epau-antimatter/templates/modular/accueil.html.twig

@@ -0,0 +1,25 @@
+<div class="callout">
+    {% set image = page.media.images|first %}
+    {% if image %}
+        {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
+    {% endif %}
+  <div class="titre_bsn">
+
+
+  <h1>EPAU</h1>
+
+  <div class="test" >
+    <svg width="100%" height="0.5rem">
+     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
+   </svg>
+  </div>
+
+  <h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
+
+  <p>Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France</p>
+
+
+
+  {{ content|raw }}
+  </div>
+</div>

user/themes/epau-antimatter/templates/modular/gouvernance.html.twig

@@ -1,7 +1,19 @@
 
 <div class="gouvernance">
+
   <div class="titre_bsn">
+
+    <h1>Gouvernance</h1>
+
+    <div class="test" >
+      <svg width="100%" height="0.5rem">
+       <rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
+     </svg>
+    </div>
+    <p> Le conseil d’administration de l’Europe des projets architecturaux et urbains et les Directions de programmes de l’Europe des projets architecturaux urbains</p>
+
     {{ page.content|raw }}
+
   </div>
 </div>
 <div class="mozaique_personnes">

user/themes/epau-antimatter/templates/modular/ressources.html.twig

@@ -1,15 +1,24 @@
 
 <div class="titre_nsb">
 
-  {{ content|raw }}
+  <h1>Ressources</h1>
 
-  <div class="after-h1">
+
+  <div class="test" >
+    <svg width="100%" height="0.5rem">
+     <rect class="after-h1" width="100%" height="100%" style="fill:rgb(0,0,0)" />
+   </svg>
+  </div>
+  <!-- <div class="after-h1-finish">
     <svg width="50%" height="0.5rem">
      <rect width="100%" height="100%" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
    </svg>
-  </div>
+  </div> -->
+
 </div>
 
+  {{ content|raw }}
+
 <div class="features {{ page.header.class}}">
 
   <div class="feature-items">

user/themes/epau-antimatter/templates/modular/text.html.twig

@@ -4,6 +4,28 @@
         {{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
     {% endif %}
   <div class="titre_bsn">
+
+
+  <h1>Contact</h1>
+
+
+  <h2></h2>
+
+  <p>Fabienne Dran
+Assistante de direction
+
+Fabienne.Dran@developpement-durable.gouv.fr
+
+    33 (0)1 40 81 93 27
+    +33 (0)7 86 50 33 31
+</p>
+
+
+    <div class="test" >
+      <svg width="50%" height="0.5rem">
+       <rect class="after-h1" width="3%" height="100%" style="fill:rgb(0,0,0)" />
+     </svg>
+    </div>
   {{ content|raw }}
   </div>
 </div>