website

website/src/styles/demos/demo.css (1021B)

---

/* Project demos: the frame each one mounts into, and its bar of controls */

.sim-field {
  display: inline-flex;
  align-items: center;
  gap: 1.2ch;
  margin-left: 1.5ch;
  color: var(--dim);
}

.sim-field output {
  min-width: 7ch;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* a demo lays itself out by its own width (the @container rules in each demo's styles) */
.demo {
  container: demo / inline-size;
  font-size: 12px;
}

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* the bar's running stats, in figures that keep their width as they change */
.demo-bar .dim {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.demo canvas {
  display: block;
  width: 100%;
}

.demo pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
}

.demo .cap {
  margin: 10px 0 0;
  color: var(--dim);
}

@container demo (max-width: 600px) {
  .sim-field {
    margin-left: 0;
  }
}