Skip to content

Commit b97d2fb

Browse files
hyeondo-janghyeondo-jang
committed
STYLE: revert to device-width viewport with proper responsive CSS and hamburger menu
1 parent 232a3f3 commit b97d2fb

File tree

6 files changed

+318
-60
lines changed

6 files changed

+318
-60
lines changed

‎contact.html‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=860">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="icon" href="logo/log_logo.png" type="image/png">
77
<title>Contact | Lee Optimization Group</title>
88
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -124,6 +124,55 @@
124124
nav.collapsed {
125125
display: none;
126126
}
127+
128+
@media (max-width: 640px) {
129+
.inner {
130+
padding: 28px 18px 40px;
131+
}
132+
133+
.lab-name {
134+
font-size: 1.7em;
135+
}
136+
137+
.menu-toggle {
138+
display: block;
139+
}
140+
141+
nav {
142+
display: none;
143+
flex-direction: column;
144+
align-items: flex-start;
145+
gap: 10px;
146+
padding-top: 12px;
147+
}
148+
149+
nav.open {
150+
display: flex;
151+
}
152+
153+
h2, h3 {
154+
font-size: 1.05em;
155+
}
156+
157+
.news-item {
158+
flex-direction: column;
159+
gap: 2px;
160+
}
161+
162+
.news-date {
163+
min-width: unset;
164+
}
165+
166+
.sponsor-logos, .collab-logos {
167+
width: 100%;
168+
}
169+
170+
footer {
171+
flex-direction: column;
172+
align-items: flex-start;
173+
gap: 12px;
174+
}
175+
}
127176
</style>
128177
</head>
129178
<body>
@@ -169,15 +218,9 @@ <h2>Contact</h2>
169218

170219
</div>
171220
<script>
172-
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
173-
var toggle = document.querySelector('.menu-toggle');
174-
var nav = document.querySelector('nav');
175-
toggle.style.display = 'block';
176-
nav.classList.add('collapsed');
177-
toggle.addEventListener('click', function() {
178-
nav.classList.toggle('collapsed');
179-
});
180-
}
221+
document.querySelector('.menu-toggle').addEventListener('click', function() {
222+
document.querySelector('nav').classList.toggle('open');
223+
});
181224
</script>
182225
</body>
183226
</html>

‎group.html‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=860">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="icon" href="logo/log_logo.png" type="image/png">
77
<title>Group | Lee Optimization Group</title>
88
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -221,6 +221,55 @@
221221
nav.collapsed {
222222
display: none;
223223
}
224+
225+
@media (max-width: 640px) {
226+
.inner {
227+
padding: 28px 18px 40px;
228+
}
229+
230+
.lab-name {
231+
font-size: 1.7em;
232+
}
233+
234+
.menu-toggle {
235+
display: block;
236+
}
237+
238+
nav {
239+
display: none;
240+
flex-direction: column;
241+
align-items: flex-start;
242+
gap: 10px;
243+
padding-top: 12px;
244+
}
245+
246+
nav.open {
247+
display: flex;
248+
}
249+
250+
h2, h3 {
251+
font-size: 1.05em;
252+
}
253+
254+
.news-item {
255+
flex-direction: column;
256+
gap: 2px;
257+
}
258+
259+
.news-date {
260+
min-width: unset;
261+
}
262+
263+
.sponsor-logos, .collab-logos {
264+
width: 100%;
265+
}
266+
267+
footer {
268+
flex-direction: column;
269+
align-items: flex-start;
270+
gap: 12px;
271+
}
272+
}
224273
</style>
225274
</head>
226275
<body>
@@ -379,15 +428,9 @@ <h3>Alumni</h3>
379428

380429
</div>
381430
<script>
382-
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
383-
var toggle = document.querySelector('.menu-toggle');
384-
var nav = document.querySelector('nav');
385-
toggle.style.display = 'block';
386-
nav.classList.add('collapsed');
387-
toggle.addEventListener('click', function() {
388-
nav.classList.toggle('collapsed');
389-
});
390-
}
431+
document.querySelector('.menu-toggle').addEventListener('click', function() {
432+
document.querySelector('nav').classList.toggle('open');
433+
});
391434
</script>
392435
</body>
393436
</html>

