Fixes #53 - Added detection and install links for iOS safari

static/css/index.css

 #content,
 #blog
 {
   padding-top: 5em;
 }
 
 #key-facts h1
 {
   font-size: 16px;
 }
@@ skipping 225 matching lines @@
   -o-transition: none;
   transition: none;
   bottom: 4px;
 }
 
 #content.android .install-button,
 #content.firefox.ua-firefox .install-button,
 #content.chrome.ua-chrome .install-button,
 #content.opera.ua-opera .install-button,
 #content.internet-explorer.ua-internet-explorer .install-button,
-#content.safari .install-button,

[ire, 2018/04/12 14:30:32]

What's the reason for these changes? (where you remove the .ua-safari additional
class)

[juliandoucette, 2018/04/12 15:02:23]

I think that #content.safari applies to #content.safari.ua-safari and
#content.safari.ua-ios appropriately (we can use one selector instead of two)
for these use cases.

[ire, 2018/04/12 15:13:50]

But these styles should only be applied if the both .safari and .ua-safari are
present. This is to check if the user is visiting the /safari page in a Safari
browser. If you remove that qualifier then the button will look the same no
matter what browser the user is visiting the page on. 

[juliandoucette, 2018/04/12 15:30:39]

Oops! (I had things backwards.)

+#content.safari.ua-safari .install-button,
+#content.safari.ua-ios .install-button,
 #content.yandex-browser.ua-yandex-browser .install-button,
 #content.edge.ua-edge .install-button,
 /* IE6 fixes */
 #content.firefox_ua-firefox .install-button,
 #content.chrome_ua-chrome .install-button,
 #content.opera_ua-opera .install-button,
 #content.internet-explorer_ua-internet-explorer .install-button,
 #content.safari_ua-safari .install-button,
 #content.yandex-browser_ua-yandex-browser .install-button,
 #content.edge_ua-edge .install-button
 {
   background: #62c52b;
   background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
   background: -moz-linear-gradient(top, #62c52b, #4f9d22);
   background: -ms-linear-gradient(top, #62c52b, #4f9d22);
   background: -o-linear-gradient(top, #62c52b, #4f9d22);
   background: linear-gradient(top, #62c52b, #4f9d22);
   box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
   text-shadow: 2px 2px 2px #327d14;
 }
 
 #content.android .install-button:hover,
 #content.firefox.ua-firefox .install-button:hover,
 #content.chrome.ua-chrome .install-button:hover,
 #content.opera.ua-opera .install-button:hover,
 #content.internet-explorer.ua-internet-explorer .install-button:hover,
-#content.safari .install-button:hover,
+#content.safari.ua-safari .install-button:hover,
+#content.safari.ua-ios .install-button:hover,
 #content.yandex-browser.ua-yandex-browser .install-button:hover,
 #content.edge.ua-edge .install-button:hover,
 /* IE6 fixes */
 #content.firefox_ua-firefox .install-button:hover,
 #content.chrome_ua-chrome .install-button:hover,
 #content.opera_ua-opera .install-button:hover,
 #content.internet-explorer_ua-internet-explorer .install-button:hover,
 #content.safari_ua-safari .install-button:hover,
 #content.yandex-browser_ua-yandex-browser .install-button:hover,
 #content.edge_ua-edge .install-button:hover
 {
   box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
 }
 
 #content.android .install-button:active,
 #content.firefox.ua-firefox .install-button:active,
 #content.chrome.ua-chrome .install-button:active,
 #content.opera.ua-opera .install-button:active,
 #content.internet-explorer.ua-internet-explorer .install-button:active,
-#content.safari .install-button:active,
+#content.safari.ua-safari .install-button:active,
+#content.safari.ua-ios .install-button:active,
 #content.yandex-browser.ua-yandex-browser .install-button:active,
 #content.edge.ua-edge .install-button:active,
 /* IE6 fixes */
 #content.firefox_ua-firefox .install-button:active,
 #content.chrome_ua-chrome .install-button:active,
 #content.opera_ua-opera .install-button:active,
 #content.internet-explorer_ua-internet-explorer .install-button:active,
 #content.safari_ua-safari .install-button:active,
 #content.yandex-browser_ua-yandex-browser .install-button:active,
 #content.edge_ua-edge .install-button:active
 {
   background: #4f9d22;
   background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
   background: linear-gradient(bottom, #62c52b, #4f9d22);
   box-shadow: 0px 0px 7px #486c15;
 }
 
 #content.firefox #install-firefox, #content.chrome #install-chrome,
 #content.opera #install-opera, #content.android #install-android,
 #content.internet-explorer #install-internet-explorer,
-#content.ua-safari #install-safari,
-#content.ua-ios #install-ios,
+#content.safari.ua-ios #install-ios-safari,
 #content.yandex-browser #install-yandex-browser,
 #content.edge #install-edge
 {
   display: inline-block;
 }
+
+#content.safari:not(.ua-ios) #install-safari { display: inline-block; }

[ire, 2018/04/16 15:42:21]

NIT: You didn't need to make this its own rule, you could just add the selector
to the above rule.

 
 #other-platform ul
 {
   list-style: none;
   display: inline-block;
   margin: 0px;
   padding: 0;
   vertical-align: bottom;
 }
 
@@ skipping 283 matching lines @@
   line-height: 1.4;
   color: #000;
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }