proctolog 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 784717d224b472eba9ce15227d5ffb578dabce10741c802d6cd62e642f8aee96
-  data.tar.gz: 879591d6f7db0c4448563096e0e82ed566f68364c2c55e5b0ac03a739855a207
+  metadata.gz: b6eb6543861d7372fd74ab555d42c786fd2880d7f236a2a606cb8d8a69dda443
+  data.tar.gz: 9c3785dbab77433adad9a7d388bd451864a213ca206cb3e99a919b9ade5773ce
 SHA512:
-  metadata.gz: 0e7c19af833d9fe3099f47e221f7663cd9c43066dcdf08b7a96b48e04374af2ac4f4017158dc308f244a07abc827d78ba0563ae85e9d2f9a3c9bdcfb5bc175cc
-  data.tar.gz: 5da7be3fd3fcd54977e57f350b6f496ddda3d70b5c10982976116d8e1d814fc052a503526039195065f73ce1587415fb938fa251b93e8156313c4bb0b335f1dc
+  metadata.gz: 83f284129d2ab34f5235510c39b196a181158a5b853dcbe41b31b855f0400df548c41e0d631902e5b398a8f1fcb893856b0509d3bd70d7232ddbbf128cf62090
+  data.tar.gz: 80cf8f0953c7f7badbc7c5ed7791b4211b2f9a5d9047bb7bb7c8a2117b2f6ff133edc409c12b46c948d58e03862a536cf94f5e27adea2b9715d55a649d5d4900

data/CHANGELOG.md

@@ -4,6 +4,16 @@ What changed in each version of the `proctolog` gem, newest first. Versions
 are semantic ([docs/manual/updates.md](docs/manual/updates.md)); a release
 that asks something of you says what under **You do**.
 
+## 0.1.1
+
+- The Try it rail follows the reading column and its keys rather than the far
+  edge of the window, and grows to 20rem on wide screens; its outline scrolls
+  on its own, leaving the starter room.
+- Even insets: 16px for page explanations, toolbars and sections, 12px for a
+  scenario's cells; result choices sit in two steady columns.
+- `bin/release` no longer stops for uncommitted changes here: GitHub releases
+  main as origin has it.
+
 ## 0.1.0
 
 The first one published as a gem.

data/lib/proctolog/version.rb

@@ -3,5 +3,5 @@
 module Proctolog
   # Semantic: a patch fixes, a minor adds, a major asks something new of the
   # owner (a command gone, a file moved). docs/manual/updates.md says more.
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/public/terminal.css

@@ -41,9 +41,12 @@
 	--change: var(--ink);
 	--question: var(--ink);
 	--side: 320px;
+	--section-gap: 16px;
 	--group-gap: 24px;
 	--row-pad: 4px;
 	--control-gap: 8px;
+	--lane-gap: 20px;
+	--key-space: 12rem;
 
 	/* One bead, 2.3px across, every 6px: the line round the plaque's figure,
 	   and the only line the desk draws that is not a hairline. It frames the
@@ -128,6 +131,13 @@ h1 {
 	font-size: 0.933rem;
 }
 
+.burst .lede,
+.burst .tally,
+.films-head .tally {
+	box-sizing: border-box;
+	padding-inline: 16px;
+}
+
 /* The title plate has a cut corner and a stippled lower edge. Its full width
    belongs to the title, with no ornament that could be mistaken for a control. */
 .burst h1,
