So let's get started now to get started with finishing our application.

We're gonna tackle all the changes we need to make to the author's pages.

So let's start up our server.

Let's look at the differences between our author.

Page is the only real things that we need to change is the actual authors Index page is slightly different.

If we look at our index pager, you see that our name is not being properly positioned, so we need to work on doing that.

This is, luckily relatively straightforward.

We can just go into our full.

They're here for our style, shoots shared and let's add a new style shoot.

We're gonna call it off without success, and this is where we're gonna put all of her off their styles.

We then want to import that into our main CSS just like that.

And now if we go into our view for authors from the index page here, we can make the changes we need for our styles.

The first thing we want to do is we want to style are often name, so we're gonna give this a class off her name.

Next we want to style the layout of this road.

We're gonna wrap the content of the road in a class, but we're just going to call off their room.

Here we go close up active and everything.

And now if we save that, nothing's changed over here.

But if we go into our CSS, we can start styling this room to look just like this.

Luckily, this is quite straightforward.

First thing we need to do is select our author rope.

We want to change the display here to be flex.

We want to justify the content with space between so they get separated out just like our header.

And of course, we want to add a little bit of margin between each row.

So add margin bottom of one RTM then for the author name itself.

We just want to make it slightly larger.

So we're going to increase the font size won't find five r e m.

Now if we say that and go over here, you can see that this now looks exactly the same as our search authors.

Paige over here and everything is working as intended The next thing that we need to do to make a few changes is on the actual view page for our authors.

If we go over here, you can see that our books are being displayed quite differently on this page, as there are on this page and you may notice, in our entire application, we display the books completely the same in almost every single page in a very similar layout.

So instead of having this code copying pasted all over the place because as you can see on our author show page, we're looking through all of our books.

We should create a partial that encapsulates how these books should be displayed.

And if we go back to our application here, you could see it.

These are displayed at a normal size on this page.

Our books have displayed very largely, and on our home page, our books are also displayed largely, so we need to be able to determine if we wanted to be a large book grid or a small book, great as well.

So let's create that partial down here new file and we're gonna call this a book grid di E.

J s and then inside of this partial.

Let's just copy over all the code from our author section.

Haste that into here.

And we're gonna change books by offer to be books, because we're going to have this be a generic partial.

That's just going to take a list of books.

Also, as I mentioned, this parcel is going to take whether or not this is a large book grid like this or if it's going to be a small book group like this.

So we need to determine what it's going to be, and we need to set some variables based on that.

The first variable that we want to set is the cover class for the book, and this is going to be equal to locals, which allows us to get our local variables.

We passed this dot large, which is what we're going to set if we want a large book grid.

So if it is large, then we want this to be book covered large as the class for our cover.

And if it is not barge, we just want this to be called book cover, just normal.

We also want to do the exact same thing again but we want to set a different variable this time.

We want to set a variable for the book Great class.

And this time, if it's a large, we want to just set this to book grid large.

And if it's not large, we just don't want to set a variable at all.

And there we go.

Now we can use those variables inside of our loop here in order to set what are books look like?

The first thing we want to do is wrap This book's a right inside of a tive, which is going to be our grid.

So we have foot grid and we also want to apply another cross of book grid large.

Here we go.

Now we put our book code inside of that Dave indented all properly, just like that.

And the next thing that we want to do is actually apply the classes for a cover so we could do that on the image itself.

We can move our heightened with, since those will be determined by the actual classes and then in here we can set a class which is going to be cool to book cover.

And we also want to set the class of the book cover class name.

So it was going here.

We want to set this equal to book cover class just like that and our sources already set, which is perfect.

And I noticed appear I put book grid large for this should really say book grid class because we want this to change whether or not we pass in large or not.

Also, we don't need this here inside of our locals because it's already being passed in by default.

Now it's saying that and that's our book grid complete.

And now we can import that into our authors show page.

So instead of all this code right here, we can replace this with a single, include, So we can say here include and we want to include from the partials folder just like that, and we will include the book grid, and all we need to do is pass the variables.

We want to go in here, which in our case, is going to be books.

And we want this to be books by often, just like that.

And there we go.

That's all because we need to include that now they can say that.

And if we go back to this page, go to an individual author.

You notice that we're getting on air?

This is just because I forgot to close out the parentheses for include method here.

Now it can refresh that and you notice we get another air and it looks like it says book si cover classes, not find.

So it looks like in our book grid, I just misspelled this variable.

Yes, I did.

Now you could say that end perfect.

We're getting exactly we want we have our books by our author, which is great.

And if we go over here are books by author are much smaller.

But that's just because we haven't supplied the classes yet for a book cover and both grids.

So let's do that now.

We can do it in a file here, call the book dot CSS, which is all of our books specific stylings.

And again we want to include that right here.

Remain that CSS and make sure that I spell that properly Bookstop CSS that we go and to get started was to find a few variables where you're going to determine the sizing of our book cover variables.

So the first pair of all we want is going to be the book cover with which is just going to be the standard with of 200 pixels.

Next, we wanna have another variable called book cover with, and this is going to be a large variant, which in our case will be 325 pixels.

And we also want finally, a final variable.

Would you wanna be called book cover aspect ratio And this essentially is going to be the difference between the height and the width.

And in our case, we just want this to be 75% still say 750.75 just like that.

And now we have an aspect ratio between our wits and our heights, and we also have the width with small and large book cover.

So let's get to work style in our book covers.

This is going to be our standard book cover.

Which one is going to be sitting here?

But with is going to be variable, which is just a book cover with just like that and for the height, we need to do a little bit of a calculation.

So which one do Cal here.

We want to get that variable but a book cover with and we just want to divide that variable by the other very boy we created, which is the book cover aspect ratio.

There we go and we have her height and are with for a standard book covers.

And if we said that, you see that already are book covers have shrunk down to the proper size.

And let's just get our large book covering here as well, so we could go book cover large, and all we need to do is just redefine the book cover with variable once it is variable here, equal to the book cover large just like that.

And it would do the same calculations up here because it's going to replace this book.

Cover variable with this large book cover variable.

But we can't see that because obviously these are not a large grid weaken.

For example, view this as a large grid, though we go into our authors show, and we also pass in a very cold large, and we give it the value of true.

Now if we say that you see are books have grown in size to the large size.

So now that we know that our grids working, let's finish styling our actual layout for the grid.

We can use that book great class that we just created to define the grid that we're gonna be using.

And we'll be using CSS great for this so we'll set the display to grid.

We want everything to be centered.

So let's say justified content in the center.

We want a slight gap between all of our elements, so we'll use great gap for that and just make that to a R E M.

And lastly, we wanted to find out how we want our columns toe layout.

So we'll say a great tip.

What columns is going to be repeat, auto fill, which essentially means it's going to feel is much space on the width as possible before raps to the next line.

And then we want to say what the width of each of the items in our ray will be.

In our case, this is just going to be that book covered with.

So was this a book cover with just like that?

And now we have a array of template columns which are going to be feeling as much basis possible for each one of our books.

Now, if we say that, he said that they're spaced out for each other and filling up as much space as possible.

And if we shrink this down quite a bit, you'll see that it will wrap down to the next line as soon as it can't fit all of them on a single line, which is perfect.

Now a city is accident thing, but for a large cover grid.

So both grid large and all we need to do is redefine our template columns.

We could just copy this down, and we want to use the large wit as our with spacing instead of a small with so that things don't overlap each other.

Now that we have that grid finished, let's use that grid in all the places that it needs to be used.

The first places on our index page, for example, soldiers go to our show will copy down this grid code, but our index page and we're just going to replace all this code in here for leaping over our books.

Get rid of these extra days since we don't need them, and we just want to make this all large grid.

So it's a large true, and our books variable is just called books.

Now, if we say that, go to our index page, you say we get an air, and that's because we need to fix our path to say partials.

And now if we say that, you'll see that we have a large book grid here, which will also rap as needed when it becomes too small, which is perfect.

And the last place we need to do this isn't our actual books index page.

So let's go to that as well.

We can again cocky this code Good index page, replace all this kind of here.

And of course, we need to change the path.

And there we go.

Now we have a nice book right here, which is really, really good.

Let's add a little bit of space in cellars, out of line.

Break in there.

That way we have a little bit of space between these different elements.

And now, before we tackle our final page, which is the book show page, we have one final thing to tackle, which is our error message.

If we try to save this, for example, you'll notice are ever message They're showing up as the same color as the rest of our text.

And we want that to be a darker red color.

So inside of our Arab message partial that we create here, let's just wrap this initiative so that we could give it a class here.

We're just going to be a real message and finish that off and close the diff.

Now we can select that air message class instead of remained out CSS scroll down to the bottom message and all we want to do is set the color of this text.

I was going to send it to be equal to that variable that we have for a danger color.

So say color, danger you And of course, we need to make this an H S O.

And we want to make it so that saturation is 100% and that the whiteness of this 50%.

Now, if we say that, you'll see that our air message is properly showing up as this nice red color for us, and it also scales off of our cue value in case we end up changing us in the future.

Now we can finally finish up by going to our books, page, show page and styling This toe look exactly the same as the mock up over here.

So let's open up that page.

We gotta book show page right