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
15
apps/site/public/work/baekje-celadon/styles/fonts.css
Normal file
15
apps/site/public/work/baekje-celadon/styles/fonts.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("./tokens.css");
|
||||
@import url("./tokens.css?v=20260912all");
|
||||
|
||||
/* ==========================================================================
|
||||
비색의 침묵 — editorial-archival. 암실의 세 개의 방.
|
||||
|
|
@ -132,6 +132,7 @@ a {
|
|||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(var(--space-3), 2vw, var(--space-5));
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
|
@ -151,13 +152,25 @@ a {
|
|||
/* ── 첫 방(히어로) ────────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding-block: 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, 5fr) minmax(0, 6fr);
|
||||
gap: var(--space-6) var(--space-7);
|
||||
align-items: end;
|
||||
grid-template-columns: minmax(15rem, 34rem) minmax(0, 1fr);
|
||||
gap: clamp(var(--space-5), 6vw, var(--space-8));
|
||||
align-items: center;
|
||||
}
|
||||
.hero-grid > *,
|
||||
.two > *,
|
||||
.visit-grid > * {
|
||||
min-width: 0;
|
||||
}
|
||||
.hero-figure {
|
||||
width: min(100%, 34rem);
|
||||
}
|
||||
.hero-figure img {
|
||||
display: block;
|
||||
|
|
@ -179,6 +192,10 @@ a {
|
|||
letter-spacing: 0.12em;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.hero-text {
|
||||
max-width: 39rem;
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
.hero-text .lead {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
|
@ -194,7 +211,10 @@ a {
|
|||
color: var(--ink-faint);
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding-inline: var(--space-4);
|
||||
background: var(--ink);
|
||||
color: var(--surface);
|
||||
font-weight: 500;
|
||||
|
|
@ -221,6 +241,9 @@ a {
|
|||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
.section[id] {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
.band {
|
||||
background: var(--surface-raised);
|
||||
border-block: 1px solid var(--line);
|
||||
|
|
@ -229,16 +252,27 @@ a {
|
|||
/* ── 제1실 — 풀블리드 판 ──────────────────────────────────────────────── */
|
||||
|
||||
.plate-head {
|
||||
max-width: 40em;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 1fr) minmax(0, 5fr);
|
||||
column-gap: var(--space-5);
|
||||
max-width: var(--container);
|
||||
}
|
||||
.plate-head .room-no {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
margin: 0;
|
||||
}
|
||||
.plate-head h2 {
|
||||
grid-column: 2;
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
.plate-head .lead {
|
||||
grid-column: 2;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.plate-figure {
|
||||
margin-top: var(--space-6);
|
||||
width: min(100% - 2 * var(--pad-inline), var(--container-wide));
|
||||
margin: var(--space-6) auto 0;
|
||||
}
|
||||
.plate-figure img {
|
||||
display: block;
|
||||
|
|
@ -246,10 +280,16 @@ a {
|
|||
height: auto;
|
||||
}
|
||||
.plate-figure figcaption {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 1fr) minmax(0, 5fr);
|
||||
column-gap: var(--space-5);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-faint);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.plate-figure figcaption span {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* ── 제2실 — 2단 ──────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
@ -317,22 +357,22 @@ a {
|
|||
/* ── 등장 모션 ────────────────────────────────────────────────────────── */
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
translate: 0 14px;
|
||||
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;
|
||||
}
|
||||
.two-text {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 1fr) minmax(0, 5fr);
|
||||
column-gap: var(--space-5);
|
||||
}
|
||||
.two-text .room-no {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 3;
|
||||
margin: 0;
|
||||
}
|
||||
.two-text h2,
|
||||
.two-text p {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* ── 반응형 ───────────────────────────────────────────────────────────── */
|
||||
|
|
@ -347,6 +387,13 @@ a {
|
|||
.hero-grid {
|
||||
align-items: start;
|
||||
}
|
||||
.hero {
|
||||
min-block-size: auto;
|
||||
}
|
||||
.hero-text {
|
||||
order: -1;
|
||||
padding-top: 0;
|
||||
}
|
||||
.hero-figure {
|
||||
max-width: 26rem;
|
||||
}
|
||||
|
|
@ -354,6 +401,24 @@ a {
|
|||
.section {
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
.plate-head,
|
||||
.two-text,
|
||||
.plate-figure figcaption {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: var(--space-3);
|
||||
}
|
||||
.plate-head .room-no,
|
||||
.plate-head h2,
|
||||
.plate-head .lead,
|
||||
.two-text .room-no,
|
||||
.two-text h2,
|
||||
.two-text p {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
.plate-figure figcaption span {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.head-inner {
|
||||
|
|
@ -363,6 +428,6 @@ a {
|
|||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@
|
|||
--surface-raised: #191d1c;
|
||||
--ink: #eceae2; /* 백색이 아니라 골동지의 밝기 */
|
||||
--ink-muted: #a7a69b;
|
||||
--ink-faint: #7b7d76;
|
||||
--ink-faint: #878982;
|
||||
--line: #2b302e;
|
||||
--accent: #8fbcaa; /* 비색 — 텍스트용으로 밝힘. 배경 채움 금지 */
|
||||
--accent-dim: #5e8274;
|
||||
--accent-dim: #80ac99;
|
||||
--ink-bright: #ffffff; /* CTA hover */
|
||||
|
||||
--space-1: 0.25rem;
|
||||
|
|
@ -45,8 +45,11 @@
|
|||
|
||||
--radius: 2px;
|
||||
|
||||
--container: 1120px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
/* 읽는 폭과 유물 판은 분리한다. 2560px에서도 문장이 늘어지지 않고,
|
||||
빙렬 이미지만 전시 벽처럼 넓어진다. */
|
||||
--container: 1200px;
|
||||
--container-wide: 1600px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4.5rem);
|
||||
|
||||
--dur-quick: 160ms;
|
||||
--dur-normal: 480ms;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue