@import "colors"; @import "constants"; @import "mixins"; @import "placeholders"; @import "typography"; body, input, textarea, select { @extend %new-type; font-size: 16px; line-height: 1.42857143; } dt { margin-bottom: 0.5em; } .page-wrapper { position: relative; min-height: 100%; } // Mobile Safari doesn't bubble mouse events by default, unless: // // - the target element of the event is a link or a form field. // - the target element, or any of its ancestors up to but not including the , has an explicit event handler set for any of the mouse events. This event handler may be an empty function. // - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations. // // (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html) // // This is a problem for us, because we bind a lot of click events as // `document.on('click', '.my-element', …)` – which requires proper bubbling. .ios .page-wrapper { cursor: pointer; } h1 { font-size: 36px; font-weight: bold; } strong { font-weight: bold; } a { color: $blue; } a[target="_blank"]::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; } em { font-style: italic; } strong { font-weight: bold; } sup { vertical-align: super; font-size: 0.83em; } small { font-size: small; } .container { @include horizontal-padding($default-padding); max-width: $page-width + 2 * $default-padding; margin-left: auto; margin-right: auto; } .small-container { @include horizontal-padding($default-padding); max-width: $small-page-width + 2 * $default-padding; margin-left: auto; margin-right: auto; }