Skip to content

Commit 43f3117

Browse files
hyeondo-janghyeondo-jang
committed
STYLE: replace media queries with fluid CSS using clamp()
1 parent 6d008de commit 43f3117

File tree

6 files changed

+24
-324
lines changed

6 files changed

+24
-324
lines changed

‎contact.html‎

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
.inner {
2525
max-width: 800px;
2626
margin: 0 auto;
27-
padding: 48px 32px 60px;
27+
padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px) clamp(36px, 5vw, 60px);
2828
}
2929

3030
header {
@@ -35,7 +35,7 @@
3535

3636
.lab-name, .lab-name:hover {
3737
font-family: 'EB Garamond', Georgia, serif;
38-
font-size: 2.3em;
38+
font-size: clamp(1.5em, 5vw, 2.3em);
3939
font-weight: 500;
4040
color: #111;
4141
letter-spacing: -0.01em;
@@ -47,6 +47,7 @@
4747

4848
nav {
4949
display: flex;
50+
flex-wrap: wrap;
5051
align-items: center;
5152
gap: 24px;
5253
}
@@ -88,6 +89,7 @@
8889
padding-top: 20px;
8990
border-top: 1px solid #e2e6f0;
9091
display: flex;
92+
flex-wrap: wrap;
9193
align-items: center;
9294
justify-content: space-between;
9395
font-size: 0.75em;
@@ -106,58 +108,6 @@
106108
object-fit: contain;
107109
opacity: 1;
108110
}
109-
110-
@media (max-width: 600px) {
111-
.inner {
112-
padding: 28px 18px 40px;
113-
}
114-
115-
.lab-name {
116-
font-size: 1.6em;
117-
}
118-
119-
nav {
120-
flex-wrap: wrap;
121-
gap: 10px 16px;
122-
}
123-
124-
nav a {
125-
font-size: 0.9em;
126-
}
127-
128-
h2, h3 {
129-
font-size: 1.05em;
130-
}
131-
132-
.news-item {
133-
flex-direction: column;
134-
gap: 2px;
135-
}
136-
137-
.news-date {
138-
min-width: unset;
139-
}
140-
141-
.sponsor-logos {
142-
width: 100%;
143-
justify-content: center;
144-
}
145-
146-
.collab-logos {
147-
width: 100%;
148-
justify-content: center;
149-
}
150-
151-
footer {
152-
flex-direction: column;
153-
align-items: flex-start;
154-
gap: 12px;
155-
}
156-
157-
.footer-logos img {
158-
height: 22px;
159-
}
160-
}
161111
</style>
162112
</head>
163113
<body>

‎group.html‎

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
.inner {
2525
max-width: 800px;
2626
margin: 0 auto;
27-
padding: 48px 32px 60px;
27+
padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px) clamp(36px, 5vw, 60px);
2828
}
2929

3030
header {
@@ -35,7 +35,7 @@
3535

3636
.lab-name, .lab-name:hover {
3737
font-family: 'EB Garamond', Georgia, serif;
38-
font-size: 2.3em;
38+
font-size: clamp(1.5em, 5vw, 2.3em);
3939
font-weight: 500;
4040
color: #111;
4141
letter-spacing: -0.01em;
@@ -47,6 +47,7 @@
4747

4848
nav {
4949
display: flex;
50+
flex-wrap: wrap;
5051
align-items: center;
5152
gap: 24px;
5253
}
@@ -185,6 +186,7 @@
185186
padding-top: 20px;
186187
border-top: 1px solid #e2e6f0;
187188
display: flex;
189+
flex-wrap: wrap;
188190
align-items: center;
189191
justify-content: space-between;
190192
font-size: 0.75em;
@@ -203,58 +205,6 @@
203205
object-fit: contain;
204206
opacity: 1;
205207
}
206-
207-
@media (max-width: 600px) {
208-
.inner {
209-
padding: 28px 18px 40px;
210-
}
211-
212-
.lab-name {
213-
font-size: 1.6em;
214-
}
215-
216-
nav {
217-
flex-wrap: wrap;
218-
gap: 10px 16px;
219-
}
220-
221-
nav a {
222-
font-size: 0.9em;
223-
}
224-
225-
h2, h3 {
226-
font-size: 1.05em;
227-
}
228-
229-
.news-item {
230-
flex-direction: column;
231-
gap: 2px;
232-
}
233-
234-
.news-date {
235-
min-width: unset;
236-
}
237-
238-
.sponsor-logos {
239-
width: 100%;
240-
justify-content: center;
241-
}
242-
243-
.collab-logos {
244-
width: 100%;
245-
justify-content: center;
246-
}
247-
248-
footer {
249-
flex-direction: column;
250-
align-items: flex-start;
251-
gap: 12px;
252-
}
253-
254-
.footer-logos img {
255-
height: 22px;
256-
}
257-
}
258208
</style>
259209
</head>
260210
<body>

‎hiring.html‎

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
.inner {
2525
max-width: 800px;
2626
margin: 0 auto;
27-
padding: 48px 32px 60px;
27+
padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px) clamp(36px, 5vw, 60px);
2828
}
2929

