En este screencast nos enfocamos en las líneas debajo de los enlaces en la parte superior del pie de página. Nos tropezamos un poco al descubrir qué cosas deberían tener una posición relativa y cuáles no, para que podamos obtener estas líneas del tamaño y la posición que necesitan.
Coloreamos la línea con un degradado usando el fondo simple Compass @mixin.
Decidimos que hacer el nivel de bloqueo de enlaces es bastante extraño, porque hace que el área en la que se puede hacer clic sea demasiado grande. Sé que es algo extraño decirlo porque generalmente agrandar las áreas en las que se puede hacer clic es bueno, pero en este caso, puede hacer clic tan lejos del texto del enlace que es simplemente extraño.
Cabe señalar que, en última instancia, en el pie de página, los pseudo elementos que crearon las líneas se cambiaron a tramos. Esto se debe a que quería agregarles una pequeña animación al pasar el mouse y no puedes usar transiciones o animaciones en pseudo elementos en la mayoría de los navegadores en este momento.
La animación "láser" terminó de la siguiente manera (se omitieron algunos anidamientos):
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); ) ) )