Skip to content

Commit 99bcfe5

Browse files
hyeondo-janghyeondo-jang
committed
STYLE: hamburger right side, highlight active nav tab
1 parent 9c90c03 commit 99bcfe5

6 files changed

Lines changed: 48 additions & 24 deletions

File tree

‎contact.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363

6464
nav a:hover { color: #1B3A8A; }
6565

66+
nav a.active { color: #1B3A8A; font-weight: 500; }
67+
.nav-drawer a.active { color: #1B3A8A; font-weight: 500; }
68+
69+
6670
a { color: #1B3A8A; text-decoration: none; }
6771
a:hover { text-decoration: underline; }
6872

@@ -136,7 +140,7 @@
136140
display: flex;
137141
flex-direction: row;
138142
align-items: center;
139-
gap: 12px;
143+
justify-content: space-between;
140144
flex-wrap: nowrap;
141145
}
142146

@@ -251,15 +255,15 @@
251255
<div class="inner">
252256

253257
<header>
254-
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
255258
<a href="index.html" class="lab-name">Lee Optimization Group</a>
259+
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
256260
<nav>
257261
<a href="index.html">Home</a>
258262
<a href="research.html">Research</a>
259263
<a href="publications.html">Publications</a>
260264
<a href="group.html">Members</a>
261265
<a href="hiring.html">Hiring</a>
262-
<a href="contact.html">Contact</a>
266+
<a href="contact.html" class="active">Contact</a>
263267
</nav>
264268
</header>
265269

@@ -299,7 +303,7 @@ <h2>Contact</h2>
299303
<a href="publications.html">Publications</a>
300304
<a href="group.html">Members</a>
301305
<a href="hiring.html">Hiring</a>
302-
<a href="contact.html">Contact</a>
306+
<a href="contact.html" class="active">Contact</a>
303307
</div>
304308

305309
<script>

‎group.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363

6464
nav a:hover { color: #1B3A8A; }
6565

66+
nav a.active { color: #1B3A8A; font-weight: 500; }
67+
.nav-drawer a.active { color: #1B3A8A; font-weight: 500; }
68+
69+
6670
a { color: #1B3A8A; text-decoration: none; }
6771
a:hover { text-decoration: underline; }
6872

@@ -233,7 +237,7 @@
233237
display: flex;
234238
flex-direction: row;
235239
align-items: center;
236-
gap: 12px;
240+
justify-content: space-between;
237241
flex-wrap: nowrap;
238242
}
239243

@@ -348,13 +352,13 @@
348352
<div class="inner">
349353

350354
<header>
351-
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
352355
<a href="index.html" class="lab-name">Lee Optimization Group</a>
356+
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
353357
<nav>
354358
<a href="index.html">Home</a>
355359
<a href="research.html">Research</a>
356360
<a href="publications.html">Publications</a>
357-
<a href="group.html">Members</a>
361+
<a href="group.html" class="active">Members</a>
358362
<a href="hiring.html">Hiring</a>
359363
<a href="contact.html">Contact</a>
360364
</nav>
@@ -507,7 +511,7 @@ <h3>Alumni</h3>
507511
<a href="index.html">Home</a>
508512
<a href="research.html">Research</a>
509513
<a href="publications.html">Publications</a>
510-
<a href="group.html">Members</a>
514+
<a href="group.html" class="active">Members</a>
511515
<a href="hiring.html">Hiring</a>
512516
<a href="contact.html">Contact</a>
513517
</div>

‎hiring.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363

6464
nav a:hover { color: #1B3A8A; }
6565

66+
nav a.active { color: #1B3A8A; font-weight: 500; }
67+
.nav-drawer a.active { color: #1B3A8A; font-weight: 500; }
68+
69+
6670
a { color: #1B3A8A; text-decoration: none; }
6771
a:hover { text-decoration: underline; }
6872

@@ -174,7 +178,7 @@
174178
display: flex;
175179
flex-direction: row;
176180
align-items: center;
177-
gap: 12px;
181+
justify-content: space-between;
178182
flex-wrap: nowrap;
179183
}
180184

@@ -289,14 +293,14 @@
289293
<div class="inner">
290294

291295
<header>
292-
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
293296
<a href="index.html" class="lab-name">Lee Optimization Group</a>
297+
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
294298
<nav>
295299
<a href="index.html">Home</a>
296300
<a href="research.html">Research</a>
297301
<a href="publications.html">Publications</a>
298302
<a href="group.html">Members</a>
299-
<a href="hiring.html">Hiring</a>
303+
<a href="hiring.html" class="active">Hiring</a>
300304
<a href="contact.html">Contact</a>
301305
</nav>
302306
</header>
@@ -385,7 +389,7 @@ <h2 class="red-title">All</h2>
385389
<a href="research.html">Research</a>
386390
<a href="publications.html">Publications</a>
387391
<a href="group.html">Members</a>
388-
<a href="hiring.html">Hiring</a>
392+
<a href="hiring.html" class="active">Hiring</a>
389393
<a href="contact.html">Contact</a>
390394
</div>
391395

‎index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262

6363
nav a:hover { color: #1B3A8A; }
6464

65+
nav a.active { color: #1B3A8A; font-weight: 500; }
66+
.nav-drawer a.active { color: #1B3A8A; font-weight: 500; }
67+
68+
6569
main img.lab-photo {
6670
width: 100%;
6771
height: auto;
@@ -210,7 +214,7 @@
210214
display: flex;
211215
flex-direction: row;
212216
align-items: center;
213-
gap: 12px;
217+
justify-content: space-between;
214218
flex-wrap: nowrap;
215219
}
216220

@@ -336,10 +340,10 @@
336340
<div class="inner">
337341

338342
<header>
339-
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
340343
<span class="lab-name">Lee Optimization Group</span>
344+
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
341345
<nav>
342-
<a href="index.html">Home</a>
346+
<a href="index.html" class="active">Home</a>
343347
<a href="research.html">Research</a>
344348
<a href="publications.html">Publications</a>
345349
<a href="group.html">Members</a>
@@ -445,7 +449,7 @@ <h3>Acknowledgements</h3>
445449
<div class="nav-overlay" id="navOverlay"></div>
446450
<div class="nav-drawer" id="navDrawer">
447451
<button class="drawer-close" id="drawerClose">&#x2715;</button>
448-
<a href="index.html">Home</a>
452+
<a href="index.html" class="active">Home</a>
449453
<a href="research.html">Research</a>
450454
<a href="publications.html">Publications</a>
451455
<a href="group.html">Members</a>

‎publications.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363

6464
nav a:hover { color: #1B3A8A; }
6565

66+
nav a.active { color: #1B3A8A; font-weight: 500; }
67+
.nav-drawer a.active { color: #1B3A8A; font-weight: 500; }
68+
69+
6670
a { color: #1B3A8A; text-decoration: none; }
6771
a:hover { text-decoration: underline; }
6872

@@ -178,7 +182,7 @@
178182
display: flex;
179183
flex-direction: row;
180184
align-items: center;
181-
gap: 12px;
185+
justify-content: space-between;
182186
flex-wrap: nowrap;
183187
}
184188

@@ -293,12 +297,12 @@
293297
<div class="inner">
294298

295299
<header>
296-
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
297300
<a href="index.html" class="lab-name">Lee Optimization Group</a>
301+
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
298302
<nav>
299303
<a href="index.html">Home</a>
300304
<a href="research.html">Research</a>
301-
<a href="publications.html">Publications</a>
305+
<a href="publications.html" class="active">Publications</a>
302306
<a href="group.html">Members</a>
303307
<a href="hiring.html">Hiring</a>
304308
<a href="contact.html">Contact</a>
@@ -560,7 +564,7 @@ <h2>Publications</h2>
560564
<button class="drawer-close" id="drawerClose">&#x2715;</button>
561565
<a href="index.html">Home</a>
562566
<a href="research.html">Research</a>
563-
<a href="publications.html">Publications</a>
567+
<a href="publications.html" class="active">Publications</a>
564568
<a href="group.html">Members</a>
565569
<a href="hiring.html">Hiring</a>
566570
<a href="contact.html">Contact</a>

‎research.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363

6464
nav a:hover { color: #1B3A8A; }
6565

66+
nav a.active { color: #1B3A8A; font-weight: 500; }
67+
.nav-drawer a.active { color: #1B3A8A; font-weight: 500; }
68+
69+
6670
a { color: #1B3A8A; text-decoration: none; }
6771
a:hover { text-decoration: underline; }
6872

@@ -180,7 +184,7 @@
180184
display: flex;
181185
flex-direction: row;
182186
align-items: center;
183-
gap: 12px;
187+
justify-content: space-between;
184188
flex-wrap: nowrap;
185189
}
186190

@@ -295,11 +299,11 @@
295299
<div class="inner">
296300

297301
<header>
298-
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
299302
<a href="index.html" class="lab-name">Lee Optimization Group</a>
303+
<button class="menu-toggle" aria-label="Menu">&#9776;</button>
300304
<nav>
301305
<a href="index.html">Home</a>
302-
<a href="research.html">Research</a>
306+
<a href="research.html" class="active">Research</a>
303307
<a href="publications.html">Publications</a>
304308
<a href="group.html">Members</a>
305309
<a href="hiring.html">Hiring</a>
@@ -388,7 +392,7 @@ <h2>Collaborators</h2>
388392
<div class="nav-drawer" id="navDrawer">
389393
<button class="drawer-close" id="drawerClose">&#x2715;</button>
390394
<a href="index.html">Home</a>
391-
<a href="research.html">Research</a>
395+
<a href="research.html" class="active">Research</a>
392396
<a href="publications.html">Publications</a>
393397
<a href="group.html">Members</a>
394398
<a href="hiring.html">Hiring</a>

0 commit comments

Comments
 (0)