Mobile Tour Styles

[00:00:00]
>> All right, and we're on to the tour layer here, @layer tour. So here, for our tour, we know that the tour dates here are what? Tell me a little bit about their styling.
>> Different colors, different sizes.
>> Different colors, different sizes, and?
>> Centred.
>> Centered, okay, so let's aim to do that My CodePen, okay, so here in the tour then, we refer back to our HTML.

[00:00:40]
We have our header, we have our banner, and then we have main. Inside of main, we have an h1 for our tour, and then we have a series of paragraphs. Okay, so basically, everything on this page is really centered, right, at least at mobile dimensions. So one of the things that we could do is we could go back to base, go back to body.

[00:01:01]
My body is around line 33, and to this, we could simply add a text-align, center. And because text-align is inherited, everything inside of this page will be centered, okay? So there it is, we've already centered everything with that one item, And that was in base. Which means that inside of header with the header image, you could technically just get rid of that text-align center if you want, it's already going to be centered.

[00:01:42]
Okay, the next thing, the text for the h1 is too big. That's the way it's supposed to be, that`s the way we`ve programmed the webpage, but the designer wanted this to be the size of an h3. So what could we do? Anybody have any suggestions, what could we do?

[00:02:02]
>> Change the HTML.
>> We could change the HTML, yeah. That's what a lot of people would do, we'd just change this h1 to an h3, phew, done, right? What does your accessibility person do? They have a minor fit, okay, you cannot do that. So you gotta stick with the h1.

[00:02:23]
What's next, what could we do instead?
>> Change the h1 variable.
>> Change the h1 variable, that's a great idea. So we could say our variable is actually going to be as big as the h3, right? We also have, remember we have all these individual declarations here, h1, h2.

[00:02:43]
Those are just for those HTML elements. What if we did this, hi, .h1? What does that mean?
>> Class of h1.
>> Right, we now have the h1 element itself and anything with a class of h1. So now we can take that size and apply it anywhere we want, right?

[00:03:03]
So let's do that real quick. Again, this is something you'll see in Bootstrap, they do this. We can do h2, h2, h3, .h3, h4, .h4, very, very easy to do. H6, .h6. And with that one change, now we have all of these classes available to us. What we can do to our h1 here is add to this a class of h3.

[00:03:43]
Now, your designer is happy because the tour is the right size, and your accessibility person is happy because it's still in inch one. We have this very simple markup here, right, for our tour dates. We've got a paragraph, right, with these line breaks, but we have three different colors for these tour dates and we have some different sizes as well.

[00:04:04]
So we have a color for the date, we have a color for the club name, and we have a color for the the location, Oakheart California. All right, anybody have any suggestions how we can get three colors in on this page?
>> Could you do a span and then add different classes?

[00:04:27]
>> You could do a span and add different classes. What do people think of that? Seems like a good approach? Yeah, because span is meaningless. The whole point of span is to hold a class name, doesn't do anything else. So let's do it, span class="date", /span. And then we're gonna put a span to the class of club, around our club name.

[00:05:10]
And then the name of the place in this case, Oakheart California, Lawndale California, I am going to leave those the way they are. In our comp, those are white, the text is white already. So basically what we're gonna do, is we're gonna let that white color control the color of the names of the locations, and we'll have overrides for the date and the club name, makes sense?

[00:05:39]
Okay, cool, so I've only done the first one, obviously, you'd have to continue to do that for all of the other locations, but it's the same thing over and over again. So for our date, scroll back here. Go back to our tour here. We have a date, and for our date, in the comp, that is the tan color, so we can say color is var(--tan).

[00:06:17]
And sure enough, that date has turned a tan color, okay? Then we have our club, color: var(--lime). And the font size is slightly larger, so we can add to this a font size of var(--h5). So there we go. So it works on the very first one where we've applied this, where we've applied that HTML.

[00:06:55]
The other ones, the formatting doesn't take place. That's because we haven't put in the HTML that's required in order for it to display, make sense?