diff options
-rw-r--r-- | docs/index.css | 65 | ||||
-rw-r--r-- | docs/index.html | 12 | ||||
-rw-r--r-- | docs/index.js | 5 |
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> </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 →</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(){ |