Skip to content

Commit a433845

Browse files
hmillersarahhmillersarah
committed
resize heading for smaller screens
1 parent 650627d commit a433845

1 file changed

Lines changed: 145 additions & 139 deletions

File tree

‎web-components/nav-header/nav-header.css‎

Lines changed: 145 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,238 +1,244 @@
11
header {
2-
position: sticky;
3-
top: 0;
4-
z-index: 300;
5-
background-color: #1c1c1c;
6-
color: white;
2+
position: sticky;
3+
top: 0;
4+
z-index: 300;
5+
background-color: #1c1c1c;
6+
color: white;
77
}
88

99
h3 {
10-
font-weight: lighter;
11-
font-size: 1.5em;
12-
color: #71a3e9;
13-
margin: 0em;
14-
padding: 0em;
10+
font-weight: lighter;
11+
font-size: 1.5em;
12+
color: #71a3e9;
13+
margin: 0em;
14+
padding: 0em;
1515
}
1616

1717
h4 {
18-
font-weight: 500;
19-
font-size: 1.25em;
18+
font-weight: 500;
19+
font-size: 1.25em;
2020
}
2121

2222
a {
23-
color: white;
24-
text-decoration: none;
23+
color: white;
24+
text-decoration: none;
2525
}
2626

2727
a h5 {
28-
font-weight: 500;
29-
font-size: 1em;
30-
margin: 0;
31-
padding: 0;
28+
font-weight: 500;
29+
font-size: 1em;
30+
margin: 0;
31+
padding: 0;
3232
}
3333

3434
form {
35-
width: 100%;
36-
height: 3em;
37-
background-color: white;
38-
display: flex;
39-
padding-right: 0.2em;
35+
width: 100%;
36+
height: 3em;
37+
background-color: white;
38+
display: flex;
39+
padding-right: 0.2em;
4040
}
4141

4242
form div {
43-
width: 100%;
44-
background-color: white;
45-
display: flex;
46-
flex-flow: row nowrap;
47-
align-items: center;
48-
gap: 0em;
49-
border: lightgray solid 2px;
43+
width: 100%;
44+
background-color: white;
45+
display: flex;
46+
flex-flow: row nowrap;
47+
align-items: center;
48+
gap: 0em;
49+
border: lightgray solid 2px;
5050
}
5151

5252
form div > img {
53-
padding: 0.1em 0.5em;
53+
padding: 0.1em 0.5em;
5454
}
5555

5656
form input {
57-
font-size: 1.125em;
57+
font-size: 1.125em;
5858
}
5959

6060
input {
61-
outline: none;
62-
width: 100%;
63-
border: 0;
64-
font-size: 1em;
65-
font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
66-
padding: 0.4em 0em;
61+
outline: none;
62+
width: 100%;
63+
border: 0;
64+
font-size: 1em;
65+
font-family: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
66+
padding: 0.4em 0em;
6767
}
6868

6969
.masthead {
70-
position: relative;
71-
display: flex;
72-
justify-content: space-between;
73-
height: 3em;
70+
position: relative;
71+
display: flex;
72+
justify-content: space-between;
73+
height: 3em;
7474
}
7575

7676
.logo {
77-
display: flex;
78-
flex-flow: row nowrap;
79-
align-items: center;
80-
gap: 1em;
81-
padding: 0.6em 1em;
77+
display: flex;
78+
flex-flow: row nowrap;
79+
align-items: center;
80+
gap: 1em;
81+
padding: 0.6em 1em;
8282
}
8383

8484
.logo img {
85-
width: 2em;
86-
height: 2em;
85+
width: 2em;
86+
height: 2em;
8787
}
8888

8989
.navigation {
90-
display: flex;
91-
flex-flow: row nowrap;
92-
width: 40%;
90+
display: flex;
91+
flex-flow: row nowrap;
92+
width: 40%;
9393
}
9494

9595
#search-icon {
96-
width: 1.4em;
96+
width: 1.4em;
9797
}
9898

9999
#clear-icon {
100-
cursor: pointer;
101-
display: none;
100+
cursor: pointer;
101+
display: none;
102102
}
103103

104104
.search-bar-focused {
105-
border-color: #42a7ec;
105+
border-color: #42a7ec;
106106
}
107107

108108
.hamburger-menu {
109-
z-index: 400;
110-
background-color: #1c1c1c;
111-
height: 3em;
112-
width: 3em;
113-
position: absolute;
114-
top: 0;
115-
right: 0;
116-
display: flex;
117-
flex-flow: column nowrap;
118-
justify-content: center;
119-
align-items: center;
120-
gap: 0.4em;
109+
z-index: 400;
110+
background-color: #1c1c1c;
111+
height: 3em;
112+
width: 3em;
113+
position: absolute;
114+
top: 0;
115+
right: 0;
116+
display: flex;
117+
flex-flow: column nowrap;
118+
justify-content: center;
119+
align-items: center;
120+
gap: 0.4em;
121121
}
122122

123123
.hamburger-menu:hover {
124-
cursor: pointer;
124+
cursor: pointer;
125125
}
126126

127127
.hamburger-menu div {
128-
background-color: white;
129-
width: 2em;
130-
height: 3px;
131-
transition: all 0.2s ease-in-out;
128+
background-color: white;
129+
width: 2em;
130+
height: 3px;
131+
transition: all 0.2s ease-in-out;
132132
}
133133

