Skip to content

Commit e2a3fc5

Browse files
hyeondo-janghyeondo-jang
committed
STYLE: unify typography and responsive wrapping across pages
1 parent 03e2603 commit e2a3fc5

7 files changed

Lines changed: 423 additions & 479 deletions

File tree

‎contact.html‎

Lines changed: 49 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
body {
1313
font-family: 'Inter', system-ui, sans-serif;
1414
color: #111;
15-
background: #FAF8F5;
15+
background: #ffffff;
1616
min-height: 100vh;
1717
}
1818

@@ -33,15 +33,15 @@
3333
border-bottom: 1px solid #e2e6f0;
3434
}
3535

36-
.lab-name, .lab-name:hover {
36+
.lab-name {
3737
font-family: 'EB Garamond', Georgia, serif;
38-
font-size: 2.3em;
38+
font-size: 2.8em;
3939
font-weight: 500;
4040
color: #111;
41-
letter-spacing: -0.01em;
42-
line-height: 1;
41+
letter-spacing: 0;
42+
line-height: 0.96;
4343
display: block;
44-
margin-bottom: 20px;
44+
margin-bottom: 18px;
4545
text-decoration: none;
4646
}
4747

@@ -58,33 +58,39 @@
5858
font-size: 1em;
5959
font-weight: 400;
6060
letter-spacing: 0.01em;
61-
transition: color 0.15s;
61+
padding-bottom: 2px;
62+
border-bottom: 1.5px dashed transparent;
63+
transition: color 0.15s, border-color 0.15s;
64+
}
65+
66+
nav a:hover {
67+
color: #1B3A8A;
68+
border-bottom: 1.5px solid #1B3A8A;
69+
text-decoration: none;
6270
}
6371

