Spaces:
Running
Running
| @font-face { | |
| font-family: "MP Sans"; | |
| font-weight: 400; | |
| font-display: swap; | |
| src: url(assets/fonts/mp-sans-regular.woff2) format("woff2"); | |
| } | |
| @font-face { | |
| font-family: "MP Sans"; | |
| font-weight: 700; | |
| font-display: swap; | |
| src: url(assets/fonts/mp-sans-bold.woff2) format("woff2"); | |
| } | |
| /* A gallery wall: white paper, warm ink, the photographs carry all the colour. One typeface, two sizes that matter. */ | |
| :root { | |
| --paper: #ffffff; | |
| --ink: #171511; | |
| --ink-2: #625c53; | |
| --ink-3: #9d968b; | |
| --ink-hint: #716a61; /* small text: >= 4.5:1 on paper, well and hover */ | |
| --line: #e4e0d9; | |
| --line-strong: #c9c3ba; | |
| --well: #f1efea; | |
| --hover: #f6f4f0; | |
| --focus: #171511; | |
| --error: #b5361f; | |
| --ui: "MP Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| color-scheme: light; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| --paper: #1a1917; | |
| --ink: #f1ede6; | |
| --ink-2: #a6a097; | |
| --ink-3: #6f6a62; | |
| --ink-hint: #8f8a81; | |
| --line: #2f2d29; | |
| --line-strong: #4a4740; | |
| --well: #131210; | |
| --hover: #232220; | |
| --focus: #f1ede6; | |
| --error: #ff9a85; | |
| color-scheme: dark; | |
| } | |
| } | |
| :root[data-theme="dark"] { | |
| --paper: #1a1917; | |
| --ink: #f1ede6; | |
| --ink-2: #a6a097; | |
| --ink-3: #6f6a62; | |
| --ink-hint: #8f8a81; | |
| --line: #2f2d29; | |
| --line-strong: #4a4740; | |
| --well: #131210; | |
| --hover: #232220; | |
| --focus: #f1ede6; | |
| --error: #ff9a85; | |
| color-scheme: dark; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| [hidden] { | |
| display: none ; | |
| } | |
| html { | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font: 400 15px/1.45 var(--ui); | |
| font-feature-settings: "kern"; | |
| } | |
| button, | |
| input { | |
| font: inherit; | |
| color: inherit; | |
| } | |
| figure, | |
| fieldset, | |
| p, | |
| h1, | |
| h2, | |
| ul { | |
| margin: 0; | |
| } | |
| fieldset { | |
| padding: 0; | |
| border: 0; | |
| min-width: 0; | |
| } | |
| ul { | |
| padding: 0; | |
| list-style: none; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 3px; | |
| text-decoration-color: var(--line-strong); | |
| } | |
| a:hover { | |
| text-decoration-color: currentColor; | |
| } | |
| button { | |
| min-height: 44px; | |
| padding: 0 16px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 6px; | |
| background: transparent; | |
| cursor: pointer; | |
| transition: background-color 0.15s, border-color 0.15s, color 0.15s; | |
| } | |
| button:hover:not(:disabled) { | |
| background: var(--hover); | |
| border-color: var(--ink); | |
| } | |
| :where(button, a, summary):focus-visible, | |
| .pick-button:focus-within, | |
| .seg-option:has(input:focus-visible), | |
| .example:focus-visible { | |
| outline: 2px solid var(--focus); | |
| outline-offset: 3px; | |
| } | |
| .primary { | |
| border-color: var(--ink); | |
| background: var(--ink); | |
| color: var(--paper); | |
| font-weight: 700; | |
| } | |
| .primary:hover:not(:disabled) { | |
| background: var(--ink); | |
| color: var(--paper); | |
| opacity: 0.86; | |
| } | |
| .primary:disabled { | |
| background: var(--well); | |
| color: var(--ink-3); | |
| border-color: var(--well); | |
| cursor: default; | |
| } | |
| .numeric { | |
| font-variant-numeric: lining-nums tabular-nums; | |
| } | |
| code { | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| /* ------------------------------------------------------------------ page */ | |
| .page { | |
| max-width: 1320px; | |
| margin: 0 auto; | |
| padding: 36px 40px 28px; | |
| } | |
| /* ------------------------------------------------------------------ masthead */ | |
| .masthead { | |
| display: grid; | |
| gap: 6px; | |
| margin-bottom: 30px; | |
| } | |
| .masthead-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 24px; | |
| margin-bottom: 8px; | |
| } | |
| h1 { | |
| font-size: 60px; | |
| line-height: 0.96; | |
| font-weight: 700; | |
| letter-spacing: -0.035em; | |
| } | |
| .site { | |
| font-size: 15px; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| color: var(--ink); | |
| } | |
| .site .arrow { | |
| display: inline-block; | |
| margin-left: 0.2em; | |
| transition: transform 0.2s; | |
| } | |
| .site:hover .arrow { | |
| transform: translate(2px, -2px); | |
| } | |
| .lead { | |
| max-width: 800px; | |
| font-size: 19px; | |
| line-height: 1.35; | |
| letter-spacing: -0.012em; | |
| } | |
| .brand { | |
| font-size: 14px; | |
| color: var(--ink-2); | |
| } | |
| .proof { | |
| max-width: 800px; | |
| font-size: 15px; | |
| line-height: 1.45; | |
| } | |
| .notice { | |
| margin-bottom: 16px; | |
| padding: 10px 0; | |
| border-top: 1px solid var(--line); | |
| border-bottom: 1px solid var(--line); | |
| font-size: 14px; | |
| } | |
| /* ------------------------------------------------------------------ bench: one row of controls */ | |
| .bench { | |
| padding: 16px 0 14px; | |
| border-top: 1px solid var(--ink); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .bench-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 12px 28px; | |
| } | |
| .pick { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| min-width: 0; | |
| flex: 1 1 320px; | |
| } | |
| .pick-button { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 44px; | |
| padding: 0 16px; | |
| border: 1px solid var(--ink); | |
| border-radius: 6px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background-color 0.15s; | |
| } | |
| .pick-button:hover { | |
| background: var(--hover); | |
| } | |
| .pick-button input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip-path: inset(50%); | |
| } | |
| .pick-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| color: var(--ink-2); | |
| font-size: 14px; | |
| } | |
| .pick-thumb { | |
| width: 36px; | |
| height: 36px; | |
| object-fit: cover; | |
| border-radius: 3px; | |
| flex: none; | |
| } | |
| .pick-text { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| } | |
| .pick-text strong { | |
| color: var(--ink); | |
| font-weight: 400; | |
| } | |
| .seg { | |
| display: inline-flex; | |
| padding: 3px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 8px; | |
| } | |
| .seg-option { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 36px; | |
| padding: 0 14px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| color: var(--ink-2); | |
| white-space: nowrap; | |
| transition: background-color 0.15s, color 0.15s; | |
| } | |
| .seg-option:hover { | |
| color: var(--ink); | |
| } | |
| .seg-option input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip-path: inset(50%); | |
| } | |
| .seg-option:has(input:checked) { | |
| background: var(--ink); | |
| color: var(--paper); | |
| } | |
| .run { | |
| min-width: 128px; | |
| } | |
| .quota { | |
| margin-left: auto; | |
| max-width: 480px; | |
| text-align: right; | |
| font-size: 13px; | |
| line-height: 1.35; | |
| color: var(--ink-2); | |
| } | |
| .bench-line { | |
| display: grid; | |
| gap: 8px; | |
| justify-items: start; | |
| } | |
| .bench-line:has(.plan:not(:empty)), | |
| .bench-line:has(.status:not([hidden])) { | |
| margin-top: 12px; | |
| } | |
| .plan { | |
| font-size: 14px; | |
| color: var(--ink-2); | |
| font-variant-numeric: lining-nums tabular-nums; | |
| } | |
| .plan:empty { | |
| display: none; | |
| } | |
| .plan-error { | |
| color: var(--error); | |
| } | |
| .status { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px 16px; | |
| font-size: 15px; | |
| } | |
| .status[data-state="error"] .status-text strong { | |
| color: var(--error); | |
| } | |
| .status-text strong { | |
| font-weight: 700; | |
| } | |
| .status-text .meta { | |
| color: var(--ink-2); | |
| } | |
| .status .actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .status .actions a { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 40px; | |
| padding: 0 14px; | |
| border: 1px solid var(--ink); | |
| border-radius: 6px; | |
| text-decoration: none; | |
| font-weight: 700; | |
| } | |
| .status .actions button { | |
| min-height: 40px; | |
| } | |
| .spinner { | |
| display: inline-block; | |
| width: 13px; | |
| height: 13px; | |
| margin-right: 8px; | |
| vertical-align: -1px; | |
| border: 2px solid var(--line); | |
| border-top-color: var(--ink); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .turnstile:empty { | |
| display: none; | |
| } | |
| /* ------------------------------------------------------------------ viewer */ | |
| .viewer { | |
| margin-top: 22px; | |
| } | |
| .viewer-head { | |
| display: grid; | |
| grid-template-columns: var(--fw, 1fr) var(--fw, 1fr); | |
| justify-content: center; | |
| align-items: end; | |
| gap: var(--gap, 10px); | |
| margin-bottom: 10px; | |
| font-size: 14px; | |
| } | |
| .label-before { | |
| color: var(--ink-2); | |
| } | |
| .label-after { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: end; | |
| gap: 16px; | |
| font-weight: 700; | |
| } | |
| .zoom { | |
| display: flex; | |
| gap: 2px; | |
| } | |
| .zoom button { | |
| min-height: 32px; | |
| padding: 0 10px; | |
| border-color: transparent; | |
| font-size: 14px; | |
| color: var(--ink-2); | |
| } | |
| .zoom button:hover:not(:disabled) { | |
| border-color: transparent; | |
| color: var(--ink); | |
| } | |
| .zoom [aria-pressed="true"] { | |
| color: var(--ink); | |
| background: var(--well); | |
| } | |
| .inspect { | |
| display: none; | |
| min-height: 32px; | |
| margin-left: 6px; | |
| border-color: var(--line-strong); | |
| } | |
| .diptych { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--gap, 10px); | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .pane { | |
| min-width: 0; | |
| } | |
| .pane-frame { | |
| position: relative; | |
| width: var(--fw, 50%); | |
| height: var(--fh, 480px); | |
| overflow: hidden; | |
| background: var(--well); | |
| cursor: grab; | |
| touch-action: pan-y pinch-zoom; | |
| } | |
| .pane-frame:focus-visible { | |
| outline: 2px solid var(--focus); | |
| outline-offset: 2px; | |
| } | |
| .pane-frame.is-dragging { | |
| cursor: grabbing; | |
| } | |
| .viewer[data-inspect="true"] .pane-frame { | |
| touch-action: none; | |
| } | |
| .pane-frame img { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| max-width: none; | |
| max-height: none; | |
| transform-origin: 0 0; | |
| pointer-events: none; | |
| } | |
| .pane-empty { | |
| position: absolute; | |
| inset: 0; | |
| display: grid; | |
| place-items: center; | |
| padding: 24px; | |
| text-align: center; | |
| color: var(--ink-2); | |
| font-size: 14px; | |
| } | |
| .loading { | |
| position: absolute; | |
| inset: 0; | |
| display: grid; | |
| place-items: center; | |
| pointer-events: none; | |
| } | |
| .loading span { | |
| width: 26px; | |
| height: 26px; | |
| border: 2px solid rgba(255, 255, 255, 0.45); | |
| border-top-color: var(--ink); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .viewer-foot { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| flex-wrap: wrap; | |
| gap: 4px 24px; | |
| margin-top: 12px; | |
| } | |
| .caption { | |
| font-size: 15px; | |
| } | |
| .caption strong { | |
| font-weight: 700; | |
| } | |
| .caption .meta { | |
| color: var(--ink-2); | |
| margin-left: 8px; | |
| } | |
| .hint { | |
| font-size: 13px; | |
| color: var(--ink-hint); | |
| } | |
| .note-touch { | |
| display: none; | |
| } | |
| /* ------------------------------------------------------------------ gallery: the five examples in one justified row */ | |
| .gallery { | |
| margin-top: 36px; | |
| } | |
| .gallery-head { | |
| margin-bottom: 10px; | |
| font-size: 14px; | |
| color: var(--ink-2); | |
| } | |
| .examples { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .examples li { | |
| display: flex; | |
| flex: var(--ar) 1 0; | |
| min-width: 0; | |
| } | |
| .example { | |
| display: grid; | |
| grid-template-rows: 1fr auto; | |
| width: 100%; | |
| min-height: 0; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 0; | |
| background: transparent; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .example:hover:not(:disabled) { | |
| background: transparent; | |
| } | |
| .example-image { | |
| position: relative; | |
| aspect-ratio: var(--ar); | |
| overflow: hidden; | |
| background: var(--well); | |
| } | |
| .example-image img { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: opacity 0.2s; | |
| } | |
| .example:hover .example-image img { | |
| opacity: 0.85; | |
| } | |
| .example-image::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| box-shadow: inset 0 0 0 0 var(--ink); | |
| transition: box-shadow 0.15s; | |
| pointer-events: none; | |
| } | |
| .example[aria-pressed="true"] .example-image::after { | |
| box-shadow: inset 0 0 0 3px var(--ink); | |
| } | |
| .example-text { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding-top: 8px; | |
| font-size: 13px; | |
| line-height: 1.3; | |
| color: var(--ink-2); | |
| } | |
| .example[aria-pressed="true"] .example-text { | |
| color: var(--ink); | |
| } | |
| .example-text span { | |
| min-width: 0; | |
| } | |
| .example-text small { | |
| font-size: 13px; | |
| white-space: nowrap; | |
| color: var(--ink-hint); | |
| } | |
| /* ------------------------------------------------------------------ colophon */ | |
| .colophon { | |
| margin-top: 40px; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--line); | |
| font-size: 14px; | |
| color: var(--ink-2); | |
| } | |
| .colophon-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px 24px; | |
| min-height: 32px; | |
| align-items: center; | |
| } | |
| .about summary { | |
| cursor: pointer; | |
| padding: 8px 0; | |
| list-style: none; | |
| } | |
| .about summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .about summary::before { | |
| content: "+"; | |
| display: inline-block; | |
| width: 16px; | |
| font-weight: 700; | |
| } | |
| .about[open] summary::before { | |
| content: "–"; | |
| } | |
| .about-body { | |
| max-width: 76ch; | |
| display: grid; | |
| gap: 10px; | |
| padding: 4px 0 16px 16px; | |
| } | |
| .about-body h2 { | |
| margin-top: 8px; | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--ink); | |
| } | |
| .credits { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| /* ------------------------------------------------------------------ drop anywhere */ | |
| .dropzone { | |
| position: fixed; | |
| inset: 12px; | |
| display: none; | |
| place-items: center; | |
| border: 2px dashed var(--ink); | |
| background: color-mix(in srgb, var(--paper) 80%, transparent); | |
| font-size: 22px; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| body[data-dragover="true"] .dropzone { | |
| display: grid; | |
| } | |
| /* ------------------------------------------------------------------ input modes */ | |
| @media (hover: none) { | |
| .note-mouse { | |
| display: none; | |
| } | |
| .note-touch { | |
| display: inline; | |
| } | |
| .inspect { | |
| display: inline-flex; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| transition: none ; | |
| animation-duration: 0.01ms ; | |
| } | |
| } | |
| /* ------------------------------------------------------------------ narrow */ | |
| @media (max-width: 1000px) { | |
| .quota { | |
| margin-left: 0; | |
| max-width: none; | |
| text-align: left; | |
| flex-basis: 100%; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .page { | |
| padding: 22px 16px 24px; | |
| } | |
| .masthead { | |
| margin-bottom: 22px; | |
| } | |
| .masthead-row { | |
| flex-wrap: wrap; | |
| gap: 8px 16px; | |
| } | |
| h1 { | |
| font-size: 38px; | |
| } | |
| .lead { | |
| font-size: 17px; | |
| } | |
| .bench-row { | |
| gap: 10px; | |
| } | |
| .pick { | |
| flex-basis: 100%; | |
| flex-wrap: wrap; | |
| } | |
| .pick-button { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .seg { | |
| width: 100%; | |
| } | |
| .seg-option { | |
| flex: 1; | |
| } | |
| .run { | |
| width: 100%; | |
| } | |
| .viewer-head { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .label-before, | |
| .label-after > :not(.zoom) { | |
| display: none; | |
| } | |
| .diptych { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .pane { | |
| position: relative; | |
| } | |
| .pane::before { | |
| content: attr(data-label); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| z-index: 1; | |
| padding: 4px 8px; | |
| background: var(--paper); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .pane-frame { | |
| width: 100% ; | |
| } | |
| .examples { | |
| overflow-x: auto; | |
| gap: 8px; | |
| margin: 0 -16px; | |
| padding: 0 16px 4px; | |
| scrollbar-width: none; | |
| } | |
| .examples li { | |
| flex: none; | |
| width: calc(130px * var(--ar)); | |
| } | |
| .example-text { | |
| display: grid; | |
| gap: 0; | |
| } | |
| } | |