1
00:00:02,020 --> 00:00:02,852
So let's now dive

2
00:00:02,852 --> 00:00:05,340
into mobile and desktop styles

3
00:00:05,340 --> 00:00:08,470
for the navigation area and for this overall website.

4
00:00:08,470 --> 00:00:09,303
But at the moment,

5
00:00:09,303 --> 00:00:12,860
that means that we have to work on the navigation area.

6
00:00:12,860 --> 00:00:13,693
At the moment,

7
00:00:13,693 --> 00:00:16,280
we got styles that look good on desktop screens,

8
00:00:16,280 --> 00:00:19,730
but of course there, we want to hide this button,

9
00:00:19,730 --> 00:00:21,200
this burger button,

10
00:00:21,200 --> 00:00:24,910
and we want to hide the mobile menu here.

11
00:00:24,910 --> 00:00:28,470
Now it is often a good idea to build websites

12
00:00:28,470 --> 00:00:31,400
in a mobile-first approach,

13
00:00:31,400 --> 00:00:35,140
which means you want to focus on users on mobile devices

14
00:00:35,140 --> 00:00:39,120
since a lot of websites have primarily visitors

15
00:00:39,120 --> 00:00:40,610
using mobile devices,

16
00:00:40,610 --> 00:00:44,070
and you then want to optimize for desktop thereafter.

17
00:00:44,070 --> 00:00:46,180
Now it always depends on the user base

18
00:00:46,180 --> 00:00:48,090
of the website you are building,

19
00:00:48,090 --> 00:00:51,970
but here I will actually build it mobile-first,

20
00:00:51,970 --> 00:00:54,690
which means I wanted to find some base styles

21
00:00:54,690 --> 00:00:56,580
which do work on mobile screens

22
00:00:56,580 --> 00:00:58,920
and maybe also desktop screens,

23
00:00:58,920 --> 00:01:01,120
and then I'll add a media query,

24
00:01:01,120 --> 00:01:04,160
you learned about media queries in this course,

25
00:01:04,160 --> 00:01:06,743
that only applies to desktop screen sizes.

26
00:01:08,090 --> 00:01:12,000
Now, a media query is added with the @media keyword,

27
00:01:12,000 --> 00:01:13,750
and then you can add a condition like

28
00:01:13,750 --> 00:01:16,110
min-width: 48rem,

29
00:01:16,110 --> 00:01:20,900
or a value in pixels, that would work as well.

30
00:01:20,900 --> 00:01:23,600
With that, we ensure that only on screens

31
00:01:23,600 --> 00:01:25,200
that have this width,

32
00:01:25,200 --> 00:01:28,270
the styles that are defined inside this media query

33
00:01:28,270 --> 00:01:29,860
will become active.

34
00:01:29,860 --> 00:01:32,480
So the rules in there will only become active

35
00:01:32,480 --> 00:01:34,460
on large screens.

36
00:01:34,460 --> 00:01:37,400
Therefore, it's in here where I now want

37
00:01:37,400 --> 00:01:40,560
to target my #mobile-menu-btn,

38
00:01:40,560 --> 00:01:43,550
which is this hamburger button,

39
00:01:43,550 --> 00:01:46,740
to then set display to none, on it,

40
00:01:46,740 --> 00:01:50,450
which hides it, so that on large screens, it's hidden.

41
00:01:50,450 --> 00:01:53,120
So if I save this, it's gone,

42
00:01:53,120 --> 00:01:55,190
and therefore this navigation looks quite good

43
00:01:55,190 --> 00:01:57,023
on desktop devices now.

44
00:01:58,380 --> 00:02:01,023
Of course, we also want to hide the aside.

45
00:02:01,960 --> 00:02:05,410
So the mobile menu,

46
00:02:05,410 --> 00:02:07,660
the element with this ID.

47
00:02:07,660 --> 00:02:09,900
So also in here, instead of this media query,

48
00:02:09,900 --> 00:02:14,040
I'll target #mobile-menu, this aside element,

49
00:02:14,040 --> 00:02:17,160
and set display to none for that as well

50
00:02:17,160 --> 00:02:20,093
so that this is also hidden on large screens.

51
00:02:21,600 --> 00:02:23,800
So for now, reload, that is gone.

52
00:02:23,800 --> 00:02:27,950
And therefore the desktop navigation doesn't look too bad.

53
00:02:27,950 --> 00:02:31,920
I just also want to tweak my navigation items a little bit.

54
00:02:31,920 --> 00:02:35,800
So I'll target my anchor elements in .nav-items

55
00:02:35,800 --> 00:02:40,470
and set specific hover styles and active styles

56
00:02:40,470 --> 00:02:44,830
that I want to have here for those nav items.

57
00:02:44,830 --> 00:02:48,590
And I'll set that to background color

58
00:02:48,590 --> 00:02:49,990
var(--color-primary-500-bg).

59
00:02:52,250 --> 00:02:55,640
That's a specific variable, CSS variable,

60
00:02:55,640 --> 00:02:58,623
I defined in the base CSS file earlier.

61
00:02:59,970 --> 00:03:02,870
And I'll also copy that

62
00:03:02,870 --> 00:03:05,920
to set up some styles without hovering active,

63
00:03:05,920 --> 00:03:09,160
so to just target anchor elements in .nav-items

64
00:03:09,160 --> 00:03:10,960
on big screens,

65
00:03:10,960 --> 00:03:12,610
and add a little bit of padding

66
00:03:12,610 --> 00:03:16,563
so that this background color hover effect looks good.

67
00:03:17,570 --> 00:03:19,400
And here I'll then add some padding

68
00:03:19,400 --> 00:03:20,900
top and bottom of (--space-2),

69
00:03:22,060 --> 00:03:23,797
and left and right of (--space-4).

70
00:03:26,890 --> 00:03:29,553
And I'll give that a border radius of...

71
00:03:31,757 --> 00:03:35,174
(--border-radius-small).

72
00:03:36,340 --> 00:03:38,220
So these are additional styles

73
00:03:38,220 --> 00:03:40,123
I want to apply on big screens.

74
00:03:41,160 --> 00:03:43,603
There for now, this looks quite decent.

75
00:03:44,450 --> 00:03:47,590
Now let's view this on mobile devices.

76
00:03:47,590 --> 00:03:49,980
And for this, we can open the developer tools,

77
00:03:49,980 --> 00:03:54,330
click this toggle device toolbar button here in Chrome,

78
00:03:54,330 --> 00:03:56,190
and then choose a mobile device

79
00:03:56,190 --> 00:03:58,910
on which we want to preview this, like the Pixel 2 device,

80
00:03:58,910 --> 00:03:59,913
for example.

81
00:04:01,370 --> 00:04:04,950
If we do that, and I increase this a little bit,

82
00:04:04,950 --> 00:04:08,590
then we see that there, of course, this looks horrible.

83
00:04:08,590 --> 00:04:09,780
On a mobile device,

84
00:04:09,780 --> 00:04:12,060
I want to get rid of the navigation items here,

85
00:04:12,060 --> 00:04:13,500
in the main header,

86
00:04:13,500 --> 00:04:17,050
and the mobile overlay menu should look differently.

87
00:04:17,050 --> 00:04:20,240
We also might want to fix the overall header

88
00:04:20,240 --> 00:04:23,550
so that we can always see the header on mobile screens,

89
00:04:23,550 --> 00:04:26,773
even if we scroll on pages with more content.

90
00:04:27,620 --> 00:04:30,420
So there's a bunch of work we have to do there.

91
00:04:30,420 --> 00:04:33,600
For this, first of all, I'll go to navigation.css

92
00:04:34,730 --> 00:04:38,813
and go to my main header and add "position: fixed" here,

93
00:04:39,740 --> 00:04:42,700
and then add "top: 0; left: 0;"

94
00:04:42,700 --> 00:04:46,050
to fix this header in the top left corner

95
00:04:46,050 --> 00:04:48,160
so that it doesn't scroll away

96
00:04:48,160 --> 00:04:51,460
if we scroll on pages with more content.

97
00:04:51,460 --> 00:04:52,890
So for now, I'll save this.

98
00:04:52,890 --> 00:04:54,470
The only difference we see here

99
00:04:54,470 --> 00:04:57,320
is that some content slid beneath it,

100
00:04:57,320 --> 00:04:59,350
which is not my goal here.

101
00:04:59,350 --> 00:05:00,183
And therefore,

102
00:05:00,183 --> 00:05:04,280
I will also make sure that I target the main element,

103
00:05:04,280 --> 00:05:06,323
which holds my main page content,

104
00:05:08,630 --> 00:05:11,840
and that there I add a margin-top of 6rem,

105
00:05:11,840 --> 00:05:13,840
which is the height of the header:

106
00:05:13,840 --> 00:05:16,900
5rem, plus 1rem of extra spacing

107
00:05:18,070 --> 00:05:21,320
so that this main content is pushed down.

108
00:05:21,320 --> 00:05:22,350
Because as you learned,

109
00:05:22,350 --> 00:05:24,630
if you add "position: fixed" to an element,

110
00:05:24,630 --> 00:05:26,980
it's taken out of the document flow,

111
00:05:26,980 --> 00:05:29,990
which is why the content would slide beneath it,

112
00:05:29,990 --> 00:05:31,440
and that's not what I want here,

113
00:05:31,440 --> 00:05:33,070
so I pushed the content

114
00:05:33,070 --> 00:05:35,700
that would otherwise go beneath the header

115
00:05:35,700 --> 00:05:39,103
down by 6rem so that this overall looks good.

116
00:05:40,640 --> 00:05:43,180
Of course, main {margin-top: 6rem;}

117
00:05:43,180 --> 00:05:46,460
should only apply on mobile devices, though.

118
00:05:46,460 --> 00:05:50,370
Hence, I'll copy that rule and add it in my media query.

119
00:05:50,370 --> 00:05:53,757
And there, I will set margin-top to 0

120
00:05:54,852 --> 00:05:58,300
so that on desktop screens, I don't push the content down

121
00:05:58,300 --> 00:06:00,933
because there, the header will not be fixed.

122
00:06:02,120 --> 00:06:04,370
Or, at least, it should not be fixed.

123
00:06:04,370 --> 00:06:05,500
At the moment, it would be

124
00:06:05,500 --> 00:06:08,570
because I set "position: fixed" here on #main-header.

125
00:06:08,570 --> 00:06:11,910
I now want to overwrite that on bigger screens.

126
00:06:11,910 --> 00:06:13,560
So back in the media query,

127
00:06:13,560 --> 00:06:17,830
here, we now also have to target #main-header like this

128
00:06:18,820 --> 00:06:23,093
and set position here to static, like that.

129
00:06:24,280 --> 00:06:25,520
Now that's one thing.

130
00:06:25,520 --> 00:06:27,450
Now, as I mentioned, on small screens,

131
00:06:27,450 --> 00:06:31,650
I want to get rid of these navigation items

132
00:06:31,650 --> 00:06:33,850
here in the header.

133
00:06:33,850 --> 00:06:36,910
Therefore, we have to actually target

134
00:06:38,536 --> 00:06:41,730
our #main-header nav elements.

135
00:06:41,730 --> 00:06:44,280
So the nav element inside of #main-header,

136
00:06:44,280 --> 00:06:47,330
which is that nav element I want to hide,

137
00:06:47,330 --> 00:06:49,510
this nav element, I'm targeting this,

138
00:06:49,510 --> 00:06:52,270
this has to be hidden on small screens

139
00:06:52,270 --> 00:06:54,930
because there I have the dedicated mobile menu,

140
00:06:54,930 --> 00:06:57,700
which will be shown if this button is clicked.

141
00:06:57,700 --> 00:07:01,476
And hence, here, for #main-header nav,

142
00:07:01,476 --> 00:07:03,210
I'll set this to "display: none,"

143
00:07:03,210 --> 00:07:04,260
which is the default,

144
00:07:04,260 --> 00:07:07,780
but which of course should be overwritten on large screens.

145
00:07:07,780 --> 00:07:09,740
So again, we copied this rule,

146
00:07:09,740 --> 00:07:12,013
and here in the media query,

147
00:07:12,990 --> 00:07:15,950
I'll set this to block instead

148
00:07:18,810 --> 00:07:20,900
so that on large screens, this is shown,

149
00:07:20,900 --> 00:07:23,320
on small screens, it's hidden.

150
00:07:23,320 --> 00:07:26,310
Hence if I saved it and reload, the items are gone,

151
00:07:26,310 --> 00:07:29,623
but if I switch to the regular size, I can see them again.

152
00:07:31,459 --> 00:07:33,920
So that is good and working.

153
00:07:33,920 --> 00:07:38,170
Now, of course, we want to work on that mobile menu.

154
00:07:38,170 --> 00:07:39,003
And of course,

155
00:07:39,003 --> 00:07:41,050
it should be toggled when this button is clicked,

156
00:07:41,050 --> 00:07:43,380
but for a start, I will always show it

157
00:07:43,380 --> 00:07:45,670
so that we can work on styling it

158
00:07:45,670 --> 00:07:49,243
before we then work on the toggling logic in a second step.

159
00:07:50,280 --> 00:07:53,143
Now this means that, outside of the media query,

160
00:07:54,441 --> 00:07:57,010
maybe right before it,

161
00:07:57,010 --> 00:07:59,230
the exact position doesn't matter,

162
00:07:59,230 --> 00:08:02,100
we work on the mobile menu.

163
00:08:02,100 --> 00:08:06,920
So on the element with that ID, because that is this aside.

164
00:08:06,920 --> 00:08:10,430
This aside has "mobile-menu" as an ID.

165
00:08:10,430 --> 00:08:14,780
So in here, we can then set this position to

166
00:08:15,720 --> 00:08:17,820
fixed, as well,

167
00:08:17,820 --> 00:08:20,290
so that if we would scroll,

168
00:08:20,290 --> 00:08:23,850
we can scroll away because this should act as an overlay,

169
00:08:23,850 --> 00:08:26,210
which is always on top of all the content

170
00:08:26,210 --> 00:08:27,670
until you close it.

171
00:08:27,670 --> 00:08:29,430
That's why it should scroll with you

172
00:08:29,430 --> 00:08:31,443
if you try to scroll away from it.

173
00:08:32,450 --> 00:08:35,299
And top will be 5rem here.

174
00:08:35,299 --> 00:08:39,669
5rem because that is the height of the header here.

175
00:08:39,669 --> 00:08:41,070
And that should, of course,

176
00:08:41,070 --> 00:08:43,929
always be on top of that mobile overlay

177
00:08:43,929 --> 00:08:46,170
so that we can always see the header

178
00:08:46,170 --> 00:08:47,330
because there on the header,

179
00:08:47,330 --> 00:08:50,720
we also got the button to close the mobile menu.

180
00:08:50,720 --> 00:08:52,830
That's why I have "top: 5rem,"

181
00:08:52,830 --> 00:08:54,113
but I'll have "left: 0"

182
00:08:55,168 --> 00:08:58,150
because it should sit on the left edge of the screen.

183
00:08:58,150 --> 00:09:01,580
And the height, then, will be a calculated height,

184
00:09:01,580 --> 00:09:05,220
which can be done with the calc() function in CSS,

185
00:09:05,220 --> 00:09:06,640
which is a built-in function

186
00:09:06,640 --> 00:09:09,540
for calculating a size dynamically.

187
00:09:09,540 --> 00:09:11,217
And here, I want a calc(100vh),

188
00:09:13,570 --> 00:09:17,100
which is a special unit, which stands for viewport height,

189
00:09:17,100 --> 00:09:20,040
which is the total available height of the screen,

