From 2e141423c7ec9526c6ffb827b35cd3e2c9bf4410 Mon Sep 17 00:00:00 2001
From: Adrian Welcker <ardi@diepixelecke.de>
Date: Mon, 2 May 2022 11:52:26 +0200
Subject: [PATCH] Update CSS for printability

When printing, hide the left and bottom navigation bars and fix the
breadcrumbs to the top of the page to ensure the layout does not get
messed up and no space is wasted on the page.
---
 Patterns/HTML/Base/Navigation.css         | 22 +++++++++++++++-------
 Patterns/HTML/Base/Progress.css           |  6 ++++++
 Patterns/HTML/Breadcrumbs/Breadcrumbs.css |  8 +++++++-
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/Patterns/HTML/Base/Navigation.css b/Patterns/HTML/Base/Navigation.css
index 31a7677..cb13e33 100644
--- a/Patterns/HTML/Base/Navigation.css
+++ b/Patterns/HTML/Base/Navigation.css
@@ -133,11 +133,19 @@ nav[role="navigation"] h1 {
     margin-top: 0em
 }
 
-main {
-    max-width: 1024px;
-    min-width: 320px;
-    margin-left: 250px;
-    min-height: 100%;
-    height: auto !important;
-    height: 100%
+@media screen {
+	main {
+		max-width: 1024px;
+		min-width: 320px;
+		margin-left: 250px;
+		min-height: 100%;
+		height: auto !important;
+		height: 100%
+	}
 }
+
+@media print {
+	nav[role="navigation"] {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/Patterns/HTML/Base/Progress.css b/Patterns/HTML/Base/Progress.css
index cde5c9c..53f7e61 100644
--- a/Patterns/HTML/Base/Progress.css
+++ b/Patterns/HTML/Base/Progress.css
@@ -104,3 +104,9 @@ nav[role="progress"] ul li a:active {
 nav[role="progress"] ul li a:hover {
     color: #dd2c0d
 }
+
+@media print {
+	nav[role="progress"] {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/Patterns/HTML/Breadcrumbs/Breadcrumbs.css b/Patterns/HTML/Breadcrumbs/Breadcrumbs.css
index 9db352f..83808fb 100644
--- a/Patterns/HTML/Breadcrumbs/Breadcrumbs.css
+++ b/Patterns/HTML/Breadcrumbs/Breadcrumbs.css
@@ -6,6 +6,12 @@ div.breadcrumbs {
 	padding-bottom: 4px;
 }
 
+@media print {
+	div.breadcrumbs {
+		position: static;
+	}
+}
+
 .crumbs {
 	border:1px solid #dedede;
 	height:3em;
@@ -32,4 +38,4 @@ div.breadcrumbs {
 
 .crumbs li a:hover, #crumbs li a:focus {
 	color:#dd2c0d;
-}
+}
\ No newline at end of file