proctolog 0.1.0

data/public/pull_request.css

@@ -0,0 +1,805 @@
+/* The page of one pull request: its description in GitHub's own words, the
+   notes beside it, and the marks that tie the two together. */
+
+:root {
+	--prose: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
+	--mono: ui-monospace, Menlo, monospace;
+}
+
+/* The head */
+
+.pull-request {
+	margin-bottom: 1.4rem;
+}
+
+.along {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 1.3rem;
+	align-items: baseline;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+.along .position {
+	margin-right: auto;
+	font-size: 0.75rem;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+}
+
+.along a {
+	color: var(--quiet);
+	text-decoration: none;
+}
+
+.along a:hover {
+	color: var(--chalk);
+	text-decoration: underline;
+}
+
+.pull-request h1 .number {
+	margin-right: 0.3rem;
+	color: var(--quiet);
+}
+
+.elsewhere {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3rem 1.5rem;
+	align-items: baseline;
+	margin: 0;
+	font-size: 0.87rem;
+}
+
+.elsewhere .read {
+	margin-left: auto;
+	color: var(--quiet);
+}
+
+.elsewhere form[data-code] {
+	margin: 0;
+}
+
+/* Where it stands, in one line under the title */
+
+.status {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 2rem;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0 0 0.7rem;
+	padding: 0.55rem 0;
+	border-block: 1px solid var(--rule);
+}
+
+.status .stands {
+	margin: 0;
+}
+
+.status .turn {
+	font: 500 1.15rem / 1.2 var(--serif);
+}
+
+.status .good-to-go {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem 1rem;
+	align-items: center;
+	justify-items: unset;
+	text-align: left;
+}
+
+button.primary kbd {
+	border-color: currentcolor;
+	opacity: 0.8;
+}
+
+/* The drawer: what must be met, the scenarios, how it connects */
+
+.drawer {
+	margin: 0.6rem 0 1.6rem;
+	border-bottom: 1px solid var(--rule);
+}
+
+.drawer > summary {
+	display: flex;
+	gap: 0.5rem;
+	align-items: baseline;
+	padding: 0.5rem 0;
+	color: var(--quiet);
+	cursor: pointer;
+	list-style: none;
+}
+
+.drawer > summary::-webkit-details-marker {
+	display: none;
+}
+
+.drawer > summary::before {
+	content: "▸";
+	width: 0.9rem;
+	font-size: 0.8rem;
+}
+
+.drawer[open] > summary::before {
+	content: "▾";
+}
+
+.drawer > summary .heading {
+	color: var(--ink);
+}
+
+.drawer > summary .count {
+	font-size: 0.87rem;
+}
+
+.drawer .standing {
+	margin-bottom: 1.2rem;
+	padding: 0;
+	border: 0;
+}
+
+.drawer .standing h3 {
+	margin-top: 0.4rem;
+}
+
+button {
+	font: inherit;
+}
+
+button.quiet,
+.elsewhere button {
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--chalk);
+	cursor: pointer;
+	text-decoration: underline;
+	text-underline-offset: 0.18em;
+}
+
+button.quiet:hover {
+	color: var(--ink);
+}
+
+.button_to {
+	display: inline;
+}
+
+/* How it connects */
+
+.connections {
+	margin: 0 0 2rem;
+	padding: 0.9rem 0 1.1rem;
+	border-block: 1px solid var(--rule);
+}
+
+.connections h2,
+.lost h2,
+.margin h2 {
+	margin: 0 0 0.55rem;
+	font: italic 1.05rem / 1.3 var(--serif);
+}
+
+.connections dl {
+	display: grid;
+	grid-template-columns: max-content minmax(0, 1fr);
+	gap: 0.5rem 1.8rem;
+	margin: 0;
+}
+
+.connections dl > div {
+	display: contents;
+}
+
+.connections dt {
+	color: var(--quiet);
+}
+
+.connections dd {
+	margin: 0;
+}
+
+.sharing,
+.named,
+.files {
+	display: grid;
+	gap: 0.25rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.sharing summary {
+	cursor: pointer;
+}
+
+.count {
+	margin-left: 0.4rem;
+	color: var(--quiet);
+	font-size: 0.82rem;
+}
+
+.files {
+	margin: 0.3rem 0 0.6rem 1rem;
+	font-size: 0.85rem;
+	overflow-wrap: anywhere;
+}
+
+/* Notes that have lost their place */
+
+.lost {
+	margin-bottom: 1.6rem;
+	padding: 1rem 1.2rem;
+	border: 1px solid var(--pin);
+	border-radius: 4px;
+	background: color-mix(in srgb, var(--pin) 7%, transparent);
+}
+
+.lost p {
+	margin: 0 0 0.8rem;
+	max-width: 62ch;
+}
+
+/* The page: the description, and the notes beside it */
+
+.page {
+	display: grid;
+	grid-template-columns: minmax(0, 46rem) minmax(15rem, 1fr);
+	gap: 3rem;
+	align-items: start;
+}
+
+.description {
+	min-width: 0;
+}
+
+[data-reading]:focus-visible,
+li[data-decision]:focus-visible {
+	outline: 2px solid var(--chalk);
+	outline-offset: 4px;
+}
+
+[data-reading] {
+	scroll-margin-block: 1rem;
+}
+
+details.section {
+	border-top: 1px solid var(--rule);
+}
+
+details.section:last-child {
+	border-bottom: 1px solid var(--rule);
+}
+
+details.section > summary {
+	display: flex;
+	gap: 0.5rem;
+	align-items: baseline;
+	padding: 0.7rem 0;
+	cursor: pointer;
+	list-style: none;
+}
+
+details.section > summary::-webkit-details-marker {
+	display: none;
+}
+
+details.section > summary::before {
+	content: "▸";
+	width: 0.9rem;
+	color: var(--quiet);
+	font-size: 0.8rem;
+}
+
+details.section[open] > summary::before {
+	content: "▾";
+}
+
+details.section .heading {
+	font: italic 1.15rem / 1.3 var(--serif);
+}
+
+details.section > summary .count {
+	margin-left: 0;
+}
+
+/* GitHub's own HTML, set quietly */
+
+[data-quotable] {
+	padding: 0 0 1.2rem 1.4rem;
+	font: 1.04rem / 1.62 var(--prose);
+	overflow-wrap: break-word;
+}
+
+[data-quotable] > :first-child {
+	margin-top: 0;
+}
+
+[data-quotable] p {
+	margin: 0.8em 0;
+}
+
+[data-quotable] h3,
+[data-quotable] h4 {
+	margin: 1.5em 0 0.4em;
+	font: italic 500 1.1rem / 1.35 var(--serif);
+}
+
+[data-quotable] ul,
+[data-quotable] ol {
+	margin: 0.8em 0;
+	padding-left: 1.4rem;
+}
+
+[data-quotable] li {
+	margin: 0.35em 0;
+}
+
+[data-quotable] li > p {
+	margin: 0.3em 0;
+}
+
+[data-quotable] .contains-task-list {
+	padding-left: 0;
+}
+
+[data-quotable] .task-list-item {
+	position: relative;
+	padding-left: 1.7rem;
+	list-style: none;
+}
+
+[data-quotable] .task-list-item-checkbox {
+	position: absolute;
+	top: 0.5em;
+	left: 0;
+	margin: 0;
+}
+
+[data-quotable] code {
+	padding: 0.08em 0.32em;
+	border-radius: 3px;
+	background: var(--rest);
+	font: 0.84em / 1.4 var(--mono);
+	overflow-wrap: anywhere;
+}
+
+[data-quotable] pre {
+	margin: 1em 0;
+	padding: 0.8rem 1rem;
+	border-radius: 4px;
+	background: var(--rest);
+	font: 0.82rem / 1.55 var(--mono);
+	overflow-x: auto;
+}
+
+[data-quotable] pre code {
+	padding: 0;
+	background: none;
+	font: inherit;
+	overflow-wrap: normal;
+}
+
+[data-quotable] .highlight,
+[data-quotable] .snippet-clipboard-content {
+	max-width: 100%;
+}
+
+[data-quotable] blockquote {
+	margin: 1em 0;
+	padding-left: 1rem;
+	border-left: 3px solid var(--rule);
+	color: var(--quiet);
+}
+
+[data-quotable] markdown-accessiblity-table {
+	display: block;
+	margin: 1em 0;
+	overflow-x: auto;
+}
+
+[data-quotable] table {
+	border-collapse: collapse;
+	font:
+		0.9rem / 1.45 ui-sans-serif,
+		system-ui,
+		sans-serif;
+}
+
+[data-quotable] th,
+[data-quotable] td {
+	padding: 0.35rem 0.8rem 0.35rem 0;
+	border-bottom: 1px solid var(--rule);
+	text-align: left;
+	vertical-align: top;
+}
+
+[data-quotable] th {
+	color: var(--quiet);
+	font-weight: 500;
+}
+
+[data-quotable] hr {
+	margin: 1.5em 0;
+	border: 0;
+	border-top: 1px solid var(--rule);
+}
+
+[data-quotable] details {
+	margin: 1em 0;
+}
+
+[data-quotable] details > summary {
+	cursor: pointer;
+}
+
+[data-quotable] img {
+	max-width: 100%;
+}
+
+/* Pictures, and the boxes drawn on them */
+
+figure.picture {
+	position: relative;
+	display: block;
+	width: fit-content;
+	max-width: 100%;
+	margin: 1.1rem 0;
+}
+
+figure.picture img {
+	display: block;
+	width: auto;
+	max-width: 100%;
+	height: auto;
+	max-height: 80vh;
+	border: 1px solid var(--rule);
+	border-radius: 3px;
+	cursor: crosshair;
+	user-select: none;
+}
+
+figure.picture::after {
+	content: attr(data-picture);
+	display: block;
+	margin-top: 0.3rem;
+	color: var(--quiet);
+	font: 0.72rem / 1.3 var(--mono);
+	overflow-wrap: anywhere;
+}
+
+/* A pair: the same screen before a change and after it, side by side under
+   one name, each half named in its corner. A box drawn on a half stays on
+   it, so the half is what its boxes are placed in. */
+figure.picture.pair {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, auto));
+	gap: 0 12px;
+}
+
+figure.pair::after {
+	grid-column: 1 / -1;
+}
+
+figure.pair .half {
+	position: relative;
+	display: block;
+}
+
+figure.pair .said {
+	position: absolute;
+	top: 4px;
+	left: 4px;
+	padding: 0 4px;
+	background: var(--paper);
+	color: var(--quiet);
+	font: 0.72rem / 1.3 var(--mono);
+	pointer-events: none;
+}
+
+.region {
+	--edge: var(--kind, var(--chalk));
+	position: absolute;
+	box-sizing: border-box;
+	border: 2px solid var(--edge);
+	background: color-mix(in srgb, var(--edge) 14%, transparent);
+	pointer-events: none;
+}
+
+.region::after {
+	content: "";
+	position: absolute;
+	top: -2px;
+	left: -2px;
+	width: 0.75rem;
+	height: 0.75rem;
+	background: var(--edge);
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.region.pin {
+	width: 1rem;
+	height: 1rem;
+	margin: -0.5rem 0 0 -0.5rem;
+	border-radius: 50%;
+	background: color-mix(in srgb, var(--edge) 35%, transparent);
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.region.pin::after {
+	display: none;
+}
+
+.region.draft {
+	border-style: dashed;
+}
+
+.region[data-state="confirmed"] {
+	opacity: 0.5;
+}
+
+/* Marks on words */
+
+mark.note {
+	--edge: var(--kind, var(--pin));
+	border-bottom: 2px solid var(--edge);
+	background: color-mix(in srgb, var(--edge) 17%, transparent);
+	color: inherit;
+	cursor: pointer;
+}
+
+mark.note[data-state="addressed"] {
+	border-bottom-style: dashed;
+}
+
+mark.note[data-state="confirmed"] {
+	border-bottom-style: dotted;
+	background: none;
+}
+
+mark.note,
+.region {
+	transition: box-shadow 0.6s;
+}
+
+[id] {
+	scroll-margin-block: 4rem;
+}
+
+/* The + beside a block: it shows while the pointer is on the block or the
+   keyboard is in it, and a note written there opens right under the block. */
+
+[data-quotable] {
+	position: relative;
+}
+
+.plus {
+	position: absolute;
+	left: 0;
+	width: 1.2rem;
+	height: 1.2rem;
+	margin-top: 0.25em;
+	padding: 0;
+	border: 1px solid var(--rule);
+	border-radius: 50%;
+	background: var(--paper);
+	color: var(--quiet);
+	font:
+		0.95rem / 1 ui-sans-serif,
+		system-ui,
+		sans-serif;
+	cursor: pointer;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.12s;
+}
+
+/* A box of a task list is positioned itself, so its gutter is outside it. */
+.task-list-item > .plus {
+	left: -1.5rem;
+}
+
+.plus.here,
+.plus:focus-visible {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.plus:hover {
+	border-color: var(--chalk);
+	color: var(--chalk);
+}
+
+.task-list-item > .beneath {
+	margin-bottom: 0.7rem;
+}
+
+/* Four buttons under each of hundreds of boxes: only the box at hand shows them plainly. */
+.task-list-item:not(:hover, :focus-within) > .beneath .actions {
+	opacity: 0.6;
+}
+
+.how {
+	max-width: 62ch;
+	margin: 0.4rem 0 0;
+	color: var(--quiet);
+	font-size: 0.87rem;
+}
+
+/* The margin */
+
+.margin h3 {
+	margin: 1.3rem 0 0.45rem;
+	color: var(--quiet);
+	font-size: 0.72rem;
+	font-weight: 500;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+.margin .empty {
+	max-width: 30ch;
+	margin: 0;
+	color: var(--quiet);
+}
+
+.lost .card {
+	background: var(--paper);
+}
+
+.set-aside {
+	margin-top: 1.4rem;
+}
+
+details.set-aside summary {
+	color: var(--quiet);
+	cursor: pointer;
+}
+
+.set-aside .cards {
+	margin-top: 0.6rem;
+}
+
+/* Writing a note */
+
+dialog {
+	width: min(34rem, calc(100vw - 2rem));
+	padding: 1.2rem 1.4rem 1.1rem;
+	border: 1px solid var(--rule);
+	border-radius: 6px;
+	background: var(--paper);
+	color: var(--ink);
+	box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--ink) 25%, transparent);
+}
+
+dialog::backdrop {
+	background: color-mix(in srgb, var(--ink) 40%, transparent);
+}
+
+#note-heading {
+	margin: 0 0 0.6rem;
+	font: 500 1.3rem / 1.2 var(--serif);
+}
+
+#note-dialog .words {
+	max-height: 7rem;
+	margin: 0 0 0.8rem;
+	padding-left: 0.8rem;
+	border-left: 3px solid var(--rule);
+	color: var(--quiet);
+	font: italic 0.95rem / 1.45 var(--serif);
+	overflow: auto;
+	overflow-wrap: anywhere;
+}
+
+dialog .kinds {
+	display: flex;
+	gap: 1.4rem;
+	margin: 0 0 0.7rem;
+	padding: 0;
+	border: 0;
+}
+
+dialog textarea {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.6rem 0.7rem;
+	border: 1px solid var(--rule);
+	border-radius: 4px;
+	background: var(--paper);
+	color: inherit;
+	font: inherit;
+	line-height: 1.5;
+	resize: vertical;
+}
+
+dialog textarea:focus-visible {
+	border-color: var(--chalk);
+	outline: 2px solid color-mix(in srgb, var(--chalk) 35%, transparent);
+}
+
+dialog .buttons {
+	display: flex;
+	gap: 1.2rem;
+	justify-content: flex-end;
+	align-items: baseline;
+	margin-top: 0.9rem;
+}
+
+button.primary {
+	padding: 0.4rem 1rem;
+	border: 0;
+	border-radius: 4px;
+	background: var(--chalk);
+	color: var(--paper);
+	cursor: pointer;
+}
+
+.selection {
+	position: absolute;
+	z-index: 5;
+	padding: 0.25rem 0.7rem;
+	border: 0;
+	border-radius: 4px;
+	background: var(--ink);
+	color: var(--paper);
+	font-size: 0.8rem;
+	cursor: pointer;
+	box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 30%, transparent);
+}
+
+.selection[hidden] {
+	display: none;
+}
+
+/* The margin goes under the description when the page is not wide enough for both */
+
+@media (min-width: 1100px) {
+	.margin {
+		position: sticky;
+		top: 1rem;
+		max-height: calc(100vh - 2rem);
+		overflow-y: auto;
+	}
+}
+
+@media (max-width: 1099px) {
+	.page {
+		grid-template-columns: minmax(0, 1fr);
+		gap: 2rem;
+	}
+}
+
+@media (max-width: 40rem) {
+	.connections dl {
+		grid-template-columns: minmax(0, 1fr);
+		gap: 0.1rem;
+	}
+
+	.connections dd {
+		margin-bottom: 0.5rem;
+	}
+
+	[data-quotable] {
+		padding-left: 0.4rem;
+	}
+
+	.plus {
+		display: none;
+	}
+}
+
+.description [data-decision][aria-current] {
+	background: var(--rest);
+	outline: 2px solid var(--chalk);
+	outline-offset: 0.35rem;
+}
+
+.description [data-decision] {
+	scroll-margin-block: 3rem;
+}