Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 | /* Defaults sit on :where(:root), which has zero specificity, so a host page wins
by setting any --stepthru-* variable on :root, a parent or .stepthru itself. */
:where(:root) {
/* Brand palette (BRAND.md). Every pair meets WCAG AA in both themes. */
--stepthru-fg: #1b1a24;
--stepthru-bg: #ffffff;
--stepthru-muted: #767389;
--stepthru-accent: #5b3fd9;
--stepthru-done: #1d7a4f;
}
@media (prefers-color-scheme: dark) {
:where(:root) {
--stepthru-fg: #ecebf5;
--stepthru-bg: #13121a;
--stepthru-muted: #8e8aa6;
--stepthru-accent: #a594ff;
--stepthru-done: #4cc38a;
}
}
.stepthru {
display: grid;
grid-template-columns: minmax(0, 1fr); /* without this the column grows to fit the controls and overflows phones */
align-content: start;
gap: 0.5rem;
color: var(--stepthru-fg);
background: var(--stepthru-bg);
}
.stepthru:focus-visible {
outline: 2px solid var(--stepthru-accent);
outline-offset: 2px;
}
.stepthru-figure svg {
/* Natural size, shrinking on narrow screens. Set width: 100% here to scale figures up. */
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
overflow: visible; /* strokes on edge shapes extend past the viewBox */
}
/* Views mark shapes with data-state. Fills stay light so values on top stay readable. */
.stepthru-figure [data-state] {
fill: var(--stepthru-bg);
stroke: var(--stepthru-muted);
stroke-width: 1.5;
}
.stepthru-figure [data-state="active"] {
fill: color-mix(in srgb, var(--stepthru-accent) 25%, var(--stepthru-bg));
stroke: var(--stepthru-accent);
stroke-width: 3;
}
.stepthru-figure [data-state="moved"] {
fill: color-mix(in srgb, var(--stepthru-accent) 25%, var(--stepthru-bg));
stroke: var(--stepthru-accent);
stroke-width: 3;
stroke-dasharray: 6 3; /* dashed, so a swap differs from a compare without relying on color */
}
/* Shapes redraw every step, so a short fill-in on the ones the step touches stands in for a transition.
Marked shapes stay marked across steps, so they do not animate or they would flash every step. */
/* Fades the fill's opacity, not its color: Chromium interpolates a color into color-mix() as garbage (bright yellow). */
@keyframes stepthru-in {
from { fill-opacity: 0; }
}
.stepthru-figure [data-state="active"],
.stepthru-figure [data-state="moved"] {
animation: stepthru-in 250ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.stepthru-figure [data-state] { animation: none; }
}
.stepthru-figure [data-state="marked"] {
fill: color-mix(in srgb, var(--stepthru-done) 25%, var(--stepthru-bg));
stroke: var(--stepthru-done);
}
.stepthru-figure line[data-state="marked"] { stroke-width: 3; }
/* Walls, such as in a maze: solid, so they differ from open cells by shape as well as color. */
.stepthru-figure [data-state="wall"] {
fill: var(--stepthru-muted);
stroke: var(--stepthru-muted);
}
.stepthru-figure [data-dim] { opacity: 0.35; }
.stepthru-figure .stepthru-range {
fill: none;
stroke: var(--stepthru-accent);
stroke-width: 1.5;
}
.stepthru-figure text,
.stepthru-figure .stepthru-pointer { fill: var(--stepthru-fg); }
/* Arrowheads take their edge's color. path.… outranks the generic [data-state] fill above. */
.stepthru-figure path.stepthru-arrow { fill: var(--stepthru-muted); stroke: none; }
.stepthru-figure path.stepthru-arrow[data-state="marked"] { fill: var(--stepthru-done); }
/* Weights and tags sit on lines and circles, with a halo in the background color so lines do not cross the digits. */
.stepthru-figure .stepthru-weight,
.stepthru-figure .stepthru-tag {
paint-order: stroke;
stroke: var(--stepthru-bg);
stroke-width: 4px;
stroke-linejoin: round;
}
.stepthru-figure .stepthru-tag { fill: var(--stepthru-accent); font-weight: 600; }
.stepthru-caption {
margin: 0;
min-height: 1.5em;
}
.stepthru-controls {
display: flex;
align-items: center;
gap: 0.25rem;
}
.stepthru-controls button {
display: inline-grid;
place-items: center;
min-width: 2.25rem;
min-height: 2.25rem;
padding: 0;
color: var(--stepthru-fg);
background: var(--stepthru-bg);
border: 1px solid var(--stepthru-muted);
border-radius: 4px;
cursor: pointer;
}
.stepthru-controls button:hover {
border-color: var(--stepthru-accent);
color: var(--stepthru-accent);
}
.stepthru-controls button:focus-visible,
.stepthru-scrub:focus-visible {
outline: 2px solid var(--stepthru-accent);
outline-offset: 2px;
}
.stepthru-scrub {
flex: 1;
min-width: 0; /* browsers give range inputs a minimum width; let it shrink on phones */
accent-color: var(--stepthru-accent);
}
.stepthru-controls .stepthru-speed {
padding-inline: 0.4rem;
font: inherit;
font-variant-numeric: tabular-nums;
}
.stepthru-counter {
white-space: nowrap;
font-variant-numeric: tabular-nums;
color: var(--stepthru-muted);
}
.stepthru-vars {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
min-height: 1.5em; /* keeps the layout still when a step has no variables */
margin: 0;
font-family: ui-monospace, monospace;
font-size: 0.875em;
}
.stepthru-vars div { display: flex; gap: 0.4em; }
.stepthru-vars dt { color: var(--stepthru-muted); }
.stepthru-vars dt::after { content: " ="; }
.stepthru-vars dd { margin: 0; }
.stepthru-code {
position: relative; /* lines measure their offset from here, to scroll the current one into view */
max-height: 24em; /* long code scrolls inside the panel; the current line is kept in view */
margin: 0;
padding: 0.5rem 0;
overflow: auto;
font: 0.875em/1.6 ui-monospace, monospace;
border: 1px solid color-mix(in srgb, var(--stepthru-muted) 40%, var(--stepthru-bg));
border-radius: 4px;
}
/* One block per line, so the highlight spans the full width. */
.stepthru-line {
display: block;
min-height: 1.6em;
padding: 0 0.75rem;
}
.stepthru-line.is-current {
background: color-mix(in srgb, var(--stepthru-accent) 24%, var(--stepthru-bg));
box-shadow: inset 3px 0 0 var(--stepthru-accent); /* a bar as well as a tint, so color is not the only signal */
}
|