diff --git a/public/css/app.css b/public/css/app.css index 16e95de..8fdc2fd 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -2,12 +2,13 @@ ====================================================== */ html, body { background: url(../img/noisebg.png); } body { font-size: 18px; font-family: 'Terminal Dosis', sans-serif; padding: 0; margin: 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } -a { color: rgba(255, 255, 255, 0.7); } +a { color: #fff; color: rgba(255, 255, 255, 0.7); } ul, ol, form { margin: 0; padding: 0; } ul, ol { list-style-type: none; } h1 { margin: 0; padding: 0; } -h2 { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } +h2 { margin: 0; margin-bottom: 10px; padding: 0; font-weight: normal; font-size: 30px; color: #626569; color: rgba(0, 0, 0, 0.4); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } input { font-size: 14px; border: 1px solid #777; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 3px; -webkit-background-clip: padding-box; } +input[type='radio'] { border: 0; } /* =LAYOUT ====================================================== */ @@ -19,18 +20,17 @@ input { font-size: 14px; border: 1px solid #777; box-sha background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); } -#footer { text-align: center; padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; } +#footer { padding-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-top: 1px solid #797f85; border-top-color: rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); vertical-align: top; text-align: center; } #footer a { vertical-align: top; color: #fff; } -.clr { overflow: hidden; } +.clr:after { clear:both; content:"."; display: block; height:0; visibility: hidden; line-height:0; font-size:0; } .preview_and_configuration { float: left; width: 395px; } /* =MODULES ====================================================== */ /* preview */ -.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } +.arrow_box { padding: 40px; width: 280px; height: 100px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* logo */ .logo { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } @@ -51,5 +51,5 @@ input { font-size: 14px; border: 1px solid #777; box-sha /* css_result */ .css_result { position: relative; float: right; width: 402px; } -.css_result .code { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); } +.css_result .code { white-space: pre; padding: 10px; display: block; width: 380px; font-size: 12px; font-family: 'Courier new'; font-weight: bold; background: #8c9196; background: rgba(0, 0, 0, 0.15); border-radius: 4px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border: 1px solid #696d72; border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 5px rgba(0, 0, 0, 0.1); } .css_result .copy_code { position: absolute; bottom: 5px; right: 10px; width: 14px; height: 22px; background: url(../img/clippy.png) no-repeat 0 4px; } diff --git a/public/index.html b/public/index.html index 07eeb16..2fbe7bf 100644 --- a/public/index.html +++ b/public/index.html @@ -93,26 +93,26 @@

Arrow configuration

(function() { var defer = (function (document, script) { - var urls = [], - firstScript = document.getElementsByTagName(script)[0]; + var urls = [], + firstScript = document.getElementsByTagName(script)[0]; - return function (url, callback) { - var inc; + return function (url, callback) { + var inc; - if (url && urls.indexOf(url) === -1) { - inc = document.createElement(script); - inc.async = true; - inc.src = url; - inc.onload = callback || function () {}; - firstScript.parentNode.insertBefore(inc, firstScript); - } + if (url && $.inArray(url, urls) === -1) { + inc = document.createElement(script); + inc.async = true; + inc.src = url; + inc.onload = callback || function () {}; + firstScript.parentNode.insertBefore(inc, firstScript); } - }(document, 'script')); + } + }(document, 'script')); - window.onload = function () { - defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'); - defer('//platform.twitter.com/widgets.js'); - }; + window.onload = function () { + defer(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'); + defer('//platform.twitter.com/widgets.js'); + }; })(); diff --git a/public/js/spec/views/arrow_css_view_spec.js b/public/js/spec/views/arrow_css_view_spec.js index 74f6bcf..fece0ca 100644 --- a/public/js/spec/views/arrow_css_view_spec.js +++ b/public/js/spec/views/arrow_css_view_spec.js @@ -29,7 +29,7 @@ describe("CSSArrowPlease.ArrowCSSView", function () { it('renders the css when render is called', function () { expect( $code.text() ).toBe( '' ); arrowCSSView.render(); - expect( $code.text() ).toBe( arrow.toCSS() ); + expect( $code.text().replace(/\s+/g, '') ).toBe( arrow.toCSS().replace(/\s+/g, '') ); }); it('calls clippy() on the copy_code node', function () { diff --git a/public/js/spec/views/arrow_preview_view_spec.js b/public/js/spec/views/arrow_preview_view_spec.js index 0356c46..1482eb7 100644 --- a/public/js/spec/views/arrow_preview_view_spec.js +++ b/public/js/spec/views/arrow_preview_view_spec.js @@ -18,7 +18,7 @@ describe("CSSArrowPlease.ArrowPreviewView", function() { it('render delegates to ArrowCSSView.render', function () { arrowPreviewView.render(); - expect( $container.text() ).toBe( arrow.toCSS() ); + expect( $container.text().replace(/\s+/g, '') ).toBe( arrow.toCSS().replace(/\s+/g, '') ); }); });