All right, we mostly done with our login screen. I just wanna do a responsive pass where we check it at different sizes and make a few tweaks and then we can move on. Let's do it. Okay. So I will pull up the dev tools and gradually make the window narrower and see what breaks and think will break, trust me. Okay, so the first thing we can notice is here, there isn't sufficient space for the pixel, the word stack.

Okay, so the first thing we can notice is here, there isn't sufficient space for the pixel, the word stack and the buttons to show up. And I think that the most important part is that, and the part that can and should go away is the word stack. So we are going to conditionally display the wordStack only from maybe the large breakpoint and up. I don't think we need to display the wordStack at smaller sizes because like I said before, I consider this as a decorative element.

sizes because like I said before, I consider this as a decorative element. And on that note, because it is a decorative element, let's add an aria-hidden attribute to the whole word-stack. So this is the entire word-stack. And here I will add aria-hidden="true". And what this is going to do is tell screen readers to not worry about this whole segment here because it's here for declarative purposes. I might be wrong here and maybe this word-stack is an

because it's here for declarative purposes. I might be wrong here and maybe this word stack is an essential part of the user experience. But if that's the case, Jeremy and Jeffrey can get back to me and we can work things out. Alright, so next, like I said, I want to hide this element on small screens and only reveal it from the large breakpoint and up. So lg:block will set it as display block from 1024.

So LG block will set it as display block from 10 24. We might be able to show it earlier, but let's try that. And so it's going to be hidden until that for smaller screen sizes. So let's shrink the width and see what happens. So it's already hiding here. I think it might be a little too early. Uh, so let's try the earlier breakpoint, which is md and this happens at 7 68 pixels.

Uh, so let's try the earlier breakpoint, which is md and this happens at 768 pixels. And let's give that a try. Good, good. It should go off about now ideally, eh it kind of works. Yeah, I'll keep it like that. And here I'm kinda lazy in using one of the default tailwind breakpoints. But of course if you wanted to go a little bit more specific, you could have a specific breakpoint.

But of course if you wanted to go a little bit more specific, you could have a specific breakpoint or an arbitrary value. But here I think the medium breakpoint works just right. Okay, so we've sorted the word stack, uh, display. Uh, let's continue seeing what breaks. And eventually even without the word stack, you'll see that the side by side layouts will break. And also I've just noticed that the text in the footer is left line,

And also I've just noticed that the text in the footer is left line, so we should make it center line. Lemme do that real quick. So in the footer here we did have flex flex-col and items-center which technically centered aligned the elements, but once the text wraps it becomes apparent that the text is left aligned. So we need to also add the text-center class to the parent wrapper here.

So we need to also add the text-center class to the parent wrapper here. So both the <p> tags will be center aligned. There we go. Very nice. Uh, so what I'm thinking here is we at some point somewhere around here are going to stack vertically the pixel logo at the top and then the buttons below it. Okay, so let's go find the place where this happens. And this is going to be the flex-wrapper here.

Okay, so let's go find the place where this happens. And this is going to be the flex wrapper here inside the main tag. And so now it's sets to flex. So by default flex row side by side. And what we want to do is change this to flex column initially and then again maybe the medium breakpoint switch it back to flex row, which it was all the time until now. Alright, let's take a look. This is flex row side by side,

Alright, let's take a look. This is flex row side by side, but when we reach the medium breakpoint it should stack and yep, it's working but it's also not really working. You can see that the offset on the right is bigger than the left. Uh, and this has to do with the set width we have here also. Uh, we have a maximum height of 100vh and the last thing you want to do is not be able to see one of the buttons.

and the last thing you want to do is not be able to see one of the buttons because the screen is not as high as the UI wants. So what I want to do here is perhaps remove the constraints to 100vh in terms of height. And so we can scroll if we need to. Alright, so let's try this. And by the way, left panel is suddenly kinda wrong. This is logo plus words stack.

And by the way, left panel is suddenly kinda wrong. This is logo plus words stack. And let me collapse this and I'll change the other one to action buttons so it makes more sense than left and right because when they stack it's no longer left and right. So what I want you to do is find the heading tag the h1 tag here and make it centered with text-center but only while the columns are being stacked. So at the medium breakpoint we go back to text-left.

but only while the columns are being stacked. So at the medium breakpoint we go back to text left. Okay, so this is subtle but you can see that it already feels a little bit more centered now, uh, where the buttons still do not because of the set width. And let's just check that it goes back to left line. Yep. Okay, cool. So next let's remove the max-width or the set width on the buttons until we reach the medium breakpoint.

or the set width on the buttons until we reach the medium break point. And this happens here, this W of 68, we only want to set that from the medium break point, which means the buttons are going to be full width until then. And I think, I think that's what we want. Alright, nice. And when I say full width, actually the parent container, this one had a max width of 80 I think yep here W 80. If that wasn't there there it would go completely full

