This commit is contained in:
2024-04-25 17:42:54 +02:00
parent 232e91ce04
commit 5c16ff54b3
10 changed files with 368 additions and 140 deletions
@@ -517,6 +517,7 @@ body #content-ontop {
top: -1200px; } top: -1200px; }
body #background-animated { body #background-animated {
width: 100VW;
z-index: -1; z-index: -1;
position: relative; position: relative;
left: -400px; } left: -400px; }
@@ -701,6 +702,24 @@ header #block-colloque2024-mainnavigation ul li {
margin: 2rem 0; } } margin: 2rem 0; } }
#presentation .__wrapper { #presentation .__wrapper {
margin-top: 1rem; } margin-top: 1rem; }
#presentation.main {
max-width: 100vw;
margin: 0;
display: flex; }
.layout {
display: flex;
flex-direction: row; }
.layout #aside-animated {
display: flex;
z-index: -1;
position: absolute;
width: 25%;
left: 0;
margin: auto;
padding: auto; }
.layout #aside-animated svg {
margin: auto; }
.container.programme { .container.programme {
padding-top: 1.5rem; } padding-top: 1.5rem; }
@@ -1972,6 +1991,8 @@ footer {
height: auto; height: auto;
padding: 2rem 0 0 0; padding: 2rem 0 0 0;
margin-top: 2rem; } margin-top: 2rem; }
footer .container {
max-width: 90vw; }
footer > .d-flex > div { footer > .d-flex > div {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem; }
@media (min-width: 992px) { @media (min-width: 992px) {
@@ -11,6 +11,7 @@ body #content-ontop {
top: -1200px; } top: -1200px; }
body #background-animated { body #background-animated {
width: 100VW;
z-index: -1; z-index: -1;
position: relative; position: relative;
left: -400px; } left: -400px; }
@@ -5,6 +5,10 @@ footer{
height: auto; height: auto;
padding: 2rem 0 0 0; padding: 2rem 0 0 0;
margin-top:2rem; margin-top:2rem;
.container{
max-width: 90vw;
}
& > .d-flex{ & > .d-flex{
& > div{ & > div{
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -14,10 +14,10 @@ body {
top: -1200px; top: -1200px;
} }
#background-animated{ #background-animated{
width: 100VW;
z-index: -1; z-index: -1;
position: relative; position: relative;
left: -400px; left: -400px;
} }
} }
@@ -15,4 +15,32 @@
.__wrapper{ .__wrapper{
margin-top: 1rem; margin-top: 1rem;
} }
&.main{
max-width: 100vw;
margin: 0;
display: flex;
}
}
.layout{
display: flex;
flex-direction: row;
#main-content-node{
}
#aside-animated{
display: flex;
z-index: -1;
position: absolute;
width: 25%;
left: 0;
margin: auto;
padding: auto;
svg{
margin: auto;
}
}
} }
@@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1900"
height="1500"
viewBox="0 0 502.70834 396.875"
version="1.1"
id="svg1"
xml:space="preserve"
sodipodi:docname="fond-ronds-trace-aside.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showguides="true"
inkscape:zoom="0.38278047"
inkscape:cx="714.50876"
inkscape:cy="579.96689"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="276"
inkscape:window-maximized="1"
inkscape:current-layer="svg1"><sodipodi:guide
position="35.251929,297.34014"
orientation="1,0"
id="guide1"
inkscape:locked="false" /></sodipodi:namedview><defs
id="defs1" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange"
cx="34.928974"
cy="164.31612"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_3"
cx="112.08936"
cy="-35.17004"
r="15.890945"
transform="rotate(90)" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6"
cx="-35.220108"
cy="-221.51985"
r="15.890945"
transform="scale(-1)" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_3"
cx="-37.172405"
cy="-36.306816"
r="15.890945"
transform="rotate(-177.50808)" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_5"
cx="280.40448"
cy="-36.387135"
r="15.890945"
transform="rotate(90.300272)" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
d="m 48.344207,100.2894 c -0.28713,1.66599 -0.86965,3.23412 -2.10196,4.64923 -0.98738,1.13385 -2.20392,2.12354 -3.70487,2.87042 -6.9722,3.4694 -16.76779,1.26697 -19.76085,-4.79211 -0.78557,-1.59028 -0.99029,-3.277907 -0.75119,-4.959168 0.36348,-2.555785 2.61939,-4.539343 3.35343,-7.00481 1.73601,-5.83083 2.62133,-11.81781 4.27621,-17.66709 0.65342,-2.30955 2.18476,-5.796465 5.66197,-6.294445 3.93983,-0.56424 5.83643,3.36487 6.56082,5.674555 0.58593,1.86819 0.59903,3.8034 0.83564,5.70306 0.51429,4.12917 0.76337,8.33141 1.93444,12.39795 0.47646,1.654513 1.74598,2.952874 2.65107,4.463245 0.88578,1.478144 1.32444,3.339432 1.04529,4.959163 z"
id="path_circle_vert_clair_erable_3" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none"
d="m 49.644548,231.85902 c -0.16719,-2.16405 -0.74796,-4.2637 -1.83301,-6.15277 -7.23004,-12.5874 -27.544402,-6.72502 -26.412082,7.93188 0.44336,5.739 2.241092,14.95781 6.932042,18.75404 4.57,3.69834 12.55101,2.81908 16.24526,-1.70959 3.53336,-4.33146 5.49519,-13.29117 5.06779,-18.82356 z"
id="path_circle_vert_clair_erable_6" /><path
style="fill:#038788;fill-opacity:1;stroke:none"
d="M 49.440746,45.994818 C 49.367804,43.825546 48.878873,41.70263 47.876983,39.76817 41.201061,26.878322 20.651026,31.85192 21.145014,46.544191 c 0.193418,5.75285 1.588628,15.041105 6.110085,19.037701 4.40488,3.893539 12.416572,3.362113 16.304229,-1.001654 3.718344,-4.173739 6.067874,-13.039679 5.881418,-18.58542 z"
id="path_circle_vert_erable_3" /><path
style="fill:#ff804d;fill-opacity:1;stroke:none"
d="m 49.067942,278.34684 c -0.178539,2.16314 -0.770305,4.25972 -1.86524,6.14307 -7.295908,12.54934 -27.579256,6.58058 -26.370138,-8.07018 0.47343,-5.7366 2.319448,-14.94586 7.030229,-18.71746 4.589319,-3.67434 12.565602,-2.75326 16.236067,1.79471 3.510612,4.34991 5.42547,13.31978 4.969082,18.84986 z"
id="path_circle_orange_5" /></svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="122.54536" height="1037.4219" viewBox="0 0 32.423461 274.48454" version="1.1"
id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs1">
<filter id="f5">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange" cx="15.902803" cy="142.31837" r="15.890945" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_3" cx="90.091621" cy="-16.143869" r="15.890945" transform="rotate(90)" />
<path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none" d="M 30.414575,23.997078 C 30.341633,21.827806 29.852702,19.70489 28.850812,17.77043 22.17489,4.8805821 1.6248554,9.8541801 2.1188434,24.546451 c 0.193418,5.75285 1.588628,15.041105 6.110085,19.037701 4.4048796,3.893539 12.4165716,3.362113 16.3042286,-1.001654 3.718344,-4.173739 6.067874,-13.039679 5.881418,-18.58542 z"
id="path_circle_vert_erable_3" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592" d="m 29.318036,78.29166 c -0.28713,1.66599 -0.86965,3.23412 -2.10196,4.64923 -0.98738,1.13385 -2.20392,2.12354 -3.70487,2.87042 -6.9722,3.4694 -16.7677896,1.26697 -19.7608496,-4.79211 -0.78557,-1.59028 -0.99029,-3.277907 -0.75119,-4.959168 0.36348,-2.555785 2.61939,-4.539343 3.35343,-7.00481 1.73601,-5.83083 2.62133,-11.81781 4.2762096,-17.66709 0.65342,-2.30955 2.18476,-5.796465 5.66197,-6.294445 3.93983,-0.56424 5.83643,3.36487 6.56082,5.674555 0.58593,1.86819 0.59903,3.8034 0.83564,5.70306 0.51429,4.12917 0.76337,8.33141 1.93444,12.39795 0.47646,1.654513 1.74598,2.952874 2.65107,4.463245 0.88578,1.478144 1.32444,3.339432 1.04529,4.959163 z"
id="path_circle_vert_clair_erable_3" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6" cx="-16.193937" cy="-199.52211" r="15.890945" transform="scale(-1)" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none" d="m 30.618377,209.86128 c -0.16719,-2.16405 -0.74796,-4.2637 -1.83301,-6.15277 -7.23004,-12.5874 -27.5444016,-6.72502 -26.4120816,7.93188 0.44336,5.739 2.241092,14.95781 6.932042,18.75404 4.5699996,3.69834 12.5510096,2.81908 16.2452596,-1.70959 3.53336,-4.33146 5.49519,-13.29117 5.06779,-18.82356 z"
id="path_circle_vert_clair_erable_6" />
<circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_3" cx="-17.207798" cy="-15.157107" r="15.890945" transform="rotate(-177.50808)" />
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_5" cx="258.50674" cy="-17.245941" r="15.890945" transform="rotate(90.300272)" />
<path style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none" d="m 30.041771,256.3491 c -0.178539,2.16314 -0.770305,4.25972 -1.86524,6.14307 -7.295908,12.54934 -27.5792556,6.58058 -26.3701376,-8.07018 0.47343,-5.7366 2.319448,-14.94586 7.030229,-18.71746 4.5893186,-3.67434 12.5656016,-2.75326 16.2360666,1.79471 3.510612,4.34991 5.42547,13.31978 4.969082,18.84986 z"
id="path_circle_orange_5" />
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

@@ -0,0 +1,21 @@
let dropdowns1 = document.getElementById('circle_vert_clair_erable_3');
function slideDown() {
let translateY = 0; // Position de départ (en bas)
let duration = 17000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.3); // Limite la progression à 0.3 (pour éviter un dépassement)
translateY = 410 * progress * (0.48 - progress); // Réduction de la vitesse vers la fin de l'animation
dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
if (progress < 0.999999) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
@@ -72,10 +72,47 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div class="__img-hero"> <div class="layout">
{{content.field_image}} <aside id="aside-animated">
</div> <svg width="122.54536" height="1037.4219" viewBox="0 0 32.423461 274.48454" version="1.1"
<article{{ attributes }} id="presentation"> id="svg1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs1">
<filter id="f5">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<g transform="scale(0.9)">
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange" cx="15.902803" cy="142.31837" r="15.890945" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_3" cx="90.091621" cy="-16.143869" r="15.890945" transform="rotate(90)" />
<path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none" d="M 30.414575,23.997078 C 30.341633,21.827806 29.852702,19.70489 28.850812,17.77043 22.17489,4.8805821 1.6248554,9.8541801 2.1188434,24.546451 c 0.193418,5.75285 1.588628,15.041105 6.110085,19.037701 4.4048796,3.893539 12.4165716,3.362113 16.3042286,-1.001654 3.718344,-4.173739 6.067874,-13.039679 5.881418,-18.58542 z"
id="path_circle_vert_erable_3" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592" d="m 29.318036,78.29166 c -0.28713,1.66599 -0.86965,3.23412 -2.10196,4.64923 -0.98738,1.13385 -2.20392,2.12354 -3.70487,2.87042 -6.9722,3.4694 -16.7677896,1.26697 -19.7608496,-4.79211 -0.78557,-1.59028 -0.99029,-3.277907 -0.75119,-4.959168 0.36348,-2.555785 2.61939,-4.539343 3.35343,-7.00481 1.73601,-5.83083 2.62133,-11.81781 4.2762096,-17.66709 0.65342,-2.30955 2.18476,-5.796465 5.66197,-6.294445 3.93983,-0.56424 5.83643,3.36487 6.56082,5.674555 0.58593,1.86819 0.59903,3.8034 0.83564,5.70306 0.51429,4.12917 0.76337,8.33141 1.93444,12.39795 0.47646,1.654513 1.74598,2.952874 2.65107,4.463245 0.88578,1.478144 1.32444,3.339432 1.04529,4.959163 z"
id="path_circle_vert_clair_erable_3" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6" cx="-16.193937" cy="-199.52211" r="15.890945" transform="scale(-1)" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none" d="m 30.618377,209.86128 c -0.16719,-2.16405 -0.74796,-4.2637 -1.83301,-6.15277 -7.23004,-12.5874 -27.5444016,-6.72502 -26.4120816,7.93188 0.44336,5.739 2.241092,14.95781 6.932042,18.75404 4.5699996,3.69834 12.5510096,2.81908 16.2452596,-1.70959 3.53336,-4.33146 5.49519,-13.29117 5.06779,-18.82356 z"
id="path_circle_vert_clair_erable_6" />
<circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_3" cx="-17.207798" cy="-15.157107" r="15.890945" transform="rotate(-177.50808)" />
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_5" cx="258.50674" cy="-17.245941" r="15.890945" transform="rotate(90.300272)" />
<path style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none" d="m 30.041771,256.3491 c -0.178539,2.16314 -0.770305,4.25972 -1.86524,6.14307 -7.295908,12.54934 -27.5792556,6.58058 -26.3701376,-8.07018 0.47343,-5.7366 2.319448,-14.94586 7.030229,-18.71746 4.5893186,-3.67434 12.5656016,-2.75326 16.2360666,1.79471 3.510612,4.34991 5.42547,13.31978 4.969082,18.84986 z"
id="path_circle_orange_5" />
</g>
</svg>
</aside>
<section id="main-content-node">
<div class="__img-hero">
{{content.field_image}}
</div>
<article{{ attributes }} id="presentation">
<div class="__title col-12 px-0"> <div class="__title col-12 px-0">
<h2>{{label}}</h2> <h2>{{label}}</h2>
</div> </div>
@@ -94,4 +131,6 @@
</div> </div>
</div> </div>
</div> </div>
</article> </article>
</section>
</div>
@@ -64,7 +64,7 @@
<div class="layout-content"> <div class="layout-content">
<div id="background-animated" > <div id="background-animated" >
<svg <svg
width="1900" width="1900"
height="1500" height="1500"
viewBox="0 0 502.70834 396.875" viewBox="0 0 502.70834 396.875"
@@ -80,7 +80,8 @@
<filter id="f5"> <filter id="f5">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" /> <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter> </filter>
</defs><g </defs>
<g
id="layer1" id="layer1"
transform="translate(-51.525162,-32.699875)"> transform="translate(-51.525162,-32.699875)">
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke" <circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
@@ -105,9 +106,6 @@
d="m 10,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z" d="m 10,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
id="path_circle_vert_clair_erable_3" class="toright3"/> id="path_circle_vert_clair_erable_3" class="toright3"/>
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke" <circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_3" cx="375.24548" cy="166.11342" r="15.890945" /> id="circle_orange_3" cx="375.24548" cy="166.11342" r="15.890945" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke" <circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"