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");
|
||||
|
||||
/* ==========================================================================
|
||||
Pulsegate — dark-instrument. 명도차로만 읽히는 계기판.
|
||||
|
|
@ -152,7 +152,7 @@ a {
|
|||
/* ── 히어로 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding-block: var(--space-8) var(--space-7);
|
||||
padding-block: clamp(4rem, 3rem + 5vw, 7rem) var(--space-6);
|
||||
}
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
|
|
@ -163,6 +163,34 @@ a {
|
|||
.hero-text .lead {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.probe-proof {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
padding: var(--space-3) 0;
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
.probe-proof > div {
|
||||
min-width: 0;
|
||||
}
|
||||
.probe-proof dt,
|
||||
.probe-proof dd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.probe-proof dt {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.probe-proof dd {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--ink-muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.probe-proof code {
|
||||
color: var(--accent);
|
||||
}
|
||||
.hero-actions {
|
||||
margin-top: var(--space-5);
|
||||
display: flex;
|
||||
|
|
@ -172,7 +200,9 @@ a {
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
background: var(--ink);
|
||||
color: var(--accent-ink);
|
||||
font-weight: 500;
|
||||
|
|
@ -200,7 +230,6 @@ a {
|
|||
}
|
||||
|
||||
.command {
|
||||
margin-top: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
|
|
@ -223,16 +252,23 @@ a {
|
|||
white-space: nowrap;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.workflow-command {
|
||||
margin-top: var(--space-5);
|
||||
max-width: 30rem;
|
||||
border-left: 2px solid var(--accent-stroke);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
.hero-note {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-faint);
|
||||
max-width: 34rem;
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
/* ── 계기(정적 프레임) ─────────────────────────────────────────────────── */
|
||||
|
||||
.instrument {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-frame);
|
||||
background: var(--surface-raised);
|
||||
|
|
@ -240,21 +276,26 @@ a {
|
|||
}
|
||||
.instrument-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
font-size: var(--step--1);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ink-faint);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.instrument-head > span {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.instrument svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.chart-grid line {
|
||||
stroke: var(--line);
|
||||
stroke: color-mix(in srgb, var(--line) 68%, transparent);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.chart-grid .chart-axis {
|
||||
|
|
@ -262,17 +303,20 @@ a {
|
|||
}
|
||||
.series {
|
||||
fill: none;
|
||||
stroke-width: 1.25;
|
||||
stroke-width: 1.4;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.series-faint {
|
||||
stroke: var(--line-strong);
|
||||
stroke: var(--ink-faint);
|
||||
opacity: 0.62;
|
||||
}
|
||||
.series-muted {
|
||||
stroke: var(--ink-faint);
|
||||
stroke: var(--ink-muted);
|
||||
opacity: 0.82;
|
||||
}
|
||||
.series-accent {
|
||||
stroke: var(--accent-stroke);
|
||||
stroke-width: 2.1;
|
||||
}
|
||||
.instrument-rows {
|
||||
margin-top: var(--space-3);
|
||||
|
|
@ -285,12 +329,16 @@ a {
|
|||
padding-block: 0.5rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
color: var(--ink);
|
||||
}
|
||||
.instrument-rows > div > span:first-child {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.num {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--ink);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
|
||||
|
|
@ -367,7 +415,7 @@ a {
|
|||
.wiring-notes {
|
||||
margin-top: var(--space-5);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
|
||||
gap: var(--space-5) var(--space-6);
|
||||
}
|
||||
.wiring-note h3 {
|
||||
|
|
@ -528,6 +576,12 @@ td.num {
|
|||
padding-block: var(--space-6);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.probe-proof {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.head-inner {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
--step-0: 1rem; /* 16px — 본문 */
|
||||
--step-1: 1.1875rem; /* 19px — 소제목 */
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 28px — 섹션 표제 */
|
||||
--step-3: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); /* 60px — 디스플레이 */
|
||||
--step-3: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); /* 52px — 두 줄 계약 */
|
||||
|
||||
--leading-tight: 1.22;
|
||||
--leading-normal: 1.7;
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
--radius: 2px;
|
||||
--radius-frame: 6px;
|
||||
|
||||
--container: 1120px;
|
||||
--container: 1240px;
|
||||
--container-narrow: 640px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);
|
||||
|
||||
--dur-quick: 160ms;
|
||||
--dur-normal: 420ms;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue