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");
|
||||
|
||||
/* ==========================================================================
|
||||
Lumina Optics — 광학 시험대. 색은 캔버스 안에서만.
|
||||
|
|
@ -145,15 +145,63 @@ a {
|
|||
R2 원칙(design.md): 3D 위에 본문을 얹지 않는다. ─────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding-block: var(--space-4);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.hero-summary {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.bench-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 9fr) minmax(17rem, 4fr);
|
||||
gap: var(--space-4);
|
||||
align-items: stretch;
|
||||
}
|
||||
.bench-shell {
|
||||
min-width: 0;
|
||||
background:
|
||||
radial-gradient(72% 90% at 50% 22%, rgba(127, 185, 196, 0.06), transparent 66%),
|
||||
var(--surface);
|
||||
}
|
||||
.bench-stage {
|
||||
position: relative;
|
||||
height: clamp(320px, 56vh, 560px);
|
||||
height: clamp(20rem, 28vw, 22rem);
|
||||
background:
|
||||
radial-gradient(80% 90% at 50% 30%, rgba(127, 185, 196, 0.05), transparent 60%),
|
||||
radial-gradient(70% 88% at 50% 48%, rgba(127, 185, 196, 0.10), transparent 68%),
|
||||
var(--surface);
|
||||
border-bottom: 1px solid var(--line);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.bench-ledger {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.bench-ledger dl {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.bench-ledger dl > div {
|
||||
min-width: 0;
|
||||
padding: 0.85rem var(--space-3) 0.95rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.bench-ledger dl > div:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.bench-ledger dt,
|
||||
.bench-ledger dd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.045em;
|
||||
}
|
||||
.bench-ledger dt {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.bench-ledger dd {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
#gl,
|
||||
.bench-fallback {
|
||||
|
|
@ -169,13 +217,6 @@ a {
|
|||
#gl:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.hero-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
|
||||
gap: var(--space-5) var(--space-7);
|
||||
align-items: start;
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
.hero-kicker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
|
|
@ -187,8 +228,8 @@ a {
|
|||
margin-top: var(--space-3);
|
||||
}
|
||||
.hud {
|
||||
background: color-mix(in srgb, var(--surface) 78%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
margin-top: var(--space-3);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-4);
|
||||
|
|
@ -392,7 +433,9 @@ tbody td:not(.num) {
|
|||
max-width: 34em;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--accent-stroke);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
|
@ -451,13 +494,11 @@ tbody td:not(.num) {
|
|||
/* ── 반응형 ───────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-inner {
|
||||
position: static;
|
||||
.bench-layout {
|
||||
grid-template-columns: 1fr;
|
||||
padding-block: var(--space-5);
|
||||
}
|
||||
.bench-stage {
|
||||
height: clamp(300px, 48vh, 460px);
|
||||
height: clamp(320px, 82vw, 540px);
|
||||
}
|
||||
.two,
|
||||
.mtf-grid,
|
||||
|
|
@ -469,6 +510,20 @@ tbody td:not(.num) {
|
|||
padding-block: var(--space-6);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.bench-ledger dl {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.bench-ledger dl > div,
|
||||
.bench-ledger dl > div:first-child {
|
||||
padding-inline: var(--space-3);
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.bench-ledger dl > div:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.head-inner {
|
||||
flex-direction: column;
|
||||
|
|
@ -477,6 +532,9 @@ tbody td:not(.num) {
|
|||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
column-gap: var(--space-4);
|
||||
row-gap: var(--space-2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
--surface-raised: #15181b;
|
||||
--ink: #e8ecee;
|
||||
--ink-muted: #9ba4a9;
|
||||
--ink-faint: #6b7479;
|
||||
--ink-faint: #849096;
|
||||
--line: #23272b;
|
||||
--line-strong: #394046;
|
||||
--accent: #bfe8ee; /* 레이저 라인(밝게 — 텍스트용) */
|
||||
|
|
@ -48,8 +48,8 @@
|
|||
|
||||
--radius: 2px;
|
||||
|
||||
--container: 1120px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--container: 1240px;
|
||||
--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