190
00:09:20,040 --> 00:09:24,283
minus the 5rem height of the header.

191
00:09:25,260 --> 00:09:28,693
So that is then the height of that mobile menu,

192
00:09:30,080 --> 00:09:33,590
and the width will be 100% to take the full width

193
00:09:33,590 --> 00:09:34,980
of the parent element,

194
00:09:34,980 --> 00:09:37,093
which in this case would be the body,

195
00:09:38,070 --> 00:09:41,463
which would have the width of the viewport, in this case.

196
00:09:43,020 --> 00:09:45,201
Then, I'll give it a background color of

197
00:09:45,201 --> 00:09:49,140
var(--color-gray-700),

198
00:09:49,140 --> 00:09:51,760
so a dark gray color,

199
00:09:51,760 --> 00:09:56,320
and I'll set display to flex here,

200
00:09:56,320 --> 00:09:58,920
and give this a flex-direction of column,

201
00:09:58,920 --> 00:10:01,600
and add "align-items: center"

202
00:10:01,600 --> 00:10:06,600
so that the nav element in the aside is centered

203
00:10:08,150 --> 00:10:09,170
horizontally.

204
00:10:09,170 --> 00:10:12,410
Horizontally, because I set flex-direction to column

205
00:10:12,410 --> 00:10:14,620
so the cross axis is now left-to-right,

206
00:10:14,620 --> 00:10:16,220
and there, I want to center this

207
00:10:18,100 --> 00:10:19,563
so that it looks like this.

208
00:10:21,050 --> 00:10:22,000
Now, we're not done.

209
00:10:22,000 --> 00:10:25,420
I also want to change the styling of the nav items.

210
00:10:25,420 --> 00:10:30,103
For this, we can target #mobile-menu,

211
00:10:31,612 --> 00:10:33,600
and then target the nav element in there,

212
00:10:33,600 --> 00:10:35,750
which holds all the nav items,

213
00:10:35,750 --> 00:10:37,750
so which holds that unordered list.

214
00:10:37,750 --> 00:10:40,800
And I'll give this a height of 20rem here,

215
00:10:40,800 --> 00:10:45,370
a width of 90% so that we have some space to left and right

216
00:10:45,370 --> 00:10:47,550
inside of that mobile menu,

217
00:10:47,550 --> 00:10:49,200
and give it a margin,

218
00:10:49,200 --> 00:10:51,530
and then have some margin to top and bottom,

219
00:10:51,530 --> 00:10:54,230
let's say (--space-4), which is 1rem,

220
00:10:54,230 --> 00:10:56,410
and auto left and right to center it

221
00:10:56,410 --> 00:10:59,610
since I have only 90% width.

222
00:10:59,610 --> 00:11:01,450
Now with that, that looks like this.

223
00:11:01,450 --> 00:11:04,480
And now it's time to also work on the individual items

224
00:11:04,480 --> 00:11:05,663
in the mobile menu.

225
00:11:07,080 --> 00:11:11,350
For this, of course, I can target my nav items again

226
00:11:11,350 --> 00:11:13,280
because, keep in mind in header.ejs,

227
00:11:13,280 --> 00:11:16,790
we have the nav element, and there we include the nav items,

228
00:11:16,790 --> 00:11:19,760
the same nav items as in the main header,

229
00:11:19,760 --> 00:11:22,000
and nav items is this unordered list

230
00:11:22,000 --> 00:11:23,823
with list items inside of it.

231
00:11:24,840 --> 00:11:27,560
Now I want to change these default styles

232
00:11:27,560 --> 00:11:29,310
to look good on a mobile screen

233
00:11:29,310 --> 00:11:31,360
and then overwrite them appropriately

234
00:11:31,360 --> 00:11:33,223
for bigger screens later.

235
00:11:35,020 --> 00:11:38,070
So here I want to have "display: flex,"

236
00:11:38,070 --> 00:11:41,960
and I want to have "align-items: center,"

237
00:11:41,960 --> 00:11:46,960
but I'll set flex-direction to column as a default,

