From 74399a382359aa7dd8a40bcf5ffa9ff6532b00a6 Mon Sep 17 00:00:00 2001 From: bach Date: Mon, 28 Sep 2026 17:49:46 +0200 Subject: [PATCH] scss refactor: main.scss split into abstracts/global/pages partials, kebab-case (compiled css unchanged) --- web/themes/custom/leshed/assets/dist/main.css | 2 +- .../custom/leshed/assets/scss/main.scss | 772 +----------------- .../partials/abstracts/_event-date-time.scss | 38 + .../scss/partials/abstracts/_node-full.scss | 163 ++++ .../partials/abstracts/_nodes-on-liste.scss | 94 +++ .../_variables.scss} | 0 .../leshed/assets/scss/partials/colors.scss | 3 - .../assets/scss/partials/global/_base.scss | 21 + .../{fonts.scss => global/_fonts.scss} | 2 +- .../assets/scss/partials/global/_header.scss | 141 ++++ .../assets/scss/partials/global/_layout.scss | 45 + .../partials/global/_variable-titles.scss | 83 ++ .../leshed/assets/scss/partials/mixins.scss | 71 -- .../scss/partials/pages/_evenement.scss | 33 + .../assets/scss/partials/pages/_home.scss | 36 + .../assets/scss/partials/pages/_projet.scss | 15 + .../pages/_views-archives-evenements.scss | 71 ++ .../pages/_views-archives-projets.scss | 49 ++ 18 files changed, 807 insertions(+), 832 deletions(-) create mode 100644 web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss rename web/themes/custom/leshed/assets/scss/partials/{variables.scss => abstracts/_variables.scss} (100%) delete mode 100644 web/themes/custom/leshed/assets/scss/partials/colors.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/global/_base.scss rename web/themes/custom/leshed/assets/scss/partials/{fonts.scss => global/_fonts.scss} (83%) create mode 100644 web/themes/custom/leshed/assets/scss/partials/global/_header.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/global/_layout.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/global/_variable-titles.scss delete mode 100644 web/themes/custom/leshed/assets/scss/partials/mixins.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/pages/_evenement.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/pages/_home.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/pages/_projet.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-evenements.scss create mode 100644 web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-projets.scss diff --git a/web/themes/custom/leshed/assets/dist/main.css b/web/themes/custom/leshed/assets/dist/main.css index 3cbb604..0c137e5 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}.splitting span.word,.splitting span.char{display:inline}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}.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}:where(#block-leshed-identitedusite>a,article.node-type-projet>header>h2,article.node-type-projet>.cols>.left>h2,article.node-type-projet.view-mode-full h2.node-title,article.node-type-evenement>header>h2,article.node-type-evenement>header>.field_dates>time,article.node-type-evenement.view-mode-full h2.node-title,article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part):not(.splitting){margin:0;font-weight:200;text-transform:lowercase;line-height:1;letter-spacing:-.1em}@media (scripting: enabled){:where(#block-leshed-identitedusite>a,article.node-type-projet>header>h2,article.node-type-projet>.cols>.left>h2,article.node-type-projet.view-mode-full h2.node-title,article.node-type-evenement>header>h2,article.node-type-evenement>header>.field_dates>time,article.node-type-evenement.view-mode-full h2.node-title,article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part):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:5em}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:5em}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}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}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:5em}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:5em}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}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}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}:where(#block-leshed-identitedusite>a,article.node-type-projet>header>h2,article.node-type-projet>.cols>.left>h2,article.node-type-projet.view-mode-full h2.node-title,article.node-type-evenement>header>h2,article.node-type-evenement>header>.field_dates>time,article.node-type-evenement.view-mode-full h2.node-title,article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part):not(.splitting){margin:0;font-weight:200;text-transform:lowercase;line-height:1;letter-spacing:-.1em}@media (scripting: enabled){:where(#block-leshed-identitedusite>a,article.node-type-projet>header>h2,article.node-type-projet>.cols>.left>h2,article.node-type-projet.view-mode-full h2.node-title,article.node-type-evenement>header>h2,article.node-type-evenement>header>.field_dates>time,article.node-type-evenement.view-mode-full h2.node-title,article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part):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:5em}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:5em}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}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}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:5em}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:5em}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}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) )}} diff --git a/web/themes/custom/leshed/assets/scss/main.scss b/web/themes/custom/leshed/assets/scss/main.scss index 2d9631c..32170e4 100644 --- a/web/themes/custom/leshed/assets/scss/main.scss +++ b/web/themes/custom/leshed/assets/scss/main.scss @@ -1,756 +1,16 @@ -@use "partials/variables" as *; -@use "partials/colors" as *; -@use "partials/fonts" as *; -@use "partials/mixins" as *; - -a, a:visited{ - text-decoration: none; - color: inherit; - transition: color 0.15s ease-out; -} - -body{ - margin: 0; - // background-color: green; - font-weight: $default_fwght; - line-height: 1.5; -} - -// Splitting met .word ET .char en inline-block : -// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ; -// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la -// ligne interne, donc les soft hyphens ne peuvent jamais couper le mot. -// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe -// qu'aux césures logicielles (U+00AD) insérées par le JS. -// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting. -.splitting span.word, -.splitting span.char{ - display: inline; -} - - -// _ _ -// | | | | -// | | __ _ _ _ ___ _ _| |_ -// | | / _` | | | |/ _ \| | | | __| -// | |___| (_| | |_| | (_) | |_| | |_ -// \_____/\__,_|\__, |\___/ \__,_|\__| -// __/ | -// |___/ - -div.layout-container{ - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; - max-width:$layout_width; - margin: 0 auto; - header[role="banner"]{ - display: block; - position: relative; - padding: 0.5em 0; - flex: 1 1 $header_height; - z-index: 100; - // position: fixed; - // top:0; - // width: 100%; - height: $header_height; - min-height: $header_height; - } - main[role="main"]{ - flex: 1 1 auto; - // padding:5em 0; - overflow-y: scroll; - } - // footer[role="contentinfo"]{ - // // flex: 0 1 content; - // z-index: 100; - // position: fixed; - // bottom: 0; - // width: 100%; - // } -} - - - -// _ _ _ -// | | | | | | -// | |_| | ___ __ _ __| | ___ _ __ -// | _ |/ _ \/ _` |/ _` |/ _ \ '__| -// | | | | __/ (_| | (_| | __/ | -// \_| |_/\___|\__,_|\__,_|\___|_| - - -header[role="banner"]{ - background-color: #fff; - // box-shadow: 0 -5px 15px #000; - - .header-middle{ - display: flex; - justify-content:space-between; - align-items: center; - padding: 0.2em 0; - } - - #block-leshed-identitedusite{ - a{ - // color: ; - text-decoration: none; - font-size: 2em; - font-weight: 500; - margin-right: 0.5em; - // &:hover{ - // color: $rose; - // } - } - } - - .header-right{ - // position: relative; - height:20px; width:20px; - cursor: pointer; - // background-color: green; - - >div#burger-btn{ - position:relative; - transition-duration: 0.5s; - transition-property: transform; - top: 8.5px; - &, &::before, &::after{ - // position: absolute; - width:20px; height:3px; - background-color: #000; - - } - &:hover{ - &, &::before, &::after{ - background-color: green; - } - } - &::before, &::after{ - content: ""; - position: absolute; - left: 0; - // background-color: red; - } - &::before{ - top:6px; - } - &::after{ - bottom: 6px; - } - &[opened]{ - transform: rotate(90deg); - } - } - - - &>div.wrapper{ - // fixed (et non absolute) pour échapper à l'overflow:hidden de - // .layout-container : sinon le débord pleine largeur (et donc le - // backdrop-filter) est rogné aux bords du conteneur centré. - position:fixed; - top:$header_height; - left: 0; - width:100vw; - padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2); - - background-color: rgba(255,255,255,0.3); - backdrop-filter: blur(7px); - - height: 0; - overflow: hidden; - transition-duration: 0.5s; - &[opened]{ - height: calc(100vh - $header_height); - } - nav#block-leshed-navigationprincipale{ - // width: $layout_width; - // margin: 0 auto; - padding-top: 10px; - // background-color: #fff; - >ul{ - margin: 0; - padding:0; - li{ - list-style: none; - 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); - } - } - } - } - div#block-leshed-selecteurdelangue{ - ul{ - margin:0; - padding:0; - li{ - list-style: none; - padding:0; - display: inline-block; - font-size: 2em; - &:first-child{ - &:after{ - content: " /"; - font-weight: 200; - } - } - &:last-child{ - padding-left: 0.3em; - - } - &.is-active{ - font-weight: 400; - } - - } - } - } - } - - } -} // end of header[role="banner"]{ - - -// ____ _ _ _ -// / ___| | ___ | |__ __ _| |___ -// | | _| |/ _ \| '_ \ / _` | / __| -// | |_| | | (_) | |_) | (_| | \__ \ -// \____|_|\___/|_.__/ \__,_|_|___/ - -.variable-title{ - margin: 0; - font-weight: 200; - text-transform:lowercase; - line-height: 1; - // margin-left: -0.04em; - filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff); - span.word{ - span.char{ - letter-spacing:-0.1em; - } - } - // span.whitespace{ - // letter-spacing: 0.5em; - // } -} - -// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS. -$variable-title-selectors: ( - '#block-leshed-identitedusite>a', - 'article.node-type-projet>header>h2', - 'article.node-type-projet>.cols>.left>h2', - 'article.node-type-projet.view-mode-full h2.node-title', - 'article.node-type-evenement>header>h2', - 'article.node-type-evenement>header>.field_dates>time', - 'article.node-type-evenement.view-mode-full h2.node-title', - 'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part', -); - -// Avant le split : même métrique qu'après, pour éviter un saut de mise en page. -:where(#{$variable-title-selectors}):not(.splitting){ - margin: 0; - font-weight: 200; - text-transform: lowercase; - line-height: 1; - letter-spacing: -0.1em; -} - -// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue. -@media (scripting: enabled){ - :where(#{$variable-title-selectors}):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: $default_fwght; - margin: 0; -} - - - -// _____ _____ __ ____ ___ _ ____ -// |_ _/ _ \ \ / / / ___/ _ \| | / ___| -// | || | | \ \ /\ / / | | | | | | | \___ \ -// | || |_| |\ V V / | |__| |_| | |___ ___) | -// |_| \___/ \_/\_/ \____\___/|_____|____/ - -@mixin nodeListe{ - >header{ - - >h2{ - font-size: 5em; - } - } - .field_artiste_s_invite_s{ - font-size: 1.8em; - font-weight: 300; - } - - .field_type_d_evenement, - .field_type_de_projet{ - font-weight: 400; - } - - &.has-image{ - >header{ - >h2{ - position: relative; - max-height: 1em; - overflow: visible; - z-index: 10; - // text-shadow: 0 0 10px #fff; - // box-shadow: 0 0 15px #f00; - // filter: drop-shadow(0 0 5px #fff); - - // Si le titre déborde de N lignes sous l'image, on remet N lignes - // supplémentaires dans le flux avant l'image pour absorber le débordement. - @for $i from 1 through 10 { - &[data-overflow-lines="#{$i}"] { - max-height: #{$i}em; - } - } - } - div.field_images{ - position:relative; - // width: 100%; - z-index: 5; - a{ - display:block; - img{ - width:100%; - height: auto; - } - } - } - } - } -} - -@mixin projetListe{ - @include nodeListe(); - - div.field_artiste_s_invite_s.field-items.multiple{ - // display: flex; - // flex-direction: row; - .field-item{ - display: inline-block; - &:not(:last-of-type):after{ - content: ", "; - } - } - } -} - -@mixin evenementListe{ - @include nodeListe(); - >header{ - .field_dates{ - font-size: 4em; - line-height: 1; - time{ - span.date-part:not(:last-child){ - &:after{ - content:"."; - } - } - } - } - } -} - - -div.layout.layout--twocol-section--50-50{ - 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. - // flex-start = chaque colonne prend la hauteur de son contenu. - align-items: flex-start; - - column-gap: $colsgap; - div.layout__region{ - max-width: calc(50% - $colsgap / 2); - flex: 1 0 calc(50% - $colsgap / 2); - .views-row{ - // border: 1px solid red; - // box-sizing: border-box; - margin-bottom: 2em; - max-width: 100%; - article.node-type-projet{ - @include projetListe(); - } - article.node-type-evenement{ - @include evenementListe(); - } - - } - } -} - -// _ _ _ _____ _ _ -// | \ | | ___ __| | ___| ___| _| | | -// | \| |/ _ \ / _` |/ _ \ |_ | | | | | | -// | |\ | (_) | (_| | __/ _|| |_| | | | -// |_| \_|\___/ \__,_|\___|_| \__,_|_|_| - - -@mixin nodefull{ - div.cols{ - display: flex; - flex-direction: row; - gap: $colsgap; - align-items: flex-start; - div.col{ - flex:0 0 calc(50% - $colsgap / 2); - max-width: calc(50% - $colsgap / 2); - - &.left{ - z-index: 10; - // padding-bottom: 5em; - // box-sizing: border-box; - >header{ - transform-origin: 0 0; - width: 205%;//calc(50% - $colsgap / 2); - z-index: 100; - pointer-events: none; - - >h2.node-title{ - position: relative; - font-size: 12em; - margin: 0; - &.leshed-svg-export-target{ - pointer-events: painted; - } - } - } - - .field_artiste_s_invite_s{ - font-size: 1.8em; - font-weight: 300; - } - .field_invite_accompagne_curate_p, - .field_partenaire_s{ - margin-top: 1em; - font-weight: 400; - .field-label{ - font-weight: $default_fwght; - } - // >div{ - // display: inline-block; - // } - } - .field_dates{ - margin-top: 1em; - time{ - font-weight: 400; - } - } - - >div.spacer{ - display: block; - height: 5em; - } - } - &.right{ - // Étire .field_images sur toute la hauteur de la colonne (= colonne la - // plus haute, via le stretch de .cols) : le contexte de collage sticky - // couvre alors tout le scroll, donc les cartes restent figées tant que - // la colonne gauche défile encore (cf. point 6). - display: flex; - .field_images{ - flex: 1; - // .field-items{ - &:after{ - display: block; - position: relative; - content: ""; - // border: 1px solid red; - width: 100%; - // Étend le contexte sticky au-delà de la dernière image pour - // couvrir le scroll restant de la colonne gauche. Hauteur calculée - // en JS (voir main.js, adjustStickyContext) via --sticky-extent. - height: var(--sticky-extent, 100vh); - } - // } - .field-item{ - position: relative; - // Empilement "cartes" : chaque image se fige au même endroit (haut) et - // est recouverte par la suivante (l'ordre du DOM fait que la dernière - // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement. - @media (min-width: 768px){ - position: sticky; - top: 0; - // &:last-child:after{ - // content: ""; - // // position: relative; - // display:block; - // // blockquote.image-field-caption{ - // height: 100vh; - // width:100%; - // border: 1px solid red; - // // } - // } - } - figure{ - margin: 0; - a{ - display: block; - img{ - width: 100%; - max-width: 100%; - height: auto; - } - } - figcaption.image-field-caption{ - margin: 0; - position: absolute; - bottom: 0; left: 0; - height: 5em; - width: 100%; - overflow: visible; - display: block; - // border: 1px solid red; - blockquote{ - position: absolute; - bottom: 0; left: 0; - width: 100%; - margin: 0; - background-color: rgba(0,0,0,0.65); - color: #fff; - pointer-events: none; - p{ - margin: 0; - padding: 1em; - font-weight: 300; - font-size: 0.8em; - } - opacity: 0; - transition: opacity 0.3s ease-in-out; - } - &:hover{ - // z-index:200; - blockquote{ - opacity: 1; - } - } - } - - } - - &:hover{ - z-index:200; - - } - } - - } - - } - } - } -} - -// ____ _ _ -// | _ \ _ __ ___ (_) ___| |_ -// | |_) | '__/ _ \| |/ _ \ __| -// | __/| | | (_) | | __/ |_ -// |_| |_| \___// |\___|\__| -// |__/ -article.node-type-projet.view-mode-full{ - @include nodefull(); - - -} - - -// _____ _ -// | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ -// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __| -// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_ -// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__| - -@mixin event-date-time($ref: 10em){ - display: flex; - position: relative; - time{ - position: relative; - display: grid; - grid-template-columns: $ref ($ref * 7 / 18); - grid-template-rows: $ref / 2.3 $ref / 2.3; - grid-template-areas: - "day month" - "day year"; - - span.date-day{ - grid-area: day; - font-size: $ref; - font-weight: 100; - font-style: italic; - } - span.date-month{ - grid-area: month; - align-self: end; - font-weight: 400; - } - span.date-year{ - grid-area: year; - align-self: end; - font-weight: 700; - } - span.date-month, - span.date-year{ - font-size: $ref / 2.45; - } - } - span.date-sep{ - font-size: $ref / 2; - padding:0 0.2em; - } -} - - -article.node-type-evenement.view-mode-full{ - @include nodefull(); - - .field_dates.digit-dates{ - transform-origin: 0 0; - @include event-date-time(); - } - - div.field_projet_s_lie_s{ - margin-top: 2em; - .field-label{ - margin-bottom: 1em; - } - article.node-type-projet.view-mode-tableau_liste{ - @include projetListe(); - } - } - -} - - - - -// __ ___ _ _ _ ____ _ _ -// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | _ \ _ __ ___ (_) ___| |_ -// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __| -// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | __/| | | (_) | | __/ |_ -// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__| -// |__/ -div.views-archives-projets{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 2em; - gap: $colsgap; - div.views-row{ - flex: 1 0 calc(25% - $colsgap); - width: calc(25% - $colsgap); - } - - article.node-type-projet.view-mode-tableau_liste{ - - @include projetListe(); - >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; - li{ - list-style: none; - flex: 0 1 auto; - padding: 0.2em 0.5em; - font-size: 0.756em; - } - } - } -} - -// __ ___ _ _ _ _____ _ -// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ ___ -// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __| -// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \ -// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/ -div.views-archives-evenements { - - & > h3{ - border-bottom: 1px solid #999; - } - - article.node-type-evenement.view-mode-calendrier{ - // @include evenementListe(); - display: flex; - flex-direction: row; - gap: 1em; - header{ - flex:0 1 auto; - // width: 5em; - padding:0 1em 0 0; - - .field_dates{ - @include event-date-time(5em); - flex-direction: column; - align-items: center; - gap: 0.6em; - span.date-sep{ - display: block; - width: 1em; - height: 0; - overflow: visible; - transform-origin: center; - transform: rotate(90deg) translateX(0.1em); - line-height: 0; - padding: 0; - } - } - } - - section.content{ - flex:0 1 auto; - h2.node-title{ - font-size: 3em; - } - } - - section.last-cel{ - flex:0 1 auto; - .field_images{ - a{ - display: block; - width: 12em; - height: 12em; - overflow: hidden; - img{ - width: 100%; - height: 100%; - object-fit:contain; - object-position: top left; - } - } - } - } - - } -} - +// ── Bibliothèques (aucun CSS émis, chargées par les autres) ──────────────── +@use "partials/abstracts/variables" as *; + +// ── Socle global (présent sur toutes les pages) ──────────────────────────── +@use "partials/global/fonts" as *; +@use "partials/global/base"; +@use "partials/global/layout"; +@use "partials/global/header"; +@use "partials/global/variable-titles"; + +// ── Pages (l'ordre ci-dessous EST la cascade) ────────────────────────────── +@use "partials/pages/home"; +@use "partials/pages/projet"; +@use "partials/pages/evenement"; +@use "partials/pages/views-archives-projets"; +@use "partials/pages/views-archives-evenements"; 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 new file mode 100644 index 0000000..bb1227c --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss @@ -0,0 +1,38 @@ +@mixin event-date-time($ref: 10em){ + display: flex; + position: relative; + 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-areas: + "day month" + "day year"; + + span.date-day{ + grid-area: day; + font-size: $ref; + font-weight: 100; + font-style: italic; + } + span.date-month{ + grid-area: month; + align-self: end; + font-weight: 400; + } + span.date-year{ + grid-area: year; + align-self: end; + font-weight: 700; + } + span.date-month, + span.date-year{ + font-size: calc($ref / 2.45); + } + } + span.date-sep{ + font-size: calc($ref / 2); + padding:0 0.2em; + } +} 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 new file mode 100644 index 0000000..bcd8c7f --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss @@ -0,0 +1,163 @@ +// _ _ _ _____ _ _ +// | \ | | ___ __| | ___| ___| _| | | +// | \| |/ _ \ / _` |/ _ \ |_ | | | | | | +// | |\ | (_) | (_| | __/ _|| |_| | | | +// |_| \_|\___/ \__,_|\___|_| \__,_|_|_| + +@use "variables" as *; + +@mixin nodefull{ + div.cols{ + display: flex; + flex-direction: row; + gap: $colsgap; + align-items: flex-start; + div.col{ + flex:0 0 calc(50% - $colsgap / 2); + max-width: calc(50% - $colsgap / 2); + + &.left{ + z-index: 10; + // padding-bottom: 5em; + // box-sizing: border-box; + >header{ + transform-origin: 0 0; + width: 205%;//calc(50% - $colsgap / 2); + z-index: 100; + pointer-events: none; + + >h2.node-title{ + position: relative; + font-size: 12em; + margin: 0; + &.leshed-svg-export-target{ + pointer-events: painted; + } + } + } + + .field_artiste_s_invite_s{ + font-size: 1.8em; + font-weight: 300; + } + .field_invite_accompagne_curate_p, + .field_partenaire_s{ + margin-top: 1em; + font-weight: 400; + .field-label{ + font-weight: $default_fwght; + } + // >div{ + // display: inline-block; + // } + } + .field_dates{ + margin-top: 1em; + time{ + font-weight: 400; + } + } + + >div.spacer{ + display: block; + height: 5em; + } + } + &.right{ + // Étire .field_images sur toute la hauteur de la colonne (= colonne la + // plus haute, via le stretch de .cols) : le contexte de collage sticky + // couvre alors tout le scroll, donc les cartes restent figées tant que + // la colonne gauche défile encore (cf. point 6). + display: flex; + .field_images{ + flex: 1; + // .field-items{ + &:after{ + display: block; + position: relative; + content: ""; + // border: 1px solid red; + width: 100%; + // Étend le contexte sticky au-delà de la dernière image pour + // couvrir le scroll restant de la colonne gauche. Hauteur calculée + // en JS (voir main.js, adjustStickyContext) via --sticky-extent. + height: var(--sticky-extent, 100vh); + } + // } + .field-item{ + position: relative; + // Empilement "cartes" : chaque image se fige au même endroit (haut) et + // est recouverte par la suivante (l'ordre du DOM fait que la dernière + // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement. + @media (min-width: 768px){ + position: sticky; + top: 0; + // &:last-child:after{ + // content: ""; + // // position: relative; + // display:block; + // // blockquote.image-field-caption{ + // height: 100vh; + // width:100%; + // border: 1px solid red; + // // } + // } + } + figure{ + margin: 0; + a{ + display: block; + img{ + width: 100%; + max-width: 100%; + height: auto; + } + } + figcaption.image-field-caption{ + margin: 0; + position: absolute; + bottom: 0; left: 0; + height: 5em; + width: 100%; + overflow: visible; + display: block; + // border: 1px solid red; + blockquote{ + position: absolute; + bottom: 0; left: 0; + width: 100%; + margin: 0; + background-color: rgba(0,0,0,0.65); + color: #fff; + pointer-events: none; + p{ + margin: 0; + padding: 1em; + font-weight: 300; + font-size: 0.8em; + } + opacity: 0; + transition: opacity 0.3s ease-in-out; + } + &:hover{ + // z-index:200; + blockquote{ + opacity: 1; + } + } + } + + } + + &:hover{ + z-index:200; + + } + } + + } + + } + } + } +} 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 new file mode 100644 index 0000000..eef11df --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss @@ -0,0 +1,94 @@ +// _ _ _ ___ _ _ _ +// | \ | | ___ __| | ___ / _ \ _ __ | | (_)___| |_ ___ +// | \| |/ _ \ / _` |/ _ \ | | | | '_ \ | | | / __| __/ _ \ +// | |\ | (_) | (_| | __/ | |_| | | | | | |___| \__ \ || __/ +// |_| \_|\___/ \__,_|\___| \___/|_| |_| |_____|_|___/\__\___| + +@use "variables" as *; + +@mixin nodeOnListe{ + >header{ + + >h2{ + font-size: 5em; + } + } + .field_artiste_s_invite_s{ + font-size: 1.8em; + font-weight: 300; + } + + .field_type_d_evenement, + .field_type_de_projet{ + font-weight: 400; + } + + &.has-image{ + >header{ + >h2{ + position: relative; + max-height: 1em; + overflow: visible; + z-index: 10; + // text-shadow: 0 0 10px #fff; + // box-shadow: 0 0 15px #f00; + // filter: drop-shadow(0 0 5px #fff); + + // Si le titre déborde de N lignes sous l'image, on remet N lignes + // supplémentaires dans le flux avant l'image pour absorber le débordement. + @for $i from 1 through 10 { + &[data-overflow-lines="#{$i}"] { + max-height: #{$i}em; + } + } + } + div.field_images{ + position:relative; + // width: 100%; + z-index: 5; + a{ + display:block; + img{ + width:100%; + height: auto; + } + } + } + } + } +} + +@mixin projetOnListe{ + @include nodeOnListe(); + + div.field_artiste_s_invite_s.field-items.multiple{ + // display: flex; + // flex-direction: row; + .field-item{ + display: inline-block; + &:not(:last-of-type):after{ + content: ", "; + } + } + } +} + +@mixin evenementOnListe{ + @include nodeOnListe(); + >header{ + .field_dates{ + font-size: 4em; + line-height: 1; + time{ + span.date-part:not(:last-child){ + &:after{ + content:"."; + } + } + } + } + } +} + + + diff --git a/web/themes/custom/leshed/assets/scss/partials/variables.scss b/web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss similarity index 100% rename from web/themes/custom/leshed/assets/scss/partials/variables.scss rename to web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss diff --git a/web/themes/custom/leshed/assets/scss/partials/colors.scss b/web/themes/custom/leshed/assets/scss/partials/colors.scss deleted file mode 100644 index fb1d937..0000000 --- a/web/themes/custom/leshed/assets/scss/partials/colors.scss +++ /dev/null @@ -1,3 +0,0 @@ -// $bleu_site: #1642bc; -// $bleu_typo: #0b1e52; -// $rose: #f661e2; diff --git a/web/themes/custom/leshed/assets/scss/partials/global/_base.scss b/web/themes/custom/leshed/assets/scss/partials/global/_base.scss new file mode 100644 index 0000000..fa18701 --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/global/_base.scss @@ -0,0 +1,21 @@ +// ____ +// | __ ) __ _ ___ ___ +// | _ \ / _` / __|/ _ \ +// | |_) | (_| \__ \ __/ +// |____/ \__,_|___/\___| + +@use "../abstracts/variables" as *; + + +a, a:visited{ + text-decoration: none; + color: inherit; + transition: color 0.15s ease-out; +} + +body{ + margin: 0; + // background-color: green; + font-weight: $default_fwght; + line-height: 1.5; +} diff --git a/web/themes/custom/leshed/assets/scss/partials/fonts.scss b/web/themes/custom/leshed/assets/scss/partials/global/_fonts.scss similarity index 83% rename from web/themes/custom/leshed/assets/scss/partials/fonts.scss rename to web/themes/custom/leshed/assets/scss/partials/global/_fonts.scss index 33417c5..4192751 100644 --- a/web/themes/custom/leshed/assets/scss/partials/fonts.scss +++ b/web/themes/custom/leshed/assets/scss/partials/global/_fonts.scss @@ -1,4 +1,4 @@ -@use "../../fonts/epilogue/stylesheet" with ($font-path: "../fonts/epilogue"); +@use "../../../fonts/epilogue/stylesheet" with ($font-path: "../fonts/epilogue"); body{ font-family: 'Epilogue'; diff --git a/web/themes/custom/leshed/assets/scss/partials/global/_header.scss b/web/themes/custom/leshed/assets/scss/partials/global/_header.scss new file mode 100644 index 0000000..d270edb --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/global/_header.scss @@ -0,0 +1,141 @@ +// _ _ _ +// | | | | | | +// | |_| | ___ __ _ __| | ___ _ __ +// | _ |/ _ \/ _` |/ _` |/ _ \ '__| +// | | | | __/ (_| | (_| | __/ | +// \_| |_/\___|\__,_|\__,_|\___|_| + +@use "../abstracts/variables" as *; + + +header[role="banner"]{ + background-color: #fff; + // box-shadow: 0 -5px 15px #000; + + .header-middle{ + display: flex; + justify-content:space-between; + align-items: center; + padding: 0.2em 0; + } + + #block-leshed-identitedusite{ + a{ + // color: ; + text-decoration: none; + font-size: 2em; + font-weight: 500; + margin-right: 0.5em; + // &:hover{ + // color: $rose; + // } + } + } + + .header-right{ + // position: relative; + height:20px; width:20px; + cursor: pointer; + // background-color: green; + + >div#burger-btn{ + position:relative; + transition-duration: 0.5s; + transition-property: transform; + top: 8.5px; + &, &::before, &::after{ + // position: absolute; + width:20px; height:3px; + background-color: #000; + + } + &:hover{ + &, &::before, &::after{ + background-color: green; + } + } + &::before, &::after{ + content: ""; + position: absolute; + left: 0; + // background-color: red; + } + &::before{ + top:6px; + } + &::after{ + bottom: 6px; + } + &[opened]{ + transform: rotate(90deg); + } + } + + + &>div.wrapper{ + // fixed (et non absolute) pour échapper à l'overflow:hidden de + // .layout-container : sinon le débord pleine largeur (et donc le + // backdrop-filter) est rogné aux bords du conteneur centré. + position:fixed; + top:$header_height; + left: 0; + width:100vw; + padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2); + + background-color: rgba(255,255,255,0.3); + backdrop-filter: blur(7px); + + height: 0; + overflow: hidden; + transition-duration: 0.5s; + &[opened]{ + height: calc(100vh - $header_height); + } + nav#block-leshed-navigationprincipale{ + // width: $layout_width; + // margin: 0 auto; + padding-top: 10px; + // background-color: #fff; + >ul{ + margin: 0; + padding:0; + li{ + list-style: none; + 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); + } + } + } + } + div#block-leshed-selecteurdelangue{ + ul{ + margin:0; + padding:0; + li{ + list-style: none; + padding:0; + display: inline-block; + font-size: 2em; + &:first-child{ + &:after{ + content: " /"; + font-weight: 200; + } + } + &:last-child{ + padding-left: 0.3em; + + } + &.is-active{ + font-weight: 400; + } + + } + } + } + } + + } +} // end of header[role="banner"]{ diff --git a/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss b/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss new file mode 100644 index 0000000..2b5008c --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/global/_layout.scss @@ -0,0 +1,45 @@ +// _ _ +// | | | | +// | | __ _ _ _ ___ _ _| |_ +// | | / _` | | | |/ _ \| | | | __| +// | |___| (_| | |_| | (_) | |_| | |_ +// \_____/\__,_|\__, |\___/ \__,_|\__| +// __/ | +// |___/ + +@use "../abstracts/variables" as *; + + +div.layout-container{ + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; + max-width:$layout_width; + margin: 0 auto; + header[role="banner"]{ + display: block; + position: relative; + padding: 0.5em 0; + flex: 1 1 $header_height; + z-index: 100; + // position: fixed; + // top:0; + // width: 100%; + height: $header_height; + min-height: $header_height; + } + main[role="main"]{ + flex: 1 1 auto; + // padding:5em 0; + overflow-y: scroll; + } + // footer[role="contentinfo"]{ + // // flex: 0 1 content; + // z-index: 100; + // position: fixed; + // bottom: 0; + // width: 100%; + // } +} + diff --git a/web/themes/custom/leshed/assets/scss/partials/global/_variable-titles.scss b/web/themes/custom/leshed/assets/scss/partials/global/_variable-titles.scss new file mode 100644 index 0000000..f6aa00c --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/global/_variable-titles.scss @@ -0,0 +1,83 @@ +// __ __ _ _ _ _ _ _ _ +// \ \ / /_ _ _ __(_) __ _| |__ | | ___ | |_(_) |_| | ___ +// \ \ / / _` | '__| |/ _` | '_ \| |/ _ \ | __| | __| |/ _ \ +// \ V / (_| | | | | (_| | |_) | | __/ | |_| | |_| | __/ +// \_/ \__,_|_| |_|\__,_|_.__/|_|\___| \__|_|\__|_|\___| + + +@use "../abstracts/variables" as *; + + +// Splitting met .word ET .char en inline-block : +// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ; +// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la +// ligne interne, donc les soft hyphens ne peuvent jamais couper le mot. +// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe +// qu'aux césures logicielles (U+00AD) insérées par le JS. +// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting. +.splitting span.word, +.splitting span.char{ + display: inline; +} + + + + + +.variable-title{ + margin: 0; + font-weight: 200; + text-transform:lowercase; + line-height: 1; + // margin-left: -0.04em; + filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff); + span.word{ + span.char{ + letter-spacing:-0.1em; + } + } + // span.whitespace{ + // letter-spacing: 0.5em; + // } +} + +// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS. +$variable-title-selectors: ( + '#block-leshed-identitedusite>a', + 'article.node-type-projet>header>h2', + 'article.node-type-projet>.cols>.left>h2', + 'article.node-type-projet.view-mode-full h2.node-title', + 'article.node-type-evenement>header>h2', + 'article.node-type-evenement>header>.field_dates>time', + 'article.node-type-evenement.view-mode-full h2.node-title', + 'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part', +); + +// Avant le split : même métrique qu'après, pour éviter un saut de mise en page. +:where(#{$variable-title-selectors}):not(.splitting){ + margin: 0; + font-weight: 200; + text-transform: lowercase; + line-height: 1; + letter-spacing: -0.1em; +} + +// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue. +@media (scripting: enabled){ + :where(#{$variable-title-selectors}):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: $default_fwght; + margin: 0; +} + diff --git a/web/themes/custom/leshed/assets/scss/partials/mixins.scss b/web/themes/custom/leshed/assets/scss/partials/mixins.scss deleted file mode 100644 index 45df48e..0000000 --- a/web/themes/custom/leshed/assets/scss/partials/mixins.scss +++ /dev/null @@ -1,71 +0,0 @@ -@use "colors" as *; - -@mixin menu-contenus{ - ul,li{ - padding: 0; - margin:0; - list-style: none; - } - .wrapper{ - position: relative; - } - label{ - color:$bleu_site; - font-weight: 600; - display: block; - font-size: 0.756em; - padding:0 0 0.25em 0; - transition: color 0.25s ease-out; - position: absolute; - z-index: 0; - &:has(+ a:hover){ - color: $rose; - } - } - a{ - font-size: 1.13em; - transition: color 0.15s ease-out; - display: block; - position: relative; - z-index: 1; - padding-top: 1em; - &:hover{ - color: $bleu_site; - } - } - -} - -@mixin card{ - position: relative; - background-color: #fff; - padding:2em; - box-shadow: 0 0 10px rgba(0,0,0,0.25); - max-width: 50em; - box-sizing: content-box; - margin: 30vh auto 0; - &[role="home-presentation"]{ - margin-top: 10vh; - } -} - -@mixin arrow{ - display: block; - width:30px; height:30px; - border-radius: 15px; - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - text-indent: 100px; - overflow: hidden; -} - -@mixin arrow-white{ - @include arrow(); - background-image: url('/themes/custom/mathallo/assets/img/arrow-white.svg'); -} - -@mixin arrow-blue{ - @include arrow(); - background-image: url('/themes/custom/mathallo/assets/img/arrow-blue.svg'); -} diff --git a/web/themes/custom/leshed/assets/scss/partials/pages/_evenement.scss b/web/themes/custom/leshed/assets/scss/partials/pages/_evenement.scss new file mode 100644 index 0000000..ae7396c --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/pages/_evenement.scss @@ -0,0 +1,33 @@ +// _____ _ +// | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ +// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __| +// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_ +// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__| + +@use "../abstracts/variables" as *; +@use "../abstracts/node-full" as *; +@use "../abstracts/nodes-on-liste" as *; +@use "../abstracts/event-date-time" as *; + + +article.node-type-evenement.view-mode-full{ + @include nodefull(); + + .field_dates.digit-dates{ + transform-origin: 0 0; + @include event-date-time(); + } + + div.field_projet_s_lie_s{ + margin-top: 2em; + .field-label{ + margin-bottom: 1em; + } + article.node-type-projet.view-mode-tableau_liste{ + @include projetOnListe(); + } + } + +} + + diff --git a/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss b/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss new file mode 100644 index 0000000..28fe3f3 --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/pages/_home.scss @@ -0,0 +1,36 @@ +// _ _ +// | | | | ___ _ __ ___ ___ +// | |_| |/ _ \| '_ ` _ \ / _ \ +// | _ | (_) | | | | | | __/ +// |_| |_|\___/|_| |_| |_|\___| + +@use "../abstracts/variables" as *; +@use "../abstracts/nodes-on-liste" as *; + + +div.layout.layout--twocol-section--50-50{ + 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. + // flex-start = chaque colonne prend la hauteur de son contenu. + align-items: flex-start; + + column-gap: $colsgap; + div.layout__region{ + max-width: calc(50% - $colsgap / 2); + flex: 1 0 calc(50% - $colsgap / 2); + .views-row{ + // border: 1px solid red; + // box-sizing: border-box; + margin-bottom: 2em; + max-width: 100%; + article.node-type-projet{ + @include projetOnListe(); + } + article.node-type-evenement{ + @include evenementOnListe(); + } + + } + } +} diff --git a/web/themes/custom/leshed/assets/scss/partials/pages/_projet.scss b/web/themes/custom/leshed/assets/scss/partials/pages/_projet.scss new file mode 100644 index 0000000..48d383c --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/pages/_projet.scss @@ -0,0 +1,15 @@ +// ____ _ _ +// | _ \ _ __ ___ (_) ___| |_ +// | |_) | '__/ _ \| |/ _ \ __| +// | __/| | | (_) | | __/ |_ +// |_| |_| \___// |\___|\__| +// |__/ +@use "../abstracts/variables" as *; +@use "../abstracts/node-full" as *; + +article.node-type-projet.view-mode-full{ + @include nodefull(); + + +} + diff --git a/web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-evenements.scss b/web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-evenements.scss new file mode 100644 index 0000000..688c6c5 --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-evenements.scss @@ -0,0 +1,71 @@ +// __ ___ _ _ _ _____ _ +// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ ___ +// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __| +// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \ +// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/ + +@use "../abstracts/variables" as *; +@use "../abstracts/event-date-time" as *; + +div.views-archives-evenements { + + & > h3{ + border-bottom: 1px solid #999; + } + + article.node-type-evenement.view-mode-calendrier{ + // @include evenementListe(); + display: flex; + flex-direction: row; + gap: 1em; + header{ + flex:0 1 auto; + // width: 5em; + padding:0 1em 0 0; + + .field_dates{ + @include event-date-time(5em); + flex-direction: column; + align-items: center; + gap: 0.6em; + span.date-sep{ + display: block; + width: 1em; + height: 0; + overflow: visible; + transform-origin: center; + transform: rotate(90deg) translateX(0.1em); + line-height: 0; + padding: 0; + } + } + } + + section.content{ + flex:0 1 auto; + h2.node-title{ + font-size: 3em; + } + } + + section.last-cel{ + flex:0 1 auto; + .field_images{ + a{ + display: block; + width: 12em; + height: 12em; + overflow: hidden; + img{ + width: 100%; + height: 100%; + object-fit:contain; + object-position: top left; + } + } + } + } + + } +} + diff --git a/web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-projets.scss b/web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-projets.scss new file mode 100644 index 0000000..45f2109 --- /dev/null +++ b/web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-projets.scss @@ -0,0 +1,49 @@ +// __ ___ _ _ _ ____ _ _ +// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | _ \ _ __ ___ (_) ___| |_ +// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __| +// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | __/| | | (_) | | __/ |_ +// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__| +// |__/ + +@use "../abstracts/variables" as *; +@use "../abstracts/nodes-on-liste" as *; + + +div.views-archives-projets{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 2em; + gap: $colsgap; + div.views-row{ + flex: 1 0 calc(25% - $colsgap); + width: calc(25% - $colsgap); + } + + article.node-type-projet.view-mode-tableau_liste{ + + @include projetOnListe(); + >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; + li{ + list-style: none; + flex: 0 1 auto; + padding: 0.2em 0.5em; + font-size: 0.756em; + } + } + } +}