§Signature
Conçu avec démesure.
Ces trois mots apparaissent en bas de chaque site que nous signons. Survolez-les : ils débordent, évidemment. Le lien ramène les curieux ici, avec un petit mot d’accueil.
Le code à coller dans le pied de page
<a class="dm-sign" href="https://demesure.fr/?ref=signature" target="_blank" rel="noopener"><span class="dm-sign__dot"></span>Conçu avec <span class="dm-sign__w">démesure</span></a>
<style>
.dm-sign{display:inline-flex;align-items:center;gap:.6em;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none;opacity:.72;transition:opacity .3s}
.dm-sign:hover{opacity:1}
.dm-sign__dot{width:6px;height:6px;border-radius:50%;background:#ff4a1c;flex:none}
.dm-sign__w{transition:letter-spacing .6s cubic-bezier(.16,1,.3,1)}
.dm-sign:hover .dm-sign__w{letter-spacing:.32em}
</style>
Hérite de la couleur du texte environnant : fonctionne sur fond clair comme sur fond sombre.