website: improvements for safari

3 files changed, 67 insertions, 15 deletions

diff --git a/docs/index.css b/docs/index.css
index a10c306ae..929be6253 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -336,9 +336,7 @@ tablex {
     color: rgba(0,0,0,0.2);
   }
   tablex in, tablex out {
-    /*background: #E3E6F1;*/
     color: rgba(0,0,0,0.8);
-    border-radius: 1px;
   }
   tablex in {
     font-feature-settings: 'calt' 0;
@@ -365,16 +363,22 @@ boxes {
   margin-right:-1em;
 }
 box {
+  overflow: auto;
+  max-width:100%;
   display: flex;
   flex-direction: column;
   background: white;
   padding:2em;
-  border-radius: 1px;
+  border-radius: 3px;
   margin-right:1em;
   margin-bottom:1em;
   flex: 1 1 10%;
   /*width:220px;*/
 }
+body.safari box {
+  /* Fix for broken flex wrap in safari */
+  flex-basis: 40%;
+}
 box:first-child {
   margin-left:0;
 }
@@ -382,12 +386,53 @@ box h3 {
   margin-bottom:0.8em;
 }
 
-#glyph-repertoire-iframe {
+.glyph-repertoire {
+  position: relative;
+  background: white;
+  margin-bottom:0;
+  border-top-left-radius:3px;
+  border-top-right-radius:3px;
+  padding-top:3px;
+}
+.glyph-repertoire-link {
+  margin-top:0;
+  background: white;
+  border-bottom-left-radius:3px;
+  border-bottom-right-radius:3px;
+}
+  .glyph-repertoire-link a {
+    display: block;
+    padding: 2em;
+    text-align: center;
+  }
+.glyph-repertoire .fade {
+  position: absolute;
+  display: block;
+  left:0; bottom:0; right:0;
+  height:50px;
   pointer-events: none;
+
+  background-image:
+    linear-gradient(to bottom,
+      rgba(255,255,255,0) 0%,
+      rgba(255,255,255,1) 100%);
+  background-repeat: repeat-x;
+  background-size: 2px 50px;
+  background-position: 0 0;
+}
+.glyph-repertoire a {
+  display: block;
+  font-feature-settings: 'case' 1;
 }
-/*#glyph-repertoire-p {
-  cursor: pointer;
-}*/
-a.glyph-repertoire {
-  display:block;
-}
\ No newline at end of file
+  .glyph-repertoire iframe {
+    pointer-events: none;
+
+    /*width: 100%;
+    height: 100px;*/
+    /*height: 0.5vh;*/
+    height: 330px;
+
+    width: 1px;
+    min-width: 100%;
+    *width: 100%;
+  }
diff --git a/docs/index.html b/docs/index.html
index c6f887d0e..f7ada43ef 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,6 +23,7 @@
     <meta property="og:site_name" content="rsms.me">
     <meta property="og:type" content="product">
     <meta property="og:locale" content="en_US" />
+    <meta name="format-detection" content="telephone=no">
 
     <link rel="icon" type="image/png" href="favicon.ico" />
 
@@ -157,12 +158,15 @@
       <p>&nbsp;</p>
 
       <h2><a href="glyphs/">Glyph repertoire</a></h2>
-      <p>
-        <a class="plain glyph-repertoire" href="glyphs/">
-          <iframe id="glyph-repertoire-iframe" src="glyphs/?iframe"
-           style="width:100%;height:510px" frameborder="0"></iframe>
+      <p class="glyph-repertoire">
+        <span class="fade"></span>
+        <a class="plain" href="glyphs/">
+          <iframe src="glyphs/?iframe" scrolling="no" frameborder="0"></iframe>
         </a>
       </p>
+      <p class="glyph-repertoire-link">
+        <a class="plain" href="glyphs/">Explore all glyphs &rarr;</a>
+      </p>
     </div></div>
 
     <div class="row-divider"></div>
diff --git a/docs/index.js b/docs/index.js
index 0edda4003..5b0517223 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -4,7 +4,10 @@ if (!window.MSStream &&
     /mac|ipad|iphone|ipod/i.test(navigator.userAgent))
 {
   isMac = true
-  document.body.classList = 'mac_or_ios'
+  document.body.classList.add('mac_or_ios')
+  if (navigator.userAgent.indexOf('Safari') != -1) {
+    document.body.classList.add('safari')
+  }
 }
 
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){