this one had a max width of 80 I think yep here W 80. If that wasn't there there it would go completely full width, which I think is too much. So that kinda works to have that container that has the width of the heading and the buttons normalized to the same width. And then when we get bigger the heading should go left line and the buttons a little bit narrower as well. That works kind of nice. Let's see what happens when it gets real narrow.

That works kind of nice. Let's see what happens when it gets real narrow. I don't think we need to worry below 320 pixels. Realistically not many devices go that low anyway and it looks like the w-80 here is biting us. You can see we have w-80 and max-w-full, which we are hoping doesn't go larger than full but because of the padding on the parent element here full actually spreads out beyond the edge here.

because of the padding on the parent element here full actually spreads out beyond the edge here. So let's try add this w-80 only from maybe the small breakpoint. So before that it's going to use the browser window and not try to hard code the width like it is here. And so this is up here, let's try small:w-80 and yeah, it's doing exactly what I wanted. It'll make the buttons shrink. Uh, we very small here but from 320 this look decent.

It'll make the buttons shrink. Uh, we very small here but from three 20 this look decent but um, it should jump to w-80 eventually at the small break point. Oh this is very late here. I don't like uh, how wide this is. So what I'm going to do is try to have a smaller width from the mobile. Uh, 0 width all the way to sm. I don't know how much we want.

Uh, zero width all the way to sm. I don't know how much we want but maybe W 64, how much is that? Yeah, 2 56. So we shouldn't have any issues where it's too wide for the viewport at three 20. It might however be too small which is the opposite problem. And yes, I think that is a bit small here but as you can see from three 20 it sort of works. So maybe 72 is going to work here,

but as you can see from three 20 it sort of works. So maybe 72 is going to work here, but now we are back in the problem where it's too wide but at least I think that has a nice size here up to the SM break point. So what I want to do is still have that width but only from probably 360 pixels. So there is no XS break point but something we could do is use a mean-dash arbitrary value.

So there is no XS breakpoint but something we could do is use a mean dash arbitrary value and here you go, 360 pixels. That's one way you can pass arbitrary breakpoint and here uh, use that to set the width of 72. And so now it's going to have a full width until the 360 pixels and then from 360 to 640 it's going to be w-80 and that I think will work great. So if it's small it's gonna get small.

and that I think will work great. So if it's small it's gonna get small but we don't really care about that width. But from 360 which is right here, you can see that now it's clamped to W-72 and then at 640 it's gonna go to the W-80. Very cool. I like that. Okay, we are getting some way. Uh, we are going to fix the spacing and maybe the font size here. There's too much space here, here and here.

and maybe the font size here. There's too much space here, here and here. But before I do this I want to address the footer thing here. Right now the footer is fixed to the bottom and so if we had less vertical height, uh, you can see that things are really broken. So what I want to do is change the footer from a fixed position, uh, and only do that from the medium break point where we switch

change the footer from a fixed position, uh, and only do that from the medium break point where we switch to the side by side layout. So here and before that I want to let the page scroll freely. Let's go in that order. First let's unfix the footer until the medium breakpoint. So I will go down to the footer, I will prefix the fixed with md and I'll also prefix the bottom-0 with md and the inset-x-0 with md.

with MD and I'll also prefix the bottom zero with md and the inset X zero with md. So what this does is it's going to let the footer be placed after the content where it needs to until uh, the medium breakpoint where it's gonna be fixed. And right now you can see that it has disappeared and the reason is it's below the content here but we have an overflow clip on the body tag here. If this was not here, we would probably reveal the footer but also reveal an issue here.

If this was not here, we would probably reveal the footer but also reveal an issue here. So let's go and do that. So in the body tag only from the MD breakpoint we will have overflow: clip;. So now we are able to scroll but we have two problems, actually. The first one is that bar is not relative to the fuller no more, and also the background image is completely scrolling with. So we might need to make the background image fixed instead.

and also the background image is completely scrolling with. So we might need to make the background image fixed instead of absolutely positioned. Let's start by fixing this. This is pretty easy. So you can see in the footer that the white noise is absolutely positioned to the footer tag that's going to fix it. All right and bring the bar below the content once again. Next, I don't want the section here to have a hundred percent viewpoint height necessarily.

Next, I don't want the section here to have a hundred percent viewpoint height necessarily because then I always have to scroll to see the footer. So we are going to remove the class that makes not these elements but the main tag have a height of full. Again, we'll have that only from the md breakpoint. So main md height full. And so now it's only going to take the space that it needs. Obviously there is a spacing on top.