238
00:11:47,010 --> 00:11:50,810
so to order these items from top to bottom,

239
00:11:50,810 --> 00:11:53,940
and set justify-content to space-around

240
00:11:54,890 --> 00:11:57,053
to have some spacing between those items.

241
00:11:58,040 --> 00:11:59,910
Now, for that spacing to apply,

242
00:11:59,910 --> 00:12:04,910
I will also give this a height of 100% so that .nav-items,

243
00:12:04,950 --> 00:12:07,390
this unordered list inside of the nav element,

244
00:12:07,390 --> 00:12:11,770
has 100% of the height of the surrounding nav element.

245
00:12:11,770 --> 00:12:13,850
And that surrounding nav element

246
00:12:13,850 --> 00:12:15,720
is the element we just worked on,

247
00:12:15,720 --> 00:12:17,093
has a height of 20rem.

248
00:12:18,248 --> 00:12:20,700
So the nav items will then be distributed

249
00:12:20,700 --> 00:12:24,390
within that height with space around them.

250
00:12:24,390 --> 00:12:26,993
That's the look I'm achieving here.

251
00:12:28,080 --> 00:12:30,270
Now, I want to make the nav item text

252
00:12:30,270 --> 00:12:33,750
a little bit bigger in the mobile menu,

253
00:12:33,750 --> 00:12:38,750
hence, here, I'll target #mobile-menu .nav-items a,

254
00:12:41,410 --> 00:12:44,273
so my anchor element's in there,

255
00:12:45,630 --> 00:12:49,193
and I'll set the font size to 1.75rem,

256
00:12:51,500 --> 00:12:52,333
and actually,

257
00:12:52,333 --> 00:12:57,220
I also want to change that font size for the logout button,

258
00:12:57,220 --> 00:12:59,773
so I will also target the button in there,

259
00:13:01,190 --> 00:13:02,940
and I'll change the color to

260
00:13:02,940 --> 00:13:07,290
var(--color-primary-100)

261
00:13:07,290 --> 00:13:10,443
to have a brighter version of that primary color.

262
00:13:12,870 --> 00:13:16,260
With that, this is what my items look like

263
00:13:16,260 --> 00:13:18,660
on a mobile device.

264
00:13:18,660 --> 00:13:21,260
This is what they look like on a desktop device.

265
00:13:21,260 --> 00:13:22,093
And here,

266
00:13:22,093 --> 00:13:26,310
the flexbox styling is now broken on a desktop device

267
00:13:26,310 --> 00:13:29,450
because I did now set flex-direction to column

268
00:13:29,450 --> 00:13:31,500
here for .nav-items.

269
00:13:31,500 --> 00:13:32,830
So what we need to do here

270
00:13:32,830 --> 00:13:35,680
is overwrite that for large screens again.

271
00:13:35,680 --> 00:13:39,610
Here, in my media query for large screens,

272
00:13:39,610 --> 00:13:43,370
I will target my .nav-items

273
00:13:43,370 --> 00:13:46,290
and set flex-direction to row again

274
00:13:47,950 --> 00:13:50,850
so that on big screens, we have a flex-direction of row,

275
00:13:50,850 --> 00:13:52,970
so now this looks good on big screens

276
00:13:52,970 --> 00:13:55,823
and also on smaller screens.

277
00:13:56,720 --> 00:13:59,903
And with that, this is slowly taking shape.

278
00:14:01,040 --> 00:14:01,873
Of course,

279
00:14:01,873 --> 00:14:06,873
I want to make sure that the logout button also looks good.

280
00:14:06,910 --> 00:14:10,123
So if I do log in real quick here,

281
00:14:11,330 --> 00:14:12,960
like that,

282
00:14:12,960 --> 00:14:16,220
this button doesn't look the way it should look like.

283
00:14:16,220 --> 00:14:19,710
So let's work on the logout button styling now.

284
00:14:19,710 --> 00:14:22,750
For that, back in navigation.css,

285
00:14:22,750 --> 00:14:25,000
outside of the media query,

