From 17e144e7862927688c6752e5c16947300e77ce89 Mon Sep 17 00:00:00 2001
From: Timmy Willison <timmywil@users.noreply.github.com>
Date: Sun, 20 Oct 2024 15:16:18 -0400
Subject: [PATCH] Resources: move inline styles to an external CSS file for CSP

Ref https://github.com/jquery/infrastructure-puppet/issues/54
---
 pages/download.html     | 10 ++---
 pages/resources.html    | 94 +++++++++--------------------------------
 resources/resources.css | 94 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 118 insertions(+), 80 deletions(-)
 create mode 100644 resources/resources.css

diff --git a/pages/download.html b/pages/download.html
index 19a1bd5..3abcc3e 100644
--- a/pages/download.html
+++ b/pages/download.html
@@ -49,11 +49,11 @@ <h3>1.4.5</h3>
 <li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
 </ul>
 
-<hr>
+<hr />
 
 <h2 id="download">Legacy versions</h2>
 
-<br>
+<br />
 
 <h3>1.3.2</h3>
 
@@ -86,7 +86,7 @@ <h3>1.3.2</h3>
 <li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
 </ul>
 
-<br>
+<br />
 
 <h3>1.2.1</h3>
 
@@ -119,7 +119,7 @@ <h3>1.2.1</h3>
 <li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
 </ul>
 
-<br>
+<br />
 
 <h3>1.1.2</h3>
 
@@ -152,7 +152,7 @@ <h3>1.1.2</h3>
 <li><a href="https://www.asp.net/ajaxLibrary/CDN.ashx#jQuery_Mobile_Releases_on_the_CDN_4">Microsoft CDN &#8211; jQuery Mobile</a></li>
 </ul>
 
-<br>
+<br />
 
 <h3>1.0.1</h3>
 
diff --git a/pages/resources.html b/pages/resources.html
index aac3e4b..0d13e5f 100644
--- a/pages/resources.html
+++ b/pages/resources.html
@@ -2,56 +2,12 @@
 	"title": "Resources"
 }</script>
 
-<style>
-table.featuredsites { }
-table.featuredsites td { padding-top:32px; text-align:center; }
-table.featuredsites td img { margin-bottom:6px; }
-table.featuredsites td.featured {
-  font-size: 12px;
-  vertical-align: top;
-}
-
-.booktable {
-  margin: -20px;
-  padding-top: 10px;
-  border: 0 none !important;
-}
-
-.title {
-  width: 140px;
-  line-height: 135%;
-  vertical-align: top;
-  font-size: 12px !important;
-  padding:18px 12px 0 7px;
-}
-
-.book {
-width: 100px;
-padding-left: 0px;
-padding-top: 22px;
-vertical-align: top;
-border-bottom: 0px;
-}
-
-ul.listicon {
-list-style-type: none;
-margin-left: -20px;
-}
-
-ul.listicon li {
-  margin-left: 0;
-  background: none !important;
-}
-.plugins {
-  padding: 10px;
-  text-align: center;
-}
-</style>
+<link rel="stylesheet" href="/resources/resources.css" />
 
 <p>In this section, we have gathered useful resources that will help you learn more about jQuery Mobile, find tools to develop jQuery Mobile application designs and mockups, tutorials and tools to guide your through the development of simple or more complex applications and related articles.</p>
 
 <hr>
-<h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border-bottom: 1px solid #ccc; line-height: 170%;"><a href="#Inspiration">Featured sites</a> | <a href="#Books">Books</a> | <a href="#Apps">Apps &amp; Frameworks</a> | <a href="#Plugins">Plugins</a> | <a href="#Extensions">Extensions</a> | <a href="#Tools">Tools</a> | <a href="#Themes">Themes</a> | <a href="#Articles">Articles &amp; Tutorials</a></h3>
+<h3 id="resources-header"><a href="#Inspiration">Featured sites</a> | <a href="#Books">Books</a> | <a href="#Apps">Apps &amp; Frameworks</a> | <a href="#Plugins">Plugins</a> | <a href="#Extensions">Extensions</a> | <a href="#Tools">Tools</a> | <a href="#Themes">Themes</a> | <a href="#Articles">Articles &amp; Tutorials</a></h3>
 
 <a id="Inspiration"></a><h2>Featured jQuery Mobile sites from jQMGallery.com</h2>
 
