/** * $CONTENTS * * $GLOBAL .................... Variables & Mixins available to all of our .scss files * $NORMALIZE ................. Reset our CSS first * $BASE ...................... Unclassed HTML Elements, @font-face, Typography * $OBJECTS ................... Objects and abstractions. Simple patterns that can be re-used and extended * $COMPONENTS ................ Full components constructed from objects and their extensions **/ /** * RANGES * We use these functions to define ranges for various things, like media queries. * * lower-bound( $range ) * upper-bound( $range ) */ /** * strip-unit() */ /** * convert-to-rem() */ /** * rem-calc() */ /** * em-calc() */ .breakpoint-debug { display: block; padding: 5px; position: absolute; top: 0; right: 0; background: rgba(255, 0, 0, 0.5); color: white; font-family: sans-serif; font-weight: bold; } @media only screen { .breakpoint-debug:after { content: "small"; } } @media only screen and (min-width: 47.5625em) { .breakpoint-debug:after { content: "medium"; } } @media only screen and (min-width: 68.8125em) { .breakpoint-debug:after { content: "large"; } } @media only screen and (min-width: 75.0625em) { .breakpoint-debug:after { content: "xlarge"; } } @media only screen and (min-width: 81.3125em) { .breakpoint-debug:after { content: "xxlarge"; } } /** * TransomBreakpoint * * This responsive hack will set the font-family * of a meta tag. * * We use javascript to grab this string and * do all kinds of sorcery */ meta.meta-breakpoint-name { font-family: "small"; } @media only screen and (min-width: 47.5625em) { meta.meta-breakpoint-name { font-family: "medium"; } } @media only screen and (min-width: 68.8125em) { meta.meta-breakpoint-name { font-family: "large"; } } @media only screen and (min-width: 75.0625em) { meta.meta-breakpoint-name { font-family: "xlarge"; } } /*------------------------------------* $HARDWARE ACCELLERATION \*------------------------------------*/ /** * Enable Webkit Hardware Accelleration * Improve performance and fixes a lot of * font jiggles & quirks with animation. */ /*------------------------------------* $FONT SMOOTHING \*------------------------------------*/ /** * @include font-smoothing() * * Normally this is applied to all text via. the tag * However, depending on font properties, it's useful to * turn font-smoothing("off"); */ /*------------------------------------* $CSS TRIANGLE \*------------------------------------*/ /*------------------------------------* $RESET BUTTONS & SUBMITS \*------------------------------------*/ /** * @include reset-button() * * Take a