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");
|
||||
|
||||
/* ==========================================================================
|
||||
Synapse BCI Lab — dark-instrument. 측정 조건이 붙은 계기.
|
||||
|
|
@ -178,6 +178,37 @@ a {
|
|||
.hero .lead {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.trial-register {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin-top: var(--space-4);
|
||||
padding: var(--space-3) 0;
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
.trial-register > div {
|
||||
min-width: 0;
|
||||
padding-inline: var(--space-3);
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.trial-register > div:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.trial-register dt,
|
||||
.trial-register dd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.trial-register dt {
|
||||
color: var(--accent);
|
||||
}
|
||||
.trial-register dd {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--ink-muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.hero-actions {
|
||||
margin-top: var(--space-5);
|
||||
display: flex;
|
||||
|
|
@ -186,7 +217,9 @@ a {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
|
@ -202,6 +235,7 @@ a {
|
|||
}
|
||||
|
||||
.raster-frame {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-frame);
|
||||
background: var(--surface-raised);
|
||||
|
|
@ -209,14 +243,19 @@ a {
|
|||
}
|
||||
.raster-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-2);
|
||||
}
|
||||
.raster-head > span {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
#raster {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -227,8 +266,8 @@ a {
|
|||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
font-size: 0.75rem;
|
||||
color: var(--ink-faint);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.legend-tick {
|
||||
display: inline-block;
|
||||
|
|
@ -270,6 +309,11 @@ a {
|
|||
.two-text p + p {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.two-text {
|
||||
min-width: 0;
|
||||
padding-left: var(--space-4);
|
||||
border-left: 1px solid var(--accent-dim);
|
||||
}
|
||||
|
||||
/* ── 수치 표 ──────────────────────────────────────────────────────────── */
|
||||
|
||||
|
|
@ -340,11 +384,20 @@ tbody td:not(.num) {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
gap: var(--space-5) var(--space-6);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
.ethics-list li {
|
||||
min-width: 0;
|
||||
padding-inline: var(--space-4);
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.ethics-list li:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.ethics-list h3 {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
|
@ -422,6 +475,24 @@ tbody td:not(.num) {
|
|||
padding-block: var(--space-6);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.trial-register {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.trial-register > div,
|
||||
.trial-register > div:first-child,
|
||||
.ethics-list li,
|
||||
.ethics-list li:first-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.ethics-list li + li {
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.head-inner {
|
||||
flex-direction: column;
|
||||
|
|
@ -430,6 +501,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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
--step-0: 1rem;
|
||||
--step-1: 1.1875rem;
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
|
||||
--step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);
|
||||
--step-3: clamp(1.5rem, 0.8rem + 3vw, 3rem); /* 48px — 두 줄 계약 */
|
||||
|
||||
--leading-tight: 1.24;
|
||||
--leading-normal: 1.72;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
--surface-raised: #0d0f13;
|
||||
--ink: #e9ebee;
|
||||
--ink-muted: #9aa1ab;
|
||||
--ink-faint: #69707a;
|
||||
--ink-faint: #838d98;
|
||||
--line: #1e2229;
|
||||
--line-strong: #343a45;
|
||||
--accent: #d9a441; /* 전극 금 — 텍스트·선 */
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
--radius: 2px;
|
||||
--radius-frame: 6px;
|
||||
|
||||
--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