And so now it's only going to take the space that it needs. Obviously there is a spacing on top problem uh, that we can fix. And so we're going to add some margin-top here on the main tag but only until the MD breakpoint. So on the main tag, let's go MT 16 and then at the MD breakpoint MT 0. And when you see this, if you feel a bit dirty about it, I think you can also go max-md MT 16. Is that a thing? Yeah, so that's the thing.

I think you can also go mt-16. Is that a thing? Yeah, so that's the thing with the reverse media query where it checks if the width is smaller than a certain amount. So if you didn't want to have to set and then override a margin-top that's only here for mobile, you can do it this way except uh, we don't want margin but we want pt-16. So let's go pt-16.

but we want paddingTop 16. So let's go pt 16. So now the main tag is going to take whatever space it needs and then we'll scroll and see the footer. But then once we hit the medium break points, everything is clamped to 100dvh with the footer fixed at the bottom, which is exactly what we want. So I think all we need to sort out now is the scrolling background image

So I think all we need to sort out now is the scrolling background image and then we'll take care of the spacing and we should be in a very good place. So I believe all I need to do to fix the background image here is change from absolute to fixed. It's inset to zero so it's going to use whatever space it's able to. So nothing should change at all except

to use whatever space it's able to. So nothing should change at all except that now when we scroll, the background image remains fixed and I think I should have done that from the start, but that's a good way to fix it. So this is looking great to me. Let's verify that it still works on wider screen and yep, it does. Very cool. So I wanna do one more thing and it's reduce the spacing here,

Very cool. So I wanna do one more thing and it's reduce the spacing here, here and here. Actually the spacing between the logo and the action buttons is set by the gap here. So I'm talking about this one here, so we might reduce that to uh, eight or 12. So let's go gap-8 and then md:gap-16 and yep, that's kind of nice. Let's see how it feels when it gets a bit wider.

and yep, that's kind of nice. Let's see how it feels when it gets a bit wider. Yeah, I think that works. Alright, next, let's reduce this spacing here and I believe this one is set with some margin-top. Yep on that flex wrapper. So let's go and find that element. And again, empty-8 md empty-16. So it's consistent with the other change, huh? And that actually feels a little bit too small. So might go with empty-8 but then SMT-12

And that actually feels a little bit too small. So might go with empty eight but then SMT 12 and I'm just vibe designing at this point but I think this makes a subtle difference. Yep, that works kind of nice. Uh, so this is too big but the rest is pretty good and we have that space left to handle while I'm next to the H1 here, let's go text-xl and probably at the small break point we can make it bigger. Okay, nice. I need to change here.

and probably at the small break point we can make it bigger. Okay, nice. I need to change here. Okay, yeah, I'm happy with that. And finally, we are going to change this one, which I believe has a margin top on the pt tag and we'll follow the same pattern that we've done here. So let's try that. I'll paste what I have but go mt-20 for the medium break point. And actually, we probably want a little bit more separation so let's go 16 and 12.

And actually we probably want a little bit more separation so let's go 16 and 12. So it's kinda like one increment up and okay that feels good. Uh, but now we have the opposite problem where if we have too much vertical space, the footer is not going to be anchored to the bottom. So we probably kinda want to have this section here to use at least the remainder of the space so that the footer is at least at the bottom.

to use at least the remainder of the space so that the footer is at least at the bottom. So right now we have the main tag here and then we have the footer tag down here. So one thing that typically works great for this sort of, uh, I need a minimum height to fill whatever space is available is to use grid or flex and then use the flexGrow properly um, to make sure it uses as much space as it can. So here we have the main and the footer tags.

as much space as it can. So here we have the main and the footer tags and so on the body we could have a flex flex call. And so then tell the main tag to use flexGrow to use as much space as it can so that the footer is always pushed to the bottom at least but then it can also scroll further down if the main tag uses more than the viewpoint height. Let's do that. Okay, so um, I'm going to collapse the tags so we can see clearer.

Let's do that. Okay, so um, I'm going to collapse the tags so we can see clearer. We have our main tag and our fully tag. What we want is the main tag to occupy as much space as it can. And so the, forget this one, this is fixed and not in the context, but basically we want the body tag to become a flex flex column container until the medium break point once again.

to become a flex flex call container until the medium break point once again. So let's try this. I'll go at the end and the prettier plugin will sort them out anyway. And actually I lied. I do not have the prettier plugin. So flex, flex call and then MD we are going to go display block or once again I could have gone Max MD Flex Max MD flex call. Let's see what happens now.

Max MD flex call. Let's see what happens now. So we have a flex element with the main and then the footer and then we can tell the main tag to grow with flex-grow so that it'll push the footer to the bottom. That should work. So in our main tag here I will add flex-grow. So excellence now it's growing to use the maximum amount of space available.

