Styling the Footer

[00:00:00]
>> Kevin Powell: All right. Now we can move on down to our footer, probably the simplest part of this entire page. So if we come take a look again at the Figma design has a little bit of a darker background color to it. Text is centered, so you could definitely use some utility classes here.

[00:00:14]
It's finding that balance. Do you wanna throw a few utilities on it? Just remember that you need those every time you have a footer. Or in this case, when I created it, I already threw a site footer class on there, so I'm just gonna use a site footer class.

[00:00:27]
There's a few things that we'd have to select as children in here as well. Like this paragraph needs to be different from the link that's here. So, you also have to decide how you're gonna do that. We need to control the spacing between things, so there's a few things on here we're going to have to do.

[00:00:42]
I'm gonna give this a class and it's kind of weird, but I will call it a site footer title. I'm keeping it as a paragraph just cuz I don't feel like a heading semantically makes sense to have there. You could probably make an argument that it should be a heading.

[00:00:59]
But I'm gonna do it just as a paragraph like that and keeping that same title system we've been using since the very beginning. So whatever element you use, it doesn't matter. And then we can just come down, this one you could argue whether, a little bit actually we have our site header and all of this.

[00:01:17]
So again, I think it makes sense. You could say, should this go in layout, just cuz it's kind of generic in a way, but it's specific enough on this one thing that only lives on one part of the page. And just for organizational purposes, cuz I have my header stuff here, I do like putting my footer stuff with it as well.

[00:01:32]
I put it after my navigation, just cuz my navigation lives inside my header. It's just the way I organize things. If you have a different way of doing that, that's fine, but I sorta I like keeping the footer header stuff altogether, because it makes it easier for me to find.

[00:01:47]
Some people prefer the footer at the bottom, cuz the footer is the last thing on every page, so it's up to you. Site footer, text align center. It looks like it needs a bit of padding. I'm gonna just do some padding on there and not use the section padding, cuz it looks kind of small.

[00:02:07]
32 pixels, which would be 2rem or 32 pixels. And again, that's only padding on the top and the bottom. So we can do padding block or you can use the shorthand. Padding block works for me there. And I'm gonna do a display of grid with a gap of 2rem.

[00:02:27]
And whenever I see a space like this, this could fall apart if the footer got updated and I'd have to refactor this. For me, this is the easiest way just to put a big space between them and the spacing's the same through here, here, and here. So that, to me, just makes a lot of sense.

[00:02:42]
Flexbox do the same thing. It's one less line of code with grid, so I like using grid for it. The last thing, also with my padding, I'll put a background here, and it's a bit darker, but not too dark, so I'm pretty sure it's just the background dark.

[00:02:59]
And then we can go take a look at what that's given us, it looks pretty good. Site__footer_title, font-size, let's just go look here. That's only 20, so I think that's the font-size medium.
>> Kevin Powell: And the font-family is the heading.
>> Kevin Powell: And then the font-weight is bold 700.
>> Kevin Powell: There we go, I think that looks pretty good.

[00:03:46]
Should it be medium? Maybe the lg works a bit better there. And we have a footer that's come in. And the link at the bottom looks okay, but the color of it should actually be a bit lighter. So I'm just gonna nest this within my site footer, cuz I only wanna get just a descendant selector anyway.

[00:04:01]
And it's easier than giving it a class, a color is, this is one of the problems with higher specificity on anything, even with layers. High contrast, if I do this, we've lost our hover state that was on there because we're overwriting those styles. So I just need to come in and bring in the hover and focus again.

[00:04:27]
>> Kevin Powell: And in this case, we'll just go back to the link color that we had before. This shouldn't be high contrast. This should be the text-main, there we go. And then this one could go back to our text-brand-light.
>> Kevin Powell: And we get the light color coming on, but it's faded out compared to the links we had at the top of the page.

[00:04:55]
And with that, I think that's all we need for our footer, and the page is coming together really, really nicely with matching our layout. We just have this I'm gonna fix those utility classes in a second on there, and then we can look at getting our site online.

[00:05:10]
All right, so for the card titles on here, I just mentioned they were way too big. I just chose the wrong font size when I was setting up the card title here. With the font-size-heading-regular should have been the heading-small. And if we set that to the heading-small right there, now it looks much better and much closer to what we actually want it to be.

[00:05:31]
So a quick fix there, and now we can look at how we can get our site online.