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/thursday-flowers/styles/fonts.css
Normal file
15
apps/site/public/work/thursday-flowers/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");
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
리셋 — 필요한 것만
|
||||
|
|
@ -141,6 +141,9 @@ h3 + * {
|
|||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
.section[id] {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
/* 가로 정보 라벨. 여백은 글자를 세우지 않고도 충분히 구분된다. */
|
||||
.hero-role,
|
||||
|
|
@ -252,6 +255,7 @@ h3 + * {
|
|||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
|
|
@ -267,31 +271,26 @@ h3 + * {
|
|||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* ── 히어로 ───────────────────────────────────────────
|
||||
리스크를 감수한 자리다. 큰 사진 한 장 대신 셋을 흩뿌린다.
|
||||
|
||||
그리드를 12칸으로 두되 각 사진이 **서로 다른 칸에서 시작해 다른 칸에서 끝난다.**
|
||||
R1 을 실측했더니 이미지 6개의 좌측 정렬선이 6개 전부 달랐다(117·173·188·433·588·948).
|
||||
정렬선이 하나로 모이는 순간 이 레이아웃은 그냥 어긋난 그리드가 된다. */
|
||||
/* ── 히어로 ─────────────────────────────────────────── */
|
||||
.hero {
|
||||
padding-block: var(--space-6) var(--space-8);
|
||||
}
|
||||
|
||||
/* 12칸 그리드에 grid-row 를 손으로 배치했더니 행 높이가 콘텐츠에 따라
|
||||
285/195/88/266px 로 제각각 잡히고 사이에 빈 칸이 생겼다.
|
||||
글과 사진을 두 덩어리로 나누고, **사진 안에서만** 흩뿌린다.
|
||||
그래야 정렬선을 흩는 것과 빈 공간이 생기는 것이 분리된다. */
|
||||
.hero-inner {
|
||||
display: grid;
|
||||
/* 텍스트 칼럼이 좁으면 h1 이 3줄로 접힌다(카운트 규칙: 헤드라인 2줄 이하).
|
||||
정보 라벨이 왼쪽에서 자리를 먹으므로 그만큼 더 준다. */
|
||||
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
.hero-inner > *,
|
||||
.two > *,
|
||||
.gallery > *,
|
||||
.visit-inner > * {
|
||||
min-width: 0;
|
||||
}
|
||||
.hero-text {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
}
|
||||
|
|
@ -300,52 +299,49 @@ h3 + * {
|
|||
}
|
||||
.hero-role {
|
||||
align-self: start;
|
||||
white-space: normal;
|
||||
}
|
||||
.hero-cta {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
/* 사진 셋. 위치·크기·비율이 전부 다르고 서로 겹친다.
|
||||
R1 실측에서 이미지 6개의 좌측 정렬선이 6개 전부 달랐다 —
|
||||
정렬선이 하나로 모이면 이 레이아웃은 그냥 어긋난 그리드가 된다. */
|
||||
.hero-photos {
|
||||
position: relative;
|
||||
/* 가장 아래 사진(.ph-c)이 63% 에서 시작해 폭 47%·4:3 이므로 약 0.99 에서 끝난다.
|
||||
컨테이너를 그보다 길게 잡으면 히어로 아래에 빈 띠가 남는다. */
|
||||
aspect-ratio: 1 / 0.995;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: var(--space-3) var(--space-4);
|
||||
align-items: start;
|
||||
}
|
||||
.ph {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ph img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ph figcaption {
|
||||
margin-top: var(--space-2);
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
}
|
||||
.ph-a {
|
||||
left: 16%;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
aspect-ratio: 3 / 4;
|
||||
grid-column: 1 / 9;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
.ph-b {
|
||||
left: 0;
|
||||
top: 52%;
|
||||
width: 27%;
|
||||
aspect-ratio: 3 / 4;
|
||||
grid-column: 9 / -1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.ph-c {
|
||||
right: 0;
|
||||
top: 63%;
|
||||
width: 47%;
|
||||
aspect-ratio: 4 / 3;
|
||||
grid-column: 9 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.hero-tags {
|
||||
position: absolute;
|
||||
right: -1.4rem;
|
||||
top: 4%;
|
||||
grid-column: 1 / -1;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────── */
|
||||
|
|
@ -406,8 +402,7 @@ h3 + * {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── 작업 갤러리 ──────────────────────────────────────
|
||||
균일한 3열 그리드를 쓰지 않는다. 셋의 크기와 세로 위치가 전부 다르다. */
|
||||
/* ── 작업 갤러리 ────────────────────────────────────── */
|
||||
.gallery {
|
||||
margin-top: var(--space-7);
|
||||
display: grid;
|
||||
|
|
@ -430,21 +425,21 @@ h3 + * {
|
|||
color: var(--ink-muted);
|
||||
}
|
||||
.g-1 {
|
||||
grid-column: 1 / 9;
|
||||
grid-column: 1 / 8;
|
||||
}
|
||||
.g-1 img {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.g-2 {
|
||||
grid-column: 9 / 13;
|
||||
margin-top: var(--space-7);
|
||||
grid-column: 8 / 13;
|
||||
margin-top: 0;
|
||||
}
|
||||
.g-2 img {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
.g-3 {
|
||||
grid-column: 3 / 10;
|
||||
margin-top: var(--space-5);
|
||||
grid-column: 8 / 13;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.g-3 img {
|
||||
aspect-ratio: 4 / 3;
|
||||
|
|
@ -494,7 +489,8 @@ h3 + * {
|
|||
max-width: 24ch;
|
||||
}
|
||||
.visit-mark {
|
||||
color: var(--line);
|
||||
/* 장식이라도 실제 문장이므로 배경선 색을 그대로 쓰지 않는다. */
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.2em;
|
||||
|
|
@ -526,7 +522,17 @@ h3 + * {
|
|||
display: none;
|
||||
}
|
||||
.hero-photos {
|
||||
aspect-ratio: 1 / 0.9;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.ph-a,
|
||||
.ph-b,
|
||||
.ph-c,
|
||||
.hero-tags {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
.ph-a {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.visit-mark {
|
||||
max-width: 100%;
|
||||
|
|
@ -574,7 +580,7 @@ h3 + * {
|
|||
display: inline;
|
||||
}
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
letter-spacing: 0.04em;
|
||||
|
|
@ -586,20 +592,12 @@ h3 + * {
|
|||
padding-inline: var(--space-4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 히어로 사진 셋을 세로로 세우면 화면이 너무 길어진다.
|
||||
가장 작은 것 하나만 남기고 나머지는 갤러리에서 다시 보여준다. */
|
||||
.hero-photos {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
.ph-b {
|
||||
display: none;
|
||||
}
|
||||
.ph-a {
|
||||
left: 0;
|
||||
width: 78%;
|
||||
}
|
||||
.ph-c {
|
||||
top: 58%;
|
||||
width: 62%;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.ph-a,
|
||||
.ph-b,
|
||||
.ph-c,
|
||||
.hero-tags { grid-column: 1; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
--paper-deep: #f1ede4; /* 섹션 하나만 살짝 눕힌다. 리듬용 */
|
||||
--ink: #2a2723;
|
||||
--ink-muted: #6b655c;
|
||||
--ink-faint: #a09889;
|
||||
--ink-faint: #746c60;
|
||||
--accent: #7c4a3f; /* 마른 장미. 꽃의 초록과 충돌하지 않는다 */
|
||||
--line: #ddd7ca;
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
정보 라벨이 왼쪽에서 60px 을 먹으므로 텍스트 칼럼은 화면 폭의 절반보다 좁다.
|
||||
1024px 에서 55.7px 로 잡히자 딱 넘쳐 3줄이 됐다(카운트 규칙 위반).
|
||||
기울기를 낮춰 전 구간에서 2줄을 유지한다. */
|
||||
--step-display: clamp(2.2rem, 1.3rem + 2.9vw, 4.2rem);
|
||||
--step-display: clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem);
|
||||
--step-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
|
||||
--step-body: 1rem;
|
||||
--step-label: 0.75rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue