So first thing we want to do is head over, well I want to close out all of these files, and I want to create a file in our style folder called results.scss, and then I want to import that into main.scss. So at the bottom here I'm just going to copy this and paste it and import results.

main.scss

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

So all we've done so far is closed out all the files, created a file in our style folder called results.scss, and imported it into main.scss, so that's all we've done and we're ready to go.

So let's open up our results.js and look at the tags we're dealing with. OK so no tags directly in here except for we could name our we could name our parent div result, like we did in the home, we're going to do it in here and we're going to say className is equal to results and we're chilling there.

Let's go into our new results.scss and type that out,

results.scss

.results {

}

and that's basically the same idea as our home. So if I go to our home.scss or did we even make a home.scss? No we did not. It's basically this function right here, so what I'll do is actually make a home.scss right now, so let's make that file in here and call it home.scss, and let's import it right above our results.

main.scss

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

And then what we want to do is put ./home in there but we need to talk about this a bit because the layout is going to be the same, so we can create a mixin. So right underneath home I'm going to say .results and basically copy this entire .home continent into here.

main.scss

.home {
    height: 100vh;
    width: 66vw;
    display: grid;
    align-content: space-around;
    // justify-items: stretch;
    // grid-template-rows: 1fr 2fr 1fr;
}

.results {
    height: 100vh;
    width: 66vw;
    display: grid;
    align-content: space-around;
}

Save that and let's go back to our app, and you see our results, it's looking pretty nice except for we don't have any content. Let's search rails and we have our content.

So yeah that's looking pretty close, except for we don't have a recent post because that's what we want. We have our fetched posts. Now, the only problem here is that 1), well the only few problems, is we don't want this search bar this big and we don't want to, yeah that's about it, we just want the search bar to be different. And we want to actually make each one of these items on their own line.

So all we need to do to finish this app is fix up the styles on the search bar in the results.js and then fix up the styles on the results posts and results posts posts. So let's go ahead, and yeah clicking on these isn't working because it's just like really pushing it up, but we'll fix that.

So let's go ahead and make this a mixin because it's the same exact code. I'm going to get rid of these comments, I'm going to cut out all this code and make a mixin, and call it @mixin default-page-layout. Okay, so this will be our default page layout.

And then I can just say @include default-page-layout call it as a function if you want, and then we can just throw this into results and it will work the same.

main.scss

.home {
    @include default-page-layout;
}
.results {
    @include default-page-layout;
}

Let's go to our application, and it's reloaded by now, it's working great, and yeah everything's looking nice. Let's go ahead and put these in their own files now, so result is going to go into results, and of course home is going to go into home.

Now, sense we've declared the mixin about this, it will use it properly and it's all good. Okay, so what we want to do now, I'm just going to move this mixin to right above all these colors just to keep things clean, will probably make a mixin eventually.

Actually, we might as well make it now. Let's cut out this mixin and let's create a file in here and call it mixins.scss let's pasted in there and let's include it in main.scss above everything, above all of our other inputs, or imports. Save that and it should be working, let's give it a search of python and yeah it looks pretty nice.

I guess we'll hop into the next guide where we will talk about how we can style this search bar component the way we want it. So let's commit our code.

Terminal

git status
git add .
git commit -m "styled results component"
git push origin master

And in the next guide we will hop into that search bar.

Resources

Source code