Dans ce screencast, nous nous concentrons sur les lignes sous les liens dans la partie supérieure du pied de page. Nous avons un peu de mal à déterminer quelles choses devraient avoir un positionnement relatif et ce qui ne devrait pas l'être afin que nous puissions obtenir ces lignes de la taille et de la position qu'elles doivent être.
Nous colorisons la ligne avec un dégradé en utilisant le simple fond Compass @mixin.
Nous décidons que rendre le niveau du bloc de liens est plutôt étrange, car cela rend la zone cliquable trop grande. Je sais que c'est une chose étrange à dire, car il est généralement bon de rendre les zones cliquables grandes, mais dans ce cas, vous pouvez cliquer si loin du texte du lien, c'est juste bizarre.
Il convient de noter qu'en fin de compte, dans le pied de page, les pseudo éléments qui ont créé les lignes ont été changés en travées. C'est parce que je voulais leur ajouter une petite animation en survol et que vous ne pouvez pas utiliser de transitions ou d'animations sur des pseudo éléments dans la plupart des navigateurs pour le moment.
L'animation "laser" s'est terminée comme suit (certaines imbrications ont été omises):
a ( color: white; /* etc */ > span ( position: absolute; pointer-events: none; bottom: 0; width: 100%; height: 1px; margin-bottom: 3px; left: 0; @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0))); background-position: 100% 0; @include background-size(200% 0); @include transition(background 0s linear); ) &:hover, &:focus ( color: $orange; > span ( background-position: -100% 0; @include transition(background 0.4s); ) ) )