change class subtitles
This commit is contained in:
parent
7851d1a4ec
commit
1783105175
2 changed files with 14 additions and 14 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue