4.8 Styling the Remaining Article Page Content

In the previous lesson, we wrote some general styles for the article page content. Now, let's go ahead and finish styling the remaining pieces. Okay, let's see what's next. Next is this table with the file structure. Now, this, it's not actually a table, it's a list. This list has a class of ap-file-tree and it sits in this ap-well-light-border container. So let's do that. We'll go to, first, the containers, and we'll target ap-well-light-border. Here, we're just gonna extend ap-well-light, we're getting the background color from there. Let's make it round, include ap-round. And then simply gonna add padding of 2rem, a border 1px solid $ap-black-05. And then we're gonna target the first level uls, and ols, and we're gonna set the margin-bottom to 0, okay? Now, let's see about the actual list. We're gonna say ap-file-tree. First thing we'll do is set a margin-bottom to 0, then we're gonna make the text small, so extend ap-small-text. And then each list item will have a position relative and a padding 0. And then we target the before elements and we set a font size, a width. We're gonna align the text in the center and we're gonna vertical align that icon with the text. And then finally, we're gonna target the ap-folder-class and add the appropriate content, and do the same for the ap-file-class. To properly separate the sublist, I'm gonna set a margin left and a margin bottom to the uls inside list items. So that gives us our final list. Next up, we have this table. Now, for the table, I wrote some very simple styles, just setting colors, a background color, removing borders, and so on. The result is something like this. Next, let's see about this callout. Callout, instead of using a normal border, I'm gonna use a box shadow. And the reason is I want to use a black color with a transparency, so that no matter what background color I have on the callout, the border will always be relevant to that color. So box-shadow's gonna be inset 0 0 0 and 1px $ap-black-05. And then I'm gonna set a border left of 4px solid. And also, I'm gonna make the text smaller, so @extend .ap-small text. And then, the callouts with the class of warning. All I gotta do is set a background color, and in our case, that's $ap-tertiary-2-10. And then the border color is $ap-tertiary-2. And the result is this. To style this further, we can also overwrite some settings. We have specific settings for callouts. So all I am doing here is removing the border, setting a padding, and setting a radius. And now, We almost get to our final form. We just need to change the color of the text. So we'll go back to Typography and under Paragraphs here, I'll simply say .callout.warning paragraph and I'm gonna change the color to ap-tertiary-2. And for the primary one, I'm gonna change it to tertiary-1. Okay, great. And finally, let's not forget on callouts. Let's also target the callout with a class of primary, and change the color variables accordingly. Finally, the last thing to do here is this navigation. First, we go to Navigation, and we're gonna target ap-page-nav-container. All I'm doing here is adding a border top and for each cell, I'm adding a padding. Here, we're gonna target .ap-page-nav-container to which I'm adding a border and for each cell, I'm adding a padding. Also, on the first-child, I'm adding a border-right, so that gives us this bit. And finally, I need to target the previous and next links. I'm gonna do that in Typography under Links. I'm targeting .ap-page-nav-link. I'm setting width to auto because these lengths inherit, or they have the class of .ap-link-arrow, which had a width of 100%, so I'm overriding that. Setting a padding, right, of 1 rem, removing that border-bottom, setting a margin-top because I am creating a before pseudo-element and setting the content to next or previous, depending on the class. And finally, setting the arrow on the previous class. So now, the result is this. And with that, we've finished styling an article page. There is still a little bit more work to do on smaller screens, but we'll do that in the next lesson, along with one of the standalone pages. So I will see you in the next lesson.