@mixin html5-boilerplate-media { @media print { @include media-print; } @media all and (orientation:portrait) { @include media-orientation-portrait; } @media all and (orientation:landscape) { @include media-orientation-landscape; } @media screen and (max-device-width: 480px) { @include media-mobile; } } // // print styles // inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ @mixin media-print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } // Don't show links for images pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } // css-discuss.incutio.com/wiki/Printing_Tables tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } // // Media queries for responsive design // @mixin media-orientation-portrait { // Style adjustments for portrait mode goes here } @mixin media-orientation-landscape { // Style adjustments for landscape mode goes here } // Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) // Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ @mixin media-mobile($optimize: true) { // j.mp/textsizeadjust @if not $optimize { // don't allow iOS and WinMobile to mobile-optimize text html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } }