refining home & Accessibility & pattern css

This commit is contained in:
Antoine M 2023-06-21 17:55:38 +02:00
parent 909edadc24
commit 35276cb5f2
63 changed files with 917 additions and 248 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/CSSRulePlugin.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*!
* CSSRulePlugin 3.11.2
* https://greensock.com
*
* @license Copyright 2022, GreenSock. All rights reserved.
* Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
* @author: Jack Doyle, jack@greensock.com
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function h(){return"undefined"!=typeof window}function i(){return t||h()&&(t=window.gsap)&&t.registerPlugin&&t}function j(){return n||(s(),o||console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)")),n}var t,n,c,o,s=function _initCore(e){t=e||i(),h()&&(c=document),t&&(o=t.plugins.css)&&(n=1)},r={version:"3.11.2",name:"cssRule",init:function init(e,t,n,i,s){if(!j()||void 0===e.cssText)return!1;var r=e._gsProxy=e._gsProxy||c.createElement("div");this.ss=e,this.style=r.style,r.style.cssText=e.cssText,o.prototype.init.call(this,r,t,n,i,s)},render:function render(e,t){for(var n,i=t._pt,s=t.style,r=t.ss;i;)i.r(e,i.d),i=i._next;for(n=s.length;-1<--n;)r[s[n]]=s[s[n]]},getRule:function getRule(e){j();var t,n,i,s,r=c.all?"rules":"cssRules",o=c.styleSheets,l=o.length,u=":"===e.charAt(0);for(e=(u?"":",")+e.split("::").join(":").toLowerCase()+",",u&&(s=[]);l--;){try{if(!(n=o[l][r]))continue;t=n.length}catch(e){console.warn(e);continue}for(;-1<--t;)if((i=n[t]).selectorText&&-1!==(","+i.selectorText.split("::").join(":").toLowerCase()+",").indexOf(e)){if(!u)return i.style;s.push(i.style)}}return s},register:s};i()&&t.registerPlugin(r),e.CSSRulePlugin=r,e.default=r;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});

File diff suppressed because one or more lines are too long

11
assets/gsap/CustomEase.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/Draggable.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/EasePack.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*!
* EasePack 3.11.2
* https://greensock.com
*
* @license Copyright 2022, GreenSock. All rights reserved.
* Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
* @author: Jack Doyle, jack@greensock.com
*/
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e=e||self).window=e.window||{})}(this,function(e){"use strict";function f(){return w||"undefined"!=typeof window&&(w=window.gsap)&&w.registerPlugin&&w}function g(e,n){return!!(void 0===e?n:e&&!~(e+"").indexOf("false"))}function h(e){if(w=e||f()){r=w.registerEase;var n,t=w.parseEase(),o=function createConfig(t){return function(e){var n=.5+e/2;t.config=function(e){return t(2*(1-e)*e*n+e*e)}}};for(n in t)t[n].config||o(t[n]);for(n in r("slow",a),r("expoScale",s),r("rough",u),c)"version"!==n&&w.core.globals(n,c[n])}}function i(e,n,t){var o=(e=Math.min(1,e||.7))<1?n||0===n?n:.7:0,r=(1-e)/2,i=r+e,a=g(t);return function(e){var n=e+(.5-e)*o;return e<r?a?1-(e=1-e/r)*e:n-(e=1-e/r)*e*e*e*n:i<e?a?1===e?0:1-(e=(e-i)/r)*e:n+(e-n)*(e=(e-i)/r)*e*e*e:a?1:n}}function j(n,e,t){var o=Math.log(e/n),r=e-n;return t=t&&w.parseEase(t),function(e){return(n*Math.exp(o*(t?t(e):e))-n)/r}}function k(e,n,t){this.t=e,this.v=n,t&&(((this.next=t).prev=this).c=t.v-n,this.gap=t.t-e)}function l(e){"object"!=typeof e&&(e={points:+e||20});for(var n,t,o,r,i,a,f,s=e.taper||"none",u=[],c=0,p=0|(+e.points||20),l=p,v=g(e.randomize,!0),d=g(e.clamp),h=w?w.parseEase(e.template):0,x=.4*(+e.strength||1);-1<--l;)n=v?Math.random():1/p*l,t=h?h(n):n,o="none"===s?x:"out"===s?(r=1-n)*r*x:"in"===s?n*n*x:n<.5?(r=2*n)*r*.5*x:(r=2*(1-n))*r*.5*x,v?t+=Math.random()*o-.5*o:l%2?t+=.5*o:t-=.5*o,d&&(1<t?t=1:t<0&&(t=0)),u[c++]={x:n,y:t};for(u.sort(function(e,n){return e.x-n.x}),a=new k(1,1,null),l=p;l--;)i=u[l],a=new k(i.x,i.y,a);return f=new k(0,0,a.t?a:a.next),function(e){var n=f;if(e>n.t){for(;n.next&&e>=n.t;)n=n.next;n=n.prev}else for(;n.prev&&e<=n.t;)n=n.prev;return(f=n).v+(e-n.t)/n.gap*n.c}}var w,r,a=i(.7);(a.ease=a).config=i;var s=j(1,2);s.config=j;var u=l();(u.ease=u).config=l;var c={SlowMo:a,RoughEase:u,ExpoScaleEase:s};for(var n in c)c[n].register=h,c[n].version="3.11.2";f()&&w.registerPlugin(a),e.EasePack=c,e.ExpoScaleEase=s,e.RoughEase=u,e.SlowMo=a,e.default=c;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});

File diff suppressed because one or more lines are too long

11
assets/gsap/EaselPlugin.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*!
* EaselPlugin 3.11.2
* https://greensock.com
*
* @license Copyright 2022, GreenSock. All rights reserved.
* Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
* @author: Jack Doyle, jack@greensock.com
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function k(){return"undefined"!=typeof window}function l(){return h||k()&&(h=window.gsap)&&h.registerPlugin&&h}function m(){return r||t&&t.createjs||t||{}}function n(e){return console.warn(e)}function o(e){var t=e.getBounds&&e.getBounds();t||(t=e.nominalBounds||{x:0,y:0,width:100,height:100},e.setBounds&&e.setBounds(t.x,t.y,t.width,t.height)),e.cache&&e.cache(t.x,t.y,t.width,t.height),n("EaselPlugin: for filters to display in EaselJS, you must call the object's cache() method first. GSAP attempted to use the target's getBounds() for the cache but that may not be completely accurate. "+e)}function p(e,t,r){(b=b||m().ColorFilter)||n("EaselPlugin error: The EaselJS ColorFilter JavaScript file wasn't loaded.");for(var i,l,s,u,a,f,c=e.filters||[],d=c.length;d--;)if(c[d]instanceof b){l=c[d];break}if(l||(l=new b,c.push(l),e.filters=c),s=l.clone(),null!=t.tint)i=h.utils.splitColor(t.tint),u=null!=t.tintAmount?+t.tintAmount:1,s.redOffset=i[0]*u,s.greenOffset=i[1]*u,s.blueOffset=i[2]*u,s.redMultiplier=s.greenMultiplier=s.blueMultiplier=1-u;else for(a in t)"exposure"!==a&&"brightness"!==a&&(s[a]=+t[a]);for(null!=t.exposure?(s.redOffset=s.greenOffset=s.blueOffset=255*(t.exposure-1),s.redMultiplier=s.greenMultiplier=s.blueMultiplier=1):null!=t.brightness&&(u=t.brightness-1,s.redOffset=s.greenOffset=s.blueOffset=0<u?255*u:0,s.redMultiplier=s.greenMultiplier=s.blueMultiplier=1-Math.abs(u)),d=8;d--;)l[a=M[d]]!==s[a]&&(f=r.add(l,a,l[a],s[a],0,0,0,0,0,1))&&(f.op="easel_colorFilter");r._props.push("easel_colorFilter"),e.cacheID||o(e)}function u(e,t){if(!(e instanceof Array&&t instanceof Array))return t;var r,i,n=[],l=0,o=0;for(r=0;r<4;r++){for(i=0;i<5;i++)o=4===i?e[l+4]:0,n[l+i]=e[l]*t[i]+e[l+1]*t[i+5]+e[l+2]*t[i+10]+e[l+3]*t[i+15]+o;l+=5}return n}function z(e,t,r){(d=d||m().ColorMatrixFilter)||n("EaselPlugin: The EaselJS ColorMatrixFilter JavaScript file wasn't loaded.");for(var i,l,s,a,f=e.filters||[],c=f.length;-1<--c;)if(f[c]instanceof d){s=f[c];break}for(s||(s=new d(w.slice()),f.push(s),e.filters=f),l=s.matrix,i=w.slice(),null!=t.colorize&&(i=function _colorize(e,t,r){isNaN(r)&&(r=1);var i=h.utils.splitColor(t),n=i[0]/255,l=i[1]/255,o=i[2]/255,s=1-r;return u([s+r*n*x,r*n*y,r*n*_,0,0,r*l*x,s+r*l*y,r*l*_,0,0,r*o*x,r*o*y,s+r*o*_,0,0,0,0,0,1,0],e)}(i,t.colorize,Number(t.colorizeAmount))),null!=t.contrast&&(i=function _setContrast(e,t){return isNaN(t)?e:u([t+=.01,0,0,0,128*(1-t),0,t,0,0,128*(1-t),0,0,t,0,128*(1-t),0,0,0,1,0],e)}(i,Number(t.contrast))),null!=t.hue&&(i=function _setHue(e,t){if(isNaN(t))return e;t*=Math.PI/180;var r=Math.cos(t),i=Math.sin(t);return u([x+r*(1-x)+i*-x,y+r*-y+i*-y,_+r*-_+i*(1-_),0,0,x+r*-x+.143*i,y+r*(1-y)+.14*i,_+r*-_+-.283*i,0,0,x+r*-x+i*-(1-x),y+r*-y+i*y,_+r*(1-_)+i*_,0,0,0,0,0,1,0,0,0,0,0,1],e)}(i,Number(t.hue))),null!=t.saturation&&(i=function _setSaturation(e,t){if(isNaN(t))return e;var r=1-t,i=r*x,n=r*y,l=r*_;return u([i+t,n,l,0,0,i,n+t,l,0,0,i,n,l+t,0,0,0,0,0,1,0],e)}(i,Number(t.saturation))),c=i.length;-1<--c;)i[c]!==l[c]&&(a=r.add(l,c,l[c],i[c],0,0,0,0,0,1))&&(a.op="easel_colorMatrixFilter");r._props.push("easel_colorMatrixFilter"),e.cacheID||o(),r._matrix=l}function A(e){h=e||l(),k()&&(t=window),h&&(g=1)}var h,g,t,r,b,d,M="redMultiplier,greenMultiplier,blueMultiplier,alphaMultiplier,redOffset,greenOffset,blueOffset,alphaOffset".split(","),w=[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],x=.212671,y=.71516,_=.072169,i={version:"3.11.2",name:"easel",init:function init(e,t,r,i,l){var o,s,u,a,f,c,d;for(o in g||(A(),h||n("Please gsap.registerPlugin(EaselPlugin)")),this.target=e,t)if(f=t[o],"colorFilter"===o||"tint"===o||"tintAmount"===o||"exposure"===o||"brightness"===o)u||(p(e,t.colorFilter||t,this),u=!0);else if("saturation"===o||"contrast"===o||"hue"===o||"colorize"===o||"colorizeAmount"===o)a||(z(e,t.colorMatrixFilter||t,this),a=!0);else if("frame"===o){if("string"==typeof f&&"="!==f.charAt(1)&&(c=e.labels))for(d=0;d<c.length;d++)c[d].label===f&&(f=c[d].position);(s=this.add(e,"gotoAndStop",e.currentFrame,f,i,l,Math.round,0,0,1))&&(s.op=o)}else null!=e[o]&&this.add(e,o,"get",f)},render:function render(e,t){for(var r=t._pt;r;)r.r(e,r.d),r=r._next;t.target.cacheID&&t.target.updateCache()},register:A,registerCreateJS:function(e){r=e}};l()&&h.registerPlugin(i),e.EaselPlugin=i,e.default=i;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});

File diff suppressed because one or more lines are too long

11
assets/gsap/Flip.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/MotionPathPlugin.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/Observer.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/PixiPlugin.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/ScrollToPlugin.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
/*!
* ScrollToPlugin 3.11.2
* https://greensock.com
*
* @license Copyright 2022, GreenSock. All rights reserved.
* Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
* @author: Jack Doyle, jack@greensock.com
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function k(){return"undefined"!=typeof window}function l(){return u||k()&&(u=window.gsap)&&u.registerPlugin&&u}function m(e){return"string"==typeof e}function n(e){return"function"==typeof e}function o(e,t){var o="x"===t?"Width":"Height",n="scroll"+o,r="client"+o;return e===T||e===i||e===c?Math.max(i[n],c[n])-(T["inner"+o]||i[r]||c[r]):e[n]-e["offset"+o]}function p(e,t){var o="scroll"+("x"===t?"Left":"Top");return e===T&&(null!=e.pageXOffset?o="page"+t.toUpperCase()+"Offset":e=null!=i[o]?i:c),function(){return e[o]}}function r(e,t){if(!(e=f(e)[0])||!e.getBoundingClientRect)return console.warn("scrollTo target doesn't exist. Using 0")||{x:0,y:0};var o=e.getBoundingClientRect(),n=!t||t===T||t===c,r=n?{top:i.clientTop-(T.pageYOffset||i.scrollTop||c.scrollTop||0),left:i.clientLeft-(T.pageXOffset||i.scrollLeft||c.scrollLeft||0)}:t.getBoundingClientRect(),l={x:o.left-r.left,y:o.top-r.top};return!n&&t&&(l.x+=p(t,"x")(),l.y+=p(t,"y")()),l}function s(e,t,n,l,s){return isNaN(e)||"object"==typeof e?m(e)&&"="===e.charAt(1)?parseFloat(e.substr(2))*("-"===e.charAt(0)?-1:1)+l-s:"max"===e?o(t,n)-s:Math.min(o(t,n),r(e,t)[n]-s):parseFloat(e)-s}function t(){u=l(),k()&&u&&document.body&&(T=window,c=document.body,i=document.documentElement,f=u.utils.toArray,u.config({autoKillThreshold:7}),v=u.config(),a=1)}var u,a,T,i,c,f,v,y={version:"3.11.2",name:"scrollTo",rawVars:1,register:function register(e){u=e,t()},init:function init(e,o,r,l,i){a||t();var c=this,f=u.getProperty(e,"scrollSnapType");c.isWin=e===T,c.target=e,c.tween=r,o=function _clean(e,t,o,r){if(n(e)&&(e=e(t,o,r)),"object"!=typeof e)return m(e)&&"max"!==e&&"="!==e.charAt(1)?{x:e,y:e}:{y:e};if(e.nodeType)return{y:e,x:e};var l,s={};for(l in e)s[l]="onAutoKill"!==l&&n(e[l])?e[l](t,o,r):e[l];return s}(o,l,e,i),c.vars=o,c.autoKill=!!o.autoKill,c.getX=p(e,"x"),c.getY=p(e,"y"),c.x=c.xPrev=c.getX(),c.y=c.yPrev=c.getY(),"smooth"===u.getProperty(e,"scrollBehavior")&&u.set(e,{scrollBehavior:"auto"}),f&&"none"!==f&&(c.snap=1,c.snapInline=e.style.scrollSnapType,e.style.scrollSnapType="none"),null!=o.x?(c.add(c,"x",c.x,s(o.x,e,"x",c.x,o.offsetX||0),l,i),c._props.push("scrollTo_x")):c.skipX=1,null!=o.y?(c.add(c,"y",c.y,s(o.y,e,"y",c.y,o.offsetY||0),l,i),c._props.push("scrollTo_y")):c.skipY=1},render:function render(e,t){for(var n,r,l,s,i,p=t._pt,c=t.target,f=t.tween,u=t.autoKill,a=t.xPrev,y=t.yPrev,d=t.isWin,x=t.snap,g=t.snapInline;p;)p.r(e,p.d),p=p._next;n=d||!t.skipX?t.getX():a,l=(r=d||!t.skipY?t.getY():y)-y,s=n-a,i=v.autoKillThreshold,t.x<0&&(t.x=0),t.y<0&&(t.y=0),u&&(!t.skipX&&(i<s||s<-i)&&n<o(c,"x")&&(t.skipX=1),!t.skipY&&(i<l||l<-i)&&r<o(c,"y")&&(t.skipY=1),t.skipX&&t.skipY&&(f.kill(),t.vars.onAutoKill&&t.vars.onAutoKill.apply(f,t.vars.onAutoKillParams||[]))),d?T.scrollTo(t.skipX?n:t.x,t.skipY?r:t.y):(t.skipY||(c.scrollTop=t.y),t.skipX||(c.scrollLeft=t.x)),!x||1!==e&&0!==e||(r=c.scrollTop,n=c.scrollLeft,g?c.style.scrollSnapType=g:c.style.removeProperty("scroll-snap-type"),c.scrollTop=r+1,c.scrollLeft=n+1,c.scrollTop=r,c.scrollLeft=n),t.xPrev=t.x,t.yPrev=t.y},kill:function kill(e){var t="scrollTo"===e;!t&&"scrollTo_x"!==e||(this.skipX=1),!t&&"scrollTo_y"!==e||(this.skipY=1)}};y.max=o,y.getOffset=r,y.buildGetter=p,l()&&u.registerPlugin(y),e.ScrollToPlugin=y,e.default=y;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});

File diff suppressed because one or more lines are too long

11
assets/gsap/ScrollTrigger.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/TextPlugin.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
assets/gsap/gsap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

13
assets/swiper/swiper-bundle.min.css vendored Normal file

File diff suppressed because one or more lines are too long

14
assets/swiper/swiper-bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1025,6 +1025,9 @@ button:focus {
}
.cta--button {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
border-radius: 9999px;
padding-left: 2rem;
padding-right: 2rem;
@ -1037,6 +1040,15 @@ button:focus {
border-radius: 9999px;
}
.cta--circular {
display: flex;
aspect-ratio: 1 / 1;
width: 3rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
}
.cta--primary {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
@ -1044,10 +1056,43 @@ button:focus {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.cta--primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(19 0 35 / var(--tw-bg-opacity));
}
.cta--secondary {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.cta--secondary:hover {
--tw-bg-opacity: 1;
background-color: rgb(152 3 3 / var(--tw-bg-opacity));
}
.cta--outline {
border-width: 2px;
background-color: transparent;
}
.cta--outline:hover {
background-color: rgb(239, 239, 239, 0.6);
}
.cta--shadowed {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.cta--shadowed:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.cta--streched::after {
position: absolute;
content: var(--tw-content);
@ -1057,16 +1102,11 @@ button:focus {
left: 0px;
}
.cta--outline {
border-width: 2px;
background-color: transparent;
}
.cta.cta--button.cta--outline {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
--tw-text-opacity: 1;
color: rgb(47 1 84 / var(--tw-text-opacity));
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.cta--read-more {
@ -1084,11 +1124,11 @@ button:focus {
color: rgb(223 30 30 / var(--tw-text-opacity));
}
.cta--read-more .icon {
.cta--with-arrow-button .cta_arrow_button {
transition: transform 0.3s ease-in-out;
}
.cta--read-more:hover .icon {
.cta--with-arrow-button:hover .cta_arrow_button {
filter: invert(27%) sepia(69%) saturate(6074%)
hue-rotate(348deg) brightness(87%) contrast(100%);
transform: translateX(3px);
@ -1115,6 +1155,31 @@ button:focus {
transform: translateY(1px);
}
&.card-acoustique:hover .cta_arrow_button, &.card-petites-coproprietes:hover .cta_arrow_button {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
&.card-au-quotidien:hover .cta_arrow_button, &.card-isolation:hover .cta_arrow_button {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
&.card-energies:hover .cta_arrow_button, &.card-urbanisme:hover .cta_arrow_button {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
&.card-location:hover .cta_arrow_button {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}
&.card-patrimoine:hover .cta_arrow_button {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
.card-post {
position: relative;
border-radius: 1.5rem;
@ -1282,6 +1347,7 @@ button:focus {
}
.card-frequent-question {
position: relative;
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
@ -1298,8 +1364,14 @@ button:focus {
font-weight: 700;
}
.card-frequent-question__tags_container {
.card-frequent-question__details-container {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-frequent-question__tags_container {
display: flex;
flex-wrap: wrap;
-moz-column-gap: 0.75rem;
@ -1314,6 +1386,125 @@ button:focus {
padding-right: 1rem;
}
.card-frequent-question.card-acoustique:hover .cta_arrow_button, .card-frequent-question.card-petites-coproprietes:hover .cta_arrow_button {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
.card-frequent-question.card-au-quotidien:hover .cta_arrow_button, .card-frequent-question.card-isolation:hover .cta_arrow_button {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
.card-frequent-question.card-energies:hover .cta_arrow_button, .card-frequent-question.card-urbanisme:hover .cta_arrow_button {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
.card-frequent-question.card-location:hover .cta_arrow_button {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}
.card-frequent-question.card-patrimoine:hover .cta_arrow_button {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
.card-thematique {
position: relative;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
padding: 2rem;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
}
.card-thematique__thumbnail {
width: 100%;
align-self: flex-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
.card-thematique__title {
padding-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
}
.card-thematique__descritpion {
}
.card-thematique__cta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 2rem;
font-weight: 700;
}
.card-thematique__cta::after {
position: absolute;
content: var(--tw-content);
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.card-thematique__cta:hover {
opacity: 1;
}
.card-thematique__cta {
transition: font-weight 0.3s ease-in-out;
}
.card-thematique__cta .cta_arrow_button {
display: block;
width: 50px;
height: 50px;
}
.card-thematique:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
.card-thematique:hover .cta_arrow_button {
opacity: 1;
}
.card-thematique.card-acoustique:hover .cta_arrow_button, .card-thematique.card-petites-coproprietes:hover .cta_arrow_button {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
.card-thematique.card-au-quotidien:hover .cta_arrow_button, .card-thematique.card-isolation:hover .cta_arrow_button {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
.card-thematique.card-energies:hover .cta_arrow_button, .card-thematique.card-urbanisme:hover .cta_arrow_button {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
.card-thematique.card-location:hover .cta_arrow_button {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}
.card-thematique.card-patrimoine:hover .cta_arrow_button {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
/* ########### LAYOUT ############ */
.primary-menu-container {
@ -1729,6 +1920,18 @@ button#burger-menu-toggle:hover path {
display: none;
}
.site-footer__navigation-menu .extra_details {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.site-footer__navigation-menu .extra_details .social-networks {
display: flex;
gap: 1rem;
}
.site-footer__partenaires {
grid-column: span 2 / span 2;
display: flex;
@ -1871,18 +2074,41 @@ article > *:not(.entry-content),
row-gap: 2rem;
}
.menu-homegrade-footer > li.menu-item > a {
.menu-homegrade-footer li.menu-item a:hover {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
}
.menu-homegrade-footer > li.menu-item {
order: 5;
}
.menu-homegrade-footer > li.menu-item-has-children {
order: 1;
}
.menu-homegrade-footer > li.menu-item > a,
.menu-homegrade-footer h6.page-group-title {
margin-bottom: 0.5rem;
display: block;
font-weight: 700;
}
.menu-homegrade-footer h6.page-group-title {
cursor: not-allowed;
/* order: 1; */
}
.menu-homegrade-footer .sub-menu li {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
display: block;
}
.menu-homegrade-footer .wpml-ls-menu-item {
display: none;
}
/* ########### BLOCKS ############ */
/* Home */
@ -2129,6 +2355,29 @@ article > *:not(.entry-content),
margin-left: auto;
}
.swiper {
width: 600px;
height: 300px;
background-color: green;
}
/* .swiper-slide {
background-color: red !important;
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} */
.section-show-thematiques {
padding-top: 2rem;
padding-bottom: 8rem;
@ -2145,102 +2394,6 @@ article > *:not(.entry-content),
padding-top: 4rem;
}
.section-show-thematiques .card-thematique {
position: relative;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 2rem;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
}
.section-show-thematiques .card-thematique__thumbnail {
width: 100%;
align-self: flex-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
.section-show-thematiques .card-thematique__title {
padding-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
}
.section-show-thematiques .card-thematique__descritpion {
}
.section-show-thematiques .card-thematique__cta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 2rem;
font-weight: 700;
}
.section-show-thematiques .card-thematique__cta::after {
position: absolute;
content: var(--tw-content);
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.section-show-thematiques .card-thematique__cta:hover {
opacity: 1;
}
.section-show-thematiques .card-thematique__cta {
transition: font-weight 0.3s ease-in-out;
}
.section-show-thematiques .card-thematique__cta .cta_arrow_button {
display: block;
width: 50px;
height: 50px;
}
.section-show-thematiques .card-thematique:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
.section-show-thematiques .card-thematique:hover .cta_arrow_button {
opacity: 1;
}
.section-show-thematiques .card-thematique.card-acoustique:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-petites-coproprietes:hover .cta_arrow_button {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
.section-show-thematiques .card-thematique.card-au-quotidien:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-isolation:hover .cta_arrow_button {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
.section-show-thematiques .card-thematique.card-energies:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-urbanisme:hover .cta_arrow_button {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
.section-show-thematiques .card-thematique.card-location:hover .cta_arrow_button {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}
.section-show-thematiques .card-thematique.card-patrimoine:hover .cta_arrow_button {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
#block-demarches-administratives.card-large-content-container--has-illustration {
padding-top: 16rem;
}
@ -2273,6 +2426,27 @@ article > *:not(.entry-content),
column-gap: 2rem;
}
/* ########### PAGE ############ */
.demo-components .title {
padding-bottom: 4rem;
text-align: center;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
}
.demo-components .buttons {
padding-top: 8rem;
padding-bottom: 8rem;
}
.demo-components .buttons .buttons-example {
display: flex;
justify-content: center;
gap: 2rem;
}
.hover\:bg-primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));

41
demo-components.php Normal file
View File

@ -0,0 +1,41 @@
<?php get_header(); ?>
<div class="demo-components">
<section class="buttons">
<h2 class="title">Boutons</h2>
<div class="buttons-example">
<a class="cta cta--primary cta--button" href="#" target="_blank">Bouton Primaire</a>
<a class="cta cta--secondary cta--button" href="#" target="_blank">Bouton Secondaire</a>
<a class="cta cta--outline cta--button" href="#" target="_blank">Bouton Outline</a>
<a class="cta cta--button cta--shadowed" href="#" target="_blank">Bouton White Shadowed</a>
</div>
</section>
</div>
<!-- Slider main container -->
<div class=" swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<?php
get_footer();

View File

@ -62,24 +62,34 @@
);
?>
<div class="extra_details">
<?php
$social_networks = get_field('social_networks_profiles', "option");
?>
<a class="cta cta--button cta--outline" href="">Plan du site</a>
<div class="social-networks">
<a class="cta cta--circular cta--secondary" title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['facebook_profile_url'] ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icone-social-facebook.svg' ?>" alt="">
</a>
<a class="cta cta--circular cta--secondary" title="<?php echo __('Youtube', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['youtube_profile_url'] ?>">
<img src=" <?php echo get_template_directory_uri() . '/resources/img/graphic-assets/icone-social-youtube.svg' ?>" alt="">
</a>
</div>
</div>
</div>
<ul class="site-footer__partenaires">
<?php $partenaires = get_field('footer_partenaires', 'menu_' . 53)['partenaires']; ?>
<?php foreach ($partenaires as $partenaire) : ?>
<li>
<a href="<?php echo $partenaire['url'] ?>" target="_blank">
<img src='<?php echo $partenaire['logo']['url'] ?>' alt='<?php echo $partenaire['name'] ?>'>
</a>
</li>
<li>
<a href=" <?php echo $partenaire['url'] ?>" target="_blank">
<img src='<?php echo $partenaire['logo']['url'] ?>' alt='<?php echo $partenaire['name'] ?>'>
</a>
</li>
<?php endforeach; ?>
</ul>
@ -105,6 +115,8 @@
<?php wp_footer(); ?>
</body>
</html>

View File

@ -1,17 +1,16 @@
<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<?php
while ( have_posts() ) :
the_post();
the_content();
?>
<?php if (have_posts()) : ?>
<?php
while (have_posts()) :
the_post();
the_content();
?>
<?php endwhile; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php endif; ?>
<?php
get_footer();

View File

@ -1,6 +1,7 @@
<?php
require_once(__DIR__ . '/includes/errorlog.php');
require_once(__DIR__ . '/includes/rooting.php');
require_once(__DIR__ . '/includes/init.php');
require_once(__DIR__ . '/includes/blocks.php');
require_once(__DIR__ . '/includes/post_types.php');

View File

@ -47,6 +47,21 @@ function mywp_register_acf_blocks()
add_action('init', 'mywp_register_acf_blocks');
function my_register_blocks_scripts()
{
$theme = wp_get_theme();
wp_register_script('swiperjs', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js', array('tailpress'), $theme->get('Version'), true);
wp_register_script('testjs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/test.js', array('tailpress'), $theme->get('Version'), true);
}
add_action('init', 'my_register_blocks_scripts');
add_action('wp_enqueue_scripts', 'my_register_blocks_scripts');
add_action('enqueue_block_editor_assets', 'my_register_blocks_scripts');

View File

@ -55,20 +55,20 @@ function tailpress_enqueue_scripts()
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array(), $theme->get('Version'));
// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
wp_enqueue_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));
// wp_enqueue_script('swiperjs', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js', array('tailpress'), $theme->get('Version'), true);
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
// wp_register_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
}
add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts');
/* -----------------------------------------------------------
Enqueue Theme assets 🡒 Back
-----------------------------------------------------------*/
Enqueue Theme assets 🡒 Back
-----------------------------------------------------------*/
add_action('enqueue_block_editor_assets', 'tailpress_enqueue_scripts');
function enqueue_gutenberg_back_styles()
{
wp_enqueue_style('tailpress_back', tailpress_asset('css/app.css'), array());
}
add_action('enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles');
add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts');
/**
* Get asset path.
@ -126,4 +126,4 @@ function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
return $classes;
}
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);

View File

@ -7,10 +7,18 @@
function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
{
// #### MENU HOMEGRADE HEADER
if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-header" && in_array('menu-item-has-children', $item->classes, true)) {
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
}
// #### MENU HOMEGRADE FOOTER
if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-footer" && in_array('menu-item-has-children', $item->classes, true)) {
$output = '<h6 class="page-group-title">' . $item->title . '</h6>';
write_log("YOOO ITEM");
write_log($item);
}
if ($args->theme_location === "renovateur") {
$page_icon = get_field('page_icon', $item->object_id);
@ -32,4 +40,4 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
}
return $output;
}
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);

13
includes/rooting.php Normal file
View File

@ -0,0 +1,13 @@
<?php
add_action('template_redirect', 'redirect_to_demo_components_page');
function redirect_to_demo_components_page()
{
if ($_SERVER['REQUEST_URI'] == '/demo-components') {
global $wp_query;
$wp_query->is_404 = false;
status_header(200);
include(dirname(__DIR__, 1) . '/demo-components.php');
exit();
}
}

View File

@ -12,11 +12,13 @@
/* ########### COMPONENTS ############ */
@import './components/cta.css';
@import './components/card.css';
@import './components/card-post.css';
@import './components/card-large-content.css';
@import './components/section-titling.css';
@import '../../template-components/card-frequent_question.css';
@import '../../template-components/card-thematique.css';
/* ########### LAYOUT ############ */
@import './layout/header.css';
@ -35,3 +37,6 @@
@import '../../template-blocks/home/show-thematiques/show-thematiques.css';
@import '../../template-blocks/home/demarches-administratives/demarches-administratives.css';
@import '../../template-blocks/home/questions-frequentes/questions-frequentes.css';
/* ########### PAGE ############ */
@import './pages/demo-components.css';

