Skip to content

Commit c329a4c

Browse files
hyeondo-janghyeondo-jang
committed
STYLE: redesign all pages with new visual identity
- Apply consistent EB Garamond + Inter typography across all pages - Warm cream background (#FAF8F5), blue gradient top rule - Responsive clamp() sizing for lab name, nav, and inner padding - Darken footer and secondary text from #9ca3af to #6b7280 - Gallery: full redesign matching other pages (fonts, layout, nav, heading)
1 parent 80e6775 commit c329a4c

7 files changed

Lines changed: 100 additions & 61 deletions

File tree

‎contact.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
align-items: center;
9797
justify-content: space-between;
9898
font-size: 0.75em;
99-
color: #9ca3af;
99+
color: #6b7280;
100100
}
101101

102102
.footer-logos {

‎gallery.html‎

Lines changed: 92 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,83 @@
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>Gallery | Lee Optimization Group</title>
8-
8+
<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">
99
<style>
10+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
11+
1012
body {
11-
font-family: system-ui, -apple-system, sans-serif;
12-
line-height: 1.6;
13-
margin: 0;
14-
padding: 20px;
15-
color: #333;
13+
font-family: 'Inter', system-ui, sans-serif;
14+
color: #111;
15+
background: #FAF8F5;
16+
min-height: 100vh;
17+
}
18+
19+
.top-rule {
20+
height: 3px;
21+
background: linear-gradient(90deg, #1B3A8A 0%, #3B6FD4 60%, #93A8D8 100%);
22+
}
23+
24+
.inner {
1625
max-width: 800px;
17-
margin-left: auto;
18-
margin-right: auto;
26+
margin: 0 auto;
27+
padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px) clamp(36px, 5vw, 60px);
1928
}
2029

2130
header {
22-
border-bottom: 1px solid #eee;
23-
padding-bottom: 20px;
24-
margin-bottom: 20px;
31+
padding-bottom: 28px;
32+
margin-bottom: 40px;
33+
border-bottom: 1px solid #e2e6f0;
2534
}
2635

27-
nav a {
28-
margin-right: 15px;
36+
.lab-name, .lab-name:hover {
37+
font-family: 'EB Garamond', Georgia, serif;
38+
font-size: clamp(1.7em, 5vw, 2.6em);
39+
font-weight: 500;
40+
color: #111;
41+
letter-spacing: -0.01em;
42+
line-height: 1;
43+
display: block;
44+
margin-bottom: 20px;
2945
text-decoration: none;
30-
color: #007bff;
3146
}
3247

33-
nav a:hover {
34-
text-decoration: underline;
35-
}
36-
37-
footer {
38-
margin-top: 40px;
39-
font-size: 0.9em;
40-
color: #777;
41-
border-top: 1px solid #eee;
42-
padding-top: 20px;
48+
nav {
4349
display: flex;
4450
align-items: center;
45-
justify-content: space-between;
51+
gap: clamp(10px, 3vw, 24px);
4652
}
4753

48-
.footer-logos {
49-
display: flex;
50-
align-items: center;
51-
gap: 12px;
54+
nav a {
55+
text-decoration: none;
56+
color: #6b7280;
57+
font-size: 1em;
58+
font-weight: 400;
59+
letter-spacing: 0.01em;
60+
transition: color 0.15s;
5261
}
5362

54-
.footer-logos img {
55-
height: 36px;
56-
width: auto;
57-
object-fit: contain;
63+
nav a:hover { color: #1B3A8A; }
64+
65+
a { color: #1B3A8A; text-decoration: none; }
66+
a:hover { text-decoration: underline; }
67+
68+
h2 {
69+
font-family: 'EB Garamond', Georgia, serif;
70+
font-size: 1.3em;
71+
font-weight: 500;
72+
letter-spacing: 0;
73+
color: #374151;
74+
margin-bottom: 12px;
5875
}
5976

60-
a {
61-
text-decoration: none;
62-
color: #007bff;
77+
p {
78+
font-size: 0.9em;
79+
line-height: 1.75;
80+
color: #374151;
81+
margin-bottom: 20px;
6382
}
6483

6584
/* Gallery grid */
@@ -72,7 +91,7 @@
7291
.gallery-item {
7392
position: relative;
7493
overflow: hidden;
75-
border: 1px solid #333;
94+
border: 1px solid #d1d5db;
7695
aspect-ratio: 1;
7796
}
7897

@@ -90,9 +109,7 @@
90109
transition: opacity 0.2s;
91110
}
92111

93-
.gallery-item:hover img {
94-
opacity: 0.85;
95-
}
112+
.gallery-item:hover img { opacity: 0.85; }
96113

97114
.gallery-item .tooltip {
98115
position: absolute;
@@ -109,31 +126,52 @@
109126
pointer-events: none;
110127
}
111128

112-
.gallery-item:hover .tooltip {
113-
opacity: 1;
129+
.gallery-item:hover .tooltip { opacity: 1; }
130+
131+
footer {
132+
margin-top: 52px;
133+
padding-top: 20px;
134+
border-top: 1px solid #e2e6f0;
135+
display: flex;
136+
align-items: center;
137+
justify-content: space-between;
138+
font-size: 0.75em;
139+
color: #6b7280;
140+
}
141+
142+
.footer-logos {
143+
display: flex;
144+
align-items: center;
145+
gap: 14px;
146+
}
147+
148+
.footer-logos img {
149+
height: 28px;
150+
width: auto;
151+
object-fit: contain;
152+
opacity: 0.7;
114153
}
115154
</style>
116155
</head>
117-
118156
<body>
119157

158+
<div class="top-rule"></div>
159+
<div class="inner">
160+
120161
<header>
121-
<h1>Lee Optimization Group</h1>
162+
<a href="index.html" class="lab-name">Lee Optimization Group</a>
122163
<nav>
123164
<a href="index.html">Home</a>
124165
<a href="research.html">Research</a>
125166
<a href="publications.html">Publications</a>
126167
<a href="group.html">Members</a>
127168
<a href="hiring.html">Hiring</a>
128-
<!-- <a href="gallery.html">Gallery</a> -->
129169
<a href="contact.html">Contact</a>
130170
</nav>
131171
</header>
132172

133173
<main>
134-
135174
<h2>Gallery</h2>
136-
<p style="margin-bottom: 16px;">We also spend time together on various occasions.</p>
137175

138176
<div class="gallery-grid">
139177

@@ -241,7 +279,7 @@ <h2>Gallery</h2>
241279
<span class="tooltip">LOG e-sports</span>
242280
</a>
243281
</div>
244-
282+
245283
<div class="gallery-item">
246284
<a href="stories/24_logesports.jpg" target="_blank">
247285
<img src="stories/24_logesports.jpg" alt="LOG e-sports">
@@ -300,8 +338,8 @@ <h2>Gallery</h2>
300338

301339
<div class="gallery-item">
302340
<a href="stories/23_icml3.jpeg" target="_blank">
303-
<img src="stories/23_icml3.jpeg" alt="Makapu’u Lookout, Hawaii">
304-
<span class="tooltip">Makapu’u Lookout, Hawaii</span>
341+
<img src="stories/23_icml3.jpeg" alt="Makapu'u Lookout, Hawaii">
342+
<span class="tooltip">Makapu'u Lookout, Hawaii</span>
305343
</a>
306344
</div>
307345

@@ -346,12 +384,12 @@ <h2>Gallery</h2>
346384
<span class="tooltip">No Screen Day</span>
347385
</a>
348386
</div>
349-
</div>
350387

388+
</div>
351389
</main>
352390

353391
<footer>
354-
<p>&copy; 2026 LOG. All rights reserved.</p>
392+
<span>&copy; 2026 LOG. All rights reserved.</span>
355393
<div class="footer-logos">
356394
<a href="https://www.postech.ac.kr" target="_blank"><img src="logo/postech_logo.png" alt="POSTECH"></a>
357395
<a href="https://ai.postech.ac.kr" target="_blank"><img src="logo/gsai_logo.png" alt="GSAI"></a>
@@ -360,5 +398,6 @@ <h2>Gallery</h2>
360398
</div>
361399
</footer>
362400

401+
</div>
363402
</body>
364403
</html>

‎group.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129

130130
.member-item .member-position {
131131
font-size: 0.72rem;
132-
color: #9ca3af;
132+
color: #6b7280;
133133
margin-top: 2px;
134134
}
135135

@@ -193,7 +193,7 @@
193193
align-items: center;
194194
justify-content: space-between;
195195
font-size: 0.75em;
196-
color: #9ca3af;
196+
color: #6b7280;
197197
}
198198

199199
.footer-logos {

‎hiring.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
align-items: center;
135135
justify-content: space-between;
136136
font-size: 0.75em;
137-
color: #9ca3af;
137+
color: #6b7280;
138138
}
139139

140140
.footer-logos {

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
.news-date {
110110
font-size: 0.8em;
111111
font-weight: 400;
112-
color: #9ca3af;
112+
color: #6b7280;
113113
min-width: 64px;
114114
flex-shrink: 0;
115115
}
@@ -170,7 +170,7 @@
170170
align-items: center;
171171
justify-content: space-between;
172172
font-size: 0.75em;
173-
color: #9ca3af;
173+
color: #6b7280;
174174
}
175175

176176
.footer-logos {

‎publications.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
align-items: center;
139139
justify-content: space-between;
140140
font-size: 0.75em;
141-
color: #9ca3af;
141+
color: #6b7280;
142142
}
143143

144144
.footer-logos {

‎research.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
align-items: center;
119119
justify-content: space-between;
120120
font-size: 0.75em;
121-
color: #9ca3af;
121+
color: #6b7280;
122122
}
123123

124124
.footer-logos {

0 commit comments

Comments
 (0)