- Read Tutorial
- Watch Guide Video
Let's go ahead and head into our style folder, and create a new file and call it recentPosts.scss. Now we'll import it into main.scss.
Let's head over to our recentPosts.js and see what we have. We have a few tags and here we have recent-posts__wrapper, heading and posts. Then we'll add all of those to recentPosts.scss.
recentPosts.scss
.recent-posts {
.recent-posts__wrapper {
.recent-posts__heading {
}
.recent-posts__posts {
}
}
}
The first thing I want to do is actually get rid of these dots in our lists and I'll do this in main.scss because we're going to have a couple unordered lists throughout our application.
main.scss
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Awesome. Now, let's just worry about styling the recent posts on the homepage before we style the posts themselves. Let's head to our recentPosts.scss and get these in.
recentPosts.scss
.recent-posts {
display: grid;
align-content: center;
justify-items: center;
background-color: skyblue;
.recent-posts__wrapper {
background-color: rgb(71, 203, 154);
display: grid;
.recent-posts__heading {
}
.recent-posts__posts {
}
}
}
Here's our wrapper.
Now let's give this a gap.
recentPosts.scss
.recent-posts {
display: grid;
align-content: center;
justify-items: center;
background-color: skyblue;
.recent-posts__wrapper {
background-color: rgb(71, 203, 154);
display: grid;
grid-row-gap: 21px;
.recent-posts__heading {
}
.recent-posts__posts {
}
}
}
Okay so that's all that's working. Let's go back to that SCSS file and we're going to apply a blue color to the heading.
recentPosts.scss
.recent-posts {
display: grid;
align-content: center;
justify-items: center;
background-color: skyblue;
.recent-posts__wrapper {
background-color: rgb(71, 203, 154);
display: grid;
grid-row-gap: 21px;
width: 100%;
.recent-posts__heading {
color: $color-blue-one;
font-size: 14px;
}
.recent-posts__posts {
}
}
}
Now let's go ahead and put this variable into our main.scss, then head back to our recentPosts.scss. Now what we want to do is style the Posts container.
recentPosts.scss
.recent-posts {
display: grid;
align-content: center;
justify-items: center;
background-color: skyblue;
.recent-posts__wrapper {
background-color: rgb(71, 203, 154);
display: grid;
grid-row-gap: 21px;
width: 100%;
.recent-posts__heading {
color: $color-blue-one;
font-size: 14px;
}
.recent-posts__posts {
display: grid;
justify-content: space-evenly;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 42px;
}
}
}
Now what I want to do is get rid of these background colors.
That looks good.
In the next guide, we will style our recent posts. we're going to style our posts component.
Let's commit our code.
git status git add . git commit -m "styled the recent posts component"
I'll see you in the next video.