@@ -109,13 +65,13 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
 		<figcaption>Greyhound</figcaption>
 	</figure>
 </div>
-<hr style="clear: both;">
+<hr class="clear" />
 <a id="Books"></a><h2>Books</h2>
-<table style="width:100%;" >
+<table class="bookstable">
 	<tr class="booktable">
-		<td class="book"><img src="/resources/books/jqmWebDevEssentials.jpg" width="105" style="margin-left:-5px" /></td>
+		<td class="book book-left"><img src="/resources/books/jqmWebDevEssentials.jpg" width="105" /></td>
 		<td class="title">&#8220;<a href="https://www.packtpub.com/application-development/jquery-mobile-web-development-essentials-third-edition">jQuery Mobile Web Development Essentials - Third Edition</a>&#8221;<br /> by Raymond Camden and Andy Matthews,<br /> Packt Publishing</td>
-		<td class="book"><img src="/resources/books/MasteringjQueryMobile.jpg" width="105" style="margin-left:-5px" /></td>
+		<td class="book book-left"><img src="/resources/books/MasteringjQueryMobile.jpg" width="105" /></td>
 		<td class="title">&#8220;<a href="https://www.packtpub.com/web-development/mastering-jquery-mobile">Mastering jQuery Mobile</a>&#8221;<br /> by Chip Lambert and Shreerang Patwardhan,<br /> Packt Publishing</td>
 		<td class="book"><img src="/resources/books/master-mobile-web-apps-with-jqm.png" width="95" /></td>
 		<td class="title" width="140">&#8220;<a href="http://store.elated.com/">Master Mobile Web Apps with jQuery Mobile</a>&#8221;<br/> by Matt Doyle, <br />Elated Books</td>
@@ -133,25 +89,25 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
 		<td class="title">&#8220;<a href="http://www.peachpit.com/store/product.aspx?isbn=032177325X">Adobe Dreamweaver CS5.5: Designing and Developing for Mobile with jQuery, HTML5, and CSS3</a>&#8221;<br /> by David Powers,<br /> Adobe Press</td>
 		  <td class="book"><img src="/resources/books/CSS3MobilePack.jpeg" width="95" /></td>
 		<td class="title">&#8220;<a href="http://www.peachpit.com/store/product.aspx?isbn=0132979780">Using the CSS3 Mobile Pack for Adobe Fireworks CS5</a>&#8221;<br />by Jim Babbage, <br />Peachpit Press</td>
-		<td class="book"><img src="/resources/books/41XeY6Pua+L._SL500_AA300_.jpg" width="105" style="margin-left:-5px" /></td>
+		<td class="book book-left"><img src="/resources/books/41XeY6Pua+L._SL500_AA300_.jpg" width="105" /></td>
 		<td class="title">&#8220;<a href="http://www.amazon.com/Pro-jQuery-Mobile-Brad-Broulik/dp/1430239662/ref=sr_1_9?s=books&amp;ie=UTF8&amp;qid=1320859255&amp;sr=1-9">Pro jQuery Mobile</a>&#8221;<br /> by Brad Broulik,<br /> Apress</td>
 	</tr>
 	<tr class="booktable">
-		<td class="book"><img src="/resources/books/41GwwjDaEsL._SL500_AA300_.jpg" width="105" style="margin-left:-5px; padding-top:5px;" /></td>
+		<td class="book book-left book-top"><img src="/resources/books/41GwwjDaEsL._SL500_AA300_.jpg" width="105" /></td>
 		<td class="title">&#8220;<a href="http://www.amazon.com/Teach-Yourself-jQuery-Mobile-Minutes/dp/0672335573/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qid=1320859235&amp;sr=1-1">Sams Teach Yourself jQuery Mobile in 10 Minutes (Sams Teach Yourself &#8212; Minutes)</a>&#8221;<br /> by Steven E. Holzner,<br /> Sams</td>
-		<td class="book"><img src="/resources/books/jqm_develop_and_design.jpg" width="105" style="margin-left:-5px" /></td>
+		<td class="book book-left"><img src="/resources/books/jqm_develop_and_design.jpg" width="105" /></td>
 		<td class="title">&#8220;<a href="http://www.amazon.com/jQuery-Mobile-Develop-Kris-Hadlock/dp/032182041X">jQuery Mobile: Develop and Design</a>&#8221;<br /> by Kris Hadlock,<br /> Peachpit Press</td>
-		<td class="book"><img src="/resources/books/jqm_in_24_hours.jpg" width="95" style="margin-left:-5px" /></td>
+		<td class="book book-left"><img src="/resources/books/jqm_in_24_hours.jpg" width="95" /></td>
 		<td class="title">&#8220;<a href="http://www.pearsonhighered.com/educator/product/Sams-Teach-Yourself-jQuery-Mobile-in-24-Hours/9780672335945.page">Sams Teach Yourself jQuery Mobile in 24 Hours</a>&#8221;<br /> by Phillip Dutson,<br /> Sams Publishing</td>
 	</tr>
 	<tr class="booktable">
-		<td class="book"><img src="/resources/books/creating_mobile_apps.png" width="105" style="margin-left:-5px" /></td>
-		<td class="title">&#8220;<a href="http://www.packtpub.com/creating-mobile-apps-with-jquery/book">Creating Mobile Apps with jQuery Mobile</a>&#8221;<br> by Shane Gliser,<br> Packt Publishing</td>
-		<td class="book"><img src="/resources/books/mobile-app-manual-the-blueprint.jpg" width="95" style="margin-left:-5px" /></td>
-		<td class="title">&#8220;<a href="http://mobileappmanual.com/">Mobile App Manual: The Blueprint &#8211;<br>How to Start Creating Mobile Apps Using jQuery Mobile and PhoneGap Build</a>&#8221;<br /> by Jeff Pelletier,<br> withinsight</td>
+		<td class="book book-left"><img src="/resources/books/creating_mobile_apps.png" width="105" /></td>
+		<td class="title">&#8220;<a href="http://www.packtpub.com/creating-mobile-apps-with-jquery/book">Creating Mobile Apps with jQuery Mobile</a>&#8221;<br /> by Shane Gliser,<br /> Packt Publishing</td>
+		<td class="book book-left"><img src="/resources/books/mobile-app-manual-the-blueprint.jpg" width="95" /></td>
+		<td class="title">&#8220;<a href="http://mobileappmanual.com/">Mobile App Manual: The Blueprint &#8211;<br />How to Start Creating Mobile Apps Using jQuery Mobile and PhoneGap Build</a>&#8221;<br /> by Jeff Pelletier,<br /> withinsight</td>
 	</tr>
 </table>
-<hr style="clear: both;">
+<hr class="clear" />
 <a id="Apps"></a><h2>Apps &amp; frameworks</h2>
 <ul class="listicon">
 	<li><img src="/resources/logoapps/phonegap.ico" width="18" /> <a href="http://phonegap.com/" target="_blank">PhoneGap</a> &#8211; tool to wrap jQuery Mobile code for native app deployment</li>
@@ -184,7 +140,7 @@ <h3 style="font-size: 14px !important; color: #ddd; padding-bottom: 20px; border
 	<li><img src="/resources/logoapps/ezoapp.ico" width="18"/> <a href="http://ezoui.com/" target="_blank">EZoApp</a> &#8211; A drag and drop mobile app design tool with online code editor using jQuery Mobile</li>
 	<li><img src="/resources/logoapps/jqm4gwt.png" width="18"/> <a href="https://github.com/jqm4gwt/jqm4gwt">jqm4gwt</a> &#8211; A GWT wrapper around jQuery Mobile, which enables you to use pure Java to build your UI</li>
 </ul>
-<hr style="clear: both;">
+<hr class="clear" />
 <a name="Plugins"></a>
 <h2>3rd party plugins</h2>
 <p>These are all jQuery Mobile compatible plugins, many use the theme framework, auto-initialization and data- attribute configuration features or core mobile widgets.</p>
@@ -275,7 +231,7 @@ <h2>3rd party plugins</h2>
 	</figure>
 </div>
 
-<hr style="clear: both;">
+<hr class="clear" />
 <a name="Extensions"></a>
 <h2>3rd party extensions</h2>
 <p>These are 3rd Party extensions that add capabilities to existing functionality.</p>
@@ -300,7 +256,7 @@ <h2>3rd party extensions</h2>
 	<li><a href="http://www.intlaqa.com/jquery-mobile-rtl/">jQuery Mobile RTL for Right-To-Left layout.</a> &#8211; To make jQuery Mobile work on right-to-left layouts such as Arabic, Persian, Urdu and Hebrew.</li>
 	<li><a href="http://ressio.github.io/lazy-load-xt">Lazy Load XT</a> &#8211; jQuery plugin to improve performance by lazy loading of images, videos, widgets, etc. (with built-in support for jQuery Mobile)</li>
 </ul>
-<hr style="clear: both;">
+<hr class="clear" />
 <a id="Tools"></a>
 <h2>Tools</h2>
 <ul>
@@ -309,7 +265,7 @@ <h2>Tools</h2>
 	<li><a href="http://jquerymobile.com/test/tools/log-page-events.html">bookmarklet for debugging jQueryMobile page navigation problems</a></li>
 	<li><a href="http://zsprawl.com/iOS/zapps/jqm-reference/">jQuery Mobile Reference 1.1.0 zApp 3.0</a></li>
 </ul>
-<hr style="clear: both;">
+<hr class="clear" />
 <a id="Themes"></a>
 <h2>Themes</h2>
 <ul>
@@ -324,18 +280,6 @@ <h2>Themes</h2>
 	<li><a href="http://nativedroid.godesign.ch/">Native Droid Theme</a></li>
 </ul>
 <hr>
-<style>
-.resvideo,
-.restutorial,
-.respresentation,
-.resarticle { font-size:11px; color:#fff; font-weight:bold; }
-.resvideo { background-color:#7ACEF4; }
-.restutorial { background-color:#FAA523; }
-.resarticle { background-color:#3EB249; }
-.respresentation { background-color:#9C3493; }
-span.ressource { font-size:12px; color:#888; }
-</style>
-
 <a id="Articles"></a>
 <h2>Articles &amp; Tutorials</h2>
 <ul>
diff --git a/resources/resources.css b/resources/resources.css
new file mode 100644
index 0000000..4413edd
--- /dev/null
+++ b/resources/resources.css
@@ -0,0 +1,94 @@
+#resources-header {
+  font-size: 14px !important;
+  color: #ddd;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ccc;
+  line-height: 170%;
+}
+.clear {
+  clear: both;
+}
+
+table.featuredsites td {
+  padding-top: 32px;
+  text-align: center;
+}
+table.featuredsites td img {
+  margin-bottom: 6px;
+}
+table.featuredsites td.featured {
+  font-size: 12px;
+  vertical-align: top;
+}
+
+.bookstable {
+  width: 100%;
+}
+
+.booktable {
+  margin: -20px;
+  padding-top: 10px;
+  border: 0 none !important;
+}
+
+.title {
+  width: 140px;
+  line-height: 135%;
+  vertical-align: top;
+  font-size: 12px !important;
+  padding: 18px 12px 0 7px;
+}
+
+.book {
+  width: 100px;
+  padding-left: 0px;
+  padding-top: 22px;
+  vertical-align: top;
+  border-bottom: 0px;
+}
+.book-left img {
+  margin-left: -5px;
+}
+.book-top img {
+  padding-top: 5px;
+}
+
+ul.listicon {
+  list-style-type: none;
+  margin-left: -20px;
+}
+
+ul.listicon li {
+  margin-left: 0;
+  background: none !important;
+}
+
+.plugins {
+  padding: 10px;
+  text-align: center;
+}
+
+.resvideo,
+.restutorial,
+.respresentation,
+.resarticle {
+  font-size: 11px;
+  color: #fff;
+  font-weight: bold;
+}
+.resvideo {
+  background-color: #7acef4;
+}
+.restutorial {
+  background-color: #faa523;
+}
+.resarticle {
+  background-color: #3eb249;
+}
+.respresentation {
+  background-color: #9c3493;
+}
+span.ressource {
+  font-size: 12px;
+  color: #888;
+}