Make printing nicer

asset/style.css

@@ -83,15 +83,10 @@ th.category a {
 }
 
 #key {
- position: fixed;
- bottom: 0;
- width: 80vw;
- left: 10vw;
  background-color: white;
  margin-bottom: 0;
  padding: 10px;
  border: 1px solid #999;
- border-bottom: none;
 }
 
 input.select {
@@ -173,3 +168,34 @@ pre code {
 .noFrame {
  display: none;
 }
+
+
+@page {
+ size: A4;
+ margin: 11mm 17mm 17mm 17mm;
+}
+
+@media screen {
+ #key {
+ position: fixed;
+ bottom: 0;
+ width: 80vw;
+ left: 10vw;
+ border-bottom: none;
+ }
+}
+
+@media print {
+ html, body {
+ width: 210mm;
+ height: 297mm;
+ }
+
+ #key {
+ width: 100%;
+ }
+
+ .noPrint * {
+ display: none;
+ }
+}

index.html

@@ -63,7 +63,7 @@ <h1 class='noFrame'>HTTP Caching Tests</h1>
  implementation's results, file issues or learn more, see <a
  href="https://github.com/http-tests/cache-tests">the repository</a>.</p>
 
- <p class='noFrame'>See also <a href="/spec/rfc9111.html">test results interspersed with the current specification text</a>.</p>
+ <p class='noFrame noPrint'><span>See also </span><a href="/spec/rfc9111.html">test results interspersed with the current specification text</a>.</p>
 
  <p id="key">
  <span class="key-item"><span class="fa" data-kind="pass"></span>passed &nbsp;</span>
@@ -77,16 +77,16 @@ <h1 class='noFrame'>HTTP Caching Tests</h1>
  <span class="key-item"><span class="fa" data-kind="untested"></span>not tested</span>
  </p>
 
- <ul id="ToC" class="noFrame">
+ <ul id="ToC" class="noFrame noPrint">
  </ul>
 
  <form method="GET" id="selectForm">
 
- <p class="noFrame"><i>
+ <p class="noFrame noPrint"><i>
  Click on test names for details of what is sent and checked. Hover over failed tests for the reason why they failed.
  </i></p>
 
- <p class="noFrame">
+ <p class="noFrame noPrint">
  <a href="#" id="select">Select test results to display</a>
  </p>