Permalink
Browse files

Merge branch 'redesign'

  • Loading branch information...
2 parents b1d4285 + 451aba1 commit 47926cae9cd4fb010198d952eaf8ccd0bbf31a90 @jakearchibald committed Jun 6, 2012
Showing with 1,322 additions and 87 deletions.
  1. +2 −1 .gitignore
  2. +12 −5 README.md
  3. +2 −2 bin/compress_assets.sh
  4. +2 −0 sass.sh
  5. BIN www/assets/6/style/fonts/pro.ttf
  6. BIN www/assets/6/style/imgs/grid.png
  7. BIN www/assets/6/style/imgs/sprites1.png
  8. +0 −1 www/assets/6/style/mainmin.css
  9. 0 www/assets/{6 → 7}/favicon.ico
  10. 0 www/assets/{6 → 7}/script/CssOutput.js
  11. 0 www/assets/{6 → 7}/script/FeatureTest.js
  12. +2 −2 www/assets/{6 → 7}/script/ImgInput.js
  13. 0 www/assets/{6 → 7}/script/MicroEvent.js
  14. 0 www/assets/{6 → 7}/script/Rect.js
  15. 0 www/assets/{6 → 7}/script/SpriteCanvas.js
  16. 0 www/assets/{6 → 7}/script/SpriteCanvasView.js
  17. +5 −5 www/assets/{6 → 7}/script/Toolbar.js
  18. 0 www/assets/{6 → 7}/script/base.js
  19. 0 www/assets/{6 → 7}/script/featureTests.js
  20. 0 www/assets/{6 → 7}/script/intro.js
  21. 0 www/assets/{6 → 7}/script/jquery-1.6.2.js
  22. 0 www/assets/{6 → 7}/script/jquery.easing.js
  23. 0 www/assets/{6 → 7}/script/jquery.fileClickjack.js
  24. 0 www/assets/{6 → 7}/script/jquery.transition.js
  25. +1 −1 www/assets/{6 → 7}/script/mainmin.js
  26. +47 −31 www/assets/{6 → 7}/script/pageLayout.js
  27. +390 −0 www/assets/7/style/_components.scss
  28. +4 −0 www/assets/7/style/_fonts.scss
  29. +117 −0 www/assets/7/style/_globals.scss
  30. +63 −0 www/assets/7/style/_structure.scss
  31. +38 −0 www/assets/7/style/_utils.scss
  32. +1 −0 www/assets/7/style/all-min.css
  33. +592 −0 www/assets/7/style/all.css
  34. +5 −0 www/assets/7/style/all.scss
  35. 0 www/assets/{6 → 7}/style/base.css
  36. BIN www/assets/7/style/fonts/oswald.ttf
  37. BIN www/assets/7/style/imgs/grid.png
  38. BIN www/assets/7/style/imgs/sprites1.png
  39. 0 www/assets/{6 → 7}/style/imgs/trans.png
  40. 0 www/assets/{6 → 7}/tutorial-sprite.png
  41. +9 −9 www/index.html
  42. +6 −6 www/offline.appcache
  43. +24 −24 www/unmin.html
