Permalink
Browse files

Cow & canvas

  • Loading branch information...
jakearchibald committed Jun 5, 2012
1 parent d116f17 commit 4ebfe7f349254a5da84ed5bd2d2db10197c25131
Showing with 543 additions and 30 deletions.
  1. +2 −1 .gitignore
  2. +2 −2 bin/compress_assets.sh
  3. +2 −0 sass.sh
  4. BIN www/assets/6/style/fonts/pro.ttf
  5. BIN www/assets/6/style/imgs/grid.png
  6. BIN www/assets/6/style/imgs/sprites1.png
  7. BIN www/assets/{6 → 7}/favicon.ico
  8. 0 www/assets/{6 → 7}/script/CssOutput.js
  9. 0 www/assets/{6 → 7}/script/FeatureTest.js
  10. 0 www/assets/{6 → 7}/script/ImgInput.js
  11. 0 www/assets/{6 → 7}/script/MicroEvent.js
  12. 0 www/assets/{6 → 7}/script/Rect.js
  13. 0 www/assets/{6 → 7}/script/SpriteCanvas.js
  14. 0 www/assets/{6 → 7}/script/SpriteCanvasView.js
  15. 0 www/assets/{6 → 7}/script/Toolbar.js
  16. 0 www/assets/{6 → 7}/script/base.js
  17. 0 www/assets/{6 → 7}/script/featureTests.js
  18. 0 www/assets/{6 → 7}/script/intro.js
  19. 0 www/assets/{6 → 7}/script/jquery-1.6.2.js
  20. 0 www/assets/{6 → 7}/script/jquery.easing.js
  21. 0 www/assets/{6 → 7}/script/jquery.fileClickjack.js
  22. 0 www/assets/{6 → 7}/script/jquery.transition.js
  23. 0 www/assets/{6 → 7}/script/mainmin.js
  24. 0 www/assets/{6 → 7}/script/pageLayout.js
  25. +73 −0 www/assets/7/style/_components.scss
  26. +4 −0 www/assets/7/style/_fonts.scss
  27. +117 −0 www/assets/7/style/_globals.scss
  28. +50 −0 www/assets/7/style/_structure.scss
  29. +15 −0 www/assets/7/style/_utils.scss
  30. +245 −0 www/assets/7/style/all.css
  31. +5 −0 www/assets/7/style/all.scss
  32. 0 www/assets/{6 → 7}/style/base.css
  33. BIN www/assets/7/style/fonts/oswald.ttf
  34. BIN www/assets/7/style/imgs/grid.png
  35. BIN www/assets/7/style/imgs/sprites1.png
  36. BIN www/assets/{6 → 7}/style/imgs/trans.png
  37. 0 www/assets/{6 → 7}/style/mainmin.css
  38. BIN www/assets/{6 → 7}/tutorial-sprite.png
  39. +6 −6 www/offline.appcache
  40. +22 −21 www/unmin.html
View
@@ -3,4 +3,5 @@ bin/yui*
bin/uglify
fabric.cfg
*.pyc
-tmp
+tmp
+.sass-cache
View
@@ -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
@@ -0,0 +1,2 @@
+ver=7
+~/dev/sass/bin/sass -l --watch www/assets/$ver/style:www/assets/$ver/style
Binary file not shown.
Binary file not shown.
Binary file not shown.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,73 @@
+// Logo
+ .cow-logo {
+ background: url('imgs/sprites1.png') no-repeat -2px -66px;
+ width: 448px;
+ height: 388px;
+ margin: 0 auto;
+ }
+// 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);
+ }
+ .canvas-cell {
+ display: table-cell;
+ height: 100%;
+ position: relative;
+
+ .intro & {
+ height: 170px;
+ 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 {
+ // TODO
+ }
+
+ .intro & {
+ opacity: 0;
+ }
+ }
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: oswald;
+ src: url('fonts/oswald.ttf') format('truetype');
+}
@@ -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;
+ }
+ }
@@ -0,0 +1,50 @@
+// 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: 835px;
+ }
+ & > * {
+ display: table-row;
+ }
+ }
+// Main header
+ .main-header {
+ display: table-cell;
+ vertical-align: middle;
+ height: 0;
+
+ .intro & {
+ height: 169px;
+
+ & .h-main {
+ display: none;
+ }
+ }
+ }
@@ -0,0 +1,15 @@
+@mixin transform($transformation) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}transform: $transformation;
+ }
+}
+@mixin radial-gradient($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ background: #{$prefix}radial-gradient($type);
+ }
+}
+@mixin user-select($type) {
+ @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
+ #{$prefix}user-select: $type;
+ }
+}
Oops, something went wrong.

0 comments on commit 4ebfe7f

Please sign in to comment.