page about pas depuis home

.gitignore

@@ -28,6 +28,10 @@ user/themes/*
 !user/themes/ateliers-55
 user/**/config/security.yaml
 
+# Content
+
+user/pages/*
+
 # Environments
 .env
 .gravenv

user/pages/01.home/default.md

@@ -1,10 +0,0 @@
----
-title: 'Journal d''un chantier'
-body_classes: 'title-center title-h1h2'
----
-
-Les Ateliers 55 rentrent en travaux pour 18 mois à compter du 1<sup>er</sup> février 2024. Objectif : création de 6 ateliers d'artistes, 4 ateliers-logements, 1 studio et 1 appartement en location à l'été 2025. Une construction en matériaux biosourcés (bois, paille et terre).
-
-===
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec ullamcorper lacus, eu elementum quam. In hac habitasse platea dictumst. Duis egestas justo eget massa congue rhoncus. Pellentesque ex urna, dictum nec dapibus vitae, bibendum quis diam. Nunc ut euismod risus, non placerat nisi. Sed maximus luctus sapien at porttitor. Suspendisse pulvinar dui leo, aliquet pulvinar lectus egestas et. Morbi rutrum blandit eleifend. Maecenas ac massa eget ante ultricies tempus. Suspendisse at lobortis ligula, a aliquam eros. Phasellus in ligula et lorem malesuada volutpat. Sed ex massa, luctus sed egestas ut, feugiat in libero. 

user/pages/02.articles/article-1/default.md

@@ -1,9 +0,0 @@
----
-title: 'Article 1'
-media_order: 'cat-8436843_1280.jpg,forsythia-8595521_1280.jpg,labrador-8554882_1280.jpg,lake-8357182_1280.jpg,landscape-8592826_1280.jpg'
-date: '05-03-2024 11:34'
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut purus congue, accumsan erat varius, auctor sapien. Aliquam in molestie leo. Curabitur ut elit tellus. Vivamus neque metus, rhoncus quis erat sit amet, congue luctus arcu. Ut porttitor id enim in lobortis. Pellentesque consequat tincidunt est finibus pharetra. Phasellus ligula leo, efficitur at porttitor ac, scelerisque non nunc. Fusce ac ultricies elit.
-
-Curabitur porttitor felis ac diam aliquam pretium. Suspendisse a augue vehicula, consectetur arcu id, lobortis leo. Duis venenatis eget metus quis lacinia. Sed placerat consequat nisl sed fermentum. Vivamus tristique diam a mi eleifend, sed interdum tellus laoreet. Ut eu lorem ut mi rutrum ornare et vitae mi. Sed dictum sapien justo, a finibus magna aliquam eu. Mauris vel metus sit amet elit tincidunt tincidunt. Nunc venenatis tellus velit, ut accumsan turpis gravida a. Nullam sapien odio, feugiat nec condimentum id, dapibus nec felis. Nullam et placerat nisi. Proin finibus, lorem sit amet faucibus gravida, ligula urna mattis ligula, vel commodo ex ex vitae nisi.

user/pages/02.articles/article-2/default.md

@@ -1,9 +0,0 @@
----
-title: 'Article 2'
-media_order: 'mountains-8497575_1280.jpg,nuts-8585063_1280.jpg,sparrow-8387465_1280.jpg'
-date: '03-03-2024 11:34'
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut purus congue, accumsan erat varius, auctor sapien. Aliquam in molestie leo. Curabitur ut elit tellus. Vivamus neque metus, rhoncus quis erat sit amet, congue luctus arcu. Ut porttitor id enim in lobortis. Pellentesque consequat tincidunt est finibus pharetra. Phasellus ligula leo, efficitur at porttitor ac, scelerisque non nunc. Fusce ac ultricies elit.
-
-Curabitur porttitor felis ac diam aliquam pretium. Suspendisse a augue vehicula, consectetur arcu id, lobortis leo. Duis venenatis eget metus quis lacinia. Sed placerat consequat nisl sed fermentum. Vivamus tristique diam a mi eleifend, sed interdum tellus laoreet. Ut eu lorem ut mi rutrum ornare et vitae mi. Sed dictum sapien justo, a finibus magna aliquam eu. Mauris vel metus sit amet elit tincidunt tincidunt. Nunc venenatis tellus velit, ut accumsan turpis gravida a. Nullam sapien odio, feugiat nec condimentum id, dapibus nec felis. Nullam et placerat nisi. Proin finibus, lorem sit amet faucibus gravida, ligula urna mattis ligula, vel commodo ex ex vitae nisi.

user/pages/02.articles/article-3/default.md

@@ -1,7 +0,0 @@
----
-title: 'Article 3'
-media_order: 'lake-8357182_1280.jpg,landscape-8592826_1280.jpg,mountains-8497575_1280.jpg,nuts-8585063_1280.jpg'
-date: '21-02-2024 11:35'
----
-
- Mauris est nisl, lobortis scelerisque tellus vel, pretium maximus nisi. Phasellus viverra quis lacus non pulvinar. Maecenas molestie, lorem a gravida pharetra, lacus felis luctus tellus, quis tempor felis nulla id sapien. Aenean sed lectus metus. Etiam ac ornare ex. Phasellus imperdiet augue ac justo porta, in volutpat mi fringilla. Duis mattis nisl velit, sit amet euismod risus feugiat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque gravida lorem eget orci pretium venenatis. Pellentesque ac odio gravida quam luctus interdum. Mauris quis laoreet risus, a congue quam. Vivamus orci ligula, viverra quis vehicula nec, faucibus vitae risus. Sed sagittis consequat massa, a egestas est pharetra nec. Vestibulum in urna consequat, varius nunc sed, semper nunc. Nam aliquet augue lacinia dignissim egestas. Ut quam mauris, sagittis sit amet tortor vel, rhoncus luctus dui. 

user/pages/02.articles/article-4/default.md

@@ -1,7 +0,0 @@
----
-title: 'Article 4'
-date: '13-02-2024 11:36'
-media_order: 'cat-8436843_1280.jpg,forsythia-8595521_1280.jpg,labrador-8554882_1280.jpg'
----
-
- Phasellus nec hendrerit lectus, a accumsan dolor. Etiam ultrices, ante non fermentum congue, tortor orci pellentesque libero, vel lacinia risus orci eget sapien. Nam non sem consectetur, finibus felis ac, imperdiet ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet nunc ultricies, tincidunt augue id, porta ante. Sed turpis ipsum, pellentesque a dictum sed, laoreet non arcu. Nulla at leo quis diam accumsan congue. Curabitur consequat varius ante, sit amet luctus magna accumsan eget. Curabitur ac ultrices felis. Mauris tempor lectus ac erat congue, nec efficitur massa bibendum. In ac felis viverra, dictum magna quis, fermentum magna. Fusce ac fermentum dui, eu tempus velit. Ut massa ligula, iaculis eget metus a, commodo viverra nisi. Vestibulum lectus diam, placerat aliquet consequat id, mattis id risus. Maecenas massa ante, vehicula luctus sapien vitae, lacinia dignissim tortor. Suspendisse tristique est ut quam molestie vehicula. 

user/pages/02.articles/article-5/default.md

@@ -1,7 +0,0 @@
----
-title: 'Article 5'
-media_order: 'lake-8357182_1280.jpg,mountains-8497575_1280.jpg,sparrow-8387465_1280.jpg'
-date: '14-03-2024 11:38'
----
-
-Phasellus efficitur eu turpis non sollicitudin. Aliquam cursus, tellus non faucibus pharetra, ipsum nulla pretium mi, vel auctor magna orci tristique sem. Sed mattis facilisis mauris, id pellentesque dui elementum sit amet. Duis vel venenatis risus, sed porta lorem. Morbi purus nunc, luctus eu tellus ac, commodo tincidunt nisl. Duis lacinia vitae dolor sed pellentesque. Proin blandit sodales dolor, vitae condimentum turpis sagittis ut. Pellentesque quis velit nec nulla consectetur sodales nec in nulla. Curabitur sed libero non quam rhoncus fermentum sit amet condimentum lectus. Maecenas eu pellentesque nibh. 

user/pages/02.articles/default.md

@@ -1,9 +0,0 @@
----
-title: Articles
-content:
-    items: '@self.children'
-    order:
-        by: date
-        dir: desc
----
-

user/pages/03.mentions-legales/default.md

@@ -1,5 +0,0 @@
----
-title: 'Mentions Légales'
----
-
-Mauris est nisl, lobortis scelerisque tellus vel, pretium maximus nisi. Phasellus viverra quis lacus non pulvinar. Maecenas molestie, lorem a gravida pharetra, lacus felis luctus tellus, quis tempor felis nulla id sapien. Aenean sed lectus metus. Etiam ac ornare ex. Phasellus imperdiet augue ac justo porta, in volutpat mi fringilla. Duis mattis nisl velit, sit amet euismod risus feugiat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque gravida lorem eget orci pretium venenatis. Pellentesque ac odio gravida quam luctus interdum. Mauris quis laoreet risus, a congue quam. Vivamus orci ligula, viverra quis vehicula nec, faucibus vitae risus. Sed sagittis consequat massa, a egestas est pharetra nec. Vestibulum in urna consequat, varius nunc sed, semper nunc. Nam aliquet augue lacinia dignissim egestas. Ut quam mauris, sagittis sit amet tortor vel, rhoncus luctus dui. 

user/pages/04.contact/default.md

@@ -1,5 +0,0 @@
----
-title: Contact
----
-
-contact adresse mail

user/themes/ateliers-55/css/styles.css

@@ -44,6 +44,10 @@
   list-style: none;
 }
 
+body {
+  overflow-x: hidden;
+}
+
 header {
   display: flex;
   width: 100vw;
@@ -79,8 +83,10 @@ header #hamburger {
   flex-direction: column;
   justify-content: space-between;
   cursor: pointer;
+  outline: unset;
 }
 header #hamburger div {
+  outline: unset;
   border-bottom: solid 1px #000;
   width: 100%;
   background-color: #000;
@@ -153,8 +159,10 @@ nav.open {
   transform: rotate(0deg) scale(0.5);
   transition: transform 0.5s ease-out;
   cursor: pointer;
+  outline: unset;
 }
 #about #about-arrow div {
+  outline: unset;
   width: 50%;
   border-bottom: solid 1px #000;
 }
@@ -295,7 +303,6 @@ article #article-wrapper .article-header .close-article div:last-of-type {
   transform: rotate(-45deg);
 }
 article #article-wrapper .swiper {
-  max-height: 40vh;
   overflow: hidden;
   opacity: 0;
   transition: opacity 0.3s ease-out;
@@ -304,11 +311,19 @@ article #article-wrapper .swiper .swiper-wrapper .swiper-slide {
   display: flex;
   justify-content: center;
   padding: 0 7vw;
+  display: flex;
+  height: auto;
+  max-height: 40vh;
+  align-items: center;
 }
 article #article-wrapper .swiper .swiper-wrapper .swiper-slide img {
   box-sizing: content-box;
   width: 100%;
 }
+article #article-wrapper .swiper .swiper-wrapper .swiper-slide video {
+  box-sizing: content-box;
+  width: 100%;
+}
 article #article-wrapper .swiper .swiper-button-prev, article #article-wrapper .swiper .swiper-button-next {
   color: #000;
   transform: scale(0.5);

user/themes/ateliers-55/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OApCA;EAqCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA,kBApDA;EAqDA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBAtEU;EAuEV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAhFN;EAiFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAhGU;EAiGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBA3KN;;AA8KF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OAxLE;;AA0LN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBA1NE;EA2NF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OA7OR;EA8OQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;;AACA;EACI;EACA;;AAIZ;EACI,OA7RJ;EA8RI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OAzSM;EA0SN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAGJ;EACI;EACA;EAEA;EACA;;AAQJ;EACI;;AACA;EACI,OANM;;AAQV;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA,OAxCA;EAyCA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,kBA1DA;EA2DA;EACA;EACA;;AAIJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKZ;EACI,kBA5EU;EA6EV;EACA;EACA;;AACA;EACI;EACA;;AAEI;EACI;EACA;EACA,OAtFN;EAuFM;EACA;;AAGR;EACI;;;AAIZ;EACI;;;AAGJ;EACI,OAtGU;EAuGV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;;AAGR;EACI;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBAnLN;;AAsLF;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA,OAhME;;AAkMN;EACI;EACA;EACA;;AAKA;EACI;;AAEJ;EACI;;;AAKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA,kBAlOE;EAmOF;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OArPR;EAsPQ;EACA;;AACA;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,OA5SJ;EA6SI;;AAEJ;EACI;;AAEJ;EACI;;AAIZ;EACI;EACA;EACA,OAxTM;EAyTN;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;;AAIR;EAEQ;IACI;;EACA;IACI;IACA;;EAGR;IACI;;EACA;IACI;IACA;IACA;;EAKR;IACI;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EAEJ;IACI;;EAGR;IACI;IACA;;EAEI;IACI;;EAKR;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;IACA","file":"styles.css"}

user/themes/ateliers-55/js/script.js

@@ -19,9 +19,11 @@ $(document).ready(function() {
         body.style.overflowY = "auto";
     }
     let swiperEl = document.querySelector('.swiper');
+    if (swiperEl) {
+        swiperEl.style.opacity = 1;
+        resizeVerticalImages();
+    }
     initSwiper();
-    swiperEl.style.opacity = 1;
-    resizeVerticalImages();
     barba.init({
         transitions: [{
             name: 'opacity-transition',
@@ -38,18 +40,22 @@ $(document).ready(function() {
           }]
     });
     barba.hooks.before((data) => {
-        swiperEl.style.opacity = 0;
+        if (swiperEl) {
+            swiperEl.style.opacity = 0;
+        }
     });
     barba.hooks.after((data) => {
         swiperEl = document.querySelector('.swiper');
-        resizeVerticalImages();
+        if (swiperEl) {
-        if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
+            if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
-            initSwiper();
+                initSwiper();
-            body.style.overflowY = "hidden";
+                body.style.overflowY = "hidden";
+            }
+            swiperEl.style.opacity = 1;
         } else {
             body.style.overflowY = "auto";
         }
-        swiperEl.style.opacity = 1;
+        resizeVerticalImages();
     });
 })
 
@@ -64,12 +70,34 @@ function initSwiper() {
 }
 
 function resizeVerticalImages() {
-    if (document.querySelector('.swiper')) {
+    let verticalImages = document.querySelectorAll('.swiper-slide > img');
-        let verticalImages = document.querySelectorAll('.swiper-slide > img');
+    let imagesIndex = 0;
-        for (let img of verticalImages) {
+    for (let img of verticalImages) {
+        if(img.complete){
+            imagesIndex++;
             if (img.clientHeight > img.clientWidth) {
                 img.style.width = "50%";
             }
-        }
+            if (imagesIndex === verticalImages.length) {
+                swiperSlideEls = document.querySelectorAll('.swiper-slide');
+                for (let swiperSlideEl of swiperSlideEls) {
+                    swiperSlideEl.style.maxHeight = "unset";
+                }
+            }
+         } else {
+            img.onload = () => {
+                imagesIndex++;
+                if (img.clientHeight > img.clientWidth) {
+                    img.style.width = "50%";
+                }
+                if (imagesIndex === verticalImages.length) {
+                    swiperSlideEls = document.querySelectorAll('.swiper-slide');
+                    for (let swiperSlideEl of swiperSlideEls) {
+                        swiperSlideEl.style.maxHeight = "unset";
+                    }
+                }
+            }
+         }
+         
     }
 }

user/themes/ateliers-55/sass/styles.scss

@@ -61,6 +61,10 @@ $bgColor: #fff;
     }
 }
 
+body {
+    overflow-x: hidden;
+}
+
 header {
     display: flex;
     width: 100vw;
@@ -95,7 +99,9 @@ header {
         flex-direction: column;
         justify-content: space-between;
         cursor: pointer;
+        outline: unset;
         div {
+            outline: unset;
             border-bottom: solid 1px $mainColor;
             width: 100%;
             background-color: $mainColor;
@@ -172,7 +178,9 @@ nav.open {
         transform: rotate(0deg) scale(0.5);
         transition: transform 0.5s ease-out;
         cursor: pointer;
+        outline: unset;
         div {
+            outline: unset;
             width: 50%;
             border-bottom: solid 1px $mainColor;
         }
@@ -315,7 +323,6 @@ article {
             }
         }
         .swiper {
-            max-height: 40vh;
             overflow: hidden;
             opacity: 0;
             transition: opacity 0.3s ease-out;
@@ -324,10 +331,18 @@ article {
                     display: flex;
                     justify-content: center;
                     padding: 0 7vw;
+                    display: flex;
+                    height: auto;
+                    max-height: 40vh;
+                    align-items: center;
                     img {
                         box-sizing: content-box;
                         width: 100%;
                     }
+                    video {
+                        box-sizing: content-box;
+                        width: 100%;
+                    }
                 }
             }
             .swiper-button-prev, .swiper-button-next {

user/themes/ateliers-55/templates/default.html.twig

@@ -31,6 +31,11 @@
                             <img src="{{ image.url }}" alt="{{ page.title }}">
                         </div>
                         {% endfor %}
+                        {% for video in page.media.videos %}
+                        <div class="swiper-slide">
+                            <video controls src="{{ video.url }}">
+                        </div>
+                        {% endfor %}
                     </div>
                     <div class="swiper-button-next"></div>
                 </div>

user/themes/ateliers-55/templates/partials/about.html.twig

@@ -1,9 +1,9 @@
 <div id="about" onClick="toggleAbout()">
     <div id="about-summary">
-        {{ page.find('/').summary|raw }}
+        {{ page.find('/a-propos').summary|raw }}
     </div>
     <div id="about-hidden">
-        {{ page.find('/').content|slice(page.summary|length, page.content|length)|markdown(false) }}
+        {{ page.find('/a-propos').content|slice(page.summary|length, page.content|length)|markdown(false) }}
     </div>
     <div id="about-arrow">
         <div></div>