In the last guide, we styled our recentPosts, and in this guide, we are going to do the individual posts now. We're just going to do it in recentPosts.scss for now. We'll move it to its own file if we need to. Let's head to recentPosts.js, and we have our Post here.

Let's command + click on post and we have all these links. We have post-link and recent, but we are juststyling the recent-post. We have recent-post, recent-post__title. and recent-posts__topics, and then within those we have all these divs.

Let's just deal with these three for now. Let's go to recentPosts.scss, and let's say:

recentPosts.scss

.recent-post {
    .recent-post__title {

    }

    .recent-post__topics {

    }
}

Let's actually put this in its own file. Let's cut this and create a new file on our style folder called post.scss. We'll put all of our post styles in here, including our results-post styles but we don't need to worry about that now. We just need to do recent-posts.

Let's just get these tags in here while we can. So we have post-topic within the topics. Let's go to our topics, and we can just reference span. You don't even need to reference post-topic, so let's just reference the span. Well, that's the thing because we're going to used the topics in here too.

So What we should do instead, is we should just reference outside of this .post-topic. That way when we get around to the results component it's already going to have the styles for that. We won't have to put it into nested tags for the results-post.

The reason we're putting it out here, again, is because if we put it in .recent-post then we're not going to get the styles for this post-topic when we get to the results. It's going to render the topics here, but it's not going to render any styles because we're only getting styles for in here.

So I'm putting it outside with the post-topics because we have the tag. It will make it usable in other places. So what we need to do is get the links in there. To post-link_box and post-link_link. Let's go to post.scss and say:

post.scss

.recent-post {
    .recent-post__title {

    }

    .recent-post__topics {

    }
}

.post-topic {

}

.post-link {
    .post-link__box {

    }

    .post-link__link {

    }
}

Let's just style the topic, we'll say color: $color-gray-one. Let's save that and head to our app. That should be styled. We probably didn't import this. Let's go to main.scss and let's import the post.scss. So let's say:

main.scss

@import './searchBar';
@import './recentPosts';
@import './post';

We should be good there. Let's get out of that, and it should be styled. You'll see that it's the right color now, according to this app.

Now, this looks like it's a little bolder. What we can do is just go to our app here and apply those styles in our post.scss. We can say:

post.scss

.post-topic {
    color: $color-gray-one;
    font-size: 14px;
    font-weight: bold;
}

Now that will be bold and a little smaller. Okay, that looks great. Now it looks like the color might be a little brighter.

Let's go to our main.scss and see what the colors are. Yeah, let's do $color-gray-two. We can always check the design here. It looks like you can't click on these, looks like it's...let's just do $color-gray-two in our post.scss.

That should be good there. That looks excellent. Now let's see what else we can do.

Let's apply a color to this one, to the title. In our recentPosts.js, the title for each one of these posts in our posts component appears to be a div. We can just reference it as a title. We actually want this to be a link too, so what we can do is we can copy this in our result post.js.

We want to get rid of these on these event listeners onMouseEnter and onMouseLeave. So let's get rid of that, and put this all the way up here. That way it's still a link, it has our title, and it's in an a-tag. Then I'm just going to put this up here.

Now what we want to do is go into our post.scss and reference the a-tag, not on the box, but on the title. Now what we can do is we can just say:

post.scss

.recent-post {
    .recent-post__title a {
        color: $color-gray-one;
    }

    .recent-post__topics {

    }
}

Now we don't really need this topics because we style the post topic right here. So I'll just get rid of this for now, or comment it out. We might use it later on. Let's save that, and look here. I think we got the styles in there.

I'm going to comment out $color-gray-one or I'll just put in $color-gray-two and see if it picks up the color of these. That's working. Let's change it back to $color-gray-one because that's what we want.

Now that's a good start. I guess we could continue, but it just seems like these are over too far. Like this is not over. So I'm going to inspect this and see what we have on the topics here. Looks like we don't really have anything on here.

It looks like these are just aligned of left. These might be aligned to the right, probably because they're spans. In this case, these are a-tags. Let's go ahead and let's just align those to the left on the post-topic. Let's just say:

post.scss

.post-topic {
    color: $color-gray-one;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

Let's go to our application. That didn't do anything. Let's inspect the element, and see why. It appears to have some sort of margin on it. Looks like there's a margin of 4px on all of those because we applied that in our main.scss early on. So what I'll do is I'll get rid of this .post-topic.

We can just do this with grid style, but that might be too much for this little bit of DOM. So what we want to do is in post.scss, let's just say:

post.scss

.post-topic {
    color: $color-gray-one;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    margin-right: 4px;
}

Let's save that and see what we got. That looks good. Let's just put something like 6px. Okay, I'm goint to do 8.

We typed out all these styles, but we don't really need them right now. These are for the post-links, and we we know that we only display the post-links in the results page right here. We don't need to have this typed out, but we did. It doesn't matter. We're just not going to be applying any styles to it.

Now, you'll see that on the results page we're actually inheriting a lot of these styles already, which is really great with the with the bottom there. That's really pretty neat. I'm going to call it good for this guide because it's going on forever, and we actually completed our recentPost styles.

So that's it for this entire page actually. It's nice. Resizable to an extent. The only other thing we need to add to this page is the Font Awesome. What we'll do in the next guide, is learn how to implement Font Awesome into our application.

Let's commit our code, so let's say git status, git add ., and let's say git commit -m "styled the recent-posts post component". We styled the post component itself, not the recentPost. So let's say git push origin master.

I'll see you in the next guide where we will hop into the Font Awesome styles. Catch you then.

Resources

• Source Code