déploiement resources
This commit is contained in:
@@ -1,56 +1,6 @@
|
||||
# Epau Antimatter
|
||||
|
||||
|
||||
# modif par Ouidade
|
||||
|
||||
##le 10/03/21
|
||||
|
||||
ai créer un module "personnes.html.twig" mais ce module n'est pas visible.
|
||||
ai donc rajouté ligne 51 à 55 dans modular.html.twig >>> marche pas
|
||||
ai rajouté lignes 11 à 16 dans personnes.html.twig >>> marche pas
|
||||
|
||||
ai essayé de remonter les champs du module Gouvernance et template personnes mais n'ai pas réussi. dans fichier features.html.twig qui est mon modèle je n'arrive pas à comprendre à quoi correspondent tous les "feature" et "features" et ".features" mentionnés (je pense qui se réfèrent à plusieurs choses différentes)
|
||||
donc je n'arrive pas à faire le lien avec mais nouveaux champs créés dans le template personnes.yaml pour réécrire personnes.html.twig
|
||||
|
||||
ai ajouter un champ de type "file" dans template features.yaml mais n'est pas visible.
|
||||
il faut que je trouve la bonne syntaxe twig a ajouter au fichier features.html.twig
|
||||
|
||||
les liens dans les champs text de Features (module programmes) ne fonctionnent pas. Pourtant bien du markdown et écrit comme dans quark.
|
||||
|
||||
## le 11/03/21
|
||||
|
||||
J'ai ajouter dans features.html.twig les lignes
|
||||
|
||||
{% if feature.logo %}
|
||||
<img src="{{ page.media[page.header.feature.logo] }}" alt=“logo_programme”/>
|
||||
{% endif %}
|
||||
|
||||
maintenant la présence d'une image est vue mais elle ne s'affiche pas. ai seulement le texte alternatif.
|
||||
|
||||
|
||||
autre pb pour le module "programmes"
|
||||
le markdown du text n'est pas pris en compte.
|
||||
j'ai essayé:
|
||||
.text:
|
||||
type: markdown
|
||||
label: Texte de présentation du programme
|
||||
validate:
|
||||
type: textarea
|
||||
.text:
|
||||
type: editor
|
||||
label: Texte de présentation du programme
|
||||
markdown: true
|
||||
|
||||
.text:
|
||||
type: editor
|
||||
label: Texte de présentation du programme
|
||||
markdown: true
|
||||
|
||||
|
||||
|
||||
#fin des modifs par Ouidade
|
||||
|
||||
|
||||
|
||||
|
||||
Epau Antimatter is the default [Grav](http://getgrav.org) theme. Simple, fast and modern.
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata);
|
||||
#header #logo h3, #header #navbar .panel-activation, #footer p {
|
||||
position: relative;
|
||||
@@ -798,6 +799,16 @@ ul.pagination {
|
||||
#body > script:first-child + .grav-lightslider {
|
||||
margin-top: -3rem; }
|
||||
|
||||
#sb-site {
|
||||
background: none !important; }
|
||||
#sb-site #body {
|
||||
background: none !important;
|
||||
padding-bottom: 2rem !important; }
|
||||
|
||||
#header.scrolled {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem; }
|
||||
|
||||
#header #navbar ul.navigation li a {
|
||||
font-family: "Sarabun", sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -828,6 +839,11 @@ ul.pagination {
|
||||
padding: 0.5rem;
|
||||
max-height: 3rem;
|
||||
margin: auto; }
|
||||
#logo #gouv {
|
||||
padding-right: 4rem; }
|
||||
|
||||
#body p:empty {
|
||||
display: none; }
|
||||
|
||||
.callout {
|
||||
padding-top: 0.5rem; }
|
||||
@@ -880,31 +896,8 @@ ul.pagination {
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem; }
|
||||
|
||||
.paralax {
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between; }
|
||||
.paralax #photo1 {
|
||||
position: relative;
|
||||
top: -60px; }
|
||||
.paralax #photo2 {
|
||||
z-index: 0;
|
||||
width: 700px !important;
|
||||
position: relative;
|
||||
top: 260px; }
|
||||
.paralax #photo3 {
|
||||
z-index: 0;
|
||||
width: 700px !important;
|
||||
position: relative;
|
||||
top: 500px; }
|
||||
.paralax #photo4 {
|
||||
z-index: 0;
|
||||
width: 700px !important;
|
||||
position: relative;
|
||||
top: 300px; }
|
||||
.parallax-window {
|
||||
background: transparent; }
|
||||
|
||||
.programme {
|
||||
z-index: 1;
|
||||
@@ -920,7 +913,8 @@ ul.pagination {
|
||||
.programme p {
|
||||
font-family: "Sarabun", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: italic; }
|
||||
font-style: italic;
|
||||
padding-bottom: 1.5rem; }
|
||||
|
||||
.programme:hover {
|
||||
background-color: #000;
|
||||
@@ -930,6 +924,42 @@ ul.pagination {
|
||||
.programme:hover h4 {
|
||||
color: #fff; }
|
||||
|
||||
/*CSS pour afficher/masquer un texte via un bouton*/
|
||||
/*Style du module TEXTE*/
|
||||
.texte-cache {
|
||||
position: relative;
|
||||
max-height: 400px;
|
||||
/*Hauteur du texte visible avant le clic*/
|
||||
overflow: hidden;
|
||||
/*On cache tout ce qui dépasse des 500px*/
|
||||
transition: max-height 1s ease;
|
||||
/* Transition CSS entre l'ouverture et la fermeture*/ }
|
||||
|
||||
/*Style du module TEXTE lorsqu'il est ouvert*/
|
||||
.texte-cache.ouvert {
|
||||
max-height: 100vh;
|
||||
/* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
|
||||
|
||||
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
|
||||
.texte-cache:not(.ouvert)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
|
||||
.bouton-ouverture {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: solid;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
left: 45%;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 5rem; }
|
||||
|
||||
.gouvernance {
|
||||
background-color: #000;
|
||||
color: #ffffff;
|
||||
@@ -938,13 +968,17 @@ ul.pagination {
|
||||
padding-top: 2rem; }
|
||||
|
||||
.mozaique_personnes {
|
||||
background-color: #d5d2d1; }
|
||||
background-color: #d5d2d1;
|
||||
padding-bottom: 4rem; }
|
||||
.mozaique_personnes .equipe {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 54%;
|
||||
margin: auto; }
|
||||
width: 100%;
|
||||
padding-left: 22%;
|
||||
padding-right: 15%;
|
||||
margin: auto;
|
||||
justify-items: center; }
|
||||
.mozaique_personnes .equipe h3 {
|
||||
padding-top: 3rem;
|
||||
min-width: 100%;
|
||||
@@ -1006,7 +1040,7 @@ ul.pagination {
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
align-self: flex-end;
|
||||
margin-right: 2rem; }
|
||||
margin: auto; }
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
@@ -1042,6 +1076,56 @@ ul.pagination {
|
||||
.modal .container a.close:hover {
|
||||
color: black; }
|
||||
|
||||
#new-footer {
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
#new-footer .tothetop {
|
||||
position: absolute;
|
||||
height: 1rem;
|
||||
bottom: 16rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
#new-footer .tothetop span {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2,5rem;
|
||||
background: #fff;
|
||||
width: 4rem;
|
||||
height: 5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
text-align: top; }
|
||||
#new-footer .footer {
|
||||
display: flex;
|
||||
flex-direction: row; }
|
||||
#new-footer .footer .footer-logos {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 70%;
|
||||
align-items: center;
|
||||
margin-left: 3rem; }
|
||||
#new-footer .footer .footer-logos img {
|
||||
min-height: 4rem;
|
||||
max-height: 4rem;
|
||||
padding-right: 1rem; }
|
||||
#new-footer .footer .contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
margin-top: 1.5rem;
|
||||
align-items: flex-start; }
|
||||
#new-footer .footer .contact img {
|
||||
margin-bottom: 1rem;
|
||||
max-height: 2rem; }
|
||||
#new-footer .footer .contact svg {
|
||||
margin-bottom: 1rem; }
|
||||
#new-footer .footer .contact h6 {
|
||||
margin: 0 !important;
|
||||
font-weight: 600; }
|
||||
#new-footer .footer .contact p {
|
||||
margin: 0; }
|
||||
|
||||
.modular.header-image #header {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
box-shadow: none; }
|
||||
|
||||
@@ -27,6 +27,19 @@ function scrollHeader() {
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
//bouton "voir plus de ressources"
|
||||
// $("a.bouton-ouverture").removeAttr("href"); // On supprime le lien de notre bouton
|
||||
|
||||
$('.bouton-ouverture').on('click', function(){ // lorsqu'on clique sur le bouton
|
||||
$('.texte-cache').toggleClass('ouvert'); // On ajoute ou retire la classe CSS "ouvert"
|
||||
|
||||
if ($('.texte-cache').hasClass('ouvert')) { // Si le module texte a la classe "ouvert"
|
||||
$('.bouton-ouverture').html('Voir MOINS'); // On affiche LIRE MOINS sur le bouton
|
||||
} else {
|
||||
$('.bouton-ouverture').html('Voir PLUS'); // Sinon on affiche LIRE PLUS
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// jQuery('.your-class-here').one('inview', function (event, visible) {
|
||||
// if (visible == true) {
|
||||
@@ -116,6 +129,4 @@ jQuery(document).ready(function($){
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
Executable
+412
@@ -0,0 +1,412 @@
|
||||
/*!
|
||||
* 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));
|
||||
File diff suppressed because one or more lines are too long
@@ -16,8 +16,19 @@
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
#sb-site{
|
||||
background: none !important;
|
||||
|
||||
#body{
|
||||
background: none !important;
|
||||
padding-bottom: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#header.scrolled {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
#header #navbar ul.navigation li a {
|
||||
font-family: "Sarabun", sans-serif;
|
||||
font-weight: 400;
|
||||
@@ -57,13 +68,17 @@
|
||||
padding: 0.5rem;
|
||||
max-height: 3rem;
|
||||
margin:auto;
|
||||
|
||||
}
|
||||
#gouv {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#body {
|
||||
p:empty { display:none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -146,7 +161,7 @@
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
//
|
||||
// background-image:
|
||||
// url("/user/themes/epau-antimatter/images/14360_default_big.jpg") ,
|
||||
// url("/user/themes/epau-antimatter/images/10361_web_01.jpg") ,
|
||||
@@ -173,44 +188,49 @@
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
|
||||
.paralax {
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
// transform: translate3d(0px, -128px, 0px);
|
||||
|
||||
#photo1 {
|
||||
position: relative;
|
||||
top: -60px;
|
||||
|
||||
}
|
||||
|
||||
#photo2 {
|
||||
z-index: 0;
|
||||
width:700px !important;
|
||||
position: relative;
|
||||
top: 260px;
|
||||
}
|
||||
|
||||
#photo3 {
|
||||
z-index: 0;
|
||||
width:700px !important;
|
||||
position: relative;
|
||||
top: 500px;
|
||||
}
|
||||
|
||||
#photo4 {
|
||||
z-index: 0;
|
||||
width:700px !important;
|
||||
position: relative;
|
||||
top: 300px;
|
||||
}
|
||||
.parallax-window {
|
||||
// min-height: 400px;
|
||||
background: transparent;
|
||||
// height: 1534px;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
// .images-background {
|
||||
// position: absolute !important;
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
//
|
||||
// #photo1 {
|
||||
// position: relative;
|
||||
// top: -60px;
|
||||
//
|
||||
// }
|
||||
//
|
||||
// #photo2 {
|
||||
// z-index: 0;
|
||||
// width:700px !important;
|
||||
// position: relative;
|
||||
// top: 260px;
|
||||
// }
|
||||
//
|
||||
// #photo3 {
|
||||
// z-index: 0;
|
||||
// width:700px !important;
|
||||
// position: relative;
|
||||
// top: 300px;
|
||||
// }
|
||||
//
|
||||
// #photo4 {
|
||||
// z-index: 0;
|
||||
// width:700px !important;
|
||||
// position: relative;
|
||||
// top: 300px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
.programme {
|
||||
z-index: 1;
|
||||
@@ -224,6 +244,7 @@
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
line-height: 1.2;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -234,6 +255,7 @@
|
||||
font-family: $font-family-default;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -251,66 +273,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
// .parallax {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
//
|
||||
// /* .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;
|
||||
// } */
|
||||
/*CSS pour afficher/masquer un texte via un bouton*/
|
||||
|
||||
/*Style du module TEXTE*/
|
||||
.texte-cache {
|
||||
position: relative;
|
||||
|
||||
max-height: 400px; /*Hauteur du texte visible avant le clic*/
|
||||
overflow: hidden; /*On cache tout ce qui dépasse des 500px*/
|
||||
transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
|
||||
}
|
||||
|
||||
/*Style du module TEXTE lorsqu'il est ouvert*/
|
||||
.texte-cache.ouvert {
|
||||
max-height: 100vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
|
||||
}
|
||||
|
||||
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
|
||||
.texte-cache:not(.ouvert)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
// background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /*Couleur de notre effet*/
|
||||
}
|
||||
|
||||
.bouton-ouverture {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: solid;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
left: 45%;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 5rem;
|
||||
// align-self: flex-end;
|
||||
// margin-right: 2rem;
|
||||
// margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.gouvernance {
|
||||
background-color: #000;
|
||||
@@ -321,10 +326,9 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mozaique_personnes {
|
||||
background-color: #d5d2d1;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
|
||||
|
||||
@@ -334,10 +338,11 @@
|
||||
flex-wrap: wrap;
|
||||
// margin-left: 15%;
|
||||
// padding-right: 15%;
|
||||
width: 54%;
|
||||
|
||||
width: 100%;
|
||||
padding-left: 22%;
|
||||
padding-right: 15%;
|
||||
margin: auto;
|
||||
// justify-items: center;
|
||||
justify-items: center;
|
||||
|
||||
h3 {
|
||||
// display: flex;
|
||||
@@ -432,33 +437,17 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .mozaique :hover {
|
||||
// background-color: #000;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
|
||||
// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.bouton {
|
||||
border: solid;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
align-self: flex-end;
|
||||
margin-right: 2rem;
|
||||
margin:auto;
|
||||
}
|
||||
//
|
||||
// .bouton :hover {
|
||||
@@ -539,3 +528,75 @@
|
||||
// .modal .container a.close:hover{
|
||||
// color: black;
|
||||
// }
|
||||
|
||||
#new-footer {
|
||||
// position:absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tothetop {
|
||||
position: absolute;
|
||||
// align-self: center;
|
||||
height: 1rem;
|
||||
bottom: $footer-height + 10rem;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
span {
|
||||
font-size: 1.7rem;
|
||||
line-height: 2,5rem;
|
||||
background: #fff;
|
||||
width: 4rem;
|
||||
height: 5rem;
|
||||
border-radius: $border-radius;
|
||||
display: inline-block;
|
||||
text-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.footer-logos {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 70%;
|
||||
align-items: center;
|
||||
margin-left: 3rem;
|
||||
img {
|
||||
min-height: 4rem;
|
||||
max-height: 4rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
margin-top: 1.5rem;
|
||||
align-items: flex-start;
|
||||
img {
|
||||
margin-bottom: 1rem;
|
||||
max-height: 2rem;
|
||||
}
|
||||
svg {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h6 {
|
||||
margin: 0 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
{% block javascripts %}
|
||||
{% if show_onpage_menu %}
|
||||
{% do assets.add('theme://js/singlePageNav.min.js') %}
|
||||
|
||||
{% endif %}
|
||||
{{ parent() }}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
|
||||
<div class="equipe"{{ page.header.class}}">
|
||||
<div class="equipe {{ page.header.class}}">
|
||||
{{ content|raw }}
|
||||
|
||||
|
||||
@@ -49,21 +49,3 @@
|
||||
|
||||
|
||||
</div>
|
||||
<!--
|
||||
<script>
|
||||
|
||||
// var .message = {{ personne.biographie }};
|
||||
$(".bouton").click(function(event){
|
||||
|
||||
$("#modal .message").html();
|
||||
|
||||
$("#modal").addClass("open");
|
||||
// $("#body").addClass("grey");
|
||||
|
||||
});
|
||||
|
||||
$("#modal .mask, #modal a.close").click(function(){
|
||||
$("#modal").removeClass("open");
|
||||
return false;
|
||||
});
|
||||
</script> -->
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
|
||||
<div class="programmes{{ page.header.class}}">
|
||||
<div
|
||||
class="programmes{{ page.header.class}} parallax-window"
|
||||
data-parallax="scroll"
|
||||
data-image-src="{{ url('theme://images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg') }}">
|
||||
<!-- <div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div> -->
|
||||
|
||||
|
||||
<!-- <div class="images-background parallax parallax-window" data-parallax="scroll">
|
||||
|
||||
<div class="background paralax">
|
||||
<img id="photo1" src="/user/themes/epau-antimatter/images/14360_default_big.jpg" alt="photo 1" />
|
||||
<img id="photo2" src="/user/themes/epau-antimatter/images/10361_web_01.jpg" alt="photo 2" />
|
||||
<img id="photo3" src="/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG" alt="photo 3" />
|
||||
<img id="photo4" src="/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg" alt="photo 4" />
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
{{ content|raw }}
|
||||
|
||||
|
||||
@@ -22,25 +22,33 @@
|
||||
<div class="features {{ page.header.class}}">
|
||||
|
||||
<div class="feature-items">
|
||||
{% for rapport in page.header.rapports %}
|
||||
<div class="texte-cache">
|
||||
{% for rapport in page.header.rapports %}
|
||||
|
||||
<div class="feature">
|
||||
<div class="feature ">
|
||||
|
||||
{% if rapport.couverture and rapport.pdf %}
|
||||
<a href="{{page.media[rapport.pdf].url|e }}" download >
|
||||
<img src="{{page.media[rapport.couverture].url|e }}" alt="couverture du {{rapport.titre_du_rapport}}" />
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if rapport.titre_du_rapport %}
|
||||
<h4>{{ rapport.titre_du_rapport }}</h4>
|
||||
{% endif %}
|
||||
{% if rapport.texte_de_presentation %}
|
||||
<p>{{ rapport.texte_de_presentation|markdown }}</p>
|
||||
{% endif %}
|
||||
{% if rapport.couverture and rapport.pdf %}
|
||||
<a href="{{page.media[rapport.pdf].url|e }}" download >
|
||||
<img src="{{page.media[rapport.couverture].url|e }}" alt="couverture du {{rapport.titre_du_rapport}}" />
|
||||
{% endif %}
|
||||
{% if rapport.titre_du_rapport %}
|
||||
<h4>{{ rapport.titre_du_rapport }}</h4>
|
||||
{% endif %}
|
||||
{% if rapport.texte_de_presentation %}
|
||||
<p>{{ rapport.texte_de_presentation|markdown }}</p>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <a href=""> -->
|
||||
|
||||
<button class="bouton-ouverture">Voir plus</button>
|
||||
<!-- </a> -->
|
||||
|
||||
@@ -1,9 +1,28 @@
|
||||
<div class="callout">
|
||||
{% set image = page.media.images|first %}
|
||||
{% if image %}
|
||||
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
|
||||
{% endif %}
|
||||
<div id="new-footer">
|
||||
|
||||
{{ content|raw }}
|
||||
<div class="tothetop">
|
||||
<span><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
|
||||
<div class="footer-logos">
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
|
||||
<div class="contact">
|
||||
<img src="{{ url('theme://images/EPAU_logo_EPAU_vecto-seul.svg')}}" alt="logo EPAU">
|
||||
<svg width="200" height="5" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" x2="30" stroke="black" fill="transparent" stroke-width="5"/>
|
||||
</svg>
|
||||
<h6>CONTACT :</h6>
|
||||
|
||||
<p>Fabienne.Dran@developpement-durable.gouv.fr</br>
|
||||
+33 (0)1 40 81 9327</br>
|
||||
+33 (0)7 86 5033 31.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
{% do assets.addJs('jquery', 101) %}
|
||||
{% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %}
|
||||
{% do assets.addJs('theme://js/antimatter.js') %}
|
||||
|
||||
{% do assets.addJs('theme://js/parallax.js') %}
|
||||
{% do assets.addJs('theme://js/slidebars.min.js') %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -52,8 +52,8 @@
|
||||
|
||||
<div id="logo">
|
||||
|
||||
<img src="/user/pages/01.home/Republique-francaise-logo-sans-text.svg" alt="logo République Française">
|
||||
<img src="user/pages/01.home/EPAU_logo_EPAU_vecto-seul.svg" alt="logo EPAU">
|
||||
<img id="gouv" src="/user/pages/01.home/Republique-francaise-logo-sans-text.svg" alt="logo République Française">
|
||||
<img id="epau" src="user/pages/01.home/EPAU_logo_EPAU_vecto-seul.svg" alt="logo EPAU">
|
||||
|
||||
</div>
|
||||
|
||||
@@ -81,14 +81,14 @@
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<!-- {% block footer %}
|
||||
<footer id="footer">
|
||||
<div class="totop">
|
||||
<span><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
|
||||
</div>
|
||||
<p><a href="http://getgrav.org">Grav</a> was <i class="fa fa-code"></i> with <i class="fa fa-heart"></i> by <a href="http://www.rockettheme.com">RocketTheme</a>.</p>
|
||||
|
||||
</footer>
|
||||
{% endblock %}
|
||||
{% endblock %} -->
|
||||
</div>
|
||||
{% block sidebar_navigation %}
|
||||
<div class="sb-slidebar sb-left sb-width-thin">
|
||||
|
||||
@@ -22,6 +22,8 @@
|
||||
{{ p.menu }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
@@ -51,5 +53,5 @@
|
||||
{% if config.plugins.login.enabled and grav.user.username %}
|
||||
<li><i class="fa fa-lock"></i> {% include 'partials/login-status.html.twig' %}</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user