| 'editor': | |
| 'lineHeight': 1.45 | |
| 'softWrap': true | |
| 'normalizeIndentOnPaste': true | |
| 'tabLength': 2 | |
| 'preferredLineLength': 100 | |
| 'invisibles': | |
| 'cr': '↩' | |
| 'eol': '' | |
| 'space': '·' |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>iOS 8 scrolls</title> | |
| <meta name="viewport" content="width=device-width"> | |
| </head> | |
| <body style="min-height: 20000px;"> | |
| <div class="scroller" style="text-align: center; line-height: 4em; position: fixed; top: 0; left: 0; right: 0; height: 4em; background: red; color: #fff; font-family: sans-serif;">We’re here.</div> | |
| <script> |
| body { | |
| @media (max-width: em(319)) { & { font-size: percentage(14/16) }} | |
| @media (min-width: em(400)) { & { font-size: percentage(18/16) }} | |
| @media (min-width: em(450)) { & { font-size: percentage(19/16) }} | |
| @media (min-width: em(500)) { & { font-size: percentage(20/16) }} | |
| @media (min-width: em(1100)) and (min-height: em(750)) { & { font-size: percentage(21/16) }} | |
| @media (min-width: em(1150)) and (min-height: em(850)) { & { font-size: percentage(22/16) }} | |
| @media (min-width: em(1200)) and (min-height: em(900)) { & { font-size: percentage(23/16) }} | |
| @media (min-width: em(1250)) and (min-height: em(950)) { & { font-size: percentage(24/16) }} | |
| @media (min-width: em(1300)) and (min-height: em(1000)) { & { font-size: percentage(25/16) }} |
| //= require "ranking" | |
| /*! | |
| * Upstatic AutoSuggest v1.0 | |
| * http://upstatic.io | |
| */ | |
| (function (window, document, undefined) { | |
| "use strict"; |
| /*! | |
| * Upstatic string ranking algorithm v1.0 | |
| * (A port of the Quicksilver string ranking algorithm) | |
| * | |
| * http://upstatic.io | |
| */ | |
| String.prototype.score = function (abbreviation) { |
| var pageVisibilityTimer = false; | |
| function isIOS7orNewer() { | |
| return (/(iphone|ipad|ipod).+(os\s7|os\s8)/i).test(navigator.userAgent); | |
| } | |
| function pageVisibilityFix() { | |
| pageVisibilityTimer = window.setInterval(function() { | |
| window.scrollTo(document.body.scrollLeft, document.body.scrollTop); | |
| }, 500); |
| #slideshow { | |
| width: 100%; | |
| position: relative; | |
| } | |
| img { | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| max-width: 600px; |
| /** | |
| * Polyfill for the vw, vh, vm units | |
| * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/ | |
| * @author Lea Verou | |
| */ | |
| (function() { | |
| if(!window.StyleFix) { | |
| return; |
| @mixin scale($props, $sizes, $base: 16) { | |
| $values: (); | |
| $sublists: false; | |
| @each $s in $sizes { | |
| /* unwrap lists for values that have multiple list of values such as text-shadow */ | |
| @if type-of($s) == list { | |
| $sublists: true; | |
| $vv: (); | |
| @each $ss in $s { | |
| $vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss)); |
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
