`, _che io tanto amo_, diventerebbero difficili da aprire, perché gran parte della loro hitbox sarebbe coperta da quella di un link.
Dovevo inventarmi qualcos'altro.
A livello di **HTML**, allora, staticoso genera per ogni titolo la seguente struttura: elemento heading, che contiene prima un elemento span racchiudente l'ancora, a sua volta contenente il semplice testo `»`, e poi un altro span (con id univoco) che ha il titolo in sé.
Facendo un esempio pratico, questo è cosa esce fuori:
<h1 class="SectionHeading">
<span class="SectionLink">
<a href="#-Titolo-di-esempio">
<span>»</span>
</a>
</span>
<span class="SectionTitle" id="-Titolo-di-esempio">
Titolo di esempio
</span>
</h1>
Senza CSS, i titoli sulla pagina renderizzata si vedono come al solito, eccetto per il fatto che hanno un carattere `»` cliccabile alla loro sinistra. Andrebbe bene già così, ma ovviamente io avevo la **personalizzazione** in mente da subito.
Sul tema principale del **sitoctt**, infatti, ho personalizzato la cosa in modo da avere:
- L'emoji della catena (`🔗`) come carattere per il link;
- Il posizionamento un po' a sinistra del tastino, per far rimanere i titoli in linea con il testo normale;
- Opacità del carattere molto ridotta, e un po' meno ridotta quando il mouse/dito ci passa sopra;
- Evidenziazione e sottolineatura di un heading attivato.
In codice **CSS**, la mia visione si è tradotta in queste righe:
```{ .css .CodeScroll }
.SectionTitle:Target {
Color: #EEDDFF !Important;
Background: #700070 !Important;
Text-Decoration: Underline;
}
.SectionLink {
Position: Absolute;
Left: -1.5em;
Opacity: 0.08;
}
.SectionLink:Hover {
Opacity: 0.8;
}
.SectionLink > A::Before {
Content: '🔗';
}
.SectionLink > A > Span {
Font-Size: 0;
}
```
In tutta onestà, lo ripeto: forse per il sitoctt questa cosa non serviva; ma, per la [**documentazione di staticoso**](https://gitlab.com/octtspacc/staticoso-docs){[:MdTgtBlank:]}, credo **sarà utilissima**.