diff --git a/web/modules/custom/leshed_svg_export/README.md b/web/modules/custom/leshed_svg_export/README.md index 5c666b2..87323e6 100644 --- a/web/modules/custom/leshed_svg_export/README.md +++ b/web/modules/custom/leshed_svg_export/README.md @@ -128,7 +128,12 @@ Comportement Drupal (`Drupal.behaviors.leshedSvgExport`) : avant de demander le tracé du bon caractère. - Assemble le SVG (fond transparent, remplissage noir uniquement — décision volontaire, pas configurable) et déclenche le téléchargement (`Blob` + - ``). + ``). Une marge égale à 30 % de la plus grande taille de police + du titre (`ITALIC_OVERFLOW_MARGIN_RATIO`) est ajoutée tout autour du + canevas : les lettres italiques débordent de leur boîte d'avance nominale + (surtout en haut des hampes), et `getBoundingClientRect()` du titre ne + tient pas compte de ce débordement — sans cette marge, un cadrage au plus + juste coupe parfois ces lettres. - Pour le PNG : rasterise le SVG assemblé via un `` à ×4 la taille affichée (`PNG_SCALE`), puis `canvas.toBlob('image/png')`. diff --git a/web/modules/custom/leshed_svg_export/js/svg-export.js b/web/modules/custom/leshed_svg_export/js/svg-export.js index d928a05..6c73586 100644 --- a/web/modules/custom/leshed_svg_export/js/svg-export.js +++ b/web/modules/custom/leshed_svg_export/js/svg-export.js @@ -72,12 +72,21 @@ * positioned glyph path. Nothing here recomputes layout — it only reads * what the browser already laid out at the moment of the click. */ + // Fraction of the largest font size on the title, added as padding around + // the whole canvas. Italic glyphs slant past their own nominal advance + // box (most visibly at the top of ascenders), and the title's own + // getBoundingClientRect() doesn't account for that overflow — a tightly + // fitted viewBox clips them. This margin is a generous, font-agnostic + // safety net rather than measuring each glyph's exact ink bounds. + const ITALIC_OVERFLOW_MARGIN_RATIO = 0.3; + async function buildSvg(titleEl, glyphFor, hb) { const containerRect = titleEl.getBoundingClientRect(); const chars = Array.from(titleEl.querySelectorAll('.char')); const seenWords = new Set(); const glyphNodes = []; + let maxFontSizePx = 0; for (const charEl of chars) { const rawText = charEl.textContent; if (!rawText || !rawText.trim()) continue; @@ -86,6 +95,7 @@ const computed = getComputedStyle(charEl); const fontSizePx = parseFloat(computed.fontSize); if (!fontSizePx) continue; + maxFontSizePx = Math.max(maxFontSizePx, fontSizePx); const text = applyTextTransform(rawText, computed.textTransform, charEl, seenWords); @@ -101,11 +111,12 @@ ); } - const width = containerRect.width; - const height = containerRect.height; + const margin = maxFontSizePx * ITALIC_OVERFLOW_MARGIN_RATIO; + const width = containerRect.width + margin * 2; + const height = containerRect.height + margin * 2; const svg = [ ``, - '', + ``, ...glyphNodes, '', '', diff --git a/web/themes/custom/leshed/assets/dist/main.css b/web/themes/custom/leshed/assets/dist/main.css index 0941ae3..abced75 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("woff2");src:url(./fonts/Epilogue-Italic-VariableFont_wght.ttf) format("woff2") tech(variations);font-weight:100 900;font-style:italic}@font-face{font-family:Epilogue;src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("woff2");src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("woff2") tech(variations);font-weight:100 900;font-style:normal}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}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 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-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 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}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>h2.node-title{position:relative;font-size:12em;margin:0;z-index:100;width:205%;pointer-events:none;transform-origin:0 0}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{font-weight:400}article.node-type-projet.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p .field-label{font-weight:200}article.node-type-projet.view-mode-full div.cols div.col.left .field_invite_accompagne_curate_p>div{display:inline-block}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: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 img{width:100%;max-width:100%;height:auto}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item blockquote.image-field-caption{margin:0;position:absolute;bottom:0;left:0;width:100%;background-color:#000000a6;color:#fff}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item blockquote.image-field-caption 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 blockquote.image-field-caption{opacity:0;transition:opacity .3s ease-in-out}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item:hover{z-index:200}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item:hover blockquote.image-field-caption{opacity:1}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 div.views-row article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:5em}div.views-archives-projets div.views-row 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 div.views-row 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 div.views-row 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 div.views-row article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images{position:relative;z-index:5}div.views-archives-projets div.views-row article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a{display:block}div.views-archives-projets div.views-row article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a img{width:100%;height:auto}div.views-archives-projets div.views-row article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:3em}.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("woff2");src:url(./fonts/Epilogue-Italic-VariableFont_wght.ttf) format("woff2") tech(variations);font-weight:100 900;font-style:italic}@font-face{font-family:Epilogue;src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("woff2");src:url(./fonts/Epilogue-VariableFont_wght.ttf) format("woff2") tech(variations);font-weight:100 900;font-style:normal}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}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 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-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 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}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>h2.node-title{position:relative;font-size:12em;margin:0;z-index:100;width:205%;pointer-events:none}article.node-type-projet.view-mode-full div.cols div.col.left>h2.node-title.leshed-svg-export-target{pointer-events:painted}article.node-type-projet.view-mode-full div.cols div.col.left>h2.node-title{transform-origin:0 0}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: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 img{width:100%;max-width:100%;height:auto}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item blockquote.image-field-caption{margin:0;position:absolute;bottom:0;left:0;width:100%;background-color:#000000a6;color:#fff}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item blockquote.image-field-caption 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 blockquote.image-field-caption{opacity:0;transition:opacity .3s ease-in-out}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item:hover{z-index:200}article.node-type-projet.view-mode-full div.cols div.col.right .field_images .field-item:hover blockquote.image-field-caption{opacity:1}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 div.views-row article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:5em}div.views-archives-projets div.views-row 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 div.views-row 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 div.views-row 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 div.views-row article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images{position:relative;z-index:5}div.views-archives-projets div.views-row article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a{display:block}div.views-archives-projets div.views-row article.node-type-projet.view-mode-tableau_liste.has-image>header div.field_images a img{width:100%;height:auto}div.views-archives-projets div.views-row article.node-type-projet.view-mode-tableau_liste>header>h2{font-size:3em}.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 9561b89..868b4c1 100644 --- a/web/themes/custom/leshed/assets/scss/main.scss +++ b/web/themes/custom/leshed/assets/scss/main.scss @@ -342,16 +342,19 @@ article.node-type-projet.view-mode-full{ font-size: 1.8em; font-weight: 300; } - .field_invite_accompagne_curate_p{ + .field_invite_accompagne_curate_p, + .field_partenaire_s{ + margin-top: 1em; font-weight: 400; .field-label{ font-weight: $default_fwght; } - >div{ - display: inline-block; - } + // >div{ + // display: inline-block; + // } } .field_dates{ + margin-top: 1em; time{ font-weight: 400; }