From 094e9964ec1785b685b5e2be25e3863773c1e89f Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 29 Sep 2026 09:46:34 +0200 Subject: [PATCH] started using fluid-clamp for titles and date --- web/themes/custom/leshed/assets/dist/main.css | 2 +- .../partials/abstracts/_event-date-time.scss | 21 +++++++++++---- .../scss/partials/abstracts/_fluid.scss | 27 +++++++++++++------ .../scss/partials/abstracts/_node-full.scss | 4 ++- .../partials/abstracts/_nodes-on-liste.scss | 17 +++++++++--- .../scss/partials/abstracts/_variables.scss | 8 +++++- .../assets/scss/partials/global/_layout.scss | 1 + .../assets/scss/partials/pages/_home.scss | 12 ++++++++- 8 files changed, 72 insertions(+), 20 deletions(-) diff --git a/web/themes/custom/leshed/assets/dist/main.css b/web/themes/custom/leshed/assets/dist/main.css index 986eebd..4c4384f 100644 --- a/web/themes/custom/leshed/assets/dist/main.css +++ b/web/themes/custom/leshed/assets/dist/main.css @@ -1 +1 @@ -@font-face{font-family:Epilogue;src:url(./fonts/Epilogue-Italic-VariableFont_wght.ttf) format("truetype");src:url(./fonts/Epilogue-Italic-VariableFont_wght.ttf) format("truetype") tech(variations);font-weight:100 900;font-style:italic;font-display:block}@font-face{font-family:Epilogue;src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("truetype");src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("truetype") tech(variations);font-weight:100 900;font-style:normal;font-display:block}body{font-family:Epilogue;font-weight:400;font-style:normal}a,a:visited{text-decoration:none;color:inherit;transition:color .15s ease-out}body{margin:0;font-weight:200;line-height:1.5}div.layout-container{display:flex;flex-direction:column;height:100vh;overflow:hidden;max-width:1080px;margin:0 auto}div.layout-container header[role=banner]{display:block;position:relative;padding:.5em 0;flex:1 1 70px;z-index:100;height:70px;min-height:70px}div.layout-container main[role=main]{flex:1 1 auto;overflow-y:scroll}header[role=banner]{background-color:#fff}header[role=banner] .header-middle{display:flex;justify-content:space-between;align-items:center;padding:.2em 0}header[role=banner] #block-leshed-identitedusite a{text-decoration:none;font-size:2em;font-weight:500;margin-right:.5em}header[role=banner] .header-right{height:20px;width:20px;cursor:pointer}header[role=banner] .header-right>div#burger-btn{position:relative;transition-duration:.5s;transition-property:transform;top:8.5px}header[role=banner] .header-right>div#burger-btn,header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{width:20px;height:3px;background-color:#000}header[role=banner] .header-right>div#burger-btn:hover,header[role=banner] .header-right>div#burger-btn:hover:before,header[role=banner] .header-right>div#burger-btn:hover:after{background-color:green}header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{content:"";position:absolute;left:0}header[role=banner] .header-right>div#burger-btn:before{top:6px}header[role=banner] .header-right>div#burger-btn:after{bottom:6px}header[role=banner] .header-right>div#burger-btn[opened]{transform:rotate(90deg)}header[role=banner] .header-right>div.wrapper{position:fixed;top:70px;left:0;width:100vw;padding:0 calc((100vw - 1080px)/2) 0 calc((100vw - 1080px)/2);background-color:#ffffff4d;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);height:0;overflow:hidden;transition-duration:.5s}header[role=banner] .header-right>div.wrapper[opened]{height:calc(100vh - 70px)}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale{padding-top:10px}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale>ul{margin:0;padding:0}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale>ul li{list-style:none}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale>ul li a{font-size:4em;font-weight:200;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff)}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul{margin:0;padding:0}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li{list-style:none;padding:0;display:inline-block;font-size:2em}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li:first-child:after{content:" /";font-weight:200}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li:last-child{padding-left:.3em}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li.is-active{font-weight:400}.splitting span.word,.splitting span.char{display:inline}.variable-title{margin:0;font-weight:200;text-transform:lowercase;line-height:1;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff)}.variable-title span.word span.char{letter-spacing:-.1em}.variable-title:not(.splitting){margin:0;font-weight:200;text-transform:lowercase;line-height:1;letter-spacing:-.1em}@media (scripting: enabled){.variable-title:not(.is-ready){visibility:hidden;animation:leshed-title-failsafe 0s 3s forwards}}@keyframes leshed-title-failsafe{to{visibility:visible}}div#block-leshed-titredelapage h1{font-size:1em;font-weight:200;margin:0}div.layout.layout--twocol-section--50-50{flex-wrap:nowrap;align-items:flex-start;column-gap:2em}div.layout.layout--twocol-section--50-50 div.layout__region{max-width:calc(50% - 1em);flex:1 0 calc(50% - 1em)}div.layout.layout--twocol-section--50-50 div.layout__region .views-row{margin-bottom:2em;max-width:100%}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet>header>h2{font-size:clamp(28px,7.4074074074vw,80px)}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet .field_type_d_evenement,div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet .field_type_de_projet{font-weight:400}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header div.field_images{position:relative;z-index:5}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header div.field_images a{display:block}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet.has-image>header div.field_images a img{width:100%;height:auto}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet div.field_artiste_s_invite_s.field-items.multiple .field-item{display:inline-block}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-projet div.field_artiste_s_invite_s.field-items.multiple .field-item:not(:last-of-type):after{content:", "}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement>header>h2{font-size:clamp(28px,7.4074074074vw,80px)}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement .field_type_d_evenement,div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement .field_type_de_projet{font-weight:400}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header div.field_images{position:relative;z-index:5}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header div.field_images a{display:block}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement.has-image>header div.field_images a img{width:100%;height:auto}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement>header .field_dates{font-size:4em;line-height:1;letter-spacing:-.1em}div.layout.layout--twocol-section--50-50 div.layout__region .views-row article.node-type-evenement>header .field_dates time span.date-part:not(:last-child):after{content:"."}article.node-type-projet.view-mode-full div.cols{display:flex;flex-direction:row;gap:2em;align-items:flex-start}article.node-type-projet.view-mode-full div.cols div.col{flex:0 0 calc(50% - 1em);max-width:calc(50% - 1em)}article.node-type-projet.view-mode-full div.cols div.col.left{z-index:10}article.node-type-projet.view-mode-full div.cols div.col.left>header{transform-origin:0 0;width:205%;z-index:100;pointer-events:none}article.node-type-projet.view-mode-full div.cols div.col.left>header>h2.node-title{position:relative;font-size:12em;margin:0}article.node-type-projet.view-mode-full div.cols div.col.left>header>h2.node-title.leshed-svg-export-target{pointer-events:painted}article.node-type-projet.view-mode-full div.cols div.col.left .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}article.node-type-projet.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p,article.node-type-projet.view-mode-full div.cols div.col.left .field_partenaire_s{margin-top:1em;font-weight:400}article.node-type-projet.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p .field-label,article.node-type-projet.view-mode-full div.cols div.col.left .field_partenaire_s .field-label{font-weight:200}article.node-type-projet.view-mode-full div.cols div.col.left .field_dates{margin-top:1em}article.node-type-projet.view-mode-full div.cols div.col.left .field_dates time{font-weight:400}article.node-type-projet.view-mode-full div.cols div.col.left>div.spacer{display:block;height:5em}article.node-type-projet.view-mode-full div.cols div.col.right{display:flex}article.node-type-projet.view-mode-full div.cols div.col.right .field_images{flex:1}article.node-type-projet.view-mode-full div.cols div.col.right .field_images:after{display:block;position:relative;content:"";width:100%;height:var(--sticky-extent, 100vh)}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item{position:relative}@media (min-width: 768px){article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item{position:sticky;top:0}}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure{margin:0}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure a{display:block}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure a img{width:100%;max-width:100%;height:auto}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption{margin:0;position:absolute;bottom:0;left:0;height:5em;width:100%;overflow:visible;display:block}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{position:absolute;bottom:0;left:0;width:100%;margin:0;background-color:#000000a6;color:#fff;pointer-events:none}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote p{margin:0;padding:1em;font-weight:300;font-size:.8em}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{opacity:0;transition:opacity .3s ease-in-out}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption:hover blockquote{opacity:1}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item:hover{z-index:200}article.node-type-evenement.view-mode-full div.cols{display:flex;flex-direction:row;gap:2em;align-items:flex-start}article.node-type-evenement.view-mode-full div.cols div.col{flex:0 0 calc(50% - 1em);max-width:calc(50% - 1em)}article.node-type-evenement.view-mode-full div.cols div.col.left{z-index:10}article.node-type-evenement.view-mode-full div.cols div.col.left>header{transform-origin:0 0;width:205%;z-index:100;pointer-events:none}article.node-type-evenement.view-mode-full div.cols div.col.left>header>h2.node-title{position:relative;font-size:12em;margin:0}article.node-type-evenement.view-mode-full div.cols div.col.left>header>h2.node-title.leshed-svg-export-target{pointer-events:painted}article.node-type-evenement.view-mode-full div.cols div.col.left .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}article.node-type-evenement.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p,article.node-type-evenement.view-mode-full div.cols div.col.left .field_partenaire_s{margin-top:1em;font-weight:400}article.node-type-evenement.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p .field-label,article.node-type-evenement.view-mode-full div.cols div.col.left .field_partenaire_s .field-label{font-weight:200}article.node-type-evenement.view-mode-full div.cols div.col.left .field_dates{margin-top:1em}article.node-type-evenement.view-mode-full div.cols div.col.left .field_dates time{font-weight:400}article.node-type-evenement.view-mode-full div.cols div.col.left>div.spacer{display:block;height:5em}article.node-type-evenement.view-mode-full div.cols div.col.right{display:flex}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images{flex:1}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images:after{display:block;position:relative;content:"";width:100%;height:var(--sticky-extent, 100vh)}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item{position:relative}@media (min-width: 768px){article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item{position:sticky;top:0}}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure{margin:0}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure a{display:block}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure a img{width:100%;max-width:100%;height:auto}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption{margin:0;position:absolute;bottom:0;left:0;height:5em;width:100%;overflow:visible;display:block}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{position:absolute;bottom:0;left:0;width:100%;margin:0;background-color:#000000a6;color:#fff;pointer-events:none}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote p{margin:0;padding:1em;font-weight:300;font-size:.8em}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{opacity:0;transition:opacity .3s ease-in-out}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption:hover blockquote{opacity:1}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item:hover{z-index:200}article.node-type-evenement.view-mode-full .field_dates.digit-dates{transform-origin:0 0;display:flex;position:relative;line-height:1;letter-spacing:-.1em}article.node-type-evenement.view-mode-full .field_dates.digit-dates time{position:relative;display:grid;grid-template-columns:10em 3.8888888889em;grid-template-rows:4.347826087em 4.347826087em;grid-template-areas:"day month" "day year"}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-day{grid-area:day;font-size:10em;font-weight:100;font-style:italic}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-month{grid-area:month;align-self:end;font-weight:400}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-year{grid-area:year;align-self:end;font-weight:700}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-month,article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-year{font-size:4.0816326531em}article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-sep{font-size:5em;padding:0 .2em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s{margin-top:2em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s .field-label{margin-bottom:1em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:clamp(28px,7.4074074074vw,80px)}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste .field_type_d_evenement,article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste .field_type_de_projet{font-weight:400}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images{position:relative;z-index:5}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a{display:block}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a img{width:100%;height:auto}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item{display:inline-block}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item:not(:last-of-type):after{content:", "}div.views-archives-projets{display:flex;flex-direction:row;flex-wrap:wrap;gap:2em}div.views-archives-projets div.views-row{flex:1 0 calc(25% - 2em);width:calc(25% - 2em)}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:clamp(28px,7.4074074074vw,80px)}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste .field_type_d_evenement,div.views-archives-projets article.node-type-projet.view-mode-tableau_liste .field_type_de_projet{font-weight:400}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images{position:relative;z-index:5}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a{display:block}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a img{width:100%;height:auto}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item{display:inline-block}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item:not(:last-of-type):after{content:", "}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:3em}form#views-exposed-form-archives-page-1 div.bef-links ul{margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap}form#views-exposed-form-archives-page-1 div.bef-links ul li{list-style:none;flex:0 1 auto;padding:.2em .5em;font-size:.756em}div.views-archives-evenements>h3{border-bottom:1px solid #999}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier{display:flex;flex-direction:row;gap:1em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header{flex:0 1 auto;padding:0 1em 0 0}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates{display:flex;position:relative;line-height:1;letter-spacing:-.1em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time{position:relative;display:grid;grid-template-columns:5em 1.9444444444em;grid-template-rows:2.1739130435em 2.1739130435em;grid-template-areas:"day month" "day year"}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-day{grid-area:day;font-size:5em;font-weight:100;font-style:italic}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-month{grid-area:month;align-self:end;font-weight:400}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-year{grid-area:year;align-self:end;font-weight:700}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-month,div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-year{font-size:2.0408163265em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates span.date-sep{font-size:2.5em;padding:0 .2em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates{flex-direction:column;align-items:center;gap:.6em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates span.date-sep{display:block;width:1em;height:0;overflow:visible;transform-origin:center;transform:rotate(90deg) translate(.1em);line-height:0;padding:0}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.content{flex:0 1 auto}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.content h2.node-title{font-size:3em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.last-cel{flex:0 1 auto}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.last-cel .field_images a{display:block;width:12em;height:12em;overflow:hidden}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.last-cel .field_images a img{width:100%;height:100%;object-fit:contain;object-position:top left}.splitting .word,.splitting .char{display:inline-block}.splitting .char{position:relative}.splitting .char:before,.splitting .char:after{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;-webkit-user-select:none;user-select:none}.splitting{--word-center: calc((var(--word-total) - 1) / 2);--char-center: calc((var(--char-total) - 1) / 2);--line-center: calc((var(--line-total) - 1) / 2)}.splitting .word{--word-percent: calc(var(--word-index) / var(--word-total));--line-percent: calc(var(--line-index) / var(--line-total))}.splitting .char{--char-percent: calc(var(--char-index) / var(--char-total));--char-offset: calc(var(--char-index) - var(--char-center));--distance: calc( (var(--char-offset) * var(--char-offset)) / var(--char-center) );--distance-sine: calc(var(--char-offset) / var(--char-center));--distance-percent: calc((var(--distance) / var(--char-center)))}.splitting.cells img{width:100%;display:block}@supports (display: grid){.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden}.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr) / repeat(var(--col-total),1fr)}.splitting .cell{background:inherit;position:relative;overflow:hidden}.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100% * var(--col-total));height:calc(100% * var(--row-total));left:calc(-100% * var(--col-index));top:calc(-100% * var(--row-index))}.splitting .cell{--center-x: calc((var(--col-total) - 1) / 2);--center-y: calc((var(--row-total) - 1) / 2);--offset-x: calc(var(--col-index) - var(--center-x));--offset-y: calc(var(--row-index) - var(--center-y));--distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );--distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) )}} +@font-face{font-family:Epilogue;src:url(./fonts/Epilogue-Italic-VariableFont_wght.ttf) format("truetype");src:url(./fonts/Epilogue-Italic-VariableFont_wght.ttf) format("truetype") tech(variations);font-weight:100 900;font-style:italic;font-display:block}@font-face{font-family:Epilogue;src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("truetype");src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("truetype") tech(variations);font-weight:100 900;font-style:normal;font-display:block}body{font-family:Epilogue;font-weight:400;font-style:normal}a,a:visited{text-decoration:none;color:inherit;transition:color .15s ease-out}body{margin:0;font-weight:200;line-height:1.5}div.layout-container{display:flex;flex-direction:column;height:100vh;overflow:hidden;max-width:1080px;margin:0 auto;padding:0 clamp(.75rem,1.4388vw,1rem)}div.layout-container header[role=banner]{display:block;position:relative;padding:.5em 0;flex:1 1 70px;z-index:100;height:70px;min-height:70px}div.layout-container main[role=main]{flex:1 1 auto;overflow-y:scroll}header[role=banner]{background-color:#fff}header[role=banner] .header-middle{display:flex;justify-content:space-between;align-items:center;padding:.2em 0}header[role=banner] #block-leshed-identitedusite a{text-decoration:none;font-size:2em;font-weight:500;margin-right:.5em}header[role=banner] .header-right{height:20px;width:20px;cursor:pointer}header[role=banner] .header-right>div#burger-btn{position:relative;transition-duration:.5s;transition-property:transform;top:8.5px}header[role=banner] .header-right>div#burger-btn,header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{width:20px;height:3px;background-color:#000}header[role=banner] .header-right>div#burger-btn:hover,header[role=banner] .header-right>div#burger-btn:hover:before,header[role=banner] .header-right>div#burger-btn:hover:after{background-color:green}header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{content:"";position:absolute;left:0}header[role=banner] .header-right>div#burger-btn:before{top:6px}header[role=banner] .header-right>div#burger-btn:after{bottom:6px}header[role=banner] .header-right>div#burger-btn[opened]{transform:rotate(90deg)}header[role=banner] .header-right>div.wrapper{position:fixed;top:70px;left:0;width:100vw;padding:0 calc((100vw - 1080px)/2) 0 calc((100vw - 1080px)/2);background-color:#ffffff4d;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);height:0;overflow:hidden;transition-duration:.5s}header[role=banner] .header-right>div.wrapper[opened]{height:calc(100vh - 70px)}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale{padding-top:10px}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale>ul{margin:0;padding:0}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale>ul li{list-style:none}header[role=banner] .header-right>div.wrapper nav#block-leshed-navigationprincipale>ul li a{font-size:4em;font-weight:200;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff)}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul{margin:0;padding:0}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li{list-style:none;padding:0;display:inline-block;font-size:2em}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li:first-child:after{content:" /";font-weight:200}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li:last-child{padding-left:.3em}header[role=banner] .header-right>div.wrapper div#block-leshed-selecteurdelangue ul li.is-active{font-weight:400}.splitting span.word,.splitting span.char{display:inline}.variable-title{margin:0;font-weight:200;text-transform:lowercase;line-height:1;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff)}.variable-title span.word span.char{letter-spacing:-.1em}.variable-title:not(.splitting){margin:0;font-weight:200;text-transform:lowercase;line-height:1;letter-spacing:-.1em}@media (scripting: enabled){.variable-title:not(.is-ready){visibility:hidden;animation:leshed-title-failsafe 0s 3s forwards}}@keyframes leshed-title-failsafe{to{visibility:visible}}div#block-leshed-titredelapage h1{font-size:1em;font-weight:200;margin:0}div.layout.layout--twocol-section--50-50.layout--twocol-section{flex-wrap:nowrap;align-items:flex-start;column-gap:clamp(1.5rem,2.8777vw,2rem)}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region{max-width:calc(50% - (clamp(1.5rem,2.8777vw,2rem)/2));flex:1 0 calc(50% - (clamp(1.5rem,2.8777vw,2rem)/2))}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row{margin-bottom:2em;max-width:100%}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet>header>h2{font-size:clamp(60.48px,7.1942446043vw,80px)}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet .field_artiste_s_invite_s{font-size:clamp(21.168px,2.5899280576vw,28.8px);font-weight:300}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet .field_type_d_evenement,div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet .field_type_de_projet{font-weight:400}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header div.field_images{position:relative;z-index:5}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header div.field_images a{display:block}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet.has-image>header div.field_images a img{width:100%;height:auto}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet div.field_artiste_s_invite_s.field-items.multiple .field-item{display:inline-block}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-projet div.field_artiste_s_invite_s.field-items.multiple .field-item:not(:last-of-type):after{content:", "}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement>header>h2{font-size:clamp(60.48px,7.1942446043vw,80px)}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement .field_artiste_s_invite_s{font-size:clamp(21.168px,2.5899280576vw,28.8px);font-weight:300}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement .field_type_d_evenement,div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement .field_type_de_projet{font-weight:400}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header div.field_images{position:relative;z-index:5}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header div.field_images a{display:block}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement.has-image>header div.field_images a img{width:100%;height:auto}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement>header .field_dates{font-size:clamp(24.192px,4.3165467626vw,48px);line-height:1;letter-spacing:-.1em}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement>header .field_dates time span.date-part:not(:last-child):after{content:"."}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement>header .field_dates time span.date-day{font-weight:100}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement>header .field_dates time span.date-month{font-weight:300}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region .views-row article.node-type-evenement>header .field_dates time span.date-year{font-weight:500}@media (max-width: 431px){div.layout.layout--twocol-section--50-50.layout--twocol-section{display:block}div.layout.layout--twocol-section--50-50.layout--twocol-section div.layout__region{max-width:100%}}article.node-type-projet.view-mode-full div.cols{display:flex;flex-direction:row;gap:clamp(1.5rem,2.8777vw,2rem);align-items:flex-start}article.node-type-projet.view-mode-full div.cols div.col{flex:0 0 calc(50% - (clamp(1.5rem,2.8777vw,2rem)/2));max-width:calc(50% - (clamp(1.5rem,2.8777vw,2rem)/2))}article.node-type-projet.view-mode-full div.cols div.col.left{z-index:10}article.node-type-projet.view-mode-full div.cols div.col.left>header{transform-origin:0 0;width:205%;z-index:100;pointer-events:none}article.node-type-projet.view-mode-full div.cols div.col.left>header>h2.node-title{position:relative;font-size:clamp(128px,17.2661870504vw,192px);margin:0}article.node-type-projet.view-mode-full div.cols div.col.left>header>h2.node-title.leshed-svg-export-target{pointer-events:painted}article.node-type-projet.view-mode-full div.cols div.col.left .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}article.node-type-projet.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p,article.node-type-projet.view-mode-full div.cols div.col.left .field_partenaire_s{margin-top:1em;font-weight:400}article.node-type-projet.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p .field-label,article.node-type-projet.view-mode-full div.cols div.col.left .field_partenaire_s .field-label{font-weight:200}article.node-type-projet.view-mode-full div.cols div.col.left .field_dates{margin-top:1em}article.node-type-projet.view-mode-full div.cols div.col.left .field_dates time{font-weight:400}article.node-type-projet.view-mode-full div.cols div.col.left>div.spacer{display:block;height:5em}article.node-type-projet.view-mode-full div.cols div.col.right{display:flex}article.node-type-projet.view-mode-full div.cols div.col.right .field_images{flex:1}article.node-type-projet.view-mode-full div.cols div.col.right .field_images:after{display:block;position:relative;content:"";width:100%;height:var(--sticky-extent, 100vh)}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item{position:relative}@media (min-width: 768px){article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item{position:sticky;top:0}}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure{margin:0}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure a{display:block}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure a img{width:100%;max-width:100%;height:auto}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption{margin:0;position:absolute;bottom:0;left:0;height:5em;width:100%;overflow:visible;display:block}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{position:absolute;bottom:0;left:0;width:100%;margin:0;background-color:#000000a6;color:#fff;pointer-events:none}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote p{margin:0;padding:1em;font-weight:300;font-size:.8em}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{opacity:0;transition:opacity .3s ease-in-out}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption:hover blockquote{opacity:1}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item:hover{z-index:200}article.node-type-evenement.view-mode-full div.cols{display:flex;flex-direction:row;gap:clamp(1.5rem,2.8777vw,2rem);align-items:flex-start}article.node-type-evenement.view-mode-full div.cols div.col{flex:0 0 calc(50% - (clamp(1.5rem,2.8777vw,2rem)/2));max-width:calc(50% - (clamp(1.5rem,2.8777vw,2rem)/2))}article.node-type-evenement.view-mode-full div.cols div.col.left{z-index:10}article.node-type-evenement.view-mode-full div.cols div.col.left>header{transform-origin:0 0;width:205%;z-index:100;pointer-events:none}article.node-type-evenement.view-mode-full div.cols div.col.left>header>h2.node-title{position:relative;font-size:clamp(128px,17.2661870504vw,192px);margin:0}article.node-type-evenement.view-mode-full div.cols div.col.left>header>h2.node-title.leshed-svg-export-target{pointer-events:painted}article.node-type-evenement.view-mode-full div.cols div.col.left .field_artiste_s_invite_s{font-size:1.8em;font-weight:300}article.node-type-evenement.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p,article.node-type-evenement.view-mode-full div.cols div.col.left .field_partenaire_s{margin-top:1em;font-weight:400}article.node-type-evenement.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p .field-label,article.node-type-evenement.view-mode-full div.cols div.col.left .field_partenaire_s .field-label{font-weight:200}article.node-type-evenement.view-mode-full div.cols div.col.left .field_dates{margin-top:1em}article.node-type-evenement.view-mode-full div.cols div.col.left .field_dates time{font-weight:400}article.node-type-evenement.view-mode-full div.cols div.col.left>div.spacer{display:block;height:5em}article.node-type-evenement.view-mode-full div.cols div.col.right{display:flex}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images{flex:1}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images:after{display:block;position:relative;content:"";width:100%;height:var(--sticky-extent, 100vh)}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item{position:relative}@media (min-width: 768px){article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item{position:sticky;top:0}}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure{margin:0}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure a{display:block}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure a img{width:100%;max-width:100%;height:auto}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption{margin:0;position:absolute;bottom:0;left:0;height:5em;width:100%;overflow:visible;display:block}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{position:absolute;bottom:0;left:0;width:100%;margin:0;background-color:#000000a6;color:#fff;pointer-events:none}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote p{margin:0;padding:1em;font-weight:300;font-size:.8em}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption blockquote{opacity:0;transition:opacity .3s ease-in-out}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item figure figcaption.image-field-caption:hover blockquote{opacity:1}article.node-type-evenement.view-mode-full div.cols div.col.right .field_images .field-item:hover{z-index:200}article.node-type-evenement.view-mode-full .field_dates.digit-dates{transform-origin:0 0;display:flex;position:relative;line-height:1;letter-spacing:-.1em;--ref: clamp(106.6666666667px, 14.3884892086vw, 160px)}article.node-type-evenement.view-mode-full .field_dates.digit-dates time{position:relative;display:grid;grid-template-columns:var(--ref) calc(var(--ref) * 7 / 18);grid-template-rows:calc(var(--ref) / 2.3) calc(var(--ref) / 2.3);grid-template-areas:"day month" "day year"}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-day{grid-area:day;font-size:var(--ref);font-weight:100;font-style:italic}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-month{grid-area:month;align-self:end;font-weight:400}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-year{grid-area:year;align-self:end;font-weight:700}article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-month,article.node-type-evenement.view-mode-full .field_dates.digit-dates time span.date-year{font-size:calc(var(--ref) / 2.45)}article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-sep{font-size:calc(var(--ref) / 2);padding:0 .2em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s{margin-top:2em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s .field-label{margin-bottom:1em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:clamp(60.48px,7.1942446043vw,80px)}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste .field_artiste_s_invite_s{font-size:clamp(21.168px,2.5899280576vw,28.8px);font-weight:300}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste .field_type_d_evenement,article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste .field_type_de_projet{font-weight:400}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images{position:relative;z-index:5}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a{display:block}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a img{width:100%;height:auto}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item{display:inline-block}article.node-type-evenement.view-mode-full div.field_projet_s_lie_s article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item:not(:last-of-type):after{content:", "}div.views-archives-projets{display:flex;flex-direction:row;flex-wrap:wrap;gap:2em;gap:clamp(1.5rem,2.8777vw,2rem)}div.views-archives-projets div.views-row{flex:1 0 calc(25% - clamp(1.5rem,2.8777vw,2rem));width:calc(25% - clamp(1.5rem,2.8777vw,2rem))}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:clamp(60.48px,7.1942446043vw,80px)}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste .field_artiste_s_invite_s{font-size:clamp(21.168px,2.5899280576vw,28.8px);font-weight:300}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste .field_type_d_evenement,div.views-archives-projets article.node-type-projet.view-mode-tableau_liste .field_type_de_projet{font-weight:400}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2{position:relative;max-height:1em;overflow:visible;z-index:10}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="1"]{max-height:1em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="2"]{max-height:2em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="3"]{max-height:3em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="4"]{max-height:4em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="5"]{max-height:5em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="6"]{max-height:6em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="7"]{max-height:7em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="8"]{max-height:8em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="9"]{max-height:9em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header>h2[data-overflow-lines="10"]{max-height:10em}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images{position:relative;z-index:5}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a{display:block}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a img{width:100%;height:auto}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item{display:inline-block}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste div.field_artiste_s_invite_s.field-items.multiple .field-item:not(:last-of-type):after{content:", "}div.views-archives-projets article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:3em}form#views-exposed-form-archives-page-1 div.bef-links ul{margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap}form#views-exposed-form-archives-page-1 div.bef-links ul li{list-style:none;flex:0 1 auto;padding:.2em .5em;font-size:.756em}div.views-archives-evenements>h3{border-bottom:1px solid #999}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier{display:flex;flex-direction:row;gap:1em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header{flex:0 1 auto;padding:0 1em 0 0}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates{display:flex;position:relative;line-height:1;letter-spacing:-.1em;--ref: clamp(53.3333333333px, 7.1942446043vw, 80px)}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time{position:relative;display:grid;grid-template-columns:var(--ref) calc(var(--ref) * 7 / 18);grid-template-rows:calc(var(--ref) / 2.3) calc(var(--ref) / 2.3);grid-template-areas:"day month" "day year"}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-day{grid-area:day;font-size:var(--ref);font-weight:100;font-style:italic}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-month{grid-area:month;align-self:end;font-weight:400}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-year{grid-area:year;align-self:end;font-weight:700}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-month,div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates time span.date-year{font-size:calc(var(--ref) / 2.45)}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates span.date-sep{font-size:calc(var(--ref) / 2);padding:0 .2em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates{flex-direction:column;align-items:center;gap:.6em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier header .field_dates span.date-sep{display:block;width:1em;height:0;overflow:visible;transform-origin:center;transform:rotate(90deg) translate(.1em);line-height:0;padding:0}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.content{flex:0 1 auto}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.content h2.node-title{font-size:3em}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.last-cel{flex:0 1 auto}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.last-cel .field_images a{display:block;width:12em;height:12em;overflow:hidden}div.views-archives-evenements article.node-type-evenement.view-mode-calendrier section.last-cel .field_images a img{width:100%;height:100%;object-fit:contain;object-position:top left}.splitting .word,.splitting .char{display:inline-block}.splitting .char{position:relative}.splitting .char:before,.splitting .char:after{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;-webkit-user-select:none;user-select:none}.splitting{--word-center: calc((var(--word-total) - 1) / 2);--char-center: calc((var(--char-total) - 1) / 2);--line-center: calc((var(--line-total) - 1) / 2)}.splitting .word{--word-percent: calc(var(--word-index) / var(--word-total));--line-percent: calc(var(--line-index) / var(--line-total))}.splitting .char{--char-percent: calc(var(--char-index) / var(--char-total));--char-offset: calc(var(--char-index) - var(--char-center));--distance: calc( (var(--char-offset) * var(--char-offset)) / var(--char-center) );--distance-sine: calc(var(--char-offset) / var(--char-center));--distance-percent: calc((var(--distance) / var(--char-center)))}.splitting.cells img{width:100%;display:block}@supports (display: grid){.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden}.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr) / repeat(var(--col-total),1fr)}.splitting .cell{background:inherit;position:relative;overflow:hidden}.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100% * var(--col-total));height:calc(100% * var(--row-total));left:calc(-100% * var(--col-index));top:calc(-100% * var(--row-index))}.splitting .cell{--center-x: calc((var(--col-total) - 1) / 2);--center-y: calc((var(--row-total) - 1) / 2);--offset-x: calc(var(--col-index) - var(--center-x));--offset-y: calc(var(--row-index) - var(--center-y));--distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );--distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) )}} diff --git a/web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss b/web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss index 35e8ff3..19c7ecc 100644 --- a/web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss @@ -1,3 +1,7 @@ + +@use "sass:math"; +@use "fluid" as *; + @mixin event-date-time($ref: 10em){ display: flex; position: relative; @@ -5,18 +9,25 @@ // des titres variables (supprimé) — elles vivent ici maintenant. line-height: 1; letter-spacing: -0.1em; + // --ref : taille de référence du bloc, dérivée de $ref mais FLUIDE sous le + // layout (fluid-clamp, point de passage à $layout_width, plancher $ref/n). + // Toutes les dimensions internes — grille, jour, mois, année, séparateur — + // dérivent de --ref : le bloc entier rétrécit en lock-step, sans désaligner + // la grille par rapport à la typo. NB : les em sont convertis via px() sur + // hypothèse d'un contexte de 16px. + --ref: #{fluid-clamp(px($ref), $min: math.div(px($ref), 1.5))}; time{ position: relative; display: grid; - grid-template-columns: $ref calc($ref * 7 / 18); - grid-template-rows: calc($ref / 2.3) calc($ref / 2.3); + grid-template-columns: var(--ref) calc(var(--ref) * 7 / 18); + grid-template-rows: calc(var(--ref) / 2.3) calc(var(--ref) / 2.3); grid-template-areas: "day month" "day year"; span.date-day{ grid-area: day; - font-size: $ref; + font-size: var(--ref); font-weight: 100; font-style: italic; } @@ -32,11 +43,11 @@ } span.date-month, span.date-year{ - font-size: calc($ref / 2.45); + font-size: calc(var(--ref) / 2.45); } } span.date-sep{ - font-size: calc($ref / 2); + font-size: calc(var(--ref) / 2); padding:0 0.2em; } } diff --git a/web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss b/web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss index db3bf82..9ff9ba9 100644 --- a/web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss @@ -8,30 +8,41 @@ // Aucun CSS émis. Outils de typo fluide. // // Usage : font-size: fluid-clamp(5rem, $min: 1.75rem); -// → la taille vaut 5rem tant que le viewport tient $layout_width, -// suit la largeur du viewport en dessous, plancher $min. -// Le point de passage est dérivé de $layout_width : recalage -// automatique si le plafond du layout change. +// → la taille vaut 5rem tant que le viewport tient le layout complet +// (contenu + padding latéral), suit la largeur du viewport en dessous, +// plancher $min. +// Le point de passage est dérivé de $layout-anchor : recalage +// automatique si le plafond du layout ou son padding changent. @use "sass:math"; @use "variables" as *; $root: 16px; // taille de police de -// Convertit px ou rem en px réels (Sass ne convertit pas rem seul). +// Convertit px, rem ou em en px. Pour rem/em : hypothèse d'un contexte typo +// de base 16px ($root) — suffisante pour calibrer un clamp (le point de +// passage reste exact tant que l'élément vit dans la base typo). @function px($size) { @if $size == 0 { @return 0px; } @if math.unit($size) == "px" { @return $size; } @if math.unit($size) == "rem" { @return math.div($size, 1rem) * $root; } - @error "px() : px ou rem attendu, reçu #{$size}"; + @if math.unit($size) == "em" { @return math.div($size, 1em) * $root; } + @error "px() : px, rem ou em attendu, reçu #{$size}"; } +// Largeur d'ancrage des clamps : le viewport auquel le layout est plein — +// 1080px de contenu + 2 × 16px de padding = 1112px. +// Depuis que $layout_padding et $colsgap sont proportionnels (clamp vw), +// le padding vaut exactement 16px à ce point (1.4388vw × 1112). Valeur +// constante : px() ne sait pas parser un clamp() pour la dériver. +$layout-anchor: 1112px; + // La valeur vw qui vaut exactement $size quand le viewport fait $at. -@function vw-at($size, $at: $layout_width) { +@function vw-at($size, $at: $layout-anchor) { @return math.div(px($size), $at) * 100 * 1vw; } // $size au-dessus de $at, fluide en dessous, plancher $min. -@function fluid-clamp($size, $at: $layout_width, $min: 0px) { +@function fluid-clamp($size, $at: $layout-anchor, $min: 0px) { @return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)}); } diff --git a/web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss b/web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss index bcd8c7f..1b71468 100644 --- a/web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss @@ -5,6 +5,7 @@ // |_| \_|\___/ \__,_|\___|_| \__,_|_|_| @use "variables" as *; +@use "fluid" as *; @mixin nodefull{ div.cols{ @@ -28,7 +29,8 @@ >h2.node-title{ position: relative; - font-size: 12em; + // font-size: 12em; + font-size: fluid-clamp(12rem, $min: 8rem); margin: 0; &.leshed-svg-export-target{ pointer-events: painted; diff --git a/web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss b/web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss index 9afcf5b..ef92f0e 100644 --- a/web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss @@ -11,11 +11,12 @@ >header{ >h2{ - font-size: fluid-clamp(5rem, $min: 1.75rem); + font-size: fluid-clamp(5rem, $min: 3.780rem); } } .field_artiste_s_invite_s{ - font-size: 1.8em; + // font-size: 1.8em; + font-size: fluid-clamp(1.8rem, $min: 1.323rem); font-weight: 300; } @@ -78,7 +79,8 @@ @include nodeOnListe(); >header{ .field_dates{ - font-size: 4em; + // font-size: 4em; + font-size: fluid-clamp(3rem, $min: 1.512rem); line-height: 1; // Avant fourni par le bloc de masquage des titres variables. letter-spacing: -0.1em; @@ -88,6 +90,15 @@ content:"."; } } + span.date-day{ + font-weight: 100; + } + span.date-month{ + font-weight: 300; + } + span.date-year{ + font-weight: 500; + } } } } diff --git a/web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss b/web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss index 70b074e..6274ff1 100644 --- a/web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss @@ -1,4 +1,10 @@ $layout_width: 1080px; +// Padding et gap proportionnels : sous l'ancrage du layout (voir _fluid.scss, +// $layout-anchor), TOUT rétrécit ensemble (typo fluide, gouttières, colonnes) — +// les clamps vw restent exacts à toutes les largeurs. Les vw sont calés pour +// valoir exactement les bornes hautes à l'ancrage (1112px) : au-dessus, le +// design desktop est identique à l'ancien 1em/2em fixe. +$layout_padding: clamp(0.75rem, 1.4388vw, 1rem); $default_fwght: 200; $header_height: 70px; -$colsgap: 2em; +$colsgap: clamp(1.5rem, 2.8777vw, 2rem); diff --git a/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss b/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss index 2b5008c..4b54327 100644 --- a/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss +++ b/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss @@ -17,6 +17,7 @@ div.layout-container{ overflow: hidden; max-width:$layout_width; margin: 0 auto; + padding: 0 $layout_padding; header[role="banner"]{ display: block; position: relative; diff --git a/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss b/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss index 28fe3f3..cc860d9 100644 --- a/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss +++ b/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss @@ -8,7 +8,7 @@ @use "../abstracts/nodes-on-liste" as *; -div.layout.layout--twocol-section--50-50{ +div.layout.layout--twocol-section--50-50.layout--twocol-section{ flex-wrap: nowrap; // Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur. @@ -33,4 +33,14 @@ div.layout.layout--twocol-section--50-50{ } } + + @media (max-width:431px) { + &{ + display:block; + div.layout__region{ + max-width: 100%; + } + } + + } }