From 5439f74b736a6e71803cd78b4dc2c5f9dcb664d9 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 18 Apr 2024 23:11:59 +0200 Subject: [PATCH] animated background --- .../colloque2024/css-compiled/index.css | 226 ++++++--------- .../css-compiled/pages/layout.css | 9 +- .../css/components/header/header.scss | 5 +- .../colloque2024/css/configs/animation.scss | 211 +++++++------- .../custom/colloque2024/css/pages/layout.scss | 20 +- .../custom/colloque2024/images/fond-rond.svg | 129 +++++++++ .../custom/colloque2024/images/fond-ronds.svg | 267 +++++++++--------- .../custom/colloque2024/js/animation_home.js | 149 +++++++++- .../colloque2024/template/html.html.twig | 1 + .../template/page--front.html.twig | 150 +++++++++- 10 files changed, 772 insertions(+), 395 deletions(-) create mode 100644 web/themes/custom/colloque2024/images/fond-rond.svg diff --git a/web/themes/custom/colloque2024/css-compiled/index.css b/web/themes/custom/colloque2024/css-compiled/index.css index 55c1d1a1..3a1b4bab 100644 --- a/web/themes/custom/colloque2024/css-compiled/index.css +++ b/web/themes/custom/colloque2024/css-compiled/index.css @@ -338,109 +338,33 @@ footer h2 { font-size: 1rem; line-height: 1.5rem; } -@keyframes animateCircle_pop_trans { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } +/* Link the SVG file */ +body { + /* background-image: url('../images/fond-ronds.svg'); */ + /* Add other background properties as needed */ + width: 100%; + height: 100vh; + /* Adjust as needed */ + background-size: cover; + /* Adjust as needed */ } -@keyframes animateCircle_pop_trans-2 { +@keyframes pulse { 0% { - fill: #ffffff; - /* Initial fill color */ } + transform: scale(0); } 100% { - fill: #00ff00; - /* Final fill color */ } } + transform: scale(0.5); } } -@keyframes animateCircle_vert_clair_erable { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } +@keyframes slidein { + from { + transform: translateX(20%); } + to { + transform: translateX(70%); } } -@keyframes animateCircle_vert_clair_erable-93 { - 0% { - fill: #ffffff; - /* Initial fill color */ } - 100% { - fill: #00ff00; - /* Final fill color */ } } - -@keyframes animateCircle_vert_clair_erable-9 { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } - -@keyframes animateCircle_vert_clair_erable-3 { - 0% { - fill: #ffffff; - /* Initial fill color */ } - 100% { - fill: #00ff00; - /* Final fill color */ } } - -@keyframes animateCircle_vert_clair_erable-3-1 { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } - -@keyframes animateCircle_vert_clair_erable-3-1-7 { - 0% { - fill: #ffffff; - /* Initial fill color */ } - 100% { - fill: #00ff00; - /* Final fill color */ } } - -@keyframes animateCircle_vert_erable { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } - -@keyframes animateCircle_vert_erable-4 { - 0% { - fill: #ffffff; - /* Initial fill color */ } - 100% { - fill: #00ff00; - /* Final fill color */ } } - -@keyframes animateCircle_vert_erable-4-6 { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } - -@keyframes animateCircle_vert_erable-4-3 { - 0% { - fill: #ffffff; - /* Initial fill color */ } - 100% { - fill: #00ff00; - /* Final fill color */ } } - -@keyframes animateCircle_vert_erable-2 { - 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } +@keyframes dropDown { + from { + transform: translateY(20%); } + to { + transform: translateY(70%); } } @keyframes translateAnimation { 0% { @@ -452,57 +376,72 @@ footer h2 { transform: translateX(500px); /* End translation */ } } -@keyframes animateCircle_orange-7 { +@keyframes changeColor { 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } - -@keyframes animateCircle_orange-2 { - 0% { - fill: #ffffff; + fill: #b9ce00; /* Initial fill color */ } 100% { - fill: #00ff00; + fill: #ff804d; /* Final fill color */ } } -@keyframes animateCircle_orange-9 { +@keyframes changeColor2 { 0% { - stroke: #000000; - /* Initial stroke color */ } - 100% { - stroke: #ff0000; - /* Final stroke color */ } } - -@keyframes animateCircle_orange { - 0% { - fill: #ffffff; + fill: #038788; /* Initial fill color */ } 100% { - fill: #00ff00; + fill: #349a84; /* Final fill color */ } } -@keyframes slidein { - from { - transform: translateX(0%); } - to { - transform: translateX(100%); } } +/* Apply styles to the SVG paths +#circle_pop_trans, +#circle_pop_trans-2, +/* Add other SVG IDs or classes here */ +#circle_orange { + /* Add styles to your SVG paths */ + /* Example animation */ + /* animation: pulse 2s infinite alternate; */ + /* animation: dropDown 2s infinite alternate; */ + /* animation: pulse 2s infinite alternate; */ } -/* Add more keyframes for other paths as needed */ -#circle_pop_trans { - animation-name: translateAnimation; - animation-duration: 13s; - animation-repeat: infinite; - animation-delay: 1s; - animation-fill-mode: none; } +#cercle_vert_erable-4-3 { + animation: changeColor2 2s forwards; } + +/* Apply styles to the SVG paths */ +#circle_vert_clair_erable-3-1 { + animation: changeColor 2s forwards; + /* animation: slidein 2s infinite alternate; */ } + +#circle_orange-7 { + /* animation: changeColor 2s infinite alternate; */ } #circle_orange-6 { - animation: slidein 2s infinite alternate; - /* Animate fill color */ } + /* Main animation for the football */ + /* animation: football-motion 2s linear infinite; */ } + +#circle_orange-6-bis { + /* Trailing effect animation */ + /* animation: trace-motion 2s linear infinite; */ } + +@keyframes football-motion { + 0% { + transform: translateX(0) translateY(0); } + 100% { + transform: translateX(100px); } } + +@keyframes trace-motion { + 0% { + opacity: 0.5; + /* Adjust the opacity to control the visibility of the trace */ + /* Additional properties for the trailing effect */ + transform: translateX(0px) translateY(0); + /* Adjust as needed */ } + 100% { + opacity: 0.3; + /* Make the trace disappear at the end */ + /* Additional properties for the trailing effect */ + transform: translateX(100px); + /* Adjust as needed */ } } -/* Apply animations to other paths similarly */ /*! * Hamburgers * @description Tasty CSS-animated hamburgers @@ -626,12 +565,19 @@ footer h2 { body { position: relative; } + body #content-ontop { + z-index: 3000; + position: relative; + top: -1200px; } + body #background-animated { + z-index: 2000; + position: relative; + left: -350px; } body::before { z-index: -1; content: " "; width: 100%; height: 100%; - background-image: url("../images/fond-ronds.svg"); background-repeat: no-repeat; background-size: content; display: block; @@ -1101,14 +1047,13 @@ header { width: min-content; margin-bottom: 0; } header .row #block-colloque2024-mainnavigation { - width: max-content; - display: none; } + width: max-content; } header .row #block-colloque2024-mainnavigation .burger { padding-top: 0.25rem; z-index: 9999; } @media screen and (min-width: 1200px) { header .row #block-colloque2024-mainnavigation { - display: block; } + display: flex; } header .row #block-colloque2024-mainnavigation ul { margin-bottom: 0; flex-wrap: wrap; } @@ -1192,9 +1137,6 @@ header.front #block-colloque2024-branding { header.front #block-colloque2024-branding.is-active > div { max-height: 115px; } -header.front #block-colloque2024-renderedsitesettingsblock-2 { - display: none; } - #block-colloque2024-submenu { margin: 1rem auto; } #block-colloque2024-submenu ul { diff --git a/web/themes/custom/colloque2024/css-compiled/pages/layout.css b/web/themes/custom/colloque2024/css-compiled/pages/layout.css index 380548d8..a8b47f48 100644 --- a/web/themes/custom/colloque2024/css-compiled/pages/layout.css +++ b/web/themes/custom/colloque2024/css-compiled/pages/layout.css @@ -8,12 +8,19 @@ body { position: relative; } + body #content-ontop { + z-index: 3000; + position: relative; + top: -1200px; } + body #background-animated { + z-index: 2000; + position: relative; + left: -350px; } body::before { z-index: -1; content: " "; width: 100%; height: 100%; - background-image: url("../images/fond-ronds.svg"); background-repeat: no-repeat; background-size: content; display: block; diff --git a/web/themes/custom/colloque2024/css/components/header/header.scss b/web/themes/custom/colloque2024/css/components/header/header.scss index 8c5c023e..0fb9a9b4 100644 --- a/web/themes/custom/colloque2024/css/components/header/header.scss +++ b/web/themes/custom/colloque2024/css/components/header/header.scss @@ -88,9 +88,8 @@ header{ z-index: 9999; } // .nav-main{ - display: none; @media screen and (min-width: 1200px) { - display: block; + display: flex; ul{ margin-bottom: 0; flex-wrap: wrap; @@ -201,6 +200,6 @@ header.front{ } } #block-colloque2024-renderedsitesettingsblock-2{ - display: none; + // display: none; } } diff --git a/web/themes/custom/colloque2024/css/configs/animation.scss b/web/themes/custom/colloque2024/css/configs/animation.scss index de020484..a24b4dca 100644 --- a/web/themes/custom/colloque2024/css/configs/animation.scss +++ b/web/themes/custom/colloque2024/css/configs/animation.scss @@ -1,123 +1,108 @@ -@keyframes animateCircle_pop_trans { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_pop_trans-2 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } +/* Link the SVG file */ +body { + /* background-image: url('../images/fond-ronds.svg'); */ + /* Add other background properties as needed */ + width: 100%; + height: 100vh; /* Adjust as needed */ + background-size: cover; /* Adjust as needed */ +} - @keyframes animateCircle_vert_clair_erable { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_vert_clair_erable-93 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } - - @keyframes animateCircle_vert_clair_erable-9 { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_vert_clair_erable-3 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } - @keyframes animateCircle_vert_clair_erable-3-1 { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_vert_clair_erable-3-1-7 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } +@keyframes pulse { + 0% {transform: scale(0);} + 100% {transform: scale(.5);} +} - @keyframes animateCircle_vert_erable { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_vert_erable-4 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } - @keyframes animateCircle_vert_erable-4-6 { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_vert_erable-4-3 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } - - @keyframes animateCircle_vert_erable-2 { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes translateAnimation { - 0% { - transform: translateX(0); /* Start translation */ - } - 50% { - transform: translateX(200); - } - 100% { - transform: translateX(500px); /* End translation */ - } - } +@keyframes slidein { + from {transform: translateX(20%);} + to {transform: translateX(70%);} +} - @keyframes animateCircle_orange-7 { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_orange-2 { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } +@keyframes dropDown { + from {transform: translateY(20%);} + to {transform: translateY(70%);} +} - @keyframes animateCircle_orange-9 { - 0% {stroke: #000000; /* Initial stroke color */} - 100% {stroke: #ff0000; /* Final stroke color */} - } - - @keyframes animateCircle_orange { - 0% {fill: #ffffff; /* Initial fill color */} - 100% {fill: #00ff00; /* Final fill color */} - } +@keyframes translateAnimation { + 0% {transform: translateX(0); /* Start translation */} + 50% {transform: translateX(200);} + 100% {transform: translateX(500px); /* End translation */} +} + +@keyframes changeColor { + 0% {fill: #b9ce00; /* Initial fill color */} + 100% {fill: #ff804d; /* Final fill color */} +} + +@keyframes changeColor2 { + 0% {fill: #038788; /* Initial fill color */} + 100% {fill: #349a84; /* Final fill color */} +} - @keyframes slidein { - from { - transform: translateX(0%); - } - to { - transform: translateX(100%); - } - +/* Apply styles to the SVG paths +#circle_pop_trans, +#circle_pop_trans-2, +/* Add other SVG IDs or classes here */ +#circle_orange{ + /* Add styles to your SVG paths */ + /* Example animation */ + /* animation: pulse 2s infinite alternate; */ + /* animation: dropDown 2s infinite alternate; */ + /* animation: pulse 2s infinite alternate; */ + + +} + +#cercle_vert_erable-4-3{ + animation: changeColor2 2s forwards; +} + +/* Apply styles to the SVG paths */ +#circle_vert_clair_erable-3-1 +{ + animation: changeColor 2s forwards; + /* animation: slidein 2s infinite alternate; */ + +} + +#circle_orange-7{ + /* animation: changeColor 2s infinite alternate; */ +} + + + + + +#circle_orange-6 { + /* Main animation for the football */ + /* animation: football-motion 2s linear infinite; */ +} + +#circle_orange-6-bis { + /* Trailing effect animation */ + /* animation: trace-motion 2s linear infinite; */ +} + +@keyframes football-motion { + 0% { + transform: translateX(0) translateY(0); } - - /* Add more keyframes for other paths as needed */ - - #circle_pop_trans { - animation-name: translateAnimation; - animation-duration:13s; - animation-repeat:infinite; - animation-delay: 1s; - animation-fill-mode: none; } - - #circle_orange-6 { - animation: slidein 2s infinite alternate; /* Animate fill color */ + 100% { + transform: translateX(100px) ; } - - /* Apply animations to other paths similarly */ - \ No newline at end of file +} + +@keyframes trace-motion { + 0% { + opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */ + /* Additional properties for the trailing effect */ + transform: translateX(0px) translateY(0); /* Adjust as needed */ + } + 100% { + opacity: 0.3; /* Make the trace disappear at the end */ + /* Additional properties for the trailing effect */ + transform: translateX(100px) ; /* Adjust as needed */ + } +} diff --git a/web/themes/custom/colloque2024/css/pages/layout.scss b/web/themes/custom/colloque2024/css/pages/layout.scss index 7cf3087c..85cdc729 100644 --- a/web/themes/custom/colloque2024/css/pages/layout.scss +++ b/web/themes/custom/colloque2024/css/pages/layout.scss @@ -9,13 +9,26 @@ main:not(.home) { // body { + #content-ontop{ + z-index: 3000; + position: relative; + top: -1200px; + } + + + #background-animated{ + z-index: 2000; + position: relative; + left: -350px; + + } position: relative; &::before { z-index: -1; content: " "; width: 100%; height: 100%; - background-image: url("../images/fond-ronds.svg"); + // background-image: url("../images/fond-ronds.svg"); background-repeat: no-repeat; background-size: content; display: block; @@ -23,6 +36,10 @@ body { top: 0; left: 0; } + + + + // &::after { // z-index: -1; // content: " "; @@ -63,3 +80,4 @@ article { h4 { // @include croix_or; } + diff --git a/web/themes/custom/colloque2024/images/fond-rond.svg b/web/themes/custom/colloque2024/images/fond-rond.svg new file mode 100644 index 00000000..a34c3b05 --- /dev/null +++ b/web/themes/custom/colloque2024/images/fond-rond.svg @@ -0,0 +1,129 @@ + + + + diff --git a/web/themes/custom/colloque2024/images/fond-ronds.svg b/web/themes/custom/colloque2024/images/fond-ronds.svg index d14fe522..579a52ae 100644 --- a/web/themes/custom/colloque2024/images/fond-ronds.svg +++ b/web/themes/custom/colloque2024/images/fond-ronds.svg @@ -2,130 +2,143 @@ - - +width="1900" +height="1500" +viewBox="0 0 502.70834 396.875" +version="1.1" +id="svg1" +xml:space="preserve" +inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" +sodipodi:docname="fond-ronds.svg" +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"> \ No newline at end of file diff --git a/web/themes/custom/colloque2024/js/animation_home.js b/web/themes/custom/colloque2024/js/animation_home.js index fd65437b..8c79f076 100644 --- a/web/themes/custom/colloque2024/js/animation_home.js +++ b/web/themes/custom/colloque2024/js/animation_home.js @@ -1,14 +1,21 @@ -// Récupérer la forme SVG -const circle = document.getElementById('circle_orange'); -console.log(circle); -// Fonction pour animer la forme -function slideIn() { + +// Récupérer la forme SVG + + +let dropdowns = document.getElementsByClassName('dropdown'); +console.log(dropdowns); + +// Parcourir tous les éléments sélectionnés +Array.from(dropdowns).forEach(dropdown => { + function slideDown() { let translateY = -50; // Position de départ (en bas) function animate() { translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération - circle.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation + dropdown.style.transform = `translateY(${translateY}px)`; // Appliquer la transformation + + // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée requestAnimationFrame(animate); // Appel récursif de la fonction animate @@ -18,4 +25,132 @@ function slideIn() { animate(); // Lancer l'animation } -slideIn(); // Lancer l'animation lorsque la page est chargée +slideDown(); // Lancer l'animation lorsque la page est chargée +}); + + +let moveups = document.getElementsByClassName('moveup'); +console.log(moveups); + +// Parcourir tous les éléments sélectionnés +Array.from(moveups).forEach(moveup => { + function slideUp() { + let translateY = 0; // Position de départ (en bas) + + function animate() { + translateY -= 0.5; // Déplacement d'un pixel vers le haut à chaque itération + moveup.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation + + if (translateY > -25) { // Limite la hauteur à laquelle la forme doit être animée + requestAnimationFrame(animate); // Appel récursif de la fonction animate + } + } + + animate(); // Lancer l'animation +} + +slideUp(); // Lancer l'animation lorsque la page est chargée +}); + +let torights = document.getElementsByClassName('toright'); +console.log(torights); + +// Parcourir tous les éléments sélectionnés +Array.from(torights).forEach(toright => { + function slideRight() { + let translateX = 0; // Position de départ (en bas) + + function animate() { + translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération + toright.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation + + if (translateX > -25) { // Limite la hauteur à laquelle la forme doit être animée + requestAnimationFrame(animate); // Appel récursif de la fonction animate + } + } + + animate(); // Lancer l'animation +} + +slideRight(); // Lancer l'animation lorsque la page est chargée +}); + +let torightslows = document.getElementsByClassName('torightslow'); +console.log(torightslows); + +// Parcourir tous les éléments sélectionnés +Array.from(torightslows).forEach(torightslow => { + function slideRightSlow() { + let translateX = 0; // Position de départ (en bas) + let duration = 8000; // 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.8); // Limite la progression à 1 (pour éviter un dépassement) + + // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression + progress = easeInOut(progress); + + translateX = 60 * progress; // Déplacement d'un pixel vers le haut à chaque itération + torightslow.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation + + if (progress < 0.8) { + requestAnimationFrame(animate); + } + } + + function easeInOut(t) { + return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t; +} + +// Lance l'animation +requestAnimationFrame(animate); +} + +slideRightSlow(); // Lancer l'animation lorsque la page est chargée +}); + +let tolefts = document.getElementsByClassName('toleft'); +console.log(tolefts); + +// Parcourir tous les éléments sélectionnés +Array.from(tolefts).forEach(toleft => { + function slideLeft() { + let translateX = 0; // Position de départ (en bas) + let duration = 4000; // 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.5); // Limite la progression à 1 (pour éviter un dépassement) + + // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression + progress = easeInOut(progress); + + // Calcule la translation en fonction de la progression + translateX = -20 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément + + // Applique la transformation à l'élément + toleft.style.transform = `translateX(${translateX}%)`; + + // Continue l'animation si la progression n'a pas atteint 1 + if (progress < 0.8) { + requestAnimationFrame(animate); + } + } + + // Fonction d'interpolation (ease-in-out) + function easeInOut(t) { + return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t; + } + + // Lance l'animation + requestAnimationFrame(animate); + } + + slideLeft(); // Lancer l'animation lorsque la page est chargée +}); diff --git a/web/themes/custom/colloque2024/template/html.html.twig b/web/themes/custom/colloque2024/template/html.html.twig index 0ddcf08a..cd8dfb48 100644 --- a/web/themes/custom/colloque2024/template/html.html.twig +++ b/web/themes/custom/colloque2024/template/html.html.twig @@ -42,6 +42,7 @@ Keyboard navigation/accessibility link to main content section in page.html.twig. #} + diff --git a/web/themes/custom/colloque2024/template/page--front.html.twig b/web/themes/custom/colloque2024/template/page--front.html.twig index f4843e55..e10d392d 100644 --- a/web/themes/custom/colloque2024/template/page--front.html.twig +++ b/web/themes/custom/colloque2024/template/page--front.html.twig @@ -63,7 +63,155 @@ {# link is in html.html.twig #}
- {{ page.content }} +
+ + +
+
+
+ {{ page.content }} +
+
{# /.layout-content #} {% if page.sidebar_second %}