From 051997c9b84f2c74abd45968f6dce1323fdb98e0 Mon Sep 17 00:00:00 2001
From: Charles Garwood <cgarwood@newdealmultimedia.com>
Date: Sat, 14 Oct 2017 11:25:33 -0400
Subject: [PATCH] Add print friendly style overrides (#3621)

---
 sass/custom/_print.scss         | 39 +++++++++++++++++++++++++++++++++
 sass/screen.scss                |  1 +
 source/_includes/site/head.html |  2 +-
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 sass/custom/_print.scss

diff --git a/sass/custom/_print.scss b/sass/custom/_print.scss
new file mode 100644
index 00000000000..fcf30d87d15
--- /dev/null
+++ b/sass/custom/_print.scss
@@ -0,0 +1,39 @@
+@media print {
+
+	/* General Overrides */
+	header div.grid__item nav {
+		display: none;
+	}
+	aside#sidebar {
+		display: none;
+	}
+	.grid__item {
+		display: block;
+		width: 100%;
+	}
+	
+	/* Components List */
+	div.filter-button-group {
+		display: none;
+	}
+	.hass-option-cards.show-items {
+		display: block;
+	}
+	.hass-option-cards.show-items a.option-card {
+		display: block;
+		opacity: 1;
+		width: 100%;
+		height: auto;
+		min-height: 80px;
+		margin-bottom: 8px;
+	}
+	.hass-option-cards.show-items a.option-card .img-container {
+		float: left;
+		width: 33%;
+		text-align: center;
+	}
+	.hass-option-cards.show-items a.option-card div.title {
+		height: 1.5em;
+		margin-top: 8px;
+	}
+}
\ No newline at end of file
diff --git a/sass/screen.scss b/sass/screen.scss
index 5fed2c748de..78c73c19af2 100644
--- a/sass/screen.scss
+++ b/sass/screen.scss
@@ -2,3 +2,4 @@
 @import 'custom/paulus';
 @import 'custom/component_page';
 @import 'custom/syntax';
+@import 'custom/print';
\ No newline at end of file
diff --git a/source/_includes/site/head.html b/source/_includes/site/head.html
index 0c2a76007fc..b78976a342a 100644
--- a/source/_includes/site/head.html
+++ b/source/_includes/site/head.html
@@ -32,7 +32,7 @@
     <meta name="twitter:description" content="{{ fb_description | truncate:200 }}">
     <meta name="twitter:image" content="{{ social_image }}">
 
-    <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet">
+    <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection, print" rel="stylesheet">
     <link href="{{ root_url }}{{ site.subscribe_rss }}" rel="alternate" title="{{ site.title }}" type="application/atom+xml">
     <link rel='shortcut icon' href='{{ root_url }}/images/favicon.ico' />
     <link rel='icon' type='image/png' href='{{ root_url }}/images/favicon-192x192.png' sizes='192x192' />