View File

@ -0,0 +1,28 @@
&.card-acoustique:hover,
&.card-petites-coproprietes:hover {
.cta_arrow_button {
@apply filter-acoustique-coproprietes;
}
}
&.card-au-quotidien:hover,
&.card-isolation:hover {
.cta_arrow_button {
@apply filter-isolation-quotidien;
}
}
&.card-energies:hover,
&.card-urbanisme:hover {
.cta_arrow_button {
@apply filter-energies-urbanisme;
}
}
&.card-location:hover {
.cta_arrow_button {
@apply filter-location;
}
}
&.card-patrimoine:hover {
.cta_arrow_button {
@apply filter-patrimoine;
}
}

View File

@ -1,31 +1,45 @@
.cta {
@apply block w-fit my-2 text-base font-bold;
&--button {
@apply rounded-full px-8 py-4 focus:rounded-full font-bold;
@apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit;
}
&--circular {
@apply rounded-full aspect-square w-12 flex items-center justify-center;
}
&--primary {
@apply bg-primary text-white;
@apply bg-primary text-white
hover:bg-primary-hover;
}
&--secondary {
@apply bg-secondary text-white
hover:bg-secondary-hover;
}
&--outline {
@apply border-2 bg-transparent hover:bg-gray;
}
&--shadowed {
@apply shadowed;
&:hover {
@apply bg-secondary text-white;
}
}
&--streched {
@apply after:absolute after:inset-0;
}
&--outline {
@apply border-2 bg-transparent;
}
&.cta--button.cta--outline {
@apply border-black text-primary;
@apply border-black text-black;
}
&--read-more {
@apply flex text-primary hover:text-secondary w-full justify-between items-center mt-auto;
.icon {
@apply flex text-primary hover:text-secondary w-full justify-between items-center mt-auto;
}
&--with-arrow-button {
.cta_arrow_button {
transition: transform 0.3s ease-in-out;
}
&:hover .icon {
&:hover .cta_arrow_button {
filter: invert(27%) sepia(69%) saturate(6074%)
hue-rotate(348deg) brightness(87%) contrast(100%);
transform: translateX(3px);

View File

@ -29,6 +29,14 @@
@apply hidden;
}
}
.extra_details {
@apply flex flex-wrap items-center justify-between;
.social-networks {
@apply flex gap-4;
}
}
}
&__partenaires {
@apply flex col-span-2 justify-center items-center gap-12;

View File

@ -1,10 +1,30 @@
.menu-homegrade-footer {
@apply grid grid-cols-4 gap-y-8 mt-8;
> li.menu-item > a {
li.menu-item a {
@apply hover:text-secondary;
}
> li.menu-item {
order: 5;
}
> li.menu-item-has-children {
order: 1;
}
> li.menu-item > a,
h6.page-group-title {
@apply font-bold mb-2 block;
}
h6.page-group-title {
cursor: not-allowed;
/* order: 1; */
}
.sub-menu li {
@apply block my-1;
}
.wpml-ls-menu-item {
@apply hidden;
}
}

View File

@ -0,0 +1,11 @@
.demo-components {
.title {
@apply text-3xl font-bold text-center pb-16;
}
.buttons {
@apply py-32;
.buttons-example {
@apply flex justify-center gap-8;
}
}
}

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="9.238" height="17.249" viewBox="0 0 9.238 17.249">
<path id="Soustraction_11" data-name="Soustraction 11" d="M20.013,17.078l.479-3.122h-3V11.93a1.561,1.561,0,0,1,1.76-1.687h1.362V7.586A16.605,16.605,0,0,0,18.2,7.375c-2.467,0-4.079,1.5-4.079,4.2v2.379H11.38v3.122h2.742v7.546H17.5V17.078Z" transform="translate(-11.38 -7.375)" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 396 B

View File

@ -0,0 +1,3 @@
<svg id="icone-social-youtube" xmlns="http://www.w3.org/2000/svg" width="21.918" height="15.412" viewBox="0 0 21.918 15.412">
<path id="Soustraction_10" data-name="Soustraction 10" d="M26.5,10.705a2.754,2.754,0,0,0-1.938-1.95C22.854,8.294,16,8.294,16,8.294s-6.854,0-8.563.461A2.754,2.754,0,0,0,5.5,10.705a28.892,28.892,0,0,0-.458,5.31,28.892,28.892,0,0,0,.458,5.31,2.713,2.713,0,0,0,1.938,1.919c1.709.461,8.563.461,8.563.461s6.854,0,8.563-.461A2.713,2.713,0,0,0,26.5,21.325a28.892,28.892,0,0,0,.458-5.31,28.892,28.892,0,0,0-.458-5.31ZM13.758,19.274V12.756l5.729,3.259-5.729,3.259Z" transform="translate(-5.041 -8.294)" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 642 B

View File

@ -27,7 +27,6 @@ $renolution_datas = get_field('renolution_datas');
<a class="question_url" href="<?php echo $renolution_datas['demande_lien']['url'] ?>" target="<?php echo $renolution_datas['demande_lien']['target'] ?>">
<?php echo $renolution_datas['demande_lien']['title'] ?>
<img class="icon" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/icone-external-link.svg' alt=''>
</a>
</div>

View File

@ -15,6 +15,6 @@
],
"acf": {
"mode": "auto",
"renderTemplate": "aides-financieres.php"
"renderTemplate": "aides-financieres.php"
}
}

View File

@ -22,7 +22,7 @@ $block_titling_datas = get_field('block_titling_datas');
$post_tags = get_the_tags($post['ID']);
get_template_part(
'template-components/card-post',
'template-components/card-news',
null,
array(
'card_variant' => 'activite',

View File

@ -10,6 +10,11 @@
"keywords": [
"Thématiques"
],
"script": [
"showthematiquejs",
"testjs"
],
"viewScript": "show-thematique-js",
"acf": {
"mode": "auto",
"renderTemplate": "show-thematiques.php"

View File

@ -1,3 +1,25 @@
.swiper {
width: 600px;
height: 300px;
background-color: green;
}
/* .swiper-slide {
background-color: red !important;
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} */
.section-show-thematiques {
@apply pt-8 pb-32;
.thematiques-container {
@ -9,78 +31,4 @@
mx-auto
pt-16;
}
.card-thematique {
@apply bg-white flex flex-col p-8 rounded-3xl relative;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
&__thumbnail {
@apply w-full self-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
&__title {
@apply text-lg font-bold pb-4;
}
&__descritpion {
}
&__cta {
@apply after:absolute
after:inset-0
font-bold
hover:opacity-100
pt-8
flex
items-center
justify-between;
transition: font-weight 0.3s ease-in-out;
.cta_arrow_button {
@apply block;
width: 50px;
height: 50px;
}
}
&:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
.cta_arrow_button {
opacity: 1;
}
}
&.card-acoustique:hover,
&.card-petites-coproprietes:hover {
.cta_arrow_button {
@apply filter-acoustique-coproprietes;
}
}
&.card-au-quotidien:hover,
&.card-isolation:hover {
.cta_arrow_button {
@apply filter-isolation-quotidien;
}
}
&.card-energies:hover,
&.card-urbanisme:hover {
.cta_arrow_button {
@apply filter-energies-urbanisme;
}
}
&.card-location:hover {
.cta_arrow_button {
@apply filter-location;
}
}
&.card-patrimoine:hover {
.cta_arrow_button {
@apply filter-patrimoine;
}
}
}
}

View File

@ -0,0 +1,9 @@
window.addEventListener('DOMContentLoaded', (event) => {
mySwiper = new Swiper('.swiper', {
grabCursor: true,
slidesPerView: 2,
pagination: {
el: '.swiper-pagination',
},
});
});

View File

@ -11,7 +11,32 @@ $terms = get_terms(array(
?>
<section class="section-show-thematiques">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="section_titling">
<h2 class="section_titling__title"><?php echo $block_titling_datas['title'] ?></h2>
<h3 class="section_titling__subtitle"><?php echo $block_titling_datas['subtitle'] ?></h3>
@ -21,21 +46,20 @@ $terms = get_terms(array(
<?php foreach ($terms as $term) : ?>
<?php
$taxonomy_picture = get_field('taxonomy_pictures', $term);
$color = getThematiqueFamilySlug($term->slug);
?>
<div class="card-thematique card-<?php echo $term->slug ?>">
<img class="card-thematique__thumbnail" src="<?php echo $taxonomy_picture['illustration_s']['sizes']['medium'] ?>" alt="">
<h4 class="card-thematique__title text-<?php echo getThematiqueFamilySlug($term->slug) ?>"><?php echo $term->name ?></h4>
<p class="card-thematique__description"><?php echo $term->description ?></p>
<a class="card-thematique__cta hover:text-<?php echo getThematiqueFamilySlug($term->slug) ?>" href="<?php echo get_term_link($term) ?> ">
En savoir plus
<div class="cta_arrow_button">
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
</div>
</a>
</div>
get_template_part(
'template-components/card-thematique',
null,
array(
'thematique' => $term,
'post_ID' => $post_datas->ID,
'post_title' => $post_datas->post_title,
'post_excerpt' => $post_datas->post_excerpt,
)
);
?>
<?php endforeach; ?>

View File

@ -0,0 +1 @@

View File

@ -9,17 +9,23 @@ $thematique_icon = get_field('taxonomy_pictures', $args['thematique'])['icon'];
?>
<div class="card-frequent-question">
<div class="card-frequent-question card-<?php echo $args['thematique']->slug ?>">
<img class="card-frequent-question__icon" src="<?php echo $thematique_icon['url'] ?>" alt="">
<h4 class="card-frequent-question__title text-<?php echo getThematiqueFamilySlug($args['thematique']->slug) ?>"><?php echo $args['thematique']->name ?></h4>
<p class=""><?php echo $args['post_title'] ?></p>
<ul class="card-frequent-question__tags_container">
<?php if (!empty($mots_cles)) : ?>
<div class="card-frequent-question__details-container">
<ul class="card-frequent-question__tags_container">
<?php if (!empty($mots_cles)) : ?>
<?php foreach ($mots_cles as $mot_cle) : ?>
<li class="tag bg-<?php echo getThematiqueFamilySlug($args['thematique']->slug) ?>-light text-<?php echo getThematiqueFamilySlug($args['thematique']->slug) ?>"><?php echo $mot_cle->name ?></li>
<li class="tag bg-<?php echo getThematiqueFamilySlug($args['thematique']->slug) ?>-light text-<?php echo getThematiqueFamilySlug($args['thematique']->slug) ?>"><?php echo $mot_cle->name ?></li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<?php endif; ?>
</ul>
<a href="<?php echo get_permalink($args['post_ID']) ?>" class="cta--streched cta--with-arrow-button">
<img class="cta_arrow_button" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt='Lire la fiche <?php echo $args['thematique']->name ?>'>
</a>
</div>
</div>

View File

@ -1,5 +1,5 @@
.card-frequent-question {
@apply shadowed p-8 rounded-3xl;
@apply shadowed p-8 rounded-3xl relative;
&__icon {
max-width: 80px;
@ -8,12 +8,43 @@
@apply mt-4;
@apply text-xl pb-4 font-bold;
}
&__details-container {
@apply mt-4 flex justify-between items-center;
}
&__tags_container {
@apply flex flex-wrap gap-x-3 mt-4;
@apply flex flex-wrap gap-x-3;
.tag {
@apply py-1 px-4 rounded-lg;
}
}
&.card-acoustique:hover,
&.card-petites-coproprietes:hover {
.cta_arrow_button {
@apply filter-acoustique-coproprietes;
}
}
&.card-au-quotidien:hover,
&.card-isolation:hover {
.cta_arrow_button {
@apply filter-isolation-quotidien;
}
}
&.card-energies:hover,
&.card-urbanisme:hover {
.cta_arrow_button {
@apply filter-energies-urbanisme;
}
}
&.card-location:hover {
.cta_arrow_button {
@apply filter-location;
}
}
&.card-patrimoine:hover {
.cta_arrow_button {
@apply filter-patrimoine;
}
}
}

View File

@ -14,10 +14,10 @@ $post_tags = $args['post_tags'];
<div class="card-post__inner">
<p class="card-post__tag"><?php echo $post_tags[0]->name ?></p>
<h3 class="card-post__title"><?php echo $post_title ?></h3>
<a href="#" class="cta cta--read-more cta--streched ">
<a href="#" class="cta cta--read-more cta--with-arrow-button cta--streched ">
<!-- cta-read-more -->
<span><?php echo __("Lire l'article", 'deligraph-theme') ?></span>
<img class="icon" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
<img class="cta_arrow_button" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
</a>
</div>

View File

@ -0,0 +1,73 @@
.card-thematique {
@apply flex flex-col p-8 rounded-3xl relative;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
&__thumbnail {
@apply w-full self-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
&__title {
@apply text-lg font-bold pb-4;
}
&__descritpion {
}
&__cta {
@apply after:absolute
after:inset-0
font-bold
hover:opacity-100
pt-8
flex
items-center
justify-between;
transition: font-weight 0.3s ease-in-out;
.cta_arrow_button {
@apply block;
width: 50px;
height: 50px;
}
}
&:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
.cta_arrow_button {
opacity: 1;
}
}
&.card-acoustique:hover,
&.card-petites-coproprietes:hover {
.cta_arrow_button {
@apply filter-acoustique-coproprietes;
}
}
&.card-au-quotidien:hover,
&.card-isolation:hover {
.cta_arrow_button {
@apply filter-isolation-quotidien;
}
}
&.card-energies:hover,
&.card-urbanisme:hover {
.cta_arrow_button {
@apply filter-energies-urbanisme;
}
}
&.card-location:hover {
.cta_arrow_button {
@apply filter-location;
}
}
&.card-patrimoine:hover {
.cta_arrow_button {
@apply filter-patrimoine;
}
}
}

View File

@ -0,0 +1,21 @@
<?php
// $thematique est un post type object term de la taxonomie thematiques
$thematique = $args['thematique'];
$taxonomy_picture = get_field('taxonomy_pictures', $thematique);
$color = getThematiqueFamilySlug($thematique->slug);
?>
<div class="card-thematique card-<?php echo $thematique->slug ?>">
<img class="card-thematique__thumbnail" src="<?php echo $taxonomy_picture['illustration_s']['sizes']['medium'] ?>" alt="">
<h4 class="card-thematique__title text-<?php echo getThematiqueFamilySlug($thematique->slug) ?>"><?php echo $thematique->name ?></h4>
<p class="card-thematique__description"><?php echo $thematique->description ?></p>
<a class="card-thematique__cta hover:text-<?php echo getThematiqueFamilySlug($thematique->slug) ?>" href="<?php echo get_term_link($thematique) ?> ">
En savoir plus
<div class="cta_arrow_button">
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
</div>
</a>
</div>

View File

@ -14,6 +14,11 @@
"slug": "primary",
"color": "#2F0154"
},
{
"name": "Primaire Survol",
"slug": "primary-hover",
"color": "#130023"
},
{
"name": "Secondaire",
"slug": "secondary",
@ -24,6 +29,11 @@
"slug": "secondary-light",
"color": "#FFEDEC"
},
{
"name": "Secondaire Au Survol",
"slug": "secondary-hover",
"color": "#980303"
},
{
"name": "Gris",
"slug": "gray",