So excellence now it's growing to use the maximum amount of space available, but if we do have less space we can still scroll and the footer is going to be at the bottom. So that's exactly what I want. The footer will always be at the bottom. And then if we go past the md breakpoint, we are back to our side by side setup where we have a height of 100dvh and everything seems to work very, very,

of 100 DVH and everything seems to work very, very, very nicely at this point. I'm super happy with this. So our logging screen is now looking pretty decent at mobile screen size and anything in between we are just going to take a look at what happens when we go super wide the other way, the other side of the spectrum and then compare with the design One more time. And I think we can wrap this up.

and then compare with the design One more time. And I think we can wrap this up. Okay, so I cannot go wider than 1280 pixels here because of the recording resolution, but what I can do is zoom out to mimic a larger screen and you can see that while our word stack works, uh, things seem very jammed into the middle here. And you might remember that we had set a max width, where was that? Yeah, on the main tag here we had a max width of 100 pixels,

a max width, where was that? Yeah, on the main tag here we had a max width of 100 pixels, 1000 pixels, sorry. So I think we could make this be the case until maybe the Excel breakpoint. So maybe we can go excel max width and have another arbitrary value of maybe 1280 pixels. And hang on, I feel like this has to be one of tailwind's default width. Yep, seven Excel is 1280 pixels. So let's try that.

of tailwind's default width. Yep, seven Excel is 1280 pixels. So let's try that. So let's take a look. This is uh, before the Excel breakpoint and then if I zoom out, uh, it's going to spread the columns a bit further out. It's a little bit too much for my liking. What's the earlier breakpoint? 6xl. Yeah, let's try that one. And yeah, that's a little bit better.

Yeah, let's try that one. And yeah, that's a little bit better. So again, this has triggered the XL breakpoint, uh, but on the resolution we are at now, it's slightly narrower. Uh, and I think that's good. Of course we could go really deep here and start tweaking the font sizes for larger viewpoint sizes. But after all this is just the login screen and we want to focus on the actual application.

But after all this is just the login screen and we want to focus on the actual application. So let's take a last look at the design, see if we've missed anything and if not, we are gonna move along. All right, so we've got a background image, a pixel logo, word stack. We have all these elements, the footer and whoops, I can see this little X logo here, icon pixel that I have not implemented yet.

and whoops, I can see this little X logo here, icon pixel that I have not implemented yet. So this should be very easy because it's going to be absolutely positioned within the footer. And so let's go in the footer tag and after the white noise here, what is it called? Peak photogram. Is that a thing? Uh, and believe it or not in my clipboard I have an SVG tag ready to go.

Uh, and believe it or not in my clipboard I have an SVG tag ready to go and this is a super cool decoration but this is not what we were after. You can see the pictogram is gigantic and the reason is there's a viewBox but no height and width dimension. So let's tame it right down with a width of w-7. It should be 28. Yeah, let's go with that.

of W seven. It should be 28. Yeah, let's go with that. Okay, this is much better. But now we are going to absolute position to the right within the footer. So absolute right four and bottom four, although we have uh, the white noise with the height of four, so I think bottom eight we will set it perfectly. Let's try that. Yeah, really nice on the design here. It seems to be showing in gray scale.

Let's try that. Yeah, really nice on the design here. It seems to be showing in gray scale so maybe we can get away with applying the gray scale filter and yeah, super nice. So I think this is good. Let's just try to see how it clashes with the footer and I'm pretty sure that it eventually, uh, let's toggle off the flex container here. I'm pretty sure it's going to overlap the logo. And so from about 640 pixels here, I wanted

I'm pretty sure it's going to overlap the logo. And so from about 640 pixels here, I wanted to not show anymore. We'll start with hidden and then md, what's md 768, what's sm 640? Yeah, from sm we're gonna go block and one more time you see this and you can say no, we want max-sm:hidden. It's really up to you. Uh, mixing both is a bit weird.

and you can say no, we want max SM hidden. It's really up to you. Uh, mixing both is a bit weird but I am thought I would show you this and I'll keep that one here. So now it should show until we reach 640 pixels and then stop showing just before it starts clashing. Perfect. Alright. I am sure that we could fiddle endlessly with more tweaks at different responsive sizes, but I'm also pretty confident

with more tweaks at different responsive sizes, but I'm also pretty confident that this is definitely in the good enough bucket for now in the design. If I turn on the prototype mode, you can see that create account and sign in will navigate likely to somewhere. And this is the next section that we are going to build. And so in the next lesson we are going to start a new HTML template for the feed

And so in the next lesson we are going to start a new HTML template for the feed and then we'll go back in the login screen and connect the buttons to link to that feed page. I hope you're excited. Let's get cracking.