yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

96
apps/site/public/work/lumina-optics/styles/main.css
View file

@ -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);
}
}