/* Less Framework 3 by Joni Korpi http://lessframework.com */ /* Resets ------ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; } a img {border: 0;} figure {position: relative;} figure img {width: 100%;} /* Typography presets ------------------ */ .gigantic { font-size: 110px; line-height: 120px; letter-spacing: -2px; } .huge, h1 { font-size: 68px; line-height: 72px; letter-spacing: -1px; } .large, h2 { font-size: 42px; line-height: 48px; } .big, h3 { font-size: 26px; line-height: 36px; } .normal, body { font: 16px/24px Helvetica, Arial, sans-serif; } .small { font-size: 13px; line-height: 18px; } /* Default 8-column layout 60 px columns, 24 px gutters, 60 px margins, 768 px total --------------------------------------------------------- 1 2 3 4 5 6 7 8 60px 144px 228px 312px 396px 480px 564px 648px */ body { background: rgb(232,232,232); padding: 84px 60px 0; width: 648px; -webkit-tap-highlight-color: rgb(255,255,0); } ::selection {background: rgb(255,255,0);} ::-moz-selection {background: rgb(255,255,0);} img::selection {background: transparent;} img::-moz-selection {background: transparent;} #example { height: 600px; background: rgb(60,97,158); } /* 13-column layout 60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars) --------------------------------------------------------------------------------------- 1 2 3 4 5 6 7 8 9 10 11 12 13 60px 144px 228px 312px 396px 480px 564px 648px 732px 816px 900px 984px 1068px */ @media only screen and (min-width: 1212px) { body { padding: 96px 72px 0; width: 1068px; } } /* 5-column layout 60 px columns, 24 px gutters, 42 px margins, 480 px total --------------------------------------------------------- 1 2 3 4 5 60px 144px 228px 312px 396px */ @media only screen and (max-width: 767px) and (min-width: 480px) { body { padding: 60px 42px 0; width: 396px; -webkit-text-size-adjust: 100%; } } /* 3-column layout 60 px columns, 24 px gutters, 46 px margins, 320 px total --------------------------------------------------------- 1 2 3 60px 144px 228px */ @media only screen and (max-width: 479px) { body { padding: 48px 46px 0; width: 228px; -webkit-text-size-adjust: 100%; } } /* Overrides for iPhone 4 and other high device-pixel-ratio devices ----------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #example { background: rgb(255,158,97); } }