Styled hard-coded list of tasks, points, duedates, assignees.

app.js

@@ -26,7 +26,27 @@ app.configure('production', function(){
 
 app.get('/', function(req, res){
   res.render('index', {
-    title: 'TaskPoint'
+    title: 'TaskPoint',
+    todos: [
+      {
+        text: 'Find the toriadors!',
+        points: 12,
+        assigned: ['Dan', 'Tony the Terrible Gladiator'],
+        due: 'June 3, 2012'
+      },
+      {
+        text: 'Move the cat.',
+        points: 15,
+        assigned: ['Wanda, King of the Fish People', 'Arnie', 'Alonzo', 'Rosencrantz & Guildenstern'],
+        due: 'Monday'
+      },
+      {
+        text: 'Figure of if Irene is really a goat or if that\'s just a title.',
+        points: 3,
+        assigned: ['Merv Dole', 'Irene the Goat', 'Walter'],
+        due: 'day after tomorrow'
+      }
+    ]
   });
 });
 

public/stylesheets/style.css

@@ -4,3 +4,104 @@ body {
   padding: 50px;
   text-shadow: 0 1px 0 #fff;
 }
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+ul li {
+  margin-bottom: 12px;
+}
+.todos {
+  margin-left: 20px;
+}
+.todos li.todo {
+  width: 500px;
+}
+.todos .text {
+  font-weight: bold;
+}
+.todos .points {
+  background: #008000;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  color: #fff;
+  float: left;
+  font-weight: bold;
+  height: 100%;
+  margin-right: 5px;
+  padding: 2px 5px;
+  position: relative;
+  text-shadow: 0 1px 0 #000;
+  top: -2px;
+}
+.todos .points.points-1 {
+  background: #009e00;
+}
+.todos .points.points-2 {
+  background: #00a300;
+}
+.todos .points.points-3 {
+  background: #00a800;
+}
+.todos .points.points-4 {
+  background: #00ad00;
+}
+.todos .points.points-5 {
+  background: #00b200;
+}
+.todos .points.points-6 {
+  background: #00b700;
+}
+.todos .points.points-7 {
+  background: #00bc00;
+}
+.todos .points.points-8 {
+  background: #00c100;
+}
+.todos .points.points-9 {
+  background: #00c600;
+}
+.todos .points.points-10 {
+  background: #00cb00;
+}
+.todos .points.points-11 {
+  background: #00d000;
+}
+.todos .points.points-12 {
+  background: #00d500;
+}
+.todos .points.points-13 {
+  background: #00da00;
+}
+.todos .points.points-14 {
+  background: #00df00;
+}
+.todos .points.points-15 {
+  background: #00e400;
+}
+.todos .points.points-16 {
+  background: #00e900;
+}
+.todos .points.points-17 {
+  background: #0e0;
+}
+.todos .points.points-18 {
+  background: #00f300;
+}
+.todos .points.points-19 {
+  background: #00f800;
+}
+.todos .points.points-20 {
+  background: #00fd00;
+}
+.todos ul.assigned-to li {
+  color: #999;
+  font-size: 13px;
+  margin: 3px 5px 3px 50px;
+}
+.todos .due {
+  color: #999;
+  margin-left: 20px;
+}

public/stylesheets/style.styl

@@ -1,5 +1,66 @@
+pale = #999
+
+
+border-radius(n)
+  border-radius n
+  -moz-border-radius n
+  -webkit-border-radius n
+
+box-shadow()
+  box-shadow arguments
+  -moz-box-shadow arguments
+  -webkit-box-shadow arguments
+
+gradient(color-top, color-middle, color-bottom)
+  background -moz-linear-gradient(top, color-top 0%, color-middle 50%, color-bottom)
+  background -webkit-gradient(linear, left top, left bottom, from(color-top), color-stop(0.50, color-middle), to(color-bottom))
+
+
 body
   background #f0f0f0
   font 14px "Lucida Grande", Helvetica, Arial, sans-serif
   padding 50px
   text-shadow 0 1px 0 white
+
+ul
+  list-style-type none
+  margin 0
+  padding 0
+
+  li
+    margin-bottom 12px
+
+.todos
+  margin-left 20px
+
+  li.todo
+    width 500px
+
+  .text
+    font-weight bold
+
+  .points
+    background green
+    border-radius 3px
+    color white
+    float left
+    font-weight bold
+    height 100%
+    margin-right 5px
+    padding 2px 5px
+    position relative
+    text-shadow 0 1px 0 black
+    top -2px
+
+    for points in 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
+      &.points-{points}
+        background #090 + (rgb(0, 5, 0) * points)
+
+  ul.assigned-to li
+    color pale
+    font-size 13px
+    margin 3px 5px 3px 50px
+
+  .due
+    color pale
+    margin-left 20px

views/index.jade

@@ -1 +1,13 @@
 h1= title
+
+div.todos
+  h2 To Do
+  ul
+    for todo in todos
+      li.todo
+        span.points(class='points-' + todo.points)= todo.points
+        span.text= todo.text
+        span.due Due #{todo.due}
+        ul.assigned-to
+          for name in todo.assigned
+            li= name