feat(site): 쇼케이스를 별도 페이지로 분리하고 본문을 존댓말로 바꾼다
All checks were successful
ci / build (push) Successful in 18s
All checks were successful
ci / build (push) Successful in 18s
홈에 있던 쇼케이스 섹션은 스크린샷 두 장을 카드에 넣고 각도를 준 것이었고,
눌러도 갈 곳이 없었다. 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다.
- /showcase 를 별도 페이지로 만들었다. 모자이크 그리드에 썸네일을 놓고
누르면 실제로 도는 사이트(/work/<slug>/)가 열린다.
- 사례 데이터를 src/data/work.ts 한 곳에 모았다. 항목 하나만 추가하면
그리드에 들어간다 — 페이지 코드는 건드리지 않는다.
- 첫 사례로 목요일의 화원(플로럴 스튜디오)을 넣고 실제 파일을
public/work/thursday-flowers/ 에 함께 싣는다.
- 홈에서 예전 섹션을 제거하고 내비를 /showcase 로 돌렸다.
본문 말투:
사이트 문장이 전부 반말이었고 일부는 내부 감사 로그처럼 읽혔다.
스킬 문서의 단정한 반말은 의도지만, 방문자를 향한 화면은 다르다.
제목은 단정문이 카피로서 힘을 가지므로 그대로 두고, 설명하는 문장과
명령형("~해라")을 전부 존댓말로 바꿨다. 실측 결과 홈·쇼케이스 모두 0건.
구현에서 걸린 것:
Base 레이아웃이 이미 <main class="page"> 를 제공하는데 새 페이지에서
또 감쌌다. 바깥 page 의 본문 칼럼(561px) 안에 안쪽 page 가 들어가
전 페이지가 좁아졌다 — 모자이크가 561px, 썸네일이 240px 이었다.
중첩을 걷어내자 1180px / 596px 로 돌아왔다.
This commit is contained in:
Yun Chan
parent
b92853bf2b
commit
30dc6687dd
16 changed files with 1555 additions and 75 deletions
BIN
apps/site/public/work/thursday-flowers/assets/flower-01.webp
Normal file
BIN
apps/site/public/work/thursday-flowers/assets/flower-01.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
apps/site/public/work/thursday-flowers/assets/flower-02.webp
Normal file
BIN
apps/site/public/work/thursday-flowers/assets/flower-02.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
apps/site/public/work/thursday-flowers/assets/flower-03.webp
Normal file
BIN
apps/site/public/work/thursday-flowers/assets/flower-03.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
apps/site/public/work/thursday-flowers/assets/flower-04.webp
Normal file
BIN
apps/site/public/work/thursday-flowers/assets/flower-04.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
apps/site/public/work/thursday-flowers/assets/flower-05.webp
Normal file
BIN
apps/site/public/work/thursday-flowers/assets/flower-05.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
301
apps/site/public/work/thursday-flowers/index.html
Normal file
301
apps/site/public/work/thursday-flowers/index.html
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>목요일의 화원 · 플로럴 스튜디오</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 그 주에 좋은 꽃만 들여 주문받은 만큼만 만듭니다. 서울 서촌."
|
||||
/>
|
||||
<meta property="og:title" content="목요일의 화원 · 플로럴 스튜디오" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 서울 서촌."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="./assets/flower-01.webp" />
|
||||
<meta name="theme-color" content="#f8f6f0" />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<!-- 한글 세리프. 라틴 세리프만 지정하면 한글이 시스템 기본으로 떨어져 전부 무너진다 -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css" />
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E🌿%3C/text%3E%3C/svg%3E" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="site-head wrap">
|
||||
<a class="wordmark" href="#main">
|
||||
<span>목요일의</span> <span>화원</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#work">작업</a>
|
||||
<a href="#thursday">목요일</a>
|
||||
<a href="#subscribe">정기</a>
|
||||
<a href="#visit">찾아오기</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<!--
|
||||
히어로. 큰 사진 한 장을 깔지 않는다 — 그게 이 카테고리의 기본값이다.
|
||||
크기도 비율도 다른 사진 넷을 공통 정렬선 없이 흩뿌리고,
|
||||
그 사이 여백에 글자를 세로로 세운다. (R1: sarahwinward.com)
|
||||
-->
|
||||
<section class="hero" aria-labelledby="hero-h">
|
||||
<div class="hero-inner wrap">
|
||||
<div class="hero-text">
|
||||
<p class="vertical hero-role reveal">플로럴 스튜디오 / 서울 서촌 / 2019</p>
|
||||
|
||||
<div class="hero-body">
|
||||
<h1 id="hero-h" class="hero-h reveal">
|
||||
그 주에 좋은 꽃만<br />들입니다
|
||||
</h1>
|
||||
|
||||
<p class="lead hero-lead reveal" style="--delay: 120ms">
|
||||
목요일 아침에 시장에서 그 주의 꽃을 고르고, 주문받은 만큼만 만듭니다.
|
||||
남는 꽃이 없어서 시들 일도 없습니다.
|
||||
</p>
|
||||
|
||||
<a class="btn hero-cta reveal" href="#contact" style="--delay: 200ms">
|
||||
상담 신청하기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-photos">
|
||||
<figure class="ph ph-a reveal" style="--delay: 80ms">
|
||||
<img
|
||||
src="./assets/flower-01.webp"
|
||||
alt="흰 라넌큘러스와 작약, 유칼립투스로 묶은 꽃다발"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
</figure>
|
||||
<figure class="ph ph-b reveal" style="--delay: 260ms">
|
||||
<img
|
||||
src="./assets/flower-03.webp"
|
||||
alt="꽃 한 송이의 꽃잎 결이 보이는 접사"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
</figure>
|
||||
<figure class="ph ph-c reveal" style="--delay: 340ms">
|
||||
<img
|
||||
src="./assets/flower-02.webp"
|
||||
alt="작업대 위에 놓인 꽃 줄기와 가위, 노끈"
|
||||
width="1448"
|
||||
height="1086"
|
||||
loading="lazy"
|
||||
/>
|
||||
</figure>
|
||||
<p class="vertical hero-tags reveal" style="--delay: 420ms">
|
||||
주문 제작 / 정기 구독 / 공간 장식
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 왜 목요일인가 — 이름이 곧 운영 방식이라는 것을 여기서 푼다 -->
|
||||
<section id="thursday" class="section band" aria-labelledby="thursday-h">
|
||||
<div class="wrap two">
|
||||
<div class="two-text">
|
||||
<h2 id="thursday-h">
|
||||
일주일에 하루만 문을 엽니다
|
||||
</h2>
|
||||
<p>
|
||||
수요일 밤에 경매가 끝나고, 목요일 새벽 시장에 그 주의 꽃이 나옵니다.
|
||||
그날 좋은 것만 골라 그날 만듭니다.
|
||||
</p>
|
||||
<p>
|
||||
나머지 엿새는 만들지 않습니다. 미리 사다 두면 파는 날까지 꽃이 기다려야
|
||||
하고, 기다린 꽃은 이미 한 번 시든 꽃입니다.
|
||||
</p>
|
||||
<dl class="facts">
|
||||
<div>
|
||||
<dt>여는 날</dt>
|
||||
<dd>매주 목요일 10:00–19:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>주문 마감</dt>
|
||||
<dd>수요일 18:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>그 주 제작 수</dt>
|
||||
<dd>최대 20건</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<figure class="two-photo">
|
||||
<img
|
||||
src="./assets/flower-05.webp"
|
||||
alt="꽃 줄기를 가위로 다듬는 손"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="label">목요일 아침, 손질</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 작업 — 사진이 설득의 주체다. 크기 차이가 리듬이다 -->
|
||||
<section id="work" class="section" aria-labelledby="work-h">
|
||||
<div class="wrap">
|
||||
<p class="label">작업</p>
|
||||
<h2 id="work-h">같은 꽃을 두 번 쓰지 않습니다</h2>
|
||||
<p class="lead">
|
||||
주에 따라 들어오는 꽃이 다르니 결과도 매번 다릅니다. 지난 작업을 그대로
|
||||
다시 만들어 달라는 요청은 받지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap gallery">
|
||||
<figure class="g g-1">
|
||||
<img
|
||||
src="./assets/flower-04.webp"
|
||||
alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
|
||||
width="1600"
|
||||
height="900"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>작업실 · 서촌</figcaption>
|
||||
</figure>
|
||||
<figure class="g g-2">
|
||||
<img
|
||||
src="./assets/flower-01.webp"
|
||||
alt="흰색과 크림색 위주로 묶은 꽃다발"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>화이트 온 화이트 · 6월</figcaption>
|
||||
</figure>
|
||||
<figure class="g g-3">
|
||||
<img
|
||||
src="./assets/flower-02.webp"
|
||||
alt="꽃 줄기와 가위, 노끈이 놓인 작업대를 위에서 본 모습"
|
||||
width="1448"
|
||||
height="1086"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>손질 전 · 목요일 오전</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<p class="muted work-note">
|
||||
더 많은 작업은
|
||||
<a class="link" href="https://instagram.com" rel="noopener">인스타그램</a>에
|
||||
주 단위로 올립니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 정기구독. 주 CTA(상담)와 경쟁하지 않게 아래쪽에 조용히 둔다 -->
|
||||
<section id="subscribe" class="section band" aria-labelledby="sub-h">
|
||||
<div class="wrap two two-reverse">
|
||||
<div class="two-text">
|
||||
<h2 id="sub-h">격주 목요일, 같은 자리에</h2>
|
||||
<p>
|
||||
사무실 응접실이나 매장 카운터처럼 꽃이 늘 있어야 하는 자리를 위한
|
||||
것입니다. 격주로 그 주의 꽃을 가져다 놓고, 지난 것을 가져옵니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
화병은 저희 것을 두고 씁니다. 자리와 조도를 먼저 보고 정하기 때문에
|
||||
첫 회는 방문 상담으로 시작합니다.
|
||||
</p>
|
||||
<a class="btn btn-quiet" href="#contact">정기 상담 신청</a>
|
||||
</div>
|
||||
<figure class="two-photo">
|
||||
<img
|
||||
src="./assets/flower-03.webp"
|
||||
alt="꽃잎의 결이 보이는 접사"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="label">이번 주 · 라넌큘러스</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 문의 — 이 페이지의 유일한 주 CTA가 도착하는 곳 -->
|
||||
<section id="contact" class="section contact" aria-labelledby="contact-h">
|
||||
<div class="wrap contact-inner">
|
||||
<p class="label">문의</p>
|
||||
<h2 id="contact-h">무엇에 쓸 꽃인지부터 듣습니다</h2>
|
||||
<p class="lead">
|
||||
받는 분과 자리, 예산을 알려주시면 그 주에 가능한 것을 먼저 말씀드립니다.
|
||||
가능하지 않은 주에는 그렇다고 말씀드립니다.
|
||||
</p>
|
||||
<ul class="contact-list">
|
||||
<li>
|
||||
<span class="label">전화</span>
|
||||
<a class="link" href="tel:0212345678">02-1234-5678</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">메일</span>
|
||||
<a class="link" href="mailto:hello@thursday.flowers"
|
||||
>hello@thursday.flowers</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">인스타그램</span>
|
||||
<a class="link" href="https://instagram.com" rel="noopener"
|
||||
>@thursday.flowers</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 찾아오기. 푸터를 따로 두지 않고 마지막 섹션이 그 역할을 한다 -->
|
||||
<section id="visit" class="section visit" aria-labelledby="visit-h">
|
||||
<div class="wrap visit-inner">
|
||||
<div>
|
||||
<h2 id="visit-h">서촌, 목요일에만</h2>
|
||||
<address class="visit-address">
|
||||
서울 종로구 자하문로 00길 00, 2층<br />
|
||||
경복궁역 3번 출구에서 도보 8분
|
||||
</address>
|
||||
</div>
|
||||
<p class="visit-note muted">
|
||||
목요일 외에는 상주하지 않습니다. 다른 요일 방문은 미리 연락 주세요.
|
||||
</p>
|
||||
<p class="vertical visit-mark">목요일의 화원</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/*
|
||||
등장 처리만 한다. 스크롤 이벤트는 쓰지 않는다 —
|
||||
매 프레임 레이아웃을 강제하고 모바일에서 프레임이 무너진다.
|
||||
한 번 보이면 유지한다: 이펙트를 끄면 보이고 켜면 사라지는 것은 폴백이 아니다.
|
||||
*/
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const e of entries) {
|
||||
if (!e.isIntersecting) continue;
|
||||
e.target.classList.add("is-in");
|
||||
io.unobserve(e.target);
|
||||
}
|
||||
},
|
||||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||||
);
|
||||
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
602
apps/site/public/work/thursday-flowers/styles/main.css
Normal file
602
apps/site/public/work/thursday-flowers/styles/main.css
Normal file
|
|
@ -0,0 +1,602 @@
|
|||
@import url("./tokens.css");
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
리셋 — 필요한 것만
|
||||
──────────────────────────────────────────────────────── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--step-body);
|
||||
line-height: var(--leading-body);
|
||||
font-weight: var(--weight-regular);
|
||||
/* 종이 질감. 에디토리얼 프리셋의 기본 재질이고, 아주 약해야 한다.
|
||||
세게 걸면 화면이 지저분해지고 사진의 디테일과 싸운다. */
|
||||
background-image: url("#");
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
/* CLS 를 막으려고 HTML 에 width/height 속성을 적어두면, height 속성이
|
||||
그대로 계산된 높이가 되어 **aspect-ratio 가 무시된다.**
|
||||
실측: aspect-ratio 는 "3 / 4" 로 적용돼 있는데 높이는 원본 1448px 이었다.
|
||||
height:auto 를 줘야 비율이 높이를 정한다. */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 한글 조판. 서구 레퍼런스에는 이 정보가 없어서 직접 정한다.
|
||||
keep-all 이 없으면 어절 한가운데서 줄이 바뀐다. */
|
||||
:where(p, li, h1, h2, h3, figcaption, dd, dt) {
|
||||
word-break: keep-all;
|
||||
overflow-wrap: anywhere;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 키보드 사용자를 위한 것. 어떤 이펙트보다 우선한다 */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
z-index: 100;
|
||||
}
|
||||
.skip:focus {
|
||||
left: var(--gutter);
|
||||
top: var(--space-3);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
타이포그래피 — 크기 4종, 웨이트 2종. 그 이상 늘리지 않는다
|
||||
──────────────────────────────────────────────────────── */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: var(--weight-regular); /* 큰 글자일수록 가늘게 */
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--track-display);
|
||||
text-wrap: balance;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--step-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
|
||||
letter-spacing: var(--track-lead);
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: var(--track-lead);
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: var(--step-lead);
|
||||
letter-spacing: var(--track-lead);
|
||||
color: var(--ink-muted);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
/* 작은 라벨만 굵고 자간이 넓다. 크기 위계의 반대쪽 끝이다 */
|
||||
.label {
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
color: var(--ink-muted);
|
||||
text-transform: none; /* 한글에 uppercase 는 아무 효과가 없고 라틴만 튄다 */
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* 제목 다음에 오는 것은 반드시 떨어진다.
|
||||
h2 는 margin: 0 이고 p 도 margin-top: 0 이라 그냥 두면 붙는다. */
|
||||
h1 + *,
|
||||
h2 + *,
|
||||
h3 + * {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
레이아웃
|
||||
──────────────────────────────────────────────────────── */
|
||||
.wrap {
|
||||
max-width: var(--container);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--gutter);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
|
||||
/* 세로로 세운 글자. R1 이 여백을 이렇게 쓴다 —
|
||||
가로 공간을 먹지 않으면서 빈 곳에 정보를 흘려 넣는다. */
|
||||
.vertical {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
/* 가로쓰기 라벨의 자간(0.14em)을 그대로 쓰면 안 된다.
|
||||
세로쓰기에서 자간은 **글자 사이 세로 간격**이 되어 낱글자가 흩어진다.
|
||||
한글은 자소가 모여 한 글자라 특히 심하다. */
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── 링크: 밑줄이 글자를 침범하지 않게 ── */
|
||||
.link {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.25em;
|
||||
transition: text-decoration-color 250ms var(--ease-out);
|
||||
}
|
||||
.link:hover {
|
||||
text-decoration-color: transparent;
|
||||
}
|
||||
|
||||
/* ── 버튼: 하나뿐인 주 CTA ── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 3rem;
|
||||
padding: 0 var(--space-5);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-size: var(--step-body);
|
||||
font-weight: var(--weight-regular);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0; /* 이 페이지의 모서리는 전부 각지다. 하나만 둥글면 그게 튄다 */
|
||||
transition:
|
||||
background 250ms var(--ease-out),
|
||||
color 250ms var(--ease-out);
|
||||
}
|
||||
.btn:hover {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
.btn-quiet {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
border-color: var(--line);
|
||||
}
|
||||
.btn-quiet:hover {
|
||||
border-color: var(--ink);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
등장 — 페이드와 10px 상승뿐.
|
||||
R1 의 스크롤 이동량이 0px 이었다. 하이엔드는 움직이지 않는다.
|
||||
──────────────────────────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(var(--rise));
|
||||
transition:
|
||||
opacity var(--dur-slow) var(--ease-out),
|
||||
transform var(--dur-slow) var(--ease-out);
|
||||
transition-delay: var(--delay, 0ms);
|
||||
}
|
||||
.reveal.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
섹션별 레이아웃
|
||||
════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── 헤더 ─────────────────────────────────────────────
|
||||
워드마크 좌상단, 내비 우상단. R1 이 이렇게 놓는다.
|
||||
고정하지 않는다 — 에디토리얼에서 떠다니는 바는 읽기를 방해한다. */
|
||||
.site-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-5);
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
/* 넓은 화면에서는 두 줄, 좁은 화면에서는 한 줄로 쓴다.
|
||||
<br> 을 display:none 으로 지우면 줄만 붙는 게 아니라 **공백까지 사라져**
|
||||
"목요일의화원" 이 된다. span 두 개로 두고 display 를 바꾼다. */
|
||||
.wordmark span {
|
||||
display: block;
|
||||
}
|
||||
.wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.06em;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: var(--ink-muted);
|
||||
transition: color 250ms var(--ease-out);
|
||||
}
|
||||
.nav a:hover {
|
||||
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);
|
||||
align-items: center;
|
||||
}
|
||||
.hero-text {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
}
|
||||
.hero-body > * + * {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.hero-role {
|
||||
align-self: start;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ph {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ph img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ph-a {
|
||||
left: 16%;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
.ph-b {
|
||||
left: 0;
|
||||
top: 52%;
|
||||
width: 27%;
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
.ph-c {
|
||||
right: 0;
|
||||
top: 63%;
|
||||
width: 47%;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
.hero-tags {
|
||||
position: absolute;
|
||||
right: -1.4rem;
|
||||
top: 4%;
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────── */
|
||||
.band {
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
|
||||
/* 이미지와 글의 2단. 같은 스플릿을 세 번 이상 쓰지 않는다 —
|
||||
두 번째는 좌우를 뒤집어 리듬을 준다 */
|
||||
.two {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
|
||||
gap: var(--space-7);
|
||||
align-items: start;
|
||||
}
|
||||
.two-reverse .two-text {
|
||||
order: 2;
|
||||
}
|
||||
.two-text > * + * {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.two-text p {
|
||||
max-width: var(--measure);
|
||||
}
|
||||
.two-photo {
|
||||
margin: 0;
|
||||
}
|
||||
.two-photo img {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 4;
|
||||
object-fit: cover;
|
||||
}
|
||||
.two-photo figcaption {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
/* 숫자와 사실. 표가 아니라 조판으로 둔다 */
|
||||
.facts {
|
||||
margin-top: var(--space-6);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.facts > div {
|
||||
display: grid;
|
||||
grid-template-columns: 7.5rem 1fr;
|
||||
gap: var(--space-3);
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.facts dt {
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
color: var(--ink-muted);
|
||||
padding-top: 0.35rem;
|
||||
}
|
||||
.facts dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── 작업 갤러리 ──────────────────────────────────────
|
||||
균일한 3열 그리드를 쓰지 않는다. 셋의 크기와 세로 위치가 전부 다르다. */
|
||||
.gallery {
|
||||
margin-top: var(--space-7);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--space-5) var(--space-4);
|
||||
align-items: start;
|
||||
}
|
||||
.g {
|
||||
margin: 0;
|
||||
}
|
||||
.g img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.g figcaption {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.g-1 {
|
||||
grid-column: 1 / 9;
|
||||
}
|
||||
.g-1 img {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.g-2 {
|
||||
grid-column: 9 / 13;
|
||||
margin-top: var(--space-7);
|
||||
}
|
||||
.g-2 img {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
.g-3 {
|
||||
grid-column: 3 / 10;
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.g-3 img {
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.work-note {
|
||||
margin-top: var(--space-6);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
/* ── 문의 ─────────────────────────────────────────── */
|
||||
.contact-inner {
|
||||
max-width: 46rem;
|
||||
}
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-6);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.contact-list li {
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
gap: var(--space-3);
|
||||
align-items: baseline;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* ── 찾아오기 (푸터를 대신한다) ───────────────────── */
|
||||
.visit {
|
||||
padding-bottom: var(--space-7);
|
||||
}
|
||||
.visit-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto;
|
||||
gap: var(--space-6);
|
||||
align-items: end;
|
||||
}
|
||||
.visit-address {
|
||||
margin-top: var(--space-4);
|
||||
font-style: normal;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.visit-note {
|
||||
max-width: 24ch;
|
||||
}
|
||||
.visit-mark {
|
||||
color: var(--line);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
좁은 화면 — 흩뿌림은 넓은 화면의 사치다.
|
||||
320px 에서 정렬선 여섯 개를 유지하면 그냥 부서진 페이지가 된다.
|
||||
════════════════════════════════════════════════════════ */
|
||||
@media (max-width: 900px) {
|
||||
/* 히어로를 한 칸으로 내린다. 흩뿌림은 넓은 화면의 사치다 —
|
||||
390px 에서 정렬선 셋을 유지하면 사진이 서로를 가린다. */
|
||||
.hero-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
/* 여기가 실제 사고 지점이었다. .hero-text 가 `auto 1fr` 2칸인데
|
||||
세로 라벨을 가로로 눕히자 그 긴 문장이 auto 칸을 통째로 먹어
|
||||
h1 칸이 짜부라졌다 — 390px 에서 헤드라인이 6줄, 320px 에서 11줄이 됐다. */
|
||||
.hero-text {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.hero-role {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
/* 히어로의 텍스트 요소는 넷을 넘지 않는다(카운트 규칙) */
|
||||
.hero-tags {
|
||||
display: none;
|
||||
}
|
||||
.hero-photos {
|
||||
aspect-ratio: 1 / 0.9;
|
||||
}
|
||||
.visit-mark {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
|
||||
.two,
|
||||
.visit-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
.two-reverse .two-text {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.g-1,
|
||||
.g-2,
|
||||
.g-3 {
|
||||
grid-column: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.facts > div,
|
||||
.contact-list li {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
/* 워드마크와 내비를 한 줄에 나란히 두면 320px 에서 둘 다 접힌다.
|
||||
실측: 내비 링크가 두 줄(top 46/77)에 걸리고 워드마크는 3줄이 됐다.
|
||||
좁은 화면에서는 위아래로 쌓는다 — 접히는 것보다 쌓는 것이 낫다. */
|
||||
.site-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.wordmark {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
/* 세로로 쌓았으니 폭에 여유가 있다. 워드마크를 한 줄로 편다 */
|
||||
.wordmark span {
|
||||
display: inline;
|
||||
}
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
letter-spacing: 0.04em;
|
||||
padding-top: 0;
|
||||
}
|
||||
/* 버튼 라벨이 2줄로 접히면 하드 게이트 6 위반이다.
|
||||
좌우 패딩을 줄이고 줄바꿈을 막는다. */
|
||||
.btn {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
84
apps/site/public/work/thursday-flowers/styles/tokens.css
Normal file
84
apps/site/public/work/thursday-flowers/styles/tokens.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/*
|
||||
목요일의 화원 — 디자인 토큰
|
||||
전부 3단계에서 확정한 값이고, 근거는 design.md 에 있다.
|
||||
|
||||
값의 출처는 취향이 아니라 실측이다.
|
||||
Aesop(#FFFEF2) · Sarah Winward(#F8F7F3) · Cereal(#F7F6EF) 세 곳이
|
||||
전부 순백을 피하고 따뜻한 오프화이트를 쓴다. 글자도 순검정이 아니다.
|
||||
*/
|
||||
:root {
|
||||
/* ── 색 ──────────────────────────────────────────────
|
||||
강조색은 하나다. 그리고 **면이 아니라 점**으로만 쓴다.
|
||||
꽃 사진에는 이미 온갖 색이 들어 있어서, 화면에 색을 더 칠하면
|
||||
사진과 싸운다. 링크·라벨·구분선 정도가 강조색이 쓰이는 전부다. */
|
||||
--paper: #f8f6f0;
|
||||
--paper-deep: #f1ede4; /* 섹션 하나만 살짝 눕힌다. 리듬용 */
|
||||
--ink: #2a2723;
|
||||
--ink-muted: #6b655c;
|
||||
--ink-faint: #a09889;
|
||||
--accent: #7c4a3f; /* 마른 장미. 꽃의 초록과 충돌하지 않는다 */
|
||||
--line: #ddd7ca;
|
||||
|
||||
/* ── 타입 ────────────────────────────────────────────
|
||||
크기를 4종으로 묶는다. Aesop 이 3종(31/14/12), Cereal 이 2종(12/11)이었다.
|
||||
종류를 늘리면 위계가 아니라 소음이 된다.
|
||||
|
||||
자간은 크기에 따라 **방향이 뒤집힌다**(Kinfolk 실측).
|
||||
50px → -0.5px(-1%) · 15px → +0.15px(+1%)
|
||||
큰 글자는 조여서 덩어리로, 작은 글자는 풀어서 낱글자로 읽히게 한다. */
|
||||
--font-display: "MaruBuri", "Nanum Myeongjo", Georgia, serif;
|
||||
--font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;
|
||||
|
||||
/* 가장 긴 줄이 "그 주에 좋은 꽃만"(한글 7 + 공백 2 ≒ 7.7em)이다.
|
||||
세로 라벨이 왼쪽에서 60px 을 먹으므로 텍스트 칼럼은 화면 폭의 절반보다 좁다.
|
||||
1024px 에서 55.7px 로 잡히자 딱 넘쳐 3줄이 됐다(카운트 규칙 위반).
|
||||
기울기를 낮춰 전 구간에서 2줄을 유지한다. */
|
||||
--step-display: clamp(2.2rem, 1.3rem + 2.9vw, 4.2rem);
|
||||
--step-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
|
||||
--step-body: 1rem;
|
||||
--step-label: 0.75rem;
|
||||
|
||||
--track-display: -0.02em;
|
||||
--track-lead: -0.005em;
|
||||
--track-body: 0;
|
||||
--track-label: 0.14em;
|
||||
|
||||
/* 웨이트는 둘이면 충분하다. 굵기로 소리치지 않는다.
|
||||
큰 글자일수록 가늘게 — Aesop 의 31px 이 400 이었고 12px 라벨이 700 이었다. */
|
||||
--weight-regular: 400;
|
||||
--weight-bold: 700;
|
||||
|
||||
--leading-tight: 1.2;
|
||||
--leading-body: 1.85; /* 한글은 라틴보다 넉넉해야 한다. 받침 때문에 줄이 붙어 보인다 */
|
||||
|
||||
/* 한글 본문은 25~35자가 읽기 폭이다. 라틴 기준 65자를 그대로 쓰면 너무 넓다 */
|
||||
--measure: 32ch;
|
||||
|
||||
/* ── 간격 ────────────────────────────────────────────
|
||||
여백이 콘텐츠다. 섹션 간격을 본문 간격의 5배 이상으로 벌린다. */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
--space-4: 1.5rem;
|
||||
--space-5: 2.5rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 6.5rem;
|
||||
--space-8: clamp(6rem, 4rem + 8vw, 11rem); /* 섹션 사이 */
|
||||
|
||||
--gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
|
||||
--container: 1240px;
|
||||
|
||||
/* ── 모션 ────────────────────────────────────────────
|
||||
R1(sarahwinward.com)의 스크롤 이동량을 쟀더니 **0px** 이었다.
|
||||
하이엔드 플로럴은 움직이지 않는다. 등장만 조용히 처리한다. */
|
||||
--dur-slow: 900ms;
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--rise: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
:root {
|
||||
--ink-muted: #4a453e;
|
||||
--line: #b9b0a0;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue