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");
|
||||
|
||||
/* ==========================================================================
|
||||
향연 — quiet-luxury. 밝은 편집면 위의 기록.
|
||||
|
|
@ -138,6 +138,7 @@ a {
|
|||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(var(--space-3), 2vw, var(--space-5));
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
|
@ -157,13 +158,26 @@ a {
|
|||
/* ── 히어로 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding-block: var(--space-8) var(--space-7);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-block-size: min(46rem, calc(100svh - 4rem));
|
||||
padding-block: var(--space-6);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
|
||||
gap: var(--space-7) var(--space-6);
|
||||
align-items: start;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem);
|
||||
gap: clamp(var(--space-5), 6vw, var(--space-8));
|
||||
align-items: center;
|
||||
}
|
||||
.hero-grid > *,
|
||||
.two > *,
|
||||
.visit-grid > * {
|
||||
min-width: 0;
|
||||
}
|
||||
.hero-text {
|
||||
max-width: 38rem;
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
.hero-kicker {
|
||||
font-size: var(--step--1);
|
||||
|
|
@ -172,7 +186,7 @@ a {
|
|||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.lead {
|
||||
max-width: 30em;
|
||||
max-width: 42rem;
|
||||
}
|
||||
.hero-text .lead {
|
||||
margin-top: var(--space-5);
|
||||
|
|
@ -181,7 +195,9 @@ a {
|
|||
margin-top: var(--space-6);
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--ink);
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
|
|
@ -196,22 +212,24 @@ a {
|
|||
}
|
||||
|
||||
.hero-photo {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-2);
|
||||
justify-content: end;
|
||||
width: min(100%, 28rem);
|
||||
justify-self: end;
|
||||
align-items: start;
|
||||
}
|
||||
.hero-photo img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 4;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.hero-photo figcaption {
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-faint);
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
|
|
@ -220,6 +238,12 @@ a {
|
|||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
.section[id] {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
#aging .wrap {
|
||||
width: min(100% - 2 * var(--pad-inline), var(--container-wide));
|
||||
}
|
||||
.band {
|
||||
background: var(--surface-raised);
|
||||
border-block: 1px solid var(--line);
|
||||
|
|
@ -247,6 +271,9 @@ a {
|
|||
.two-text p + p {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.two-text p {
|
||||
max-width: 42rem;
|
||||
}
|
||||
.two-text .muted {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
|
@ -254,7 +281,7 @@ a {
|
|||
/* ── 숙성 장부 ────────────────────────────────────────────────────────── */
|
||||
|
||||
.aging-head {
|
||||
max-width: 36em;
|
||||
max-width: 42rem;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.aging-head p {
|
||||
|
|
@ -305,8 +332,8 @@ tbody th {
|
|||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: baseline;
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-4);
|
||||
|
|
@ -323,11 +350,12 @@ tbody th {
|
|||
.item-price {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.collection-note {
|
||||
margin-top: var(--space-4);
|
||||
max-width: 34em;
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
/* ── 방문 ─────────────────────────────────────────────────────────────── */
|
||||
|
|
@ -368,23 +396,9 @@ tbody th {
|
|||
/* ── 등장 모션 — 다른 페이지보다 느리다 ──────────────────────────────── */
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
translate: 0 16px;
|
||||
transition: opacity var(--dur-normal) var(--ease-soft),
|
||||
translate var(--dur-normal) var(--ease-soft);
|
||||
transition-delay: var(--delay, 0ms);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 반응형 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
@ -397,6 +411,7 @@ tbody th {
|
|||
.hero-photo {
|
||||
max-width: 24rem;
|
||||
justify-content: start;
|
||||
justify-self: start;
|
||||
}
|
||||
.visit-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -405,6 +420,7 @@ tbody th {
|
|||
display: none;
|
||||
}
|
||||
.hero {
|
||||
min-block-size: auto;
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
}
|
||||
|
|
@ -416,11 +432,13 @@ tbody th {
|
|||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.item-price {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue