feat(justfile): added justfile with catalog of builds
This commit is contained in:
506
web/styles.css
Normal file
506
web/styles.css
Normal file
@@ -0,0 +1,506 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #071018;
|
||||
--surface: #0c1823;
|
||||
--surface-raised: #102230;
|
||||
--line: rgba(165, 214, 232, 0.16);
|
||||
--line-strong: rgba(165, 214, 232, 0.29);
|
||||
--text: #eef8fb;
|
||||
--muted: #91aab5;
|
||||
--cyan: #59c7ff;
|
||||
--mint: #7df9c5;
|
||||
--amber: #f5c86c;
|
||||
--danger: #ff8f8f;
|
||||
--radius: 18px;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 18% -10%, rgba(48, 139, 173, 0.20), transparent 34rem),
|
||||
linear-gradient(150deg, #071018 0%, #09131d 48%, #060d14 100%);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.masthead,
|
||||
footer {
|
||||
width: min(1420px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
min-height: 92px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #061019;
|
||||
background: var(--mint);
|
||||
border-radius: 11px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 0 30px rgba(125, 249, 197, 0.20);
|
||||
}
|
||||
|
||||
.brand strong,
|
||||
.brand small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.brand small {
|
||||
margin-top: 2px;
|
||||
color: var(--muted);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.runtime-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 14px currentColor;
|
||||
}
|
||||
|
||||
.status-dot[data-state="ready"] {
|
||||
background: var(--mint);
|
||||
}
|
||||
|
||||
.status-dot[data-state="working"] {
|
||||
background: var(--cyan);
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-dot[data-state="error"] {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
width: min(1420px, calc(100% - 48px));
|
||||
min-height: calc(100vh - 168px);
|
||||
margin: 0 auto;
|
||||
padding: 54px 0 44px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.28fr);
|
||||
gap: clamp(32px, 6vw, 92px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 14px;
|
||||
color: var(--mint);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 12ch;
|
||||
margin-bottom: 20px;
|
||||
font-size: clamp(2.5rem, 5vw, 4.8rem);
|
||||
font-weight: 560;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.99;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.4rem, 2vw, 2rem);
|
||||
font-weight: 560;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.lede {
|
||||
max-width: 56ch;
|
||||
margin-bottom: 34px;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 0.72fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.field-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
label,
|
||||
.field-heading output {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.035em;
|
||||
}
|
||||
|
||||
.field-heading output {
|
||||
color: var(--mint);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--mint);
|
||||
}
|
||||
|
||||
.range-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: -7px;
|
||||
color: #607b87;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
select {
|
||||
min-height: 46px;
|
||||
padding: 0 42px 0 14px;
|
||||
color: var(--text);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 54px;
|
||||
margin-top: 5px;
|
||||
padding: 0 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #061019;
|
||||
background: var(--mint);
|
||||
border: 0;
|
||||
border-radius: 11px;
|
||||
cursor: pointer;
|
||||
font-weight: 750;
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px rgba(125, 249, 197, 0.18);
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
select:focus-visible,
|
||||
input:focus-visible,
|
||||
summary:focus-visible {
|
||||
outline: 2px solid var(--cyan);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.46;
|
||||
}
|
||||
|
||||
.capabilities {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.capability-label {
|
||||
color: var(--muted);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
#capability-list {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.capability {
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.capability.enabled {
|
||||
color: var(--mint);
|
||||
border-color: rgba(125, 249, 197, 0.27);
|
||||
background: rgba(125, 249, 197, 0.06);
|
||||
}
|
||||
|
||||
.result-panel {
|
||||
overflow: hidden;
|
||||
background: rgba(12, 24, 35, 0.84);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 32px 90px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.result-heading {
|
||||
padding: 24px 26px 21px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.result-heading .eyebrow {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.run-index {
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.mesh-frame {
|
||||
position: relative;
|
||||
min-height: 410px;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
|
||||
#09131c;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
#mesh-canvas {
|
||||
width: 100%;
|
||||
height: 410px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.equation {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text);
|
||||
background: rgba(7, 16, 24, 0.78);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
font-family: ui-serif, Georgia, serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.equation span,
|
||||
.equation small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.equation small {
|
||||
margin-top: 3px;
|
||||
color: var(--muted);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.57rem;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.metrics article {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.metrics article:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.metrics span,
|
||||
.metrics strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.metrics span {
|
||||
margin-bottom: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.metrics strong {
|
||||
overflow: hidden;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: clamp(0.92rem, 1.4vw, 1.15rem);
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.console-panel {
|
||||
padding: 16px 24px 20px;
|
||||
}
|
||||
|
||||
.console-panel summary {
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.console-panel pre {
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
margin: 14px 0 0;
|
||||
color: #a9c7d2;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
footer {
|
||||
min-height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #67808b;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.55; transform: scale(0.9); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 15ch;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.masthead,
|
||||
.workspace,
|
||||
footer {
|
||||
width: min(100% - 28px, 1420px);
|
||||
}
|
||||
|
||||
.masthead {
|
||||
min-height: 78px;
|
||||
}
|
||||
|
||||
.runtime-state {
|
||||
max-width: 145px;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.35rem, 13vw, 3.4rem);
|
||||
}
|
||||
|
||||
form,
|
||||
.metrics {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.metrics article:nth-child(2) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.metrics article:nth-child(-n + 2) {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.mesh-frame,
|
||||
#mesh-canvas {
|
||||
min-height: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
footer {
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user