From 521078cf174d598e1bc1891dfb7370efef352415 Mon Sep 17 00:00:00 2001
From: Lance Willett <nanobar@gmail.com>
Date: Tue, 22 Oct 2013 17:00:10 +0000
Subject: [PATCH] Twenty Fourteen: use SVG images instead of CSS3 gradients for
 featured image background pattern. Props iamtakashi.

 * Fixes laggy loading in Firefox, see #25600.
 * Significantly reduces CPU usage.
 * Scalable and crisp on HiDPI/retina screens.
 * SVG is support in IE9 which doesn't support CSS gradients.
Built from https://develop.svn.wordpress.org/trunk@25865


git-svn-id: http://core.svn.wordpress.org/trunk@25777 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../twentyfourteen/images/pattern-dark.svg     |  7 +++++++
 .../twentyfourteen/images/pattern-light.svg    |  7 +++++++
 wp-content/themes/twentyfourteen/style.css     | 18 ++++--------------
 3 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 wp-content/themes/twentyfourteen/images/pattern-dark.svg
 create mode 100644 wp-content/themes/twentyfourteen/images/pattern-light.svg

diff --git a/wp-content/themes/twentyfourteen/images/pattern-dark.svg b/wp-content/themes/twentyfourteen/images/pattern-dark.svg
new file mode 100644
index 0000000000..21843645cf
--- /dev/null
+++ b/wp-content/themes/twentyfourteen/images/pattern-dark.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="5px" height="5px" viewBox="0 0 5 5" enable-background="new 0 0 5 5" xml:space="preserve">
+<g>
+	<polygon points="1,0 0,1 0,5 5,0 	"/>
+	<polygon points="5,5 5,1 1,5 	"/>
+</g>
+</svg>
diff --git a/wp-content/themes/twentyfourteen/images/pattern-light.svg b/wp-content/themes/twentyfourteen/images/pattern-light.svg
new file mode 100644
index 0000000000..7c4df536cb
--- /dev/null
+++ b/wp-content/themes/twentyfourteen/images/pattern-light.svg
@@ -0,0 +1,7 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="5px" height="5px" viewBox="0 0 5 5" enable-background="new 0 0 5 5" xml:space="preserve">
+<g>
+	<polygon fill="#FFFFFF" points="1,0 0,1 0,5 5,0 	"/>
+	<polygon fill="#FFFFFF" points="5,5 5,1 1,5 	"/>
+</g>
+</svg>
diff --git a/wp-content/themes/twentyfourteen/style.css b/wp-content/themes/twentyfourteen/style.css
index 337a59bd91..8082c31af5 100644
--- a/wp-content/themes/twentyfourteen/style.css
+++ b/wp-content/themes/twentyfourteen/style.css
@@ -1004,10 +1004,7 @@ span + .edit-link:before,
  */
 
  .featured-thumbnail {
-	background: #767676;
-	background-attachment: fixed;
-	background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
-	background-size: 4px 4px;
+	background: url(images/pattern-light.svg) #767676 repeat fixed;
 	display: none;
 	float: none;
 	height: auto;
@@ -1018,11 +1015,8 @@ span + .edit-link:before,
 	z-index: 0;
 }
 
-.featured-thumbnail:hover {
-	background: #919191;
-	background-attachment: fixed;
-	background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
-	background-size: 4px 4px;
+a.featured-thumbnail:hover {
+	background: url(images/pattern-light.svg) #919191 repeat fixed;
 }
 
 .featured-thumbnail img {
@@ -2467,11 +2461,7 @@ span + .edit-link:before,
  */
 
 .featured-content {
-	background: #000;
-	background-attachment: fixed;
-	background-image: -webkit-linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
-	background-image:         linear-gradient(135deg, #4d4d4d 12.5%, #000 12.5%, #000 50%, #4d4d4d 50%, #4d4d4d 62.5%, #000 62.5%);
-	background-size: 4px 4px;
+	background: url(images/pattern-dark.svg) #4d4d4d repeat fixed;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing:    border-box;
 	box-sizing:         border-box;