286
00:14:25,000 --> 00:14:27,220
so my general default style

287
00:14:27,220 --> 00:14:29,410
that should apply on mobile screens

288
00:14:29,410 --> 00:14:33,160
and then, of course, also as a default on bigger screens,

289
00:14:33,160 --> 00:14:34,990
unless we override it,

290
00:14:34,990 --> 00:14:37,697
will be defined, let's say, here,

291
00:14:37,697 --> 00:14:39,450
after .nav-items li,

292
00:14:39,450 --> 00:14:42,093
before I dive into the mobile menu parts.

293
00:14:43,350 --> 00:14:46,760
Here, I will target .nav-items button.

294
00:14:46,760 --> 00:14:49,540
So all the buttons in my .nav-items unordered list,

295
00:14:49,540 --> 00:14:51,840
and I only have one button in there,

296
00:14:51,840 --> 00:14:55,810
which is my logout button,

297
00:14:55,810 --> 00:14:58,080
and there, I'll give that a cursor of pointer

298
00:14:58,080 --> 00:15:00,950
to have a nice pointer when we hover over it,

299
00:15:00,950 --> 00:15:04,300
because we have that button on non-mobile screens as well.

300
00:15:04,300 --> 00:15:06,400
So there, I definitely want to have that look

301
00:15:06,400 --> 00:15:08,140
when I hover over it.

302
00:15:08,140 --> 00:15:10,470
I'll set font to inherit

303
00:15:10,470 --> 00:15:14,043
to use the font family I set up as a default.

304
00:15:15,150 --> 00:15:18,930
I'll remove the border which I have here, or to be precise,

305
00:15:18,930 --> 00:15:22,820
I'll set the border to a different value than the default.

306
00:15:22,820 --> 00:15:25,240
I want to have a one-pixel solid border

307
00:15:25,240 --> 00:15:26,850
with the color of

308
00:15:27,712 --> 00:15:29,267
var(--color-primary-500).

309
00:15:30,570 --> 00:15:33,593
So that default primary color was used a lot.

310
00:15:34,480 --> 00:15:36,868
Set the background color to transparent

311
00:15:36,868 --> 00:15:40,420
to have no background color,

312
00:15:40,420 --> 00:15:43,630
so to overwrite the default background color.

313
00:15:43,630 --> 00:15:45,850
And I will set the padding

314
00:15:45,850 --> 00:15:49,050
to var(--space-2), top and bottom.

315
00:15:49,050 --> 00:15:51,240
So a little bit of padding, top and bottom,

316
00:15:51,240 --> 00:15:56,240
and more padding with (-space-4) to left and right.

317
00:15:57,530 --> 00:16:00,460
And, I will also give it a border radius,

318
00:16:00,460 --> 00:16:03,123
maybe after defining the border here,

319
00:16:04,050 --> 00:16:06,277
which is var(--border-radius-small).

320
00:16:10,010 --> 00:16:13,570
With that, that's how my logout button looks like.

321
00:16:13,570 --> 00:16:15,960
I think we can improve the color.

322
00:16:15,960 --> 00:16:17,810
So let's actually go there

323
00:16:18,970 --> 00:16:23,020
and give this a color

324
00:16:23,020 --> 00:16:24,390
of var(--color-primary-500),

325
00:16:29,440 --> 00:16:30,273
like that.

326
00:16:31,755 --> 00:16:32,640
But with that,

327
00:16:32,640 --> 00:16:34,310
this is my logout button,

328
00:16:34,310 --> 00:16:38,640
and on a mobile screen, it looks like this.

329
00:16:38,640 --> 00:16:41,950
Now actually, that's not entirely the look I'd want.

330
00:16:41,950 --> 00:16:44,590
So I think we should definitely increase the padding,

331
00:16:44,590 --> 00:16:46,640
but I just noticed the padding was off

332
00:16:46,640 --> 00:16:48,420
because I had a typo here.

333
00:16:48,420 --> 00:16:52,340
I forgot a dash on the second variable here.

