outsourcing
/
bodalab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 일부 디자인 수정

This commit is contained in:
이희원 2026-06-28 18:38:01 +09:00
parent 9b197626ab
commit aa396739bc
3 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

@ -278,6 +278,7 @@
<!-- 04. VISION --> <!-- 04. VISION -->
<section id="vision" class="vision"> <section id="vision" class="vision">
<div class="vision__bg" aria-hidden="true"></div>
<div class="vision__inner"> <div class="vision__inner">
<div class="vision__head"> <div class="vision__head">
<h2 class="sectionTitle">VISION</h2> <h2 class="sectionTitle">VISION</h2>

27
src/scss/page/_about.scss
View File

@ -136,8 +136,18 @@
.history__yearGroup { .history__yearGroup {
border-top: 1px solid #000; border-top: 1px solid #000;
&:last-child { &.isOpen {
border-bottom: 1px solid #000; .history__yearToggle {
.icon::after {
opacity: 0;
}
}
}
&:has(.history__list:empty) {
.icon {
display: none;
}
} }
} }
@ -192,10 +202,6 @@
} }
} }
.history__yearGroup.isOpen .history__yearToggle .icon::after {
opacity: 0;
}
.history__year { .history__year {
font-size: clamp(24px, 2vw, 32px); font-size: clamp(24px, 2vw, 32px);
font-weight: 500; font-weight: 500;
@ -204,7 +210,6 @@
} }
.history__list { .history__list {
margin-top: -14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
@ -222,6 +227,14 @@
justify-content: space-between; justify-content: space-between;
gap: 24px; gap: 24px;
&:first-child {
margin-top: -14px;
}
&:last-child {
margin-bottom: 30px;
}
.main { .main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

41
src/scss/page/_vision.scss
View File

@ -2,14 +2,29 @@
// Vision // Vision
.vision { .vision {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background: #0d0d0d; background: #0d0d0d;
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px); padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
overflow: hidden;
}
.vision__bg {
position: absolute;
inset: 0;
background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
pointer-events: none;
} }
.vision__inner { .vision__inner {
position: relative;
z-index: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: clamp(60px, 8vw, 140px); gap: clamp(80px, 6.25vw, 120px);
} }
.vision__head { .vision__head {
@ -24,31 +39,31 @@
.vision__desc { .vision__desc {
max-width: 560px; max-width: 560px;
font-size: clamp(13px, 1.1vw, 16px); font-size: clamp(13px, 0.73vw, 14px);
font-weight: 300; font-weight: 300;
line-height: 1.8; line-height: 1.8;
color: #ffffff; color: #ffffff;
opacity: 0.9;
} }
.vision__quote { .vision__quote {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 0;
align-self: flex-end; align-self: flex-end;
max-width: 640px; max-width: 740px;
.mark { .mark {
font-size: clamp(40px, 4.2vw, 80px); font-size: clamp(60px, 7.6vw, 146px);
font-weight: 700; font-weight: 600;
line-height: 1; line-height: 1;
margin-top: -0.34em;
color: #ffffff; color: #ffffff;
} }
.text { .text {
font-size: clamp(18px, 1.9vw, 32px); font-size: clamp(22px, 2.4vw, 46px);
font-weight: 300; font-weight: 100;
line-height: 1.4; line-height: 1.2;
color: #ffffff; color: #ffffff;
} }
} }
@ -67,7 +82,7 @@
gap: 12px; gap: 12px;
.keyword { .keyword {
font-size: clamp(28px, 3.1vw, 60px); font-size: clamp(28px, 3.33vw, 64px);
font-weight: 800; font-weight: 800;
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: #ffffff; color: #ffffff;
@ -75,9 +90,9 @@
} }
.desc { .desc {
font-size: clamp(12px, 0.8vw, 14px); font-size: clamp(12px, 0.73vw, 14px);
font-weight: 300; font-weight: 300;
color: rgba(255, 255, 255, 0.75); color: #ffffff;
} }
} }