Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

basics of style & canvas grid

  • Loading branch information...
commit b07952c21b67d12d4e06b236270f5d01dca12c52 1 parent 53bd745
Steve Jackson authored
6 Gemfile
View
@@ -0,0 +1,6 @@
+source 'http://rubygems.org'
+
+gem 'middleman'
+gem 'jasmine'
+gem 'fancy-buttons'
+gem 'therubyracer'
137 Gemfile.lock
View
@@ -0,0 +1,137 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ activesupport (3.1.0)
+ multi_json (~> 1.0)
+ addressable (2.2.6)
+ childprocess (0.2.2)
+ ffi (~> 1.0.6)
+ chunky_png (1.2.1)
+ coffee-script (2.2.0)
+ coffee-script-source
+ execjs
+ coffee-script-source (1.1.2)
+ compass (0.11.5)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.1)
+ daemons (1.1.4)
+ diff-lcs (1.1.3)
+ em-websocket (0.3.1)
+ addressable (>= 2.1.1)
+ eventmachine (>= 0.12.9)
+ eventmachine (0.12.10)
+ execjs (1.2.4)
+ multi_json (~> 1.0)
+ fancy-buttons (1.1.2)
+ compass (>= 0.11)
+ ffi (1.0.9)
+ fssm (0.2.7)
+ guard (0.6.3)
+ thor (~> 0.14.6)
+ guard-livereload (0.3.1)
+ em-websocket (>= 0.2.0)
+ guard (>= 0.4.0)
+ multi_json (~> 1.0.3)
+ haml (3.1.3)
+ hike (1.2.1)
+ http_router (0.10.2)
+ rack (>= 1.0.0)
+ url_mount (~> 0.2.1)
+ i18n (0.6.0)
+ jasmine (1.0.2.1)
+ json_pure (>= 1.4.3)
+ rack (>= 1.1)
+ rspec (>= 1.3.1)
+ selenium-webdriver (>= 0.1.3)
+ json_pure (1.5.4)
+ spruz (~> 0.2.8)
+ libv8 (3.3.10.2)
+ maruku (0.6.0)
+ syntax (>= 1.0.0)
+ middleman (2.0.8)
+ coffee-script (~> 2.2.0)
+ compass (~> 0.11.3)
+ guard (~> 0.6.2)
+ haml (~> 3.1.0)
+ maruku (~> 0.6.0)
+ middleman-livereload (~> 0.2.0)
+ padrino-core (~> 0.10.2)
+ padrino-helpers (~> 0.10.2)
+ rack (~> 1.3.0)
+ rack-test (~> 0.6.1)
+ rb-fsevent (~> 0.4.2)
+ sass (~> 3.1.7)
+ sinatra (~> 1.2.6)
+ slim (~> 1.0.1)
+ sprockets (~> 2.0.0)
+ thin (~> 1.2.11)
+ thor (~> 0.14.0)
+ tilt (~> 1.3.1)
+ uglifier (~> 1.0.0)
+ middleman-livereload (0.2.0)
+ guard-livereload (~> 0.3.0)
+ multi_json (1.0.3)
+ padrino-core (0.10.2)
+ activesupport (~> 3.1.0)
+ http_router (~> 0.10.2)
+ sinatra (~> 1.2.6)
+ thor (~> 0.14.3)
+ tilt (~> 1.3.0)
+ padrino-helpers (0.10.2)
+ i18n (~> 0.6)
+ padrino-core (= 0.10.2)
+ rack (1.3.2)
+ rack-test (0.6.1)
+ rack (>= 1.0)
+ rb-fsevent (0.4.3.1)
+ rspec (2.6.0)
+ rspec-core (~> 2.6.0)
+ rspec-expectations (~> 2.6.0)
+ rspec-mocks (~> 2.6.0)
+ rspec-core (2.6.4)
+ rspec-expectations (2.6.0)
+ diff-lcs (~> 1.1.2)
+ rspec-mocks (2.6.0)
+ rubyzip (0.9.4)
+ sass (3.1.7)
+ selenium-webdriver (2.5.0)
+ childprocess (>= 0.2.1)
+ ffi (>= 1.0.7)
+ json_pure
+ rubyzip
+ sinatra (1.2.6)
+ rack (~> 1.1)
+ tilt (>= 1.2.2, < 2.0)
+ slim (1.0.2)
+ temple (~> 0.3.3)
+ tilt (~> 1.3.2)
+ sprockets (2.0.0)
+ hike (~> 1.2)
+ rack (~> 1.0)
+ tilt (~> 1.1, != 1.3.0)
+ spruz (0.2.13)
+ syntax (1.0.0)
+ temple (0.3.4)
+ therubyracer (0.9.4)
+ libv8 (~> 3.3.10)
+ thin (1.2.11)
+ daemons (>= 1.0.9)
+ eventmachine (>= 0.12.6)
+ rack (>= 1.0.0)
+ thor (0.14.6)
+ tilt (1.3.3)
+ uglifier (1.0.3)
+ execjs (>= 0.3.0)
+ multi_json (>= 1.0.2)
+ url_mount (0.2.1)
+ rack
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ fancy-buttons
+ jasmine
+ middleman
+ therubyracer
6 config.rb
View
@@ -8,10 +8,10 @@
# Change Compass configuration
compass_config do |config|
- config.output_style = :compact
- config.sass_options = {
+ config.output_style = :compact
+ config.sass_options = {
:line_comments => false
- }
+ }
end
###
19 source/index.html.haml
View
@@ -4,25 +4,30 @@
%head
/[if lt IE 9]
%script(src="//html5shim.googlecode.com/svn/trunk/html5.js")
- %link{ :type => 'text/css', :href => 'stylesheets/layout.css', :rel=>'stylesheet' }
+ %link{ :type => 'text/css', :href => 'stylesheets/layout.css', :rel=>'stylesheet' }
%script(src='http://use.typekit.com/ayf8rml.js')
+ %script{:src => '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js',
+ :type => 'text/javascript' }
+ %script{:type => 'text/javascript',
+ :src => 'javascripts/mazery.js'}
:javascript
try{Typekit.load();}catch(e){}
-
+
%title mazing
%body
%header
.primary_layout
%span.bigger
- mazery:
+ mazery
%span.smaller
a js/coffeescript/html5 experiment
-
+
%hr.space
%content
.primary_layout
- %p
- test
- test2
+ %a.button Generate
+ %hr.space
+ %canvas#mazecanvas{ :width => 950, :height => 950 }
+ Maze Canvas.
42 source/javascripts/mazery.js.coffee
View
@@ -0,0 +1,42 @@
+$(document).ready ->
+ mazery()
+
+mazery = ->
+ # grab the context
+ canvas = $('#mazecanvas').get(0)
+ canvasWidth = canvas.width
+ canvasHeight = canvas.height
+ cellSize = 30
+
+ # get the real canvas size that we can fit.
+ for x in [0.5..canvasWidth]
+ if x + cellSize > canvasWidth
+ canvasWidth = x
+ x += cellSize
+ for y in [0.5..canvasHeight]
+ if y + cellSize > canvasHeight
+ canvasHeight = y
+ y += cellSize
+
+ if canvas.getContext
+ context = canvas.getContext('2d')
+
+ # draw a grid.
+ context.strokeStyle = "#eaeaea"
+ for x in [0.5..canvasWidth]
+ context.beginPath()
+ context.moveTo(x, 0)
+ context.lineTo(x, canvasHeight)
+ context.fill()
+ context.closePath()
+ context.stroke()
+ x += cellSize
+
+ for y in [0.5..canvasHeight]
+ context.beginPath()
+ context.moveTo(0, y)
+ context.lineTo(canvasWidth, y)
+ context.fill()
+ context.closePath()
+ context.stroke()
+ y += cellSize
46 source/stylesheets/layout.css.sass
View
@@ -2,14 +2,33 @@
@import blueprint
@import compass
+$background-color: #09090b
+$background-color: #161621
+
+$text-color: white
+$button-color: #91BD09
+$theme2: #e63c9f
+
body
+blueprint-typography(true)
+blueprint
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif
+ background: $background-color
form
+blueprint-form
+p, span, h1, h2, h3
+ color: $text-color
+
+header p, span, h1, h2, h3
+ +transition-property(all)
+ +transition-duration(0.2s)
+ +transition-timing-function(ease-in-out)
+ &:hover
+ color: $theme2
+ +text-shadow($theme2 1px 1px 2px)
+
.primary_layout
+container
header
@@ -22,11 +41,34 @@ form
header
span.bigger
- +text-shadow(#575757 2px 2px 3px)
+ +text-shadow($text-color 1px 1px 2px)
font-size: 4em
+ font-weight: bold
span.smaller
- font-size: 2.5em
+ +text-shadow($text-color 1px 1px 2px)
+ font-size: 2em
+ margin-left: 20px
hr.space
+colspacer
+.button, .button:visited
+ background: $theme2
+ display: inline-block
+ color: white
+ padding: 7px 12px 8px
+ text-decoration: none
+ font-weight: bold
+ font-size: 2em
+ line-height: 1em
+ +border-radius(5px)
+ +box-shadow(0 3px 3px rgba(0,0,0,1))
+ +text-shadow(0 -1px 1px rgba(0,0,0,0.25))
+ position: relative
+ cursor: pointer
+ border-bottom: 1px solid rgba(0,0,0,0.25)
+ &:hover
+ color: white
+ background: darken($theme2, 10%)
+ &:active
+ top: 1px
Please sign in to comment.
Something went wrong with that request. Please try again.