334
00:16:52,340 --> 00:16:53,840
So that should be (--space-4).

335
00:16:55,030 --> 00:16:57,510
With that, this looks better,

336
00:16:57,510 --> 00:17:00,190
but of course the border colors should be different here.

337
00:17:00,190 --> 00:17:02,610
And keep in mind, we're building this mobile-first,

338
00:17:02,610 --> 00:17:05,280
so the default styles should be for mobile.

339
00:17:05,280 --> 00:17:07,690
So therefore, here in that default style,

340
00:17:07,690 --> 00:17:11,119
I will actually change the border color

341
00:17:11,119 --> 00:17:13,319
to have that same color as I use

342
00:17:13,319 --> 00:17:18,319
for the text of my menu items here as a default.

343
00:17:18,369 --> 00:17:20,780
And that text,

344
00:17:20,780 --> 00:17:24,230
that's the color I set here for .nav-items a,

345
00:17:24,230 --> 00:17:26,280
and the .nav-items button,

346
00:17:26,280 --> 00:17:28,089
so for the button, the text color,

347
00:17:28,089 --> 00:17:29,590
that is (--color-primary-100).

348
00:17:32,248 --> 00:17:34,340
So, for the button,

349
00:17:34,340 --> 00:17:36,870
which I'm explicitly targeting like this,

350
00:17:36,870 --> 00:17:39,420
I'll set the border color to (--color-primary-100),

351
00:17:42,080 --> 00:17:45,720
and actually the text color should be removed here

352
00:17:45,720 --> 00:17:48,750
because I'm setting that further down anyways.

353
00:17:48,750 --> 00:17:51,690
I'm setting that here with these rules,

354
00:17:51,690 --> 00:17:54,660
with this rule, with this selector specifically.

355
00:17:54,660 --> 00:17:56,163
I'm setting this color.

356
00:17:57,120 --> 00:18:00,180
So therefore now, that looks good on a mobile screen.

357
00:18:00,180 --> 00:18:01,970
On a non-mobile screen, of course,

358
00:18:01,970 --> 00:18:03,890
I'm not too happy with it.

359
00:18:03,890 --> 00:18:08,430
There, I now lost my color, and the border color is off,

360
00:18:08,430 --> 00:18:09,370
and therefore,

361
00:18:09,370 --> 00:18:13,390
it's time for another media query-specific style again,

362
00:18:13,390 --> 00:18:15,130
where we, for example,

363
00:18:15,130 --> 00:18:20,080
go here and target the button in my .nav-items

364
00:18:20,080 --> 00:18:25,080
to give it a color of var(--color-primary-500)

365
00:18:28,090 --> 00:18:30,860
to have that darker orange,

366
00:18:30,860 --> 00:18:33,040
and to change the border color

367
00:18:33,040 --> 00:18:36,073
to that same color, like this.

368
00:18:38,390 --> 00:18:40,100
And with that, if I reload,

369
00:18:40,100 --> 00:18:43,890
that is my logout button on a desktop screen;

370
00:18:43,890 --> 00:18:46,070
that is the button on a mobile screen.

371
00:18:46,070 --> 00:18:47,833
And that looks way better.

372
00:18:48,930 --> 00:18:50,220
I got no hover effect.

373
00:18:50,220 --> 00:18:52,140
You could add one for the logout button.

374
00:18:52,140 --> 00:18:53,660
I'm fine without one.

375
00:18:53,660 --> 00:18:56,230
I got hover effects for the other items.

376
00:18:56,230 --> 00:18:57,140
And with that,

377
00:18:57,140 --> 00:19:00,130
I am actually quite happy with the look of this.

378
00:19:00,130 --> 00:19:01,760
Now, the next step is to ensure

379
00:19:01,760 --> 00:19:05,000
that we don't always see that mobile menu

380
00:19:05,000 --> 00:19:08,190
when on a mobile device, but that instead,

381
00:19:08,190 --> 00:19:10,830
this is only shown if you click this button,

382
00:19:10,830 --> 00:19:13,193
and it's hidden if we click the button again.