In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn’t so we can get these lines the size and position they need to be.
We colorize the line with a gradient using the simple background Compass @mixin.
We decide that making the links block level is rather weird, because it makes the clickable area too big. I know that’s a weird thing to say because usually making clickable areas big is good, but in this case you can click so far away from the link text it’s just weird.
It should be noted that ultimately in the footer the pseudo elements that created the lines where changed to spans. This is because I wanted to add a little animation to them on hover and you can’t use transitions or animations on pseudo elements in most browsers at the moment.
The “laser” animation ended up as follows (some nesting omitted):
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);
}
}
}
Chris, I think that you can remove the whole snippet for the ‘laser’ thingy, being that you removed it from the site and people seeing this in the future won’t understand what the end result is supposed to look like…
The laser isn’t in this video anyway right? I don’t think that made the screencast. But also removing it from the site wasn’t intentional, gotta fix that.
I noticed on the live site, that you went back to using an unordered list for the footer links. Could you explain why you changed it back?
Turns out I needed an extra wrapping element, so I figured it might as well be a list item. I needed a box around the entire “half” width box that I could relatively position so I could have a span that is absolutely positioned the full width. I could have make the anchor links themselves display block and use that, but then the clickable area for the link was just too darn big I thought.