From e248072b549d4c5558c3a68b457c4606ad71d965 Mon Sep 17 00:00:00 2001 From: Spencer Baynton Date: Sat, 23 Feb 2013 04:44:23 -0500 Subject: [PATCH 01/30] Updated and switched to version that includes legacy browser support --- css/normalize.css | 303 +++++++++++++++++++++++++--------------------- 1 file changed, 166 insertions(+), 137 deletions(-) diff --git a/css/normalize.css b/css/normalize.css index 92c2c47..2ad2e0e 100644 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,11 +1,11 @@ -/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ +/*! normalize.css v1.1.0 | MIT License | git.io/normalize */ -/* ============================================================================= +/* ========================================================================== HTML5 display definitions ========================================================================== */ -/* - * Corrects block display not defined in IE6/7/8/9 & FF3 +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, @@ -16,14 +16,15 @@ figure, footer, header, hgroup, +main, nav, section, summary { display: block; } -/* - * Corrects inline-block display not defined in IE6/7/8/9 & FF3 +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, @@ -34,9 +35,9 @@ video { *zoom: 1; } -/* - * Prevents modern browsers from displaying 'audio' without controls - * Remove excess height in iOS5 devices +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. */ audio:not([controls]) { @@ -44,25 +45,24 @@ audio:not([controls]) { height: 0; } -/* - * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - * Known issue: no IE6 support +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 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. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. */ html { @@ -71,8 +71,9 @@ html { -ms-text-size-adjust: 100%; /* 2 */ } -/* - * Addresses font-family inconsistency between 'textarea' and other form elements. +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. */ html, @@ -83,82 +84,86 @@ textarea { font-family: sans-serif; } -/* - * Addresses margins handled incorrectly in IE6/7 +/** + * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } - -/* ============================================================================= +/* ========================================================================== Links ========================================================================== */ -/* - * Addresses outline displayed oddly in Chrome +/** + * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } -/* - * Improves readability when focused and also mouse hovered in all browsers - * people.opera.com/patrickl/experiments/keyboard/test +/** + * Improve readability when focused and also mouse hovered in all browsers. */ -a:hover, -a:active { +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 +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. */ h1 { - margin: 1em 0; + font-size: 2em; + margin: 0.67em 0; } h2 { - margin: 0; + font-size: 1.5em; + margin: 0.83em 0; } h3 { - margin: 1em 0 0 0; + font-size: 1.17em; + margin: 1em 0; } h4 { + font-size: 1em; margin: 1.33em 0; } h5 { + font-size: 0.83em; margin: 1.67em 0; } h6 { + font-size: 0.67em; margin: 2.33em 0; } -/* - * Addresses styling not present in IE7/8/9, S5, Chrome +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } -/* - * Addresses style set to 'bolder' in FF3+, S4/5, Chrome -*/ +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ b, strong { @@ -169,16 +174,27 @@ blockquote { margin: 1em 40px; } -/* - * Addresses styling not present in S5, Chrome +/** + * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } -/* - * Addresses styling not present in IE6/7/8/9 +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. */ mark { @@ -186,8 +202,8 @@ mark { color: #000; } -/* - * Addresses margins set differently in IE6/7 +/** + * Address margins set differently in IE 6/7. */ p, @@ -195,22 +211,21 @@ pre { margin: 1em 0; } -/* - * Corrects font family set oddly in IE6, S4/5, Chrome - * en.wikipedia.org/wiki/User:Davidgothberg/Test59 +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ -pre, code, kbd, +pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } -/* - * Improves readability of pre-formatted text in all browsers +/** + * Improve readability of pre-formatted text in all browsers. */ pre { @@ -219,18 +234,17 @@ pre { word-wrap: break-word; } -/* - * 1. Addresses CSS quotes not supported in IE6/7 - * 2. Addresses quote property not supported in S4 +/** + * Address CSS quotes not supported in IE 6/7. */ -/* 1 */ - q { quotes: none; } -/* 2 */ +/** + * Address `quotes` property not supported in Safari 4. + */ q:before, q:after { @@ -238,13 +252,16 @@ q:after { content: none; } +/** + * Address inconsistent and variable font size in all browsers. + */ + small { - font-size: 75%; + font-size: 80%; } -/* - * Prevents sub and sup affecting line-height in all browsers - * gist.github.com/413930 +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, @@ -263,13 +280,12 @@ sub { bottom: -0.25em; } - -/* ============================================================================= +/* ========================================================================== Lists ========================================================================== */ -/* - * Addresses margins set differently in IE6/7 +/** + * Address margins set differently in IE 6/7. */ dl, @@ -283,8 +299,8 @@ dd { margin: 0 0 0 40px; } -/* - * Addresses paddings set differently in IE6/7 +/** + * Address paddings set differently in IE 6/7. */ menu, @@ -293,8 +309,8 @@ ul { padding: 0 0 0 40px; } -/* - * Corrects list images handled incorrectly in IE7 +/** + * Correct list images handled incorrectly in IE 7. */ nav ul, @@ -303,15 +319,13 @@ nav ol { 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/ +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. */ img { @@ -319,42 +333,40 @@ img { -ms-interpolation-mode: bicubic; /* 2 */ } -/* - * Corrects overflow displayed oddly in IE9 +/** + * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } - -/* ============================================================================= +/* ========================================================================== Figures ========================================================================== */ -/* - * Addresses margin not present in IE6/7/8/9, S5, O11 +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } - -/* ============================================================================= +/* ========================================================================== Forms ========================================================================== */ -/* - * Corrects margin displayed oddly in IE6/7 +/** + * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } -/* - * Define consistent border, margin, and padding +/** + * Define consistent border, margin, and padding. */ fieldset { @@ -363,10 +375,10 @@ 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. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. */ legend { @@ -376,10 +388,11 @@ legend { *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 +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. */ button, @@ -392,45 +405,61 @@ textarea { *vertical-align: middle; /* 3 */ } -/* - * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. */ button, input { - line-height: normal; /* 1 */ + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; } -/* - * 1. 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. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. */ button, -input[type="button"], +html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ - *overflow: visible; /* 3 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ } -/* - * Re-set default cursor for disabled elements +/** + * Re-set default cursor for disabled elements. */ button[disabled], -input[disabled] { +html input[disabled] { cursor: default; } -/* - * 1. Addresses box sizing set to content-box in IE8/9 - * 2. Removes excess padding in IE8/9 - * 3. Removes excess padding in IE7 - Known issue: excess padding remains in IE6 +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], @@ -441,9 +470,10 @@ input[type="radio"] { *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) +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). */ input[type="search"] { @@ -453,18 +483,18 @@ input[type="search"] { box-sizing: content-box; } -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -/* - * Removes inner padding and border in FF3+ - * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ +/** + * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, @@ -473,9 +503,9 @@ 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. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. */ textarea { @@ -483,13 +513,12 @@ textarea { vertical-align: top; /* 2 */ } - -/* ============================================================================= +/* ========================================================================== Tables ========================================================================== */ -/* - * Remove most spacing between table cells +/** + * Remove most spacing between table cells. */ table { From 08426d2bc7b86aba9bd77102afba8d98b394349c Mon Sep 17 00:00:00 2001 From: Spencer Baynton Date: Sat, 23 Feb 2013 04:49:37 -0500 Subject: [PATCH 02/30] HTML5 character encoding --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 32424fd..a5e8ee9 100755 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + Cool Kitten: A parallax scrolling responsive framework From 29cc5a1fa9e2d44b9f7604da34e111ff7a9327fd Mon Sep 17 00:00:00 2001 From: Spencer Baynton Date: Sat, 23 Feb 2013 04:51:19 -0500 Subject: [PATCH 03/30] Normalize styles before declaring new ones --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a5e8ee9..3d359ce 100755 --- a/index.html +++ b/index.html @@ -4,9 +4,9 @@ Cool Kitten: A parallax scrolling responsive framework + - From c37814d7cc1933f4c82144a10017fbaea05f2638 Mon Sep 17 00:00:00 2001 From: Spencer Baynton Date: Sat, 23 Feb 2013 05:08:43 -0500 Subject: [PATCH 04/30] Formatting --- index.html | 183 +++++++++++++++++++++++------------------------------ 1 file changed, 78 insertions(+), 105 deletions(-) diff --git a/index.html b/index.html index 3d359ce..85fc481 100755 --- a/index.html +++ b/index.html @@ -1,113 +1,86 @@ - - - - Cool Kitten: A parallax scrolling responsive framework - - - - - - - - - - - - - -