proctolog 0.1.0

data/public/standing.css

@@ -0,0 +1,478 @@
+/* Where a pull request stands: whose turn it is, what must be met, and what
+   moved since the owner's mark. Used by the route and by a pull request's page. */
+
+:root {
+	--met: #2e6b44;
+	--waiting: #7d6a2a;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--met: #8fc99f;
+		--waiting: #d6c27a;
+	}
+}
+
+/* The turn: a word and a mark, so that it never rests on colour alone */
+
+[data-turn] {
+	--turn: var(--quiet);
+}
+
+[data-turn="owner"] {
+	--turn: var(--pin);
+}
+
+[data-turn="agent"] {
+	--turn: var(--chalk);
+}
+
+[data-turn="settled"] {
+	--turn: var(--met);
+}
+
+[data-turn="waiting"] {
+	--turn: var(--waiting);
+}
+
+.turn {
+	display: inline-flex;
+	gap: 0.4rem;
+	align-items: baseline;
+	color: var(--turn);
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+.turn::before {
+	content: "●";
+	font-size: 0.8em;
+}
+
+.turn[data-turn="agent"]::before {
+	content: "○";
+}
+
+.turn[data-turn="waiting"]::before {
+	content: "◐";
+}
+
+.turn[data-turn="settled"]::before {
+	content: "✓";
+}
+
+.reasons {
+	color: var(--quiet);
+}
+
+.moved {
+	color: var(--pin);
+}
+
+/* The route */
+
+body:has(.ledger) {
+	max-width: 90rem;
+}
+
+.turns {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 1.8rem;
+	margin: 0.8rem 0 0;
+	padding: 0;
+	list-style: none;
+}
+
+.turns li {
+	color: var(--turn);
+}
+
+.turns .n {
+	font: 500 1.5rem / 1 var(--serif);
+}
+
+.turns [data-count="0"] {
+	opacity: 0.5;
+}
+
+.taken-in {
+	margin: 0.8rem 0 0;
+	padding: 0.5rem 0.8rem;
+	border-left: 3px solid var(--chalk);
+	background: var(--rest);
+}
+
+.ledger {
+	font-size: 0.93rem;
+	table-layout: fixed;
+}
+
+.ledger th.layer {
+	width: 2.4rem;
+}
+
+.ledger th.stands {
+	width: 21rem;
+}
+
+.ledger th.decided {
+	width: 8.5rem;
+	line-height: 1.25;
+	white-space: normal;
+}
+
+.ledger td.decided {
+	white-space: nowrap;
+}
+
+.ledger th.count {
+	width: 5.5rem;
+	line-height: 1.25;
+	white-space: normal;
+}
+
+.ledger th.changed {
+	width: 13.5rem;
+}
+
+.ledger td.changed {
+	white-space: normal;
+}
+
+.ledger th,
+.ledger td {
+	padding-inline: 0.5rem;
+}
+
+.ledger td.stands {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ladder .stands {
+	margin-top: 0.1rem;
+}
+
+@media (max-width: 52rem) {
+	.ledger,
+	.ledger tbody,
+	.ledger tr,
+	.ledger td,
+	.ledger th {
+		display: block;
+	}
+
+	.ledger thead,
+	.ledger td.count {
+		display: none;
+	}
+
+	.ledger tr[data-stop] {
+		display: grid;
+		grid-template-columns: 2.4rem minmax(0, 1fr);
+		padding: 0.5rem 0;
+		border-bottom: 1px solid var(--rule);
+	}
+
+	.ledger td {
+		padding: 0.05rem 0;
+		border: 0;
+	}
+
+	.ledger td.layer {
+		grid-row: 1 / span 3;
+		text-align: left;
+	}
+
+	.ledger td.stands {
+		overflow: visible;
+		white-space: normal;
+	}
+}
+
+/* A pull request's page */
+
+.standing {
+	margin: 0 0 1.8rem;
+	padding: 1rem 0 1.2rem;
+	border-block: 1px solid var(--rule);
+}
+
+.standing .head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.8rem 2rem;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.standing h2 {
+	margin: 0;
+	font: 500 1.6rem / 1.2 var(--serif);
+}
+
+.standing h2 .turn {
+	font-weight: inherit;
+	white-space: normal;
+}
+
+.standing .head .reasons {
+	margin: 0.25rem 0 0;
+}
+
+.standing h3 {
+	margin: 1.2rem 0 0.35rem;
+	color: var(--quiet);
+	font-size: 0.72rem;
+	font-weight: 500;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+.good-to-go {
+	display: grid;
+	gap: 0.35rem;
+	justify-items: end;
+	text-align: right;
+}
+
+.good-to-go p,
+.good-to-go form {
+	margin: 0;
+}
+
+.hint {
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+.conditions {
+	display: grid;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.conditions li {
+	display: grid;
+	grid-template-columns: 8rem minmax(0, 24rem) minmax(0, 1fr);
+	gap: 0.1rem 1.2rem;
+	padding: 0.4rem 0;
+	border-top: 1px solid var(--rule);
+}
+
+.conditions .verdict {
+	color: var(--quiet);
+	font-weight: 600;
+}
+
+.conditions .verdict::before {
+	margin-right: 0.4rem;
+	content: "?";
+}
+
+.conditions [data-met="true"] .verdict {
+	color: var(--met);
+}
+
+.conditions [data-met="true"] .verdict::before {
+	content: "✓";
+}
+
+.conditions [data-met="false"] .verdict {
+	color: var(--pin);
+}
+
+.conditions [data-met="false"] .verdict::before {
+	content: "✗";
+}
+
+.conditions [data-met="nil"] .verdict {
+	color: var(--waiting);
+}
+
+.conditions .detail {
+	color: var(--quiet);
+}
+
+.waiting {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 0.8rem;
+	align-items: baseline;
+	margin: 1.2rem 0 0;
+}
+
+.waiting input {
+	flex: 1 1 18rem;
+	max-width: 34rem;
+	padding: 0.3rem 0.6rem;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	background: var(--paper);
+	color: inherit;
+	font: inherit;
+}
+
+.waiting input:focus-visible {
+	border-color: var(--chalk);
+	outline: 2px solid color-mix(in srgb, var(--chalk) 35%, transparent);
+}
+
+/* What changed since the mark: the first thing on the page */
+
+.since {
+	margin: 0 0 1.8rem;
+	padding: 1rem 1.2rem 1.1rem;
+	border: 1px solid var(--pin);
+	border-radius: 4px;
+	background: color-mix(in srgb, var(--pin) 7%, transparent);
+}
+
+.since h2 {
+	margin: 0 0 0.3rem;
+	font: 500 1.4rem / 1.2 var(--serif);
+}
+
+.since h3 {
+	margin: 1rem 0 0.25rem;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.since p {
+	margin: 0.2rem 0;
+	max-width: 62ch;
+}
+
+.since code {
+	font-family: ui-monospace, Menlo, monospace;
+	font-size: 0.9em;
+}
+
+.since .absent {
+	color: var(--pin);
+}
+
+.since .none {
+	color: var(--quiet);
+}
+
+.files-changed {
+	display: grid;
+	gap: 0.15rem;
+	margin: 0.4rem 0 0;
+	padding: 0;
+	list-style: none;
+}
+
+.files-changed li {
+	display: flex;
+	gap: 1rem;
+	justify-content: space-between;
+	max-width: 46rem;
+	overflow-wrap: anywhere;
+}
+
+.files-changed .lines {
+	flex: none;
+	white-space: nowrap;
+}
+
+.files-changed .dropped {
+	color: var(--quiet);
+}
+
+.added {
+	color: var(--met);
+}
+
+.removed {
+	color: var(--pin);
+}
+
+.paragraphs {
+	margin: 0.5rem 0;
+}
+
+.paragraphs summary {
+	cursor: pointer;
+}
+
+.paragraphs pre {
+	margin: 0.3rem 0 0;
+	padding: 0.4rem 0.7rem;
+	border-left: 3px solid var(--marker);
+	background: color-mix(in srgb, var(--marker) 8%, transparent);
+	font:
+		0.86rem / 1.45 ui-monospace,
+		Menlo,
+		monospace;
+	overflow-wrap: anywhere;
+	white-space: pre-wrap;
+}
+
+.paragraphs.removed {
+	--marker: var(--pin);
+}
+
+.paragraphs.added {
+	--marker: var(--met);
+}
+
+/* The scenarios of this pull request, with the partial the scenarios page uses */
+
+.pr-scenarios {
+	margin: 0 0 1.8rem;
+	border-bottom: 1px solid var(--rule);
+}
+
+.pr-scenarios > summary {
+	display: flex;
+	gap: 0.5rem;
+	align-items: baseline;
+	padding: 0.2rem 0 0.9rem;
+	cursor: pointer;
+	list-style: none;
+}
+
+.pr-scenarios > summary::-webkit-details-marker {
+	display: none;
+}
+
+.pr-scenarios > summary::before {
+	content: "▸";
+	width: 0.9rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+.pr-scenarios[open] > summary::before {
+	content: "▾";
+}
+
+.pr-scenarios .heading {
+	font: italic 1.15rem / 1.3 var(--serif);
+}
+
+.pr-scenarios > summary .count {
+	margin-left: 0;
+}
+
+.pr-scenarios .lost {
+	padding: 0;
+	border: 0;
+	background: none;
+}
+
+@media (max-width: 40rem) {
+	.conditions li {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.good-to-go {
+		justify-items: start;
+		text-align: left;
+	}
+}

data/public/terminal-apl.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="56" height="14" viewBox="0 0 56 14">
+  <g font-family="Apple Symbols, Menlo, Consolas, monospace" font-size="14" letter-spacing="2">
+    <text x="1" y="12.7" fill="#151515">⌶⌸⌹⌺</text>
+    <text x="1" y="12" fill="#929292">⌶⌸⌹⌺</text>
+  </g>
+</svg>

data/public/terminal-cuneiform.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="56" height="14" viewBox="0 0 56 14">
+  <text x="0" y="11" fill="#fff" font-family="Noto Sans Cuneiform, serif" font-size="15" textLength="56" lengthAdjust="spacingAndGlyphs">𒀸𒀹𒀼𒀹</text>
+</svg>

data/public/terminal-grain-dots.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="28" viewBox="0 0 64 28">
+  <g fill="#fff" opacity=".07" font-family="Apple Symbols, Segoe UI Symbol, monospace" font-size="14">
+    <text x="0" y="12" textLength="64" lengthAdjust="spacingAndGlyphs">⠰⠲⠴⠶⠳⠷⠷⠷</text>
+    <text x="0" y="26" textLength="64" lengthAdjust="spacingAndGlyphs">⠷⠳⠶⠴⠲⠰⠰⠰</text>
+  </g>
+</svg>

data/public/terminal-grain-weave.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="24" viewBox="0 0 48 24">
+  <g fill="#fff" opacity=".045" font-family="Apple Symbols, Menlo, monospace" font-size="12">
+    <text x="0" y="10" textLength="48" lengthAdjust="spacingAndGlyphs">⌸⌹⌺⌸⌹⌺</text>
+    <text x="-4" y="22" textLength="56" lengthAdjust="spacingAndGlyphs">⌺⌸⌹⌺⌸⌹⌺</text>
+  </g>
+</svg>

data/public/terminal-grain-wedges.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="32" viewBox="0 0 64 32">
+  <g fill="#fff" opacity=".065" font-family="Noto Sans Cuneiform, serif" font-size="14">
+    <text x="0" y="12" textLength="64" lengthAdjust="spacingAndGlyphs">𒀸𒀹𒀼𒀹</text>
+    <text transform="translate(64 32) rotate(180)" x="0" y="12" textLength="64" lengthAdjust="spacingAndGlyphs">𒀸𒀹𒀼𒀹</text>
+  </g>
+</svg>

data/public/terminal-shades.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="12" viewBox="0 0 64 12">
+  <text x="0" y="10" fill="#888" font-family="Apple Symbols, Segoe UI Symbol, monospace" font-size="12" textLength="64" lengthAdjust="spacingAndGlyphs">⠰⠲⠴⠶⠳⠷⠷⠷</text>
+</svg>