guard, coffeescript, and fonts

qrush · Oct 2, 2011 · 7f830f6 · 7f830f6
1 parent 627731c
commit 7f830f6
Show file tree

Hide file tree

Showing 13 changed files with 298 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+coffeescripts/*.js
diff --git a/Gemfile b/Gemfile
@@ -2,3 +2,7 @@ source :rubygems
 
 gem "rack-contrib"
 gem "rack-rewrite"
+
+group :development do
+  gem 'guard-coffeescript'
+end
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,14 +1,28 @@
 GEM
   remote: http://rubygems.org/
   specs:
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.1.2)
+    execjs (1.2.9)
+      multi_json (~> 1.0)
+    guard (0.8.3)
+      thor (~> 0.14.6)
+    guard-coffeescript (0.5.2)
+      coffee-script (>= 2.2.0)
+      guard (>= 0.8.3)
+    multi_json (1.0.3)
     rack (1.3.4)
     rack-contrib (1.1.0)
       rack (>= 0.9.1)
     rack-rewrite (1.2.1)
+    thor (0.14.6)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  guard-coffeescript
   rack-contrib
   rack-rewrite
diff --git a/Guardfile b/Guardfile
@@ -0,0 +1,7 @@
+guard 'coffeescript', input: 'javascripts' do
+  callback(:start_begin) do
+    fork do
+      `rackup`
+    end
+  end
+end
diff --git a/index.html b/index.html
@@ -5,17 +5,36 @@
     <link rel="stylesheet" href="/stylesheets/reset.css" type="text/css">
     <link rel="stylesheet" href="/stylesheets/screen.css" type="text/css">
     <script src="/javascripts/jquery.js"></script>
+    <script src="/javascripts/counter.js"></script>
   </head>
   <body>
     <div class="box">
-      <div>child 1</div>
-      <div>child 2</div>
-      <div>child 3</div>
+      <div>
+        <h2>blue</h2>
+        <h3>100</h3>
+      </div>
+      <div>
+        <h2>red</h2>
+        <h3>100</h3>
+      </div>
+      <div>
+        <h2>green</h2>
+        <h3>100</h3>
+      </div>
     </div>
     <div class="box">
-      <div>child 1</div>
-      <div>child 2</div>
-      <div>child 3</div>
+      <div>
+        <h2>yellow</h2>
+        <h3>100</h3>
+      </div>
+      <div>
+        <h2>black</h2>
+        <h3>100</h3>
+      </div>
+      <div>
+        <h2>gray</h2>
+        <h3>100</h3>
+      </div>
     </div>
   </body>
 </html>
diff --git a/javascripts/counter.coffee b/javascripts/counter.coffee
@@ -0,0 +1,2 @@
+$ ->
+  console.log("started!")
diff --git a/javascripts/counter.js b/javascripts/counter.js
@@ -0,0 +1,5 @@
+(function() {
+  $(function() {
+    return console.log("started!");
+  });
+}).call(this);
diff --git a/stylesheets/Gemfile.lock b/stylesheets/Gemfile.lock
@@ -0,0 +1,14 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    rack (1.3.4)
+    rack-contrib (1.1.0)
+      rack (>= 0.9.1)
+    rack-rewrite (1.2.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  rack-contrib
+  rack-rewrite
diff --git a/stylesheets/GoudyStM-webfont.eot b/stylesheets/GoudyStM-webfont.eot
diff --git a/stylesheets/GoudyStM-webfont.svg b/stylesheets/GoudyStM-webfont.svg
diff --git a/stylesheets/GoudyStM-webfont.ttf b/stylesheets/GoudyStM-webfont.ttf
diff --git a/stylesheets/GoudyStM-webfont.woff b/stylesheets/GoudyStM-webfont.woff
diff --git a/stylesheets/screen.css b/stylesheets/screen.css
@@ -1,3 +1,21 @@
+@font-face {
+  font-family: 'SortsMillGoudyRegular';
+  src: url('GoudyStM-webfont.eot');
+  src: url('GoudyStM-webfont.eot?#iefix') format('embedded-opentype'),
+       url('GoudyStM-webfont.woff') format('woff'),
+       url('GoudyStM-webfont.ttf') format('truetype'),
+       url('GoudyStM-webfont.svg#SortsMillGoudyRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+body {
+  background: #ECDADA;
+  font: 60px/68px 'SortsMillGoudyRegular', Arial, sans-serif;
+  letter-spacing: 0;
+}
+
 .box {
   /* basic styling */
   width: 100%;
@@ -14,16 +32,74 @@
   box-orient: horizontal;
 }
 
-.box > div {
+.box div {
+  border: 1px solid;
+  width: 33%;
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
 }
 
-/* our colors */
+.box div h2 {
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+
+  display: box;
+  box-orient: vertical;
+  box-pack: center;
+  box-align: center;
+}
+
+.box div h3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+
+  display: box;
+  box-orient: vertical;
+  box-pack: center;
+  box-align: center;
+  font-size: 400%;
+}
+/*
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+ 
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  
+  display: box;
+  box-orient: horizontal;
+  box-pack: center;
+  box-align: center;
+  */
+
+
+/* our colors 
 .box > div:nth-child(1) { background: #FCC; }
 .box > div:nth-child(2) { background: #CFC; }
 .box > div:nth-child(3) { background: #CCF; }
+*/
 
 /*
 .box > div:hover {