From 70e28aa2455e744334b8e1c65833f229ff702f3b Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Thu, 25 Aug 2011 08:23:41 +0100 Subject: [PATCH 1/7] Logo anim and no padding --- www/assets/4/script/pageLayout.js | 6 +++++- www/assets/4/style/base.css | 23 ++++++++++++----------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/www/assets/4/script/pageLayout.js b/www/assets/4/script/pageLayout.js index c7c25f4..bf7fb0b 100644 --- a/www/assets/4/script/pageLayout.js +++ b/www/assets/4/script/pageLayout.js @@ -45,7 +45,11 @@ spriteCow.pageLayout = (function() { targets: [ [$container, { width: '100%' }], [$header, { height: $header.height() }], - [$headerH1, $.support.transition ? { transform: $headerH1.vendorCss('transform') } : {}], + [$headerH1, $.support.transition ? { + transform: $headerH1.vendorCss('transform'), + opacity: $headerH1.css('opacity'), + top: $headerH1.css('top') + } : {}], [$cssOutput, { height: $cssOutput.height(), 'padding-top': $cssOutput.css('padding-top'), diff --git a/www/assets/4/style/base.css b/www/assets/4/style/base.css index 08724ea..9675ee0 100644 --- a/www/assets/4/style/base.css +++ b/www/assets/4/style/base.css @@ -23,13 +23,9 @@ body { height: 100%; min-height: 100%; margin: 0; - padding: 0 30px; + padding: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAYAAAA62j4JAAAAe0lEQVR42u3QMQ5AQABFQbWIaGiI6CjU7n+z9TdxCjvFO8CbrpSypTutaWqtCnClJ51pb60KsHzzc+pbqwKM6UhD6loLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPC/XvoS9OcMtc3PAAAAAElFTkSuQmCC'); } -.not-supported body { - /* Working around an Opera bug */ - background: none; -} /* Reset */ ul, ol, li, form, dl, dt, dd { @@ -132,7 +128,7 @@ body { .container > header { display: table-cell; vertical-align: middle; - height: 79px; + height: 0; } .container.intro > header { height: 169px; @@ -142,14 +138,17 @@ body { color: #fff; font: normal 5.3em/1 prowin, monospace; margin: 0; + height: 0; + position: relative; white-space: nowrap; /* I don't really want a 1px blur, but it works around http://code.google.com/p/chromium/issues/detail?id=86702 */ text-shadow: #004a86 0 6px 1px; - -webkit-transform: scale(0.7); - -moz-transform: scale(0.7); - -ms-transform: scale(0.7); - -o-transform: scale(0.7); - transform: scale(0.7); + -webkit-transform: scale(0.3); + -moz-transform: scale(0.3); + -ms-transform: scale(0.3); + -o-transform: scale(0.3); + transform: scale(0.3); + opacity: 0; } .container > header h1 span { display: inline-block; @@ -178,6 +177,8 @@ body { -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); + opacity: 1; + top: -46px; } /* Canvas */ .canvas-view { From 58d63daedaa6289a5a89fe7b1c108a26257841e4 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Thu, 25 Aug 2011 08:24:41 +0100 Subject: [PATCH 2/7] Removing padding from calculation --- www/assets/4/script/pageLayout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/assets/4/script/pageLayout.js b/www/assets/4/script/pageLayout.js index bf7fb0b..81417a9 100644 --- a/www/assets/4/script/pageLayout.js +++ b/www/assets/4/script/pageLayout.js @@ -13,7 +13,7 @@ spriteCow.pageLayout = (function() { currentView = 'intro'; function getContainerWidthPercent() { - var bodyHorizontalPadding = 60, + var bodyHorizontalPadding = 0, containerRelativeWidth = $container.width() / ( $window.width() - bodyHorizontalPadding ); return Math.round(containerRelativeWidth * 10000) / 100 + '%'; From 4f0caea79d1bddbc8726f6cfe4cec44a515beea2 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Thu, 25 Aug 2011 08:29:54 +0100 Subject: [PATCH 3/7] Toolbar & responsive design --- www/assets/4/style/base.css | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/www/assets/4/style/base.css b/www/assets/4/style/base.css index 9675ee0..c4e2c46 100644 --- a/www/assets/4/style/base.css +++ b/www/assets/4/style/base.css @@ -410,7 +410,6 @@ body { border-width: 1px 0; border-color: #e2e2e2 #000 #888; color: #333; - border-radius: 5px 5px 0 0; background-image: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7); background-image: -moz-linear-gradient(top, #d0d0d0, #a7a7a7); background-image: -ms-linear-gradient(top, #d0d0d0, #a7a7a7); @@ -575,9 +574,6 @@ body { } } @media screen and (max-width: 744px) { - .container > header h1::before, .container > header h1::after { - display: none; - } .intro-copy > section { padding: 20px; } @@ -607,14 +603,7 @@ body { } } @media screen and (max-width: 562px) { - body { - padding-left: 10px; - padding-right: 10px; - } - .container > header, .container.intro > header { - height: 10px; - } - footer.main, .container > header h1 { + footer.main { display: none; } } \ No newline at end of file From 720c51ae3904e97e6be2780c651d625089fb4d6c Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Thu, 25 Aug 2011 08:46:48 +0100 Subject: [PATCH 4/7] Footer style --- www/assets/4/script/pageLayout.js | 3 ++- www/assets/4/style/base.css | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/www/assets/4/script/pageLayout.js b/www/assets/4/script/pageLayout.js index 81417a9..90f2e9b 100644 --- a/www/assets/4/script/pageLayout.js +++ b/www/assets/4/script/pageLayout.js @@ -20,6 +20,7 @@ spriteCow.pageLayout = (function() { } function getAppViewTransitions() { + // Here we read all the destination styles to animate to when the intro class is removed var transitions, containerWidth = getContainerWidthPercent(); @@ -64,7 +65,7 @@ spriteCow.pageLayout = (function() { 'padding-bottom': $toolbar.css('padding-bottom'), 'border-top-width': $toolbar.css('border-top-width'), 'border-bottom-width': $toolbar.css('border-bottom-width') - }] + }] ], before: function() { $introCopy.css('display', 'none'); diff --git a/www/assets/4/style/base.css b/www/assets/4/style/base.css index c4e2c46..7d6dfa6 100644 --- a/www/assets/4/style/base.css +++ b/www/assets/4/style/base.css @@ -351,8 +351,7 @@ body { .css-output { display: block; white-space: pre; - background: rgba(0, 0, 0, .23); - margin: 0 0 10px; + background: rgba(0, 0, 0, 0.1); padding: 20px 30px; overflow: auto; position: relative; From 6db5313d6efdc48c1a7366ac9dd38b2474db5b3f Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 5 Sep 2011 08:19:32 +0100 Subject: [PATCH 5/7] Bringing some margin back --- www/assets/4/script/pageLayout.js | 2 +- www/assets/4/style/base.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/www/assets/4/script/pageLayout.js b/www/assets/4/script/pageLayout.js index 90f2e9b..d08045d 100644 --- a/www/assets/4/script/pageLayout.js +++ b/www/assets/4/script/pageLayout.js @@ -13,7 +13,7 @@ spriteCow.pageLayout = (function() { currentView = 'intro'; function getContainerWidthPercent() { - var bodyHorizontalPadding = 0, + var bodyHorizontalPadding = 40, containerRelativeWidth = $container.width() / ( $window.width() - bodyHorizontalPadding ); return Math.round(containerRelativeWidth * 10000) / 100 + '%'; diff --git a/www/assets/4/style/base.css b/www/assets/4/style/base.css index 7d6dfa6..f5feb8b 100644 --- a/www/assets/4/style/base.css +++ b/www/assets/4/style/base.css @@ -23,7 +23,7 @@ body { height: 100%; min-height: 100%; margin: 0; - padding: 0; + padding: 0 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAYAAAA62j4JAAAAe0lEQVR42u3QMQ5AQABFQbWIaGiI6CjU7n+z9TdxCjvFO8CbrpSypTutaWqtCnClJ51pb60KsHzzc+pbqwKM6UhD6loLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPC/XvoS9OcMtc3PAAAAAElFTkSuQmCC'); } @@ -138,7 +138,7 @@ body { color: #fff; font: normal 5.3em/1 prowin, monospace; margin: 0; - height: 0; + height: 20px; position: relative; white-space: nowrap; /* I don't really want a 1px blur, but it works around http://code.google.com/p/chromium/issues/detail?id=86702 */ From f4ba2d208c24cb689c51f2e68cabab31bf2c5f59 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 5 Sep 2011 08:25:03 +0100 Subject: [PATCH 6/7] Rounding back on toolbar --- www/assets/4/style/base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/www/assets/4/style/base.css b/www/assets/4/style/base.css index f5feb8b..598cc98 100644 --- a/www/assets/4/style/base.css +++ b/www/assets/4/style/base.css @@ -409,6 +409,7 @@ body { border-width: 1px 0; border-color: #e2e2e2 #000 #888; color: #333; + border-radius: 5px 5px 0 0; background-image: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7); background-image: -moz-linear-gradient(top, #d0d0d0, #a7a7a7); background-image: -ms-linear-gradient(top, #d0d0d0, #a7a7a7); From ed96c2eef0aa8ac2d401164c59a29095a499cc3f Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 5 Sep 2011 08:36:38 +0100 Subject: [PATCH 7/7] Better responsive design --- www/assets/4/style/base.css | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/www/assets/4/style/base.css b/www/assets/4/style/base.css index 598cc98..9dacf61 100644 --- a/www/assets/4/style/base.css +++ b/www/assets/4/style/base.css @@ -568,7 +568,7 @@ body { } /* Being responsible... */ -@media screen and (max-width: 892px) { +@media screen and (max-width: 872px) { .container.intro { width: 100%; } @@ -590,16 +590,31 @@ body { padding-left: 20px; padding-right: 20px; } - .select-btn, .demo-btn { + .container.intro .select-btn, .container.intro .demo-btn { font-size: 1.6em; padding: 11px 22px; - + display: block; + margin: 12px auto; } .select-btn { margin: 0 21px 0 0; } .start-buttons { - top: 64px; + top: 23px; + } + .container.intro > header { + height: 91px; + -webkit-transform: scale(0.7); + -moz-transform: scale(0.7); + -ms-transform: scale(0.7); + -o-transform: scale(0.7); + transform: scale(0.7); + } + .container.intro > header h1 { + top: -32px; + } + .container > header h1:before, .container > header h1:after { + display: none; } } @media screen and (max-width: 562px) {