‎hiring.html‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=860">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="icon" href="logo/log_logo.png" type="image/png">
77
<title>Hiring | Lee Optimization Group</title>
88
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -162,6 +162,55 @@
162162
nav.collapsed {
163163
display: none;
164164
}
165+
166+
@media (max-width: 640px) {
167+
.inner {
168+
padding: 28px 18px 40px;
169+
}
170+
171+
.lab-name {
172+
font-size: 1.7em;
173+
}
174+
175+
.menu-toggle {
176+
display: block;
177+
}
178+
179+
nav {
180+
display: none;
181+
flex-direction: column;
182+
align-items: flex-start;
183+
gap: 10px;
184+
padding-top: 12px;
185+
}
186+
187+
nav.open {
188+
display: flex;
189+
}
190+
191+
h2, h3 {
192+
font-size: 1.05em;
193+
}
194+
195+
.news-item {
196+
flex-direction: column;
197+
gap: 2px;
198+
}
199+
200+
.news-date {
201+
min-width: unset;
202+
}
203+
204+
.sponsor-logos, .collab-logos {
205+
width: 100%;
206+
}
207+
208+
footer {
209+
flex-direction: column;
210+
align-items: flex-start;
211+
gap: 12px;
212+
}
213+
}
165214
</style>
166215
</head>
167216
<body>
@@ -256,15 +305,9 @@ <h2 class="red-title">All</h2>
256305

257306
</div>
258307
<script>
259-
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
260-
var toggle = document.querySelector('.menu-toggle');
261-
var nav = document.querySelector('nav');
262-
toggle.style.display = 'block';
263-
nav.classList.add('collapsed');
264-
toggle.addEventListener('click', function() {
265-
nav.classList.toggle('collapsed');
266-
});
267-
}
308+
document.querySelector('.menu-toggle').addEventListener('click', function() {
309+
document.querySelector('nav').classList.toggle('open');
310+
});
268311
</script>
269312
</body>
270313
</html>

‎index.html‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=860">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="icon" href="logo/log_logo.png" type="image/png">
77
<title>Lee Optimization Group</title>
88
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
@@ -198,6 +198,55 @@
198198
nav.collapsed {
199199
display: none;
200200
}
201+
202+
@media (max-width: 640px) {
203+
.inner {
204+
padding: 28px 18px 40px;
205+
}
206+
207+
.lab-name {
208+
font-size: 1.7em;
209+
}
210+
211+
.menu-toggle {
212+
display: block;
213+
}
214+
215+
nav {
216+
display: none;
217+
flex-direction: column;
218+
align-items: flex-start;
219+
gap: 10px;
220+
padding-top: 12px;
221+
}
222+
223+
nav.open {
224+
display: flex;
225+
}
226+
227+
h2, h3 {
228+
font-size: 1.05em;
229+
}
230+
231+
.news-item {
232+
flex-direction: column;
233+
gap: 2px;
234+
}
235+
236+
.news-date {
237+
min-width: unset;
238+
}
239+
240+
.sponsor-logos, .collab-logos {
241+
width: 100%;
242+
}
243+
244+
footer {
245+
flex-direction: column;
246+
align-items: flex-start;
247+
gap: 12px;
248+
}
249+
}
201250
</style>
202251
</head>
203252
<body>
@@ -309,15 +358,9 @@ <h3>Acknowledgements</h3>
309358

310359
</div>
311360
<script>
312-
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
313-
var toggle = document.querySelector('.menu-toggle');
314-
var nav = document.querySelector('nav');
315-
toggle.style.display = 'block';
316-
nav.classList.add('collapsed');
317-
toggle.addEventListener('click', function() {
318-
nav.classList.toggle('collapsed');
319-
});
320-
}
361+
document.querySelector('.menu-toggle').addEventListener('click', function() {
362+
document.querySelector('nav').classList.toggle('open');
363+
});
321364
</script>
322365
</body>
323366
</html>

0 commit comments

Comments
 (0)