Contents

@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; }

  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; }

  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 {
  // Prevent iOS, WinMobile from adjusting font size
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
html5-boilerplate-0.1.0	stylesheets/html5-boilerplate/_media.scss