Ebben a képernyőn a lábléc felső részében lévő linkek alatti vonalakra összpontosítunk. Kicsit botladozunk azon, hogy kitaláljuk, melyik dolgoknak legyen relatív elhelyezkedésük és mi ne, hogy megkapjuk ezeket a vonalakat a szükséges méretben és helyzetben.
A vonalat gradienssel színezzük az egyszerű Compass @mixin háttér használatával.
Úgy döntünk, hogy a linkek blokk szintjének megadása meglehetősen furcsa, mert túl nagyra teszi a kattintható területet. Tudom, hogy furcsa dolog ezt mondani, mert általában jó a kattintható területek nagysága, de ebben az esetben olyan messzire kattinthat a link szövegétől, hogy ez csak furcsa.
Meg kell jegyezni, hogy végső soron a láblécben azok az álelemek, amelyek létrehozták a vonalakat, átíveltek. Ennek oka az volt, hogy egy kis animációt szerettem volna hozzájuk tenni az egérmutatón, és jelenleg a legtöbb böngészőben nem használhat átmeneteket vagy animációkat álelemeken.
A „lézeres” animáció a következőképpen alakult (néhány fészkelés elmaradt):
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); ) ) )