Main Titles and module summary

app/backlog.jade

@@ -5,7 +5,7 @@ block head
 
 block content
   section.main.backlog
-    h1 Decathlon Backlog
+    include views/components/mainTitle
     include views/components/summary
     include views/modules/burndown
     div.sub-menu

app/styles/components/summary.scss

@@ -0,0 +1,60 @@
+.summary {
+    background: $blackish;
+    color: $white;
+    padding: 1em;
+    @include clearfix;
+    ul {
+        margin: 0;
+        padding: 0;
+        float: left;
+        margin-top: 4px;
+        width: 50%;
+    }
+    li {
+        float: left;
+        display: block;
+        margin-right: 4%;
+    }
+    .data {
+        float: left;
+        margin-top: 4px;
+        margin-right: 1.5em;
+        .number {
+            color: $freshTaiga;
+        }
+    }
+}
+
+.summary-progress-bar {
+    height: 30px;
+    margin-bottom: 0;
+    margin-right: 10px;
+    background: $whitish;
+    width: 20%;
+    position: relative;
+    float: left;
+    .current-progress {
+        position: absolute;
+        top: 3px;
+        left: 2px;
+        width: calc(30% - 4px);
+        background: $freshTaiga;
+        height: 24px;
+    }
+}
+
+.number {
+    font-family: 'DroidSans-Bold';
+    @extend .xlarge;
+    float: left;
+    margin-right: .2em;
+}
+
+.description {
+    font-family: 'DroidSans';
+    @extend .small;
+    float: left;
+    line-height: 1em;
+    position: relative;
+    top: -2px;
+}

app/styles/dependencies/typography.scss

@@ -21,11 +21,22 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /*__Font Sizes__*/
-.small {font-size: .7em;}
+.small {font-size: .8rem;}
-.medium {font-size: 1em;}
+.medium {font-size: 1rem;}
-.large {font-size: 1.2em;}
+.large {font-size: 1.2rem;}
-.xlarge {font-size: 2em;}
+.xlarge {font-size: 2rem;}
-.xxlarge {font-size: 3em;}
+.xxlarge {font-size: 3rem;}
+.xxxlarge {font-size: 3rem;}
+
+h1 {
+    @extend .xxlarge;
+    font-family: 'ostrichSans';
+    margin-bottom: 2rem;
+    .green {
+        color: $greenTaiga;
+        margin-left: .3rem;
+    }
+}
 
 p { margin: 0 0 20px 0;
     img {

app/styles/layout/base.scss

@@ -7,7 +7,7 @@ body {
     width: 100%;
     height: 100%;
     background: #fff; /* fallback */
-    font: 14px/21px 'DroidSans', Arial, sans-serif;
+    font: 16px/21px 'DroidSans', Arial, sans-serif;
     color: #444;
     -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
     -webkit-text-size-adjust: 100%;
@@ -29,6 +29,7 @@ body {
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 200px;
+    padding: 2em 1em;
 }
 
 .main {
@@ -36,6 +37,7 @@ body {
     flex-grow: 8;
     flex-shrink: 0;
     flex-basis: 200px;
+    padding: 2em;
 }
 
 .icon {

app/styles/main.scss

@@ -19,6 +19,7 @@ $prefix-for-spec:      true;
 //Components
 @import 'components/buttons';
 @import 'components/avatar';
+@import 'components/summary';
 
 //Layout
 @import 'layout/base';

app/styles/modules/nav.scss

@@ -2,14 +2,14 @@
     width: 90px;
     background-image: url("/images/menu.png");
     background-attachment: fixed;
-    background-position: center bottom;
+    background-position: left bottom;
     flex-wrap: wrap;
     padding: 2em .3em;
     font-family: 'ostrichSans';
 }
 
 .logo {
-    margin-bottom: 2em;
+    margin-bottom: 1em;
     img {
         width: 100%;
     }
@@ -37,7 +37,7 @@
         }
         .icon{
             @extend .xlarge;
-            line-height: 1.1em;
+            line-height: 2.2rem;
         }
         .item {
             @extend .large;

app/views/components/mainTitle.jade

@@ -0,0 +1,2 @@
+h1 ProjectName
+  span.green Title

app/views/components/summary.jade

@@ -1,17 +1,19 @@
 div.summary
-  div.progress-bar
+  div.summary-progress-bar
     div.current-progress
+  div.data
     span.number 30%
+    span.description completed
   ul
     li
       span.number 12
-      span.description project points
+      span.description project<br />points
     li
       span.number 23
-      span.description defined points
+      span.description defined<br />points
     li
       span.number 12
-      span.description assigned points
+      span.description assigned<br />points
     li
       span.number 23
-      span.description closed points
+      span.description closed<br />points