diff --git a/CHANGELOG.md b/CHANGELOG.md index 899e415b..9dee6bd3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +* fixes some styles in IE10 +* resets IE edge mode +* updates h5bp styles to 5.1.0 +* updates `normalize.css` to 3.0.3 +* updates build process + ## v0.27.0 - *2015-04-06* diff --git a/src/_h5ai/client/css/lib/h5bp-main-footer.less b/src/_h5ai/client/css/lib/h5bp-main-footer.less index 86d54ab9..994b56de 100644 --- a/src/_h5ai/client/css/lib/h5bp-main-footer.less +++ b/src/_h5ai/client/css/lib/h5bp-main-footer.less @@ -3,35 +3,16 @@ ========================================================================== */ /* - * Image replacement - */ - -.ir { - background-color: transparent; - border: 0; - overflow: hidden; - /* IE 6/7 fallback */ - *text-indent: -9999px; -} - -.ir:before { - content: ""; - display: block; - width: 0; - height: 150%; -} - -/* - * Hide from both screenreaders and browsers: h5bp.com/u + * Hide visually and from screen readers: */ .hidden { display: none !important; - visibility: hidden; } /* - * Hide only visually, but have it available for screenreaders: h5bp.com/v + * Hide only visually, but have it available for screen readers: + * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden { @@ -46,8 +27,9 @@ } /* - * Extends the .visuallyhidden class to allow the element to be focusable - * when navigated to via the keyboard: h5bp.com/p + * Extends the .visuallyhidden class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, @@ -61,7 +43,7 @@ } /* - * Hide visually and from screenreaders, but maintain layout + * Hide visually and from screen readers, but maintain layout */ .invisible { @@ -90,24 +72,35 @@ clear: both; } -/* - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ -.clearfix { - *zoom: 1; -} +// @media only screen and (min-width: 35em) { +// /* Style adjustments for viewports that meet the condition */ +// } + +// @media print, +// (-webkit-min-device-pixel-ratio: 1.25), +// (min-resolution: 120dpi) { +// /* Style adjustments for high resolution devices */ +// } /* ========================================================================== Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r + Inlined to avoid the additional HTTP request: + http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { - * { + *, + *:before, + *:after { background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ + color: #000 !important; /* Black prints faster: + http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } @@ -126,12 +119,12 @@ } /* - * Don't show links for images, or javascript/internal links + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol */ - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { + a[href^="#"]:after, + a[href^="javascript:"]:after { content: ""; } @@ -141,8 +134,13 @@ page-break-inside: avoid; } + /* + * Printing Tables: + * http://css-discuss.incutio.com/wiki/Printing_Tables + */ + thead { - display: table-header-group; /* h5bp.com/t */ + display: table-header-group; } tr, @@ -154,10 +152,6 @@ max-width: 100% !important; } - @page { - margin: 0.5cm; - } - p, h2, h3 { diff --git a/src/_h5ai/client/css/lib/h5bp-main-header.less b/src/_h5ai/client/css/lib/h5bp-main-header.less index 804835e0..00261852 100644 --- a/src/_h5ai/client/css/lib/h5bp-main-header.less +++ b/src/_h5ai/client/css/lib/h5bp-main-header.less @@ -1,4 +1,4 @@ -/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ +/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. @@ -10,21 +10,16 @@ Base styles: opinionated defaults ========================================================================== */ -html, -button, -input, -select, -textarea { +html { color: #222; -} - -body { font-size: 1em; line-height: 1.4; } /* - * Remove text-shadow in selection highlight: h5bp.com/i + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * * These selection rule sets have to be separate. * Customize the background color to match your design. */ @@ -53,13 +48,16 @@ hr { } /* - * Remove the gap between images, videos, audio and canvas and the bottom of - * their containers: h5bp.com/i/440 + * Remove the gap between audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, +iframe, img, +svg, video { vertical-align: middle; } @@ -82,6 +80,17 @@ textarea { resize: vertical; } +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + /* ========================================================================== Author's custom styles ========================================================================== */ diff --git a/src/_h5ai/client/css/lib/h5bp-normalize.less b/src/_h5ai/client/css/lib/h5bp-normalize.less index 42e24d68..5e5e3c89 100644 --- a/src/_h5ai/client/css/lib/h5bp-normalize.less +++ b/src/_h5ai/client/css/lib/h5bp-normalize.less @@ -1,11 +1,33 @@ -/*! normalize.css v1.1.3 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ -/* ========================================================================== - HTML5 display definitions +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions ========================================================================== */ /** - * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. */ article, @@ -17,22 +39,24 @@ footer, header, hgroup, main, +menu, nav, section, summary { - display: block; + display: block; } /** - * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, +progress, video { - display: inline-block; - *display: inline; - *zoom: 1; + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -41,215 +65,86 @@ video { */ audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } /** - * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. - * Known issue: no IE 6 support. + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ -[hidden] { - display: none; +[hidden], +template { + display: none; } -/* ========================================================================== - Base +/* Links ========================================================================== */ /** - * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using - * `em` units. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. + * Remove the gray background color from active links in IE 10. */ -html { - font-size: 100%; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ +a { + background-color: transparent; } /** - * Address `font-family` inconsistency between `textarea` and other form - * elements. - */ - -html, -button, -input, -select, -textarea { - font-family: sans-serif; -} - -/** - * Address margins handled incorrectly in IE 6/7. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. + * Improve readability of focused elements when they are also in an + * active/hover state. */ a:active, a:hover { - outline: 0; + outline: 0; } -/* ========================================================================== - Typography +/* Text-level semantics ========================================================================== */ /** - * 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. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -h2 { - font-size: 1.5em; - margin: 0.83em 0; -} - -h3 { - font-size: 1.17em; - margin: 1em 0; -} - -h4 { - font-size: 1em; - margin: 1.33em 0; -} - -h5 { - font-size: 0.83em; - margin: 1.67em 0; -} - -h6 { - font-size: 0.67em; - margin: 2.33em 0; -} - -/** - * Address styling not present in IE 7/8/9, Safari 5, and Chrome. + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } /** - * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { - font-weight: bold; -} - -blockquote { - margin: 1em 40px; + font-weight: bold; } /** - * Address styling not present in Safari 5 and Chrome. + * Address styling not present in Safari and Chrome. */ dfn { - font-style: italic; + font-style: italic; } /** - * Address differences between Firefox and other browsers. - * Known issue: no IE 6/7 normalization. + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +h1 { + font-size: 2em; + margin: 0.67em 0; } /** - * Address styling not present in IE 6/7/8/9. + * Address styling not present in IE 8/9. */ mark { - background: #ff0; - color: #000; -} - -/** - * Address margins set differently in IE 6/7. - */ - -p, -pre { - margin: 1em 0; -} - -/** - * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/** - * Address CSS quotes not supported in IE 6/7. - */ - -q { - quotes: none; -} - -/** - * Address `quotes` property not supported in Safari 4. - */ - -q:before, -q:after { - content: ''; - content: none; + background: #ff0; + color: #000; } /** @@ -257,7 +152,7 @@ q:after { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -266,165 +161,122 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } -/* ========================================================================== - Lists +/* Embedded content ========================================================================== */ /** - * Address margins set differently in IE 6/7. - */ - -dl, -menu, -ol, -ul { - margin: 1em 0; -} - -dd { - margin: 0 0 0 40px; -} - -/** - * Address paddings set differently in IE 6/7. - */ - -menu, -ol, -ul { - padding: 0 0 0 40px; -} - -/** - * Correct list images handled incorrectly in IE 7. - */ - -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * 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. + * Remove border when inside `a` element in IE 8/9/10. */ img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ + border: 0; } /** - * Correct overflow displayed oddly in IE 9. + * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } -/* ========================================================================== - Figures +/* Grouping content ========================================================================== */ /** - * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + * Address margin not present in IE 8/9 and Safari. */ figure { - margin: 0; + margin: 1em 40px; } -/* ========================================================================== - Forms +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms ========================================================================== */ /** - * Correct margin displayed oddly in IE 6/7. + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. */ -form { - margin: 0; -} - /** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 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 { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ -} - -/** - * 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. Improve appearance and consistency in all browsers. + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, +optgroup, select, textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ } /** - * Address Firefox 3+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Address `overflow` set to `hidden` in IE 8/9/10/11. */ -button, -input { - line-height: normal; +button { + overflow: visible; } /** * 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. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. */ button, select { - text-transform: none; + text-transform: none; } /** @@ -433,17 +285,14 @@ select { * 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. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - *overflow: visible; /* 4 */ + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ } /** @@ -452,69 +301,112 @@ input[type="submit"] { button[disabled], html input[disabled] { - cursor: default; + cursor: default; } /** - * 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. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ -} - -/** - * 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). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 3+. + * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } /** - * 1. Remove default vertical scrollbar in IE 6/7/8/9. - * 2. Improve readability and alignment in all browsers. + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + box-sizing: content-box; /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; } -/* ========================================================================== - Tables +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables ========================================================================== */ /** @@ -522,6 +414,11 @@ textarea { */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; } diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less index 7964dae6..f72bc4af 100644 --- a/src/_h5ai/client/css/styles.less +++ b/src/_h5ai/client/css/styles.less @@ -1,4 +1,3 @@ - @import "lib/h5bp-normalize"; @import "lib/h5bp-main-header"; diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade index b43885a1..4c79a96b 100644 --- a/src/_h5ai/index.html.jade +++ b/src/_h5ai/index.html.jade @@ -4,6 +4,7 @@ doctype html head meta( charset="utf-8" ) + meta( http-equiv="x-ua-compatible", content="ie=edge" ) title #{pkg.name} #{pkg.version} Server Setup meta( name="description", content="#{pkg.name} #{pkg.version} Server Setup" ) meta( name="viewport", content="width=device-width, initial-scale=1" ) diff --git a/src/_h5ai/server/php/inc/page.php.jade b/src/_h5ai/server/php/inc/page.php.jade index 953565d7..36ff8b61 100644 --- a/src/_h5ai/server/php/inc/page.php.jade +++ b/src/_h5ai/server/php/inc/page.php.jade @@ -9,6 +9,7 @@ doctype html head meta( charset="utf-8" ) + meta( http-equiv="x-ua-compatible", content="ie=edge" ) title index ยท powered by #{pkg.name} #{pkg.version} (#{pkg.homepage}) meta( name="description", content="index - powered by #{pkg.name} #{pkg.version} (#{pkg.homepage})" ) meta( name="viewport", content="width=device-width, initial-scale=1" )