134134
#menu-toggle {
135-
z-index: 0;
136-
height: 3em;
137-
width: 3em;
138-
margin: 0;
139-
padding: 0;
135+
z-index: 0;
136+
height: 3em;
137+
width: 3em;
138+
margin: 0;
139+
padding: 0;
140140
}
141141

142-
#menu-toggle:checked + .hamburger-menu>div:nth-child(1) {
143-
transform: translate(-0.3em, -0.2em) rotate(-45deg) ;
144-
transform-origin: top right;
142+
#menu-toggle:checked + .hamburger-menu > div:nth-child(1) {
143+
transform: translate(-0.3em, -0.2em) rotate(-45deg);
144+
transform-origin: top right;
145145
}
146146

147-
#menu-toggle:checked + .hamburger-menu>div:nth-child(2) {
148-
transform: translate(-0.3em, 0.6em) rotate(45deg);
149-
transform-origin: bottom right;
147+
#menu-toggle:checked + .hamburger-menu > div:nth-child(2) {
148+
transform: translate(-0.3em, 0.6em) rotate(45deg);
149+
transform-origin: bottom right;
150150
}
151151

152-
#menu-toggle:checked + .hamburger-menu>div:nth-child(3) {
153-
transform: scale(0);
152+
#menu-toggle:checked + .hamburger-menu > div:nth-child(3) {
153+
transform: scale(0);
154154
}
155155

156156
.dropdown-menu {
157-
background-color: #282828;
158-
max-height: 0;
159-
z-index: 120;
160-
transition: all 0.3s ease;
161-
overflow: hidden;
162-
position: absolute;
163-
transition: all 0.35s linear;
164-
}
157+
background-color: #282828;
158+
max-height: 0;
159+
z-index: 120;
160+
transition: all 0.3s ease;
161+
overflow: hidden;
162+
position: absolute;
163+
transition: all 0.35s linear;
164+
}
165165

166166
.dropdown-menu a p {
167-
font-size: 0.8125em;
168-
color: rgb(199, 199, 199);
169-
line-height: 1.8;
170-
margin: 0;
171-
padding: 0;
167+
font-size: 0.8125em;
168+
color: rgb(199, 199, 199);
169+
line-height: 1.8;
170+
margin: 0;
171+
padding: 0;
172172
}
173173

174174
.show-menu {
175-
max-height: 60em;
175+
max-height: 60em;
176176
}
177177

178178
.menu {
179-
display: grid;
180-
grid-template-columns: repeat(4, 1fr);
181-
grid-template-rows: 1fr;
182-
padding: 1.4em 2.6em;
179+
display: grid;
180+
grid-template-columns: repeat(4, 1fr);
181+
grid-template-rows: 1fr;
182+
padding: 1.4em 2.6em;
183183
}
184184

185185
.menu div {
186-
display: flex;
187-
flex-flow: column nowrap;
188-
gap: 0.2em;
189-
margin: 0em 1em;
186+
display: flex;
187+
flex-flow: column nowrap;
188+
gap: 0.2em;
189+
margin: 0em 1em;
190190
}
191191

192192
.menu div h3 {
193-
padding-left: 0.2em;
193+
padding-left: 0.2em;
194194
}
195195

196196
.menu div a {
197-
align-self: start;
198-
padding: 0.8em;
199-
transition: 0.3s;
200-
width: 100%;
197+
align-self: start;
198+
padding: 0.8em;
199+
transition: 0.3s;
200+
width: 100%;
201201
}
202202

203203
.menu div a:hover {
204-
background-color: #424242;
205-
border-radius: 5px;
204+
background-color: #424242;
205+
border-radius: 5px;
206206
}
207207

208208
.external-link {
209-
height: 1em;
210-
width: 1em;
211-
margin-left: 0.625em;
209+
height: 1em;
210+
width: 1em;
211+
margin-left: 0.625em;
212212
}
213213

214214
.skip-link {
215-
clip: rect(1px, 1px, 1px, 1px);
216-
position: absolute !important;
217-
height: 1px;
218-
width: 1px;
219-
overflow: hidden;
215+
clip: rect(1px, 1px, 1px, 1px);
216+
position: absolute !important;
217+
height: 1px;
218+
width: 1px;
219+
overflow: hidden;
220220
}
221221

222222
.skip-link:focus {
223-
background-color: #f1f1f1;
224-
border-radius: 3px;
225-
clip: auto !important;
226-
color: #21759b;
227-
display: block;
228-
font-size: 0.875rem;
229-
font-weight: bold;
230-
height: auto;
231-
left: 0.3125em;
232-
line-height: normal;
233-
padding: 1em;
234-
text-decoration: none;
235-
top: 0.3125em;
236-
width: auto;
237-
z-index: 3000;
238-
}
223+
background-color: #f1f1f1;
224+
border-radius: 3px;
225+
clip: auto !important;
226+
color: #21759b;
227+
display: block;
228+
font-size: 0.875rem;
229+
font-weight: bold;
230+
height: auto;
231+
left: 0.3125em;
232+
line-height: normal;
233+
padding: 1em;
234+
text-decoration: none;
235+
top: 0.3125em;
236+
width: auto;
237+
z-index: 3000;
238+
}
239+
240+
@media screen and (max-width: 27em) {
241+
.logo h4 {
242+
font-size: 1em;
243+
}
244+
}

0 commit comments

Comments
 (0)