Skip to content

Commit 5ca38d1

Browse files
committed
Add a print-specific style sheet
It would appear that the navigation bar is already suppressed when printing, thanks to being inside an `<aside>` element. Other elements that are not useful in print, such as the search box, the version selector, the dark mode toggle, and the "Edit this page" link are now also hidden when printing. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
1 parent 1e4f2ac commit 5ca38d1

File tree

2 files changed

+29
-0
lines changed

2 files changed

+29
-0
lines changed

assets/sass/application.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
3030
@import 'cheat-sheet';
3131
@import 'dark-mode';
3232
@import 'git-turns-20';
33+
@import 'print';
3334

3435
code {
3536
display: inline;

assets/sass/print.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@media print {
2+
.inner {
3+
// The `position` of the `inner` class is defined as `relative`, which
4+
// causes funny issues when printing, for example tens of empty pages in
5+
// the middle. Let's suppress that.
6+
position: inherit;
7+
8+
width: inherit;
9+
margin-bottom: 0;
10+
}
11+
12+
#main {
13+
margin-bottom: 0;
14+
}
15+
16+
footer {
17+
padding: 0;
18+
margin-top: 0;
19+
}
20+
21+
aside, .sidebar-btn, #search-container, #reference-version, #dark-mode-button, .site-source {
22+
display: none;
23+
}
24+
25+
section {
26+
break-inside: avoid-page;
27+
}
28+
}

0 commit comments

Comments
 (0)