Display collection header.

library.css

@@ -24,12 +24,10 @@
   display: block;
   padding: 20px;
   margin-left: 30px;
-
   margin-right: 20px;
   margin-bottom: 20px;
 }
 
-
 .library-view .collection .teaser {
   position: absolute;
   top: 40px;
@@ -58,17 +56,6 @@
 }
 
 
-.library-view .collection.active {
-  background: #fff;
-}
-
-.library-view .navigation .label {
-  margin-top: 30px;
-  padding-bottom: 20px;
-  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
-  font-size: 16px;
-}
-
 /* Collection View
 ======================================= */
 
@@ -83,6 +70,43 @@
    padding-top: 30px;
 }
 
+
+
+/* Collection metadata */
+
+.collection-view .collection {
+  position: relative;
+  display: block;
+  padding: 40px;
+  padding-top: 20px;
+  margin-left: 30px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  border-bottom: 2px solid #ccc;
+}
+
+.collection-view .collection .teaser {
+  position: absolute;
+  top: 40px;
+  right: 20px;
+  width: 100px;
+  border-radius: 50px;
+}
+
+.collection-view .collection .name {
+  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
+  font-size: 26px;
+}
+
+.collection-view .collection .description {
+  color: rgba(0,0,0, 0.7);
+  padding: 10px 0;
+  margin-right: 100px;
+  font-size: 18px;
+}
+
+/* Records stuff */
+
 .collection-view .record {
   display: block;
   background: white;

src/collection_view.js

@@ -6,6 +6,7 @@ var html = util.html;
 var View = require("substance-application").View;
 var $$ = require("substance-application").$$;
 
+
 // Substance.Collection.View
 // ==========================================================================
 //
@@ -23,15 +24,32 @@ CollectionView.Prototype = function() {
   // Rendering
   // --------
   //
-  // .collection
+  // .collection-view
   //   .records
   //     .title
   //     .authors
 
   this.render = function() {
+
     // Render the collection
     var collection = this.collectionCtrl.collection;
     var records = collection.records;
+
+    // Collection metadata
+    // ----------
+
+    this.el.appendChild($$('.collection', {
+      children: [
+        $$('.name', {text: collection.name}),
+        $$('.description', {text: collection.description}),
+        $$('img.teaser', {src: collection.image})
+      ]
+    }));
+
+
+    // Collection records
+    // ----------
+
     var recordsEl = $$('.records');
 
     // Sort by published_on date
@@ -74,8 +92,6 @@ CollectionView.Prototype = function() {
         children: children
       }));
 
-
-
     }, this);
 
     this.el.appendChild(recordsEl);