feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
Yun Chan
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@import url("./tokens.css");
|
||||
@import url("./tokens.css?v=20260912all");
|
||||
|
||||
/* ==========================================================================
|
||||
오버톤 사운드랩 — anti-grid. 격자는 일부러 비틀었다.
|
||||
|
|
@ -137,28 +137,34 @@ a {
|
|||
/* ── 히어로 — 파형 위로 삐져나온 글자 ────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 88svh;
|
||||
min-height: min(44rem, 78svh);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
overflow: clip;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.wave {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
/* anti-grid: 텍스트 블록을 왼쪽 15% 축에 두고 오른쪽은 파형에 내준다 */
|
||||
width: min(100% - 2 * var(--pad-inline), var(--container));
|
||||
margin-left: max(var(--pad-inline), calc((100% - var(--container)) / 2));
|
||||
margin-right: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||||
gap: var(--space-5) var(--space-7);
|
||||
align-items: center;
|
||||
padding-block: var(--space-7);
|
||||
}
|
||||
.hero-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
.wave-surface {
|
||||
min-width: 0;
|
||||
height: clamp(18rem, 32vw, 25rem);
|
||||
overflow: hidden;
|
||||
border-left: 1px solid var(--line);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
.hero-kicker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -180,8 +186,6 @@ a {
|
|||
margin-top: var(--space-4);
|
||||
max-width: 26em;
|
||||
color: var(--ink-muted);
|
||||
/* 오른쪽으로 밀어낸다 — 정렬을 스스로 어긋나게 */
|
||||
margin-left: clamp(0rem, 8vw, 7.5rem);
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
|
||||
|
|
@ -210,6 +214,9 @@ a {
|
|||
border-top: 1px solid var(--line);
|
||||
padding-top: var(--space-3);
|
||||
max-width: 26rem;
|
||||
display: grid;
|
||||
grid-template-columns: 4.25rem minmax(0, 1fr);
|
||||
column-gap: var(--space-3);
|
||||
}
|
||||
/* 스태거: 짝수 작품은 아래로 밀고 오른쪽으로 당긴다 */
|
||||
.work-b {
|
||||
|
|
@ -218,16 +225,21 @@ a {
|
|||
}
|
||||
.work-year {
|
||||
color: var(--accent);
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 3;
|
||||
}
|
||||
.work h3 {
|
||||
grid-column: 2;
|
||||
font-size: var(--step-2);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.work p:not(.mono) {
|
||||
grid-column: 2;
|
||||
margin-top: var(--space-3);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.work-meta {
|
||||
grid-column: 2;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
|
|
@ -280,6 +292,26 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
/* 1920px 이하에서는 흐르는 복제열을 정적인 협업 목록으로 바꾼다.
|
||||
트랙 자체를 화면 밖에 놓지 않아 작은 화면의 실제 오버플로도 사라진다. */
|
||||
@media (max-width: 1920px) {
|
||||
.marquee-track {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
gap: var(--space-3);
|
||||
animation: none;
|
||||
}
|
||||
.marquee-track span {
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.marquee-track span:nth-child(n + 6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 사진 ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.photo-fig img {
|
||||
|
|
@ -307,7 +339,10 @@ a {
|
|||
max-width: 28em;
|
||||
}
|
||||
.contact-mail {
|
||||
font-size: var(--step-2);
|
||||
font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--accent-dim);
|
||||
|
|
@ -356,6 +391,14 @@ a {
|
|||
/* ── 반응형 — 좁은 화면에서는 비틀림을 줄인다(읽힘이 위) ─────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-inner {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wave-surface {
|
||||
height: 18rem;
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 0;
|
||||
}
|
||||
.archive {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -363,7 +406,6 @@ a {
|
|||
margin-top: 0;
|
||||
justify-self: stretch;
|
||||
}
|
||||
.hero-statement,
|
||||
.manifesto-note {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -380,6 +422,9 @@ a {
|
|||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.marquee-track {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.head-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
|
@ -390,3 +435,316 @@ a {
|
|||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 2026-08-30: 빈 어두운 면 대신 조건이 읽히는 설치 아카이브 ───────
|
||||
화면용 조판만 기존 인쇄/기본 규칙과 별도 cascade context로 둔다. */
|
||||
@media screen {
|
||||
body {
|
||||
background:
|
||||
linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px) center / min(18vw, 16rem) 100%,
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.site-head {
|
||||
background: rgb(18 16 14 / 94%);
|
||||
}
|
||||
|
||||
.head-inner {
|
||||
min-height: 4.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.55rem);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 0;
|
||||
background:
|
||||
radial-gradient(circle at 82% 44%, rgb(239 173 75 / 13%), transparent 27rem),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 55%);
|
||||
}
|
||||
|
||||
.wave {
|
||||
opacity: 0.72;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
max-width: 78rem;
|
||||
margin-inline: auto;
|
||||
padding-block: var(--space-7);
|
||||
}
|
||||
|
||||
.hero-kicker {
|
||||
max-width: 32rem;
|
||||
padding-bottom: var(--space-3);
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: 13ch;
|
||||
margin-top: var(--space-5);
|
||||
font-size: clamp(3.6rem, 2rem + 5vw, 6.9rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.065em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.hero-statement {
|
||||
width: min(100%, 36rem);
|
||||
margin-top: var(--space-5);
|
||||
margin-left: clamp(0rem, 10vw, 10rem);
|
||||
padding-left: var(--space-4);
|
||||
border-left: 2px solid var(--accent);
|
||||
color: var(--ink-muted);
|
||||
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: clamp(5rem, 7vw, 9rem);
|
||||
}
|
||||
|
||||
.works .wrap {
|
||||
max-width: 78rem;
|
||||
}
|
||||
|
||||
.works-h {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.works-h::after {
|
||||
content: "연도 · 장소 · 신호";
|
||||
color: var(--ink-faint);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.archive {
|
||||
display: block;
|
||||
margin-top: var(--space-5);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.work,
|
||||
.work-b {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(5.5rem, 0.28fr) minmax(0, 0.72fr) minmax(12rem, 0.42fr);
|
||||
column-gap: var(--space-5);
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: clamp(1.6rem, 3vw, 3rem) 0;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.work-year {
|
||||
grid-row: 1 / span 3;
|
||||
color: var(--accent);
|
||||
font-size: clamp(1rem, 1vw, 1.25rem);
|
||||
}
|
||||
|
||||
.work h3 {
|
||||
grid-column: 2;
|
||||
font-size: clamp(1.6rem, 1.7vw, 2.35rem);
|
||||
}
|
||||
|
||||
.work p:not(.mono) {
|
||||
grid-column: 2;
|
||||
max-width: 34rem;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.work-meta {
|
||||
grid-column: 3;
|
||||
grid-row: 1 / span 2;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
padding: var(--space-3);
|
||||
border-left: 1px solid var(--line);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.manifesto {
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0 64%, rgb(239 173 75 / 15%) 64% calc(64% + 1px), transparent calc(64% + 1px)),
|
||||
var(--surface-raised);
|
||||
}
|
||||
|
||||
.manifesto .wrap {
|
||||
max-width: 78rem;
|
||||
}
|
||||
|
||||
.manifesto-line {
|
||||
max-width: 18ch;
|
||||
font-size: clamp(3rem, 2rem + 4.8vw, 6.5rem);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.manifesto-note {
|
||||
max-width: 33rem;
|
||||
margin-left: min(38vw, 26rem);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--accent-dim);
|
||||
}
|
||||
|
||||
.marquee {
|
||||
padding-block: var(--space-4);
|
||||
background: #171411;
|
||||
}
|
||||
|
||||
.marquee-track {
|
||||
width: min(100% - 2 * var(--pad-inline), var(--container));
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
margin-inline: auto;
|
||||
gap: var(--space-3);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.marquee-track span {
|
||||
min-width: 0;
|
||||
color: var(--ink-muted);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.marquee-track span:nth-child(n + 6) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.photo {
|
||||
padding-top: var(--space-7);
|
||||
}
|
||||
|
||||
.photo-fig {
|
||||
max-width: 78rem;
|
||||
}
|
||||
|
||||
.photo-fig img {
|
||||
aspect-ratio: 16 / 7;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.photo-fig figcaption {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.contact {
|
||||
background: #171411;
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 0.64fr) auto;
|
||||
max-width: 78rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-statement,
|
||||
.manifesto-note {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.work,
|
||||
.work-b {
|
||||
grid-template-columns: 5rem minmax(0, 1fr);
|
||||
row-gap: var(--space-2);
|
||||
}
|
||||
|
||||
.work-meta {
|
||||
grid-column: 2;
|
||||
grid-row: auto;
|
||||
width: fit-content;
|
||||
border-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.marquee-track {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.marquee-track span:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.hero {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(3.25rem, 14vw, 4.4rem);
|
||||
}
|
||||
|
||||
.hero-kicker {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.works-h::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.work,
|
||||
.work-b {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.work-year,
|
||||
.work h3,
|
||||
.work p:not(.mono),
|
||||
.work-meta {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.work-year {
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.marquee-track {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.marquee-track span:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.photo-fig img {
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.contact-mail {
|
||||
font-size: clamp(1.25rem, 8vw, 1.6rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,16 +23,16 @@
|
|||
--leading-normal: 1.75;
|
||||
|
||||
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
|
||||
--surface: #0e0d0b;
|
||||
--surface-raised: #161411;
|
||||
--ink: #ece7dd;
|
||||
--ink-muted: #a09a8e;
|
||||
--ink-faint: #6f695f;
|
||||
--line: #27241f;
|
||||
--accent: #e8a33d; /* 앰버 — 선과 텍스트로만 */
|
||||
--accent-dim: rgba(232, 163, 61, 0.35);
|
||||
--surface: #12100e;
|
||||
--surface-raised: #1d1915;
|
||||
--ink: #f1ebe1;
|
||||
--ink-muted: #b5aa9a;
|
||||
--ink-faint: #91887c;
|
||||
--line: #39322b;
|
||||
--accent: #efad4b; /* 앰버 — 선과 텍스트로만 */
|
||||
--accent-dim: rgba(239, 173, 75, 0.38);
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
|
||||
--radius: 0; /* 스튜디오 바닥에는 모서리가 없다 */
|
||||
|
||||
--container: 1152px; /* R1 실측값 */
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--container: 78rem;
|
||||
--pad-inline: clamp(1.25rem, 0.75rem + 3vw, 5.5rem);
|
||||
|
||||
--dur-quick: 160ms;
|
||||
--dur-normal: 460ms;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue