From 75b5ab5a196f03f595307b78b3744deba118862f Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Mon, 8 Jul 2013 01:04:42 +0200 Subject: [PATCH] Updates h5bp styles and normalization. --- .../client/css/lib/h5bp-main-footer.less | 13 +- .../client/css/lib/h5bp-main-header.less | 2 +- src/_h5ai/client/css/lib/h5bp-normalize.less | 223 ++++++++++-------- 3 files changed, 134 insertions(+), 104 deletions(-) diff --git a/src/_h5ai/client/css/lib/h5bp-main-footer.less b/src/_h5ai/client/css/lib/h5bp-main-footer.less index 9dc81d19..634207e9 100644 --- a/src/_h5ai/client/css/lib/h5bp-main-footer.less +++ b/src/_h5ai/client/css/lib/h5bp-main-footer.less @@ -1,4 +1,3 @@ - /* ========================================================================== Helper classes ========================================================================== */ @@ -19,7 +18,7 @@ content: ""; display: block; width: 0; - height: 100%; + height: 150%; } /* @@ -102,7 +101,7 @@ /* ========================================================================== EXAMPLE Media Queries for Responsive Design. - Theses examples override the primary ('mobile first') styles. + These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @@ -110,8 +109,10 @@ /* Style adjustments for viewports that meet the condition */ } -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-resolution: 144dpi) { +@media print, + (-o-min-device-pixel-ratio: 5/4), + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } @@ -124,7 +125,7 @@ * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ - box-shadow:none !important; + box-shadow: none !important; text-shadow: none !important; } diff --git a/src/_h5ai/client/css/lib/h5bp-main-header.less b/src/_h5ai/client/css/lib/h5bp-main-header.less index 724098df..8e4439ab 100644 --- a/src/_h5ai/client/css/lib/h5bp-main-header.less +++ b/src/_h5ai/client/css/lib/h5bp-main-header.less @@ -25,7 +25,7 @@ body { /* * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate. + * These selection rule sets have to be separate. * Customize the background color to match your design. */ diff --git a/src/_h5ai/client/css/lib/h5bp-normalize.less b/src/_h5ai/client/css/lib/h5bp-normalize.less index d4210aac..8d57e3c9 100644 --- a/src/_h5ai/client/css/lib/h5bp-normalize.less +++ b/src/_h5ai/client/css/lib/h5bp-normalize.less @@ -1,11 +1,11 @@ -/*! normalize.css v1.0.1 | MIT License | git.io/normalize */ +/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ -/* - * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, @@ -16,14 +16,15 @@ figure, footer, header, hgroup, +main, nav, section, summary { display: block; } -/* - * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, @@ -34,8 +35,8 @@ video { *zoom: 1; } -/* - * Prevents modern browsers from displaying `audio` without controls. +/** + * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ @@ -44,9 +45,8 @@ audio:not([controls]) { height: 0; } -/* - * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, - * and Safari 4. +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ @@ -58,21 +58,27 @@ audio:not([controls]) { Base ========================================================================== */ -/* - * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using +/** + * 1. Prevent system color scheme's background color being used in Firefox, IE, + * and Opera. + * 2. Prevent system color scheme's text color being used in Firefox, IE, and + * Opera. + * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. - * 2. Prevents iOS text size adjust after orientation change, without disabling + * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ + background: #fff; /* 1 */ + color: #000; /* 2 */ + font-size: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 4 */ + -ms-text-size-adjust: 100%; /* 4 */ } -/* - * Addresses `font-family` inconsistency between `textarea` and other form +/** + * Address `font-family` inconsistency between `textarea` and other form * elements. */ @@ -84,8 +90,8 @@ textarea { font-family: sans-serif; } -/* - * Addresses margins handled incorrectly in IE 6/7. +/** + * Address margins handled incorrectly in IE 6/7. */ body { @@ -96,16 +102,16 @@ body { Links ========================================================================== */ -/* - * Addresses `outline` inconsistency between Chrome and other browsers. +/** + * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } -/* - * Improves readability when focused and also mouse hovered in all browsers. +/** + * Improve readability when focused and also mouse hovered in all browsers. */ a:active, @@ -117,9 +123,9 @@ a:hover { Typography ========================================================================== */ -/* - * Addresses font sizes and margins set differently in IE 6/7. - * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ @@ -149,20 +155,20 @@ h5 { } h6 { - font-size: 0.75em; + font-size: 0.67em; margin: 2.33em 0; } -/* - * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } -/* - * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, @@ -174,16 +180,27 @@ blockquote { margin: 1em 40px; } -/* - * Addresses styling not present in Safari 5 and Chrome. +/** + * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } -/* - * Addresses styling not present in IE 6/7/8/9. +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. */ mark { @@ -191,8 +208,8 @@ mark { color: #000; } -/* - * Addresses margins set differently in IE 6/7. +/** + * Address margins set differently in IE 6/7. */ p, @@ -200,8 +217,8 @@ pre { margin: 1em 0; } -/* - * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, @@ -213,8 +230,8 @@ samp { font-size: 1em; } -/* - * Improves readability of pre-formatted text in all browsers. +/** + * Improve readability of pre-formatted text in all browsers. */ pre { @@ -223,16 +240,16 @@ pre { word-wrap: break-word; } -/* - * Addresses CSS quotes not supported in IE 6/7. +/** + * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } -/* - * Addresses `quotes` property not supported in Safari 4. +/** + * Address `quotes` property not supported in Safari 4. */ q:before, @@ -241,16 +258,16 @@ q:after { content: none; } -/* - * Addresses inconsistent and variable font size in all browsers. +/** + * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } -/* - * Prevents `sub` and `sup` affecting `line-height` in all browsers. +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, @@ -273,8 +290,8 @@ sub { Lists ========================================================================== */ -/* - * Addresses margins set differently in IE 6/7. +/** + * Address margins set differently in IE 6/7. */ dl, @@ -288,8 +305,8 @@ dd { margin: 0 0 0 40px; } -/* - * Addresses paddings set differently in IE 6/7. +/** + * Address paddings set differently in IE 6/7. */ menu, @@ -298,8 +315,8 @@ ul { padding: 0 0 0 40px; } -/* - * Corrects list images handled incorrectly in IE 7. +/** + * Correct list images handled incorrectly in IE 7. */ nav ul, @@ -312,9 +329,9 @@ nav ol { Embedded content ========================================================================== */ -/* - * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. - * 2. Improves image quality when scaled in IE 7. +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. */ img { @@ -322,8 +339,8 @@ img { -ms-interpolation-mode: bicubic; /* 2 */ } -/* - * Corrects overflow displayed oddly in IE 9. +/** + * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { @@ -334,8 +351,8 @@ svg:not(:root) { Figures ========================================================================== */ -/* - * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { @@ -346,15 +363,15 @@ figure { Forms ========================================================================== */ -/* - * Corrects margin displayed oddly in IE 6/7. +/** + * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } -/* +/** * Define consistent border, margin, and padding. */ @@ -364,10 +381,10 @@ fieldset { padding: 0.35em 0.625em 0.75em; } -/* - * 1. Corrects color not being inherited in IE 6/7/8/9. - * 2. Corrects text not wrapping in Firefox 3. - * 3. Corrects alignment displayed oddly in IE 6/7. +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. */ legend { @@ -377,11 +394,11 @@ legend { *margin-left: -7px; /* 3 */ } -/* - * 1. Corrects font size not being inherited in all browsers. - * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. - * 3. Improves appearance and consistency in all browsers. + * 3. Improve appearance and consistency in all browsers. */ button, @@ -394,8 +411,8 @@ textarea { *vertical-align: middle; /* 3 */ } -/* - * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ @@ -404,13 +421,25 @@ input { line-height: normal; } -/* +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. - * 2. Corrects inability to style clickable `input` types in iOS. - * 3. Improves usability and consistency of cursor style between image-type + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type * `input` and others. - * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ @@ -423,19 +452,19 @@ input[type="submit"] { *overflow: visible; /* 4 */ } -/* +/** * Re-set default cursor for disabled elements. */ button[disabled], -input[disabled] { +html input[disabled] { cursor: default; } -/* - * 1. Addresses box sizing set to content-box in IE 8/9. - * 2. Removes excess padding in IE 8/9. - * 3. Removes excess padding in IE 7. +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ @@ -447,9 +476,9 @@ input[type="radio"] { *width: 13px; /* 3 */ } -/* - * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ @@ -460,8 +489,8 @@ input[type="search"] { box-sizing: content-box; } -/* - * Removes inner padding and search cancel button in Safari 5 and Chrome +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ @@ -470,8 +499,8 @@ input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -/* - * Removes inner padding and border in Firefox 3+. +/** + * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, @@ -480,9 +509,9 @@ input::-moz-focus-inner { padding: 0; } -/* - * 1. Removes default vertical scrollbar in IE 6/7/8/9. - * 2. Improves readability and alignment in all browsers. +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. */ textarea { @@ -494,7 +523,7 @@ textarea { Tables ========================================================================== */ -/* +/** * Remove most spacing between table cells. */