64-
nav a:hover { color: #1B3A8A; }
72+
nav a.active {
73+
color: #111;
74+
font-weight: 600;
75+
border-bottom: 1.5px solid #111;
76+
}
6577

66-
nav a.active { color: #111; font-weight: 600; }
6778
.nav-drawer a.active { color: #111; font-weight: 600; }
6879

69-
7080
a { color: #1B3A8A; text-decoration: none; }
7181
a:hover { text-decoration: underline; }
7282

73-
h2 {
74-
font-family: 'EB Garamond', Georgia, serif;
75-
font-size: 1.3em;
76-
font-weight: 500;
77-
letter-spacing: 0;
78-
color: #374151;
79-
margin-bottom: 20px;
80-
83+
.contact-title {
84+
color: #111;
85+
font-weight: 700;
86+
font-size: 1.12em;
87+
letter-spacing: 0.01em;
8188
}
8289

8390
p {
8491
font-size: 0.93em;
8592
line-height: 1.9;
8693
color: #374151;
87-
text-align: justify;
8894
margin-bottom: 0;
8995
}
9096

@@ -114,7 +120,7 @@
114120

115121
.menu-toggle {
116122
display: none;
117-
background: #FAF8F5;
123+
background: #ffffff;
118124
border: 1px solid #e2e6f0;
119125
border-radius: 6px;
120126
font-size: 1.3em;
@@ -123,21 +129,22 @@
123129
padding: 4px 8px;
124130
line-height: 1;
125131
}
126-
127-
128-
@media (max-width: 640px) {
132+
@media (max-width: 900px) {
129133
.inner {
130134
padding: 28px 18px 40px;
131135
}
132136

133137
header {
134138
padding-bottom: 4px;
135139
margin-bottom: 16px;
136-
display: flex;
137-
flex-direction: row;
138-
align-items: baseline;
139-
justify-content: space-between;
140-
flex-wrap: nowrap;
140+
display: grid;
141+
grid-template-columns: minmax(0, 1fr) auto;
142+
align-items: start;
143+
column-gap: 10px;
144+
}
145+
146+
.lab-name {
147+
min-width: 0;
141148
}
142149

143150
.menu-toggle {
@@ -146,43 +153,11 @@
146153

147154
nav {
148155
display: none;
149-
flex-direction: column;
150-
align-items: flex-start;
151-
gap: 10px;
152-
padding-top: 12px;
153-
}
154-
155-
nav.open {
156-
display: flex;
157-
}
158-
159-
h2, h3 {
160-
margin-bottom: 6px;
161-
margin-top: 24px;
162-
}
163-
164-
.news-item {
165-
flex-direction: column;
166-
gap: 2px;
167-
}
168-
169-
.news-date {
170-
min-width: unset;
171-
}
172-
173-
.sponsor-logos, .collab-logos {
174-
width: 100%;
175-
}
176-
177-
178-
p, .intro, .news-content, p.ack, .section-text {
179-
text-align: left;
180156
}
181157

182158
.footer-logos img {
183159
height: 18px;
184160
}
185-
186161
}
187162

188163
/* Drawer */
@@ -200,7 +175,7 @@
200175
right: -280px;
201176
width: 240px;
202177
height: 100vh;
203-
background: #FAF8F5;
178+
background: #ffffff;
204179
box-shadow: -4px 0 24px rgba(0,0,0,0.12);
205180
z-index: 1000;
206181
transition: right 0.3s ease;
@@ -244,6 +219,7 @@
244219
</head>
245220
<body>
246221

222+
<div class="top-rule"></div>
247223

248224
<div class="inner">
249225

@@ -261,9 +237,8 @@
261237
</header>
262238

263239
<main>
264-
<h2>Contact</h2>
265240
<p>
266-
<strong>Computational Optimization Lab</strong><br>
241+
<strong class="contact-title">Computational Optimization Lab</strong><br>
267242
<br>
268243
(Office) RIST 4, Room #4427<br>
269244
<br>
@@ -286,18 +261,16 @@ <h2>Contact</h2>
286261

287262
</div>
288263

289-
290-
291-
<div class="nav-overlay" id="navOverlay"></div>
292-
<div class="nav-drawer" id="navDrawer">
293-
<button class="drawer-close" id="drawerClose">&#x2715;</button>
294-
<a href="index.html">Home</a>
295-
<a href="research.html">Research</a>
296-
<a href="publications.html">Publications</a>
297-
<a href="group.html">Members</a>
298-
<a href="hiring.html">Hiring</a>
299-
<a href="contact.html" class="active">Contact</a>
300-
</div>
264+
<div class="nav-overlay" id="navOverlay"></div>
265+
<div class="nav-drawer" id="navDrawer">
266+
<button class="drawer-close" id="drawerClose">&#x2715;</button>
267+
<a href="index.html">Home</a>
268+
<a href="research.html">Research</a>
269+
<a href="publications.html">Publications</a>
270+
<a href="group.html">Members</a>
271+
<a href="hiring.html">Hiring</a>
272+
<a href="contact.html" class="active">Contact</a>
273+
</div>
301274

302275
<script>
303276
var toggle = document.querySelector('.menu-toggle');
@@ -309,6 +282,7 @@ <h2>Contact</h2>
309282
drawer.classList.add('open');
310283
overlay.classList.add('open');
311284
}
285+
312286
function closeDrawer() {
313287
drawer.classList.remove('open');
314288
overlay.classList.remove('open');

‎gallery.html‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
body {
1313
font-family: 'Inter', system-ui, sans-serif;
1414
color: #111;
15-
background: #FAF8F5;
15+
background: #ffffff;
1616
min-height: 100vh;
1717
}
1818

@@ -33,20 +33,21 @@
3333
border-bottom: 1px solid #e2e6f0;
3434
}
3535

36-
.lab-name, .lab-name:hover {
36+
.lab-name {
3737
font-family: 'EB Garamond', Georgia, serif;
38-
font-size: 2.3em;
38+
font-size: 2.8em;
3939
font-weight: 500;
4040
color: #111;
41-
letter-spacing: -0.01em;
42-
line-height: 1;
41+
letter-spacing: 0;
42+
line-height: 0.96;
4343
display: block;
44-
margin-bottom: 20px;
44+
margin-bottom: 18px;
4545
text-decoration: none;
4646
}
4747

4848
nav {
4949
display: flex;
50+
flex-wrap: wrap;
5051
align-items: center;
5152
gap: clamp(10px, 3vw, 24px);
5253
}
@@ -57,20 +58,33 @@
5758
font-size: 1em;
5859
font-weight: 400;
5960
letter-spacing: 0.01em;
60-
transition: color 0.15s;
61+
padding-bottom: 2px;
62+
border-bottom: 1.5px dashed transparent;
63+
transition: color 0.15s, border-color 0.15s;
6164
}
6265

63-
nav a:hover { color: #1B3A8A; }
66+
nav a:hover {
67+
color: #1B3A8A;
68+
border-bottom: 1.5px solid #1B3A8A;
69+
text-decoration: none;
70+
}
71+
72+
nav a.active {
73+
color: #111;
74+
font-weight: 600;
75+
border-bottom: 1.5px solid #111;
76+
}
6477

6578
a { color: #1B3A8A; text-decoration: none; }
6679
a:hover { text-decoration: underline; }
6780

6881
h2 {
69-
font-family: 'EB Garamond', Georgia, serif;
70-
font-size: 1.3em;
71-
font-weight: 500;
72-
letter-spacing: 0;
73-
color: #374151;
82+
font-family: 'Inter', system-ui, sans-serif;
83+
font-size: 1.12em;
84+
font-weight: 700;
85+
letter-spacing: 0.01em;
86+
text-transform: none;
87+
color: #111;
7488
margin-bottom: 12px;
7589
}
7690

@@ -91,7 +105,8 @@
91105
.gallery-item {
92106
position: relative;
93107
overflow: hidden;
94-
border: 1px solid #d1d5db;
108+
border: 1.5px solid #b8bec8;
109+
border-radius: 6px;
95110
aspect-ratio: 1;
96111
}
97112

0 commit comments

Comments
 (0)