Merge branch 'dev'

README.md

@@ -13,7 +13,8 @@ Styles are broken down into the following groups: **Reset, Typography, Elements,
 
 This project attempts to adhere to the [Semantic Versioning Specification](http://semver.org/) as much as possible.
 
-- **0.9.2** relative-size function now uses $base-fs as a default value for $context so it can be used with a single argument
+- **0.9.3** Don't wrap layout styles in @media screen { } call. Causes issues with inline media queries.
+- 0.9.2 relative-size function now uses $base-fs as a default value for $context so it can be used with a single argument
 - 0.9.1 Reset styles in sync with HTML5 Boilerplate 3. Including removal of hot pink. 
 - 0.9.0 Added base font-size and line-height variables to help when defining a baseline rhythm
 - 0.8.1 Minor bugfix, borked comment stopping styles from compiling

style/scss/_variables.scss

@@ -44,8 +44,9 @@ $notice-color                 : #66b;
 $base-fs                      : 16; // Base font-size
 $base-lh                      : 24; // Base line-height
 
+$sans-family                  : Verdana, sans-serif;
+$serif-family                 : Georgia, serif;
+$default-family               : $sans-family;
 $display-family               : "Helvetica Neue", Helvetica, Arial, sans-serif;
-$caption-family               : verdana, sans-serif;
-$sans-family                  : verdana, sans-serif;
-$serif-family                 : georgia, serif;
+$caption-family               : Verdana, sans-serif;
 $monospace-family             : "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", "Droid Mono", monospace;

style/scss/common/_typography.scss

@@ -7,7 +7,7 @@ body { font: #{$base-fs/16*100}%/($base-lh/$base-fs) sans-serif; }
   ---------------------------------------------------------------------- */
 
   /* Default font stack */
-  body, select, input, textarea, button { font-family: $sans-family; }
+  body, select, input, textarea, button { font-family: $default-family; }
 
   /* Display font stack */
   h1,h2,h3,h4,h5,h6 { font-family: $display-family; }

style/scss/media/_print.scss

@@ -1,19 +1,19 @@
 /*= @group Print
 ---------------------------------------------------------------------- */
 
-  @media print {
+@media print {
 
-    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
-    a, a:visited { color: #444 !important; text-decoration: underline; }
+    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
+    a, a:visited { text-decoration: underline; }
     a[href]:after { content: " (" attr(href) ")"; }
     abbr[title]:after { content: " (" attr(title) ")"; }
-    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
     pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+    thead { display: table-header-group; } /* h5bp.com/t */
     tr, img { page-break-inside: avoid; }
     img { max-width: 100% !important; }
     @page { margin: 0.5cm; }
     p, h2, h3 { orphans: 3; widows: 3; }
-    h2, h3{ page-break-after: avoid; }
+    h2, h3 { page-break-after: avoid; }
 
-  }
+}

style/scss/media/_respond.scss

@@ -2,12 +2,12 @@
 ---------------------------------------------------------------------- */
 // Default @media declarations from HTML5 Boilerplate. Modify as required
 
-@media only screen and (min-width: 480px) {
-  /* Style adjustments for viewports 480px and over go here */
+// @media only screen and (min-width: 480px) {
+//   /* Style adjustments for viewports 480px and over go here */
 
-}
+// }
 
-@media only screen and (min-width: 768px) {
-  /* Style adjustments for viewports 768px and over go here */
+// @media only screen and (min-width: 768px) {
+//   /* Style adjustments for viewports 768px and over go here */
 
-}
+// }

style/scss/style.scss

@@ -26,18 +26,11 @@
 @import "common/reset", "common/typography", "common/elements";
 
 // Layout
-//   Layout = major components, e.g., header, footer etc.
-//   Module = minor components, e.g., navigation bar, callout, widgets etc.
-//   State  = a state is something that augments + overrides all other styles, e.g., success or error state
-//
-//  The @media declaration ensures that every medium gets typography and colour styles,
-//  but only mediums which implement `screen` get the layout styles.
-//
-//  This has the added benefit of being ignored by older browsers (I mean *really* old, e.g. Netscape 4),
-//  so if for any reason the site *is* viewed by legacy browsers they just get basic, but accessible, styling.
-//  - from Adaptive Web Design, http://easy-readers.net/
+// Layout = major components, e.g., header, footer etc.
+// Module = minor components, e.g., navigation bar, callout, widgets etc.
+// State  = a state is something that augments + overrides all other styles, e.g., success or error state
 
-@media screen {  @import "components/layout", "components/module", "components/state"; }
+@import "components/layout", "components/module", "components/state";
 
 // Media queries
 @import "media/respond";