@ethlete/cli 2.1.0-next.8 → 3.0.0-next.16

package/design/web/host.css

@@ -0,0 +1,494 @@
+:root {
+  --h-ground: #131313;
+  --h-panel: #1b1b1b;
+  --h-ink: #e6e2da;
+  --h-ink-3: #8b8578;
+  --h-line: #2c2c2c;
+  --h-prose: 21rem;
+}
+
+body {
+  display: grid;
+  margin: 0;
+  grid-template-columns: 18rem 1fr;
+  min-height: 100vh;
+  background: var(--h-ground);
+  color: var(--h-ink);
+  font:
+    300 14px/1.5 system-ui,
+    sans-serif;
+}
+
+/* The tree stands still while the calls scroll, and scrolls on its own when it is longer than the window. */
+nav {
+  position: sticky;
+  top: 0;
+  display: flex;
+  height: 100vh;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-self: start;
+  gap: 20px;
+  padding: 24px 12px;
+  border-right: 1px solid var(--h-line);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+nav section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+nav > section > h3 {
+  margin: 0 0 4px 12px;
+  color: var(--h-ink-3);
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+nav a {
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+nav a:hover {
+  background: var(--h-panel);
+}
+
+nav a[aria-current] {
+  background: var(--h-panel);
+  color: var(--h-ink);
+}
+
+.nav-rounds {
+  display: flex;
+  flex-direction: column;
+  margin: 2px 0 6px 12px;
+  border-left: 1px solid var(--h-line);
+}
+
+.nav-rounds a {
+  padding: 5px 10px;
+  border-radius: 0 6px 6px 0;
+  font-size: 11px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+  padding: 48px 56px;
+  overflow-x: auto;
+}
+
+.round {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  scroll-margin-top: 24px;
+}
+
+.round-head {
+  display: flex;
+  max-width: 68ch;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 24px;
+  border-top: 1px solid var(--h-line);
+}
+
+.round-head h2 {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 300;
+}
+
+.round-head p {
+  margin: 0;
+  color: var(--h-ink-3);
+  text-wrap: pretty;
+}
+
+.views {
+  display: flex;
+  margin-top: 4px;
+  gap: 2px;
+}
+
+.views a {
+  padding: 5px 12px;
+  border: 1px solid var(--h-line);
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+}
+
+.views a:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.views a:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+.views a[aria-current] {
+  background: var(--h-panel);
+  color: var(--h-ink);
+}
+
+/* The result is the end of the chain, so the chain itself sits under it as a line of keys. */
+.trail {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  gap: 8px;
+}
+
+.trail a {
+  padding: 4px 9px;
+  border: 1px solid var(--h-line);
+  border-radius: 5px;
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+}
+
+.trail a:hover {
+  color: var(--h-ink);
+}
+
+.trail a[aria-current] {
+  border-color: #7fd4bf;
+  color: #7fd4bf;
+}
+
+.arrow {
+  color: var(--h-line);
+  font-size: 12px;
+}
+
+.result .round-head,
+.tray .round-head {
+  border-top-color: var(--h-ink-3);
+}
+
+.fold {
+  align-self: start;
+  margin-top: 4px;
+  color: var(--h-ink-3);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+}
+
+.fold::before {
+  content: '\203A\00a0';
+}
+
+.fold:hover {
+  color: var(--h-ink);
+}
+
+/* A folded variant keeps its name on the page, so the thread of the round is still readable. */
+.folded {
+  display: flex;
+  max-width: 68ch;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.folded li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 7px 10px;
+  border-radius: 6px;
+  opacity: 0.55;
+}
+
+.folded li[data-verdict='chosen'] .tag {
+  color: #7fd4bf;
+}
+
+.folded li:hover {
+  background: var(--h-panel);
+  opacity: 1;
+}
+
+.folded a {
+  color: var(--h-ink);
+  text-decoration: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+header {
+  display: flex;
+  max-width: 68ch;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.eyebrow {
+  color: var(--h-ink-3);
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 300;
+}
+
+header p {
+  margin: 0;
+  color: var(--h-ink-3);
+  text-wrap: pretty;
+}
+
+/*
+ * A track is as wide as the frame it holds, so the variants wrap to the next band when the window
+ * runs out of room. Row flow is what lets them wrap: each column takes four rows, so the next one
+ * starts beside it and only a full band pushes to a new line.
+ */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--frame-width, 0px)), 1fr));
+  grid-auto-flow: row;
+  gap: 72px 40px;
+}
+
+.column {
+  display: grid;
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+  gap: 12px;
+}
+
+/* A view is one picture, so it gets the whole width and no subgrid. */
+.grid[data-view] .column {
+  grid-row: auto;
+  grid-template-rows: none;
+}
+
+/* A column can be wider than a line of text should be, so the text keeps its own measure. */
+.column h3,
+.claim,
+.cost {
+  max-width: var(--h-prose);
+}
+
+.stage {
+  display: flex;
+  padding: 24px 0;
+  justify-content: flex-start;
+}
+
+.column h3 {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.column h3 a {
+  color: var(--h-ink);
+  text-decoration: none;
+}
+
+/*
+ * Two 1100px frames never fit a screen side by side, and shrinking them hides the pixels the
+ * comparison is about. The picks are stacked in one box at full size instead.
+ */
+.overlay {
+  position: relative;
+  overflow: hidden;
+  cursor: crosshair;
+}
+
+.overlay iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.seam {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: #7fd4bf;
+}
+
+.switch {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+  gap: 6px;
+}
+
+.switch button {
+  padding: 5px 11px;
+  border: 1px solid var(--h-line);
+  border-radius: 5px;
+  background: none;
+  color: var(--h-ink-3);
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+}
+
+.switch button[aria-current] {
+  border-color: #7fd4bf;
+  color: #7fd4bf;
+}
+
+.hint {
+  margin-left: 8px;
+  color: var(--h-ink-3);
+  font-size: 11px;
+}
+
+.grid.sheet iframe {
+  display: block;
+  transform: scale(var(--de-scale, 1));
+  transform-origin: top left;
+}
+
+/* The contact sheet draws every variant at once, so one screen holds the whole call. */
+.grid.sheet {
+  --thumb-width: calc(var(--frame-width) * var(--de-scale));
+
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), max-content));
+  gap: 28px 20px;
+}
+
+.thumb {
+  display: flex;
+  width: var(--thumb-width);
+  flex-direction: column;
+  gap: 8px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.thumb-frame {
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--h-line);
+  border-radius: 4px;
+}
+
+/* A thumbnail is read, never driven, and a click on it belongs to the link around it. */
+.thumb-frame iframe {
+  pointer-events: none;
+}
+
+.thumb-name {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.thumb[data-verdict='rejected'] {
+  opacity: 0.45;
+  transition: opacity 0.15s;
+}
+
+.thumb:hover {
+  opacity: 1;
+}
+
+.thumb[data-verdict='chosen'] .thumb-name {
+  color: #7fd4bf;
+}
+
+.thumb[data-picked] .thumb-frame,
+.column[data-picked] .stage {
+  outline: 1px solid #7fd4bf;
+  outline-offset: 4px;
+}
+
+/* A rejected variant stays readable, and comes back to full strength under the pointer. */
+.column[data-verdict='rejected'] {
+  opacity: 0.45;
+  transition: opacity 0.15s;
+}
+
+.column[data-verdict='rejected']:hover {
+  opacity: 1;
+}
+
+[data-verdict='chosen'] .tag {
+  color: #7fd4bf;
+}
+
+.tag {
+  color: var(--h-ink-3);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+}
+
+iframe {
+  border: 0;
+  background: transparent;
+}
+
+.claim,
+.cost {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+.cost {
+  color: var(--h-ink-3);
+}
+
+.problem {
+  margin: 0;
+  padding: 12px 16px;
+  border-radius: 6px;
+  background: #1a1414;
+  color: #f0a0a0;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+.empty {
+  padding: 40px;
+  color: var(--h-ink-3);
+}