doc/: Improve css for printing

Author: daurnimator

doc/site.css

@@ -131,7 +131,7 @@ body > * {
 .author {
     display: none
 }
-@media(min-width: 55rem) {
+@media screen and (min-width: 55rem) {
     .meta {
         position: fixed;
         width: 20rem;
@@ -146,3 +146,11 @@ body > * {
         overflow: auto;
     }
 }
+@media print {
+    section.level1 {
+        page-break-inside: avoid
+    }
+    nav a::after {
+        content: leader('.') target-counter(attr(href url), page, decimal)
+    }
+}

doc/template.html

@@ -68,24 +68,28 @@ <h3 class="date">$date$</h3>
 $include-after$
 $endfor$
 <style type="text/css">
-li.collapsible {
-  color: #212121;
-  cursor: pointer;
-  list-style-type: none;
-}
-li.collapsible:before {
-  margin-left: -1rem; /* undo ul's padding-left */
-  width: 1rem;
-  display: inline-block;
-  text-align: center;
-  content: '-';
-}
-li.collapsible[state="collapsed"]:before {
-  content: '+';
-}
-li.collapsible[state="collapsed"] > ul {
+li.collapsible > ul {
   display: none;
 }
+@media screen {
+  li.collapsible {
+    cursor: pointer;
+    list-style-type: none;
+  }
+  li.collapsible:before {
+    margin-left: -1rem; /* undo ul's padding-left */
+    width: 1rem;
+    display: inline-block;
+    text-align: center;
+    content: '-';
+  }
+  li.collapsible[state="collapsed"]:before {
+    content: '+';
+  }
+  li.collapsible:not([state="collapsed"]) > ul {
+    display: block;
+  }
+}
 </style>
 <script type="text/javascript">
   document.querySelectorAll('nav > ul > li > ul > li').forEach(function(element) {