standing out more

src/component.json

@@ -29,6 +29,7 @@
         "templates/progress.eco"
     ],
     "styles": [
+        "styles/fonts.css",
         "styles/app.styl"
     ]
 }

src/modules/graph.coffee

@@ -81,7 +81,7 @@ module.exports =
         # Get available space.    
         { height, width } = document.querySelector('#graph').getBoundingClientRect()
 
-        margin = { top: 20, right: 20, bottom: 20, left: 20 }
+        margin = { top: 20, right: 30, bottom: 30, left: 30 }
         width -= margin.left + margin.right
         height -= margin.top + margin.bottom
 
@@ -106,7 +106,7 @@ module.exports =
         
         # Line generator.
         line = d3.svg.line()
-        .interpolate("precise")
+        .interpolate("linear")
         .x( (d) -> x(d.date) )
         .y( (d) -> y(d.points) )
 
@@ -144,14 +144,29 @@ module.exports =
         .attr("class", "ideal line")
         .attr("d", line(ideal))
 
+        # Add an actual line drop shadow.
+        svg.append("path")
+        .attr("class", "actual line shadow")
+        .attr("d", line.y( (d) -> y(d.points) + 4 )(actual))
+
         # Add the actual line path.
         svg.append("path")
         .attr("class", "actual line")
-        .attr("d", line(actual))
+        .attr("d", line.y( (d) -> y(d.points) )(actual))
 
         # Collect the tooltip here.
         tooltip = null
 
+        # Add circle shadows.
+        svg.selectAll('circle.shadow')
+        .data(actual[1...])
+        .enter()
+        .append('svg:circle')
+        .attr("cx", ({ date }) -> x date )
+        .attr("cy", ({ points }) -> y(points) + 4 )
+        .attr("r",  ({ radius }) -> 5 )
+        .attr('class', 'shadow')
+
         # Show when we closed an issue.
         svg.selectAll("a.issue")
         .data(actual[1...]) # skip the starting point

src/modules/repo.coffee

@@ -67,7 +67,7 @@ class exports.Repo
                 )
             ], (err, values) ->
                 # Render the body.
-                render 'body', 'graph'
+                render 'body', 'graph', name: self.repo
 
                 # Render the progress.
                 render '#progress', 'progress', { progress }

src/styles/app.styl

@@ -1,11 +1,13 @@
-$closed = #4ACAB4
+$closed = #4DAF7C
-$opened = #FE5D55
+$opened = #E55F3A
-$grey   = #CBC8C3
+$grey   = #E2E2E2
 $ideal  = $grey
 
 body
-    background: #31323A
+    font-family: 'Source Sans Pro', sans-serif
+    background: linear-gradient(135deg, #d7bcab 0%, #cc9485 100%)
     padding: 100px
+    color: #64584C
 
 ul
     list-style-type: none
@@ -15,31 +17,104 @@ ul
         padding: 0
 
 h2
-    font-size: 14px
+    font-size: 16px
     text-transform: uppercase
 
 .box
-    background: #43444f
+    background: #FFF
-    color: #FFF
     box-shadow: 2px 4px 6px rgba(0,0,0,0.2)
 
     &.generic, &.info, &.error, &.success
-        border-top: 4px solid #E2E2E2
+        border-top: 4px solid #EAC85D
         padding: 20px
         width: 50%
         margin: 0 auto
 
     &.info
-        border-top-color: #96CFFB
+        border-top-color: #5F90B0
 
     &.error
-        border-top-color: #FE5D55
+        border-top-color: #E45E39
 
     &.success
-        border-top-color: #4ACAB4
+        border-top-color: #4DB07A
 
     a
+        color: #64584C
+
+    h1
+        margin: 0
+        padding: 10px 30px
         color: #FFF
+        background: #55BC75
+        font-size: 20px
+        text-transform: uppercase
+
+#graph
+    background: #55BC75
+    height: 200px
+    position: relative
+
+    #tooltip
+        position: absolute
+        top: 0
+        left: 0
+
+    svg
+        path
+            &.line
+                fill: none
+                stroke-width: 1px
+                clip-path: url(#clip)
+
+                &.actual
+                    stroke-width: 4px
+                    stroke: #FFF
+
+                    &.shadow
+                        stroke-width: 5px
+                        stroke: rgba(#000, 0.25)
+
+                &.ideal
+                    stroke: #3D9E68
+                    stroke-dasharray: 5,5
+
+            &.area
+                clip-path: url(#clip)
+                fill: #4DAF7C
+
+        line
+            &.today
+                stroke: rgba(#FFF, 0.75)
+                stroke-width: 1px
+
+        circle
+            fill: #FFF
+            stroke: transparent
+            stroke-width: 15px
+            cursor: pointer
+
+            &.shadow
+                fill: rgba(#000, 0.25)
+
+        .axis
+            shape-rendering: crispEdges
+            
+            &.x
+                line
+                    stroke: #3D9E68
+
+                text
+                    font-weight: bold
+                    fill: #FFF
+
+                path
+                    display: none
+
+            &.y
+                line, path
+                    fill: none
+                    stroke: #000
 
 #progress
     padding: 20px
@@ -79,64 +154,4 @@ h2
         
         &.opened
             float: right
-            color: $opened
+            color: $opened
-
-#graph
-    background: #FFF
-    height: 200px
-    position: relative
-
-    #tooltip
-        position: absolute
-        top: 0
-        left: 0
-
-    svg
-        path
-            &.line
-                fill: none
-                stroke: $grey
-                stroke-width: 1px
-                clip-path: url(#clip)
-
-                &.actual
-                    stroke-width: 2px
-                    stroke: $closed
-
-                &.ideal
-                    stroke: $ideal
-
-            &.area
-                clip-path: url(#clip)
-                fill: lighten($grey, 90%)
-
-        line
-            &.today
-                stroke: $grey
-                stroke-width: 2px
-                stroke-dasharray: 5,5
-
-        circle
-            fill: $closed
-            stroke: transparent
-            stroke-width: 20px
-            cursor: pointer
-
-        .axis
-            shape-rendering: crispEdges
-            
-            &.x
-                line
-                    stroke: #EBEBE9
-
-                text
-                    font-weight: bold
-                    fill: $grey
-
-                path
-                    display: none
-
-            &.y
-                line, path
-                    fill: none
-                    stroke: #000

src/styles/fonts.css

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
+    url('/fonts/SourceSansPro-Regular.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
+    url('/fonts/SourceSansPro-Semibold.woff') format('woff');
+}
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
+    url('/fonts/SourceSansPro-Bold.woff') format('woff');
+}

src/templates/graph.eco

@@ -1,4 +1,5 @@
 <div class="box">
+    <h1><%- @name %></h2>
     <div id="graph">
         <div id="tooltip"></div>
     </div>