View
3 .gitignore
@@ -3,4 +3,5 @@ bin/yui*
bin/uglify
fabric.cfg
*.pyc
-tmp
+tmp
+.sass-cache
View
17 README.md
@@ -12,13 +12,20 @@ Currently available online for you to use at http://spritecow.com
Changes
=======
-v4.0 2011-12-05
----------------
+v5 2012-06-06
+-------------
+
+* Switching to Sass for CSS
+* New logo, thanks to [Stephen Waller](https://twitter.com/bruised_blood)
+* Tidied up some design bits and pieces
+
+v4 2011-12-05
+-------------
* Fixed issue in Firefox that prevented filename being picked up
* Added appcache for offline use & faster loading while offline
-v3.0 2011-09-05
+v3 2011-09-05
---------------
* Making more room for the spritesheet view
@@ -28,8 +35,8 @@ v2.1 2011-08-07
* Adding Twitter details
-v2.0 2011-08-05
----------------
+v2 2011-08-05
+-------------
* Added "Reload image" button
* If you open the same image twice, it now reloads the image
View
4 bin/compress_assets.sh
@@ -1,4 +1,4 @@
#!/bin/bash
-ver=6
+ver=7
cat www/assets/$ver/script/{jquery-1.6.2,jquery.easing,jquery.transition,jquery.fileClickjack,intro,MicroEvent,Rect,ImgInput,SpriteCanvas,SpriteCanvasView,CssOutput,Toolbar,pageLayout,FeatureTest,featureTests,base}.js | node bin/uglify.js > www/assets/$ver/script/mainmin.js
-cat www/assets/$ver/style/base.css | java -jar bin/yuicompressor-2.4.8pre.jar --type css -o www/assets/$ver/style/mainmin.css
+~/dev/sass/bin/sass --style compressed www/assets/$ver/style/all.scss:www/assets/$ver/style/all-min.css
View
2 sass.sh
@@ -0,0 +1,2 @@
+ver=7
+~/dev/sass/bin/sass -l --watch www/assets/$ver/style:www/assets/$ver/style
View
BIN www/assets/6/style/fonts/pro.ttf
Binary file not shown.
View
BIN www/assets/6/style/imgs/grid.png
Deleted file not rendered
View
BIN www/assets/6/style/imgs/sprites1.png
Deleted file not rendered
View
1 www/assets/6/style/mainmin.css
@@ -1 +0,0 @@
-@font-face{font-family:'prowin';src:url('fonts/pro.ttf') format('truetype')}html{background:#004a86;background:-webkit-radial-gradient(center center,circle cover,#0091d5 0,#0091d5 15%,#004a86 100%);background:-moz-radial-gradient(center center,circle cover,#0091d5 0,#0091d5 15%,#004a86 100%);background:-ms-radial-gradient(center center,circle cover,#0091d5 0,#0091d5 15%,#004a86 100%);background:-o-radial-gradient(center center,circle cover,#0091d5 0,#0091d5 15%,#004a86 100%);background:radial-gradient(center center,circle cover,#0091d5 0,#0091d5 15%,#004a86 100%);height:100%}html,body{margin:0;padding:0}body{height:100%;min-height:100%;margin:0;padding:0 20px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAYAAAA62j4JAAAAe0lEQVR42u3QMQ5AQABFQbWIaGiI6CjU7n+z9TdxCjvFO8CbrpSypTutaWqtCnClJ51pb60KsHzzc+pbqwKM6UhD6loLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPC/XvoS9OcMtc3PAAAAAElFTkSuQmCC')}ul,ol,li,form,dl,dt,dd{padding:0;margin:0;display:block}ul,ol{list-style:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}select,input,textarea{color:#333}body{font:13px/1.231 sans-serif;*font-size:small;color:#fff}pre,code,kbd,samp{font-family:monospace,sans-serif}p{line-height:1.4}a img{border:0}a:link,a:visited{text-decoration:none;color:#ffb135;font-weight:bold}a:hover,a:active{text-decoration:underline}select,input,textarea,button{font:99% sans-serif;margin:0}input,select{vertical-align:middle;_vertical-align:text-bottom}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom;*vertical-align:baseline}textarea,input{font-family:arial,sans-serif;font-size:1em}button.custom{padding:0;margin:0;border:0;background:0;cursor:pointer;overflow:visible;vertical-align:middle;font-size:1em;width:auto}button.custom::-moz-focus-inner{border:0;padding:0}legend{*margin-left:-7px}label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer}.container{width:100%;height:100%;margin:0 auto;position:relative;display:table;table-layout:fixed}.container.intro{width:835px}.container>header{display:table-cell;vertical-align:middle;height:0}.container.intro>header{height:169px}.container>header h1{text-align:center;color:#fff;font:normal 5.3em/1 prowin,monospace;margin:0;height:20px;position:relative;white-space:nowrap;text-shadow:#004a86 0 6px 1px;-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;vertical-align:middle}.container>header h1::before,.container>header h1::after{background:url('imgs/sprites1.png') no-repeat -10px -6px;width:133px;height:89px;display:inline-block;vertical-align:middle;content:'';margin:0 30px 0 0}.container>header h1::after{margin:0 0 0 18px;-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1)}.container.intro>header h1{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1;top:-46px}.canvas-view{text-align:center;display:table-row;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.canvas-cell{display:table-cell;height:100%;position:relative}.canvas-inner{overflow:auto;background:#fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==');box-shadow:0 4px 18px rgba(0,0,0,0.35);position:relative;height:100%}.opera .canvas-inner{position:absolute;top:0;left:0;right:0;bottom:0;height:auto}.container.intro .canvas-cell{height:170px;cursor:auto}.container.intro .canvas-inner{overflow:hidden}.sprite-canvas-container{position:absolute;min-width:100%;min-height:100%}.container.intro .sprite-canvas-container{opacity:0}.sprite-canvas-container canvas{display:block}.sprite-canvas-container .highlight{background:rgba(0,90,255,0.25);position:absolute;top:0;left:0;width:5px;height:5px;pointer-events:none;border:1px solid rgba(0,114,255,0.5);-moz-box-sizing:border-box;box-sizing:border-box;display:none;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-ms-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;-webkit-transition-property:border,background;-moz-transition-property:border,background;-ms-transition-property:border,background;-o-transition-property:border,background;transition-property:border,background}.sprite-canvas-container .highlight.high-vis{background-color:rgba(0,255,48,0.25);border-color:rgba(0,255,51,0.5)}.upload-input{position:absolute;top:-5000px;left:-5000px;cursor:pointer;z-index:10}.select-btn,.demo-btn{width:192px;border-radius:100px;color:#fff;font:normal 2.4em/1 prowin,monospace;padding:13px 28px;box-shadow:inset 0 0 6px rgba(255,108,0,1),0 3px 6px rgba(0,0,0,0.7);background:-webkit-linear-gradient(top,rgba(255,185,90,1) 0,rgba(255,108,0,1) 50%,rgba(199,58,0,1) 100%);background:-moz-linear-gradient(top,rgba(255,185,90,1) 0,rgba(255,108,0,1) 50%,rgba(199,58,0,1) 100%);background:-ms-linear-gradient(top,rgba(255,185,90,1) 0,rgba(255,108,0,1) 50%,rgba(199,58,0,1) 100%);background:-o-linear-gradient(top,rgba(255,185,90,1) 0,rgba(255,108,0,1) 50%,rgba(199,58,0,1) 100%);background:linear-gradient(top,rgba(255,185,90,1) 0,rgba(255,108,0,1) 50%,rgba(199,58,0,1) 100%);cursor:pointer;text-shadow:rgba(0,0,0,0.5) 0 2px 0;display:none}.select-btn{margin:0 48px 0 0}.container.intro .select-btn,.container.intro .demo-btn{display:inline-block}.start-buttons{position:absolute;top:53px;left:0;width:100%;text-align:center}.drop-indicator{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(37,207,28,0.2);box-shadow:inset 0 0 18px #175a00;display:none;pointer-events:none}.drag-over .drop-indicator{display:block;opacity:1}.further-detail{display:table-cell;overflow:hidden}.container.intro .further-detail{height:100%}.intro-copy{display:none}.container.intro .intro-copy{display:table-row}.intro-copy>section{display:table-cell;padding:30px;width:50%}.intro-copy h1{font:normal 3.1em/1 prowin,monospace;margin:0;text-shadow:#004a86 0 4px}.intro-copy p{font:normal 1.1em/1.5 sans-serif}.css-output{display:block;white-space:pre;background:rgba(0,0,0,0.1);padding:20px 30px;overflow:auto;position:relative}.css-output code{font:normal 1.2em/1 prowin,monospace}.container.intro .css-output{height:0;padding-top:0;padding-bottom:0;overflow:hidden}.css-output .file-path{position:relative;display:inline-block}.css-output .file{cursor:pointer}.css-output .file:hover .file-path::before{outline:1px dotted #fff;position:absolute;top:-3px;left:0;bottom:-4px;right:0;content:""}.css-output input[type='text']{position:absolute;border:1px solid #ccc;background:#fff;color:#333;font:normal 1.2em/1 prowin,monospace;padding:3px;outline:0}.toolbar-container{display:table-row;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.toolbar{overflow:hidden;padding:5px 6px 0;position:relative;z-index:1;border-style:solid;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);background-image:-o-linear-gradient(top,#d0d0d0,#a7a7a7);background-image:linear-gradient(top,#d0d0d0,#a7a7a7)}.container.intro .toolbar{height:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0}.toolbar-container [role='button']{float:left;margin:0 5px 5px 0;border:1px solid #888;border-radius:4px;background:-webkit-linear-gradient(top,#fefefe,#b8b8b8);background:-moz-linear-gradient(top,#fefefe,#b8b8b8);background:-ms-linear-gradient(top,#fefefe,#b8b8b8);background:-o-linear-gradient(top,#fefefe,#b8b8b8);background:linear-gradient(top,#fefefe,#b8b8b8);cursor:pointer}.toolbar-container [role='button'] div{padding:4px 10px 4px 26px;background:url('imgs/sprites1.png') no-repeat}.toolbar-container [role='button'].active{background:#707070;box-shadow:inset 0 3px 7px rgba(0,0,0,0.6);color:#fff}.toolbar-container [role='button'].no-label div{width:26px;padding:4px 0;text-indent:-5000px}.toolbar-container .feedback{float:left;padding:5px;color:#555;opacity:0}.toolbar-container .select-sprite{border-width:1px;border-radius:4px 0 0 4px;margin-right:0}.toolbar .select-sprite div{background-position:-863px 3px}.toolbar .pick-bg{border-radius:0 4px 4px 0;margin-right:5px;border-left-width:0}.toolbar .pick-bg div{background-position:-864px -79px}.toolbar .open-img div{background-position:-864px -37px}.toolbar .invert-bg div{background-position:-867px -121px}.toolbar .reload-img div{background-position:-867px -164px}footer.main{display:table-row;overflow:hidden;background:rgba(0,0,0,.23)}footer.main p{float:right;padding:14px 30px 0;margin:0}footer.main .the-team-logo{background:url('imgs/sprites1.png') no-repeat -154px -8px;width:88px;height:22px;display:inline-block;text-indent:-5000px;vertical-align:middle;margin:0 0 0 4px}footer.main ul{float:left;padding:16px 30px}footer.main li{display:inline}footer.main li a:link,footer.main li a:visited{font-weight:normal;color:#fff;float:left;padding:0 10px 0 0;margin:0 10px 0 0;border-right:1px solid #fff}footer.main li:last-child a:link,footer.main li:last-child a:visited{padding:0;margin:0;border:0}.feature-test{display:none;width:800px;margin:0 auto;text-align:center}.not-supported .feature-test{display:block}.not-supported .container{display:none}.feature-test h1{font:normal 2.5em sans-serif;margin:0;padding:40px 0}.feature-test ul{display:inline-block;*display:inline;zoom:1}.feature-test li{margin:10px auto;font-size:1.1em;overflow:hidden;text-align:left}.feature-test p{width:600px;margin:0 auto 20px;font-size:1.1em;text-align:left}.feature-test .pass,.feature-test .fail{float:left;width:50px;font-weight:bold;color:#5f5}.feature-test .fail{color:#f55}@media screen and (max-width:872px){.container.intro{width:100%}}@media screen and (max-width:744px){.intro-copy>section{padding:20px}footer.main p{padding-right:20px}footer.main ul{padding-left:20px}.css-output{padding:15px 20px}body{padding-left:20px;padding-right:20px}.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: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){footer.main{display:none}}
View
0 www/assets/6/favicon.ico → www/assets/7/favicon.ico
File renamed without changes.
View
0 www/assets/6/script/CssOutput.js → www/assets/7/script/CssOutput.js
File renamed without changes.
View
0 www/assets/6/script/FeatureTest.js → www/assets/7/script/FeatureTest.js
File renamed without changes.
View
4 www/assets/6/script/ImgInput.js → www/assets/7/script/ImgInput.js
@@ -3,8 +3,8 @@ spriteCow.ImgInput = (function() {
var imgInput = this,
$fileInput = $('<input type="file" accept="image/*" class="upload-input">').appendTo( document.body ),
$buttons = $('<div class="start-buttons"/>').appendTo( $container ),
- $selectButton = $('<div role="button" class="select-btn">Open Image</div>').appendTo( $buttons ),
- $demoButton = $('<div role="button" class="demo-btn">Load Example</div>').appendTo( $buttons ),
+ $selectButton = $('<div role="button" class="select-btn lg-button">Open Image</div>').appendTo( $buttons ),
+ $demoButton = $('<div role="button" class="demo-btn lg-button">Show Example</div>').appendTo( $buttons ),
$dropIndicator = $('<div class="drop-indicator"></div>').appendTo( $dropZone );
imgInput.fileName = 'example.png';
View
0 www/assets/6/script/MicroEvent.js → www/assets/7/script/MicroEvent.js
File renamed without changes.
View
0 www/assets/6/script/Rect.js → www/assets/7/script/Rect.js
File renamed without changes.
View
0 www/assets/6/script/SpriteCanvas.js → www/assets/7/script/SpriteCanvas.js
File renamed without changes.
View
0 www/assets/6/script/SpriteCanvasView.js → www/assets/7/script/SpriteCanvasView.js
File renamed without changes.
View
10 www/assets/6/script/Toolbar.js → www/assets/7/script/Toolbar.js
@@ -3,11 +3,11 @@ spriteCow.Toolbar = (function() {
var toolbar = this,
$container = $('' +
'<div class="toolbar">' +
- '<div role="button" class="open-img"><div>Open</div></div>' +
- '<div role="button" class="no-label reload-img"><div>Reload current image</div></div>' +
- '<div role="button" class="select-sprite active"><div>Select Sprite</div></div>' +
- '<div role="button" class="pick-bg"><div>Pick Background</div></div>' +
- '<div role="button" class="no-label invert-bg"><div>Toggle Dark Background</div></div>' +
+ '<div role="button" class="open-img">Open</div>' +
+ '<div role="button" class="no-label reload-img">Reload current image</div>' +
+ '<div role="button" class="select-sprite active">Select Sprite</div>' +
+ '<div role="button" class="pick-bg">Pick Background</div>' +
+ '<div role="button" class="no-label invert-bg">Toggle Dark Background</div>' +
'<span class="feedback"></span>' +
'</div>' +
'').appendTo( $appendToElm ),
View
0 www/assets/6/script/base.js → www/assets/7/script/base.js
File renamed without changes.
View
0 www/assets/6/script/featureTests.js → www/assets/7/script/featureTests.js
File renamed without changes.
View
0 www/assets/6/script/intro.js → www/assets/7/script/intro.js
File renamed without changes.
View
0 www/assets/6/script/jquery-1.6.2.js → www/assets/7/script/jquery-1.6.2.js
File renamed without changes.
View
0 www/assets/6/script/jquery.easing.js → www/assets/7/script/jquery.easing.js
File renamed without changes.
View
0 www/assets/6/script/jquery.fileClickjack.js → www/assets/7/script/jquery.fileClickjack.js
File renamed without changes.
View
0 www/assets/6/script/jquery.transition.js → www/assets/7/script/jquery.transition.js
File renamed without changes.
View
2 www/assets/6/script/mainmin.js → www/assets/7/script/mainmin.js
1 addition, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
View
78 www/assets/6/script/pageLayout.js → www/assets/7/script/pageLayout.js
@@ -1,10 +1,11 @@
spriteCow.pageLayout = (function() {
var $container = $('.container'),
$header = $('.container > header'),
- $headerH1 = $('.container > header h1'),
$canvasCell = $('.canvas-cell'),
$canvasInner = $('.canvas-inner'),
- $introCopy = $('.intro-copy'),
+ $cowLogo = $('.cow-logo'),
+ $footerUl = $('.main-footer ul'),
+ $footerP = $('.main-footer p'),
$cssOutput,
$startButtons,
$spriteCanvasContainer,
@@ -28,11 +29,17 @@ spriteCow.pageLayout = (function() {
transitions = [
{
- duration: 500,
- easing: 'linear',
+ duration: 300,
+ easing: 'easeInOutQuad',
targets: [
- [$startButtons, { opacity: 0 }],
- [$introCopy, { opacity: 0 }]
+ [$container, { width: '100%' }],
+ [$footerUl, {
+ padding: $footerUl.css('padding')
+ }],
+ [$footerP, {
+ padding: $footerP.css('padding')
+ }],
+ [$startButtons, { opacity: 0 }]
],
before: function() {
$container.width(containerWidth);
@@ -41,16 +48,17 @@ spriteCow.pageLayout = (function() {
}
},
{
- duration: 1000,
- easing: 'swing',
+ duration: 500,
+ easing: 'easeInOutQuad',
targets: [
+ [$cowLogo, {
+ transform: $cowLogo.vendorCss('transform'),
+ opacity: $cowLogo.css('opacity'),
+ height: $cowLogo.css('height'),
+ margin: 0
+ }],
[$container, { width: '100%' }],
[$header, { height: $header.height() }],
- [$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'),
@@ -68,14 +76,13 @@ spriteCow.pageLayout = (function() {
}]
],
before: function() {
- $introCopy.css('display', 'none');
}
},
{
duration: 500,
easing: 'swing',
targets: [
- [$spriteCanvasContainer , {opacity: 1}]
+ [$spriteCanvasContainer, {opacity: 1}]
]
}
];
@@ -100,7 +107,9 @@ spriteCow.pageLayout = (function() {
}
}
- step.before && step.before();
+ if (step.before) {
+ step.before();
+ }
step.targets.forEach(function(target, i, targets) {
target[0].transition(target[1], {
@@ -125,21 +134,28 @@ spriteCow.pageLayout = (function() {
i = 0;
currentView = 'app';
- doAnimStep(steps, 0, function() {
- var targets = [];
-
- $container.removeClass('intro');
-
- steps.forEach(function(step) {
- targets = targets.concat( step.targets );
- })
-
- targets.forEach(function(target) {
- for ( var propName in target[1] ) {
- target[0].css(propName, '');
- }
+
+ if ($.support.transition) {
+ doAnimStep(steps, 0, function() {
+ var targets = [];
+
+ $container.removeClass('intro');
+
+ steps.forEach(function(step) {
+ targets = targets.concat( step.targets );
+ });
+
+ targets.forEach(function(target) {
+ for ( var propName in target[1] ) {
+ target[0].css(propName, '');
+ }
+ });
});
- });
+ }
+ else {
+ $container.removeClass('intro');
+ }
+
}
- }
+ };
})();
View
390 www/assets/7/style/_components.scss
@@ -0,0 +1,390 @@
+// Logo
+ .cow-logo {
+ background: url("imgs/sprites1.png") no-repeat -2px -66px;
+ position: relative;
+ left: 25px;
+ height: 20px;
+ margin: 0;
+ opacity: 0;
+ overflow: hidden;
+ text-indent: -5000px;
+ display: inline-block;
+ @include transform( scale(0.1) );
+ @include transform-origin(50% 0);
+
+ .intro & {
+ width: 448px;
+ height: 388px;
+ margin: 66px 0 29px;
+ opacity: 1;
+ @include transform( scale(1) );
+ }
+ }
+// Headings
+ .h-main {
+ font: normal 59px/1 oswald, sans-serif;
+ color: white;
+ text-shadow: #004A86 0 4px 1px;
+ text-align: center;
+ }
+// Canvas
+ .canvas-view {
+ text-align: center;
+ @include user-select(none);
+
+ & .upload-input {
+ position: absolute;
+ top: -5000px;
+ left: -5000px;
+ cursor: pointer;
+ z-index: 10;
+ }
+ & .lg-button {
+ display: none;
+ .intro & {
+ display: inline-block;
+ }
+ }
+ }
+ .canvas-cell {
+ display: table-cell;
+ height: 100%;
+ position: relative;
+
+ .intro & {
+ height: 139px;
+ cursor: auto;
+ }
+ }
+ .canvas-inner {
+ overflow: auto;
+ background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==');
+ box-shadow: 0 4px 18px rgba(0,0,0,0.35);
+ position: relative;
+ height: 100%;
+
+ .opera & {
+ /*
+ Opera treats the 100% height as the height of the body element, not the
+ table cell. This absolute layout works around that. However, it works
+ because Opera recognises the position:relative on the table cell, which
+ it shouldn't really. Using this fix on all browsers breaks layout in
+ Firefox.
+ */
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: auto;
+ }
+
+ .intro & {
+ overflow: hidden;
+ }
+ }
+ .sprite-canvas-container {
+ position: absolute;
+ min-width: 100%;
+ min-height: 100%;
+
+ & canvas {
+ display: block;
+ }
+
+ & .highlight {
+ background: rgba(0, 90, 255, 0.25);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 5px;
+ height: 5px;
+ pointer-events: none;
+ border: 1px solid rgba(0, 114, 255, 0.5);
+ box-sizing: border-box;
+ display: none;
+
+ @include transition(0.5s ease-in-out);
+ @include transition-property((border, background));
+
+ &.high-vis {
+ background-color: rgba(0, 255, 48, 0.25);
+ border-color: rgba(0, 255, 51, 0.5);
+ }
+ }
+
+ .intro & {
+ opacity: 0;
+ }
+ }
+ .select-btn {
+ margin: 0 48px 0 0;
+ }
+ .start-buttons {
+ position: absolute;
+ top: 39px;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ }
+ .drop-indicator {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(37, 207, 28, 0.2);
+ box-shadow: inset 0 0 18px #175a00;
+ display: none;
+ pointer-events: none;
+
+ .drag-over & {
+ display: block;
+ opacity: 1;
+ }
+ }
+// Buttons
+ .lg-button {
+ width: 192px;
+ border-radius: 100px;
+ color: #fff;
+ font: normal 29px/1 oswald, sans-serif;
+ padding: 14px 20px;
+ box-shadow: inset 0 0 6px rgba(255, 108, 0, 1), 0 3px 6px rgba(0, 0, 0, 0.7);
+ cursor: pointer;
+ text-shadow: rgba(0,0,0,0.5) 0 2px 0;
+
+ @include linear-gradient((top, rgba(255,185,90,1) 0%, rgba(255,108,0,1) 50%, rgba(199,58,0,1) 100%));
+ }
+// CSS output
+ .css-output {
+ display: block;
+ white-space: pre;
+ background: rgba(0, 0, 0, 0.1);
+ padding: 20px 30px;
+ overflow: auto;
+ position: relative;
+ tab-size: 4;
+
+ .intro & {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ overflow: hidden;
+ }
+
+ & code {
+ font-size: 1.2em;
+ line-height: 1;
+ }
+
+ & .file-path {
+ position: relative;
+ display: inline-block;
+
+ &::before {
+ border-bottom: 1px dotted #fff;
+ position: absolute;
+ left: 0;
+ bottom: -3px;
+ right: 0;
+ content: "";
+ }
+ }
+ & .file {
+ cursor: pointer;
+ }
+
+ & input[type='text'] {
+ position: absolute;
+ border: 1px solid #ccc;
+ background: #fff;
+ color: #333;
+ font: normal 12px/1 monospace;
+ padding: 3px;
+ outline: none;
+ }
+ }
+// Toolbar
+ .toolbar {
+ overflow: hidden;
+ padding: 5px 6px 0;
+ position: relative;
+ z-index: 1;
+ border-style: solid;
+ border-width: 1px 0;
+ border-color: #e2e2e2 #000 #888;
+ color: #333;
+ border-radius: 5px 5px 0 0;
+ @include linear-gradient((top, #d0d0d0, #a7a7a7));
+
+ .intro & {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top-width: 0;
+ border-bottom-width: 0;
+ }
+
+ & [role=button] {
+ float: left;
+ margin: 0 5px 5px 0;
+ border: 1px solid #888;
+ border-radius: 4px;
+ cursor: pointer;
+ padding: 4px 10px 4px 26px;
+ position: relative;
+
+ @include linear-gradient((top, #fefefe, #b8b8b8));
+
+ &::before {
+ content: '';
+ width: 16px;
+ height: 17px;
+ position: absolute;
+ top: 4px;
+ left: 5px;
+ background: url('imgs/sprites1.png') no-repeat;
+ }
+ &.active {
+ background: #707070;
+ box-shadow: inset 0 3px 7px rgba(0,0,0,0.6);
+ color: #fff;
+ }
+ &.no-label {
+ width: 26px;
+ padding: 4px 0;
+ text-indent: -5000px;
+ }
+ &.select-sprite {
+ border-width: 1px;
+ border-radius: 4px 0 0 4px;
+ margin-right: 0;
+ }
+ &.select-sprite::before {
+ background-position: -4px -2px;
+ }
+ &.pick-bg {
+ border-radius: 0 4px 4px 0;
+ margin-right: 5px;
+ border-left-width: 0;
+ }
+ &.pick-bg::before {
+ background-position: -50px -3px;
+ }
+ &.open-img::before {
+ background-position: -26px -2px;
+ }
+ &.invert-bg::before {
+ background-position: -99px -2px;
+ }
+ &.reload-img::before {
+ background-position: -75px -2px;
+ }
+ }
+ & .feedback {
+ float: left;
+ padding: 5px;
+ color: #555;
+ opacity: 0;
+ }
+ }
+// Footer
+ .main-footer {
+ overflow: hidden;
+ background: rgba(0, 0, 0, .23);
+
+ & p {
+ float: right;
+ padding: 15px 29px 0;
+ margin: 0;
+ white-space: nowrap;
+
+ .intro & {
+ padding: 12px 16px 0;
+ }
+ }
+ & .the-team-logo {
+ background: url('imgs/sprites1.png') no-repeat -4px -29px;
+ width: 88px;
+ height: 17px;
+ display: inline-block;
+ text-indent: -5000px;
+ vertical-align: top;
+ margin: -1px 0 0 4px;
+ }
+ & ul {
+ float: left;
+ padding: 16px 30px;
+
+ .intro & {
+ padding: 13px 16px;
+ }
+ }
+ & li {
+ display: inline;
+
+ & a:link,
+ & a:visited {
+ font-weight: normal;
+ color: #fff;
+ float: left;
+ padding: 0 10px 0 0;
+ margin: 0 10px 0 0;
+ border-right: 1px solid #fff;
+ }
+ &:last-child a:link,
+ &:last-child a:visited {
+ padding: 0;
+ margin: 0;
+ border: none;
+ }
+ }
+ }
+// Feature tests
+ .feature-test {
+ display: none;
+ width: 800px;
+ margin: 0 auto;
+ text-align: center;
+
+ .not-supported & {
+ display: block;
+ }
+ & h1 {
+ font: normal 2.5em sans-serif;
+ margin: 0;
+ padding: 40px 0;
+ }
+ & ul {
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
+ }
+ & li {
+ margin: 10px auto;
+ font-size: 1.1em;
+ overflow: hidden;
+ text-align: left;
+ }
+ & p {
+ width: 600px;
+ margin: 0 auto 20px;
+ font-size: 1.1em;
+ text-align: left;
+ }
+ & .pass,
+ & .fail {
+ float: left;
+ width: 50px;
+ font-weight: bold;
+ color: #5f5;
+ }
+ & .fail {
+ color: #f55;
+ }
+ }
+// Intro copy
+ .intro-copy {
+ display: none;
+ }
View
4 www/assets/7/style/_fonts.scss
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: oswald;
+ src: url('fonts/oswald.ttf') format('truetype');
+}
View
117 www/assets/7/style/_globals.scss
@@ -0,0 +1,117 @@
+// Resets
+ html,
+ body,
+ ul,
+ ol,
+ li,
+ form,
+ dl,
+ dt,
+ dd {
+ padding: 0;
+ margin: 0;
+ display: block;
+ }
+ ul,
+ ol {
+ list-style: none;
+ }
+ article,
+ aside,
+ details,
+ figcaption,
+ figure,
+ footer,
+ header,
+ hgroup,
+ menu,
+ nav,
+ section {
+ display: block;
+ }
+// Forms
+ select,
+ input,
+ textarea,
+ button {
+ font-size: 100%;
+ margin: 0;
+ vertical-align: baseline;
+ }
+
+ button,
+ input {
+ line-height: normal;
+ }
+
+ button,
+ input[type="button"],
+ input[type="reset"],
+ input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+ }
+ label {
+ cursor: pointer;
+ }
+
+ input, select {
+ vertical-align: middle;
+ _vertical-align: text-bottom;
+ }
+
+ input[type="radio"] { vertical-align: text-bottom; }
+ input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
+
+ button.custom {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ overflow: visible;
+ vertical-align: middle;
+ font-size: 1em;
+ width: auto;
+ }
+ button.custom::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+// Typography
+ body {
+ font:13px/1.231 sans-serif;
+ color: #fff;
+ }
+ pre,
+ code,
+ kbd,
+ samp {
+ font-family: monospace, serif;
+ font-size: 1em;
+ }
+ p {
+ line-height: 1.4;
+ }
+ select,
+ input,
+ textarea {
+ color: #333;
+ font-family: sans-serif;
+ }
+// Links
+ a {
+ & img {
+ border: 0;
+ }
+ &:link,
+ &:visited {
+ text-decoration: none;
+ color: #ffb135;
+ font-weight: bold;
+ }
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+ }
View
63 www/assets/7/style/_structure.scss
@@ -0,0 +1,63 @@
+// Background
+ html {
+ height: 100%;
+ background: #004a86;
+
+ @include radial-gradient((
+ center center,
+ circle cover,
+ #0091d5 0%,
+ #0091d5 15%,
+ #004a86 100%
+ ));
+ }
+ body {
+ height: 100%;
+ min-height: 100%;
+ margin: 0;
+ padding: 0 20px;
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEX///////////8AAAD1GyhhAAAABHRSTlMoNhsAX8Wz8wAAAC5JREFUOMtjCMUCGOr///7/fz8qMWQEs1YtWrVKC5UY9dGoj0Z9NOqjUR8NckEAV3eSqNB2GKwAAAAASUVORK5CYII=');
+ }
+// Main container
+ .container {
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ position: relative;
+ display: table;
+ table-layout: fixed;
+
+ &.intro {
+ width: 635px;
+ height: auto;
+ }
+ & > * {
+ display: table-row;
+ }
+ .not-supported & {
+ display: none;
+ }
+ }
+// Main header
+ .main-header {
+ display: table-cell;
+ text-align: center;
+ height: 0;
+
+ & .h-main {
+ display: none;
+ }
+ }
+// Further detail
+ .further-detail {
+
+ .intro & {
+ height: 0;
+ }
+ }
+// Toolbar
+ .toolbar-container {
+ display: table-row;
+ position: relative;
+ @include user-select(none);
+ }
View
38 www/assets/7/style/_utils.scss
@@ -0,0 +1,38 @@
+@mixin user-select($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}user-select: $type;
+ }
+}
+// Transform
+ @mixin transform($transformation) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transform: $transformation;
+ }
+ }
+ @mixin transform-origin($val) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transform-origin: $val;
+ }
+ }
+// Gradients
+ @mixin radial-gradient($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ background: #{$prefix}radial-gradient($type);
+ }
+ }
+ @mixin linear-gradient($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ background: #{$prefix}linear-gradient($type);
+ }
+ }
+// Transitions/Animation
+ @mixin transition($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transition: $type;
+ }
+ }
+ @mixin transition-property($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transition-property: $type;
+ }
+ }
View
1 www/assets/7/style/all-min.css
@@ -0,0 +1 @@
+@font-face{font-family:oswald;src:url("fonts/oswald.ttf") format("truetype")}html,body,ul,ol,li,form,dl,dt,dd{padding:0;margin:0;display:block}ul,ol{list-style:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}select,input,textarea,button{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}label{cursor:pointer}input,select{vertical-align:middle;_vertical-align:text-bottom}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom;*vertical-align:baseline}button.custom{padding:0;margin:0;border:0;background:none;cursor:pointer;overflow:visible;vertical-align:middle;font-size:1em;width:auto}button.custom::-moz-focus-inner{border:0;padding:0}body{font:13px/1.231 sans-serif;color:#fff}pre,code,kbd,samp{font-family:monospace, serif;font-size:1em}p{line-height:1.4}select,input,textarea{color:#333;font-family:sans-serif}a img{border:0}a:link,a:visited{text-decoration:none;color:#ffb135;font-weight:bold}a:hover,a:active{text-decoration:underline}html{height:100%;background:#004a86;background:-webkit-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);background:-moz-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);background:-ms-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);background:-o-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);background:radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)}body{height:100%;min-height:100%;margin:0;padding:0 20px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEX///////////8AAAD1GyhhAAAABHRSTlMoNhsAX8Wz8wAAAC5JREFUOMtjCMUCGOr///7/fz8qMWQEs1YtWrVKC5UY9dGoj0Z9NOqjUR8NckEAV3eSqNB2GKwAAAAASUVORK5CYII=")}.container{width:100%;height:100%;margin:0 auto;position:relative;display:table;table-layout:fixed}.container.intro{width:635px;height:auto}.container>*{display:table-row}.not-supported .container{display:none}.main-header{display:table-cell;text-align:center;height:0}.main-header .h-main{display:none}.intro .further-detail{height:0}.toolbar-container{display:table-row;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.cow-logo{background:url("imgs/sprites1.png") no-repeat -2px -66px;position:relative;left:25px;height:20px;margin:0;opacity:0;overflow:hidden;text-indent:-5000px;display:inline-block;-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-ms-transform:scale(0.1);-o-transform:scale(0.1);transform:scale(0.1);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0}.intro .cow-logo{width:448px;height:388px;margin:66px 0 29px;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.h-main{font:normal 59px/1 oswald,sans-serif;color:white;text-shadow:#004A86 0 4px 1px;text-align:center}.canvas-view{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.canvas-view .upload-input{position:absolute;top:-5000px;left:-5000px;cursor:pointer;z-index:10}.canvas-view .lg-button{display:none}.intro .canvas-view .lg-button{display:inline-block}.canvas-cell{display:table-cell;height:100%;position:relative}.intro .canvas-cell{height:139px;cursor:auto}.canvas-inner{overflow:auto;background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==");box-shadow:0 4px 18px rgba(0,0,0,0.35);position:relative;height:100%}.opera .canvas-inner{position:absolute;top:0;left:0;right:0;bottom:0;height:auto}.intro .canvas-inner{overflow:hidden}.sprite-canvas-container{position:absolute;min-width:100%;min-height:100%}.sprite-canvas-container canvas{display:block}.sprite-canvas-container .highlight{background:rgba(0,90,255,0.25);position:absolute;top:0;left:0;width:5px;height:5px;pointer-events:none;border:1px solid rgba(0,114,255,0.5);box-sizing:border-box;display:none;-webkit-transition:0.5s ease-in-out;-moz-transition:0.5s ease-in-out;-ms-transition:0.5s ease-in-out;-o-transition:0.5s ease-in-out;transition:0.5s ease-in-out;-webkit-transition-property:border,background;-moz-transition-property:border,background;-ms-transition-property:border,background;-o-transition-property:border,background;transition-property:border,background}.sprite-canvas-container .highlight.high-vis{background-color:rgba(0,255,48,0.25);border-color:rgba(0,255,51,0.5)}.intro .sprite-canvas-container{opacity:0}.select-btn{margin:0 48px 0 0}.start-buttons{position:absolute;top:39px;left:0;width:100%;text-align:center}.drop-indicator{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(37,207,28,0.2);box-shadow:inset 0 0 18px #175a00;display:none;pointer-events:none}.drag-over .drop-indicator{display:block;opacity:1}.lg-button{width:192px;border-radius:100px;color:#fff;font:normal 29px/1 oswald,sans-serif;padding:14px 20px;box-shadow:inset 0 0 6px #ff6c00,0 3px 6px rgba(0,0,0,0.7);cursor:pointer;text-shadow:rgba(0,0,0,0.5) 0 2px 0;background:-webkit-linear-gradient(top,#ffb95a 0%,#ff6c00 50%,#c73a00 100%);background:-moz-linear-gradient(top,#ffb95a 0%,#ff6c00 50%,#c73a00 100%);background:-ms-linear-gradient(top,#ffb95a 0%,#ff6c00 50%,#c73a00 100%);background:-o-linear-gradient(top,#ffb95a 0%,#ff6c00 50%,#c73a00 100%);background:linear-gradient(top,#ffb95a 0%,#ff6c00 50%,#c73a00 100%)}.css-output{display:block;white-space:pre;background:rgba(0,0,0,0.1);padding:20px 30px;overflow:auto;position:relative;tab-size:4}.intro .css-output{height:0;padding-top:0;padding-bottom:0;overflow:hidden}.css-output code{font-size:1.2em;line-height:1}.css-output .file-path{position:relative;display:inline-block}.css-output .file-path::before{border-bottom:1px dotted #fff;position:absolute;left:0;bottom:-3px;right:0;content:""}.css-output .file{cursor:pointer}.css-output input[type='text']{position:absolute;border:1px solid #ccc;background:#fff;color:#333;font:normal 12px/1 monospace;padding:3px;outline:none}.toolbar{overflow:hidden;padding:5px 6px 0;position:relative;z-index:1;border-style:solid;border-width:1px 0;border-color:#e2e2e2 #000 #888;color:#333;border-radius:5px 5px 0 0;background:-webkit-linear-gradient(top,#d0d0d0,#a7a7a7);background:-moz-linear-gradient(top,#d0d0d0,#a7a7a7);background:-ms-linear-gradient(top,#d0d0d0,#a7a7a7);background:-o-linear-gradient(top,#d0d0d0,#a7a7a7);background:linear-gradient(top,#d0d0d0,#a7a7a7)}.intro .toolbar{height:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0}.toolbar [role=button]{float:left;margin:0 5px 5px 0;border:1px solid #888;border-radius:4px;cursor:pointer;padding:4px 10px 4px 26px;position:relative;background:-webkit-linear-gradient(top,#fefefe,#b8b8b8);background:-moz-linear-gradient(top,#fefefe,#b8b8b8);background:-ms-linear-gradient(top,#fefefe,#b8b8b8);background:-o-linear-gradient(top,#fefefe,#b8b8b8);background:linear-gradient(top,#fefefe,#b8b8b8)}.toolbar [role=button]::before{content:'';width:16px;height:17px;position:absolute;top:4px;left:5px;background:url("imgs/sprites1.png") no-repeat}.toolbar [role=button].active{background:#707070;box-shadow:inset 0 3px 7px rgba(0,0,0,0.6);color:#fff}.toolbar [role=button].no-label{width:26px;padding:4px 0;text-indent:-5000px}.toolbar [role=button].select-sprite{border-width:1px;border-radius:4px 0 0 4px;margin-right:0}.toolbar [role=button].select-sprite::before{background-position:-4px -2px}.toolbar [role=button].pick-bg{border-radius:0 4px 4px 0;margin-right:5px;border-left-width:0}.toolbar [role=button].pick-bg::before{background-position:-50px -3px}.toolbar [role=button].open-img::before{background-position:-26px -2px}.toolbar [role=button].invert-bg::before{background-position:-99px -2px}.toolbar [role=button].reload-img::before{background-position:-75px -2px}.toolbar .feedback{float:left;padding:5px;color:#555;opacity:0}.main-footer{overflow:hidden;background:rgba(0,0,0,0.23)}.main-footer p{float:right;padding:15px 29px 0;margin:0;white-space:nowrap}.intro .main-footer p{padding:12px 16px 0}.main-footer .the-team-logo{background:url("imgs/sprites1.png") no-repeat -4px -29px;width:88px;height:17px;display:inline-block;text-indent:-5000px;vertical-align:top;margin:-1px 0 0 4px}.main-footer ul{float:left;padding:16px 30px}.intro .main-footer ul{padding:13px 16px}.main-footer li{display:inline}.main-footer li a:link,.main-footer li a:visited{font-weight:normal;color:#fff;float:left;padding:0 10px 0 0;margin:0 10px 0 0;border-right:1px solid #fff}.main-footer li:last-child a:link,.main-footer li:last-child a:visited{padding:0;margin:0;border:none}.feature-test{display:none;width:800px;margin:0 auto;text-align:center}.not-supported .feature-test{display:block}.feature-test h1{font:normal 2.5em sans-serif;margin:0;padding:40px 0}.feature-test ul{display:inline-block;*display:inline;zoom:1}.feature-test li{margin:10px auto;font-size:1.1em;overflow:hidden;text-align:left}.feature-test p{width:600px;margin:0 auto 20px;font-size:1.1em;text-align:left}.feature-test .pass,.feature-test .fail{float:left;width:50px;font-weight:bold;color:#5f5}.feature-test .fail{color:#f55}.intro-copy{display:none}
View
592 www/assets/7/style/all.css
@@ -0,0 +1,592 @@
+@font-face {
+ font-family: oswald;
+ src: url("fonts/oswald.ttf") format("truetype"); }
+
+/* line 10, _globals.scss */
+html,
+body,
+ul,
+ol,
+li,
+form,
+dl,
+dt,
+dd {
+ padding: 0;
+ margin: 0;
+ display: block; }
+
+/* line 16, _globals.scss */
+ul,
+ol {
+ list-style: none; }
+
+/* line 29, _globals.scss */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block; }
+
+/* line 36, _globals.scss */
+select,
+input,
+textarea,
+button {
+ font-size: 100%;
+ margin: 0;
+ vertical-align: baseline; }
+
+/* line 43, _globals.scss */
+button,
+input {
+ line-height: normal; }
+
+/* line 50, _globals.scss */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button; }
+
+/* line 54, _globals.scss */
+label {
+ cursor: pointer; }
+
+/* line 58, _globals.scss */
+input, select {
+ vertical-align: middle;
+ _vertical-align: text-bottom; }
+
+/* line 63, _globals.scss */
+input[type="radio"] {
+ vertical-align: text-bottom; }
+
+/* line 64, _globals.scss */
+input[type="checkbox"] {
+ vertical-align: bottom;
+ *vertical-align: baseline; }
+
+/* line 66, _globals.scss */
+button.custom {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ overflow: visible;
+ vertical-align: middle;
+ font-size: 1em;
+ width: auto; }
+
+/* line 77, _globals.scss */
+button.custom::-moz-focus-inner {
+ border: 0;
+ padding: 0; }
+
+/* line 82, _globals.scss */
+body {
+ font: 13px/1.231 sans-serif;
+ color: #fff; }
+
+/* line 89, _globals.scss */
+pre,
+code,
+kbd,
+samp {
+ font-family: monospace, serif;
+ font-size: 1em; }
+
+/* line 93, _globals.scss */
+p {
+ line-height: 1.4; }
+
+/* line 98, _globals.scss */
+select,
+input,
+textarea {
+ color: #333;
+ font-family: sans-serif; }
+
+/* line 104, _globals.scss */
+a img {
+ border: 0; }
+/* line 108, _globals.scss */
+a:link, a:visited {
+ text-decoration: none;
+ color: #ffb135;
+ font-weight: bold; }
+/* line 114, _globals.scss */
+a:hover, a:active {
+ text-decoration: underline; }
+
+/* line 2, _structure.scss */
+html {
+ height: 100%;
+ background: #004a86;
+ background: -webkit-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
+ background: -moz-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
+ background: -ms-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
+ background: -o-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
+ background: radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%); }
+
+/* line 14, _structure.scss */
+body {
+ height: 100%;
+ min-height: 100%;
+ margin: 0;
+ padding: 0 20px;
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEX///////////8AAAD1GyhhAAAABHRSTlMoNhsAX8Wz8wAAAC5JREFUOMtjCMUCGOr///7/fz8qMWQEs1YtWrVKC5UY9dGoj0Z9NOqjUR8NckEAV3eSqNB2GKwAAAAASUVORK5CYII="); }
+
+/* line 22, _structure.scss */
+.container {
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ position: relative;
+ display: table;
+ table-layout: fixed; }
+ /* line 30, _structure.scss */
+ .container.intro {
+ width: 635px;
+ height: auto; }
+ /* line 34, _structure.scss */
+ .container > * {
+ display: table-row; }
+ /* line 37, _structure.scss */
+ .not-supported .container {
+ display: none; }
+
+/* line 42, _structure.scss */
+.main-header {
+ display: table-cell;
+ text-align: center;
+ height: 0; }
+ /* line 47, _structure.scss */
+ .main-header .h-main {
+ display: none; }
+
+/* line 54, _structure.scss */
+.intro .further-detail {
+ height: 0; }
+
+/* line 59, _structure.scss */
+.toolbar-container {
+ display: table-row;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none; }
+
+/* line 2, _components.scss */
+.cow-logo {
+ background: url("imgs/sprites1.png") no-repeat -2px -66px;
+ position: relative;
+ left: 25px;
+ height: 20px;
+ margin: 0;
+ opacity: 0;
+ overflow: hidden;
+ text-indent: -5000px;
+ display: inline-block;
+ -webkit-transform: scale(0.1);
+ -moz-transform: scale(0.1);
+ -ms-transform: scale(0.1);
+ -o-transform: scale(0.1);
+ transform: scale(0.1);
+ -webkit-transform-origin: 50% 0;
+ -moz-transform-origin: 50% 0;
+ -ms-transform-origin: 50% 0;
+ -o-transform-origin: 50% 0;
+ transform-origin: 50% 0; }
+ /* line 15, _components.scss */
+ .intro .cow-logo {
+ width: 448px;
+ height: 388px;
+ margin: 66px 0 29px;
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -ms-transform: scale(1);
+ -o-transform: scale(1);
+ transform: scale(1); }
+
+/* line 24, _components.scss */
+.h-main {
+ font: normal 59px/1 oswald, sans-serif;
+ color: white;
+ text-shadow: #004A86 0 4px 1px;
+ text-align: center; }
+
+/* line 31, _components.scss */
+.canvas-view {
+ text-align: center;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none; }
+ /* line 35, _components.scss */
+ .canvas-view .upload-input {
+ position: absolute;
+ top: -5000px;
+ left: -5000px;
+ cursor: pointer;
+ z-index: 10; }
+ /* line 42, _components.scss */
+ .canvas-view .lg-button {
+ display: none; }
+ /* line 44, _components.scss */
+ .intro .canvas-view .lg-button {
+ display: inline-block; }
+
+/* line 49, _components.scss */
+.canvas-cell {
+ display: table-cell;
+ height: 100%;
+ position: relative; }
+ /* line 54, _components.scss */
+ .intro .canvas-cell {
+ height: 139px;
+ cursor: auto; }
+
+/* line 59, _components.scss */
+.canvas-inner {
+ overflow: auto;
+ background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==");
+ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+ position: relative;
+ height: 100%; }
+ /* line 66, _components.scss */
+ .opera .canvas-inner {
+ /*
+ Opera treats the 100% height as the height of the body element, not the
+ table cell. This absolute layout works around that. However, it works
+ because Opera recognises the position:relative on the table cell, which
+ it shouldn't really. Using this fix on all browsers breaks layout in
+ Firefox.
+ */
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: auto; }
+ /* line 82, _components.scss */
+ .intro .canvas-inner {
+ overflow: hidden; }
+
+/* line 86, _components.scss */
+.sprite-canvas-container {
+ position: absolute;
+ min-width: 100%;
+ min-height: 100%; }
+ /* line 91, _components.scss */
+ .sprite-canvas-container canvas {
+ display: block; }
+ /* line 95, _components.scss */
+ .sprite-canvas-container .highlight {
+ background: rgba(0, 90, 255, 0.25);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 5px;
+ height: 5px;
+ pointer-events: none;
+ border: 1px solid rgba(0, 114, 255, 0.5);
+ box-sizing: border-box;
+ display: none;
+ -webkit-transition: 0.5s ease-in-out;
+ -moz-transition: 0.5s ease-in-out;
+ -ms-transition: 0.5s ease-in-out;
+ -o-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+ -webkit-transition-property: border, background;
+ -moz-transition-property: border, background;
+ -ms-transition-property: border, background;
+ -o-transition-property: border, background;
+ transition-property: border, background; }
+ /* line 110, _components.scss */
+ .sprite-canvas-container .highlight.high-vis {
+ background-color: rgba(0, 255, 48, 0.25);
+ border-color: rgba(0, 255, 51, 0.5); }
+ /* line 116, _components.scss */
+ .intro .sprite-canvas-container {
+ opacity: 0; }
+
+/* line 120, _components.scss */
+.select-btn {
+ margin: 0 48px 0 0; }
+
+/* line 123, _components.scss */
+.start-buttons {
+ position: absolute;
+ top: 39px;
+ left: 0;
+ width: 100%;
+ text-align: center; }
+
+/* line 130, _components.scss */
+.drop-indicator {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(37, 207, 28, 0.2);
+ box-shadow: inset 0 0 18px #175a00;
+ display: none;
+ pointer-events: none; }
+ /* line 141, _components.scss */
+ .drag-over .drop-indicator {
+ display: block;
+ opacity: 1; }
+
+/* line 147, _components.scss */
+.lg-button {
+ width: 192px;
+ border-radius: 100px;
+ color: #fff;
+ font: normal 29px/1 oswald, sans-serif;
+ padding: 14px 20px;
+ box-shadow: inset 0 0 6px #ff6c00, 0 3px 6px rgba(0, 0, 0, 0.7);
+ cursor: pointer;
+ text-shadow: rgba(0, 0, 0, 0.5) 0 2px 0;
+ background: -webkit-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
+ background: -moz-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
+ background: -ms-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
+ background: -o-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
+ background: linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%); }
+
+/* line 160, _components.scss */
+.css-output {
+ display: block;
+ white-space: pre;
+ background: rgba(0, 0, 0, 0.1);
+ padding: 20px 30px;
+ overflow: auto;
+ position: relative;
+ tab-size: 4; }
+ /* line 169, _components.scss */
+ .intro .css-output {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ overflow: hidden; }
+ /* line 176, _components.scss */
+ .css-output code {
+ font-size: 1.2em;
+ line-height: 1; }
+ /* line 181, _components.scss */
+ .css-output .file-path {
+ position: relative;
+ display: inline-block; }
+ /* line 185, _components.scss */
+ .css-output .file-path::before {
+ border-bottom: 1px dotted #fff;
+ position: absolute;
+ left: 0;
+ bottom: -3px;
+ right: 0;
+ content: ""; }
+ /* line 194, _components.scss */
+ .css-output .file {
+ cursor: pointer; }
+ /* line 198, _components.scss */
+ .css-output input[type='text'] {
+ position: absolute;
+ border: 1px solid #ccc;
+ background: #fff;
+ color: #333;
+ font: normal 12px/1 monospace;
+ padding: 3px;
+ outline: none; }
+
+/* line 209, _components.scss */
+.toolbar {
+ overflow: hidden;
+ padding: 5px 6px 0;
+ position: relative;
+ z-index: 1;
+ border-style: solid;
+ border-width: 1px 0;
+ border-color: #e2e2e2 #000 #888;
+ color: #333;
+ border-radius: 5px 5px 0 0;
+ background: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: -moz-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: -ms-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: -o-linear-gradient(top, #d0d0d0, #a7a7a7);
+ background: linear-gradient(top, #d0d0d0, #a7a7a7); }
+ /* line 221, _components.scss */
+ .intro .toolbar {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-top-width: 0;
+ border-bottom-width: 0; }
+ /* line 229, _components.scss */
+ .toolbar [role=button] {
+ float: left;
+ margin: 0 5px 5px 0;
+ border: 1px solid #888;
+ border-radius: 4px;
+ cursor: pointer;
+ padding: 4px 10px 4px 26px;
+ position: relative;
+ background: -webkit-linear-gradient(top, #fefefe, #b8b8b8);
+ background: -moz-linear-gradient(top, #fefefe, #b8b8b8);
+ background: -ms-linear-gradient(top, #fefefe, #b8b8b8);
+ background: -o-linear-gradient(top, #fefefe, #b8b8b8);
+ background: linear-gradient(top, #fefefe, #b8b8b8); }
+ /* line 240, _components.scss */
+ .toolbar [role=button]::before {
+ content: '';
+ width: 16px;
+ height: 17px;
+ position: absolute;
+ top: 4px;
+ left: 5px;
+ background: url("imgs/sprites1.png") no-repeat; }
+ /* line 249, _components.scss */
+ .toolbar [role=button].active {
+ background: #707070;
+ box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6);
+ color: #fff; }
+ /* line 254, _components.scss */
+ .toolbar [role=button].no-label {
+ width: 26px;
+ padding: 4px 0;
+ text-indent: -5000px; }
+ /* line 259, _components.scss */
+ .toolbar [role=button].select-sprite {
+ border-width: 1px;
+ border-radius: 4px 0 0 4px;
+ margin-right: 0; }
+ /* line 264, _components.scss */
+ .toolbar [role=button].select-sprite::before {
+ background-position: -4px -2px; }
+ /* line 267, _components.scss */
+ .toolbar [role=button].pick-bg {
+ border-radius: 0 4px 4px 0;
+ margin-right: 5px;
+ border-left-width: 0; }
+ /* line 272, _components.scss */
+ .toolbar [role=button].pick-bg::before {
+ background-position: -50px -3px; }
+ /* line 275, _components.scss */
+ .toolbar [role=button].open-img::before {
+ background-position: -26px -2px; }
+ /* line 278, _components.scss */
+ .toolbar [role=button].invert-bg::before {
+ background-position: -99px -2px; }
+ /* line 281, _components.scss */
+ .toolbar [role=button].reload-img::before {
+ background-position: -75px -2px; }
+ /* line 285, _components.scss */
+ .toolbar .feedback {
+ float: left;
+ padding: 5px;
+ color: #555;
+ opacity: 0; }
+
+/* line 293, _components.scss */
+.main-footer {
+ overflow: hidden;
+ background: rgba(0, 0, 0, 0.23); }
+ /* line 297, _components.scss */
+ .main-footer p {
+ float: right;
+ padding: 15px 29px 0;
+ margin: 0;
+ white-space: nowrap; }
+ /* line 303, _components.scss */
+ .intro .main-footer p {
+ padding: 12px 16px 0; }
+ /* line 307, _components.scss */
+ .main-footer .the-team-logo {
+ background: url("imgs/sprites1.png") no-repeat -4px -29px;
+ width: 88px;
+ height: 17px;
+ display: inline-block;
+ text-indent: -5000px;
+ vertical-align: top;
+ margin: -1px 0 0 4px; }
+ /* line 316, _components.scss */
+ .main-footer ul {
+ float: left;
+ padding: 16px 30px; }
+ /* line 320, _components.scss */
+ .intro .main-footer ul {
+ padding: 13px 16px; }
+ /* line 324, _components.scss */
+ .main-footer li {
+ display: inline; }
+ /* line 328, _components.scss */
+ .main-footer li a:link, .main-footer li a:visited {
+ font-weight: normal;
+ color: #fff;
+ float: left;
+ padding: 0 10px 0 0;
+ margin: 0 10px 0 0;
+ border-right: 1px solid #fff; }
+ /* line 337, _components.scss */
+ .main-footer li:last-child a:link, .main-footer li:last-child a:visited {
+ padding: 0;
+ margin: 0;
+ border: none; }
+
+/* line 345, _components.scss */
+.feature-test {
+ display: none;
+ width: 800px;
+ margin: 0 auto;
+ text-align: center; }
+ /* line 351, _components.scss */
+ .not-supported .feature-test {
+ display: block; }
+ /* line 354, _components.scss */
+ .feature-test h1 {
+ font: normal 2.5em sans-serif;
+ margin: 0;
+ padding: 40px 0; }
+ /* line 359, _components.scss */
+ .feature-test ul {
+ display: inline-block;
+ *display: inline;
+ zoom: 1; }
+ /* line 364, _components.scss */
+ .feature-test li {
+ margin: 10px auto;
+ font-size: 1.1em;
+ overflow: hidden;
+ text-align: left; }
+ /* line 370, _components.scss */
+ .feature-test p {
+ width: 600px;
+ margin: 0 auto 20px;
+ font-size: 1.1em;
+ text-align: left; }
+ /* line 377, _components.scss */
+ .feature-test .pass, .feature-test .fail {
+ float: left;
+ width: 50px;
+ font-weight: bold;
+ color: #5f5; }
+ /* line 383, _components.scss */
+ .feature-test .fail {
+ color: #f55; }
+
+/* line 388, _components.scss */
+.intro-copy {
+ display: none; }
View
5 www/assets/7/style/all.scss
@@ -0,0 +1,5 @@
+@import 'utils';
+@import 'fonts';
+@import 'globals';
+@import 'structure';
+@import 'components';
View
0 www/assets/6/style/base.css → www/assets/7/style/base.css
File renamed without changes.
View
BIN www/assets/7/style/fonts/oswald.ttf
Binary file not shown.
View
BIN www/assets/7/style/imgs/grid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN www/assets/7/style/imgs/sprites1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 www/assets/6/style/imgs/trans.png → www/assets/7/style/imgs/trans.png
File renamed without changes
View
0 www/assets/6/tutorial-sprite.png → www/assets/7/tutorial-sprite.png
File renamed without changes
View
18 www/index.html
@@ -4,14 +4,14 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sprite Cow - Generate CSS for sprite sheets</title>
- <link rel="stylesheet" href="assets/6/style/mainmin.css">
- <link rel="shortcut icon" href="assets/6/favicon.ico">
+ <link rel="stylesheet" href="assets/7/style/all-min.css">
+ <link rel="shortcut icon" href="assets/7/favicon.ico">
<script>var _gaq=[['_setAccount','UA-24099758-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
</head>
<body>
<div class="container intro">
- <header>
- <h1><span>Sprite Cow</span></h1>
+ <header class="main-header">
+ <h1 class="cow-logo">Sprite Cow</h1>
</header>
<div class="toolbar-container">
</div>
@@ -31,7 +31,7 @@
bit of copyable css.
</p>
<p>
- <a href="assets/6/tutorial-sprite.png" class="tutorial">Load the example image</a>, and have a click
+ <a href="assets/7/tutorial-sprite.png" class="tutorial">Load the example image</a>, and have a click
around. It becomes pretty obvious.
</p>
</section>
@@ -49,7 +49,7 @@
</section>
</div>
</div>
- <footer class="main">
+ <footer class="main-footer">
<ul>
<li><a href="https://github.com/jakearchibald/sprite-cow">Github</a></li>
<li><a href="https://github.com/jakearchibald/sprite-cow/issues">Bug/feature tracker</a></li>
@@ -62,14 +62,14 @@
<h1>Sorry, it isn't working out between us</h1>
<p>
It's not you, I just can't get along with your browser.
- Maybe if things change in the future... maybe if you bring a newish
- version of <a href="http://www.google.com/chrome/">Chrome</a>,
+ Maybe if things change in the future... maybe if you bring
+ <a href="http://www.google.com/chrome/">Chrome</a>,
<a href="http://www.mozilla.com/en-US/firefox/new/">Firefox</a>,
<a href="http://www.opera.com/">Opera</a> or even
<a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10</a>
to the party... not promising anything, but give me a call.
</p>
</div>
- <script src="assets/6/script/mainmin.js"></script>
+ <script src="assets/7/script/mainmin.js"></script>
</body>
</html>
View
12 www/offline.appcache
@@ -1,11 +1,11 @@
CACHE MANIFEST
-assets/6/script/mainmin.js
-assets/6/style/mainmin.css
-assets/6/style/fonts/pro.ttf
-assets/6/style/imgs/sprites1.png
-assets/6/tutorial-sprite.png
-assets/6/favicon.ico
+assets/7/script/mainmin.js
+assets/7/style/all-min.css
+assets/7/style/fonts/oswald.ttf
+assets/7/style/imgs/sprites1.png
+assets/7/tutorial-sprite.png
+assets/7/favicon.ico
NETWORK:
*
View
48 www/unmin.html
@@ -4,14 +4,14 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sprite Cow - Generate CSS for sprite sheets</title>
- <link rel="stylesheet" href="assets/6/style/base.css">
- <link rel="shortcut icon" href="assets/6/favicon.ico">
+ <link rel="stylesheet" href="assets/7/style/all.css">
+ <link rel="shortcut icon" href="assets/7/favicon.ico">
<script>var _gaq=[['_setAccount','UA-24099758-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
</head>
<body>
<div class="container intro">
- <header>
- <h1><span>Sprite Cow</span></h1>
+ <header class="main-header">
+ <h1 class="cow-logo">Sprite Cow</h1>
</header>
<div class="toolbar-container">
</div>
@@ -31,7 +31,7 @@
bit of copyable css.
</p>
<p>
- <a href="assets/6/tutorial-sprite.png" class="tutorial">Load the example image</a>, and have a click
+ <a href="assets/7/tutorial-sprite.png" class="tutorial">Load the example image</a>, and have a click
around. It becomes pretty obvious.
</p>
</section>
@@ -49,7 +49,7 @@
</section>
</div>
</div>
- <footer class="main">
+ <footer class="main-footer">
<ul>
<li><a href="https://github.com/jakearchibald/sprite-cow">Github</a></li>
<li><a href="https://github.com/jakearchibald/sprite-cow/issues">Bug/feature tracker</a></li>
@@ -62,29 +62,29 @@
<h1>Sorry, it isn't working out between us</h1>
<p>
It's not you, I just can't get along with your browser.
- Maybe if things change in the future... maybe if you bring a newish
- version of <a href="http://www.google.com/chrome/">Chrome</a>,
+ Maybe if things change in the future... maybe if you bring
+ <a href="http://www.google.com/chrome/">Chrome</a>,
<a href="http://www.mozilla.com/en-US/firefox/new/">Firefox</a>,
<a href="http://www.opera.com/">Opera</a> or even
<a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10</a>
to the party... not promising anything, but give me a call.
</p>
</div>
- <script src="assets/6/script/jquery-1.6.2.js"></script>
- <script src="assets/6/script/jquery.easing.js"></script>
- <script src="assets/6/script/jquery.transition.js"></script>
- <script src="assets/6/script/jquery.fileClickjack.js"></script>
- <script src="assets/6/script/intro.js"></script>
- <script src="assets/6/script/MicroEvent.js"></script>
- <script src="assets/6/script/Rect.js"></script>
- <script src="assets/6/script/ImgInput.js"></script>
- <script src="assets/6/script/SpriteCanvas.js"></script>
- <script src="assets/6/script/SpriteCanvasView.js"></script>
- <script src="assets/6/script/CssOutput.js"></script>
- <script src="assets/6/script/Toolbar.js"></script>
- <script src="assets/6/script/pageLayout.js"></script>
- <script src="assets/6/script/FeatureTest.js"></script>
- <script src="assets/6/script/featureTests.js"></script>
- <script src="assets/6/script/base.js"></script>
+ <script src="assets/7/script/jquery-1.6.2.js"></script>
+ <script src="assets/7/script/jquery.easing.js"></script>
+ <script src="assets/7/script/jquery.transition.js"></script>
+ <script src="assets/7/script/jquery.fileClickjack.js"></script>
+ <script src="assets/7/script/intro.js"></script>
+ <script src="assets/7/script/MicroEvent.js"></script>
+ <script src="assets/7/script/Rect.js"></script>
+ <script src="assets/7/script/ImgInput.js"></script>
+ <script src="assets/7/script/SpriteCanvas.js"></script>
+ <script src="assets/7/script/SpriteCanvasView.js"></script>
+ <script src="assets/7/script/CssOutput.js"></script>
+ <script src="assets/7/script/Toolbar.js"></script>
+ <script src="assets/7/script/pageLayout.js"></script>
+ <script src="assets/7/script/FeatureTest.js"></script>
+ <script src="assets/7/script/featureTests.js"></script>
+ <script src="assets/7/script/base.js"></script>
</body>
</html>

0 comments on commit 47926ca

Please sign in to comment.