2.7 Finishing Touches

Well, we've completed all the hard styling, now it's time to add our finishing touches and work on the details that will transform what we have now into a theme that's very close to what we did in the sketch. So we'll go through each slide, and we're not gonna move to the next slide until the one that we're working on is complete. We are about set, lets begin. So slide number one, first, we need to make these headings, the heading one bit smaller. We need to style this heading three so that it matches this badge design that we have here and also the handwriting texts, we need to take care of that. So let's jump back to the code editor and we'll start with the following. h1, let's do a max-width of let's say 70%, that should do the trick, let's do a margin, 1.5rem to and bottom, zero on the sides. That's a little bit better, but now it's out of center. So to fix that, let's go to the section down here where it says a line center, all right, we have the text aligned set to center, but we're also going to target all the headings that can possibly go in there and set their margins, left and right to auto. Okay, so that will essentially notch this back into center. Let's think about this badge. This right here if we take a look in the HTML, is an h3 auto classing badge and then we have a paragraph with a class badge, handwritten. The tertiary and secondary refer to the colors. So let's take care of the badges now. I'm gonna start with the padding, let's do .75rem and 1.5rem on the side, we're gonna set display to inline-block, and also, let's add a border-radius of 3px. Now, we're gonna style the individual classes, so secondary simply do a background color, Secondary, and the color of the text is gonna be white, and then let's do the tertiary. So backgrounds, I meant color here not clip, background color, that's gonna be tertiary and here it's gonna be black 65, so let's select that. And also the handwritten, let's do a margin-top 1rem just to push it down a little bit, and as you can see from the sketch file, it's slightly rotated. In fact, it's rotated 4 degrees, minus 4 degrees. So we'll do a transform, rotate minus 4 degrees, just take a look. Alright, now it's time to get some more, let's nudge this up, so let's do a translate Y minus 20 pixels. Okay, and that will push it up just a little bit so that it overlaps with the badge on top of it. Now let's see about this h3 here, and while I'm here actually I'm also gonna do the h4, h5, and the numbered list, because they will have the same font family, width, and margin. So the font-family is going to be futura-pt, sans-serif, font-weight 300 which is in the right almost to the margin 1.5rem 0. If you remember we actually reset the margins of the headings to Zero. So, I'm just going and doing this properly. So now we should see that our badge has the correct font style. Now, let's see about this badge. I'm going to say paragraph with a class of handwritten, we'll change the font family to FF market web sans serif. And let's do a font-size of 1.563em. All right, that's a little bit better and let's get rid of this space here, so we'll say h3, let's also set a max width of 75% because we are using the h3 in some other slides as well, and the badge h3, just reset the margin-bottom. All right? Now, this gap right here is illuminated, cool. And with that our initial slide, our first slide is complete, let's move on. So slide number two, if you remember, it has this dark background on the left, and this fancy list on the right side. So let's do that, taking a look at the, HTML, we can see the classes of bg-dark, and numbered-list, and offset being used. So we'll do bg-dark, that simply has a background-color of black, and let's do a text color of white, and also let's target the h1, h2, all the headings and all paragraphs and set their color to white. And I have to do this again because I am basically over-writing some default styling from the framework. And when I'm displaying a footer on a dark background, I also want to change its color to $white-50, cool? Cool. Now, let's do the bg-light which appears in certain slides, like for example this one. This is bg-light we'll simply change the background-color to $light. And let's have a look at slide number two, that's where we left off. So we have the curriculum here. So this side is complete, and then we have the numbered list. So let's go ahead and style this next. So I'm gonna say lists here, numbered lists, and there's quite a bit of code to go through here. So, let's start by changing the font size, and we're gonna use the heading three size, for that, let's reset margin padding, and the list style. Now let's target each list item, and we'll do the following. By default, this list displays, or it used to display the numbers on each list item one, two, three, four, five and six. But on our case, we want to kinda style those different ways as you can see here. So to do that, We're gonna begin by using counter increment and we'll give it a name, let's just say list counter. And we'll set some margins, top and the bottom. 2.5 rems 0 on the sides. So this is for each list item, yes. Then we'll set a position to relative. Then we'll do the following. We'll use a before pseudo moment that we're gonna position absolutely. We're gonna set its top to 50%, so that we're aligning it. So the contents of the list item, left is gonna be zero. We're gonna do our old transformation trick. To align it in the middle properly, so -50% on the y axis, and then the content is gonna be counter(list-counter), so the one that we initialized here. So this goes through each list item. It basically increments this variable and it output set in the content of the pseudo element. So a couple of elements here, let's do font size, let's say 85%. Width, let's do 3.5 rems, same for height, 3.5 rems. The background is set to white. Let's display it to inline block, that's align with test of the center, oops. Text align, center. Let's decrease the font weight a little bit, we'll make it 500 or increase it, sorry. And let's add a line height of 3.5 rems, so vertically everything aligns properly. And finally, let's add a box shadow, 10 pixel, 10 pixel, 0, 0 for blur and spread, and let's do an RGBA of black and 05. So 5% of passage. Do a quick check. All right, so we're getting there. We just need to position these a little bit better. So I'm gonna set a margin right to the before element, 2.5 rems and then on the list item, we'll say, padding left 6.5 rems. Okay, so that will, create this layout. All I have to do now is offset these items to the left, so they overlap this seam line here. So I'm gonna go to my numbered list. We have a class of offset already applied, and I'm just gonna say margin left minus 6.75 rems, okay? So now. Everything is setting right in the middle and our list is properly styled. Let's move on to slide number three. So, right off the bat, I know this heading needs to be lighter. So, let's do that. We have on each one of the class of number. So, let's go back here to the h1 number. We'll set a font weight of 300, which is light. And we'll also increase the font size to let's say, 4.4 amps. And also the font family, should be fatura.pt instead of fatura bold, Sans-serif. All right, so that should take care of it. And there it is. Cool. Next, on this side, we have this list here. Which in our sketch file has these arrows and it's nicely pushed to the right a little bit. So let's go ahead and do that. That list is using a class of arrows. And we have two types, secondary and tertiary, depending on the color of arrows that we wanna use. So, right here we're gonna say arrows. Let's start by resetting the list style. I'll say padding 0, and let's do a margin, 0,0,0, and on the left, 1.5 rems. And on each list item, let's do a margin bottom of 1 rem. And let's do a before pseudo element for the actual arrow. So we're gonna set the display to inline block and we'll give it a height, let's say .75 rems and a width of 1.75 rems. So now, we can go in here and we can say, arrows with the additional class of secondary. And we'll target the list item before, we're simply gonna do a background url, we'll do img/arrow-right-secondary-svg. And we'll go and say, left center, no repeat and that arrow, let me just quickly show you here, I exported from. Sketch. And looks like this. Arrow right secondary, we also have the tertiary inverted and we have the tertiary which is the same, just a different color. So that's secondary, let's also do the tertiary, I just have to change small thing here and that should be it. So let's have a look. And there it is. And in fact, this list style is now visible here as well. And we can also see it here. So all in all, a pretty big success. Now let's move on to the next one. This is correct. This, is correct. This looks okay, but I think we do actually need to reduce the amount of space between, an h1 and an h3. So, going in back here to the typography, let's see, h1. And I'm also gonna target, so, h1 + h3 Which is actually not a badge. Opps, I have to do this, we're gonna say margin top 0. So we're essentially targeting the h3s that follow an h1 and do not have the class of badge. And for those who are just resetting the margin top. So now. Yeah, we have a much cleaner, or much smaller space between these two elements. So this one is okay. This one is okay, apart from the. Actual code here. The font is too small. So let's go ahead and fix that. We'll go back in our CSS right here at the bottom. So we'll target the pre, we'll remove the box shadow, that's initially applied by the framework. So box shadow none, plus change the font size to 1ren. And also let's target the code, and apply a border radius, let's say three pixels. And also a little bit of padding, let's say 1.5ram. And that will now look much, much, better. Okay, moving on to the next slide. Let's see about this image because we have a border applied to it, and we don't actually need that. Let's target img here, we set a max width of 100% and a height of auto, so we make sure it's being resized correctly. I'll set a margin of zero. And let's reset the border. So border zero, Background none and also box shadow none. All right, so that should take care of this bit, all right. And on the right side, let's see, we have that badge. The hr needs to be a little bit more transparent. So we have it right here. Yeah, it's 10 pixels in height and it uses a very light 10% opacity of white. Let's get rid of the original border. Let's choose display block. Stretch to 100% height, we'll set it to 10px. Width, we'll set it to 100%. And the background-color, we'll set it to white-10, cool. So now let's go back to this slide, okay. So now that's correct. The H5 here doesn't have the correct font size. So let's fix that. Let's go back up here. So H5, let's do font-size. And in five size and what else? Let's do a font weight of 500, so that should fix it and it does. Cool. That looks about right. Let's move on to the next slide, here we have a piece of code on the right side, and then some notes on the left side. And actually this piece of code needs to have, or this right side column needs to have the same background as this piece of code. All right, so we have a column with two classes, bg-code and column-code. And then inside we have a pre and a code tag. First of all we'll go t backgrounds to add our bg-code class. So we'll just say background color. And the only thing that I'm gonna do is go back here, sample this color, And just use it here, that's all there is to it. And the second class which is column code, let's go to column, okay. And right here we're just gonna reset the padding. So padding zero. All right, let's have a look. And there it is. A nice container for the code and then on the left we have the bullet points. Now, in this slide, let's see, the left side looks just fine. But the right side, well, we need some special styling for these two. So this is completed, and this is coming up. And as we can see from the Sketch documents. They look something like this. So we have a check mark on the completed. We have a arrow pointing right on the coming up. These are actually tied into the numbered list class. So right here we are gonna target the check, we're going to change it's color to secondary. So this refers to the actual text of the list item. Let's do a text-decoration line-through. Just to make sure that we have a strike-through style on that particular element. And then we're gonna target the sudo element, we're gonna get rid of the content. And we're gonna say background: $secondary color, and then URL is going to be img/checkmark.svg. And will display that center, center, no repeat. And we're gonna do the same since we're here for the tertiary or the, what's it called coming up, which is the tertiary color here. And here it's actually gonna say arrow right tertiary inverted. So now let's have a look. And I think I actually made a mistake here. Check before. Okay, so this is actually, should be right here. All right, so coming up and actually this should say this. Okay, and this should say color, tertiary. And also this should say coming-up. And I have to move these one level up because they apply to the list item and not the list itself. So now it should all be good, perfect. So we have the completed section, and then the next one coming. Finally, we have the outro for our course. And here the only thing that's left to style is this list. So let's take a look at the HTML. We have a ul, sorry that's the wrong one. We have a ul class unstyled. And we have an img, and a paragraph, with a class of accent. So let's go to list. Here we'll target the unstyled list. Here we're just resetting the margin, the padding and the list-stype-type. And then for each list item, we're just setting the margin-bottom of one and a half rems and display flux. So that we can align the image and the paragraph properly. So let's target the image. Let's say margin-right of about .75rem. Let's do a quick refresh. Okay, so now let's go ahead and target these elements. Paragraph class accent. We're gonna change the color to accent. So now these are displayed properly, also let's move this list a little bit further down. So we're gonna say each H3 + UL + class unstyled, let's is a margin top three rems, and there it is. Cool, now let's do a final rundown. This is the intro. This is the curriculum. This is the intro to the lesson. This is one of the slide types, another slide type, another slide type, this one with an image. This is another slide type with a list of bullet points and a piece of code. And this is the lesson. And this is the presentation. Well, we've done it. It was a pretty long video. I think we're coming on to about 20 minutes. So I do apologize. I don't like making content that is this long. But I really wanted to show you the entire process of applying these finishing touches. Going through each of the slide and just perfecting it until it's ready to go. Thank you for sticking with me for this long lesson. And thank you for watching this course. I hope, and to give you a better understanding of what it takes to build a custom theme for the reveal.js framework. This theme, along with the Sketch files, is available to download. Just check out the source files for this course. And you can go ahead and use it for your own projects, no problem whatsoever. So thank you again for watching. I'm Manny Pabula, until next time take care.