3030
header {
@@ -35,7 +35,7 @@
3535

3636
.lab-name, .lab-name:hover {
3737
font-family: 'EB Garamond', Georgia, serif;
38-
font-size: 2.3em;
38+
font-size: clamp(1.5em, 5vw, 2.3em);
3939
font-weight: 500;
4040
color: #111;
4141
letter-spacing: -0.01em;
@@ -47,6 +47,7 @@
4747

4848
nav {
4949
display: flex;
50+
flex-wrap: wrap;
5051
align-items: center;
5152
gap: 24px;
5253
}
@@ -126,6 +127,7 @@
126127
padding-top: 20px;
127128
border-top: 1px solid #e2e6f0;
128129
display: flex;
130+
flex-wrap: wrap;
129131
align-items: center;
130132
justify-content: space-between;
131133
font-size: 0.75em;
@@ -144,58 +146,6 @@
144146
object-fit: contain;
145147
opacity: 1;
146148
}
147-
148-
@media (max-width: 600px) {
149-
.inner {
150-
padding: 28px 18px 40px;
151-
}
152-
153-
.lab-name {
154-
font-size: 1.6em;
155-
}
156-
157-
nav {
158-
flex-wrap: wrap;
159-
gap: 10px 16px;
160-
}
161-
162-
nav a {
163-
font-size: 0.9em;
164-
}
165-
166-
h2, h3 {
167-
font-size: 1.05em;
168-
}
169-
170-
.news-item {
171-
flex-direction: column;
172-
gap: 2px;
173-
}
174-
175-
.news-date {
176-
min-width: unset;
177-
}
178-
179-
.sponsor-logos {
180-
width: 100%;
181-
justify-content: center;
182-
}
183-
184-
.collab-logos {
185-
width: 100%;
186-
justify-content: center;
187-
}
188-
189-
footer {
190-
flex-direction: column;
191-
align-items: flex-start;
192-
gap: 12px;
193-
}
194-
195-
.footer-logos img {
196-
height: 22px;
197-
}
198-
}
199149
</style>
200150
</head>
201151
<body>

‎index.html‎

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
.inner {
2525
max-width: 800px;
2626
margin: 0 auto;
27-
padding: 48px 32px 60px;
27+
padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px) clamp(36px, 5vw, 60px);
2828
}
2929

3030
header {
@@ -35,7 +35,7 @@
3535

3636
.lab-name {
3737
font-family: 'EB Garamond', Georgia, serif;
38-
font-size: 2.3em;
38+
font-size: clamp(1.5em, 5vw, 2.3em);
3939
font-weight: 500;
4040
color: #111;
4141
letter-spacing: -0.01em;
@@ -46,6 +46,7 @@
4646

4747
nav {
4848
display: flex;
49+
flex-wrap: wrap;
4950
align-items: center;
5051
gap: 24px;
5152
}
@@ -162,6 +163,7 @@
162163
padding-top: 20px;
163164
border-top: 1px solid #e2e6f0;
164165
display: flex;
166+
flex-wrap: wrap;
165167
align-items: center;
166168
justify-content: space-between;
167169
font-size: 0.75em;
@@ -180,58 +182,6 @@
180182
object-fit: contain;
181183
opacity: 1;
182184
}
183-
184-
@media (max-width: 600px) {
185-
.inner {
186-
padding: 28px 18px 40px;
187-
}
188-
189-
.lab-name {
190-
font-size: 1.6em;
191-
}
192-
193-
nav {
194-
flex-wrap: wrap;
195-
gap: 10px 16px;
196-
}
197-
198-
nav a {
199-
font-size: 0.9em;
200-
}
201-
202-
h2, h3 {
203-
font-size: 1.05em;
204-
}
205-
206-
.news-item {
207-
flex-direction: column;
208-
gap: 2px;
209-
}
210-
211-
.news-date {
212-
min-width: unset;
213-
}
214-
215-
.sponsor-logos {
216-
width: 100%;
217-
justify-content: center;
218-
}
219-
220-
.collab-logos {
221-
width: 100%;
222-
justify-content: center;
223-
}
224-
225-
footer {
226-
flex-direction: column;
227-
align-items: flex-start;
228-
gap: 12px;
229-
}
230-
231-
.footer-logos img {
232-
height: 22px;
233-
}
234-
}
235185
</style>
236186
</head>
237187
<body>

0 commit comments

Comments
 (0)