From f79425bc867bf91353619466bafb68420184b801 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 12 Jul 2012 13:15:20 -0700 Subject: [PATCH 01/77] convert to scss, and impose my preferred defaults use the _sizing.scss file for the rem-with-px fallback mixin; impose my preferred line-height/margin regime --- _normalize.scss | 464 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 464 insertions(+) create mode 100644 _normalize.scss diff --git a/_normalize.scss b/_normalize.scss new file mode 100644 index 000000000..af5b8b4f7 --- /dev/null +++ b/_normalize.scss @@ -0,0 +1,464 @@ +/*! _normalize.scss 2012-02-07T12:37 UTC - http://github.com/DArcMattr/normalize.css */ + +/* ============================================================================= + Mixins + ========================================================================== */ +@import "../sizing"; + +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { + display: block; } + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ + +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; } + +/* + * Prevents modern browsers from displaying 'audio' without controls + */ + +audio:not([controls]), [hidden] { + display: none; } + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ + +/* ============================================================================= + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ + +html { + font-size: 100%; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 2 */ + font-family: sans-serif; } + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ + +button, input, select, textarea { + font-family: sans-serif; } + +/* + * Addresses margins handled incorrectly in IE6/7 + */ + +body { + margin: 0; } + +/* ============================================================================= + Links + ========================================================================== */ + +/* + * Addresses outline displayed oddly in Chrome + */ + +a { + &:focus { + outline: thin dotted; } + &:hover, &:active { + outline: 0; } } + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ + +/* ============================================================================= + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ + +h1 { + @include rem( font-size, 2rem ); + @include rem( line-height, 2.4rem ); + @include rem( margin, 1.2rem 0 ); +} + +h2 { + @include rem( font-size, 1.5rem ); + @include rem( line-height, 2.4rem ); + @include rem( margin, 1.2rem 0); +} + +h3 { + @include rem( font-size, 1.16667rem); + @include rem( line-height, 2.4rem); + @include rem( margin, 1.2rem 0); +} + +h4 { + @include rem( font-size, 1rem); + @include rem( line-height, 2.4rem); + @include rem( margin, 1.2rem 0); +} + +h5 { + @include rem( font-size, 0.83333rem); + @include rem( line-height, 2.4rem); + @include rem( margin, 1.2rem 0); +} + +h6 { + @include rem( font-size, 0.75rem); + @include rem( line-height, 2.4rem); + @include rem( margin, 1.2rem 0); +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ + +abbr[title] { + border-bottom: 1px dotted; } + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ + +b, strong { + font-weight: bold; } + +blockquote { + @include rem( margin, 1.2rem 0 1.2rem 1.2rem); +} + +/* + * Addresses styling not present in S5, Chrome + */ + +dfn { + font-style: italic; } + +/* + * Addresses styling not present in IE6/7/8/9 + */ + +mark { + background: #ff0; + color: #000; } + +/* + * Addresses margins set differently in IE6/7 + */ + +p { + @include rem( margin, 1.2rem 0); +} + +pre { + @include rem( margin, 1.2rem 0); + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; } + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ + +code, kbd, samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + @include rem( font-size, 1rem); +} + +/* + * Improves readability of pre-formatted text in all browsers + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ + +/* 1 */ + +q { + quotes: none; + &:before, &:after { + content: ''; + content: none; } } + +/* 2 */ + +small { + font-size: 75%; } + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ + +sub { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* ============================================================================= + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE6/7 + */ + +dl, menu, ol, ul { + @include rem( margin, 1.2rem 0 ); +} + +dd { + margin: 0 0 0 40px; } + +/* + * Addresses paddings set differently in IE6/7 + */ + +menu, ol, ul { + padding: 0 0 0 40px; } + +/* + * Corrects list images handled incorrectly in IE7 + */ + +nav { + ul, ol { + list-style: none; + list-style-image: none; } } + +/* ============================================================================= + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { + border: 0; + /* 1 */ + -ms-interpolation-mode: bicubic; + /* 2 */ } + +/* + * Corrects overflow displayed oddly in IE9 + */ + +svg:not(:root) { + overflow: hidden; } + +/* ============================================================================= + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ + +figure, form { + margin: 0; } + +/* ============================================================================= + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE6/7 + */ + +/* + * Define consistent border, margin, and padding + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ + +legend { + border: 0; + /* 1 */ + padding: 0; + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ } + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ + +button, input, select, textarea { + font-size: 100%; + /* 1 */ + margin: 0; + /* 2 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ } + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ + +button, input { + line-height: normal; + /* 1 */ } + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ + +button { + cursor: pointer; + /* 1 */ + -webkit-appearance: button; + /* 2 */ + *overflow: visible; + /* 3 */ } + +input { + &[type="button"], &[type="reset"], &[type="submit"] { + cursor: pointer; + /* 1 */ + -webkit-appearance: button; + /* 2 */ + *overflow: visible; + /* 3 */ } } + +/* + * Re-set default cursor for disabled elements + */ + +button[disabled] { + cursor: default; } + +input { + &[disabled] { + cursor: default; } + &[type="checkbox"], &[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ } + &[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; + &::-webkit-search-decoration, &::-webkit-search-cancel-button { + -webkit-appearance: none; } } } + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + */ + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; } + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves readability and alignment in all browsers + */ + +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ } + +/* ============================================================================= + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells + */ + +table { + border-collapse: collapse; + border-spacing: 0; } From d29b391ab99ee6fa929ef1301657c1482aed9369 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 12 Jul 2012 13:29:35 -0700 Subject: [PATCH 02/77] sync with my and Nekolas' changes --- _normalize.scss | 192 ++++++++++++++++++++++++------------------------ 1 file changed, 97 insertions(+), 95 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index af5b8b4f7..885074159 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,23 +1,23 @@ -/*! _normalize.scss 2012-02-07T12:37 UTC - http://github.com/DArcMattr/normalize.css */ +/*! _normalize.scss 2012-07-07T09:50 UTC - http://github.com/DArcMattr/normalize.css */ /* ============================================================================= Mixins ========================================================================== */ @import "../sizing"; -/* ============================================================================= +/* ========================================================================== HTML5 display definitions ========================================================================== */ /* - * Corrects block display not defined in IE6/7/8/9 & FF3 + * Corrects `block` display not defined in IE6/7/8/9 & FF3. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* - * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. */ audio, canvas, video { @@ -26,26 +26,31 @@ audio, canvas, video { *zoom: 1; } /* - * Prevents modern browsers from displaying 'audio' without controls + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS5 devices. */ -audio:not([controls]), [hidden] { - display: none; } +audio:not([controls]) { + display: none; + height: 0; } /* - * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - * Known issue: no IE6 support + * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. + * Known issue: no IE6 support. */ -/* ============================================================================= +[hidden] { + display: none; } + +/* ========================================================================== Base ========================================================================== */ /* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using + * `em` units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. */ html { @@ -58,45 +63,46 @@ html { font-family: sans-serif; } /* - * Addresses font-family inconsistency between 'textarea' and other form elements. + * Addresses `font-family` inconsistency between `textarea` and other form + * elements. */ button, input, select, textarea { font-family: sans-serif; } /* - * Addresses margins handled incorrectly in IE6/7 + * Addresses margins handled incorrectly in IE6/7. */ body { margin: 0; } -/* ============================================================================= +/* ========================================================================== Links ========================================================================== */ /* - * Addresses outline displayed oddly in Chrome + * Addresses `outline` inconsistency between Chrome and other browsers. */ a { &:focus { outline: thin dotted; } - &:hover, &:active { + &:active, &:hover { outline: 0; } } /* - * Improves readability when focused and also mouse hovered in all browsers + * Improves readability when focused and also mouse hovered in all browsers. * people.opera.com/patrickl/experiments/keyboard/test */ -/* ============================================================================= +/* ========================================================================== Typography ========================================================================== */ /* - * Addresses font sizes and margins set differently in IE6/7 - * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + * Addresses font sizes and margins set differently in IE6/7. + * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. */ h1 { @@ -136,15 +142,15 @@ h6 { } /* - * Addresses styling not present in IE7/8/9, S5, Chrome + * Addresses styling not present in IE7/8/9, S5, Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* - * Addresses style set to 'bolder' in FF3+, S4/5, Chrome -*/ + * Addresses style set to `bolder` in FF3+, S4/5, Chrome. + */ b, strong { font-weight: bold; } @@ -154,14 +160,14 @@ blockquote { } /* - * Addresses styling not present in S5, Chrome + * Addresses styling not present in S5, Chrome. */ dfn { font-style: italic; } /* - * Addresses styling not present in IE6/7/8/9 + * Addresses styling not present in IE6/7/8/9. */ mark { @@ -169,32 +175,26 @@ mark { color: #000; } /* - * Addresses margins set differently in IE6/7 + * Addresses margins set differently in IE6/7. */ -p { +p, pre { @include rem( margin, 1.2rem 0); } -pre { - @include rem( margin, 1.2rem 0); - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; } - /* - * Corrects font family set oddly in IE6, S4/5, Chrome + * Corrects font family set oddly in IE6, S4/5, Chrome. * en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ -code, kbd, samp { +code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; - @include rem( font-size, 1rem); + @include rem( margin, 1.2rem 0); } /* - * Improves readability of pre-formatted text in all browsers + * Improves readability of pre-formatted text in all browsers. */ pre { @@ -203,25 +203,24 @@ pre { word-wrap: break-word; } /* - * 1. Addresses CSS quotes not supported in IE6/7 - * 2. Addresses quote property not supported in S4 + * Addresses CSS quotes not supported in IE6/7. */ -/* 1 */ - q { quotes: none; &:before, &:after { content: ''; content: none; } } -/* 2 */ +/* + * Addresses `quotes` property not supported in S4. + */ small { font-size: 75%; } /* - * Prevents sub and sup affecting line-height in all browsers + * Prevents `sub` and `sup` affecting `line-height` in all browsers. * gist.github.com/413930 */ @@ -241,12 +240,12 @@ sup { sub { bottom: -0.25em; } -/* ============================================================================= +/* ========================================================================== Lists ========================================================================== */ /* - * Addresses margins set differently in IE6/7 + * Addresses margins set differently in IE6/7. */ dl, menu, ol, ul { @@ -257,14 +256,14 @@ dd { margin: 0 0 0 40px; } /* - * Addresses paddings set differently in IE6/7 + * Addresses paddings set differently in IE6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /* - * Corrects list images handled incorrectly in IE7 + * Corrects list images handled incorrectly in IE7. */ nav { @@ -272,13 +271,13 @@ nav { list-style: none; list-style-image: none; } } -/* ============================================================================= +/* ========================================================================== Embedded content ========================================================================== */ /* - * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 - * 2. Improves image quality when scaled in IE7 + * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. + * 2. Improves image quality when scaled in IE7. * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ @@ -289,33 +288,33 @@ img { /* 2 */ } /* - * Corrects overflow displayed oddly in IE9 + * Corrects overflow displayed oddly in IE9. */ svg:not(:root) { overflow: hidden; } -/* ============================================================================= +/* ========================================================================== Figures ========================================================================== */ /* - * Addresses margin not present in IE6/7/8/9, S5, O11 + * Addresses margin not present in IE6/7/8/9, S5, O11. */ figure, form { margin: 0; } -/* ============================================================================= +/* ========================================================================== Forms ========================================================================== */ /* - * Corrects margin displayed oddly in IE6/7 + * Corrects margin displayed oddly in IE6/7. */ /* - * Define consistent border, margin, and padding + * Define consistent border, margin, and padding. */ fieldset { @@ -324,9 +323,9 @@ fieldset { padding: 0.35em 0.625em 0.75em; } /* - * 1. Corrects color not being inherited in IE6/7/8/9 - * 2. Corrects text not wrapping in FF3 - * 3. Corrects alignment displayed oddly in IE6/7 + * 1. Corrects color not being inherited in IE6/7/8/9. + * 2. Corrects text not wrapping in FF3. + * 3. Corrects alignment displayed oddly in IE6/7. */ legend { @@ -339,9 +338,9 @@ legend { /* 3 */ } /* - * 1. Corrects font size not being inherited in all browsers - * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome - * 3. Improves appearance and consistency in all browsers + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. + * 3. Improves appearance and consistency in all browsers. */ button, input, select, textarea { @@ -355,39 +354,42 @@ button, input, select, textarea { /* 3 */ } /* - * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + * Addresses FF3/4 setting `line-height` on `input` using `!important` in the + * UA stylesheet. */ button, input { - line-height: normal; - /* 1 */ } + line-height: normal; } /* - * 1. Improves usability and consistency of cursor style between image-type 'input' and others - * 2. Corrects inability to style clickable 'input' types in iOS - * 3. Removes inner spacing in IE7 without affecting normal text inputs - * Known issue: inner spacing remains in IE6 + * 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 + * `input` and others. + * 4. Removes inner spacing in IE7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE6. */ -button { - cursor: pointer; - /* 1 */ +button, html input[type="button"] { -webkit-appearance: button; /* 2 */ + cursor: pointer; + /* 3 */ *overflow: visible; - /* 3 */ } + /* 4 */ } input { - &[type="button"], &[type="reset"], &[type="submit"] { - cursor: pointer; - /* 1 */ + &[type="reset"], &[type="submit"] { -webkit-appearance: button; /* 2 */ + cursor: pointer; + /* 3 */ *overflow: visible; - /* 3 */ } } + /* 4 */ } } /* - * Re-set default cursor for disabled elements + * Re-set default cursor for disabled elements. */ button[disabled] { @@ -412,28 +414,28 @@ input { -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; - &::-webkit-search-decoration, &::-webkit-search-cancel-button { + &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; } } } /* - * 1. Addresses box sizing set to content-box in IE8/9 - * 2. Removes excess padding in IE8/9 - * 3. Removes excess padding in IE7 - Known issue: excess padding remains in IE6 + * 1. Addresses box sizing set to content-box in IE8/9. + * 2. Removes excess padding in IE8/9. + * 3. Removes excess padding in IE7. + * Known issue: excess padding remains in IE6. */ /* - * 1. Addresses appearance set to searchfield in S5, Chrome - * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) + * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` + * to future-proof). */ /* - * Removes inner padding and search cancel button in S5, Chrome on OS X + * Removes inner padding and search cancel button in S5, Chrome on OS X. */ /* - * Removes inner padding and border in FF3+ - * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + * Removes inner padding and border in FF3+. */ button::-moz-focus-inner, input::-moz-focus-inner { @@ -441,8 +443,8 @@ button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; } /* - * 1. Removes default vertical scrollbar in IE6/7/8/9 - * 2. Improves readability and alignment in all browsers + * 1. Removes default vertical scrollbar in IE6/7/8/9. + * 2. Improves readability and alignment in all browsers. */ textarea { @@ -451,12 +453,12 @@ textarea { vertical-align: top; /* 2 */ } -/* ============================================================================= +/* ========================================================================== Tables ========================================================================== */ /* - * Remove most spacing between table cells + * Remove most spacing between table cells. */ table { From d9e3d462b55809ecf37074cec62d1a757e276f70 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Sun, 15 Jul 2012 18:45:53 -0700 Subject: [PATCH 03/77] tweak default list styles --- _normalize.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 885074159..93209ad24 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -253,14 +253,16 @@ dl, menu, ol, ul { } dd { - margin: 0 0 0 40px; } + @include rem( margin, 0 0 0 1.2rem ); +} /* * Addresses paddings set differently in IE6/7. */ menu, ol, ul { - padding: 0 0 0 40px; } + @include rem( padding, 0 0 0 1.2rem ); +} /* * Corrects list images handled incorrectly in IE7. @@ -269,7 +271,9 @@ menu, ol, ul { nav { ul, ol { list-style: none; - list-style-image: none; } } + list-style-image: none; + } +} /* ========================================================================== Embedded content From 12ed52d43ac4cba987bfddc3c290c8c185f66c60 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Mon, 16 Jul 2012 09:55:54 -0700 Subject: [PATCH 04/77] space out
  • s --- _normalize.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_normalize.scss b/_normalize.scss index 93209ad24..c7a8814de 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -264,6 +264,11 @@ menu, ol, ul { @include rem( padding, 0 0 0 1.2rem ); } +li { + @include rem( margin, 1.2rem 0 ); +} + + /* * Corrects list images handled incorrectly in IE7. */ From 7a2313667bd6466a0b651eb076b7730b692cb816 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 17 Jul 2012 16:10:42 -0700 Subject: [PATCH 05/77] pull in more default styles it's an ongoing process to generalize much of the site styles for common elements, I've address
    ,
      , and
        here; sync normalize.css with what I've done in _normalize.scss --- _normalize.scss | 26 ++- normalize.css | 454 +++++++++++++++++++++--------------------------- 2 files changed, 226 insertions(+), 254 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index c7a8814de..8a6588541 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -4,6 +4,7 @@ Mixins ========================================================================== */ @import "../sizing"; +$text-color: #333 !default; /* ========================================================================== HTML5 display definitions @@ -156,7 +157,9 @@ b, strong { font-weight: bold; } blockquote { - @include rem( margin, 1.2rem 0 1.2rem 1.2rem); + @include rem( margin, 1.2rem 0 ); + @include rem( padding-left, .6rem); + @include rem( border-left, .6rem solid $text-color ); } /* @@ -261,9 +264,30 @@ dd { */ menu, ol, ul { + list-style-position: outside; @include rem( padding, 0 0 0 1.2rem ); } +ol { + list-style-type: decimal; + ol { + list-style-type: upper-alpha; + ol { + list-style-type: lower-alpha; + } + } +} + +ul { + list-style-type: disc; + ul { + list-style-type: square; + ul { + list-style-type: circle; + } + } +} + li { @include rem( margin, 1.2rem 0 ); } diff --git a/normalize.css b/normalize.css index 8fa27e0ba..3a52ed2a3 100644 --- a/normalize.css +++ b/normalize.css @@ -1,405 +1,358 @@ -/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */ - +/* _normalize.scss 2012-07-07T09:50 UTC - http://github.com/DArcMattr/normalize.css */ +/* ============================================================================= + Mixins + ========================================================================== */ /* ========================================================================== HTML5 display definitions ========================================================================== */ - /* * Corrects `block` display not defined in IE6/7/8/9 & FF3. */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { + display: block; } /* * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. */ - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} +audio, canvas, video { + display: inline-block; + *display: inline; + *zoom: 1; } /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS5 devices. */ - audio:not([controls]) { - display: none; - height: 0; -} + display: none; + height: 0; } /* * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. * Known issue: no IE6 support. */ - [hidden] { - display: none; -} + display: none; } /* ========================================================================== Base ========================================================================== */ - /* * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using * `em` units. * 2. Prevents 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 */ -} + font-size: 100%; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 2 */ + font-family: sans-serif; } /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ - -html, -button, -input, -select, -textarea { - font-family: sans-serif; -} +button, input, select, textarea { + font-family: sans-serif; } /* * Addresses margins handled incorrectly in IE6/7. */ - body { - margin: 0; -} + margin: 0; } /* ========================================================================== Links ========================================================================== */ - /* * Addresses `outline` inconsistency between Chrome and other browsers. */ - a:focus { - outline: thin dotted; -} + outline: thin dotted; } +a:active, a:hover { + outline: 0; } /* * Improves readability when focused and also mouse hovered in all browsers. * people.opera.com/patrickl/experiments/keyboard/test */ - -a:active, -a:hover { - outline: 0; -} - /* ========================================================================== Typography ========================================================================== */ - /* * Addresses font sizes and margins set differently in IE6/7. * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. */ - h1 { - font-size: 2em; - margin: 0.67em 0; -} + font-size: 32px; + font-size: 2rem; + line-height: 38.4px; + line-height: 2.4rem; + margin: 19.2px 0; + margin: 1.2rem 0; } h2 { - font-size: 1.5em; - margin: 0.83em 0; -} + font-size: 24px; + font-size: 1.5rem; + line-height: 38.4px; + line-height: 2.4rem; + margin: 19.2px 0; + margin: 1.2rem 0; } h3 { - font-size: 1.17em; - margin: 1em 0; -} + font-size: 18.667px; + font-size: 1.167rem; + line-height: 38.4px; + line-height: 2.4rem; + margin: 19.2px 0; + margin: 1.2rem 0; } h4 { - font-size: 1em; - margin: 1.33em 0; -} + font-size: 16px; + font-size: 1rem; + line-height: 38.4px; + line-height: 2.4rem; + margin: 19.2px 0; + margin: 1.2rem 0; } h5 { - font-size: 0.83em; - margin: 1.67em 0; -} + font-size: 13.333px; + font-size: 0.833rem; + line-height: 38.4px; + line-height: 2.4rem; + margin: 19.2px 0; + margin: 1.2rem 0; } h6 { - font-size: 0.75em; - margin: 2.33em 0; -} + font-size: 12px; + font-size: 0.75rem; + line-height: 38.4px; + line-height: 2.4rem; + margin: 19.2px 0; + margin: 1.2rem 0; } /* * Addresses styling not present in IE7/8/9, S5, Chrome. */ - abbr[title] { - border-bottom: 1px dotted; -} + border-bottom: 1px dotted; } /* * Addresses style set to `bolder` in FF3+, S4/5, Chrome. */ - -b, -strong { - font-weight: bold; -} +b, strong { + font-weight: bold; } blockquote { - margin: 1em 40px; -} + margin: 19.2px 0; + margin: 1.2rem 0; + padding-left: 9.6px; + padding-left: 0.6rem; + border-left: 9.6px solid #333333; + border-left: 0.6rem solid #333333; } /* * Addresses styling not present in S5, Chrome. */ - dfn { - font-style: italic; -} + font-style: italic; } /* * Addresses styling not present in IE6/7/8/9. */ - mark { - background: #ff0; - color: #000; -} + background: #ff0; + color: #000; } /* * Addresses margins set differently in IE6/7. */ - -p, -pre { - margin: 1em 0; -} +p, pre { + margin: 19.2px 0; + margin: 1.2rem 0; } /* * Corrects font family set oddly in IE6, S4/5, Chrome. * en.wikipedia.org/wiki/User:Davidgothberg/Test59 */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} +code, kbd, pre, samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + margin: 19.2px 0; + margin: 1.2rem 0; } /* * Improves readability of pre-formatted text in all browsers. */ - pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } /* * Addresses CSS quotes not supported in IE6/7. */ - q { - quotes: none; -} + quotes: none; } + q:before, q:after { + content: ''; + content: none; } /* * Addresses `quotes` property not supported in S4. */ - -q:before, -q:after { - content: ''; - content: none; -} - small { - font-size: 75%; -} + font-size: 75%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. * gist.github.com/413930 */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} +sub { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; -} + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + top: -0.5em; } sub { - bottom: -0.25em; -} + bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ - /* * Addresses margins set differently in IE6/7. */ - -dl, -menu, -ol, -ul { - margin: 1em 0; -} +dl, menu, ol, ul { + margin: 19.2px 0; + margin: 1.2rem 0; } dd { - margin: 0 0 0 40px; -} + margin: 0 0 0 19.2px; + margin: 0 0 0 1.2rem; } /* * Addresses paddings set differently in IE6/7. */ +menu, ol, ul { + list-style-position: outside; + padding: 0 0 0 19.2px; + padding: 0 0 0 1.2rem; } + +ol { + list-style-type: decimal; } + ol ol { + list-style-type: upper-alpha; } + ol ol ol { + list-style-type: lower-alpha; } -menu, -ol, ul { - padding: 0 0 0 40px; -} + list-style-type: disc; } + ul ul { + list-style-type: square; } + ul ul ul { + list-style-type: circle; } + +li { + margin: 19.2px 0; + margin: 1.2rem 0; } /* * Corrects list images handled incorrectly in IE7. */ - -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} +nav ul, nav ol { + list-style: none; + list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ - /* * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. * 2. Improves image quality when scaled in IE7. * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ - img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ -} + border: 0; + /* 1 */ + -ms-interpolation-mode: bicubic; + /* 2 */ } /* * Corrects overflow displayed oddly in IE9. */ - svg:not(:root) { - overflow: hidden; -} + overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ - /* * Addresses margin not present in IE6/7/8/9, S5, O11. */ - -figure { - margin: 0; -} +figure, form { + margin: 0; } /* ========================================================================== Forms ========================================================================== */ - /* * Corrects margin displayed oddly in IE6/7. */ - -form { - margin: 0; -} - /* * Define consistent border, margin, and padding. */ - fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /* * 1. Corrects color not being inherited in IE6/7/8/9. * 2. Corrects text not wrapping in FF3. * 3. Corrects alignment displayed oddly in IE6/7. */ - legend { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ -} + border: 0; + /* 1 */ + padding: 0; + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ } /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. * 3. Improves appearance and consistency in all browsers. */ - -button, -input, -select, -textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ -} +button, input, select, textarea { + font-size: 100%; + /* 1 */ + margin: 0; + /* 2 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ } /* * Addresses FF3/4 setting `line-height` on `input` using `!important` in the * UA stylesheet. */ - -button, -input { - line-height: normal; -} +button, input { + line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` @@ -410,24 +363,48 @@ input { * 4. Removes inner spacing in IE7 without affecting normal text inputs. * Known issue: inner spacing remains in IE6. */ +button, html input[type="button"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ + *overflow: visible; + /* 4 */ } -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - *overflow: visible; /* 4 */ -} +input[type="reset"], input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ + *overflow: visible; + /* 4 */ } /* * Re-set default cursor for disabled elements. */ +button[disabled] { + cursor: default; } -button[disabled], input[disabled] { - cursor: default; -} + cursor: default; } +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ } +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; } + input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } /* * 1. Addresses box sizing set to content-box in IE8/9. @@ -435,66 +412,37 @@ input[disabled] { * 3. Removes excess padding in IE7. * Known issue: excess padding remains in IE6. */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ -} - /* * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. * 2. Addresses `box-sizing` set to `border-box` in S5, 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; -} - /* * Removes inner padding and search cancel button in S5, Chrome on OS X. */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - /* * Removes inner padding and border in FF3+. */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; } /* * 1. Removes default vertical scrollbar in IE6/7/8/9. * 2. Improves readability and alignment in all browsers. */ - textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ } /* ========================================================================== Tables ========================================================================== */ - /* * Remove most spacing between table cells. */ - table { - border-collapse: collapse; - border-spacing: 0; -} + border-collapse: collapse; + border-spacing: 0; } From b820f9fcccb1cf5e93682a3d0ead5f6caa82cd85 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Wed, 18 Jul 2012 14:40:39 -0700 Subject: [PATCH 06/77] make h1 have more bottom margin --- _normalize.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 8a6588541..1fe84d170 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -109,7 +109,7 @@ a { h1 { @include rem( font-size, 2rem ); @include rem( line-height, 2.4rem ); - @include rem( margin, 1.2rem 0 ); + @include rem( margin, 1.2rem 0 2.4rem ); } h2 { From 541703abbcee03ee247e79efc83e88db078089b5 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 19 Jul 2012 20:29:48 -0700 Subject: [PATCH 07/77] label gets a pointer too --- _normalize.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 1fe84d170..793392232 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -403,11 +403,18 @@ button, input { * 4. Removes inner spacing in IE7 without affecting normal text inputs. * Known issue: inner spacing remains in IE6. */ +.pointy { + cursor: pointer; +} + +label { + @extend .pointy; +} button, html input[type="button"] { -webkit-appearance: button; /* 2 */ - cursor: pointer; + @extend .pointy; /* 3 */ *overflow: visible; /* 4 */ } @@ -416,7 +423,7 @@ input { &[type="reset"], &[type="submit"] { -webkit-appearance: button; /* 2 */ - cursor: pointer; + @extend .pointy; /* 3 */ *overflow: visible; /* 4 */ } } From 2282abdba22ef306972e6ffe69875aa528b61d7f Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 24 Jul 2012 22:26:03 -0700 Subject: [PATCH 08/77] add icon marker for pdf links --- _normalize.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 793392232..0b80d4038 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -88,9 +88,18 @@ body { a { &:focus { - outline: thin dotted; } + outline: thin dotted; + } &:active, &:hover { - outline: 0; } } + outline: 0; + } + &[href$=pdf] { + @include rem( padding-right, 1.2rem ); + background-image: url(/lib_style/img/icon_pdf.png); + background-position: 100% 0%; + background-repeat: no-repeat; + } +} /* * Improves readability when focused and also mouse hovered in all browsers. From 20c743f50df359ae6a3a500af98eb6e996b27b6a Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Wed, 25 Jul 2012 13:08:48 -0700 Subject: [PATCH 09/77] most input elements are monospaced --- _normalize.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 0b80d4038..9c492b725 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -68,9 +68,13 @@ html { * elements. */ -button, input, select, textarea { +button, input[type=submit], select { font-family: sans-serif; } +input, textarea { + font-family: monospace; +} + /* * Addresses margins handled incorrectly in IE6/7. */ From 51196f320949527730879ef30d4b14792399bbad Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Wed, 25 Jul 2012 13:13:12 -0700 Subject: [PATCH 10/77] sync with changes in _normalize.scss --- normalize.css | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/normalize.css b/normalize.css index 3a52ed2a3..e41c68738 100644 --- a/normalize.css +++ b/normalize.css @@ -56,9 +56,12 @@ html { * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ -button, input, select, textarea { +button, input[type=submit], select { font-family: sans-serif; } +input, textarea { + font-family: monospace; } + /* * Addresses margins handled incorrectly in IE6/7. */ @@ -75,6 +78,12 @@ a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } +a[href$=pdf] { + padding-right: 19.2px; + padding-right: 1.2rem; + background-image: url(/lib_style/img/icon_pdf.png); + background-position: 100% 0%; + background-repeat: no-repeat; } /* * Improves readability when focused and also mouse hovered in all browsers. @@ -92,8 +101,8 @@ h1 { font-size: 2rem; line-height: 38.4px; line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + margin: 19.2px 0 38.4px; + margin: 1.2rem 0 2.4rem; } h2 { font-size: 24px; @@ -363,10 +372,12 @@ button, input { * 4. Removes inner spacing in IE7 without affecting normal text inputs. * Known issue: inner spacing remains in IE6. */ +.pointy, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { + cursor: pointer; } + button, html input[type="button"] { -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } @@ -374,7 +385,6 @@ button, html input[type="button"] { input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } From d68eb13b9826934e53428df0eba6d38042ae4eaf Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Wed, 25 Jul 2012 14:14:35 -0700 Subject: [PATCH 11/77] Revert "sync with changes in _normalize.scss" This reverts commit 51196f320949527730879ef30d4b14792399bbad. --- normalize.css | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/normalize.css b/normalize.css index e41c68738..3a52ed2a3 100644 --- a/normalize.css +++ b/normalize.css @@ -56,12 +56,9 @@ html { * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ -button, input[type=submit], select { +button, input, select, textarea { font-family: sans-serif; } -input, textarea { - font-family: monospace; } - /* * Addresses margins handled incorrectly in IE6/7. */ @@ -78,12 +75,6 @@ a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } -a[href$=pdf] { - padding-right: 19.2px; - padding-right: 1.2rem; - background-image: url(/lib_style/img/icon_pdf.png); - background-position: 100% 0%; - background-repeat: no-repeat; } /* * Improves readability when focused and also mouse hovered in all browsers. @@ -101,8 +92,8 @@ h1 { font-size: 2rem; line-height: 38.4px; line-height: 2.4rem; - margin: 19.2px 0 38.4px; - margin: 1.2rem 0 2.4rem; } + margin: 19.2px 0; + margin: 1.2rem 0; } h2 { font-size: 24px; @@ -372,12 +363,10 @@ button, input { * 4. Removes inner spacing in IE7 without affecting normal text inputs. * Known issue: inner spacing remains in IE6. */ -.pointy, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; } - button, html input[type="button"] { -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } @@ -385,6 +374,7 @@ button, html input[type="button"] { input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } From 58363edc6cfdea3f33a6aaef7e59736d65dadd2d Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Mon, 30 Jul 2012 13:00:01 -0700 Subject: [PATCH 12/77] pdf links get some graphics; nav li has no margin --- _normalize.scss | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 9c492b725..308ee0017 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -98,10 +98,21 @@ a { outline: 0; } &[href$=pdf] { - @include rem( padding-right, 1.2rem ); - background-image: url(/lib_style/img/icon_pdf.png); - background-position: 100% 0%; - background-repeat: no-repeat; + position: relative; + @include rem( padding-right, 1.063rem ); + &:after { + position: absolute; + content: ""; + display: inline-block; + @include rem( height, 1.063rem ); + @include rem( width, 1.063rem ); + padding: 0; + margin: 0; + background-image: url(/lib_style/img/icon_pdf.png); + background-position: 0 0; + background-repeat: no-repeat; + background-size: 100%; + } } } @@ -305,6 +316,11 @@ li { @include rem( margin, 1.2rem 0 ); } +nav { + li { + margin: 0; + } +} /* * Corrects list images handled incorrectly in IE7. From 5c9d5e92e0fe85d28821980f345de0b6d9c8597c Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Mon, 30 Jul 2012 13:02:59 -0700 Subject: [PATCH 13/77] nav li has no list-style either --- _normalize.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_normalize.scss b/_normalize.scss index 308ee0017..5f40ee105 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -318,6 +318,7 @@ li { nav { li { + list-style: none; margin: 0; } } From f2cfb11c9d010926562e4981aeff86853a635ee0 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 31 Jul 2012 23:34:50 -0700 Subject: [PATCH 14/77] may as well import _sizing here just so everything is self-contained --- _sizing.scss | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 _sizing.scss diff --git a/_sizing.scss b/_sizing.scss new file mode 100644 index 000000000..fd22ad0de --- /dev/null +++ b/_sizing.scss @@ -0,0 +1,121 @@ +// Rem Font Sizing ---------------------------------------------------- +// https://github.com/ry5n/rem + +// Base font size in pixels, if not already defined. +// Should be the same as the font-size of the html element. +$base-font-size: 16px !default; +$rem-with-px-fallback: true !default; + +// @private Number of pixels in 1rem. +// For px -> rem, divide by this ratio; for the other way, multiply. +$px-per-rem: $base-font-size / 1rem; + +// Return pixel values as rem +@function px-to-rem($px-value) { + @return $px-value / $px-per-rem; +} + +// Return rem values as px +@function rem-to-px($rem-value) { + @return $rem-value * $px-per-rem; +} + +// For the given property, use rem units with px as a fallback value for older +// browsers. +// +// $property - The css property name. +// $values - The value (or space-separated list of values) for the property. +// $use-px-fallback - Boolean, default: true; whether to use pixel fallback values +// +@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { + // Create a couple of empty lists as output buffers. + $px-values: (); + $rem-values: (); + + // Ensure $values is a list. + @if type-of($values) != "list" { + $values: join((), $values); + } + + // Loop through the $values list + @each $value in $values { + // For each property value, if it's in rem or px, derive both rem and + // px values for it and add those to the end of the appropriate buffer. + @if(type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem)) { + @if unit($value) == px { + $px-values: join($px-values, $value); + $rem-values: join($rem-values, px-to-rem($value)); + } + @else { + $px-values: join($px-values, rem-to-px($value)); + $rem-values: join($rem-values, $value); + } + } + @else { + $px-values: join($px-values, $value); + $rem-values: join($rem-values, $value); + } + } + + // Use pixel fallback for browsers that don't understand rem units. + @if $use-px-fallback { + #{$property}: $px-values; + } + + // Use rem values for everyone else (overrides pixel values). + #{$property}: $rem-values; +} + +// Em Font Sizing ----------------------------------------------------- + +@function em($target, $context: $baseline-px) { + @if $target == 0 { @return 0 } + @return $target / $context + 0em; +} + +// Scaling ------------------------------------------------------------ + +// https://gist.github.com/2237465 +// See http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/ + +// Default font size in pixels if not overridden. +$baseFontSize: 16px; + +//Convert PX units to EMs. +//Ex: margin-right: pem(16); + +@function pem($pxval, $base: $baseFontSize) { + @return #{$pxval / $base}em; +} + +// Used to convert PX to EMs for multiple properties or values or both. +//$base is an optional measurement that allows making measurements relative to the parent font size rather than the current. Also accepts a list of lists (instead a list of values) for properties that accept multiple lists of values. Only numbers of converted; everything else is passed through. + +//Examples: + +//@include scale(line-height, 30) +//@include scale(line-height, 30, 16) +//@include scale(width height, 125); +//@include scale(padding, 0 25, 16); +//@include scale(text-shadow, (#0d6e28 1 1) (#777 0 0 2), 16); +//@include scale(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966), 16); +// +@mixin scale($props, $sizes, $base: $baseFontSize) { + $values: (); + $sublists: false; + @each $s in $sizes { + /* unwrap lists for values that have multiple list of values such as text-shadow */ + @if type-of($s) == list { + $sublists: true; + $vv: (); + @each $ss in $s { + $vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss)); + } + $values: append($values, join((), $vv)); + } @else { + $values: append($values, if(type-of($s) == number, #{$s / $base}em, $s)); + } + } + $value: join((), $values, if($sublists, comma, space)); + @each $prop in $props { #{$prop}: $value } +} From d9826863102be0d8dd728fc64756e255865836c2 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 31 Jul 2012 23:35:51 -0700 Subject: [PATCH 15/77] sync with changes in _normalize --- normalize.css | 36 +++++++++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/normalize.css b/normalize.css index 3a52ed2a3..32e14a2e2 100644 --- a/normalize.css +++ b/normalize.css @@ -56,9 +56,12 @@ html { * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ -button, input, select, textarea { +button, input[type=submit], select { font-family: sans-serif; } +input, textarea { + font-family: monospace; } + /* * Addresses margins handled incorrectly in IE6/7. */ @@ -75,6 +78,24 @@ a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } +a[href$=pdf] { + position: relative; + padding-right: 17.008px; + padding-right: 1.063rem; } + a[href$=pdf]:after { + position: absolute; + content: ""; + display: inline-block; + height: 17.008px; + height: 1.063rem; + width: 17.008px; + width: 1.063rem; + padding: 0; + margin: 0; + background-image: url(/lib_style/img/icon_pdf.png); + background-position: 0 0; + background-repeat: no-repeat; + background-size: 100%; } /* * Improves readability when focused and also mouse hovered in all browsers. @@ -92,8 +113,8 @@ h1 { font-size: 2rem; line-height: 38.4px; line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + margin: 19.2px 0 38.4px; + margin: 1.2rem 0 2.4rem; } h2 { font-size: 24px; @@ -268,6 +289,10 @@ li { margin: 19.2px 0; margin: 1.2rem 0; } +nav li { + list-style: none; + margin: 0; } + /* * Corrects list images handled incorrectly in IE7. */ @@ -363,10 +388,12 @@ button, input { * 4. Removes inner spacing in IE7 without affecting normal text inputs. * Known issue: inner spacing remains in IE6. */ +.pointy, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { + cursor: pointer; } + button, html input[type="button"] { -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } @@ -374,7 +401,6 @@ button, html input[type="button"] { input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } From 6ca036b7d546b7ed2ca2d15be3c03bd63cbff55d Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 31 Jul 2012 23:37:50 -0700 Subject: [PATCH 16/77] different location for _sizing.scss --- _normalize.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 5f40ee105..11a6e96bb 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -3,7 +3,7 @@ /* ============================================================================= Mixins ========================================================================== */ -@import "../sizing"; +@import "sizing"; $text-color: #333 !default; /* ========================================================================== From 4fdfa24bd1719f13b7711edc7b7573ffb5817ca1 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 2 Aug 2012 12:13:03 -0700 Subject: [PATCH 17/77] format cleanup, rely less on external resources declobber many of the comments and matching notes that sass-convert jumbled around; conver the pdf icon to a data URI --- _normalize.scss | 185 ++++++++++++++++++++---------------------------- 1 file changed, 77 insertions(+), 108 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 11a6e96bb..7e53c6d9e 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -13,14 +13,12 @@ $text-color: #333 !default; /* * Corrects `block` display not defined in IE6/7/8/9 & FF3. */ - article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. */ - audio, canvas, video { display: inline-block; *display: inline; @@ -30,7 +28,6 @@ audio, canvas, video { * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS5 devices. */ - audio:not([controls]) { display: none; height: 0; } @@ -39,7 +36,6 @@ audio:not([controls]) { * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. * Known issue: no IE6 support. */ - [hidden] { display: none; } @@ -53,21 +49,17 @@ audio:not([controls]) { * 2. Prevents 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 */ - font-family: sans-serif; } + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; +} /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ - button, input[type=submit], select { font-family: sans-serif; } @@ -78,9 +70,9 @@ input, textarea { /* * Addresses margins handled incorrectly in IE6/7. */ - body { - margin: 0; } + margin: 0; +} /* ========================================================================== Links @@ -89,7 +81,6 @@ body { /* * Addresses `outline` inconsistency between Chrome and other browsers. */ - a { &:focus { outline: thin dotted; @@ -108,7 +99,7 @@ a { @include rem( width, 1.063rem ); padding: 0; margin: 0; - background-image: url(/lib_style/img/icon_pdf.png); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGxQTFRF////8PDwwMDAe3x8paWmhQ8UnYOE7Rwk6ExSsRUbzxgfWAoNdg4SOwcJ3N3ebm5v8lVb4URL2z5E6ygv6UBG5XB15HyB4Kyv5mRp4pSY3dDS37i73sTG51he44iMb2Jjp42PU0ZHcj5ANzc32/NifwAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAAe0lEQVQY043OyxqCIBCA0XFEnS6OmkSAlrf3f0cJLaFV/4KPOYsBAEjwCHyYir00y91cHJE4nfMklsu1xEiYuUKo6+ZGrlbSfRO3Wbgbq8f7DEX/I+ZHLJGNRZmO+lDss1NaFlJ/xGr/eP+iYRPjPxdsHiVxLNNcfVtwBdPrC9ktDOFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA3LTE5VDIyOjI0OjEyLTA3OjAwhMR61wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wMS0yMVQwMDoyNDoyNS0wODowMNq1VW4AAAAASUVORK5CYII=); background-position: 0 0; background-repeat: no-repeat; background-size: 100%; @@ -345,84 +336,71 @@ nav { */ img { - border: 0; - /* 1 */ - -ms-interpolation-mode: bicubic; - /* 2 */ } + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} /* * Corrects overflow displayed oddly in IE9. */ svg:not(:root) { - overflow: hidden; } + overflow: hidden; +} /* ========================================================================== - Figures + Figures & Forms ========================================================================== */ /* * Addresses margin not present in IE6/7/8/9, S5, O11. + * + Corrects margin displayed oddly in IE6/7. */ figure, form { - margin: 0; } - -/* ========================================================================== - Forms - ========================================================================== */ - -/* - * Corrects margin displayed oddly in IE6/7. - */ + margin: 0; +} /* * Define consistent border, margin, and padding. */ - fieldset { border: 1px solid #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } + padding: 0.35em 0.625em 0.75em; +} /* * 1. Corrects color not being inherited in IE6/7/8/9. * 2. Corrects text not wrapping in FF3. * 3. Corrects alignment displayed oddly in IE6/7. */ - legend { - border: 0; - /* 1 */ + border: 0; /* 1 */ padding: 0; - white-space: normal; - /* 2 */ - *margin-left: -7px; - /* 3 */ } + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. * 3. Improves appearance and consistency in all browsers. */ - button, input, select, textarea { - font-size: 100%; - /* 1 */ - margin: 0; - /* 2 */ - vertical-align: baseline; - /* 3 */ - *vertical-align: middle; - /* 3 */ } + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} /* * Addresses FF3/4 setting `line-height` on `input` using `!important` in the * UA stylesheet. */ - button, input { - line-height: normal; } + line-height: normal; +} /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` @@ -441,87 +419,78 @@ label { @extend .pointy; } -button, html input[type="button"] { - -webkit-appearance: button; - /* 2 */ - @extend .pointy; - /* 3 */ - *overflow: visible; - /* 4 */ } +button, html input[type="button"] /* 1 */ { + -webkit-appearance: button; /* 2 */ + @extend .pointy; /* 3 */ + *overflow: visible; /* 4 */ +} input { &[type="reset"], &[type="submit"] { - -webkit-appearance: button; - /* 2 */ - @extend .pointy; - /* 3 */ - *overflow: visible; - /* 4 */ } } + -webkit-appearance: button; /* 2 */ + @extend .pointy; /* 3 */ + *overflow: visible; /* 4 */ + } +} /* - * Re-set default cursor for disabled elements. + * A. Re-set default cursor for disabled elements. */ - button[disabled] { - cursor: default; } + cursor: default; /* A. */ +} input { &[disabled] { - cursor: default; } + cursor: default; /* A. */ + } + /* + * 1. Addresses box sizing set to content-box in IE8/9. + * 2. Removes excess padding in IE8/9. + * 3. Removes excess padding in IE7. + * Known issue: excess padding remains in IE6. + */ &[type="checkbox"], &[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ - *height: 13px; - /* 3 */ - *width: 13px; - /* 3 */ } + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ + } + /* + * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` + * to future-proof). + */ &[type="search"] { - -webkit-appearance: textfield; - /* 1 */ + -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - /* 2 */ + -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; + /* + * Removes inner padding and search cancel button in S5, Chrome on OS X. + */ &::-webkit-search-cancel-button, &::-webkit-search-decoration { - -webkit-appearance: none; } } } - -/* - * 1. Addresses box sizing set to content-box in IE8/9. - * 2. Removes excess padding in IE8/9. - * 3. Removes excess padding in IE7. - * Known issue: excess padding remains in IE6. - */ - -/* - * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. - * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` - * to future-proof). - */ - -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X. - */ + -webkit-appearance: none; + } + } +} /* * Removes inner padding and border in FF3+. */ - button::-moz-focus-inner, input::-moz-focus-inner { border: 0; - padding: 0; } + padding: 0; +} /* * 1. Removes default vertical scrollbar in IE6/7/8/9. * 2. Improves readability and alignment in all browsers. */ - textarea { - overflow: auto; - /* 1 */ - vertical-align: top; - /* 2 */ } + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} /* ========================================================================== Tables @@ -530,7 +499,7 @@ textarea { /* * Remove most spacing between table cells. */ - table { border-collapse: collapse; - border-spacing: 0; } + border-spacing: 0; +} From 9e73076347125836b19bc6a0efe8cd7b221e375e Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 2 Aug 2012 12:14:26 -0700 Subject: [PATCH 18/77] start changing this to better reflect my fork --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 6a24ef447..45c54e4b5 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,11 @@ -normalize.css -============= +\_normalize.scss +=============== -Normalize.css is a customisable CSS file that makes browsers render all -elements more consistently and in line with modern standards. We researched the -differences between default browser styles in order to precisely target only -the styles that need normalizing. +\_Normalize.scss is a customisable SASS file that makes browsers render all +elements more consistently and in line with modern standards--derived from +Necolas' Normalize.css project. It is the result of researching the differences +between default browser styles in order to precisely target only the styles +that need normalizing. [Check out the demo](http://necolas.github.com/normalize.css/demo.html) @@ -20,7 +21,7 @@ What does it do? How to use it ----------- -Normalize.css is intended to be used as an alternative to CSS resets. +`\_normalize.scss` is intended to be used as an alternative to CSS resets. It's suggested that you read the `normalize.css` file and consider customising it to meet your needs. Alternatively, include the file in your project and @@ -38,8 +39,7 @@ Browser support Contribute ----------- -Please read my [issue -guidelines](https://github.com/necolas/issue-guidelines). +Please read my [issue guidelines](https://github.com/necolas/issue-guidelines). License ----------- From 268f52c017c9e6ac9c35817ab8054138c2b51bcc Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 2 Aug 2012 12:15:04 -0700 Subject: [PATCH 19/77] sync with changes in _normalize.scss --- normalize.css | 88 +++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 45 deletions(-) diff --git a/normalize.css b/normalize.css index 32e14a2e2..c946af2db 100644 --- a/normalize.css +++ b/normalize.css @@ -92,7 +92,7 @@ a[href$=pdf] { width: 1.063rem; padding: 0; margin: 0; - background-image: url(/lib_style/img/icon_pdf.png); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGxQTFRF////8PDwwMDAe3x8paWmhQ8UnYOE7Rwk6ExSsRUbzxgfWAoNdg4SOwcJ3N3ebm5v8lVb4URL2z5E6ygv6UBG5XB15HyB4Kyv5mRp4pSY3dDS37i73sTG51he44iMb2Jjp42PU0ZHcj5ANzc32/NifwAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAAe0lEQVQY043OyxqCIBCA0XFEnS6OmkSAlrf3f0cJLaFV/4KPOYsBAEjwCHyYir00y91cHJE4nfMklsu1xEiYuUKo6+ZGrlbSfRO3Wbgbq8f7DEX/I+ZHLJGNRZmO+lDss1NaFlJ/xGr/eP+iYRPjPxdsHiVxLNNcfVtwBdPrC9ktDOFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA3LTE5VDIyOjI0OjEyLTA3OjAwhMR61wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wMS0yMVQwMDoyNDoyNS0wODowMNq1VW4AAAAASUVORK5CYII=); background-position: 0 0; background-repeat: no-repeat; background-size: 100%; } @@ -321,20 +321,15 @@ svg:not(:root) { overflow: hidden; } /* ========================================================================== - Figures + Figures & Forms ========================================================================== */ /* * Addresses margin not present in IE6/7/8/9, S5, O11. + * + Corrects margin displayed oddly in IE6/7. */ figure, form { margin: 0; } -/* ========================================================================== - Forms - ========================================================================== */ -/* - * Corrects margin displayed oddly in IE6/7. - */ /* * Define consistent border, margin, and padding. */ @@ -406,46 +401,49 @@ input[type="reset"], input[type="submit"] { /* 4 */ } /* - * Re-set default cursor for disabled elements. + * A. Re-set default cursor for disabled elements. */ button[disabled] { - cursor: default; } - -input[disabled] { - cursor: default; } -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ - *height: 13px; - /* 3 */ - *width: 13px; - /* 3 */ } -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - /* 2 */ - box-sizing: content-box; } - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + cursor: default; + /* A. */ } + +input { + /* + * 1. Addresses box sizing set to content-box in IE8/9. + * 2. Removes excess padding in IE8/9. + * 3. Removes excess padding in IE7. + * Known issue: excess padding remains in IE6. + */ + /* + * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` + * to future-proof). + */ } + input[disabled] { + cursor: default; + /* A. */ } + input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ } + input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* 2 */ + box-sizing: content-box; + /* + * Removes inner padding and search cancel button in S5, Chrome on OS X. + */ } + input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } -/* - * 1. Addresses box sizing set to content-box in IE8/9. - * 2. Removes excess padding in IE8/9. - * 3. Removes excess padding in IE7. - * Known issue: excess padding remains in IE6. - */ -/* - * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. - * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` - * to future-proof). - */ -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X. - */ /* * Removes inner padding and border in FF3+. */ From 8c3469a199c85f83d06123e34feb4622a18dee34 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 10 Aug 2012 19:48:32 -0700 Subject: [PATCH 20/77] take more advantage of the defaults I require all the projects that this will be used in will have custom fonts, and a * { font-weight:400; font-style:normal; } rule, and I will need to remember to define and along with all the other elements that I define; $text-color will be defined in scss files that reference this, will make better use of other default variables as time goes on --- _normalize.scss | 40 ++++++++++++++++++---------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 7e53c6d9e..c8b1878b6 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -54,6 +54,7 @@ html { -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ font-family: sans-serif; + color: $text-color; } /* @@ -164,33 +165,21 @@ h6 { abbr[title] { border-bottom: 1px dotted; } -/* - * Addresses style set to `bolder` in FF3+, S4/5, Chrome. - */ - -b, strong { - font-weight: bold; } - blockquote { @include rem( margin, 1.2rem 0 ); - @include rem( padding-left, .6rem); + @include rem( padding, 0 0 0 .6rem); + border: 0; @include rem( border-left, .6rem solid $text-color ); } -/* - * Addresses styling not present in S5, Chrome. - */ - -dfn { - font-style: italic; } - /* * Addresses styling not present in IE6/7/8/9. */ mark { background: #ff0; - color: #000; } + color: #000; +} /* * Addresses margins set differently in IE6/7. @@ -218,7 +207,8 @@ code, kbd, pre, samp { pre { white-space: pre; white-space: pre-wrap; - word-wrap: break-word; } + word-wrap: break-word; +} /* * Addresses CSS quotes not supported in IE6/7. @@ -228,14 +218,17 @@ q { quotes: none; &:before, &:after { content: ''; - content: none; } } + content: none; + } +} /* * Addresses `quotes` property not supported in S4. */ small { - font-size: 75%; } + font-size: 75%; +} /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. @@ -246,17 +239,20 @@ sub { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; } + vertical-align: baseline; +} sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; - top: -0.5em; } + top: -0.5em; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} /* ========================================================================== Lists From 90eb74855050ea0a39db06bc1ac5bf8b1cc53dfd Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 10 Aug 2012 19:51:32 -0700 Subject: [PATCH 21/77] sync with changes in _normalize.css --- normalize.css | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/normalize.css b/normalize.css index c946af2db..d513264d8 100644 --- a/normalize.css +++ b/normalize.css @@ -50,7 +50,8 @@ html { /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ - font-family: sans-serif; } + font-family: sans-serif; + color: #333333; } /* * Addresses `font-family` inconsistency between `textarea` and other form @@ -162,26 +163,15 @@ h6 { abbr[title] { border-bottom: 1px dotted; } -/* - * Addresses style set to `bolder` in FF3+, S4/5, Chrome. - */ -b, strong { - font-weight: bold; } - blockquote { margin: 19.2px 0; margin: 1.2rem 0; - padding-left: 9.6px; - padding-left: 0.6rem; + padding: 0 0 0 9.6px; + padding: 0 0 0 0.6rem; + border: 0; border-left: 9.6px solid #333333; border-left: 0.6rem solid #333333; } -/* - * Addresses styling not present in S5, Chrome. - */ -dfn { - font-style: italic; } - /* * Addresses styling not present in IE6/7/8/9. */ From 97cb03f38e41e0e0d5b69f05a860c3441710560c Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 14 Aug 2012 17:46:31 -0700 Subject: [PATCH 22/77] document this project's relation to upstream The pre-1.0.0 release was under the Public Domain, now the project's under the MIT License, a change I favor. I documented the intended use and relationship between this project and the upstream project. --- README.md | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 309440f59..8b663d978 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ -# \_normalize.scss v1.0.0 +# `\_normalize.scss` v1.0.0 `\_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from -Necolas' Normalize.css project. It is the result of researching the differences -between default browser styles in order to precisely target only the styles -that need normalizing. +Nicholas Gallagher's Normalize.css project. It is the result of researching the +differences between default browser styles in order to precisely target only +the styles that need normalizing. -[Check out the demo](http://necolas.github.com/normalize.css/1.0.0/test.html) +[Check out the demo](http://darcmattr.github.com/normalize.css/1.0.0/test.html) ## What does it do? @@ -18,7 +18,16 @@ that need normalizing. ## How to use it -`\_normalize.scss` is intended to be used as an alternative to CSS resets. +I intend `\_normalize.scss` to be used as a declaration of many default styles +that I use in Ayn Rand Institute web projects, and for working around many +browser quirks. It has been adapted for use as an `@import` into a site's +stylesheet, and compiled in using [Compass](http://compass-style.org). A +standalone version is generated for sites where the entirety of the source +markup is out of my hands. + +### From Nicholas Gallagher (necolas): + +Normalize.css is intended to be used as an alternative to CSS resets. It's suggested that you read the `normalize.css` file and consider customising it to meet your needs. Alternatively, include the file in your project and @@ -34,9 +43,13 @@ override the defaults later in your CSS. ## Contribute -Please read my [issue guidelines](https://github.com/necolas/issue-guidelines). +Please contribute to the upstream project: Please read the [issue +guidelines](https://github.com/necolas/issue-guidelines). Issue reports to me +are welcome, but either address a matter of my personal taste or site +standards, or ultimately rely on the work of the upstream maintainers. Only one +of those is a "public" problem (hint, it's upstream). ## Acknowledgements -Normalize.css is a project by [Nicolas Gallagher](http://github.com/necolas) -and [Jonathan Neal](http://github.com/jonathantneal). +`_normalize.css` is derived from Normalize.css, which is a project by [Nicolas +Gallagher](http://github.com/necolas) and [Jonathan Neal](http://github.com/jonathantneal). From d1020bdb5d1d04d6212fa8d6e705a9ebdf03c062 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 17 Aug 2012 15:13:27 -0700 Subject: [PATCH 23/77] blockquote border is background color; +iframe set another default value in the file; iframes don't get borders --- _normalize.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 4b924affa..82bc1409e 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -5,6 +5,7 @@ ========================================================================== */ @import "sizing"; $text-color: #333 !default; +$background-color: #ccc !default; /* ========================================================================== HTML5 display definitions @@ -168,7 +169,7 @@ blockquote { @include rem( margin, 1.2rem 0 ); @include rem( padding, 0 0 0 .6rem); border: 0; - @include rem( border-left, .6rem solid $text-color ); + @include rem( border-left, .6rem solid $background-color ); } /* @@ -495,3 +496,7 @@ table { border-collapse: collapse; border-spacing: 0; } + +iframe { + border: 0; +} From 0e84b952d2ced98cd3441c1c632e5712efc55c81 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 17 Aug 2012 15:15:10 -0700 Subject: [PATCH 24/77] sync with _normalize changes --- normalize.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/normalize.css b/normalize.css index ebf55926a..add091231 100644 --- a/normalize.css +++ b/normalize.css @@ -168,8 +168,8 @@ blockquote { padding: 0 0 0 9.6px; padding: 0 0 0 0.6rem; border: 0; - border-left: 9.6px solid #333333; - border-left: 0.6rem solid #333333; } + border-left: 9.6px solid #cccccc; + border-left: 0.6rem solid #cccccc; } /* * Addresses styling not present in IE 6/7/8/9. @@ -456,3 +456,6 @@ textarea { table { border-collapse: collapse; border-spacing: 0; } + +iframe { + border: 0; } From ced1ca4210effa1f80530b650f55bf5e94c7c284 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 30 Aug 2012 15:32:15 -0700 Subject: [PATCH 25/77] tweak definition list items --- _normalize.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 82bc1409e..f1c1b0be4 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -264,8 +264,12 @@ dl, menu, ol, ul { @include rem( margin, 1.2rem 0 ); } +dt { + +} + dd { - @include rem( margin, 0 0 0 1.2rem ); + @include rem( margin, 0 0 1.2rem 1.2rem ); } /* @@ -274,6 +278,7 @@ dd { menu, ol, ul { list-style-position: outside; + @include rem( padding, 0 0 0 1.2rem ); } From ac7330ebf23955c7281bd34067b7d62c0b2fe449 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 30 Aug 2012 15:37:47 -0700 Subject: [PATCH 26/77] sync with changes to _normalize --- normalize.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/normalize.css b/normalize.css index add091231..d29356b3f 100644 --- a/normalize.css +++ b/normalize.css @@ -247,8 +247,8 @@ dl, menu, ol, ul { margin: 1.2rem 0; } dd { - margin: 0 0 0 19.2px; - margin: 0 0 0 1.2rem; } + margin: 0 0 19.2px 19.2px; + margin: 0 0 1.2rem 1.2rem; } /* * Addresses paddings set differently in IE 6/7. From 5c00a36f91860aa71b369dac8c77314d6a1e11ea Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 21 Sep 2012 14:24:02 -0700 Subject: [PATCH 27/77] remove attempt at escaping '_' And sync README.html with my changes in README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8b663d978..2ad515cce 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# `\_normalize.scss` v1.0.0 +# `_normalize.scss` v1.0.0 -`\_normalize.scss` is a customisable SASS file that makes browsers render all +`_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only @@ -18,7 +18,7 @@ the styles that need normalizing. ## How to use it -I intend `\_normalize.scss` to be used as a declaration of many default styles +I intend `_normalize.scss` to be used as a declaration of many default styles that I use in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's stylesheet, and compiled in using [Compass](http://compass-style.org). A From 57f3993146f3e084fbeb9e598339d46ecf667b58 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 21 Sep 2012 14:27:44 -0700 Subject: [PATCH 28/77] and really add this README.html --- README.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 README.html diff --git a/README.html b/README.html new file mode 100644 index 000000000..bf2848465 --- /dev/null +++ b/README.html @@ -0,0 +1,28 @@ +

        _normalize.scss v1.0.0

        +

        _normalize.scss is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing.

        +

        Check out the demo

        +

        What does it do?

        +
          +
        • Preserves useful defaults, unlike many CSS resets.
        • +
        • Normalizes styles for a wide range of elements.
        • +
        • Corrects bugs and common browser inconsistencies.
        • +
        • Improves usability with subtle improvements.
        • +
        • Explains what code does using detailed comments.
        • +
        +

        How to use it

        +

        I intend _normalize.scss to be used as a declaration of many default styles that I use in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an @import into a site's stylesheet, and compiled in using Compass. A standalone version is generated for sites where the entirety of the source markup is out of my hands.

        +

        From Nicholas Gallagher (necolas):

        +

        Normalize.css is intended to be used as an alternative to CSS resets.

        +

        It's suggested that you read the normalize.css file and consider customising it to meet your needs. Alternatively, include the file in your project and override the defaults later in your CSS.

        +

        Browser support

        +
          +
        • Google Chrome
        • +
        • Mozilla Firefox 3+
        • +
        • Apple Safari 4+
        • +
        • Opera 10+
        • +
        • Internet Explorer 6+
        • +
        +

        Contribute

        +

        Please contribute to the upstream project: Please read the issue guidelines. Issue reports to me are welcome, but either address a matter of my personal taste or site standards, or ultimately rely on the work of the upstream maintainers. Only one of those is a "public" problem (hint, it's upstream).

        +

        Acknowledgements

        +

        _normalize.css is derived from Normalize.css, which is a project by Nicolas Gallagher and Jonathan Neal.

        From becc0f765f765f9fe23a32cc051ef9296c61d38a Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 21 Sep 2012 14:32:15 -0700 Subject: [PATCH 29/77] reflect v1.0.1 in upstream --- README.html | 9 +++++---- README.md | 16 +++++++++++----- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/README.html b/README.html index bf2848465..5f7752f2a 100644 --- a/README.html +++ b/README.html @@ -1,4 +1,4 @@ -

        _normalize.scss v1.0.0

        +

        _normalize.scss v1.0.1

        _normalize.scss is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing.

        Check out the demo

        What does it do?

        @@ -15,12 +15,13 @@

        From Nicholas Gallagher (necolas):

        Normalize.css is intended to be used as an alternative to CSS resets.

        It's suggested that you read the normalize.css file and consider customising it to meet your needs. Alternatively, include the file in your project and override the defaults later in your CSS.

        Browser support

        +

        I am tracking the v1 series, because I want to keep some old browser support around, these old browsers include:

        • Google Chrome
        • -
        • Mozilla Firefox 3+
        • -
        • Apple Safari 4+
        • +
        • Mozilla Firefox 3+ (the Long-Term Support release of Firefox is based on v3)
        • +
        • Apple Safari 4+ (because some people haven't upgraded their iOS version)
        • Opera 10+
        • -
        • Internet Explorer 6+
        • +
        • Internet Explorer 6+ (better in here than in my main CSS files)

        Contribute

        Please contribute to the upstream project: Please read the issue guidelines. Issue reports to me are welcome, but either address a matter of my personal taste or site standards, or ultimately rely on the work of the upstream maintainers. Only one of those is a "public" problem (hint, it's upstream).

        diff --git a/README.md b/README.md index 2ad515cce..36e13b515 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# `_normalize.scss` v1.0.0 +# `_normalize.scss` v1.0.1 `_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from @@ -35,11 +35,14 @@ override the defaults later in your CSS. ## Browser support +I am tracking the v1 series, because I want to keep some old browser support +around, these old browsers include: + * Google Chrome -* Mozilla Firefox 3+ -* Apple Safari 4+ +* Mozilla Firefox 3+ (the Long-Term Support release of Firefox is based on v3) +* Apple Safari 4+ (because some people haven't upgraded their iOS version) * Opera 10+ -* Internet Explorer 6+ +* Internet Explorer 6+ (better in here than in my main CSS files) ## Contribute @@ -52,4 +55,7 @@ of those is a "public" problem (hint, it's upstream). ## Acknowledgements `_normalize.css` is derived from Normalize.css, which is a project by [Nicolas -Gallagher](http://github.com/necolas) and [Jonathan Neal](http://github.com/jonathantneal). +Gallagher][] and [Jonathan Neal][]. + +[Jonathan Neal]: http://github.com/jonathantneal +[Nicolas Gallagher]: http://github.com/necolas From a358f9aae8596c3ffa41ad683bda8c764a0885bb Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 21 Sep 2012 14:32:50 -0700 Subject: [PATCH 30/77] make a little bit bigger, like in upstream --- _normalize.scss | 2 +- normalize.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index f1c1b0be4..2beaf0ebd 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -226,7 +226,7 @@ q { */ small { - font-size: 75%; + font-size: 80%; } /* diff --git a/normalize.css b/normalize.css index d29356b3f..938f1052b 100644 --- a/normalize.css +++ b/normalize.css @@ -215,7 +215,7 @@ q { * Addresses `quotes` property not supported in Safari 4. */ small { - font-size: 75%; } + font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. From eb78e28f882c5b1ace1def553dd396146ca68e63 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 2 Oct 2012 13:28:00 -0700 Subject: [PATCH 31/77] change link to example file still scratching my head as to how to trigger the github-hosted version of this test.html file. --- README.html | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.html b/README.html index 5f7752f2a..2b57e5a88 100644 --- a/README.html +++ b/README.html @@ -1,6 +1,6 @@

        _normalize.scss v1.0.1

        _normalize.scss is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing.

        -

        Check out the demo

        +

        Check out the demo

        What does it do?

        • Preserves useful defaults, unlike many CSS resets.
        • diff --git a/README.md b/README.md index 36e13b515..178fba39a 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing. -[Check out the demo](http://darcmattr.github.com/normalize.css/1.0.0/test.html) +[Check out the demo](http://darcmattr.github.com/_normalize.scss/test.html) ## What does it do? From 85b41bd101dce6551fd19225959f08d396b09fc7 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Wed, 31 Oct 2012 15:01:12 -0700 Subject: [PATCH 32/77] tame legend in IE8+, and sync normalize.css --- _normalize.scss | 4 +++- normalize.css | 14 +++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 2beaf0ebd..aad62d1a9 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -378,12 +378,14 @@ legend { padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ + display:table; /* 4 */ } - /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, Chrome. * 3. Improves appearance and consistency in all browsers. + * 4. Enable line-wrapping in IE8+, from + * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ */ button, input, select, textarea { font-size: 100%; /* 1 */ diff --git a/normalize.css b/normalize.css index 938f1052b..d122b440d 100644 --- a/normalize.css +++ b/normalize.css @@ -125,8 +125,8 @@ h2 { margin: 1.2rem 0; } h3 { - font-size: 18.667px; - font-size: 1.167rem; + font-size: 18.66672px; + font-size: 1.16667rem; line-height: 38.4px; line-height: 2.4rem; margin: 19.2px 0; @@ -141,8 +141,8 @@ h4 { margin: 1.2rem 0; } h5 { - font-size: 13.333px; - font-size: 0.833rem; + font-size: 13.33328px; + font-size: 0.83333rem; line-height: 38.4px; line-height: 2.4rem; margin: 19.2px 0; @@ -336,12 +336,16 @@ legend { white-space: normal; /* 2 */ *margin-left: -7px; - /* 3 */ } + /* 3 */ + display: table; + /* 4 */ } /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, Chrome. * 3. Improves appearance and consistency in all browsers. + * 4. Enable line-wrapping in IE8+, from + * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ */ button, input, select, textarea { font-size: 100%; From ebe730284119c4c33c6def7609aa5c54936faa1b Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 1 Mar 2013 04:01:36 -0800 Subject: [PATCH 33/77] re-ratio elements work in a line-height of 1.8rem and bottom margin of 1.8rem, 2.4rem for both seemed too big; also pull in Compass, not using it just yet --- README.md | 24 ++++++++++++----------- _normalize.scss | 51 ++++++++++++++++++++++++++++++------------------- 2 files changed, 44 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 178fba39a..31ad0a3d8 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# `_normalize.scss` v1.0.1 +# `_normalize.scss` v1.1.0 `_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from -Nicholas Gallagher's Normalize.css project. It is the result of researching the +Nicholas Gallagher's `Normalize.css` project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing. @@ -21,13 +21,13 @@ the styles that need normalizing. I intend `_normalize.scss` to be used as a declaration of many default styles that I use in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's -stylesheet, and compiled in using [Compass](http://compass-style.org). A -standalone version is generated for sites where the entirety of the source -markup is out of my hands. +stylesheet, and compiled in using [Compass][]. A standalone version is +generated for sites where the entirety of the source markup is out of my hands. +The project also requires use of Compass, but is not making much use of it yet. ### From Nicholas Gallagher (necolas): -Normalize.css is intended to be used as an alternative to CSS resets. +`Normalize.css` is intended to be used as an alternative to CSS resets. It's suggested that you read the `normalize.css` file and consider customising it to meet your needs. Alternatively, include the file in your project and @@ -47,15 +47,17 @@ around, these old browsers include: ## Contribute Please contribute to the upstream project: Please read the [issue -guidelines](https://github.com/necolas/issue-guidelines). Issue reports to me -are welcome, but either address a matter of my personal taste or site -standards, or ultimately rely on the work of the upstream maintainers. Only one -of those is a "public" problem (hint, it's upstream). +guidelines][]. Issue reports to me are welcome, but either address a matter of +my personal taste or site standards, or ultimately rely on the work of the +upstream maintainers. Only one of those is a "public" problem (hint, it's +upstream). ## Acknowledgements -`_normalize.css` is derived from Normalize.css, which is a project by [Nicolas +`_normalize.css` is adapted from Normalize.css, which is a project by [Nicolas Gallagher][] and [Jonathan Neal][]. [Jonathan Neal]: http://github.com/jonathantneal [Nicolas Gallagher]: http://github.com/necolas +[issue guidelines]: https://github.com/necolas/issue-guidelines +[Compass]: http://compass-style.org diff --git a/_normalize.scss b/_normalize.scss index aad62d1a9..a8f14b148 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -4,6 +4,7 @@ Mixins ========================================================================== */ @import "sizing"; +@import "compass"; $text-color: #333 !default; $background-color: #ccc !default; @@ -101,7 +102,7 @@ a { @include rem( width, 1.063rem ); padding: 0; margin: 0; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGxQTFRF////8PDwwMDAe3x8paWmhQ8UnYOE7Rwk6ExSsRUbzxgfWAoNdg4SOwcJ3N3ebm5v8lVb4URL2z5E6ygv6UBG5XB15HyB4Kyv5mRp4pSY3dDS37i73sTG51he44iMb2Jjp42PU0ZHcj5ANzc32/NifwAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAAe0lEQVQY043OyxqCIBCA0XFEnS6OmkSAlrf3f0cJLaFV/4KPOYsBAEjwCHyYir00y91cHJE4nfMklsu1xEiYuUKo6+ZGrlbSfRO3Wbgbq8f7DEX/I+ZHLJGNRZmO+lDss1NaFlJ/xGr/eP+iYRPjPxdsHiVxLNNcfVtwBdPrC9ktDOFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA3LTE5VDIyOjI0OjEyLTA3OjAwhMR61wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wMS0yMVQwMDoyNDoyNS0wODowMNq1VW4AAAAASUVORK5CYII=); + background-image: url('data:png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzExLzA24EiMeQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAATOSURBVFiF5ZddbJNVGMd/b/u+sG5dW8d0H+4L2UcGKUOjUBkD0QsVCSHGCSZEyIzGi92RyI3gBQYuIF440USYCULMdMEAGhMCKJZsZJAY2AfsI0Sy4bplG9LOvu3bt32PF9C69Wudwyv/ydNzznM+/v/znHOevIX/O6QMx1k8Ho8qhEAIARArASRJQpKkWXXDMNB1/afy8vKtgJ5SwOmldSJV50Lw9KWz+P1+rFarr6WlpfLQoUMTycbJQWGQXVg4y7nkmToApn67EWsHPGOonvGMyNWxMQzDwOv1Ultba2tubr4NLEsmQjpetkIskkyznNvvdANw/9YAP29r4vXuDgB+P3WWrt0fxvoB2ipWJggICYOGSz8wPj6Oy+UCYGRkZLqsrGwJccdh0oRBGDHLAE5WOJm+O0pl0w4Azm9v4gnXs5S/sSXWf7LCmTA3jEATRuxORFFaWpo7NDR0FZBnCQgaBroQswxg8ZPF5JQUE/T5ALh75SpD7aexlBQDsONODzvu9CTM1YUgaBgPwhsnorKyclV/f/9nQCzksiYMFgsjIYyNHefo/eoE148dZ/W+PejCoMD1HAPtpwH4cdsuAPQkc6MRUBSF9vZ2RkdHURSFqqoqXC7XuwMDAxdqampOAcIUEoJwnAF8XlqL+6MDsfZ7wzeZ6LvFze++B2C4s4vhzq6EuWEhCAmBJEnk5uaSnZ1NTk4Ouq5z7do1WltbTXa7fT+gAEj7Cp8SeWYlYRczUfL8aib6+tEeHsdcuBfReafrF7KyslBVFU3TCIVCBAIBNE0jPz+f5cuXPw5MyiHDYMzQ0i445r6cEfFMRI/A4XDE2pFIhGAwiNlsBrABk/IX2p9lgCXdYpqmVbjd7nPwIAPGXy5JkgisqUeqqkTe/Bq2pl3IspyQHRVFQVGUqF+O/kwS9zTiEQ6HcwoKCtLudkqAZdMmzMXFWPPyZhIlTdVRyF6vN5CO/CH8Vqs1rQBfbi7i/EWsBz/GYrHE/PFlvABT4nKpSdKZcDrx9fZhctjnHDsTCxZgMpmQJIlFDfVoSGStdM4p4D+JQASJIBKT33w7LwGZfg9Ue73egWSiougsqcLssGEAa65cQrbbk96BaJmVlVUDDD6SCNw+eJgAEivaTuC/P03fB3szjkDa55dqtzPbutfL4JGjLGt+H3udkzXnzuB+eSsTro2s2LsHgHvdfSh2G0Ub1pFX51y4gJn1wSNHEQ47RVs20XPgMOPuDny+aXw9N/G8uROBRHZZKUUb6rne8iUbW49Q8sK6f9bKkL/a7/fH7kBUwL3uXs64XgKgsGEthevrKVq/lvw6J4scdjyXO7n1dRsjv3bgGx5BsdtovHiWglUrkWW5BhjMNADVqqoKVVVFIBAQ9z1j4kLzbvEJNtHW8IoIBoMx0zQtZqFQSIRCIaHrutB1Xfw1OSXC4bCIRCICqIZ5HoEkSUzc6OVM49toXh/Ybbx4rCXl8cTffstjjoQxGQswmR48mPbGnXiH/wBg89FPcSwtTxCaSkB8OS8B0Uk+7zQaEq8e3k/dzrdSvo65iGNjMuSv1nU9IRGlIkxXn+GrAQb/dR5I5puLNBkWnIjm8j0qAarZbN4GlM6bITlGABXm8ecUWAJkPyIBKjAFBP4GIMQcOK2oAoUAAAAASUVORK5CYII='); background-position: 0 0; background-repeat: no-repeat; background-size: 100%; @@ -123,39 +124,39 @@ a { */ h1 { - @include rem( font-size, 2rem ); - @include rem( line-height, 2.4rem ); - @include rem( margin, 1.2rem 0 2.4rem ); + @include rem( font-size, 1.8rem ); + @include rem( line-height, 1.8rem ); + @include rem( margin, 1.2rem 0 1.8rem ); } h2 { @include rem( font-size, 1.5rem ); - @include rem( line-height, 2.4rem ); - @include rem( margin, 1.2rem 0); + @include rem( line-height, 1.8rem ); + @include rem( margin, 1.2rem 0 1.8rem ); } h3 { - @include rem( font-size, 1.16667rem); - @include rem( line-height, 2.4rem); - @include rem( margin, 1.2rem 0); + @include rem( font-size, 1.16667rem ); + @include rem( line-height, 1.8rem ); + @include rem( margin, 1.2rem 0 1.8rem ); } h4 { - @include rem( font-size, 1rem); - @include rem( line-height, 2.4rem); - @include rem( margin, 1.2rem 0); + @include rem( font-size, 1rem ); + @include rem( line-height, 1.8rem ); + @include rem( margin, 1.2rem 0 1.8rem ); } h5 { - @include rem( font-size, 0.83333rem); - @include rem( line-height, 2.4rem); - @include rem( margin, 1.2rem 0); + @include rem( font-size, 0.83333rem ); + @include rem( line-height, 1.8rem ); + @include rem( margin, 1.2rem 0 1.8rem ); } h6 { - @include rem( font-size, 0.75rem); - @include rem( line-height, 2.4rem); - @include rem( margin, 1.2rem 0); + @include rem( font-size, 0.75rem ); + @include rem( line-height, 1.8rem ); + @include rem( margin, 1.2rem 0 1.8rem); } /* @@ -172,13 +173,23 @@ blockquote { @include rem( border-left, .6rem solid $background-color ); } +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + /* * Addresses styling not present in IE 6/7/8/9. */ mark { - background: #ff0; - color: #000; + background-color: lighten( $background-color, 20% ); + color: darken( $text-color, 20% ); } /* From 74a4a194d7ad3d931004bd13087d14b75f45eacb Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 1 Mar 2013 04:03:59 -0800 Subject: [PATCH 34/77] sync with changes in _normalize.scss --- normalize.css | 70 ++++++++++++++++++++++++++++----------------------- 1 file changed, 39 insertions(+), 31 deletions(-) diff --git a/normalize.css b/normalize.css index d122b440d..8ad51215b 100644 --- a/normalize.css +++ b/normalize.css @@ -93,7 +93,7 @@ a[href$=pdf] { width: 1.063rem; padding: 0; margin: 0; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGxQTFRF////8PDwwMDAe3x8paWmhQ8UnYOE7Rwk6ExSsRUbzxgfWAoNdg4SOwcJ3N3ebm5v8lVb4URL2z5E6ygv6UBG5XB15HyB4Kyv5mRp4pSY3dDS37i73sTG51he44iMb2Jjp42PU0ZHcj5ANzc32/NifwAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAAe0lEQVQY043OyxqCIBCA0XFEnS6OmkSAlrf3f0cJLaFV/4KPOYsBAEjwCHyYir00y91cHJE4nfMklsu1xEiYuUKo6+ZGrlbSfRO3Wbgbq8f7DEX/I+ZHLJGNRZmO+lDss1NaFlJ/xGr/eP+iYRPjPxdsHiVxLNNcfVtwBdPrC9ktDOFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA3LTE5VDIyOjI0OjEyLTA3OjAwhMR61wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wMS0yMVQwMDoyNDoyNS0wODowMNq1VW4AAAAASUVORK5CYII=); + background-image: url("data:png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzExLzA24EiMeQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAATOSURBVFiF5ZddbJNVGMd/b/u+sG5dW8d0H+4L2UcGKUOjUBkD0QsVCSHGCSZEyIzGi92RyI3gBQYuIF440USYCULMdMEAGhMCKJZsZJAY2AfsI0Sy4bplG9LOvu3bt32PF9C69Wudwyv/ydNzznM+/v/znHOevIX/O6QMx1k8Ho8qhEAIARArASRJQpKkWXXDMNB1/afy8vKtgJ5SwOmldSJV50Lw9KWz+P1+rFarr6WlpfLQoUMTycbJQWGQXVg4y7nkmToApn67EWsHPGOonvGMyNWxMQzDwOv1Ultba2tubr4NLEsmQjpetkIskkyznNvvdANw/9YAP29r4vXuDgB+P3WWrt0fxvoB2ipWJggICYOGSz8wPj6Oy+UCYGRkZLqsrGwJccdh0oRBGDHLAE5WOJm+O0pl0w4Azm9v4gnXs5S/sSXWf7LCmTA3jEATRuxORFFaWpo7NDR0FZBnCQgaBroQswxg8ZPF5JQUE/T5ALh75SpD7aexlBQDsONODzvu9CTM1YUgaBgPwhsnorKyclV/f/9nQCzksiYMFgsjIYyNHefo/eoE148dZ/W+PejCoMD1HAPtpwH4cdsuAPQkc6MRUBSF9vZ2RkdHURSFqqoqXC7XuwMDAxdqampOAcIUEoJwnAF8XlqL+6MDsfZ7wzeZ6LvFze++B2C4s4vhzq6EuWEhCAmBJEnk5uaSnZ1NTk4Ouq5z7do1WltbTXa7fT+gAEj7Cp8SeWYlYRczUfL8aib6+tEeHsdcuBfReafrF7KyslBVFU3TCIVCBAIBNE0jPz+f5cuXPw5MyiHDYMzQ0i445r6cEfFMRI/A4XDE2pFIhGAwiNlsBrABk/IX2p9lgCXdYpqmVbjd7nPwIAPGXy5JkgisqUeqqkTe/Bq2pl3IspyQHRVFQVGUqF+O/kwS9zTiEQ6HcwoKCtLudkqAZdMmzMXFWPPyZhIlTdVRyF6vN5CO/CH8Vqs1rQBfbi7i/EWsBz/GYrHE/PFlvABT4nKpSdKZcDrx9fZhctjnHDsTCxZgMpmQJIlFDfVoSGStdM4p4D+JQASJIBKT33w7LwGZfg9Ue73egWSiougsqcLssGEAa65cQrbbk96BaJmVlVUDDD6SCNw+eJgAEivaTuC/P03fB3szjkDa55dqtzPbutfL4JGjLGt+H3udkzXnzuB+eSsTro2s2LsHgHvdfSh2G0Ub1pFX51y4gJn1wSNHEQ47RVs20XPgMOPuDny+aXw9N/G8uROBRHZZKUUb6rne8iUbW49Q8sK6f9bKkL/a7/fH7kBUwL3uXs64XgKgsGEthevrKVq/lvw6J4scdjyXO7n1dRsjv3bgGx5BsdtovHiWglUrkWW5BhjMNADVqqoKVVVFIBAQ9z1j4kLzbvEJNtHW8IoIBoMx0zQtZqFQSIRCIaHrutB1Xfw1OSXC4bCIRCICqIZ5HoEkSUzc6OVM49toXh/Ybbx4rCXl8cTffstjjoQxGQswmR48mPbGnXiH/wBg89FPcSwtTxCaSkB8OS8B0Uk+7zQaEq8e3k/dzrdSvo65iGNjMuSv1nU9IRGlIkxXn+GrAQb/dR5I5puLNBkWnIjm8j0qAarZbN4GlM6bITlGABXm8ecUWAJkPyIBKjAFBP4GIMQcOK2oAoUAAAAASUVORK5CYII="); background-position: 0 0; background-repeat: no-repeat; background-size: 100%; } @@ -109,52 +109,52 @@ a[href$=pdf] { * Addresses font sizes within `section` and `article` in Firefox 4+, Chrome, Safari 5. */ h1 { - font-size: 32px; - font-size: 2rem; - line-height: 38.4px; - line-height: 2.4rem; - margin: 19.2px 0 38.4px; - margin: 1.2rem 0 2.4rem; } + font-size: 28.8px; + font-size: 1.8rem; + line-height: 28.8px; + line-height: 1.8rem; + margin: 19.2px 0 28.8px; + margin: 1.2rem 0 1.8rem; } h2 { font-size: 24px; font-size: 1.5rem; - line-height: 38.4px; - line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + line-height: 28.8px; + line-height: 1.8rem; + margin: 19.2px 0 28.8px; + margin: 1.2rem 0 1.8rem; } h3 { font-size: 18.66672px; font-size: 1.16667rem; - line-height: 38.4px; - line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + line-height: 28.8px; + line-height: 1.8rem; + margin: 19.2px 0 28.8px; + margin: 1.2rem 0 1.8rem; } h4 { font-size: 16px; font-size: 1rem; - line-height: 38.4px; - line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + line-height: 28.8px; + line-height: 1.8rem; + margin: 19.2px 0 28.8px; + margin: 1.2rem 0 1.8rem; } h5 { font-size: 13.33328px; font-size: 0.83333rem; - line-height: 38.4px; - line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + line-height: 28.8px; + line-height: 1.8rem; + margin: 19.2px 0 28.8px; + margin: 1.2rem 0 1.8rem; } h6 { font-size: 12px; font-size: 0.75rem; - line-height: 38.4px; - line-height: 2.4rem; - margin: 19.2px 0; - margin: 1.2rem 0; } + line-height: 28.8px; + line-height: 1.8rem; + margin: 19.2px 0 28.8px; + margin: 1.2rem 0 1.8rem; } /* * Addresses styling not present in IE 7/8/9, Safari 5, Chrome. @@ -171,12 +171,20 @@ blockquote { border-left: 9.6px solid #cccccc; border-left: 0.6rem solid #cccccc; } +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + /* * Addresses styling not present in IE 6/7/8/9. */ mark { - background: #ff0; - color: #000; } + background-color: white; + color: black; } /* * Addresses margins set differently in IE 6/7. @@ -190,7 +198,7 @@ p, pre { */ code, kbd, pre, samp { font-family: monospace, serif; - _font-family: 'courier new', monospace; + _font-family: "courier new", monospace; margin: 19.2px 0; margin: 1.2rem 0; } @@ -320,7 +328,7 @@ figure, form { * Define consistent border, margin, and padding. */ fieldset { - border: 1px solid #c0c0c0; + border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } From 770474a0ef5324c499f1ce4b0bf87b25fbe1aadd Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 1 Mar 2013 04:42:47 -0800 Subject: [PATCH 35/77] subtly space out letters in --- _normalize.scss | 3 +++ normalize.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/_normalize.scss b/_normalize.scss index a8f14b148..7f62eabc4 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -210,6 +210,9 @@ code, kbd, pre, samp { @include rem( margin, 1.2rem 0); } +em { + letter-spacing: .5px; +} /* * Improves readability of pre-formatted text in all browsers. */ diff --git a/normalize.css b/normalize.css index 8ad51215b..fae7c3947 100644 --- a/normalize.css +++ b/normalize.css @@ -202,6 +202,9 @@ code, kbd, pre, samp { margin: 19.2px 0; margin: 1.2rem 0; } +em { + letter-spacing: .5px; } + /* * Improves readability of pre-formatted text in all browsers. */ From 86b38c4225c14163c80c355095b9b757d8623028 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Mar 2013 16:21:41 -0700 Subject: [PATCH 36/77] introduce a line-height variable: had to reorder the sizing include, plus decide on a good default line-height number in px units; the line-height variable is now the basis for being the main unit for margins, padding, and so on. --- _normalize.scss | 94 ++++++++++++++++++------------ _sizing.scss | 11 ++-- normalize.css | 152 ++++++++++++++++++++++++++++++++++++------------ 3 files changed, 180 insertions(+), 77 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 7f62eabc4..3827c6ae8 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -3,10 +3,17 @@ /* ============================================================================= Mixins ========================================================================== */ -@import "sizing"; -@import "compass"; +$base-font-size: 15px !default; // otherwise inherited from _sizing $text-color: #333 !default; $background-color: #ccc !default; +$lh: 1.2rem !default; // line-height unit, in rem + +@import "sizing"; +@import "compass"; + +%italic { + font-style: italic; +} /* ========================================================================== HTML5 display definitions @@ -52,11 +59,12 @@ audio:not([controls]) { * user zoom. */ html { - font-size: 100%; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ + font-size: percentage( $base-font-size / $baseFontSize ); /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ font-family: sans-serif; color: $text-color; + background-color: $background-color; } /* @@ -64,7 +72,8 @@ html { * elements. */ button, input[type=submit], select { - font-family: sans-serif; } + font-family: sans-serif; +} input, textarea { font-family: monospace; @@ -91,15 +100,15 @@ a { &:active, &:hover { outline: 0; } - &[href$=pdf] { + &[href$=pdf] { // used in accordance with terms at http://www.adobe.com/misc/linking.html position: relative; - @include rem( padding-right, 1.063rem ); + @include rem( padding-right, 1.06666667rem ); &:after { position: absolute; content: ""; display: inline-block; - @include rem( height, 1.063rem ); - @include rem( width, 1.063rem ); + @include rem( height, 1.06666667rem ); + @include rem( width, 1.06666667rem ); padding: 0; margin: 0; background-image: url('data:png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzExLzA24EiMeQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAATOSURBVFiF5ZddbJNVGMd/b/u+sG5dW8d0H+4L2UcGKUOjUBkD0QsVCSHGCSZEyIzGi92RyI3gBQYuIF440USYCULMdMEAGhMCKJZsZJAY2AfsI0Sy4bplG9LOvu3bt32PF9C69Wudwyv/ydNzznM+/v/znHOevIX/O6QMx1k8Ho8qhEAIARArASRJQpKkWXXDMNB1/afy8vKtgJ5SwOmldSJV50Lw9KWz+P1+rFarr6WlpfLQoUMTycbJQWGQXVg4y7nkmToApn67EWsHPGOonvGMyNWxMQzDwOv1Ultba2tubr4NLEsmQjpetkIskkyznNvvdANw/9YAP29r4vXuDgB+P3WWrt0fxvoB2ipWJggICYOGSz8wPj6Oy+UCYGRkZLqsrGwJccdh0oRBGDHLAE5WOJm+O0pl0w4Azm9v4gnXs5S/sSXWf7LCmTA3jEATRuxORFFaWpo7NDR0FZBnCQgaBroQswxg8ZPF5JQUE/T5ALh75SpD7aexlBQDsONODzvu9CTM1YUgaBgPwhsnorKyclV/f/9nQCzksiYMFgsjIYyNHefo/eoE148dZ/W+PejCoMD1HAPtpwH4cdsuAPQkc6MRUBSF9vZ2RkdHURSFqqoqXC7XuwMDAxdqampOAcIUEoJwnAF8XlqL+6MDsfZ7wzeZ6LvFze++B2C4s4vhzq6EuWEhCAmBJEnk5uaSnZ1NTk4Ouq5z7do1WltbTXa7fT+gAEj7Cp8SeWYlYRczUfL8aib6+tEeHsdcuBfReafrF7KyslBVFU3TCIVCBAIBNE0jPz+f5cuXPw5MyiHDYMzQ0i445r6cEfFMRI/A4XDE2pFIhGAwiNlsBrABk/IX2p9lgCXdYpqmVbjd7nPwIAPGXy5JkgisqUeqqkTe/Bq2pl3IspyQHRVFQVGUqF+O/kwS9zTiEQ6HcwoKCtLudkqAZdMmzMXFWPPyZhIlTdVRyF6vN5CO/CH8Vqs1rQBfbi7i/EWsBz/GYrHE/PFlvABT4nKpSdKZcDrx9fZhctjnHDsTCxZgMpmQJIlFDfVoSGStdM4p4D+JQASJIBKT33w7LwGZfg9Ue73egWSiougsqcLssGEAa65cQrbbk96BaJmVlVUDDD6SCNw+eJgAEivaTuC/P03fB3szjkDa55dqtzPbutfL4JGjLGt+H3udkzXnzuB+eSsTro2s2LsHgHvdfSh2G0Ub1pFX51y4gJn1wSNHEQ47RVs20XPgMOPuDny+aXw9N/G8uROBRHZZKUUb6rne8iUbW49Q8sK6f9bKkL/a7/fH7kBUwL3uXs64XgKgsGEthevrKVq/lvw6J4scdjyXO7n1dRsjv3bgGx5BsdtovHiWglUrkWW5BhjMNADVqqoKVVVFIBAQ9z1j4kLzbvEJNtHW8IoIBoMx0zQtZqFQSIRCIaHrutB1Xfw1OSXC4bCIRCICqIZ5HoEkSUzc6OVM49toXh/Ybbx4rCXl8cTffstjjoQxGQswmR48mPbGnXiH/wBg89FPcSwtTxCaSkB8OS8B0Uk+7zQaEq8e3k/dzrdSvo65iGNjMuSv1nU9IRGlIkxXn+GrAQb/dR5I5puLNBkWnIjm8j0qAarZbN4GlM6bITlGABXm8ecUWAJkPyIBKjAFBP4GIMQcOK2oAoUAAAAASUVORK5CYII='); @@ -124,39 +133,39 @@ a { */ h1 { - @include rem( font-size, 1.8rem ); - @include rem( line-height, 1.8rem ); - @include rem( margin, 1.2rem 0 1.8rem ); + @include rem( font-size, 1.5*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0 1.5*$lh ); } h2 { - @include rem( font-size, 1.5rem ); - @include rem( line-height, 1.8rem ); - @include rem( margin, 1.2rem 0 1.8rem ); + @include rem( font-size, 4/3*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0 1.5*$lh ); } h3 { @include rem( font-size, 1.16667rem ); - @include rem( line-height, 1.8rem ); - @include rem( margin, 1.2rem 0 1.8rem ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0 1.5*$lh ); } h4 { - @include rem( font-size, 1rem ); - @include rem( line-height, 1.8rem ); - @include rem( margin, 1.2rem 0 1.8rem ); + @include rem( font-size, 5/6*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0 1.5*$lh ); } h5 { - @include rem( font-size, 0.83333rem ); - @include rem( line-height, 1.8rem ); - @include rem( margin, 1.2rem 0 1.8rem ); + @include rem( font-size, 25/36*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0 1.5*$lh ); } h6 { - @include rem( font-size, 0.75rem ); - @include rem( line-height, 1.8rem ); - @include rem( margin, 1.2rem 0 1.8rem); + @include rem( font-size, 24/15*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, $lh 0 1.5*$lh); } /* @@ -167,10 +176,10 @@ abbr[title] { border-bottom: 1px dotted; } blockquote { - @include rem( margin, 1.2rem 0 ); - @include rem( padding, 0 0 0 .6rem); + @include rem( margin, $lh 0 ); + @include rem( padding, 0 0 0 .5*$lh); border: 0; - @include rem( border-left, .6rem solid $background-color ); + @include rem( border-left, .5*$lh solid $background-color ); } /** @@ -197,7 +206,11 @@ mark { */ p, pre { - @include rem( margin, 1.2rem 0); + @include rem( margin, $lh 0); +} + +p { + @include hyphenation; } /* @@ -207,12 +220,21 @@ p, pre { code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; - @include rem( margin, 1.2rem 0); + @include rem( margin, $lh 0); } em { + @extend %italic; letter-spacing: .5px; } + +cite, i { + @extend %italic; +} + +strong, b { + font-weight: 700; +} /* * Improves readability of pre-formatted text in all browsers. */ @@ -275,7 +297,7 @@ sub { */ dl, menu, ol, ul { - @include rem( margin, 1.2rem 0 ); + @include rem( margin, $lh 0 ); } dt { @@ -283,7 +305,7 @@ dt { } dd { - @include rem( margin, 0 0 1.2rem 1.2rem ); + @include rem( margin, 0 0 $lh $lh ); } /* @@ -293,7 +315,7 @@ dd { menu, ol, ul { list-style-position: outside; - @include rem( padding, 0 0 0 1.2rem ); + @include rem( padding, 0 0 0 $lh ); } ol { @@ -317,7 +339,7 @@ ul { } li { - @include rem( margin, 1.2rem 0 ); + @include rem( margin, $lh 0 ); } nav { diff --git a/_sizing.scss b/_sizing.scss index fd22ad0de..4d84aa3ac 100644 --- a/_sizing.scss +++ b/_sizing.scss @@ -3,7 +3,13 @@ // Base font size in pixels, if not already defined. // Should be the same as the font-size of the html element. -$base-font-size: 16px !default; + + +// Default font size in pixels if not overridden. +// present in most, if not all, browsers. +$baseFontSize: 16px; + +$base-font-size: $baseFontSize !default; $rem-with-px-fallback: true !default; // @private Number of pixels in 1rem. @@ -78,9 +84,6 @@ $px-per-rem: $base-font-size / 1rem; // https://gist.github.com/2237465 // See http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/ -// Default font size in pixels if not overridden. -$baseFontSize: 16px; - //Convert PX units to EMs. //Ex: margin-right: pem(16); diff --git a/normalize.css b/normalize.css index fae7c3947..9784176f3 100644 --- a/normalize.css +++ b/normalize.css @@ -2,18 +2,24 @@ /* ============================================================================= Mixins ========================================================================== */ +/* line 14, _normalize.scss */ +em, cite, i { + font-style: italic; } + /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 & Firefox 3. */ +/* line 25, _normalize.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE 6/7/8/9 & Firefox 3. */ +/* line 31, _normalize.scss */ audio, canvas, video { display: inline-block; *display: inline; @@ -23,6 +29,7 @@ audio, canvas, video { * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS5 devices. */ +/* line 40, _normalize.scss */ audio:not([controls]) { display: none; height: 0; } @@ -31,6 +38,7 @@ audio:not([controls]) { * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, Safari 4. * Known issue: no IE 6 support. */ +/* line 48, _normalize.scss */ [hidden] { display: none; } @@ -43,29 +51,34 @@ audio:not([controls]) { * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ +/* line 61, _normalize.scss */ html { - font-size: 100%; + font-size: 93.75%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ font-family: sans-serif; - color: #333333; } + color: #333333; + background-color: #cccccc; } /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ +/* line 74, _normalize.scss */ button, input[type=submit], select { font-family: sans-serif; } +/* line 78, _normalize.scss */ input, textarea { font-family: monospace; } /* * Addresses margins handled incorrectly in IE 6/7. */ +/* line 85, _normalize.scss */ body { margin: 0; } @@ -75,22 +88,26 @@ body { /* * Addresses `outline` inconsistency between Chrome and other browsers. */ +/* line 97, _normalize.scss */ a:focus { outline: thin dotted; } +/* line 100, _normalize.scss */ a:active, a:hover { outline: 0; } +/* line 103, _normalize.scss */ a[href$=pdf] { position: relative; - padding-right: 17.008px; - padding-right: 1.063rem; } + padding-right: 16.0px; + padding-right: 1.06667rem; } + /* line 106, _normalize.scss */ a[href$=pdf]:after { position: absolute; content: ""; display: inline-block; - height: 17.008px; - height: 1.063rem; - width: 17.008px; - width: 1.063rem; + height: 16.0px; + height: 1.06667rem; + width: 16.0px; + width: 1.06667rem; padding: 0; margin: 0; background-image: url("data:png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzExLzA24EiMeQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAATOSURBVFiF5ZddbJNVGMd/b/u+sG5dW8d0H+4L2UcGKUOjUBkD0QsVCSHGCSZEyIzGi92RyI3gBQYuIF440USYCULMdMEAGhMCKJZsZJAY2AfsI0Sy4bplG9LOvu3bt32PF9C69Wudwyv/ydNzznM+/v/znHOevIX/O6QMx1k8Ho8qhEAIARArASRJQpKkWXXDMNB1/afy8vKtgJ5SwOmldSJV50Lw9KWz+P1+rFarr6WlpfLQoUMTycbJQWGQXVg4y7nkmToApn67EWsHPGOonvGMyNWxMQzDwOv1Ultba2tubr4NLEsmQjpetkIskkyznNvvdANw/9YAP29r4vXuDgB+P3WWrt0fxvoB2ipWJggICYOGSz8wPj6Oy+UCYGRkZLqsrGwJccdh0oRBGDHLAE5WOJm+O0pl0w4Azm9v4gnXs5S/sSXWf7LCmTA3jEATRuxORFFaWpo7NDR0FZBnCQgaBroQswxg8ZPF5JQUE/T5ALh75SpD7aexlBQDsONODzvu9CTM1YUgaBgPwhsnorKyclV/f/9nQCzksiYMFgsjIYyNHefo/eoE148dZ/W+PejCoMD1HAPtpwH4cdsuAPQkc6MRUBSF9vZ2RkdHURSFqqoqXC7XuwMDAxdqampOAcIUEoJwnAF8XlqL+6MDsfZ7wzeZ6LvFze++B2C4s4vhzq6EuWEhCAmBJEnk5uaSnZ1NTk4Ouq5z7do1WltbTXa7fT+gAEj7Cp8SeWYlYRczUfL8aib6+tEeHsdcuBfReafrF7KyslBVFU3TCIVCBAIBNE0jPz+f5cuXPw5MyiHDYMzQ0i445r6cEfFMRI/A4XDE2pFIhGAwiNlsBrABk/IX2p9lgCXdYpqmVbjd7nPwIAPGXy5JkgisqUeqqkTe/Bq2pl3IspyQHRVFQVGUqF+O/kwS9zTiEQ6HcwoKCtLudkqAZdMmzMXFWPPyZhIlTdVRyF6vN5CO/CH8Vqs1rQBfbi7i/EWsBz/GYrHE/PFlvABT4nKpSdKZcDrx9fZhctjnHDsTCxZgMpmQJIlFDfVoSGStdM4p4D+JQASJIBKT33w7LwGZfg9Ue73egWSiougsqcLssGEAa65cQrbbk96BaJmVlVUDDD6SCNw+eJgAEivaTuC/P03fB3szjkDa55dqtzPbutfL4JGjLGt+H3udkzXnzuB+eSsTro2s2LsHgHvdfSh2G0Ub1pFX51y4gJn1wSNHEQ47RVs20XPgMOPuDny+aXw9N/G8uROBRHZZKUUb6rne8iUbW49Q8sK6f9bKkL/a7/fH7kBUwL3uXs64XgKgsGEthevrKVq/lvw6J4scdjyXO7n1dRsjv3bgGx5BsdtovHiWglUrkWW5BhjMNADVqqoKVVVFIBAQ9z1j4kLzbvEJNtHW8IoIBoMx0zQtZqFQSIRCIaHrutB1Xfw1OSXC4bCIRCICqIZ5HoEkSUzc6OVM49toXh/Ybbx4rCXl8cTffstjjoQxGQswmR48mPbGnXiH/wBg89FPcSwtTxCaSkB8OS8B0Uk+7zQaEq8e3k/dzrdSvo65iGNjMuSv1nU9IRGlIkxXn+GrAQb/dR5I5puLNBkWnIjm8j0qAarZbN4GlM6bITlGABXm8ecUWAJkPyIBKjAFBP4GIMQcOK2oAoUAAAAASUVORK5CYII="); @@ -108,72 +125,81 @@ a[href$=pdf] { * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within `section` and `article` in Firefox 4+, Chrome, Safari 5. */ +/* line 135, _normalize.scss */ h1 { - font-size: 28.8px; + font-size: 27.0px; font-size: 1.8rem; - line-height: 28.8px; + line-height: 27.0px; line-height: 1.8rem; - margin: 19.2px 0 28.8px; + margin: 18px 0 27.0px; margin: 1.2rem 0 1.8rem; } +/* line 141, _normalize.scss */ h2 { - font-size: 24px; - font-size: 1.5rem; - line-height: 28.8px; + font-size: 24.0px; + font-size: 1.6rem; + line-height: 27.0px; line-height: 1.8rem; - margin: 19.2px 0 28.8px; + margin: 18px 0 27.0px; margin: 1.2rem 0 1.8rem; } +/* line 147, _normalize.scss */ h3 { - font-size: 18.66672px; + font-size: 17.50005px; font-size: 1.16667rem; - line-height: 28.8px; + line-height: 27.0px; line-height: 1.8rem; - margin: 19.2px 0 28.8px; + margin: 18px 0 27.0px; margin: 1.2rem 0 1.8rem; } +/* line 153, _normalize.scss */ h4 { - font-size: 16px; + font-size: 15px; font-size: 1rem; - line-height: 28.8px; + line-height: 27.0px; line-height: 1.8rem; - margin: 19.2px 0 28.8px; + margin: 18px 0 27.0px; margin: 1.2rem 0 1.8rem; } +/* line 159, _normalize.scss */ h5 { - font-size: 13.33328px; + font-size: 12.5px; font-size: 0.83333rem; - line-height: 28.8px; + line-height: 27.0px; line-height: 1.8rem; - margin: 19.2px 0 28.8px; + margin: 18px 0 27.0px; margin: 1.2rem 0 1.8rem; } +/* line 165, _normalize.scss */ h6 { - font-size: 12px; - font-size: 0.75rem; - line-height: 28.8px; + font-size: 28.8px; + font-size: 1.92rem; + line-height: 27.0px; line-height: 1.8rem; - margin: 19.2px 0 28.8px; + margin: 18px 0 27.0px; margin: 1.2rem 0 1.8rem; } /* * Addresses styling not present in IE 7/8/9, Safari 5, Chrome. */ +/* line 175, _normalize.scss */ abbr[title] { border-bottom: 1px dotted; } +/* line 178, _normalize.scss */ blockquote { - margin: 19.2px 0; + margin: 18px 0; margin: 1.2rem 0; - padding: 0 0 0 9.6px; + padding: 0 0 0 9px; padding: 0 0 0 0.6rem; border: 0; - border-left: 9.6px solid #cccccc; + border-left: 9px solid #cccccc; border-left: 0.6rem solid #cccccc; } /** * Address differences between Firefox and other browsers. */ +/* line 189, _normalize.scss */ hr { -moz-box-sizing: content-box; box-sizing: content-box; @@ -182,6 +208,7 @@ hr { /* * Addresses styling not present in IE 6/7/8/9. */ +/* line 199, _normalize.scss */ mark { background-color: white; color: black; } @@ -189,25 +216,38 @@ mark { /* * Addresses margins set differently in IE 6/7. */ +/* line 208, _normalize.scss */ p, pre { - margin: 19.2px 0; + margin: 18px 0; margin: 1.2rem 0; } +/* line 212, _normalize.scss */ +p { + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; } + /* * Corrects font family set oddly in IE 6, Safari 4/5, Chrome. */ +/* line 220, _normalize.scss */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: "courier new", monospace; - margin: 19.2px 0; + margin: 18px 0; margin: 1.2rem 0; } +/* line 226, _normalize.scss */ em { letter-spacing: .5px; } /* * Improves readability of pre-formatted text in all browsers. */ +/* line 238, _normalize.scss */ pre { white-space: pre; white-space: pre-wrap; @@ -216,8 +256,10 @@ pre { /* * Addresses CSS quotes not supported in IE 6/7. */ +/* line 248, _normalize.scss */ q { quotes: none; } + /* line 250, _normalize.scss */ q:before, q:after { content: ''; content: none; } @@ -225,18 +267,21 @@ q { /* * Addresses `quotes` property not supported in Safari 4. */ +/* line 260, _normalize.scss */ small { font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ +/* line 268, _normalize.scss */ sub { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +/* line 275, _normalize.scss */ sup { font-size: 75%; line-height: 0; @@ -244,6 +289,7 @@ sup { vertical-align: baseline; top: -0.5em; } +/* line 283, _normalize.scss */ sub { bottom: -0.25em; } @@ -253,40 +299,51 @@ sub { /* * Addresses margins set differently in IE 6/7. */ +/* line 295, _normalize.scss */ dl, menu, ol, ul { - margin: 19.2px 0; + margin: 18px 0; margin: 1.2rem 0; } +/* line 303, _normalize.scss */ dd { - margin: 0 0 19.2px 19.2px; + margin: 0 0 18px 18px; margin: 0 0 1.2rem 1.2rem; } /* * Addresses paddings set differently in IE 6/7. */ +/* line 311, _normalize.scss */ menu, ol, ul { list-style-position: outside; - padding: 0 0 0 19.2px; + padding: 0 0 0 18px; padding: 0 0 0 1.2rem; } +/* line 317, _normalize.scss */ ol { list-style-type: decimal; } + /* line 319, _normalize.scss */ ol ol { list-style-type: upper-alpha; } + /* line 321, _normalize.scss */ ol ol ol { list-style-type: lower-alpha; } +/* line 327, _normalize.scss */ ul { list-style-type: disc; } + /* line 329, _normalize.scss */ ul ul { list-style-type: square; } + /* line 331, _normalize.scss */ ul ul ul { list-style-type: circle; } +/* line 337, _normalize.scss */ li { - margin: 19.2px 0; + margin: 18px 0; margin: 1.2rem 0; } +/* line 342, _normalize.scss */ nav li { list-style: none; margin: 0; } @@ -294,6 +351,7 @@ nav li { /* * Corrects list images handled incorrectly in IE 7. */ +/* line 353, _normalize.scss */ nav ul, nav ol { list-style: none; list-style-image: none; } @@ -305,6 +363,7 @@ nav ul, nav ol { * 1. Removes border when inside `a` element in IE 6/7/8/9, Firefox 3. * 2. Improves image quality when scaled in IE 7. */ +/* line 368, _normalize.scss */ img { border: 0; /* 1 */ @@ -314,6 +373,7 @@ img { /* * Corrects overflow displayed oddly in IE 9. */ +/* line 377, _normalize.scss */ svg:not(:root) { overflow: hidden; } @@ -324,12 +384,14 @@ svg:not(:root) { * Addresses margin not present in IE 6/7/8/9, Safari 5, Opera 11. * + Corrects margin displayed oddly in IE 6/7. */ +/* line 390, _normalize.scss */ figure, form { margin: 0; } /* * Define consistent border, margin, and padding. */ +/* line 397, _normalize.scss */ fieldset { border: 1px solid silver; margin: 0 2px; @@ -340,6 +402,7 @@ fieldset { * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ +/* line 408, _normalize.scss */ legend { border: 0; /* 1 */ @@ -358,6 +421,7 @@ legend { * 4. Enable line-wrapping in IE8+, from * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ */ +/* line 422, _normalize.scss */ button, input, select, textarea { font-size: 100%; /* 1 */ @@ -372,6 +436,7 @@ button, input, select, textarea { * Addresses Firefox 3/4 setting `line-height` on `input` using `!important` in the * UA stylesheet. */ +/* line 433, _normalize.scss */ button, input { line-height: normal; } @@ -384,9 +449,11 @@ button, input { * 4. Removes inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ +/* line 446, _normalize.scss */ .pointy, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } +/* line 454, _normalize.scss */ button, html input[type="button"] { -webkit-appearance: button; /* 2 */ @@ -394,6 +461,7 @@ button, html input[type="button"] { *overflow: visible; /* 4 */ } +/* line 461, _normalize.scss */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ @@ -404,10 +472,12 @@ input[type="reset"], input[type="submit"] { /* * A. Re-set default cursor for disabled elements. */ +/* line 471, _normalize.scss */ button[disabled] { cursor: default; /* A. */ } +/* line 475, _normalize.scss */ input { /* * 1. Addresses box sizing set to content-box in IE 8/9. @@ -420,9 +490,11 @@ input { * 2. Addresses `box-sizing` set to `border-box` in Safari 5, Chrome (include `-moz` * to future-proof). */ } + /* line 476, _normalize.scss */ input[disabled] { cursor: default; /* A. */ } + /* line 485, _normalize.scss */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ @@ -432,6 +504,7 @@ input { /* 3 */ *width: 13px; /* 3 */ } + /* line 496, _normalize.scss */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ @@ -442,12 +515,14 @@ input { /* * Removes inner padding and search cancel button in Safari 5, Chrome on OS X. */ } + /* line 504, _normalize.scss */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 3+. */ +/* line 513, _normalize.scss */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } @@ -456,6 +531,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ +/* line 522, _normalize.scss */ textarea { overflow: auto; /* 1 */ @@ -468,9 +544,11 @@ textarea { /* * Remove most spacing between table cells. */ +/* line 534, _normalize.scss */ table { border-collapse: collapse; border-spacing: 0; } +/* line 539, _normalize.scss */ iframe { border: 0; } From 5d33ca9b1a99e8df744e622c970659f3921f2639 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 2 Apr 2013 13:19:46 -0700 Subject: [PATCH 37/77] change hyphenation rules, FFX was choking on them --- _normalize.scss | 3 +- normalize.css | 97 +++++++++++++++++++++++++------------------------ 2 files changed, 52 insertions(+), 48 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 3827c6ae8..3e4d187e3 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -210,7 +210,8 @@ p, pre { } p { - @include hyphenation; + @include hyphens(auto); + @include word-break(normal); } /* diff --git a/normalize.css b/normalize.css index 9784176f3..551407bd9 100644 --- a/normalize.css +++ b/normalize.css @@ -223,31 +223,34 @@ p, pre { /* line 212, _normalize.scss */ p { - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; - hyphens: auto; } + hyphens: auto; + -ms-word-break: normal; + word-break: normal; } /* * Corrects font family set oddly in IE 6, Safari 4/5, Chrome. */ -/* line 220, _normalize.scss */ +/* line 221, _normalize.scss */ code, kbd, pre, samp { font-family: monospace, serif; - _font-family: "courier new", monospace; + _font-family: 'courier new', monospace; margin: 18px 0; margin: 1.2rem 0; } -/* line 226, _normalize.scss */ +/* line 227, _normalize.scss */ em { letter-spacing: .5px; } +/* line 236, _normalize.scss */ +strong, b { + font-weight: 700; } + /* * Improves readability of pre-formatted text in all browsers. */ -/* line 238, _normalize.scss */ +/* line 243, _normalize.scss */ pre { white-space: pre; white-space: pre-wrap; @@ -256,10 +259,10 @@ pre { /* * Addresses CSS quotes not supported in IE 6/7. */ -/* line 248, _normalize.scss */ +/* line 253, _normalize.scss */ q { quotes: none; } - /* line 250, _normalize.scss */ + /* line 255, _normalize.scss */ q:before, q:after { content: ''; content: none; } @@ -267,21 +270,21 @@ q { /* * Addresses `quotes` property not supported in Safari 4. */ -/* line 260, _normalize.scss */ +/* line 265, _normalize.scss */ small { font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ -/* line 268, _normalize.scss */ +/* line 273, _normalize.scss */ sub { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } -/* line 275, _normalize.scss */ +/* line 280, _normalize.scss */ sup { font-size: 75%; line-height: 0; @@ -289,7 +292,7 @@ sup { vertical-align: baseline; top: -0.5em; } -/* line 283, _normalize.scss */ +/* line 288, _normalize.scss */ sub { bottom: -0.25em; } @@ -299,12 +302,12 @@ sub { /* * Addresses margins set differently in IE 6/7. */ -/* line 295, _normalize.scss */ +/* line 300, _normalize.scss */ dl, menu, ol, ul { margin: 18px 0; margin: 1.2rem 0; } -/* line 303, _normalize.scss */ +/* line 308, _normalize.scss */ dd { margin: 0 0 18px 18px; margin: 0 0 1.2rem 1.2rem; } @@ -312,38 +315,38 @@ dd { /* * Addresses paddings set differently in IE 6/7. */ -/* line 311, _normalize.scss */ +/* line 316, _normalize.scss */ menu, ol, ul { list-style-position: outside; padding: 0 0 0 18px; padding: 0 0 0 1.2rem; } -/* line 317, _normalize.scss */ +/* line 322, _normalize.scss */ ol { list-style-type: decimal; } - /* line 319, _normalize.scss */ + /* line 324, _normalize.scss */ ol ol { list-style-type: upper-alpha; } - /* line 321, _normalize.scss */ + /* line 326, _normalize.scss */ ol ol ol { list-style-type: lower-alpha; } -/* line 327, _normalize.scss */ +/* line 332, _normalize.scss */ ul { list-style-type: disc; } - /* line 329, _normalize.scss */ + /* line 334, _normalize.scss */ ul ul { list-style-type: square; } - /* line 331, _normalize.scss */ + /* line 336, _normalize.scss */ ul ul ul { list-style-type: circle; } -/* line 337, _normalize.scss */ +/* line 342, _normalize.scss */ li { margin: 18px 0; margin: 1.2rem 0; } -/* line 342, _normalize.scss */ +/* line 347, _normalize.scss */ nav li { list-style: none; margin: 0; } @@ -351,7 +354,7 @@ nav li { /* * Corrects list images handled incorrectly in IE 7. */ -/* line 353, _normalize.scss */ +/* line 358, _normalize.scss */ nav ul, nav ol { list-style: none; list-style-image: none; } @@ -363,7 +366,7 @@ nav ul, nav ol { * 1. Removes border when inside `a` element in IE 6/7/8/9, Firefox 3. * 2. Improves image quality when scaled in IE 7. */ -/* line 368, _normalize.scss */ +/* line 373, _normalize.scss */ img { border: 0; /* 1 */ @@ -373,7 +376,7 @@ img { /* * Corrects overflow displayed oddly in IE 9. */ -/* line 377, _normalize.scss */ +/* line 382, _normalize.scss */ svg:not(:root) { overflow: hidden; } @@ -384,16 +387,16 @@ svg:not(:root) { * Addresses margin not present in IE 6/7/8/9, Safari 5, Opera 11. * + Corrects margin displayed oddly in IE 6/7. */ -/* line 390, _normalize.scss */ +/* line 395, _normalize.scss */ figure, form { margin: 0; } /* * Define consistent border, margin, and padding. */ -/* line 397, _normalize.scss */ +/* line 402, _normalize.scss */ fieldset { - border: 1px solid silver; + border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } @@ -402,7 +405,7 @@ fieldset { * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ -/* line 408, _normalize.scss */ +/* line 413, _normalize.scss */ legend { border: 0; /* 1 */ @@ -421,7 +424,7 @@ legend { * 4. Enable line-wrapping in IE8+, from * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ */ -/* line 422, _normalize.scss */ +/* line 427, _normalize.scss */ button, input, select, textarea { font-size: 100%; /* 1 */ @@ -436,7 +439,7 @@ button, input, select, textarea { * Addresses Firefox 3/4 setting `line-height` on `input` using `!important` in the * UA stylesheet. */ -/* line 433, _normalize.scss */ +/* line 438, _normalize.scss */ button, input { line-height: normal; } @@ -449,11 +452,11 @@ button, input { * 4. Removes inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ -/* line 446, _normalize.scss */ +/* line 451, _normalize.scss */ .pointy, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; } -/* line 454, _normalize.scss */ +/* line 459, _normalize.scss */ button, html input[type="button"] { -webkit-appearance: button; /* 2 */ @@ -461,7 +464,7 @@ button, html input[type="button"] { *overflow: visible; /* 4 */ } -/* line 461, _normalize.scss */ +/* line 466, _normalize.scss */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ @@ -472,12 +475,12 @@ input[type="reset"], input[type="submit"] { /* * A. Re-set default cursor for disabled elements. */ -/* line 471, _normalize.scss */ +/* line 476, _normalize.scss */ button[disabled] { cursor: default; /* A. */ } -/* line 475, _normalize.scss */ +/* line 480, _normalize.scss */ input { /* * 1. Addresses box sizing set to content-box in IE 8/9. @@ -490,11 +493,11 @@ input { * 2. Addresses `box-sizing` set to `border-box` in Safari 5, Chrome (include `-moz` * to future-proof). */ } - /* line 476, _normalize.scss */ + /* line 481, _normalize.scss */ input[disabled] { cursor: default; /* A. */ } - /* line 485, _normalize.scss */ + /* line 490, _normalize.scss */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ @@ -504,7 +507,7 @@ input { /* 3 */ *width: 13px; /* 3 */ } - /* line 496, _normalize.scss */ + /* line 501, _normalize.scss */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ @@ -515,14 +518,14 @@ input { /* * Removes inner padding and search cancel button in Safari 5, Chrome on OS X. */ } - /* line 504, _normalize.scss */ + /* line 509, _normalize.scss */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 3+. */ -/* line 513, _normalize.scss */ +/* line 518, _normalize.scss */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } @@ -531,7 +534,7 @@ button::-moz-focus-inner, input::-moz-focus-inner { * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ -/* line 522, _normalize.scss */ +/* line 527, _normalize.scss */ textarea { overflow: auto; /* 1 */ @@ -544,11 +547,11 @@ textarea { /* * Remove most spacing between table cells. */ -/* line 534, _normalize.scss */ +/* line 539, _normalize.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 539, _normalize.scss */ +/* line 544, _normalize.scss */ iframe { border: 0; } From 18b106cacd4b294ade641eabc23859803d36e9d1 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 31 May 2013 14:05:54 -0700 Subject: [PATCH 38/77] explicitly position the pdf icon, more FFX derps --- _normalize.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 3e4d187e3..07c322049 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -104,8 +104,9 @@ a { position: relative; @include rem( padding-right, 1.06666667rem ); &:after { - position: absolute; content: ""; + position: absolute; + right: 0; display: inline-block; @include rem( height, 1.06666667rem ); @include rem( width, 1.06666667rem ); From 759056deb770c745138053184d625b70c72e989f Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 16 Aug 2013 16:52:55 -0700 Subject: [PATCH 39/77] tweak

          sizing --- _normalize.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_normalize.scss b/_normalize.scss index 07c322049..3f2589bb5 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -140,7 +140,7 @@ h1 { } h2 { - @include rem( font-size, 4/3*$lh ); + @include rem( font-size, 5/4*$lh ); @include rem( line-height, 1.5*$lh ); @include rem( margin, 1*$lh 0 1.5*$lh ); } From 4802cc24716c426363c151cc100d04e0b7deb175 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 27 Sep 2013 11:03:17 -0700 Subject: [PATCH 40/77] include a git hook, document its use --- README.md | 9 +++++++-- git_hooks/post-merge | 13 +++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100755 git_hooks/post-merge diff --git a/README.md b/README.md index 31ad0a3d8..1249d75cb 100644 --- a/README.md +++ b/README.md @@ -25,11 +25,16 @@ stylesheet, and compiled in using [Compass][]. A standalone version is generated for sites where the entirety of the source markup is out of my hands. The project also requires use of Compass, but is not making much use of it yet. +The project comes with a git hook, which has to be symlinked into the .git +directory to be used + + ln -s ./git_hooks/post-merge ./.git/hooks/post-merge + ### From Nicholas Gallagher (necolas): -`Normalize.css` is intended to be used as an alternative to CSS resets. +`_normalize.scss` is intended to be used as an alternative to CSS resets. -It's suggested that you read the `normalize.css` file and consider customising +It's suggested that you read the `_normalize.scss` file and consider customising it to meet your needs. Alternatively, include the file in your project and override the defaults later in your CSS. diff --git a/git_hooks/post-merge b/git_hooks/post-merge new file mode 100755 index 000000000..6474189e3 --- /dev/null +++ b/git_hooks/post-merge @@ -0,0 +1,13 @@ +#!/bin/sh +# Create a symbolic link to this in the .git/hooks directory + +if [ $(git diff HEAD@{1} HEAD --name-only | grep -E '_normalize.scss' -c) -ne 0 ]; then + echo "_normalize.scss changed, compiling" + if type "sass" > /dev/null 2>&1; then + sass --scss --compass -lC ./_normalize.scss > ./normalize.css; + else + cat $theme_path/style.scss | ssh demo \ + "sass --scss --compass --no-cache --style compressed" \ + > ./normalize.css + fi +fi From d19d02c3a94174ca3b97de119836c7b87413ec3f Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 27 Sep 2013 11:05:43 -0700 Subject: [PATCH 41/77] I should test the thing before I commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1249d75cb..ae8d2dd89 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ The project also requires use of Compass, but is not making much use of it yet. The project comes with a git hook, which has to be symlinked into the .git directory to be used - ln -s ./git_hooks/post-merge ./.git/hooks/post-merge + ln ./git_hooks/post-merge ./.git/hooks/post-merge ### From Nicholas Gallagher (necolas): From 98e25d29e962f8797eab11e62178e90392854b24 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 27 Sep 2013 16:18:22 -0700 Subject: [PATCH 42/77] stop tracking normalize.css; refresh docs --- normalize.css | 557 -------------------------------------------------- 1 file changed, 557 deletions(-) delete mode 100644 normalize.css diff --git a/normalize.css b/normalize.css deleted file mode 100644 index 551407bd9..000000000 --- a/normalize.css +++ /dev/null @@ -1,557 +0,0 @@ -/* based on normalize.css v1.0.0 | MIT License | git.io/normalize */ -/* ============================================================================= - Mixins - ========================================================================== */ -/* line 14, _normalize.scss */ -em, cite, i { - font-style: italic; } - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ -/* - * Corrects `block` display not defined in IE 6/7/8/9 & Firefox 3. - */ -/* line 25, _normalize.scss */ -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { - display: block; } - -/* - * Corrects `inline-block` display not defined in IE 6/7/8/9 & Firefox 3. - */ -/* line 31, _normalize.scss */ -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; } - -/* - * Prevents modern browsers from displaying `audio` without controls. - * Remove excess height in iOS5 devices. - */ -/* line 40, _normalize.scss */ -audio:not([controls]) { - display: none; - height: 0; } - -/* - * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, Safari 4. - * Known issue: no IE 6 support. - */ -/* line 48, _normalize.scss */ -[hidden] { - display: none; } - -/* ========================================================================== - Base - ========================================================================== */ -/* - * 1. Corrects 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 - * user zoom. - */ -/* line 61, _normalize.scss */ -html { - font-size: 93.75%; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -ms-text-size-adjust: 100%; - /* 2 */ - font-family: sans-serif; - color: #333333; - background-color: #cccccc; } - -/* - * Addresses `font-family` inconsistency between `textarea` and other form - * elements. - */ -/* line 74, _normalize.scss */ -button, input[type=submit], select { - font-family: sans-serif; } - -/* line 78, _normalize.scss */ -input, textarea { - font-family: monospace; } - -/* - * Addresses margins handled incorrectly in IE 6/7. - */ -/* line 85, _normalize.scss */ -body { - margin: 0; } - -/* ========================================================================== - Links - ========================================================================== */ -/* - * Addresses `outline` inconsistency between Chrome and other browsers. - */ -/* line 97, _normalize.scss */ -a:focus { - outline: thin dotted; } -/* line 100, _normalize.scss */ -a:active, a:hover { - outline: 0; } -/* line 103, _normalize.scss */ -a[href$=pdf] { - position: relative; - padding-right: 16.0px; - padding-right: 1.06667rem; } - /* line 106, _normalize.scss */ - a[href$=pdf]:after { - position: absolute; - content: ""; - display: inline-block; - height: 16.0px; - height: 1.06667rem; - width: 16.0px; - width: 1.06667rem; - padding: 0; - margin: 0; - background-image: url("data:png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzExLzA24EiMeQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAATOSURBVFiF5ZddbJNVGMd/b/u+sG5dW8d0H+4L2UcGKUOjUBkD0QsVCSHGCSZEyIzGi92RyI3gBQYuIF440USYCULMdMEAGhMCKJZsZJAY2AfsI0Sy4bplG9LOvu3bt32PF9C69Wudwyv/ydNzznM+/v/znHOevIX/O6QMx1k8Ho8qhEAIARArASRJQpKkWXXDMNB1/afy8vKtgJ5SwOmldSJV50Lw9KWz+P1+rFarr6WlpfLQoUMTycbJQWGQXVg4y7nkmToApn67EWsHPGOonvGMyNWxMQzDwOv1Ultba2tubr4NLEsmQjpetkIskkyznNvvdANw/9YAP29r4vXuDgB+P3WWrt0fxvoB2ipWJggICYOGSz8wPj6Oy+UCYGRkZLqsrGwJccdh0oRBGDHLAE5WOJm+O0pl0w4Azm9v4gnXs5S/sSXWf7LCmTA3jEATRuxORFFaWpo7NDR0FZBnCQgaBroQswxg8ZPF5JQUE/T5ALh75SpD7aexlBQDsONODzvu9CTM1YUgaBgPwhsnorKyclV/f/9nQCzksiYMFgsjIYyNHefo/eoE148dZ/W+PejCoMD1HAPtpwH4cdsuAPQkc6MRUBSF9vZ2RkdHURSFqqoqXC7XuwMDAxdqampOAcIUEoJwnAF8XlqL+6MDsfZ7wzeZ6LvFze++B2C4s4vhzq6EuWEhCAmBJEnk5uaSnZ1NTk4Ouq5z7do1WltbTXa7fT+gAEj7Cp8SeWYlYRczUfL8aib6+tEeHsdcuBfReafrF7KyslBVFU3TCIVCBAIBNE0jPz+f5cuXPw5MyiHDYMzQ0i445r6cEfFMRI/A4XDE2pFIhGAwiNlsBrABk/IX2p9lgCXdYpqmVbjd7nPwIAPGXy5JkgisqUeqqkTe/Bq2pl3IspyQHRVFQVGUqF+O/kwS9zTiEQ6HcwoKCtLudkqAZdMmzMXFWPPyZhIlTdVRyF6vN5CO/CH8Vqs1rQBfbi7i/EWsBz/GYrHE/PFlvABT4nKpSdKZcDrx9fZhctjnHDsTCxZgMpmQJIlFDfVoSGStdM4p4D+JQASJIBKT33w7LwGZfg9Ue73egWSiougsqcLssGEAa65cQrbbk96BaJmVlVUDDD6SCNw+eJgAEivaTuC/P03fB3szjkDa55dqtzPbutfL4JGjLGt+H3udkzXnzuB+eSsTro2s2LsHgHvdfSh2G0Ub1pFX51y4gJn1wSNHEQ47RVs20XPgMOPuDny+aXw9N/G8uROBRHZZKUUb6rne8iUbW49Q8sK6f9bKkL/a7/fH7kBUwL3uXs64XgKgsGEthevrKVq/lvw6J4scdjyXO7n1dRsjv3bgGx5BsdtovHiWglUrkWW5BhjMNADVqqoKVVVFIBAQ9z1j4kLzbvEJNtHW8IoIBoMx0zQtZqFQSIRCIaHrutB1Xfw1OSXC4bCIRCICqIZ5HoEkSUzc6OVM49toXh/Ybbx4rCXl8cTffstjjoQxGQswmR48mPbGnXiH/wBg89FPcSwtTxCaSkB8OS8B0Uk+7zQaEq8e3k/dzrdSvo65iGNjMuSv1nU9IRGlIkxXn+GrAQb/dR5I5puLNBkWnIjm8j0qAarZbN4GlM6bITlGABXm8ecUWAJkPyIBKjAFBP4GIMQcOK2oAoUAAAAASUVORK5CYII="); - background-position: 0 0; - background-repeat: no-repeat; - background-size: 100%; } - -/* - * Improves readability when focused and also mouse hovered in all browsers. - */ -/* ========================================================================== - Typography - ========================================================================== */ -/* - * Addresses font sizes and margins set differently in IE 6/7. - * Addresses font sizes within `section` and `article` in Firefox 4+, Chrome, Safari 5. - */ -/* line 135, _normalize.scss */ -h1 { - font-size: 27.0px; - font-size: 1.8rem; - line-height: 27.0px; - line-height: 1.8rem; - margin: 18px 0 27.0px; - margin: 1.2rem 0 1.8rem; } - -/* line 141, _normalize.scss */ -h2 { - font-size: 24.0px; - font-size: 1.6rem; - line-height: 27.0px; - line-height: 1.8rem; - margin: 18px 0 27.0px; - margin: 1.2rem 0 1.8rem; } - -/* line 147, _normalize.scss */ -h3 { - font-size: 17.50005px; - font-size: 1.16667rem; - line-height: 27.0px; - line-height: 1.8rem; - margin: 18px 0 27.0px; - margin: 1.2rem 0 1.8rem; } - -/* line 153, _normalize.scss */ -h4 { - font-size: 15px; - font-size: 1rem; - line-height: 27.0px; - line-height: 1.8rem; - margin: 18px 0 27.0px; - margin: 1.2rem 0 1.8rem; } - -/* line 159, _normalize.scss */ -h5 { - font-size: 12.5px; - font-size: 0.83333rem; - line-height: 27.0px; - line-height: 1.8rem; - margin: 18px 0 27.0px; - margin: 1.2rem 0 1.8rem; } - -/* line 165, _normalize.scss */ -h6 { - font-size: 28.8px; - font-size: 1.92rem; - line-height: 27.0px; - line-height: 1.8rem; - margin: 18px 0 27.0px; - margin: 1.2rem 0 1.8rem; } - -/* - * Addresses styling not present in IE 7/8/9, Safari 5, Chrome. - */ -/* line 175, _normalize.scss */ -abbr[title] { - border-bottom: 1px dotted; } - -/* line 178, _normalize.scss */ -blockquote { - margin: 18px 0; - margin: 1.2rem 0; - padding: 0 0 0 9px; - padding: 0 0 0 0.6rem; - border: 0; - border-left: 9px solid #cccccc; - border-left: 0.6rem solid #cccccc; } - -/** - * Address differences between Firefox and other browsers. - */ -/* line 189, _normalize.scss */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; } - -/* - * Addresses styling not present in IE 6/7/8/9. - */ -/* line 199, _normalize.scss */ -mark { - background-color: white; - color: black; } - -/* - * Addresses margins set differently in IE 6/7. - */ -/* line 208, _normalize.scss */ -p, pre { - margin: 18px 0; - margin: 1.2rem 0; } - -/* line 212, _normalize.scss */ -p { - -webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; - -ms-word-break: normal; - word-break: normal; } - -/* - * Corrects font family set oddly in IE 6, Safari 4/5, Chrome. - */ -/* line 221, _normalize.scss */ -code, kbd, pre, samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - margin: 18px 0; - margin: 1.2rem 0; } - -/* line 227, _normalize.scss */ -em { - letter-spacing: .5px; } - -/* line 236, _normalize.scss */ -strong, b { - font-weight: 700; } - -/* - * Improves readability of pre-formatted text in all browsers. - */ -/* line 243, _normalize.scss */ -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; } - -/* - * Addresses CSS quotes not supported in IE 6/7. - */ -/* line 253, _normalize.scss */ -q { - quotes: none; } - /* line 255, _normalize.scss */ - q:before, q:after { - content: ''; - content: none; } - -/* - * Addresses `quotes` property not supported in Safari 4. - */ -/* line 265, _normalize.scss */ -small { - font-size: 80%; } - -/* - * Prevents `sub` and `sup` affecting `line-height` in all browsers. - */ -/* line 273, _normalize.scss */ -sub { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -/* line 280, _normalize.scss */ -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - top: -0.5em; } - -/* line 288, _normalize.scss */ -sub { - bottom: -0.25em; } - -/* ========================================================================== - Lists - ========================================================================== */ -/* - * Addresses margins set differently in IE 6/7. - */ -/* line 300, _normalize.scss */ -dl, menu, ol, ul { - margin: 18px 0; - margin: 1.2rem 0; } - -/* line 308, _normalize.scss */ -dd { - margin: 0 0 18px 18px; - margin: 0 0 1.2rem 1.2rem; } - -/* - * Addresses paddings set differently in IE 6/7. - */ -/* line 316, _normalize.scss */ -menu, ol, ul { - list-style-position: outside; - padding: 0 0 0 18px; - padding: 0 0 0 1.2rem; } - -/* line 322, _normalize.scss */ -ol { - list-style-type: decimal; } - /* line 324, _normalize.scss */ - ol ol { - list-style-type: upper-alpha; } - /* line 326, _normalize.scss */ - ol ol ol { - list-style-type: lower-alpha; } - -/* line 332, _normalize.scss */ -ul { - list-style-type: disc; } - /* line 334, _normalize.scss */ - ul ul { - list-style-type: square; } - /* line 336, _normalize.scss */ - ul ul ul { - list-style-type: circle; } - -/* line 342, _normalize.scss */ -li { - margin: 18px 0; - margin: 1.2rem 0; } - -/* line 347, _normalize.scss */ -nav li { - list-style: none; - margin: 0; } - -/* - * Corrects list images handled incorrectly in IE 7. - */ -/* line 358, _normalize.scss */ -nav ul, nav ol { - list-style: none; - list-style-image: none; } - -/* ========================================================================== - Embedded content - ========================================================================== */ -/* - * 1. Removes border when inside `a` element in IE 6/7/8/9, Firefox 3. - * 2. Improves image quality when scaled in IE 7. - */ -/* line 373, _normalize.scss */ -img { - border: 0; - /* 1 */ - -ms-interpolation-mode: bicubic; - /* 2 */ } - -/* - * Corrects overflow displayed oddly in IE 9. - */ -/* line 382, _normalize.scss */ -svg:not(:root) { - overflow: hidden; } - -/* ========================================================================== - Figures & Forms - ========================================================================== */ -/* - * Addresses margin not present in IE 6/7/8/9, Safari 5, Opera 11. - * + Corrects margin displayed oddly in IE 6/7. - */ -/* line 395, _normalize.scss */ -figure, form { - margin: 0; } - -/* - * Define consistent border, margin, and padding. - */ -/* line 402, _normalize.scss */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - 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. - */ -/* line 413, _normalize.scss */ -legend { - border: 0; - /* 1 */ - padding: 0; - white-space: normal; - /* 2 */ - *margin-left: -7px; - /* 3 */ - display: table; - /* 4 */ } - -/* - * 1. Corrects font size not being inherited in all browsers. - * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, Chrome. - * 3. Improves appearance and consistency in all browsers. - * 4. Enable line-wrapping in IE8+, from - * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ - */ -/* line 427, _normalize.scss */ -button, input, select, textarea { - font-size: 100%; - /* 1 */ - margin: 0; - /* 2 */ - vertical-align: baseline; - /* 3 */ - *vertical-align: middle; - /* 3 */ } - -/* - * Addresses Firefox 3/4 setting `line-height` on `input` using `!important` in the - * UA stylesheet. - */ -/* line 438, _normalize.scss */ -button, input { - line-height: normal; } - -/* - * 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 - * `input` and others. - * 4. Removes inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ -/* line 451, _normalize.scss */ -.pointy, label, button, html input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; } - -/* line 459, _normalize.scss */ -button, html input[type="button"] { - -webkit-appearance: button; - /* 2 */ - /* 3 */ - *overflow: visible; - /* 4 */ } - -/* line 466, _normalize.scss */ -input[type="reset"], input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - /* 3 */ - *overflow: visible; - /* 4 */ } - -/* - * A. Re-set default cursor for disabled elements. - */ -/* line 476, _normalize.scss */ -button[disabled] { - cursor: default; - /* A. */ } - -/* line 480, _normalize.scss */ -input { - /* - * 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. - * Known issue: excess padding remains in IE 6. - */ - /* - * 1. Addresses `appearance` set to `searchfield` in Safari 5, Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5, Chrome (include `-moz` - * to future-proof). - */ } - /* line 481, _normalize.scss */ - input[disabled] { - cursor: default; - /* A. */ } - /* line 490, _normalize.scss */ - input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ - *height: 13px; - /* 3 */ - *width: 13px; - /* 3 */ } - /* line 501, _normalize.scss */ - input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - /* 2 */ - box-sizing: content-box; - /* - * Removes inner padding and search cancel button in Safari 5, Chrome on OS X. - */ } - /* line 509, _normalize.scss */ - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/* - * Removes inner padding and border in Firefox 3+. - */ -/* line 518, _normalize.scss */ -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; } - -/* - * 1. Removes default vertical scrollbar in IE 6/7/8/9. - * 2. Improves readability and alignment in all browsers. - */ -/* line 527, _normalize.scss */ -textarea { - overflow: auto; - /* 1 */ - vertical-align: top; - /* 2 */ } - -/* ========================================================================== - Tables - ========================================================================== */ -/* - * Remove most spacing between table cells. - */ -/* line 539, _normalize.scss */ -table { - border-collapse: collapse; - border-spacing: 0; } - -/* line 544, _normalize.scss */ -iframe { - border: 0; } From f91f0d6ad6851336df0d38c36dfa4d0ef63572a7 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 27 Sep 2013 16:18:51 -0700 Subject: [PATCH 43/77] more refreshings --- README.md | 2 +- test.html | 661 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 339 insertions(+), 324 deletions(-) diff --git a/README.md b/README.md index ae8d2dd89..6bd2abfae 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Nicholas Gallagher's `Normalize.css` project. It is the result of researching th differences between default browser styles in order to precisely target only the styles that need normalizing. -[Check out the demo](http://darcmattr.github.com/_normalize.scss/test.html) +[Check out the demo](http://darcmattr.github.io/_normalize.scss/test.html) ## What does it do? diff --git a/test.html b/test.html index 016f9af25..8a171bc2a 100644 --- a/test.html +++ b/test.html @@ -1,350 +1,365 @@ - - - - Normalize CSS - - - - - -

          Heading 1

          -

          Heading 2

          -

          Heading 3

          -

          Heading 4

          -
          Heading 5
          -
          Heading 6
          - -
          -

          Heading 1 (in section)

          -

          Heading 2 (in section)

          -

          Heading 3 (in section)

          -

          Heading 4 (in section)

          -
          Heading 5 (in section)
          -
          Heading 6 (in section)
          -
          - -
          -

          Heading 1 (in article)

          -

          Heading 2 (in article)

          -

          Heading 3 (in article)

          -

          Heading 4 (in article)

          -
          Heading 5 (in article)
          -
          Heading 6 (in article)
          -
          - -
          -
          -

          Heading 1 (in hgroup)

          -

          Heading 2 (in hgroup)

          -
          - -
          - -

          Text-level semantics

          - - - -

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

          -

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

          - -
          Address: somewhere, world
          + + + + Normalize CSS + + + + +

          Heading 1

          +

          Heading 2

          +

          Heading 3

          +

          Heading 4

          +
          Heading 5
          +
          Heading 6
          + +
          +

          Heading 1 (in section)

          +

          Heading 2 (in section)

          +

          Heading 3 (in section)

          +

          Heading 4 (in section)

          +
          Heading 5 (in section)
          +
          Heading 6 (in section)
          +
          + +
          +

          Heading 1 (in article)

          +

          Heading 2 (in article)

          +

          Heading 3 (in article)

          +

          Heading 4 (in article)

          +
          Heading 5 (in article)
          +
          Heading 6 (in article)
          +
          + +
          +
          +

          Heading 1 (in hgroup)

          +

          Heading 2 (in hgroup)

          +
          + +
          -

          - The a element example
          - The abbr element and abbr element with title examples
          - The b element example
          - The cite element example
          - The code element example
          - The del element example
          - The dfn element and dfn element with title examples
          - The em element example
          - The i element example
          - The img element example
          - The ins element example
          - The kbd element example
          - The mark element example
          - The q element inside a q element example
          - The s element example
          - The samp element example
          - The small element example
          - The span element example
          - The strong element example
          - The sub element example
          - The sup element example
          - The var element example
          - The u element example -

          +

          Text-level semantics

          -

          Embedded content

          + -

          audio

          +

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

          +

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

          - - +
          Address: somewhere, world
          -

          img

          +

          + The a element example
          + The abbr element and abbr element with title examples
          + The b element example
          + The cite element example
          + The code element example
          + The del element example
          + The dfn element and dfn element with title examples
          + The em element example
          + The i element example
          + The img element example
          + The ins element example
          + The kbd element example
          + The mark element example
          + The q element inside a q element example
          + The s element example
          + The samp element example
          + The small element example
          + The span element example
          + The strong element example
          + The sub element example
          + The sup element example
          + The var element example
          + The u element example +

          - - +

          Embedded content

          -

          svg

          +

          audio

          - - - + + -

          video

          +

          img

          - - + + -

          Interactive content

          +

          svg

          -

          details / summary

          -
          - More info -

          Additional information

          -
            -
          • Point 1
          • -
          • Point 2
          • -
          -
          + + + + +

          video

          + + + -

          Grouping content

          +

          Interactive content

          -

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

          +

          details / summary

          +
          + More info +

          Additional information

          +
            +
          • Point 1
          • +
          • Point 2
          • +
          +
          -

          pre

          +

          Grouping content

          -
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
          +

          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

          -
          <html>
          -    <head>
          -    </head>
          -    <body>
          -        <div class="main"> <div>
          -    </body>
          +    

          pre

          + +
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
          + +
          <html>
          +<head>
          +</head>
          +<body>
          +    <div class="main"> <div>
          +</body>
           </html>
          -

          blockquote

          - -
          -

          Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

          -
          - -
          Even better philosophical quote marked up with just a <blockquote> element.
          - -

          ordered list

          - -
            -
          1. list item 1
          2. -
          3. list item 1 -
              -
            1. list item 2
            2. -
            3. list item 2 -
                -
              1. list item 3
              2. -
              3. list item 3
              4. -
              -
            4. -
            5. list item 2
            6. -
            7. list item 2
            8. -
            -
          4. -
          5. list item 1
          6. -
          7. list item 1
          8. -
          +

          blockquote

          -

          unordered list

          +
          +

          Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

          +
          -
            -
          • list item 1
          • -
          • list item 1 -
              -
            • list item 2
            • -
            • list item 2 -
                -
              • list item 3
              • -
              • list item 3
              • -
              -
            • -
            • list item 2
            • -
            • list item 2
            • -
            +
            Even better philosophical quote marked up with just a <blockquote> element.
            + +

            ordered list

            + +
              +
            1. list item 1
            2. +
            3. list item 1 +
                +
              1. list item 2
              2. +
              3. list item 2 +
                  +
                1. list item 3
                2. +
                3. list item 3
                4. +
              4. -
              5. list item 1
              6. -
              7. list item 1
              8. +
              9. list item 2
              10. +
              11. list item 2
              12. +
              +
            4. +
            5. list item 1
            6. +
            7. list item 1
            8. +
            + +

            unordered list

            + +
              +
            • list item 1
            • +
            • list item 1 +
                +
              • list item 2
              • +
              • list item 2 +
                  +
                • list item 3
                • +
                • list item 3
                • +
                +
              • +
              • list item 2
              • +
              • list item 2
              +
            • +
            • list item 1
            • +
            • list item 1
            • +
            + +

            description list

            + +
            +
            Description name
            +
            Description value
            +
            Description name
            +
            Description value
            +
            Description value
            +
            Description name
            +
            Description name
            +
            Description value
            +
            + +

            figure

            + +
            + +
            Figcaption content
            +
            + +

            Tabular data

            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
            Jimi Hendrix - albums
            AlbumYearPrice
            AlbumYearPrice
            Are You Experienced1967$10.00
            Axis: Bold as Love1967$12.00
            Electric Ladyland1968$10.00
            Band of Gypsys1970$12.00
            + +

            Forms

            + +
            +
            + Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. +

            + +

            +

            +

            +

            +

            +

            + +

            +

            + +

            +

            +

            +

            + +

            +

            +
            + +
            + Inputs as siblings of labels +

            + + +

            +

            +

            +

            +

            +

            +

            + + +

            +

            + + +

            -

            description list

            - -
            -
            Description name
            -
            Description value
            -
            Description name
            -
            Description value
            -
            Description value
            -
            Description name
            -
            Description name
            -
            Description value
            -
            - -

            figure

            - -
            - -
            Figcaption content
            -
            - -

            Tabular data

            - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            Jimi Hendrix - albums
            AlbumYearPrice
            AlbumYearPrice
            Are You Experienced1967$10.00
            Axis: Bold as Love1967$12.00
            Electric Ladyland1968$10.00
            Band of Gypsys1970$12.00
            - -

            Forms

            - - -
            - Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. -

            -

            -

            -

            -

            -

            -

            - -

            -

            -

            -

            - -

            -

            -
            - -
            - Inputs as siblings of labels -

            -

            -

            -

            -

            -

            -

            -

            - -

            -

            -

            -

            - -

            -

            -
            - -
            - Clickable inputs and buttons -

            -

            -

            -

            -

            - - -

            -

            -

            -

            -
            - -
            - box-sizing tests -
            -
            -
            -
            -
            - -
            -
            -
            -
            -
            -
            -
            -
            - -
            -
            - -
            -
            - -
            -
            -
            -
            - -
            -
            -
            -
            - - - +

            +

            +

            +

            + +

            +

            +
            + +
            + Clickable inputs and buttons +

            +

            +

            +

            +

            + + +

            +

            +

            +

            +
            + +
            + box-sizing tests +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
            +
            +
            +
            + +
            +
            + +
            +
            + +
            +
            +
            +
            + +
            +
            +
            +
            + + From 265dd64de396ced78f65e24531f385a519ef7627 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 11 Apr 2014 12:27:03 -0700 Subject: [PATCH 44/77] dependency update; for sassc compatibility update _sizing.scss to the new _rem.scss, by the same author; also remove all compass-isms so this can be compiled by sassc --- _normalize.scss | 45 +++++++++--------- _rem.scss | 123 +++++++++++++++++++++++++++++++++++++++++++++++ _sizing.scss | 124 ------------------------------------------------ 3 files changed, 145 insertions(+), 147 deletions(-) create mode 100644 _rem.scss delete mode 100644 _sizing.scss diff --git a/_normalize.scss b/_normalize.scss index 3f2589bb5..91ba1b64b 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -3,13 +3,12 @@ /* ============================================================================= Mixins ========================================================================== */ -$base-font-size: 15px !default; // otherwise inherited from _sizing +$base-font-size: 15px !default; // otherwise inherited from _rem $text-color: #333 !default; $background-color: #ccc !default; $lh: 1.2rem !default; // line-height unit, in rem -@import "sizing"; -@import "compass"; +@import "rem"; %italic { font-style: italic; @@ -59,7 +58,7 @@ audio:not([controls]) { * user zoom. */ html { - font-size: percentage( $base-font-size / $baseFontSize ); /* 1 */ + font-size: percentage( $base-font-size / $browser-default-font-size ); /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ font-family: sans-serif; @@ -136,37 +135,37 @@ a { h1 { @include rem( font-size, 1.5*$lh ); @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0 1.5*$lh ); + @include rem( margin, 1*$lh 0px 0.5*$lh ); } h2 { @include rem( font-size, 5/4*$lh ); @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0 1.5*$lh ); + @include rem( margin, 1*$lh 0px 0.5*$lh ); } h3 { @include rem( font-size, 1.16667rem ); @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0 1.5*$lh ); + @include rem( margin, 1*$lh 0px 1.5*$lh ); } h4 { @include rem( font-size, 5/6*$lh ); @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0 1.5*$lh ); + @include rem( margin, 1*$lh 0px 1.5*$lh ); } h5 { @include rem( font-size, 25/36*$lh ); @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0 1.5*$lh ); + @include rem( margin, 1*$lh 0px 1.5*$lh ); } h6 { @include rem( font-size, 24/15*$lh ); @include rem( line-height, 1.5*$lh ); - @include rem( margin, $lh 0 1.5*$lh); + @include rem( margin, $lh 0px 1.5*$lh); } /* @@ -177,10 +176,10 @@ abbr[title] { border-bottom: 1px dotted; } blockquote { - @include rem( margin, $lh 0 ); - @include rem( padding, 0 0 0 .5*$lh); - border: 0; - @include rem( border-left, .5*$lh solid $background-color ); + @include rem( margin, $lh 0px ); + @include rem( padding, 0px 0px 0px .5*$lh); + border: 0 solid $background-color; + @include rem( border-left-width, .5*$lh ); } /** @@ -207,12 +206,12 @@ mark { */ p, pre { - @include rem( margin, $lh 0); + @include rem( margin, $lh 0px ); } p { - @include hyphens(auto); - @include word-break(normal); + hyphens: auto; + word-break: normal; } /* @@ -222,7 +221,7 @@ p { code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; - @include rem( margin, $lh 0); + @include rem( margin, $lh 0px ); } em { @@ -299,7 +298,7 @@ sub { */ dl, menu, ol, ul { - @include rem( margin, $lh 0 ); + @include rem( margin, $lh 0px ); } dt { @@ -307,7 +306,7 @@ dt { } dd { - @include rem( margin, 0 0 $lh $lh ); + @include rem( margin, 0px 0px $lh $lh ); } /* @@ -317,7 +316,7 @@ dd { menu, ol, ul { list-style-position: outside; - @include rem( padding, 0 0 0 $lh ); + @include rem( padding, 0px 0px 0px $lh ); } ol { @@ -341,7 +340,7 @@ ul { } li { - @include rem( margin, $lh 0 ); + @include rem( margin, $lh 0px ); } nav { @@ -402,7 +401,7 @@ figure, form { */ fieldset { border: 1px solid #c0c0c0; - margin: 0 2px; + margin: 0px 2px; padding: 0.35em 0.625em 0.75em; } diff --git a/_rem.scss b/_rem.scss new file mode 100644 index 000000000..fdb67417d --- /dev/null +++ b/_rem.scss @@ -0,0 +1,123 @@ +// from https://github.com/ry5n/rem, commit +// 281dea4f468c531542d41254abf032f039538ef8 + +// @private Default font-size for all browsers +$browser-default-font-size: 16px; + +// Base font size in pixels, if not already defined. +// Should be the same as the font-size of the html element. +$base-font-size: 16px !default; + +// Whether to output fallback values in px when outputting rems. +$rem-with-px-fallback: true !default; + +// Convert any CSS or value to any other. +@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) { + $from-unit: unit($length); + + // Optimize for cases where from and to may accidentally be the same. + @if $from-unit == $to-unit { @return $length; } + @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; } + @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; } + + // Fixed ratios + // https://developer.mozilla.org/en/CSS/length + // http://dev.w3.org/csswg/css3-values/#absolute-lengths + $px-per-in: 96px / 1in; + $px-per-mm: 96px / 25.4mm; + $px-per-cm: 96px / 2.54cm; + $px-per-pt: 4px / 3pt; + $px-per-pc: 16px / 1pc; + + // Variables to store actual convesion ratios + $px-per-from-unit: 1; + $px-per-to-unit: 1; + + @if $from-unit != 'px' { + @if $from-unit == 'em' { $px-per-from-unit: $from-context / 1em } + @else if $from-unit == 'rem' { $px-per-from-unit: $base-font-size / 1rem } + @else if $from-unit == '%' { $px-per-from-unit: $from-context / 100% } + @else if $from-unit == 'ex' { $px-per-from-unit: $from-context / 2ex } + @else if $from-unit == 'in' { $px-per-from-unit: $px-per-in } + @else if $from-unit == 'mm' { $px-per-from-unit: $px-per-mm } + @else if $from-unit == 'cm' { $px-per-from-unit: $px-per-cm } + @else if $from-unit == 'pt' { $px-per-from-unit: $px-per-pt } + @else if $from-unit == 'pc' { $px-per-from-unit: $px-per-pc } + @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { + @warn "#{$from-unit} units can't be reliably converted; Returning original value."; + @return $length; + } + @else { + @warn "#{$from-unit} is an unknown length unit. Returning original value."; + @return $length; + } + } + + @if $to-unit != 'px' { + @if $to-unit == 'em' { $px-per-to-unit: $to-context / 1em } + @else if $to-unit == 'rem' { $px-per-to-unit: $base-font-size / 1rem } + @else if $to-unit == '%' { $px-per-to-unit: $to-context / 100% } + @else if $to-unit == 'ex' { $px-per-to-unit: $to-context / 2ex } + @else if $to-unit == 'in' { $px-per-to-unit: $px-per-in } + @else if $to-unit == 'mm' { $px-per-to-unit: $px-per-mm } + @else if $to-unit == 'cm' { $px-per-to-unit: $px-per-cm } + @else if $to-unit == 'pt' { $px-per-to-unit: $px-per-pt } + @else if $to-unit == 'pc' { $px-per-to-unit: $px-per-px } + @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { + @warn "#{$to-unit} units can't be reliably converted; Returning original value."; + @return $length; + } + @else { + @warn "#{$to-unit} is an unknown length unit. Returning original value."; + @return $length; + } + } + @return $length * $px-per-from-unit / $px-per-to-unit; +} + +// For the given property, use rem units with px as a fallback value for older +// browsers. +// +// $property - The css property name. +// $values - The value (or space-separated list of values) for the property. +// $use-px-fallback - Boolean, default: true; whether to use pixel fallback values +// +@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { + // Create a couple of empty lists as output buffers. + $px-values: (); + $rem-values: (); + + // Ensure $values is a list. + @if type-of($values) != 'list' { + $values: join((), $values); + } + + // Loop through the $values list + @each $value in $values { + // For each property value, if it's in rem or px, derive both rem and + // px values for it and add those to the end of the appropriate buffer. + // Ensure all pixel values are rounded to the nearest pixel. + @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) { + @if unit($value) == px { + $px-values: join($px-values, round($value)); + $rem-values: join($rem-values, convert-length($value, rem)); + } + @else { + $px-values: join($px-values, round(convert-length($value, px))); + $rem-values: join($rem-values, $value); + } + } + @else { + $px-values: join($px-values, $value); + $rem-values: join($rem-values, $value); + } + } + + // Use pixel fallback for browsers that don't understand rem units. + @if $use-px-fallback { + #{$property}: $px-values; + } + + // Use rem values for everyone else (overrides pixel values). + #{$property}: $rem-values; +} diff --git a/_sizing.scss b/_sizing.scss deleted file mode 100644 index 4d84aa3ac..000000000 --- a/_sizing.scss +++ /dev/null @@ -1,124 +0,0 @@ -// Rem Font Sizing ---------------------------------------------------- -// https://github.com/ry5n/rem - -// Base font size in pixels, if not already defined. -// Should be the same as the font-size of the html element. - - -// Default font size in pixels if not overridden. -// present in most, if not all, browsers. -$baseFontSize: 16px; - -$base-font-size: $baseFontSize !default; -$rem-with-px-fallback: true !default; - -// @private Number of pixels in 1rem. -// For px -> rem, divide by this ratio; for the other way, multiply. -$px-per-rem: $base-font-size / 1rem; - -// Return pixel values as rem -@function px-to-rem($px-value) { - @return $px-value / $px-per-rem; -} - -// Return rem values as px -@function rem-to-px($rem-value) { - @return $rem-value * $px-per-rem; -} - -// For the given property, use rem units with px as a fallback value for older -// browsers. -// -// $property - The css property name. -// $values - The value (or space-separated list of values) for the property. -// $use-px-fallback - Boolean, default: true; whether to use pixel fallback values -// -@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { - // Create a couple of empty lists as output buffers. - $px-values: (); - $rem-values: (); - - // Ensure $values is a list. - @if type-of($values) != "list" { - $values: join((), $values); - } - - // Loop through the $values list - @each $value in $values { - // For each property value, if it's in rem or px, derive both rem and - // px values for it and add those to the end of the appropriate buffer. - @if(type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem)) { - @if unit($value) == px { - $px-values: join($px-values, $value); - $rem-values: join($rem-values, px-to-rem($value)); - } - @else { - $px-values: join($px-values, rem-to-px($value)); - $rem-values: join($rem-values, $value); - } - } - @else { - $px-values: join($px-values, $value); - $rem-values: join($rem-values, $value); - } - } - - // Use pixel fallback for browsers that don't understand rem units. - @if $use-px-fallback { - #{$property}: $px-values; - } - - // Use rem values for everyone else (overrides pixel values). - #{$property}: $rem-values; -} - -// Em Font Sizing ----------------------------------------------------- - -@function em($target, $context: $baseline-px) { - @if $target == 0 { @return 0 } - @return $target / $context + 0em; -} - -// Scaling ------------------------------------------------------------ - -// https://gist.github.com/2237465 -// See http://mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/ - -//Convert PX units to EMs. -//Ex: margin-right: pem(16); - -@function pem($pxval, $base: $baseFontSize) { - @return #{$pxval / $base}em; -} - -// Used to convert PX to EMs for multiple properties or values or both. -//$base is an optional measurement that allows making measurements relative to the parent font size rather than the current. Also accepts a list of lists (instead a list of values) for properties that accept multiple lists of values. Only numbers of converted; everything else is passed through. - -//Examples: - -//@include scale(line-height, 30) -//@include scale(line-height, 30, 16) -//@include scale(width height, 125); -//@include scale(padding, 0 25, 16); -//@include scale(text-shadow, (#0d6e28 1 1) (#777 0 0 2), 16); -//@include scale(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966), 16); -// -@mixin scale($props, $sizes, $base: $baseFontSize) { - $values: (); - $sublists: false; - @each $s in $sizes { - /* unwrap lists for values that have multiple list of values such as text-shadow */ - @if type-of($s) == list { - $sublists: true; - $vv: (); - @each $ss in $s { - $vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss)); - } - $values: append($values, join((), $vv)); - } @else { - $values: append($values, if(type-of($s) == number, #{$s / $base}em, $s)); - } - } - $value: join((), $values, if($sublists, comma, space)); - @each $prop in $props { #{$prop}: $value } -} From cb3b9cb8046ebcc1b663228fb046422e277cfe36 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 11 Apr 2014 15:32:31 -0700 Subject: [PATCH 45/77] move/add files around restructure project files; replaced Adobe PDF icon with a liberally-licensed SVG version --- _normalize.scss | 4 +- assets/_rem.scss | 123 +++++++++++++++++++++++++++++++++++++++ assets/file-icon-pdf.svg | 6 ++ 3 files changed, 131 insertions(+), 2 deletions(-) create mode 100644 assets/_rem.scss create mode 100644 assets/file-icon-pdf.svg diff --git a/_normalize.scss b/_normalize.scss index 91ba1b64b..b64a91653 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -8,7 +8,7 @@ $text-color: #333 !default; $background-color: #ccc !default; $lh: 1.2rem !default; // line-height unit, in rem -@import "rem"; +@import "assets/_rem.scss"; %italic { font-style: italic; @@ -111,7 +111,7 @@ a { @include rem( width, 1.06666667rem ); padding: 0; margin: 0; - background-image: url('data:png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA5LzExLzA24EiMeQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAATOSURBVFiF5ZddbJNVGMd/b/u+sG5dW8d0H+4L2UcGKUOjUBkD0QsVCSHGCSZEyIzGi92RyI3gBQYuIF440USYCULMdMEAGhMCKJZsZJAY2AfsI0Sy4bplG9LOvu3bt32PF9C69Wudwyv/ydNzznM+/v/znHOevIX/O6QMx1k8Ho8qhEAIARArASRJQpKkWXXDMNB1/afy8vKtgJ5SwOmldSJV50Lw9KWz+P1+rFarr6WlpfLQoUMTycbJQWGQXVg4y7nkmToApn67EWsHPGOonvGMyNWxMQzDwOv1Ultba2tubr4NLEsmQjpetkIskkyznNvvdANw/9YAP29r4vXuDgB+P3WWrt0fxvoB2ipWJggICYOGSz8wPj6Oy+UCYGRkZLqsrGwJccdh0oRBGDHLAE5WOJm+O0pl0w4Azm9v4gnXs5S/sSXWf7LCmTA3jEATRuxORFFaWpo7NDR0FZBnCQgaBroQswxg8ZPF5JQUE/T5ALh75SpD7aexlBQDsONODzvu9CTM1YUgaBgPwhsnorKyclV/f/9nQCzksiYMFgsjIYyNHefo/eoE148dZ/W+PejCoMD1HAPtpwH4cdsuAPQkc6MRUBSF9vZ2RkdHURSFqqoqXC7XuwMDAxdqampOAcIUEoJwnAF8XlqL+6MDsfZ7wzeZ6LvFze++B2C4s4vhzq6EuWEhCAmBJEnk5uaSnZ1NTk4Ouq5z7do1WltbTXa7fT+gAEj7Cp8SeWYlYRczUfL8aib6+tEeHsdcuBfReafrF7KyslBVFU3TCIVCBAIBNE0jPz+f5cuXPw5MyiHDYMzQ0i445r6cEfFMRI/A4XDE2pFIhGAwiNlsBrABk/IX2p9lgCXdYpqmVbjd7nPwIAPGXy5JkgisqUeqqkTe/Bq2pl3IspyQHRVFQVGUqF+O/kwS9zTiEQ6HcwoKCtLudkqAZdMmzMXFWPPyZhIlTdVRyF6vN5CO/CH8Vqs1rQBfbi7i/EWsBz/GYrHE/PFlvABT4nKpSdKZcDrx9fZhctjnHDsTCxZgMpmQJIlFDfVoSGStdM4p4D+JQASJIBKT33w7LwGZfg9Ue73egWSiougsqcLssGEAa65cQrbbk96BaJmVlVUDDD6SCNw+eJgAEivaTuC/P03fB3szjkDa55dqtzPbutfL4JGjLGt+H3udkzXnzuB+eSsTro2s2LsHgHvdfSh2G0Ub1pFX51y4gJn1wSNHEQ47RVs20XPgMOPuDny+aXw9N/G8uROBRHZZKUUb6rne8iUbW49Q8sK6f9bKkL/a7/fH7kBUwL3uXs64XgKgsGEthevrKVq/lvw6J4scdjyXO7n1dRsjv3bgGx5BsdtovHiWglUrkWW5BhjMNADVqqoKVVVFIBAQ9z1j4kLzbvEJNtHW8IoIBoMx0zQtZqFQSIRCIaHrutB1Xfw1OSXC4bCIRCICqIZ5HoEkSUzc6OVM49toXh/Ybbx4rCXl8cTffstjjoQxGQswmR48mPbGnXiH/wBg89FPcSwtTxCaSkB8OS8B0Uk+7zQaEq8e3k/dzrdSvo65iGNjMuSv1nU9IRGlIkxXn+GrAQb/dR5I5puLNBkWnIjm8j0qAarZbN4GlM6bITlGABXm8ecUWAJkPyIBKjAFBP4GIMQcOK2oAoUAAAAASUVORK5CYII='); + background-image: url('./assets/file-icon-pdf.svg'); background-position: 0 0; background-repeat: no-repeat; background-size: 100%; diff --git a/assets/_rem.scss b/assets/_rem.scss new file mode 100644 index 000000000..fdb67417d --- /dev/null +++ b/assets/_rem.scss @@ -0,0 +1,123 @@ +// from https://github.com/ry5n/rem, commit +// 281dea4f468c531542d41254abf032f039538ef8 + +// @private Default font-size for all browsers +$browser-default-font-size: 16px; + +// Base font size in pixels, if not already defined. +// Should be the same as the font-size of the html element. +$base-font-size: 16px !default; + +// Whether to output fallback values in px when outputting rems. +$rem-with-px-fallback: true !default; + +// Convert any CSS or value to any other. +@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) { + $from-unit: unit($length); + + // Optimize for cases where from and to may accidentally be the same. + @if $from-unit == $to-unit { @return $length; } + @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; } + @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; } + + // Fixed ratios + // https://developer.mozilla.org/en/CSS/length + // http://dev.w3.org/csswg/css3-values/#absolute-lengths + $px-per-in: 96px / 1in; + $px-per-mm: 96px / 25.4mm; + $px-per-cm: 96px / 2.54cm; + $px-per-pt: 4px / 3pt; + $px-per-pc: 16px / 1pc; + + // Variables to store actual convesion ratios + $px-per-from-unit: 1; + $px-per-to-unit: 1; + + @if $from-unit != 'px' { + @if $from-unit == 'em' { $px-per-from-unit: $from-context / 1em } + @else if $from-unit == 'rem' { $px-per-from-unit: $base-font-size / 1rem } + @else if $from-unit == '%' { $px-per-from-unit: $from-context / 100% } + @else if $from-unit == 'ex' { $px-per-from-unit: $from-context / 2ex } + @else if $from-unit == 'in' { $px-per-from-unit: $px-per-in } + @else if $from-unit == 'mm' { $px-per-from-unit: $px-per-mm } + @else if $from-unit == 'cm' { $px-per-from-unit: $px-per-cm } + @else if $from-unit == 'pt' { $px-per-from-unit: $px-per-pt } + @else if $from-unit == 'pc' { $px-per-from-unit: $px-per-pc } + @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { + @warn "#{$from-unit} units can't be reliably converted; Returning original value."; + @return $length; + } + @else { + @warn "#{$from-unit} is an unknown length unit. Returning original value."; + @return $length; + } + } + + @if $to-unit != 'px' { + @if $to-unit == 'em' { $px-per-to-unit: $to-context / 1em } + @else if $to-unit == 'rem' { $px-per-to-unit: $base-font-size / 1rem } + @else if $to-unit == '%' { $px-per-to-unit: $to-context / 100% } + @else if $to-unit == 'ex' { $px-per-to-unit: $to-context / 2ex } + @else if $to-unit == 'in' { $px-per-to-unit: $px-per-in } + @else if $to-unit == 'mm' { $px-per-to-unit: $px-per-mm } + @else if $to-unit == 'cm' { $px-per-to-unit: $px-per-cm } + @else if $to-unit == 'pt' { $px-per-to-unit: $px-per-pt } + @else if $to-unit == 'pc' { $px-per-to-unit: $px-per-px } + @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { + @warn "#{$to-unit} units can't be reliably converted; Returning original value."; + @return $length; + } + @else { + @warn "#{$to-unit} is an unknown length unit. Returning original value."; + @return $length; + } + } + @return $length * $px-per-from-unit / $px-per-to-unit; +} + +// For the given property, use rem units with px as a fallback value for older +// browsers. +// +// $property - The css property name. +// $values - The value (or space-separated list of values) for the property. +// $use-px-fallback - Boolean, default: true; whether to use pixel fallback values +// +@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { + // Create a couple of empty lists as output buffers. + $px-values: (); + $rem-values: (); + + // Ensure $values is a list. + @if type-of($values) != 'list' { + $values: join((), $values); + } + + // Loop through the $values list + @each $value in $values { + // For each property value, if it's in rem or px, derive both rem and + // px values for it and add those to the end of the appropriate buffer. + // Ensure all pixel values are rounded to the nearest pixel. + @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) { + @if unit($value) == px { + $px-values: join($px-values, round($value)); + $rem-values: join($rem-values, convert-length($value, rem)); + } + @else { + $px-values: join($px-values, round(convert-length($value, px))); + $rem-values: join($rem-values, $value); + } + } + @else { + $px-values: join($px-values, $value); + $rem-values: join($rem-values, $value); + } + } + + // Use pixel fallback for browsers that don't understand rem units. + @if $use-px-fallback { + #{$property}: $px-values; + } + + // Use rem values for everyone else (overrides pixel values). + #{$property}: $rem-values; +} diff --git a/assets/file-icon-pdf.svg b/assets/file-icon-pdf.svg new file mode 100644 index 000000000..3f974eee0 --- /dev/null +++ b/assets/file-icon-pdf.svg @@ -0,0 +1,6 @@ + + + + + + From b7b68410c9827bbfb969d97a019960ad53e609dd Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 11 Apr 2014 15:54:43 -0700 Subject: [PATCH 46/77] I moved this to assets/ --- _rem.scss | 123 ------------------------------------------------------ 1 file changed, 123 deletions(-) delete mode 100644 _rem.scss diff --git a/_rem.scss b/_rem.scss deleted file mode 100644 index fdb67417d..000000000 --- a/_rem.scss +++ /dev/null @@ -1,123 +0,0 @@ -// from https://github.com/ry5n/rem, commit -// 281dea4f468c531542d41254abf032f039538ef8 - -// @private Default font-size for all browsers -$browser-default-font-size: 16px; - -// Base font size in pixels, if not already defined. -// Should be the same as the font-size of the html element. -$base-font-size: 16px !default; - -// Whether to output fallback values in px when outputting rems. -$rem-with-px-fallback: true !default; - -// Convert any CSS or value to any other. -@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) { - $from-unit: unit($length); - - // Optimize for cases where from and to may accidentally be the same. - @if $from-unit == $to-unit { @return $length; } - @if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; } - @if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; } - - // Fixed ratios - // https://developer.mozilla.org/en/CSS/length - // http://dev.w3.org/csswg/css3-values/#absolute-lengths - $px-per-in: 96px / 1in; - $px-per-mm: 96px / 25.4mm; - $px-per-cm: 96px / 2.54cm; - $px-per-pt: 4px / 3pt; - $px-per-pc: 16px / 1pc; - - // Variables to store actual convesion ratios - $px-per-from-unit: 1; - $px-per-to-unit: 1; - - @if $from-unit != 'px' { - @if $from-unit == 'em' { $px-per-from-unit: $from-context / 1em } - @else if $from-unit == 'rem' { $px-per-from-unit: $base-font-size / 1rem } - @else if $from-unit == '%' { $px-per-from-unit: $from-context / 100% } - @else if $from-unit == 'ex' { $px-per-from-unit: $from-context / 2ex } - @else if $from-unit == 'in' { $px-per-from-unit: $px-per-in } - @else if $from-unit == 'mm' { $px-per-from-unit: $px-per-mm } - @else if $from-unit == 'cm' { $px-per-from-unit: $px-per-cm } - @else if $from-unit == 'pt' { $px-per-from-unit: $px-per-pt } - @else if $from-unit == 'pc' { $px-per-from-unit: $px-per-pc } - @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { - @warn "#{$from-unit} units can't be reliably converted; Returning original value."; - @return $length; - } - @else { - @warn "#{$from-unit} is an unknown length unit. Returning original value."; - @return $length; - } - } - - @if $to-unit != 'px' { - @if $to-unit == 'em' { $px-per-to-unit: $to-context / 1em } - @else if $to-unit == 'rem' { $px-per-to-unit: $base-font-size / 1rem } - @else if $to-unit == '%' { $px-per-to-unit: $to-context / 100% } - @else if $to-unit == 'ex' { $px-per-to-unit: $to-context / 2ex } - @else if $to-unit == 'in' { $px-per-to-unit: $px-per-in } - @else if $to-unit == 'mm' { $px-per-to-unit: $px-per-mm } - @else if $to-unit == 'cm' { $px-per-to-unit: $px-per-cm } - @else if $to-unit == 'pt' { $px-per-to-unit: $px-per-pt } - @else if $to-unit == 'pc' { $px-per-to-unit: $px-per-px } - @else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' { - @warn "#{$to-unit} units can't be reliably converted; Returning original value."; - @return $length; - } - @else { - @warn "#{$to-unit} is an unknown length unit. Returning original value."; - @return $length; - } - } - @return $length * $px-per-from-unit / $px-per-to-unit; -} - -// For the given property, use rem units with px as a fallback value for older -// browsers. -// -// $property - The css property name. -// $values - The value (or space-separated list of values) for the property. -// $use-px-fallback - Boolean, default: true; whether to use pixel fallback values -// -@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) { - // Create a couple of empty lists as output buffers. - $px-values: (); - $rem-values: (); - - // Ensure $values is a list. - @if type-of($values) != 'list' { - $values: join((), $values); - } - - // Loop through the $values list - @each $value in $values { - // For each property value, if it's in rem or px, derive both rem and - // px values for it and add those to the end of the appropriate buffer. - // Ensure all pixel values are rounded to the nearest pixel. - @if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) { - @if unit($value) == px { - $px-values: join($px-values, round($value)); - $rem-values: join($rem-values, convert-length($value, rem)); - } - @else { - $px-values: join($px-values, round(convert-length($value, px))); - $rem-values: join($rem-values, $value); - } - } - @else { - $px-values: join($px-values, $value); - $rem-values: join($rem-values, $value); - } - } - - // Use pixel fallback for browsers that don't understand rem units. - @if $use-px-fallback { - #{$property}: $px-values; - } - - // Use rem values for everyone else (overrides pixel values). - #{$property}: $rem-values; -} From 76a403b408269dc121ce1e83219c0b436bed003b Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 11 Apr 2014 15:56:24 -0700 Subject: [PATCH 47/77] move to a Makefile process Currently implemented: clean; compile SCSS into CSS, replace the single SVG with a data URI --- Makefile | 17 +++++++++++++++++ _normalize.scss | 4 ++-- 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 Makefile diff --git a/Makefile b/Makefile new file mode 100644 index 000000000..f1428fbef --- /dev/null +++ b/Makefile @@ -0,0 +1,17 @@ +target = normalize.css +deps = assets/_rem.scss +main_scss = _normalize.scss +svg-raw = assets/file-icon-pdf.svg + +prereqs = $(main_scss) $(deps) $(svg-raw) +svg-datauri := $(shell svgo -i $(svg-raw) --datauri=base64 -o -) + +$(target): $(prereqs) + @echo "running sassc" + @sassc -t nested -o $(target) $(main_scss) + @echo "running sed" + @sed -i '' "s#$(subst .,\.,$(svg-raw))#$(svg-datauri)#" $(target) + +clean: + @echo "deleting" + @-rm -f $(target) diff --git a/_normalize.scss b/_normalize.scss index b64a91653..ea732e26a 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -99,7 +99,7 @@ a { &:active, &:hover { outline: 0; } - &[href$=pdf] { // used in accordance with terms at http://www.adobe.com/misc/linking.html + &[href$=pdf] { /*! SVG from http://jozef89.deviantart.com/art/Free-document-icons-445521778 */ position: relative; @include rem( padding-right, 1.06666667rem ); &:after { @@ -111,7 +111,7 @@ a { @include rem( width, 1.06666667rem ); padding: 0; margin: 0; - background-image: url('./assets/file-icon-pdf.svg'); + background-image: url('assets/file-icon-pdf.svg'); background-position: 0 0; background-repeat: no-repeat; background-size: 100%; From 8b58a90ccdffe75c8ec3a95348c9268f7da12f51 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 11 Apr 2014 16:10:27 -0700 Subject: [PATCH 48/77] version bump to 1.2 w/ README/comment updates --- Makefile | 7 +++++++ README.md | 21 ++++++++++++++++++--- _normalize.scss | 2 +- 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index f1428fbef..cd9bdff14 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,14 @@ +# v1.2.0 _normalize.scss +# TODO: +# iterate over a list of SVGs to replace with data URIs +# possible example: +# http://www.snip2code.com/Snippet/28122/Replaced-Grunt-Gulp-with-a-Makefile +# portable watch capability target = normalize.css deps = assets/_rem.scss main_scss = _normalize.scss svg-raw = assets/file-icon-pdf.svg +# TODO introduce more filetype SVGs, iterate over them for the `sed` process prereqs = $(main_scss) $(deps) $(svg-raw) svg-datauri := $(shell svgo -i $(svg-raw) --datauri=base64 -o -) diff --git a/README.md b/README.md index 6bd2abfae..eead9992a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# `_normalize.scss` v1.1.0 +# `_normalize.scss` v1.2.0 `_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from @@ -21,7 +21,7 @@ the styles that need normalizing. I intend `_normalize.scss` to be used as a declaration of many default styles that I use in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's -stylesheet, and compiled in using [Compass][]. A standalone version is +stylesheet, and compiled in using [SASSC][]. A standalone version is generated for sites where the entirety of the source markup is out of my hands. The project also requires use of Compass, but is not making much use of it yet. @@ -30,6 +30,19 @@ directory to be used ln ./git_hooks/post-merge ./.git/hooks/post-merge +## Dependencies: + +* A [make][] utility, currently tested on Mac OS X +* [SASSC][] +* [SVGO][], a NodeJS utility used to optimize SVG files + +## For the future + +This file is becoming less of a Normalize styles, and more of a "framework", as +my opinions about the margins/padding and base appearance of some links are +creeping in. A future re-sync with Necolas' project is planned, but will be +quite selective. + ### From Nicholas Gallagher (necolas): `_normalize.scss` is intended to be used as an alternative to CSS resets. @@ -65,4 +78,6 @@ Gallagher][] and [Jonathan Neal][]. [Jonathan Neal]: http://github.com/jonathantneal [Nicolas Gallagher]: http://github.com/necolas [issue guidelines]: https://github.com/necolas/issue-guidelines -[Compass]: http://compass-style.org +[SASSC]: https://github.com/hcatlin/sassc +[make]: http://en.wikipedia.org/wiki/Make_(software) +[SVGO]: https://github.com/svg/svgo diff --git a/_normalize.scss b/_normalize.scss index ea732e26a..92f9ef9b8 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,4 +1,4 @@ -/*! based on normalize.css v1.0.0 | MIT License | git.io/normalize */ +/*! v1.2.0, based on normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ============================================================================= Mixins From ef83f2dc454cdb64bce880567f6b0ff4a9216aae Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Fri, 11 Apr 2014 16:15:18 -0700 Subject: [PATCH 49/77] Doc bugfix caught another reference to Compass, and delete the .html version of the README --- README.html | 29 ----------------------------- README.md | 1 - 2 files changed, 30 deletions(-) delete mode 100644 README.html diff --git a/README.html b/README.html deleted file mode 100644 index 2b57e5a88..000000000 --- a/README.html +++ /dev/null @@ -1,29 +0,0 @@ -

            _normalize.scss v1.0.1

            -

            _normalize.scss is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's Normalize.css project. It is the result of researching the differences between default browser styles in order to precisely target only the styles that need normalizing.

            -

            Check out the demo

            -

            What does it do?

            -
              -
            • Preserves useful defaults, unlike many CSS resets.
            • -
            • Normalizes styles for a wide range of elements.
            • -
            • Corrects bugs and common browser inconsistencies.
            • -
            • Improves usability with subtle improvements.
            • -
            • Explains what code does using detailed comments.
            • -
            -

            How to use it

            -

            I intend _normalize.scss to be used as a declaration of many default styles that I use in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an @import into a site's stylesheet, and compiled in using Compass. A standalone version is generated for sites where the entirety of the source markup is out of my hands.

            -

            From Nicholas Gallagher (necolas):

            -

            Normalize.css is intended to be used as an alternative to CSS resets.

            -

            It's suggested that you read the normalize.css file and consider customising it to meet your needs. Alternatively, include the file in your project and override the defaults later in your CSS.

            -

            Browser support

            -

            I am tracking the v1 series, because I want to keep some old browser support around, these old browsers include:

            -
              -
            • Google Chrome
            • -
            • Mozilla Firefox 3+ (the Long-Term Support release of Firefox is based on v3)
            • -
            • Apple Safari 4+ (because some people haven't upgraded their iOS version)
            • -
            • Opera 10+
            • -
            • Internet Explorer 6+ (better in here than in my main CSS files)
            • -
            -

            Contribute

            -

            Please contribute to the upstream project: Please read the issue guidelines. Issue reports to me are welcome, but either address a matter of my personal taste or site standards, or ultimately rely on the work of the upstream maintainers. Only one of those is a "public" problem (hint, it's upstream).

            -

            Acknowledgements

            -

            _normalize.css is derived from Normalize.css, which is a project by Nicolas Gallagher and Jonathan Neal.

            diff --git a/README.md b/README.md index eead9992a..26fc0ce2a 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,6 @@ that I use in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's stylesheet, and compiled in using [SASSC][]. A standalone version is generated for sites where the entirety of the source markup is out of my hands. -The project also requires use of Compass, but is not making much use of it yet. The project comes with a git hook, which has to be symlinked into the .git directory to be used From d11fd23d86d0f739a576ed65dc04d0978a417335 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 4 Sep 2014 23:22:20 -0700 Subject: [PATCH 50/77] not relying on Compass anymore for this project --- git_hooks/post-merge | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/git_hooks/post-merge b/git_hooks/post-merge index 6474189e3..22c55babe 100755 --- a/git_hooks/post-merge +++ b/git_hooks/post-merge @@ -4,10 +4,10 @@ if [ $(git diff HEAD@{1} HEAD --name-only | grep -E '_normalize.scss' -c) -ne 0 ]; then echo "_normalize.scss changed, compiling" if type "sass" > /dev/null 2>&1; then - sass --scss --compass -lC ./_normalize.scss > ./normalize.css; + sass --scss -lC ./_normalize.scss > ./normalize.css; else cat $theme_path/style.scss | ssh demo \ - "sass --scss --compass --no-cache --style compressed" \ + "sass --scss --no-cache --style compressed" \ > ./normalize.css fi fi From dda02bc4b92a662f2685780eb00a26ff09fa132e Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 4 Sep 2014 23:23:49 -0700 Subject: [PATCH 51/77] port over all the rule changes in normalize.css up to v3 --- _normalize.scss | 150 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 106 insertions(+), 44 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index 92f9ef9b8..f9e18b3d7 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -10,10 +10,6 @@ $lh: 1.2rem !default; // line-height unit, in rem @import "assets/_rem.scss"; -%italic { - font-style: italic; -} - /* ========================================================================== HTML5 display definitions ========================================================================== */ @@ -21,16 +17,33 @@ $lh: 1.2rem !default; // line-height unit, in rem /* * Corrects `block` display not defined in IE 6/7/8/9 & Firefox 3. */ -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { - display: block; } +article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + main, + nav, +section, +summary { + display: block; +} /* * Corrects `inline-block` display not defined in IE 6/7/8/9 & Firefox 3. */ -audio, canvas, video { +audio, +canvas, +progress, +video { display: inline-block; + vertical-align: baseline; *display: inline; - *zoom: 1; } + *zoom: 1; +} /* * Prevents modern browsers from displaying `audio` without controls. @@ -38,14 +51,16 @@ audio, canvas, video { */ audio:not([controls]) { display: none; - height: 0; } + height: 0; +} /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, Safari 4. * Known issue: no IE 6 support. */ -[hidden] { - display: none; } +[hidden], template { + display: none; +} /* ========================================================================== Base @@ -74,12 +89,22 @@ button, input[type=submit], select { font-family: sans-serif; } +/* + * 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 Firefox, IE 8+, and Opera + * Correct `select` style inheritance in Firefox. + */ +button, select { + text-transform: none; +} + input, textarea { font-family: monospace; } /* - * Addresses margins handled incorrectly in IE 6/7. + * Remove default margin. */ body { margin: 0; @@ -178,7 +203,7 @@ abbr[title] { blockquote { @include rem( margin, $lh 0px ); @include rem( padding, 0px 0px 0px .5*$lh); - border: 0 solid $background-color; + border: 0 solid lighten( $text-color, 20% ); @include rem( border-left-width, .5*$lh ); } @@ -215,35 +240,40 @@ p { } /* - * Corrects font family set oddly in IE 6, Safari 4/5, Chrome. + * 1. Corrects font family set oddly in IE 6, Safari 4/5, Chrome. + * 2. Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; + font-family: monospace, monospace; /* 1 */ + _font-family: 'courier new', monospace; /* 1 */ + @include rem( font-size, 1rem ); /* 2 */ @include rem( margin, $lh 0px ); } em { - @extend %italic; - letter-spacing: .5px; + font-style: italic; + letter-spacing: .5px; /* my own personal preference */ } -cite, i { - @extend %italic; +cite, i, dfn { + font-style: italic; } strong, b { font-weight: 700; } + /* * Improves readability of pre-formatted text in all browsers. + * Contain overflow in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; + overflow: auto; } /* @@ -270,7 +300,7 @@ small { * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ -sub { +sub, sup { font-size: 75%; line-height: 0; position: relative; @@ -278,10 +308,6 @@ sub { } sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; top: -0.5em; } @@ -392,43 +418,51 @@ svg:not(:root) { * + Corrects margin displayed oddly in IE 6/7. */ -figure, form { +form { margin: 0; } +figure { + @include rem( margin, $lh 2*$lh ) +} + + /* * Define consistent border, margin, and padding. */ fieldset { - border: 1px solid #c0c0c0; + border: 1px solid lighten( $text-color, 20% ); margin: 0px 2px; - padding: 0.35em 0.625em 0.75em; + @include rem( padding, 0.35rem 0.625rem 0.75rem ); } /* * 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. + * 4. Allows for IE 8 to line-wrap too. + * @link http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ - display:table; /* 4 */ + display: table; /* 4 */ } /* - * 1. Corrects font size not being inherited in all browsers. + * 1. Corrects font properties not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, Chrome. * 3. Improves appearance and consistency in all browsers. - * 4. Enable line-wrapping in IE8+, from - * http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ + * 4. Correct color not being inherited. + * Known issue: affects color of disabled elements. */ button, input, select, textarea { - font-size: 100%; /* 1 */ + font: inherit; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ + color: inherit; /* 4 */ } /* @@ -470,17 +504,20 @@ input { } } -/* - * A. Re-set default cursor for disabled elements. - */ -button[disabled] { - cursor: default; /* A. */ +button, html input { + /* + * A. Re-set default cursor for disabled elements. + */ + &[disabled] { + cursor: default; /* A. */ + } } input { - &[disabled] { - cursor: default; /* A. */ - } + /* + * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. + */ + line-height: normal; /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. @@ -493,6 +530,16 @@ input { *height: 13px; /* 3 */ *width: 13px; /* 3 */ } + /* + * Fix the cursor style for WebKit'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`. + */ + &[type="number"] { + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { + height: auto; + } + } /* * 1. Addresses `appearance` set to `searchfield` in Safari 5, Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5, Chrome (include `-moz` @@ -515,9 +562,11 @@ input { /* * Removes inner padding and border in Firefox 3+. */ -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; +button, input { + &::-moz-focus-inner { + border: 0; + padding: 0; + } } /* @@ -529,6 +578,15 @@ textarea { vertical-align: top; /* 2 */ } +/* + * 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: 700; +} + /* ========================================================================== Tables ========================================================================== */ @@ -541,6 +599,10 @@ table { border-spacing: 0; } +td, th { + padding: 0; +} + iframe { border: 0; } From 2c9382a33399bf82766639f7ea8361cdc0538792 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 4 Sep 2014 23:24:45 -0700 Subject: [PATCH 52/77] no adhockery with the SVG file, and switch back to ruby-sass --- Makefile | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/Makefile b/Makefile index cd9bdff14..2d33f8c0f 100644 --- a/Makefile +++ b/Makefile @@ -1,24 +1,19 @@ -# v1.2.0 _normalize.scss +# v2.0.0 _normalize.scss # TODO: # iterate over a list of SVGs to replace with data URIs # possible example: # http://www.snip2code.com/Snippet/28122/Replaced-Grunt-Gulp-with-a-Makefile # portable watch capability +CC=sass +CFLAGS=--style nested --no-cache + target = normalize.css -deps = assets/_rem.scss main_scss = _normalize.scss -svg-raw = assets/file-icon-pdf.svg -# TODO introduce more filetype SVGs, iterate over them for the `sed` process - -prereqs = $(main_scss) $(deps) $(svg-raw) -svg-datauri := $(shell svgo -i $(svg-raw) --datauri=base64 -o -) $(target): $(prereqs) - @echo "running sassc" - @sassc -t nested -o $(target) $(main_scss) - @echo "running sed" - @sed -i '' "s#$(subst .,\.,$(svg-raw))#$(svg-datauri)#" $(target) + @echo "Running Sass" + $(CC) $(CFLAGS) $(main_scss) $(target) clean: @echo "deleting" - @-rm -f $(target) + @-rm -f $(target) $(target).map From 8cc282921bfa6a78c123bd6a1839e93068af3871 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Mon, 8 Sep 2014 11:23:31 -0700 Subject: [PATCH 53/77] sync with upstream --- test.html | 769 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 456 insertions(+), 313 deletions(-) diff --git a/test.html b/test.html index 8a171bc2a..3ff73e209 100644 --- a/test.html +++ b/test.html @@ -1,219 +1,469 @@ - - - - Normalize CSS - - - - -

            Heading 1

            -

            Heading 2

            -

            Heading 3

            -

            Heading 4

            -
            Heading 5
            -
            Heading 6
            - -
            -

            Heading 1 (in section)

            -

            Heading 2 (in section)

            -

            Heading 3 (in section)

            -

            Heading 4 (in section)

            -
            Heading 5 (in section)
            -
            Heading 6 (in section)
            -
            - + + +Normalize CSS: UI tests + + + + +
            + . + +

            _normalize.scss: UI tests

            + +

            html

            +

            should have sans-serif font family (opinionated)

            +
            + abcdefghijklmnopqrstuvwxyz +
            + +

            body

            +

            should have no margin (opinionated)

            +
            + (there should be no red background visible on this page) +
            + +

            article, aside, details, figure, figcaption, footer, header, hgroup, main, nav, section, summary

            +

            should render as block

            +
            +
            article
            + +
            + summary + details +
            +
            + figure +
            figcaption
            +
            +
            footer
            +
            header
            +
            hgroup
            +
            main
            + +
            section
            +
            + +

            audio, canvas, progress, video

            +

            should render as inline-block and baseline-aligned

            +
            + + canvas + progress + +
            + +

            audio:not([controls]), template, [hidden]

            +

            should not display

            +
            + + + +
            + +

            a

            +

            should have a transparent background when active

            + +

            should not have a focus outline when both focused and hovered (opinionated)

            + + +

            abbr[title]

            +

            should have a dotted bottom border

            +
            + abbr +
            + +

            b, strong

            +

            should have bold font-weight

            +
            + b + strong +
            + +

            dfn

            +

            should have italic font-style

            +
            + dfn +
            + +

            h1

            +

            should not change size within an article

            +
            +

            Heading (control)

            -

            Heading 1 (in article)

            -

            Heading 2 (in article)

            -

            Heading 3 (in article)

            -

            Heading 4 (in article)

            -
            Heading 5 (in article)
            -
            Heading 6 (in article)
            +

            Heading (in article)

            - -
            -
            -

            Heading 1 (in hgroup)

            -

            Heading 2 (in hgroup)

            -
            - -
            - -

            Text-level semantics

            - - - -

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

            -

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

            - -
            Address: somewhere, world
            - -

            - The a element example
            - The abbr element and abbr element with title examples
            - The b element example
            - The cite element example
            - The code element example
            - The del element example
            - The dfn element and dfn element with title examples
            - The em element example
            - The i element example
            - The img element example
            - The ins element example
            - The kbd element example
            - The mark element example
            - The q element inside a q element example
            - The s element example
            - The samp element example
            - The small element example
            - The span element example
            - The strong element example
            - The sub element example
            - The sup element example
            - The var element example
            - The u element example -

            - -

            Embedded content

            - -

            audio

            - - - - -

            img

            - - - - -

            svg

            - +
            +

            should not change size within a section

            +
            +

            Heading (control)

            +
            +

            Heading (in section)

            +
            +
            + +

            mark

            +

            should have a yellow background

            +
            + mark +
            + +

            small

            +

            should render equally small in all browsers

            +
            + control. small. +
            + +

            sub and sup

            +

            should not affect a line's visual line-height

            +
            +

            control.

            +

            control. sub.

            +

            control. sup.

            +
            + +

            img

            +

            should not have a border when wrapped in an anchor

            + + +

            svg

            +

            should not overflow

            +
            - + +
            -

            video

            - - - - -

            Interactive content

            - -

            details / summary

            -
            - More info -

            Additional information

            -
              -
            • Point 1
            • -
            • Point 2
            • -
            -
            - -

            Grouping content

            - -

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

            +

            figure

            +

            should have margins

            +
            +
            + +
            +
            -

            pre

            +

            hr

            +

            should have a content-box box model

            +
            +
            +
            +

            pre

            +

            should trigger a scrollbar when too wide for its container

            +
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
            +
            + +

            code, kbd, pre, samp

            +

            should render em-unit preformatted text at the same absolute size as normal text

            +
            + span: abcdefghijklmnopqrstuvwxyz.
            + code: abcdefghijklmnopqrstuvwxyz.
            + kbd: abcdefghijklmnopqrstuvwxyz.
            + samp: abcdefghijklmnopqrstuvwxyz. +
            pre: abcdefghijklmnopqrstuvwxyz.
            +
            + +

            button, input, optgroup, select, textarea

            +

            should inherit color from ancestor

            +
            +
            +
            +
            + +
            +

            should inherit font from ancestor

            +
            +
            +
            +
            + +
            +

            should not have margins

            +
            + + + + + +
            + +

            button

            +

            should have visible overflow

            +
            + + +
            + +

            button, select

            +

            should not inherit text-transform

            +
            + + +
            + +

            button and button-style input

            +

            should have pointer cursor style

            +
            +

            +

            +

            +

            +

            +
            +

            should be styleable

            +
            + +

            +

            +

            +

            +

            +
            + +

            disabled button and input

            +

            should have default cursor style

            +
            +

            +

            +

            +

            +

            +
            + +

            button, input

            +

            should not have extra inner padding in Firefox

            +
            + +

            +

            +

            +

            +

            +
            + +

            input

            +

            should not inherit line-height

            +
            + +
            + +

            input[type="checkbox"], input[type="radio"]

            +

            should have a border-box box model

            +
            + + + +
            +

            should not have padding

            +
            + + +
            + +

            input[type="number"]

            +

            should display a default cursor for the decrement button's click target in Chrome

            +
            + +
            + +

            input[type="search"]

            +

            should be styleable

            +
            + +
            +

            should have a content-box box model

            +
            +
            + +
            +
            +

            should not have a cancel button in Safari or Chrome

            +
            + +
            + +

            fieldset

            +

            should have consistent border, padding, and margin

            +
            +
            +
            +
            +
            + +

            legend

            +

            should inherit color

            +
            +
            + legend +
            +
            +

            should not have padding

            +
            +
            + legend +
            +
            + +

            textarea

            +

            should not have a scrollbar unless overflowing

            +
            + +
            + +

            table

            +

            should not have spaces between cells

            +
            @@ -253,113 +503,6 @@

            Tabular data

            Jimi Hendrix - albums
            +
            -

            Forms

            - -
            -
            - Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping. -

            - -

            -

            -

            -

            -

            -

            - -

            -

            - -

            -

            -

            -

            - -

            -

            -
            - -
            - Inputs as siblings of labels -

            - - -

            -

            -

            -

            -

            -

            -

            - - -

            -

            - - -

            - -

            -

            -

            -

            - -

            -

            -
            - -
            - Clickable inputs and buttons -

            -

            -

            -

            -

            - - -

            -

            -

            -

            -
            - -
            - box-sizing tests -
            -
            -
            -
            -
            - -
            -
            -
            -
            -
            -
            -
            -
            - -
            -
            - -
            -
            - -
            -
            -
            -
            - -
            -
            -
            -
            -
            - - +
            From aba8910935fc55845ad9c101bd587fb9408436bb Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 12:03:36 -0700 Subject: [PATCH 54/77] initial import and here I jump on the gulp bandwagon --- package.json | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 000000000..4f6e13a47 --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "_normalize.scss", + "version": "0.0.0", + "description": "Sass version of Normalize.css, customized with some more defaults", + "main": "gulpfile.js", + "dependencies": { + "gulp": "~3.8.8", + "gulp-css-base64": "~1.2.5" + }, + "devDependencies": { + "gulp-watch": "^1.0.2", + "gulp-minify-css": "^0.3.8", + "del": "^0.1.3", + "gulp-debug": "^1.0.1", + "gulp-notify": "^1.5.1", + "gulp-rename": "^1.2.0", + "gulp-sass": "^0.7.3", + "gulp-changed": "^1.0.0" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git://github.com/DArcMattr/_normalize.scss.git" + }, + "keywords": [ + "Sass", + "normalize" + ], + "author": "Necolas", + "license": "ISC", + "bugs": { + "url": "https://github.com/DArcMattr/_normalize.scss/issues" + }, + "homepage": "https://github.com/DArcMattr/_normalize.scss" +} From 758e26a320fa3eb0f041caad489aaaf3baa7ff87 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 12:16:45 -0700 Subject: [PATCH 55/77] only going to keep debug & notify for testing --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 4f6e13a47..169f028f0 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,6 @@ "gulp-watch": "^1.0.2", "gulp-minify-css": "^0.3.8", "del": "^0.1.3", - "gulp-debug": "^1.0.1", - "gulp-notify": "^1.5.1", "gulp-rename": "^1.2.0", "gulp-sass": "^0.7.3", "gulp-changed": "^1.0.0" From 3ccd9d4245b8b377c5991f324ef3f44dd75b2949 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 13:49:40 -0700 Subject: [PATCH 56/77] invite Facebook's Watchman to the party Watchman gives me watch functionality--but I'll need to figure out how to force a recompile if the source files have changed, but the compiled CSS file is still there --- Makefile | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Makefile b/Makefile index 2d33f8c0f..ed42e2bd9 100644 --- a/Makefile +++ b/Makefile @@ -17,3 +17,7 @@ $(target): $(prereqs) clean: @echo "deleting" @-rm -f $(target) $(target).map + +watch: + watchman watch $(shell pwd) + watchman -- trigger $(shell pwd) remake *.css -- make clean normalize.css From b301528fd1a6ea174554ed706d9734c130045fb6 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:39:27 -0700 Subject: [PATCH 57/77] don't track compiled files --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..485dcfdac --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +normalize.min.css +normalize.css From 9d371464bc84cb7018a42ee9eae634adada560bb Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:40:16 -0700 Subject: [PATCH 58/77] farewell Makefile, hello gulpfile include all the necessary pieces to get gulp working --- Makefile | 23 ----------------------- gulpfile.js | 33 +++++++++++++++++++++++++++++++++ normalize.scss | 1 + package.json | 1 - 4 files changed, 34 insertions(+), 24 deletions(-) delete mode 100644 Makefile create mode 100644 gulpfile.js create mode 100644 normalize.scss diff --git a/Makefile b/Makefile deleted file mode 100644 index ed42e2bd9..000000000 --- a/Makefile +++ /dev/null @@ -1,23 +0,0 @@ -# v2.0.0 _normalize.scss -# TODO: -# iterate over a list of SVGs to replace with data URIs -# possible example: -# http://www.snip2code.com/Snippet/28122/Replaced-Grunt-Gulp-with-a-Makefile -# portable watch capability -CC=sass -CFLAGS=--style nested --no-cache - -target = normalize.css -main_scss = _normalize.scss - -$(target): $(prereqs) - @echo "Running Sass" - $(CC) $(CFLAGS) $(main_scss) $(target) - -clean: - @echo "deleting" - @-rm -f $(target) $(target).map - -watch: - watchman watch $(shell pwd) - watchman -- trigger $(shell pwd) remake *.css -- make clean normalize.css diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000..2e985d1ed --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,33 @@ +var + gulp = require('gulp'), + cssBase64 = require('gulp-css-base64'), + minifycss = require('gulp-minify-css'), + rename = require('gulp-rename'), + sass = require('gulp-sass'), + watch = require('gulp-watch'); + +gulp.task('clean', function(cb) { + del(['normalize.css','normalize.css.map'], cb); +}); + +gulp.task('styles', function() { + return gulp.src('normalize.scss') + .pipe(sass()) + .pipe(cssBase64({ + verbose: true, + baseDir: './', + extensionsAllowed: ['.gif','.png','.svg','.jpg'] + })) + .pipe(gulp.dest('./')) + .pipe(minifycss()) + .pipe(rename({suffix: '.min'})) + .pipe(gulp.dest('./')) +// .on('error', function(err) { console.log(err.message); }); +}); + +gulp.task('default', ['watch','styles']); + +gulp.task('watch', function() { + gulp.watch(['normalize.scss','_normalize.scss','assets/_rem.scss'], ['styles']); +}); + diff --git a/normalize.scss b/normalize.scss new file mode 100644 index 000000000..87d2282bf --- /dev/null +++ b/normalize.scss @@ -0,0 +1 @@ +@import "normalize"; diff --git a/package.json b/package.json index 169f028f0..837a5c162 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "devDependencies": { "gulp-watch": "^1.0.2", "gulp-minify-css": "^0.3.8", - "del": "^0.1.3", "gulp-rename": "^1.2.0", "gulp-sass": "^0.7.3", "gulp-changed": "^1.0.0" From 39ec96824b034d7d1365fc6fe66bb2bc6523e2f0 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:44:15 -0700 Subject: [PATCH 59/77] documentation updates Bump version numbers, add comments, and futher reality syncing. --- README.md | 36 +++++++++++++++++++++--------------- _normalize.scss | 21 +++++++++++---------- normalize.scss | 5 +++++ 3 files changed, 37 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 26fc0ce2a..189cfd31b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# `_normalize.scss` v1.2.0 +# `_normalize.scss` v2.1.0 `_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from @@ -19,28 +19,33 @@ the styles that need normalizing. ## How to use it I intend `_normalize.scss` to be used as a declaration of many default styles -that I use in Ayn Rand Institute web projects, and for working around many +that I used in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's -stylesheet, and compiled in using [SASSC][]. A standalone version is -generated for sites where the entirety of the source markup is out of my hands. +stylesheet, and compiled in using [Sass][], and is using a subset of Sass that +can be compiled by [Sassc][]. A [gulp.js][] recipe for making a standalone +version is provided, if you wish to make a standalone version. -The project comes with a git hook, which has to be symlinked into the .git -directory to be used +## Dependencies: - ln ./git_hooks/post-merge ./.git/hooks/post-merge +[Gulp.js][], which in turn requires [Node.JS][]. Install Node.JS via your +operating system's package manager, and install gulp.js globally: -## Dependencies: + sudo npm install -g gulp + +Then for this project, once cloned, install the necessary local NPM modules +for handling the various gulp tasks by running: -* A [make][] utility, currently tested on Mac OS X -* [SASSC][] -* [SVGO][], a NodeJS utility used to optimize SVG files + cd {project install folder} + npm install ## For the future This file is becoming less of a Normalize styles, and more of a "framework", as my opinions about the margins/padding and base appearance of some links are -creeping in. A future re-sync with Necolas' project is planned, but will be -quite selective. +creeping in. A re-sync with Necolas' project is underway. What is left is +registering this project with Bower and other front-end package managers, which +may necessitate a name change, since this project has deviated from its origins +in significant ways. ### From Nicholas Gallagher (necolas): @@ -77,6 +82,7 @@ Gallagher][] and [Jonathan Neal][]. [Jonathan Neal]: http://github.com/jonathantneal [Nicolas Gallagher]: http://github.com/necolas [issue guidelines]: https://github.com/necolas/issue-guidelines -[SASSC]: https://github.com/hcatlin/sassc +[Sass]: https://sass-lang.com +[Sassc]: https://github.com/sass/sassc [make]: http://en.wikipedia.org/wiki/Make_(software) -[SVGO]: https://github.com/svg/svgo +[Watchman]: https://facebook.github.io/watchman/ diff --git a/_normalize.scss b/_normalize.scss index f9e18b3d7..631eb2e07 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,4 +1,4 @@ -/*! v1.2.0, based on normalize.css v1.0.0 | MIT License | git.io/normalize */ +/*! v2.1.0, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ /* ============================================================================= Mixins @@ -18,15 +18,15 @@ $lh: 1.2rem !default; // line-height unit, in rem * Corrects `block` display not defined in IE 6/7/8/9 & Firefox 3. */ article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - main, - nav, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, section, summary { display: block; @@ -124,6 +124,7 @@ a { &:active, &:hover { outline: 0; } + /* TODO: introduce more filetype icons, and split off into another file */ &[href$=pdf] { /*! SVG from http://jozef89.deviantart.com/art/Free-document-icons-445521778 */ position: relative; @include rem( padding-right, 1.06666667rem ); diff --git a/normalize.scss b/normalize.scss index 87d2282bf..9c902fff1 100644 --- a/normalize.scss +++ b/normalize.scss @@ -1 +1,6 @@ +/* + * Inb4 cool story bro: + * I spent hours trying to get gulp to compile _normalize.scss, until I tried + * making this shell of a file. Apparently gulp doesn't like naked Sass partials. + */ @import "normalize"; From 253a0f6ee5417db77c9f50edc9760beb437e12e8 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:44:15 -0700 Subject: [PATCH 60/77] documentation updates Bump version numbers, add comments, and futher reality syncing. documentation updates Bump version numbers, add comments, and futher reality syncing. --- README.md | 36 +++++++++++++++++++++--------------- _normalize.scss | 21 +++++++++++---------- normalize.scss | 5 +++++ 3 files changed, 37 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 26fc0ce2a..189cfd31b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# `_normalize.scss` v1.2.0 +# `_normalize.scss` v2.1.0 `_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from @@ -19,28 +19,33 @@ the styles that need normalizing. ## How to use it I intend `_normalize.scss` to be used as a declaration of many default styles -that I use in Ayn Rand Institute web projects, and for working around many +that I used in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's -stylesheet, and compiled in using [SASSC][]. A standalone version is -generated for sites where the entirety of the source markup is out of my hands. +stylesheet, and compiled in using [Sass][], and is using a subset of Sass that +can be compiled by [Sassc][]. A [gulp.js][] recipe for making a standalone +version is provided, if you wish to make a standalone version. -The project comes with a git hook, which has to be symlinked into the .git -directory to be used +## Dependencies: - ln ./git_hooks/post-merge ./.git/hooks/post-merge +[Gulp.js][], which in turn requires [Node.JS][]. Install Node.JS via your +operating system's package manager, and install gulp.js globally: -## Dependencies: + sudo npm install -g gulp + +Then for this project, once cloned, install the necessary local NPM modules +for handling the various gulp tasks by running: -* A [make][] utility, currently tested on Mac OS X -* [SASSC][] -* [SVGO][], a NodeJS utility used to optimize SVG files + cd {project install folder} + npm install ## For the future This file is becoming less of a Normalize styles, and more of a "framework", as my opinions about the margins/padding and base appearance of some links are -creeping in. A future re-sync with Necolas' project is planned, but will be -quite selective. +creeping in. A re-sync with Necolas' project is underway. What is left is +registering this project with Bower and other front-end package managers, which +may necessitate a name change, since this project has deviated from its origins +in significant ways. ### From Nicholas Gallagher (necolas): @@ -77,6 +82,7 @@ Gallagher][] and [Jonathan Neal][]. [Jonathan Neal]: http://github.com/jonathantneal [Nicolas Gallagher]: http://github.com/necolas [issue guidelines]: https://github.com/necolas/issue-guidelines -[SASSC]: https://github.com/hcatlin/sassc +[Sass]: https://sass-lang.com +[Sassc]: https://github.com/sass/sassc [make]: http://en.wikipedia.org/wiki/Make_(software) -[SVGO]: https://github.com/svg/svgo +[Watchman]: https://facebook.github.io/watchman/ diff --git a/_normalize.scss b/_normalize.scss index f9e18b3d7..631eb2e07 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,4 +1,4 @@ -/*! v1.2.0, based on normalize.css v1.0.0 | MIT License | git.io/normalize */ +/*! v2.1.0, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ /* ============================================================================= Mixins @@ -18,15 +18,15 @@ $lh: 1.2rem !default; // line-height unit, in rem * Corrects `block` display not defined in IE 6/7/8/9 & Firefox 3. */ article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - main, - nav, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, section, summary { display: block; @@ -124,6 +124,7 @@ a { &:active, &:hover { outline: 0; } + /* TODO: introduce more filetype icons, and split off into another file */ &[href$=pdf] { /*! SVG from http://jozef89.deviantart.com/art/Free-document-icons-445521778 */ position: relative; @include rem( padding-right, 1.06666667rem ); diff --git a/normalize.scss b/normalize.scss index 87d2282bf..9c902fff1 100644 --- a/normalize.scss +++ b/normalize.scss @@ -1 +1,6 @@ +/* + * Inb4 cool story bro: + * I spent hours trying to get gulp to compile _normalize.scss, until I tried + * making this shell of a file. Apparently gulp doesn't like naked Sass partials. + */ @import "normalize"; From 16d1f958edd9c857a0a97b4febb4c204c329662d Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:49:35 -0700 Subject: [PATCH 61/77] left out a URL --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 189cfd31b..c61e9ad57 100644 --- a/README.md +++ b/README.md @@ -84,5 +84,6 @@ Gallagher][] and [Jonathan Neal][]. [issue guidelines]: https://github.com/necolas/issue-guidelines [Sass]: https://sass-lang.com [Sassc]: https://github.com/sass/sassc +[gulp.js]: http://gulpjs.com [make]: http://en.wikipedia.org/wiki/Make_(software) [Watchman]: https://facebook.github.io/watchman/ From 9d3aabbdf47f030e10456b09ef1b57e3914634f6 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:52:41 -0700 Subject: [PATCH 62/77] don't need this hook anymore --- git_hooks/post-merge | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100755 git_hooks/post-merge diff --git a/git_hooks/post-merge b/git_hooks/post-merge deleted file mode 100755 index 22c55babe..000000000 --- a/git_hooks/post-merge +++ /dev/null @@ -1,13 +0,0 @@ -#!/bin/sh -# Create a symbolic link to this in the .git/hooks directory - -if [ $(git diff HEAD@{1} HEAD --name-only | grep -E '_normalize.scss' -c) -ne 0 ]; then - echo "_normalize.scss changed, compiling" - if type "sass" > /dev/null 2>&1; then - sass --scss -lC ./_normalize.scss > ./normalize.css; - else - cat $theme_path/style.scss | ssh demo \ - "sass --scss --no-cache --style compressed" \ - > ./normalize.css - fi -fi From 024d9e3ddfe93b926534504e1bd4beaf1c2b1c2b Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 9 Sep 2014 14:58:56 -0700 Subject: [PATCH 63/77] include del package, since I'm using it --- gulpfile.js | 3 ++- package.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 2e985d1ed..996d37d06 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,6 +1,7 @@ var gulp = require('gulp'), cssBase64 = require('gulp-css-base64'), + del = require('del'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'), sass = require('gulp-sass'), @@ -10,7 +11,7 @@ gulp.task('clean', function(cb) { del(['normalize.css','normalize.css.map'], cb); }); -gulp.task('styles', function() { +gulp.task('styles', ['clean'], function() { return gulp.src('normalize.scss') .pipe(sass()) .pipe(cssBase64({ diff --git a/package.json b/package.json index 837a5c162..e831646f4 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "gulp-minify-css": "^0.3.8", "gulp-rename": "^1.2.0", "gulp-sass": "^0.7.3", - "gulp-changed": "^1.0.0" + "gulp-changed": "^1.0.0", + "del": "^0.1.3" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" From 604e52a4a1020b2f35854dbaa1d219c6f3e1497e Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:03:05 -0800 Subject: [PATCH 64/77] switching over to npm scripts --- gulpfile.js | 34 ---------------------------------- normalize.scss | 6 ------ 2 files changed, 40 deletions(-) delete mode 100644 gulpfile.js delete mode 100644 normalize.scss diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 996d37d06..000000000 --- a/gulpfile.js +++ /dev/null @@ -1,34 +0,0 @@ -var - gulp = require('gulp'), - cssBase64 = require('gulp-css-base64'), - del = require('del'), - minifycss = require('gulp-minify-css'), - rename = require('gulp-rename'), - sass = require('gulp-sass'), - watch = require('gulp-watch'); - -gulp.task('clean', function(cb) { - del(['normalize.css','normalize.css.map'], cb); -}); - -gulp.task('styles', ['clean'], function() { - return gulp.src('normalize.scss') - .pipe(sass()) - .pipe(cssBase64({ - verbose: true, - baseDir: './', - extensionsAllowed: ['.gif','.png','.svg','.jpg'] - })) - .pipe(gulp.dest('./')) - .pipe(minifycss()) - .pipe(rename({suffix: '.min'})) - .pipe(gulp.dest('./')) -// .on('error', function(err) { console.log(err.message); }); -}); - -gulp.task('default', ['watch','styles']); - -gulp.task('watch', function() { - gulp.watch(['normalize.scss','_normalize.scss','assets/_rem.scss'], ['styles']); -}); - diff --git a/normalize.scss b/normalize.scss deleted file mode 100644 index 9c902fff1..000000000 --- a/normalize.scss +++ /dev/null @@ -1,6 +0,0 @@ -/* - * Inb4 cool story bro: - * I spent hours trying to get gulp to compile _normalize.scss, until I tried - * making this shell of a file. Apparently gulp doesn't like naked Sass partials. - */ -@import "normalize"; From 7d5d08ee5a06ccc43f5c97af45c3b2d445ae73f9 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:03:28 -0800 Subject: [PATCH 65/77] gulp -> npm run * --- package.json | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index e831646f4..223977f22 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,25 @@ { "name": "_normalize.scss", - "version": "0.0.0", + "version": "1.3.0", "description": "Sass version of Normalize.css, customized with some more defaults", - "main": "gulpfile.js", - "dependencies": { - "gulp": "~3.8.8", - "gulp-css-base64": "~1.2.5" - }, + "files": [ + "_normalize.scss", + "README.md", + "LICENSE.md", + "package.json", + "assets/", + "test.html" + ], "devDependencies": { - "gulp-watch": "^1.0.2", - "gulp-minify-css": "^0.3.8", - "gulp-rename": "^1.2.0", - "gulp-sass": "^0.7.3", - "gulp-changed": "^1.0.0", - "del": "^0.1.3" + "clean-css": "3.4.9", + "css-b64-images": "0.2.5", + "node-sass": "3.4.2", + "nodemon": "1.8.1" }, "scripts": { + "build": "css-b64-images ./_normalize.scss > _normalize-inlined.scss.tmp && node-sass --output-style=compressed --source-map=true _normalize.inlined.scss normalize.css && rm _normalize-inlined.scss.tmp", + "install": "npm run build-sass", + "watch": "nodemon -e scss -w ./*.scss -x 'npm run build'", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { @@ -27,9 +31,11 @@ "normalize" ], "author": "Necolas", - "license": "ISC", + "main": "_normalize.scss", + "license": "MIT", "bugs": { "url": "https://github.com/DArcMattr/_normalize.scss/issues" }, - "homepage": "https://github.com/DArcMattr/_normalize.scss" + "homepage": "https://github.com/DArcMattr/_normalize.scss", + "dependencies": {} } From 5f97dfc9e513c4fbeb1d4cbb2ac1c1d1b46d1a30 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:09:35 -0800 Subject: [PATCH 66/77] fix build step; decompose build --- package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 223977f22..d9e4f968a 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "nodemon": "1.8.1" }, "scripts": { - "build": "css-b64-images ./_normalize.scss > _normalize-inlined.scss.tmp && node-sass --output-style=compressed --source-map=true _normalize.inlined.scss normalize.css && rm _normalize-inlined.scss.tmp", - "install": "npm run build-sass", + "build": "npm run inline-images && node-sass --output-style=compressed --source-map=true _normalize-inlined.scss.tmp normalize.css && npm run clean", + "inline-images": "css-b64-images _normalize.scss > _normalize-inlined.scss.tmp", + "clean": "rm _normalize-inlined.scss.tmp", + "install": "npm run build", "watch": "nodemon -e scss -w ./*.scss -x 'npm run build'", "test": "echo \"Error: no test specified\" && exit 1" }, From cba97183687ed871fa03ad7d70a13261e487dafb Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:16:41 -0800 Subject: [PATCH 67/77] remove incorrect redundancy --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d9e4f968a..22ccd4d41 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "inline-images": "css-b64-images _normalize.scss > _normalize-inlined.scss.tmp", "clean": "rm _normalize-inlined.scss.tmp", "install": "npm run build", - "watch": "nodemon -e scss -w ./*.scss -x 'npm run build'", + "watch": "nodemon -e scss -w . -x 'npm run build'", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { From 8501ec29453644acf8d0345b59f2b03c0823bd77 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:27:43 -0800 Subject: [PATCH 68/77] compiled file is already minified; ignore the map --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 485dcfdac..e373b43d3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ node_modules -normalize.min.css +normalize.css.map normalize.css From b145fb69e02d1e25998e4d2f37502b841f811950 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:28:11 -0800 Subject: [PATCH 69/77] Bump version number --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c61e9ad57..50d70d09f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# `_normalize.scss` v2.1.0 +# `_normalize.scss` v2.2.0 `_normalize.scss` is a customisable SASS file that makes browsers render all elements more consistently and in line with modern standards--derived from From 363391eb371b55e4d4e6f0b885ed38002d0438e8 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 14:32:32 -0800 Subject: [PATCH 70/77] match version in README, and point URL to gh-page --- package.json | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 22ccd4d41..7d60c911b 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,21 @@ { - "name": "_normalize.scss", - "version": "1.3.0", - "description": "Sass version of Normalize.css, customized with some more defaults", + "name": "darcmattr-normalize-scss", + "version": "2.2.0", + "description": "Sass version of normalize.css, with typographic vertical rhythm", + "style": "normalize.css", "files": [ "_normalize.scss", + "normalize.css", + "normalize.css.map", "README.md", "LICENSE.md", - "package.json", "assets/", "test.html" ], "devDependencies": { - "clean-css": "3.4.9", - "css-b64-images": "0.2.5", - "node-sass": "3.4.2", - "nodemon": "1.8.1" + "css-b64-images": "^0.2.5", + "node-sass": "^3.4.2", + "nodemon": "^1.8.1" }, "scripts": { "build": "npm run inline-images && node-sass --output-style=compressed --source-map=true _normalize-inlined.scss.tmp normalize.css && npm run clean", @@ -38,6 +39,6 @@ "bugs": { "url": "https://github.com/DArcMattr/_normalize.scss/issues" }, - "homepage": "https://github.com/DArcMattr/_normalize.scss", + "homepage": "http://darcmattr.github.io/_normalize.scss/", "dependencies": {} } From 598aab2a0f2fcd17d60dfdbccd08cefe973067b8 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Tue, 12 Jan 2016 16:35:46 -0800 Subject: [PATCH 71/77] Sync with reality --- README.md | 41 +++++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 50d70d09f..645cfe127 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Nicholas Gallagher's `Normalize.css` project. It is the result of researching th differences between default browser styles in order to precisely target only the styles that need normalizing. -[Check out the demo](http://darcmattr.github.io/_normalize.scss/test.html) +[Check out the demo](https://darcmattr.github.io/_normalize.scss/test.html) ## What does it do? @@ -21,16 +21,24 @@ the styles that need normalizing. I intend `_normalize.scss` to be used as a declaration of many default styles that I used in Ayn Rand Institute web projects, and for working around many browser quirks. It has been adapted for use as an `@import` into a site's -stylesheet, and compiled in using [Sass][], and is using a subset of Sass that -can be compiled by [Sassc][]. A [gulp.js][] recipe for making a standalone -version is provided, if you wish to make a standalone version. +stylesheet, and compiled in using [Sass][], using a subset of Sass that can be +compiled by [libsass][]. An `npm` build script for making a standalone version +is provided, if you wish to make a standalone version. -## Dependencies: +The following variables are used throughout the code, and you can override them +in your own loader stylesheets: + +```SCSS +$base-font-size: 15px !default; // otherwise inherited from _rem library +$text-color: #333 !default; +$background-color: #ccc !default; +$lh: 1.2rem !default; // line-height unit, in rem +``` -[Gulp.js][], which in turn requires [Node.JS][]. Install Node.JS via your -operating system's package manager, and install gulp.js globally: +## Dependencies: - sudo npm install -g gulp +[Node.JS][] and its package manager, [npm][]. Install Node.JS via whatever +method you choose (too much to list here, bleh). Then for this project, once cloned, install the necessary local NPM modules for handling the various gulp tasks by running: @@ -40,12 +48,10 @@ for handling the various gulp tasks by running: ## For the future -This file is becoming less of a Normalize styles, and more of a "framework", as -my opinions about the margins/padding and base appearance of some links are -creeping in. A re-sync with Necolas' project is underway. What is left is -registering this project with Bower and other front-end package managers, which -may necessitate a name change, since this project has deviated from its origins -in significant ways. +This file is becoming less of a normalizer, and more of a "framework", as my +opinions about the margins/padding and base appearance of some links are +creeping in. I re-sync with Necolas' project whenever I judge that another +default is needed. ### From Nicholas Gallagher (necolas): @@ -83,7 +89,6 @@ Gallagher][] and [Jonathan Neal][]. [Nicolas Gallagher]: http://github.com/necolas [issue guidelines]: https://github.com/necolas/issue-guidelines [Sass]: https://sass-lang.com -[Sassc]: https://github.com/sass/sassc -[gulp.js]: http://gulpjs.com -[make]: http://en.wikipedia.org/wiki/Make_(software) -[Watchman]: https://facebook.github.io/watchman/ +[libsass]: http://sass-lang.com/libsass +[Node.JS]: https://nodejs.org/ +[npm]: https://www.npmjs.com/ From bfff3b39ef83e0a1d2099dbca42f623029b0f0fb Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 17 Sep 2020 08:48:43 -0500 Subject: [PATCH 72/77] update to current module versions --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7d60c911b..0cb21a6a6 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ ], "devDependencies": { "css-b64-images": "^0.2.5", - "node-sass": "^3.4.2", - "nodemon": "^1.8.1" + "node-sass": "^4.14.1", + "nodemon": "^2.0.4" }, "scripts": { "build": "npm run inline-images && node-sass --output-style=compressed --source-map=true _normalize-inlined.scss.tmp normalize.css && npm run clean", From d8541ad6f7adb5ef3338d7961e61a3383acd0d2e Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 17 Sep 2020 08:56:06 -0500 Subject: [PATCH 73/77] give nodemon its own config block --- package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0cb21a6a6..30afb7fa1 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,11 @@ "assets/", "test.html" ], + "nodemonConfig": { + "watch": ".", + "ext": "scss", + "exec": "npm run build" + }, "devDependencies": { "css-b64-images": "^0.2.5", "node-sass": "^4.14.1", @@ -22,7 +27,7 @@ "inline-images": "css-b64-images _normalize.scss > _normalize-inlined.scss.tmp", "clean": "rm _normalize-inlined.scss.tmp", "install": "npm run build", - "watch": "nodemon -e scss -w . -x 'npm run build'", + "watch": "nodemon", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { From 4e02272779b91220c30ed35a9b13609c33be3178 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 17 Sep 2020 08:56:50 -0500 Subject: [PATCH 74/77] give a bare bone editorconfig --- .editorconfig | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..aa2f68fcf --- /dev/null +++ b/.editorconfig @@ -0,0 +1,7 @@ +[*] +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +charset = utf-8 +indent_style = tab +indent_size = 4 From edc8eb20e7e777fc8e7a66d2edf139379009e2c0 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 17 Sep 2020 09:05:08 -0500 Subject: [PATCH 75/77] pick nits in documentation and defaults --- README.md | 17 +++++++---------- _normalize.scss | 7 ++++--- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 645cfe127..bf1f92027 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# `_normalize.scss` v2.2.0 +# `_normalize.scss` v2.2.1 -`_normalize.scss` is a customisable SASS file that makes browsers render all +`_normalize.scss` is a customisable Sass file that makes browsers render all elements more consistently and in line with modern standards--derived from Nicholas Gallagher's `Normalize.css` project. It is the result of researching the differences between default browser styles in order to precisely target only @@ -29,10 +29,11 @@ The following variables are used throughout the code, and you can override them in your own loader stylesheets: ```SCSS -$base-font-size: 15px !default; // otherwise inherited from _rem library +$base-font-size: 16px !default; // otherwise inherited from _rem library $text-color: #333 !default; $background-color: #ccc !default; -$lh: 1.2rem !default; // line-height unit, in rem +$line-height-multiplier: 1.2 !default; +$lh: $line-height-multiplier * 1rem !default; ``` ## Dependencies: @@ -40,18 +41,14 @@ $lh: 1.2rem !default; // line-height unit, in rem [Node.JS][] and its package manager, [npm][]. Install Node.JS via whatever method you choose (too much to list here, bleh). -Then for this project, once cloned, install the necessary local NPM modules -for handling the various gulp tasks by running: - - cd {project install folder} - npm install +Running `npm install` in the project directory will also build the CSS. ## For the future This file is becoming less of a normalizer, and more of a "framework", as my opinions about the margins/padding and base appearance of some links are creeping in. I re-sync with Necolas' project whenever I judge that another -default is needed. +default or cleanup is needed. ### From Nicholas Gallagher (necolas): diff --git a/_normalize.scss b/_normalize.scss index 631eb2e07..cf4c5a10f 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,12 +1,13 @@ -/*! v2.1.0, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ +/*! v2.2.1, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ /* ============================================================================= Mixins ========================================================================== */ -$base-font-size: 15px !default; // otherwise inherited from _rem +$base-font-size: 16px !default; // otherwise inherited from _rem $text-color: #333 !default; $background-color: #ccc !default; -$lh: 1.2rem !default; // line-height unit, in rem +$line-height-multiplier: 1.2 !default; +$lh: $line-height-multiplier * 1rem !default; @import "assets/_rem.scss"; From e82a6f65e4c6c119789b7ed0ee9573290c8e3f30 Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 17 Sep 2020 09:10:31 -0500 Subject: [PATCH 76/77] apply editorconfig formats --- _normalize.scss | 523 +++++++++++++++++++++++++----------------------- 1 file changed, 275 insertions(+), 248 deletions(-) diff --git a/_normalize.scss b/_normalize.scss index cf4c5a10f..5b8b5c3af 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,8 +1,8 @@ /*! v2.2.1, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ /* ============================================================================= - Mixins - ========================================================================== */ +Mixins +========================================================================== */ $base-font-size: 16px !default; // otherwise inherited from _rem $text-color: #333 !default; $background-color: #ccc !default; @@ -12,8 +12,8 @@ $lh: $line-height-multiplier * 1rem !default; @import "assets/_rem.scss"; /* ========================================================================== - HTML5 display definitions - ========================================================================== */ +HTML5 display definitions +========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 & Firefox 3. @@ -30,7 +30,7 @@ main, nav, section, summary { - display: block; + display: block; } /* @@ -40,10 +40,10 @@ audio, canvas, progress, video { - display: inline-block; - vertical-align: baseline; - *display: inline; - *zoom: 1; + display: inline-block; + vertical-align: baseline; + *display: inline; + *zoom: 1; } /* @@ -51,21 +51,22 @@ video { * Remove excess height in iOS5 devices. */ audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, Safari 4. * Known issue: no IE 6 support. */ -[hidden], template { - display: none; +[hidden], +template { + display: none; } /* ========================================================================== - Base - ========================================================================== */ +Base +========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using @@ -74,20 +75,22 @@ audio:not([controls]) { * user zoom. */ html { - font-size: percentage( $base-font-size / $browser-default-font-size ); /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ - font-family: sans-serif; - color: $text-color; - background-color: $background-color; + font-size: percentage( $base-font-size / $browser-default-font-size ); /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ + font-family: sans-serif; + color: $text-color; + background-color: $background-color; } /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ -button, input[type=submit], select { - font-family: sans-serif; +button, +input[type=submit], +select { + font-family: sans-serif; } /* @@ -96,54 +99,56 @@ button, input[type=submit], select { * Correct `button` style inheritance in Firefox, IE 8+, and Opera * Correct `select` style inheritance in Firefox. */ -button, select { - text-transform: none; +button, +select { + text-transform: none; } -input, textarea { - font-family: monospace; +input, +textarea { + font-family: monospace; } /* * Remove default margin. */ body { - margin: 0; + margin: 0; } /* ========================================================================== - Links - ========================================================================== */ +Links +========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a { - &:focus { - outline: thin dotted; - } - &:active, &:hover { - outline: 0; - } - /* TODO: introduce more filetype icons, and split off into another file */ - &[href$=pdf] { /*! SVG from http://jozef89.deviantart.com/art/Free-document-icons-445521778 */ - position: relative; - @include rem( padding-right, 1.06666667rem ); - &:after { - content: ""; - position: absolute; - right: 0; - display: inline-block; - @include rem( height, 1.06666667rem ); - @include rem( width, 1.06666667rem ); - padding: 0; - margin: 0; - background-image: url('assets/file-icon-pdf.svg'); - background-position: 0 0; - background-repeat: no-repeat; - background-size: 100%; - } - } + &:focus { + outline: thin dotted; + } + &:active, &:hover { + outline: 0; + } + /* TODO: introduce more filetype icons, and split off into another file */ + &[href$=pdf] { /*! SVG from http://jozef89.deviantart.com/art/Free-document-icons-445521778 */ + position: relative; + @include rem( padding-right, 1.06666667rem ); + &:after { + content: ""; + position: absolute; + right: 0; + display: inline-block; + @include rem( height, 1.06666667rem ); + @include rem( width, 1.06666667rem ); + padding: 0; + margin: 0; + background-image: url('assets/file-icon-pdf.svg'); + background-position: 0 0; + background-repeat: no-repeat; + background-size: 100%; + } + } } /* @@ -151,8 +156,8 @@ a { */ /* ========================================================================== - Typography - ========================================================================== */ +Typography +========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. @@ -160,39 +165,39 @@ a { */ h1 { - @include rem( font-size, 1.5*$lh ); - @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0px 0.5*$lh ); + @include rem( font-size, 1.5*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0px 0.5*$lh ); } h2 { - @include rem( font-size, 5/4*$lh ); - @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0px 0.5*$lh ); + @include rem( font-size, 5/4*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0px 0.5*$lh ); } h3 { - @include rem( font-size, 1.16667rem ); - @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0px 1.5*$lh ); + @include rem( font-size, 1.16667rem ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0px 1.5*$lh ); } h4 { - @include rem( font-size, 5/6*$lh ); - @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0px 1.5*$lh ); + @include rem( font-size, 5/6*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0px 1.5*$lh ); } h5 { - @include rem( font-size, 25/36*$lh ); - @include rem( line-height, 1.5*$lh ); - @include rem( margin, 1*$lh 0px 1.5*$lh ); + @include rem( font-size, 25/36*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, 1*$lh 0px 1.5*$lh ); } h6 { - @include rem( font-size, 24/15*$lh ); - @include rem( line-height, 1.5*$lh ); - @include rem( margin, $lh 0px 1.5*$lh); + @include rem( font-size, 24/15*$lh ); + @include rem( line-height, 1.5*$lh ); + @include rem( margin, $lh 0px 1.5*$lh); } /* @@ -200,13 +205,13 @@ h6 { */ abbr[title] { - border-bottom: 1px dotted; } +border-bottom: 1px dotted; } blockquote { - @include rem( margin, $lh 0px ); - @include rem( padding, 0px 0px 0px .5*$lh); - border: 0 solid lighten( $text-color, 20% ); - @include rem( border-left-width, .5*$lh ); + @include rem( margin, $lh 0px ); + @include rem( padding, 0px 0px 0px .5*$lh); + border: 0 solid lighten( $text-color, 20% ); + @include rem( border-left-width, .5*$lh ); } /** @@ -214,9 +219,9 @@ blockquote { */ hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } /* @@ -224,21 +229,22 @@ hr { */ mark { - background-color: lighten( $background-color, 20% ); - color: darken( $text-color, 20% ); + background-color: lighten( $background-color, 20% ); + color: darken( $text-color, 20% ); } /* * Addresses margins set differently in IE 6/7. */ -p, pre { - @include rem( margin, $lh 0px ); +p, +pre { + @include rem( margin, $lh 0px ); } p { - hyphens: auto; - word-break: normal; + hyphens: auto; + word-break: normal; } /* @@ -246,24 +252,30 @@ p { * 2. Address odd `em`-unit font size rendering in all browsers. */ -code, kbd, pre, samp { - font-family: monospace, monospace; /* 1 */ - _font-family: 'courier new', monospace; /* 1 */ - @include rem( font-size, 1rem ); /* 2 */ - @include rem( margin, $lh 0px ); +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + _font-family: 'courier new', monospace; /* 1 */ + @include rem( font-size, 1rem ); /* 2 */ + @include rem( margin, $lh 0px ); } em { - font-style: italic; - letter-spacing: .5px; /* my own personal preference */ + font-style: italic; + letter-spacing: .5px; /* my own personal preference */ } -cite, i, dfn { - font-style: italic; +cite, +i, +dfn { + font-style: italic; } -strong, b { - font-weight: 700; +strong, +b { + font-weight: 700; } /* @@ -272,10 +284,10 @@ strong, b { */ pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - overflow: auto; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + overflow: auto; } /* @@ -283,11 +295,11 @@ pre { */ q { - quotes: none; - &:before, &:after { - content: ''; - content: none; - } + quotes: none; + &:before, &:after { + content: ''; + content: none; + } } /* @@ -295,38 +307,42 @@ q { */ small { - font-size: 80%; + font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +sub, +sup { + 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 - ========================================================================== */ +Lists +========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ -dl, menu, ol, ul { - @include rem( margin, $lh 0px ); +dl, +menu, +ol, +ul { + @include rem( margin, $lh 0px ); } dt { @@ -334,48 +350,50 @@ dt { } dd { - @include rem( margin, 0px 0px $lh $lh ); + @include rem( margin, 0px 0px $lh $lh ); } /* * Addresses paddings set differently in IE 6/7. */ -menu, ol, ul { - list-style-position: outside; +menu, +ol, +ul { + list-style-position: outside; - @include rem( padding, 0px 0px 0px $lh ); + @include rem( padding, 0px 0px 0px $lh ); } ol { - list-style-type: decimal; - ol { - list-style-type: upper-alpha; - ol { - list-style-type: lower-alpha; - } - } + list-style-type: decimal; + ol { + list-style-type: upper-alpha; + ol { + list-style-type: lower-alpha; + } + } } ul { - list-style-type: disc; - ul { - list-style-type: square; - ul { - list-style-type: circle; - } - } + list-style-type: disc; + ul { + list-style-type: square; + ul { + list-style-type: circle; + } + } } li { - @include rem( margin, $lh 0px ); + @include rem( margin, $lh 0px ); } nav { - li { - list-style: none; - margin: 0; - } + li { + list-style: none; + margin: 0; + } } /* @@ -383,15 +401,16 @@ nav { */ nav { - ul, ol { - list-style: none; - list-style-image: none; - } + ul, + ol { + list-style: none; + list-style-image: none; + } } /* ========================================================================== - Embedded content - ========================================================================== */ +Embedded content +========================================================================== */ /* * 1. Removes border when inside `a` element in IE 6/7/8/9, Firefox 3. @@ -399,8 +418,8 @@ nav { */ img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ } /* @@ -408,12 +427,12 @@ img { */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } /* ========================================================================== - Figures & Forms - ========================================================================== */ +Figures & Forms +========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, Opera 11. @@ -421,11 +440,11 @@ svg:not(:root) { */ form { - margin: 0; + margin: 0; } figure { - @include rem( margin, $lh 2*$lh ) + @include rem( margin, $lh 2*$lh ) } @@ -433,9 +452,9 @@ figure { * Define consistent border, margin, and padding. */ fieldset { - border: 1px solid lighten( $text-color, 20% ); - margin: 0px 2px; - @include rem( padding, 0.35rem 0.625rem 0.75rem ); + border: 1px solid lighten( $text-color, 20% ); + margin: 0px 2px; + @include rem( padding, 0.35rem 0.625rem 0.75rem ); } /* @@ -446,11 +465,11 @@ fieldset { * @link http://www.456bereastreet.com/archive/201210/how_to_line_wrap_text_in_legend_elements_even_in_ie/ */ legend { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ - display: table; /* 4 */ + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ + display: table; /* 4 */ } /* * 1. Corrects font properties not being inherited in all browsers. @@ -459,20 +478,24 @@ legend { * 4. Correct color not being inherited. * Known issue: affects color of disabled elements. */ -button, input, select, textarea { - font: inherit; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ - color: inherit; /* 4 */ +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ + color: inherit; /* 4 */ } /* * Addresses Firefox 3/4 setting `line-height` on `input` using `!important` in the * UA stylesheet. */ -button, input { - line-height: normal; +button, +input { + line-height: normal; } /* @@ -485,90 +508,93 @@ button, input { * Known issue: inner spacing remains in IE 6. */ .pointy { - cursor: pointer; + cursor: pointer; } label { - @extend .pointy; + @extend .pointy; } -button, html input[type="button"] /* 1 */ { - -webkit-appearance: button; /* 2 */ - @extend .pointy; /* 3 */ - *overflow: visible; /* 4 */ +button, +html input[type="button"] /* 1 */ { + -webkit-appearance: button; /* 2 */ + @extend .pointy; /* 3 */ + *overflow: visible; /* 4 */ } input { - &[type="reset"], &[type="submit"] { - -webkit-appearance: button; /* 2 */ - @extend .pointy; /* 3 */ - *overflow: visible; /* 4 */ - } + &[type="reset"], &[type="submit"] { + -webkit-appearance: button; /* 2 */ + @extend .pointy; /* 3 */ + *overflow: visible; /* 4 */ + } } -button, html input { - /* - * A. Re-set default cursor for disabled elements. - */ - &[disabled] { - cursor: default; /* A. */ - } +button, +html input { + /* + * A. Re-set default cursor for disabled elements. + */ +&[disabled] { + cursor: default; /* A. */ +} } input { - /* - * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. - */ - line-height: normal; - /* - * 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. - * Known issue: excess padding remains in IE 6. - */ - &[type="checkbox"], &[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ - } - /* - * Fix the cursor style for WebKit'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`. - */ - &[type="number"] { - &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { - height: auto; - } - } - /* - * 1. Addresses `appearance` set to `searchfield` in Safari 5, Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5, Chrome (include `-moz` - * to future-proof). - */ - &[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; - /* - * Removes inner padding and search cancel button in Safari 5, Chrome on OS X. - */ - &::-webkit-search-cancel-button, &::-webkit-search-decoration { - -webkit-appearance: none; - } + /* + * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. + */ +line-height: normal; +/* + * 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. + * Known issue: excess padding remains in IE 6. + */ +&[type="checkbox"], &[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ + } + /* + * Fix the cursor style for WebKit'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`. + */ +&[type="number"] { + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { + height: auto; + } +} +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5, Chrome (include `-moz` + * to future-proof). + */ +&[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; + /* + * Removes inner padding and search cancel button in Safari 5, Chrome on OS X. + */ +&::-webkit-search-cancel-button, &::-webkit-search-decoration { + -webkit-appearance: none; +} } } /* * Removes inner padding and border in Firefox 3+. */ -button, input { - &::-moz-focus-inner { - border: 0; - padding: 0; - } +button, +input { + &::-moz-focus-inner { + border: 0; + padding: 0; + } } /* @@ -576,8 +602,8 @@ button, input { * 2. Improves readability and alignment in all browsers. */ textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ } /* @@ -586,25 +612,26 @@ textarea { */ optgroup { - font-weight: 700; + font-weight: 700; } /* ========================================================================== - Tables - ========================================================================== */ +Tables +========================================================================== */ /* * Remove most spacing between table cells. */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -td, th { - padding: 0; +td, +th { + padding: 0; } iframe { - border: 0; + border: 0; } From 854bc6fd62af7e5fa27deea4b3d08a84310c1a0d Mon Sep 17 00:00:00 2001 From: David Arceneaux Date: Thu, 17 Sep 2020 09:14:35 -0500 Subject: [PATCH 77/77] sync version numbers --- README.md | 2 +- _normalize.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bf1f92027..b4bf30192 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# `_normalize.scss` v2.2.1 +# `_normalize.scss` v2.3.1 `_normalize.scss` is a customisable Sass file that makes browsers render all elements more consistently and in line with modern standards--derived from diff --git a/_normalize.scss b/_normalize.scss index 5b8b5c3af..01a2d6260 100644 --- a/_normalize.scss +++ b/_normalize.scss @@ -1,4 +1,4 @@ -/*! v2.2.1, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ +/*! v2.3.1, based on normalize.css v3.0.1 | MIT License | git.io/normalize */ /* ============================================================================= Mixins