So, just to review, if you click on one of the posts that you have, you should have all of your content looking like this. Where the content is in a large column right in the middle of the page, and we're going to use the same layout for our index blog post. So let's walk through exactly how to do that, and this should be a pretty quick guide.

So if I open up Visual Studio Code right here, you can see in the blog detail page that we have a wrapper div called "blog-container" and then "content-container" inside of that. And that's all we're going to need in order to have our blog view looking the same way.

So I'm gonna come down here and I'm just gonna create a new return statement completely just to make it easy. I'm going to paste in the "blog-container" and the "content-container" and then make sure you close off both of those divs and then from there, we can take our {blogRecords} and make sure you copy them with the curly brackets and put that right in the middle. And then you can get rid of that middle return statement.

blog.js

return (
  <div className="blog-container">
    <div className="content-container">{blogRecords}</div>
  </div>
);

If you hit save now, if we come back we should have a little bit closer to the base layout we're looking for.

So you can see that now our column is now in the center so all of our content here is where we want it to be. But these headings look pretty ugly because we're using just the basic h1 headings which, that works fine like how we're using them right here where we have the nice big heading on the top of the detail page. But for the index view, I want to shrink them and because they're links I don't wanna have that underline and I also wanna update the color. So, let's see how we can do that.

I'm gonna go into the blog style file here and inside of the .content-container I'm first gonna fix the link issue. So I'm gonna select the links inside of the .content-container and I want to remove the underline, so I'm gonna say text-decoration: none and then I also want to have the teal color so I'm going to use teal and then I am going to add a transition of 0.5 seconds with the ease in, ease out animation.

And then let's also update the hover state so that whenever our user hovers over, the colors get changed slightly. So I'll type &:hover and then inside of here I will simply say I want to change the color to $dark-teal. Once again, we're getting these duller variables directly from our variables file.

blog.scss

a {
  text-decoration: none;
  color: $teal;
  transition: 0.5s ease-in-out;

  &:hover {
    color: $dark-teal;
  }
}

So let's hit save and see if that fixed the color issue. And you can see yes, we have much better looking links right here.

We may or may not want to add some spacing later on but I'm gonna wait till we actually have a little bit more content to work with before we make that kind of change. And then the only other thing I want to do is I want to shrink these links a little bit.

So let's see what we can do for that, I'm gonna come up and I'm gonna say any h1 headings here, I want to take the font size to 1.5em and that should give us a better size.

h1 {
  font-size: 1.5em;
}

So now you can see our links are looking better, they're not quite as in your face but they still are very clearly the post title. So this is everything that we need to do for our index page style, so great job if you went through that.

In the next guide, we are going to have some very, very exciting times 'cause in the next guide, we are going to build out our infinite scroll feature. So this is one of the key features for the entire blog component, and I can also tell you this is a feature that you will probably be building for years.

So we are gonna take it nice and slow, we'll probably spend a few guides building it out. But by the end of it, you're gonna have the ability to have a full infinite scroll feature directly in your portfolio application.

Resources

• Source code