У цьому скрінкасті ми зосереджуємося на рядках під посиланнями у верхній частині нижнього колонтитула. Ми напевно спотикаємось, з’ясовуючи, які речі повинні мати відносне позиціонування, а які не, щоб ми могли отримати ці лінії розміром та положенням, яким вони повинні бути.
Ми забарвлюємо лінію градієнтом, використовуючи простий фон Compass @mixin.
Ми вирішили, що зробити рівень блоків посилань досить дивним, оскільки це робить область, на яку можна натиснути, занадто великою. Я знаю, що це дивно говорити, тому що, як правило, робити великі області, на які можна натискати, це добре, але в цьому випадку ви можете натиснути так далеко від тексту посилання, що це просто дивно.
Слід зазначити, що в кінцевому підсумку в нижньому колонтитулі псевдоелементи, що створювали рядки, змінювались на прольоти. Це тому, що я хотів додати до них трохи анімації при наведенні, і ви не можете використовувати переходи чи анімації на псевдоелементах у більшості браузерів на даний момент.
"Лазерна" анімація закінчилася наступним чином (деякі вклади пропущено):
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); ) ) )