4.6 Styling the Article Page Sidebars
In this lesson we’ll style the two article page sidebars. Let’s begin.
1.Introduction2 lessons, 14:26
2.Designing the Template9 lessons, 1:36:08
3.Writing the Markup6 lessons, 1:06:01
4.Writing the CSS9 lessons, 1:42:34
5.Conclusion1 lesson, 02:03
4.6 Styling the Article Page Sidebars
In the previous lesson we finished styling the entire home page. And we also made necessary adjustments on smaller and medium screens. Now, let's move on to one of the article pages. In our case, the introduction. Now, we can already see that a lot of the styles are there. The header, because it's a common component is completely styled. The footer is completely styled. A lot of the typography is already done. So let's start with this info bar. The info bar uses a class of ap-well-light and ap-addittional-nav. Let's go to containers. Let's target that well, to which I'm simply gonna set a background color of ap-black-05. And then we're going to navigation where I'm gonna target the ap-additional-nav and I'm simply gonna add a padding of 1rem and 0. And simply set a border-bottom, 4 pixel solid, ap-black-05. Let's take a look. Okay. And also the paragraph here should have margin bottom 0. So we'll go to our typography. Right here and the paragraph and I'm gonna say ap-additional-nav, paragraph set the margin to 0. Okay. Great. Now, moving on. Let's start with this drop-down menu on the left. Now, you can see that when we're opening it, it's with changes a little bit. And we don't want that. We want it to have a fixed width. And also we want to get rid of these arrows because we will be adding our own. So, that particular navigation is on the left. We have a class of ap-sidebar-left. Let's actually start from there. I'm gonna open sidebars.css. So sidebar-left. And also, sidebar-right. They both share the same padding. So padding is gonna be four rems and 2.5 rems on the top and bottom. And then ap-sidebar-left will have a width of 20 rems. And ap-sidebar-right will have a width of 16 rems. Okay. Now, one thing that I don't like is the fact that, I believe we still have shrink right here, so let's delete that. We don't need this anymore. And let's also open up page.html and delete shrink from here. If you remember, that was placed there only so we can see the content, but now since we have fixed widths for these sidebars, we no longer need to do that. Let's take care of this accordion menu. First, we'll start by rewriting some settings. We're getting rid of the arrows. We're setting a padding of 1rem top, 1.25 rems on the sides. And also, we're setting the submenu-padding to these values. And that gives us this result. Next, I want to add a 1rem marginal left to this submenu. accordion-menu .submenu and set margin-left to 1rem. Okay, perfect. Now, all I have to do is style these links. So for that, we're gonna go back to our typography under links right here. I'm gonna target accordion-menu .is- accordion-submenu-parent and I am gonna target the before pseudo-element. I am gonna set it's content to '\f123' ;, left: 0;. So basically aligning or replacing those arrows to the left of the text. And then, because they are icons, I'm gonna extend these classes. So I want them to use ionicons, center-vertically, and be super small. Let's take a look. Okay. Now, we need to change this icon whenever this submenu is opened. And if we take a quick look, we can see that when we open one of these menus we have an attribute called aria-expanded that's set to true. Yeah. So now it's false. And now it's true. So we can specifically target those elements. Like this. accordion-menu .is-accordion-submenu-parent[aria-expande- d='true']. And then again, we'll target the anchor tag. The anchor tag is before element. I'm simply gonna change the content to '\f126'. Okay? Let's give this a go. And now, that icon changes. Perfect. Next, let's target these submenu items because according to the design we need to make their font weight normal. So I'm gonna target accordion-menu .submenu. It said font-weight: normal which is equal to 400 and we'll give them a lighter color. ap-black-65. And what else? Maybe on hover. We'll set their color to ap-secondary. And that should do it. So this sidebar is now complete. Let's move on to this other sidebar actually and we'll leave the content to the very end. This sidebar has some sidebar widgets. So, let'sopen sidebara.scss and I'm gonna target ap-sidebar-widget. I'm gonna set a margin-bottom of 4rem. And then, I don't really want this video widget on screens that are not tall enough. All right? So as you can see right now they are fixed. They stick to the top of the page. But when I get to the bottom here, yeah, this kind of overlaps. It's not good. So, I only want to display this widget when my view port is at least 900 pixels. I can do that very easily with a vertical media query. Right here, I'm gonna say this sidebar widget with the ID of ap-widget-small-video. By default I'm gonna set its display to none. But media when the viewport's minimum height is 900 pixels then I'm gonna display it as a block. So now, as you can see it disappeared for now. But if, for example, I have a bigger height. Let's see if I can change the height. Yeah. My height is now bigger than 900 pixels. That widget is available. If it's smaller Yeah, it disappears completely. Now, for this particular navigation, let's open up our navigation widget. And let's see, we have ap-vertical-menu and ap-magellan-nav. This is the one that we need to target. So I'm gonna go back into my typography here and I'm gonna say ap-magellan-nav & tag. And I'm gonna do the following. The color I'm gonna set it to ap-black-85. I'm gonna set the font-weight to normal. And then, when I have an .is-active menu item and also on hover, I'm gonna set its color to ap-secondary. And then when it's active, I'm gonna use the before pseudo element to add that arrow that's just here right here. So, the content, I'm gonna set it to '\f3d6'. I'm gonna set the font-size to 1rem. Although this is not actually required because I'm simply going to extend ap-ionicons. I'm gonna set display to inline-block. I'm gonna set vertical-align to middle. And I'm gonna set a margin-right of about 0.5 rems. Okay. Now, we need a little bit more space between these items. So I'm gonna target ap-vertical-menu & tag. Gonna set the padding to top bottom 0.5 rems, 0 on the sides. Gonna set display to block and I'm gonna make the text smaller. So I'm gonna set extend .ap-small-text. Okay, perfect. So now, you can see how the Magellan navigation works. Finally, let's style the article page content. And we'll begin in the next lesson with some general typography and layout styles. See you there.