@@ -454,7 +464,7 @@ body.shell::before {
 
 .side h2 {
 	margin-top: var(--group-gap);
-	padding: 6px 12px;
+	padding: 6px 16px;
 	border-block: 1px solid var(--rule-soft);
 	background: var(--surface-head);
 	color: var(--quiet);
@@ -768,6 +778,10 @@ body.shell .foot {
 	align-items: center;
 }
 
+.modebar .mode > span {
+	white-space: nowrap;
+}
+
 .modebar .mode strong {
 	padding: 0 1ch;
 	background: var(--ink);
@@ -1180,10 +1194,10 @@ body.shell .foot {
    beside it, set smaller, measures the same; it gives way before the keys
    beside it and the outline do. */
 body[data-page="pull_requests"] > .main {
-	--rail: 15rem;
+	--rail: 16rem;
 	--measure: min(
 		41rem,
-		calc(100vw - var(--side) - var(--gutter) - var(--rail) - 18px - 14rem - 28px)
+		calc(100vw - var(--side) - var(--gutter) - var(--rail) - 24px - var(--key-space) - var(--lane-gap) - var(--lane-gap))
 	);
 }
 
@@ -1321,7 +1335,7 @@ body[data-page="pull_requests"] .flash {
 .pull-request .whole {
 	position: absolute;
 	top: 5px;
-	left: calc(100% + 28px);
+	left: calc(100% + var(--lane-gap));
 	display: none;
 }
 
@@ -1333,7 +1347,7 @@ body[data-page="pull_requests"] .flash {
 .cursor .beside {
 	gap: var(--control-gap);
 	justify-items: start;
-	width: 13.5rem;
+	width: var(--key-space);
 	overflow: hidden;
 	color: var(--quiet);
 	font-size: 0.867rem;
@@ -1408,7 +1422,7 @@ body[data-page="pull_requests"] .flash {
 .cursor .beside {
 	position: absolute;
 	top: 2px;
-	left: calc(var(--gutter) + var(--measure) + 28px);
+	left: calc(var(--gutter) + var(--measure) + var(--lane-gap));
 	display: grid;
 	pointer-events: auto;
 }
@@ -1430,13 +1444,13 @@ li[data-decision]:focus-visible,
 
 .rail {
 	position: fixed;
-	top: 36px;
-	right: 18px;
-	bottom: 56px;
+	top: 32px;
+	left: calc(var(--side) + var(--gutter) + var(--measure) + var(--key-space) + var(--lane-gap) + var(--lane-gap));
+	bottom: calc(var(--foot-height, 44px) + 12px);
 	z-index: 2;
 	display: flex;
 	flex-direction: column;
-	gap: var(--group-gap);
+	gap: var(--section-gap);
 	width: var(--rail);
 }
 
@@ -1446,17 +1460,20 @@ li[data-decision]:focus-visible,
 .outline {
 	display: grid;
 	flex: none;
+	max-height: 48%;
 	padding: 8px;
+	overflow-y: auto;
 	border: 1px solid var(--rule);
 	background: var(--panel);
 	font-size: 0.867rem;
+	scrollbar-width: thin;
 }
 
 .outline :is(button, a) {
 	display: flex;
 	gap: 1ch;
 	justify-content: space-between;
-	padding: 4px 6px 4px 0;
+	padding: 3px 6px 3px 0;
 	border: 0;
 	background: none;
 	color: var(--quiet);
@@ -1502,8 +1519,8 @@ li[data-decision]:focus-visible,
 }
 
 .outline .apart {
-	margin-top: 12px;
-	padding-top: 12px;
+	margin-top: 8px;
+	padding-top: 8px;
 	border-top: 1px solid var(--rule);
 }
 
@@ -1524,6 +1541,7 @@ details.section > summary .count[data-waits="true"] {
    same beads as Standing distinguish what is ready from what still waits. */
 
 .try {
+	flex: 1;
 	min-height: 0;
 	padding: 0;
 	overflow-y: auto;
@@ -1531,10 +1549,16 @@ details.section > summary .count[data-waits="true"] {
 	background: var(--surface);
 	font-size: 0.867rem;
 	line-height: 1.5;
+	overscroll-behavior-y: contain;
+	scroll-padding-block: 12px;
+	scrollbar-gutter: stable;
 	scrollbar-width: thin;
 }
 
 .try h2 {
+	position: sticky;
+	top: 0;
+	z-index: 1;
 	margin: 0;
 	padding: 8px 12px;
 	border-bottom: 1px solid var(--rule);
@@ -1622,7 +1646,7 @@ details.section > summary .count[data-waits="true"] {
 .try-pop {
 	position: fixed;
 	inset: 42px auto auto;
-	right: calc(18px + var(--rail) + 14px);
+	right: max(16px, calc(100vw - var(--side) - var(--gutter) - var(--measure) - var(--key-space) - var(--lane-gap) - var(--lane-gap) + 14px));
 	width: min(72ch, 56vw);
 	max-height: calc(100vh - 110px);
 	margin: 0;
@@ -1723,7 +1747,7 @@ details.section > summary .count[data-waits="true"] {
 .try .tail {
 	position: fixed;
 	top: 42px;
-	right: calc(18px + var(--rail) + 14px);
+	right: max(16px, calc(100vw - var(--side) - var(--gutter) - var(--measure) - var(--key-space) - var(--lane-gap) - var(--lane-gap) + 14px));
 	z-index: 9;
 	display: none;
 	width: min(84ch, 52vw);
@@ -1850,7 +1874,7 @@ main.description + details.section {
 
 details.section > summary {
 	position: relative;
-	gap: 1.4ch;
+	gap: 1ch;
 	align-items: baseline;
 	margin-inline: -16px;
 	padding: 9px 16px;
@@ -1917,6 +1941,7 @@ details.section > summary .count {
 	margin-left: 0;
 	color: var(--quiet);
 	font-size: 0.867rem;
+	white-space: nowrap;
 }
 
 [data-quotable] {
@@ -2865,14 +2890,14 @@ body[data-page="decisions"] .empty {
 }
 
 .part {
-	margin-top: var(--group-gap);
+	margin-top: var(--section-gap);
 	border: 1px solid var(--rule);
 	background: var(--surface);
 }
 
 .part header {
 	position: relative;
-	padding: 10px 16px;
+	padding: 8px 16px;
 	border-top: 0;
 	border-bottom: 0;
 	background: var(--surface-head);
@@ -3003,14 +3028,14 @@ details.more-pictures > summary {
    cursor rests on, each decision with its pull request above it. */
 
 .theme-group {
-	margin-top: var(--group-gap);
+	margin-top: var(--section-gap);
 	border: 1px solid var(--rule);
 	background: var(--surface);
 }
 
 .theme-group header {
 	position: relative;
-	padding: 10px 16px;
+	padding: 8px 16px;
 	border-top: 0;
 	background: var(--surface-head);
 }
@@ -3103,14 +3128,14 @@ details.more-pictures > summary {
 
 .box[aria-current] {
 	margin: 0;
-	padding: 16px 16px 12px 2.6rem;
+	padding: 12px 16px 12px 2.6rem;
 	border-top: 1px solid var(--rule);
 	background: var(--rest);
 	outline: 0;
 }
 
 .box[aria-current]::before {
-	top: 1.45rem;
+	top: 1.2rem;
 }
 
 .box[aria-current] .body {
@@ -3123,12 +3148,12 @@ details.more-pictures > summary {
 .box[aria-current] .body > strong:first-of-type,
 .box[aria-current] .body > p:first-child > strong:first-child {
 	display: block;
-	margin-bottom: 8px;
+	margin-bottom: 4px;
 }
 
 .box[aria-current] .beneath {
 	max-width: none;
-	margin-top: 14px;
+	margin-top: 12px;
 	font: inherit;
 	font-size: 1rem;
 }
@@ -3142,11 +3167,16 @@ details.more-pictures > summary {
 	margin-top: 0;
 }
 
+.box button.choice,
+.box .beneath > .actions > a {
+	padding-block: 6px;
+}
+
 /* The cursor at the decision at hand, in the gutter, as on a pull request's page. */
 .decisions .box[aria-current] .body::before {
 	content: ">";
 	position: absolute;
-	top: 14px;
+	top: 10px;
 	left: -2.4ch;
 	color: var(--ink);
 	font-size: 1rem;
@@ -3294,13 +3324,20 @@ details.more-pictures > summary {
 }
 
 .filters {
-	gap: var(--control-gap) 2.4ch;
+	gap: 4px 12px;
 	align-items: baseline;
 	margin-top: 12px;
 	padding-top: 10px;
 	border-top: 1px solid var(--rule);
 }
 
+.filters button.quiet,
+.filters a {
+	min-height: 24px;
+	padding: 2px 6px;
+	white-space: nowrap;
+}
+
 .filters [data-filter="open"],
 .filters [data-filter="all"] {
 	margin-left: 0;
@@ -3309,8 +3346,7 @@ details.more-pictures > summary {
 .filters button.quiet[aria-pressed="true"],
 .filters a[aria-current] {
 	border: 0;
-	text-decoration: underline;
-	text-underline-offset: 0.4em;
+	text-decoration: none;
 	background: var(--plate);
 	color: var(--panel);
 	font-weight: 700;
@@ -3333,6 +3369,7 @@ details.more-pictures > summary {
 }
 
 .filters .by-state > summary {
+	padding-block: 2px;
 	color: var(--quiet);
 }
 
@@ -3367,6 +3404,8 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .server {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) max-content;
 	gap: 4px 2.4ch;
 	margin: 16px 0 0;
 	padding: 12px 16px;
@@ -3376,6 +3415,9 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .server .status {
+	grid-column: 1;
+	grid-row: 1;
+	justify-content: flex-start;
 	gap: 1.2ch;
 	padding: 0;
 	border: 0;
@@ -3403,14 +3445,22 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .server .where {
-	flex-basis: 100%;
+	grid-column: 1 / -1;
 	min-width: 0;
 	margin-left: calc(9px + 1.2ch);
 	overflow-wrap: anywhere;
 }
 
-.server .action {
-	margin: 0 0 0 calc(9px + 1.2ch);
+.server > form {
+	grid-column: 2;
+	grid-row: 1;
+	margin: 0;
+}
+
+.server > details {
+	grid-column: 1 / -1;
+	min-width: 0;
+	margin-left: calc(9px + 1.2ch);
 }
 
 .scenarios h2 {
@@ -3444,8 +3494,8 @@ body[data-page="scenarios"] main.scenarios {
 
 .scenario {
 	grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem) minmax(10rem, 15rem);
-	gap: 12px 2.4ch;
-	padding: 16px 0;
+	gap: 0;
+	padding: 0;
 	border-top: 1px solid var(--rule);
 	background: var(--surface);
 }
@@ -3455,12 +3505,12 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .scenario > .text {
-	padding-left: 12px;
+	padding: 12px;
 }
 
 .scenario > .act,
 .scenario > .seen {
-	padding: 8px 12px;
+	padding: 12px;
 	border-left: 1px solid var(--rule);
 	background: var(--surface-head);
 }
@@ -3501,6 +3551,7 @@ body[data-page="scenarios"] main.scenarios {
 	font-weight: 700;
 	text-decoration: underline;
 	text-underline-offset: 0.22em;
+	text-align: left;
 }
 
 .open:disabled {
@@ -3511,7 +3562,14 @@ body[data-page="scenarios"] main.scenarios {
 }
 
 .results {
-	gap: var(--control-gap) 1.6ch;
+	display: grid;
+	grid-template-columns: repeat(2, max-content);
+	gap: var(--control-gap) 12px;
+}
+
+.results .result {
+	min-height: 24px;
+	text-align: left;
 }
 
 .result,
@@ -3777,7 +3835,7 @@ body[data-page="prompts"] .main > details {
 
 .round-results h2 {
 	margin: 0 0 6px;
-	padding: 8px 80px 8px 12px;
+	padding: 8px 80px 8px 16px;
 	border: 1px solid var(--rule);
 	background: var(--surface-head);
 	font-size: 1rem;
@@ -3785,6 +3843,8 @@ body[data-page="prompts"] .main > details {
 }
 
 .round-results > p {
+	box-sizing: border-box;
+	padding-inline: 16px;
 	color: var(--quiet);
 	font-size: 0.867rem;
 }
@@ -3801,6 +3861,10 @@ body[data-page="prompts"] .main > details {
 	cursor: pointer;
 }
 
+.round-results > button {
+	margin-inline-start: 16px;
+}
+
 .round-result {
 	position: relative;
 	border-top: 1px solid var(--rule);
@@ -4181,15 +4245,21 @@ details.section[open] > summary {
 	background-image: var(--grain-dots);
 }
 
+/* Spare width belongs to setup details, not to longer lines of prose. */
+@media (min-width: 110rem) {
+	body[data-page="pull_requests"] > .main {
+		--rail: 20rem;
+	}
+}
+
 /* A window too narrow for the column, its keys and the outline at once gives
    up the outline first: the reading keeps its width, and [ and ] still go
    from section to section. */
-
 @media (max-width: 88rem) {
 	body[data-page="pull_requests"] > .main {
 		--measure: min(
 			41rem,
-			calc(100vw - var(--side) - var(--gutter) - 14rem - 28px)
+			calc(100vw - var(--side) - var(--gutter) - var(--key-space) - var(--lane-gap) - 24px)
 		);
 	}
 
@@ -4206,8 +4276,24 @@ details.section[open] > summary {
 	}
 
 	.try {
+		flex: none;
 		overflow: visible;
 	}
+
+	.try h2 {
+		position: static;
+	}
+
+	.try-pop {
+		inset: 24px 16px auto;
+		width: auto;
+		max-width: 72ch;
+		margin-inline: auto;
+	}
+
+	.try .tail {
+		right: 16px;
+	}
 }
 
 /* Narrower still, the route folds over the page, and a block's keys are named
@@ -4320,14 +4406,41 @@ details.section[open] > summary {
 	}
 
 	.modebar {
+		display: flex;
 		flex-wrap: wrap;
-		gap: 8px;
-		padding-block: 8px;
+		gap: 4px 8px;
+		padding-block: 4px;
 	}
 
 	.modebar .mode {
-		flex-basis: 100%;
-		gap: 4px 12px;
+		display: contents;
+		font-size: 0.8rem;
+	}
+
+	.modebar .all-keys {
+		padding-block: 1px;
+	}
+
+	.draft-tools {
+		padding-block: 8px;
+	}
+
+	.draft-tools .bar {
+		gap: 8px;
+	}
+
+	.progress-line {
+		gap: 4px 8px;
+	}
+
+	.progress-line meter,
+	.progress-line meter::-webkit-meter-bar {
+		width: 4rem;
+	}
+
+	.filters {
+		margin-top: 8px;
+		padding-top: 8px;
 	}
 
 	.keys-help {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: proctolog
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Gill Abarbanel