2.5 Set a Custom Scaling and Position the Footer

Let's move on with our custom theme and set up proper scaling. By default, these slides come with a predefined width, height, and margin, but we want to reset that so we can start with a clean slate. So let's go ahead and add our own. To do that, you need to go back to the index HTML. Scroll all the way to the bottom where you're initializing the plugin, and on the options, we can set the display mode. By default it's set to block but we're gonna set it to flex and this is gonna make a lot of changes. So, the content will now be displayed in a flexbox container. All right, so you can see everything is now positioned inline. But it's the first step to getting to the layouts that we want, and then let's create custom scaling. To do that, we'll begin with the width, oops. I meant to do that, width 100%, height 100%, margin 0, and we'll also set the property of minScale and maxScale to 1. And that's all we need to do here. So right now, you'll see that our slides have just gotten bigger. Or, actually, the content has just gotten bigger because we don't have any more margins, we don't have a predefined width set. Everything is now set at 100% in both directions, so that gives us the best foundation for us to build on. All right, now in this lesson the only thing left to do is to take care of this footer that you see here. We're gonna position that properly, and because this is an element that appears in all slides, it just makes sense to tackle this first. So, for the footer, we're gonna go back up here to the code, and we can see that the footer is actually in a footer element, and it has a paragraph with an tag. And it's the same on all of them, on all slides. It's exactly the same code. So let's go to our custom CSS and we'll do this. We're gonna create some custom styles, and I'm going to start with the body. I'm going to set a font weight of 300, that's the light font weight, and we're using that in our sketch document. Let me show you, all right? So the body text is using the light font weight, which is 300. So we're just setting that, and be done with it. Next, we're going to use a reveal class, and we're going to put all of our custom CSS inside this reveal container. And we're doing that to make sure that we're properly overriding the framework styles. So then we'll target the footer. Let's actually do a comment here so we know what this section is all about. So footer, we're gonna position it absolutely, and we're gonna set the bottom to 3rems, the left to 5rems. And also we'll target the paragraph and we'll set the color to black-50, just like that. Now it's still positioned here, because the actual sections are not yet 100% in height and are still using that flex-direction of a row. So let's go ahead and fix that real quick. We'll say section, let's change the flex-direction to column. So we want content to flow from top to bottom. And I'm also going to justify the content to center, just so we can vertically center the content. And let's set a height to 100%, and let's do text-align left, so we don't forget. So now, let's do a quick refresh, and the content is starting to fall in place really nicely. Now, our footer is still not positioned correctly. So why is that? Well, it's because we actually use the class of footer here, instead of an actual footer element. My bad, sorry about that. Okay, so now the footer shows up right here at the bottom. But I'm actually not sure that that is the correct placement for it. So bottom, it should be 3rems, so three rims from the bottom. The left side I've got right. We might have some box sizing issues. I don't know what kind of a reset file this is using, so let's do this. So under section, I'm gonna do this, slides. And I'm gonna target the direct sections, and I'm gonna set box-sizing, border-box. I'll also do a padding since we're here, 5rems left and right. And then we're gonna target all the elements, along with their pseudo-elements, and I'm just gonna say box-sizing, border-box. Okay, so that does the trick. So what happened was I didn't have these set, so any kind of padding margin was affecting the width and height of elements. But by setting these, I make sure that when I say well 100% height or 100% width, well it does mean 100% without taking into consideration margins or paddings or things like that. Okay, so my footer is correctly positioned right here at the bottom, and it's the same in all of my slides. Now if we take a look, actually, at the very first slide, you'll see that actually the footer should be positioned in the center. This is the only slide where I have the footer positioned in the center, and back in my HTML, we actually have an align-center class applied to this section. So, let's do that. Let's go to the section here and target that class. And let's just say text-align center to get it out of the way and then we'll target the footer. We'll say left 50%, and now to nudge it back in place, we'll do an old trick, translate3d minus 50% on x, 0 on the other two axes. So now, right, my content is positioned in the center and so is my footer. But on the other slides, it sits nicely at the bottom and to the left, just like this. Cool, now, we're starting to get some results, but things are still not positioned properly. The layouts are not being created. We applied display flex to the slides, but that's not enough. We need a way to properly style these layouts so we have the columns that you saw and a design. So let's go ahead and do that in the next lesson.