Home page sections: shifts, off the press, proof sheets, requirements, colophon

site/index.html

@@ -50,6 +50,95 @@ <h1 class="misreg">Your issues go to press overnight.</h1>
   </div>
 </header>
 
+<main>
+  <!-- Day shift / third shift -->
+  <section class="sec" aria-labelledby="shifts-title">
+    <div class="wrap">
+      <div class="sec-head"><p class="eyebrow">Two shifts</p><h2 id="shifts-title">You plan by day. The press runs at night.</h2></div>
+      <div class="shifts">
+        <div class="shift"><h3>Day shift</h3><p class="who">Humans, with <a href="https://github.com/mattpocock/skills">Matt Pocock's skills</a>, used interactively</p>
+          <ol class="chain"><li>grill</li><li>spec</li><li>issues</li></ol>
+          <p>The human half of the workflow: shaping work into issues the factory can take on, by grilling the idea, writing the spec and cutting it into issues, and reviewing the pull requests it delivers.</p></div>
+        <div class="shift third"><h3>Third shift</h3><p class="who">Agents, with headless copies of the same skills</p>
+          <ol class="chain"><li>implement</li><li>review</li><li>pull request</li></ol>
+          <p>thirdshift takes one Issue URL per Run. Its Factory skills, adapted to run with no human in the loop, implement the issue, review the work and open a pull request that is ready for review.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- How a Run works: the press line goes here (#64, #65). -->
+
+  <!-- What comes off the press -->
+  <section class="sec" aria-labelledby="offpress-title">
+    <div class="wrap">
+      <div class="sec-head"><p class="eyebrow">Delivery pile</p><h2 id="offpress-title">What comes off the press</h2></div>
+      <div class="offpress">
+        <div style="--ink:var(--c)"><h3>Ready for review</h3><p>An open pull request from the Issue branch to the Base branch. It is mergeable, its CI passes, and it has been reviewed against your repository's documented coding standards and against the issue. Otherwise thirdshift doesn't call it ready.</p></div>
+        <div style="--ink:var(--y)"><h3>Unaddressed findings</h3><p>Every Standards finding and Spec finding the agent chose not to fix is listed as an Unaddressed finding in the pull request body, so you decide on it.</p></div>
+        <div style="--ink:var(--m)"><h3>Failed runs keep their work</h3><p>A Failed run still pushes its work, so nothing is lost (if the push fails, it keeps the worktree instead), and its pull request goes back to draft. Run the same command again to continue it.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- The factory grows: the floor plan goes here (#67). -->
+
+  <!-- Proof sheets: real pull requests thirdshift made -->
+  <section class="sec" aria-labelledby="proofs-title">
+    <div class="wrap">
+      <div class="sec-head"><p class="eyebrow">Proof sheets</p><h2 id="proofs-title">Pulled from the press</h2><p class="lede">Real pull requests thirdshift made on its own repository. Judge the work yourself.</p></div>
+      <ul class="proofs">
+        <li class="proof-card" style="--ink:var(--c)"><p class="slug">Pull request #25 · closes <a href="https://github.com/JacobStephens2/thirdshift/issues/24">issue #24</a></p>
+          <h3><a href="https://github.com/JacobStephens2/thirdshift/pull/25">Treat SIGHUP like SIGINT and SIGTERM</a></h3>
+          <p>A small fix with a real test: closing the terminal now stops the session and fails the Run cleanly, and it is the Run the press line replays.</p></li>
+        <li class="proof-card" style="--ink:var(--m)"><p class="slug">Pull request #21 · closes <a href="https://github.com/JacobStephens2/thirdshift/issues/7">issue #7</a></p>
+          <h3><a href="https://github.com/JacobStephens2/thirdshift/pull/21">Numbered Issue branches after a merged or closed PR</a></h3>
+          <p>A careful change to branch selection, where the agent flags a new error the issue didn't ask for, so a human can decide on it.</p></li>
+        <li class="proof-card" style="--ink:var(--y)"><p class="slug">Pull request #22 · closes <a href="https://github.com/JacobStephens2/thirdshift/issues/9">issue #9</a></p>
+          <h3><a href="https://github.com/JacobStephens2/thirdshift/pull/22">CI watching, CI-fix Repair and the Repair cap</a></h3>
+          <p>The factory building its own quality gate: the loop that watches CI and starts a Repair when checks fail.</p></li>
+        <li class="proof-card" style="--ink:var(--k)"><p class="slug">Pull request #16 · closes <a href="https://github.com/JacobStephens2/thirdshift/issues/4">issue #4</a></p>
+          <h3><a href="https://github.com/JacobStephens2/thirdshift/pull/16">Pre-flight checks</a></h3>
+          <p>Every check that runs before a Run creates anything, each with a clear message, including the Origin match.</p></li>
+      </ul>
+    </div>
+  </section>
+
+  <!-- Requirements and platforms: taken from the README, so the two agree. -->
+  <section class="sec" aria-labelledby="reqs-title">
+    <div class="wrap">
+      <div class="sec-head"><p class="eyebrow">Before you run it</p><h2 id="reqs-title">Requirements and platforms</h2></div>
+      <div class="reqs">
+        <div><h3>Requirements</h3>
+          <ul>
+            <li><b><code>claude</code></b> (Claude Code), logged in.</li>
+            <li><b><code>gh</code></b> (GitHub CLI), logged in.</li>
+            <li><b><code>git</code></b> with a global <code>user.name</code> and <code>user.email</code>, and credentials that can push to the repository.</li>
+          </ul></div>
+        <div><h3>Platforms</h3>
+          <ul>
+            <li><b>Rocky Linux</b> 9.8 and later, x86_64.</li>
+            <li><b>Ubuntu</b> 24.04.3 and later, x86_64.</li>
+            <li><b>WSL2</b>, latest release, with Ubuntu 24.04 or later, x86_64. Keep your repositories on the Linux filesystem (e.g. <code>~/repos</code>), not under <code>/mnt/c</code>. WSL1 is not supported.</li>
+            <li><b>macOS</b> Tahoe 26.5.2 and later, Apple Silicon.</li>
+          </ul></div>
+      </div>
+      <p class="reqs-note">Details in the <a href="https://github.com/JacobStephens2/thirdshift#supported-platforms">README</a>.</p>
+    </div>
+  </section>
+
+  <!-- Colophon: the owner's words from #61, verbatim. Don't edit. -->
+  <section class="sec" aria-labelledby="colophon-title">
+    <div class="wrap colophon">
+      <div class="sec-head"><p class="eyebrow">Colophon</p><h2 id="colophon-title">Third shift</h2></div>
+      <blockquote>
+        <p>My dad, Mark Stephens, was a pressman at Tursack Printing, the print shop Robert Tursack Sr. founded in Philadelphia in 1959. My dad worked third shift at the Morgantown, Pennsylvania plant, keeping the big four-color presses running through the night. Sometimes I got to visit, and I always wondered whether I'd end up in printing myself. The lineage carries on. Bob Tursack went on to found Brilliant Graphics in Exton, where my mom still does graphic design. This is as close as I am to printing right now.</p>
+        <p>The printing press made copying words cheap. Agents are doing that for code. thirdshift is named for my dad's shift: the machines can run overnight, and I need something to keep them running.</p>
+        <cite>- Jacob Stephens</cite>
+      </blockquote>
+    </div>
+  </section>
+</main>
+
 <footer class="wrap foot">
   <a href="https://github.com/JacobStephens2/thirdshift">GitHub</a>
   <a href="https://github.com/JacobStephens2/thirdshift/releases">Releases</a>

site/styles.css

@@ -100,12 +100,12 @@ body::after { /* scanlines */
   box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05); }
 .paper-sheet .topline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: 8px; }
 .paper-sheet .mark { display: block; height: clamp(30px, 5vw, 52px); width: auto; fill: currentColor; }
-.paper-sheet .slug { font: 700 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #555; }
+.paper-sheet .slug, .proof-card .slug { font: 700 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #555; }
 .paper-sheet h1 { font-size: clamp(44px, 7.2vw, 100px); color: #0b0b0b; }
 .paper-sheet .framing { color: #2a2a2a; font-size: 16px; }
 .paper-sheet .framing b { color: #000; }
 .paper-sheet .credit { color: #444; }
-.paper-sheet a { color: #0070a8; }
+.paper-sheet a, .proof-card .slug a { color: #0070a8; }
 .paper-sheet .colorbar { height: 16px; margin-top: 6px; }
 .paper-sheet .install { border-color: #000; }
 .paper-sheet .install code { font-size: 13px; padding-inline: 12px; }
@@ -123,6 +123,61 @@ body::after { /* scanlines */
   .proof-row { gap: 18px; }
 }
 
+/* ---------- Section frame ---------- */
+.sec { padding-block: 72px; border-top: 1px solid var(--rule); }
+.sec-head { display: grid; gap: 12px; margin-bottom: 28px; }
+.sec-head h2 { font-size: clamp(36px, 5.5vw, 68px); }
+.lede { margin: 0; max-width: 62ch; color: var(--dim); }
+@media (max-width: 560px) { .sec { padding-block: 48px; } }
+
+/* ---------- Day shift / third shift ---------- */
+.shifts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
+@media (max-width: 760px) { .shifts { grid-template-columns: 1fr; } }
+.shift { background: var(--k); padding: 26px; display: grid; gap: 14px; align-content: start; }
+.shift h3 { font-size: 34px; }
+.shift p { margin: 0; }
+.shift .who { color: var(--dim); }
+.shift.third { background: #000; }
+.chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; padding: 0; margin: 0; }
+.chain li { font: 700 13px/1 var(--f-mono); padding: 8px 10px; border: 1px solid var(--dim); }
+.chain li + li::before { content: "→"; margin-right: 8px; color: var(--dim); }
+.shift.third .chain li { border-color: var(--c); }
+
+/* ---------- What comes off the press ---------- */
+.offpress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
+@media (max-width: 820px) { .offpress { grid-template-columns: 1fr; } }
+.offpress > div { display: grid; gap: 8px; align-content: start; border-top: 4px solid var(--ink); padding-top: 14px; }
+.offpress h3 { font-size: 28px; }
+.offpress p { margin: 0; }
+
+/* ---------- Proof sheets ---------- */
+.proofs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
+@media (max-width: 760px) { .proofs { grid-template-columns: 1fr; } }
+.proof-card { background: var(--paper); color: #111; padding: 22px 24px 20px; display: grid; gap: 10px; align-content: start;
+  border-top: 10px solid var(--ink); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
+.proof-card:nth-child(odd) { transform: rotate(-.4deg); } .proof-card:nth-child(even) { transform: rotate(.3deg); }
+.proof-card h3 { font-size: clamp(26px, 3vw, 34px); }
+.proof-card h3 a { color: #0b0b0b; text-decoration-thickness: 2px; }
+.proof-card h3 a:hover { color: #0070a8; }
+.proof-card p { margin: 0; }
+
+/* ---------- Requirements and platforms ---------- */
+.reqs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
+@media (max-width: 760px) { .reqs { grid-template-columns: 1fr; } }
+.reqs > div { background: var(--k); padding: 24px 26px; display: grid; gap: 14px; align-content: start; }
+.reqs h3 { font-size: 28px; }
+.reqs ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
+.reqs li::marker { color: var(--c); }
+.reqs-note { margin: 16px 0 0; font-size: 14px; color: var(--dim); }
+
+/* ---------- Colophon ---------- */
+.colophon { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 32px; }
+@media (max-width: 760px) { .colophon { grid-template-columns: 1fr; } }
+.colophon .sec-head { margin: 0; align-content: start; }
+.colophon blockquote { margin: 0; font: italic 400 clamp(19px, 2.2vw, 24px)/1.55 var(--f-colo); max-width: 58ch; display: grid; gap: 18px; }
+.colophon blockquote p { margin: 0; }
+.colophon cite { font-size: .8em; color: var(--dim); }
+
 /* ---------- Footer ---------- */
 .foot { border-top: 1px solid var(--rule); padding-block: 28px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; color: var(--dim); }