change class subtitles

This commit is contained in:
Julie Blanc 2026-03-16 15:27:31 +01:00
parent 7851d1a4ec
commit 1783105175
2 changed files with 14 additions and 14 deletions

View file

@ -16,31 +16,31 @@ h3, h4{
}
.h3-before,
.h3-after{
.subtitle-before,
.subtitle-after{
letter-spacing:var(--sign-spacing);
font-size: var(--sign-size);
color: var(--sign-color);
line-height: var(--sign-baseline);
}
.h3-line {
.subtitle-line {
display: flex;
justify-content: flex-end;
}
.h3-before{
.subtitle-before{
padding-right: 0.75ch;
}
.h3-after{
.subtitle-after{
padding-left: 0.75ch;
position: relative;
left: 6px;
overflow-wrap: anywhere;
}
.h3-text{
.subtitle-text{
/* background-color: yellow; */
flex-grow: 2;
}

View file

@ -23,20 +23,20 @@ export default class itemsDecor extends Handler {
createLine(symbol, nodes) {
const line = document.createElement("span");
line.className = "h3-line";
line.className = "subtitle-line";
const spanBefore = document.createElement("span");
spanBefore.className = "h3-before";
spanBefore.className = "subtitle-before";
spanBefore.textContent = symbol.repeat(3);
line.appendChild(spanBefore);
const spanText = document.createElement("span");
spanText.className = "h3-text";
spanText.className = "subtitle-text";
nodes.forEach(node => spanText.appendChild(node));
line.appendChild(spanText);
const spanAfter = document.createElement("span");
spanAfter.className = "h3-after";
spanAfter.className = "subtitle-after";
spanAfter.textContent = "";
line.appendChild(spanAfter);
@ -44,7 +44,7 @@ export default class itemsDecor extends Handler {
}
processTitle(subtitle, symbol, withDecor, isLeft) {
if (subtitle.querySelector(".h3-line")) return;
if (subtitle.querySelector(".subtitle-line")) return;
const children = Array.from(subtitle.childNodes);
@ -61,16 +61,16 @@ export default class itemsDecor extends Handler {
});
segments.push(current);
// Reconstruire le titre avec des .h3-line
// Reconstruire le titre avec des .subtitle-line
subtitle.innerHTML = "";
segments.filter(seg => seg.length > 0).forEach(nodes => {
const line = this.createLine(symbol, nodes);
subtitle.appendChild(line);
const spanAfter = line.querySelector(".h3-after");
const spanAfter = line.querySelector(".subtitle-after");
const baseHeight = line.offsetHeight;
let count = 0;
// h3-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
// subtitle-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
while (count < 300) {
count++;
spanAfter.textContent = symbol.repeat(count);