font

app/index.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {{content-for 'head'}}
-
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="assets/vendor.css">
     <link rel="stylesheet" href="assets/sommer-ember.css">
 

app/routes/bio.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+	model: function() {
+	    return this.store.find('page',26);
+	}
+});

app/styles/app.css

@@ -1,5 +1,6 @@
 body {
     color: #777;
+    font-family: 'Open Sans', sans-serif;
 }
 
 .pure-img-responsive {
@@ -47,11 +48,11 @@ The content `<div>` is where all your content goes.
 }
 
 .header {
-     margin: 0;
+     margin: 0 auto;
      color: #333;
-     text-align: center;
+     max-width: 800px;
+     text-align: left;
      padding: 2.5em 2em 0;
-     border-bottom: 1px solid #eee;
  }
     .header h1 {
         margin: 0.2em 0;
@@ -86,16 +87,15 @@ appears on the left side of the page.
     left: 0;
     bottom: 0;
     z-index: 1000; /* so the menu or its navicon stays above all content */
-    background: #ffffff;
+    background: #191818;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }
     /*
     All anchors inside the menu should be styled like this.
     */
     #menu a {
-	 	color: white;
-     	border-radius: 0px;
+        color: #fff;
         border: none;
         padding: 0.6em 0 0.6em 0.6em;
     }
@@ -112,7 +112,7 @@ appears on the left side of the page.
     /*
     Add that light border to separate items into groups.
     */
-
+    #menu .pure-menu ul,
     #menu .pure-menu .menu-item-divided {
         border-top: 1px solid #333;
     }
@@ -128,8 +128,8 @@ appears on the left side of the page.
     This styles the selected menu item `<li>`.
     */
     #menu .pure-menu-selected,
- {
-        background: #1f8dd6;
+    #menu .pure-menu-heading {
+        background: #000;
     }
         /*
         This styles a link within a selected menu item `<li>`.
@@ -247,6 +247,8 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     }
 }
 
+
+
 /*custom css*/
 
 

app/templates/application.hbs

@@ -7,12 +7,12 @@
 
     <div id="menu">
         <div class="pure-menu">
-            <a class="pure-menu-heading" href="#">Sommer</a>
+            <a class="pure-menu-heading" href="#">&nbsp;</a>
 
             <ul class="pure-menu-list">
                 <li class="pure-menu-item">{{#link-to 'pages' class="button-news pure-menu-link"}}News{{/link-to}}</li>
-                <li class="pure-menu-item">{{#link-to 'pages' class="button-works pure-menu-link"}}Works{{/link-to}}</li>
-                <li class="pure-menu-item">{{#link-to 'pages' class="button-bio pure-menu-link"}}Bio{{/link-to}}</li>
+                <li class="pure-menu-item">{{#link-to 'works' class="button-works pure-menu-link"}}Works{{/link-to}}</li>
+                <li class="pure-menu-item">{{#link-to 'bio' class="button-bio pure-menu-link"}}Bio{{/link-to}}</li>
                 <li class="pure-menu-item">{{#link-to 'pages' class="button-rss pure-menu-link"}}Rss{{/link-to}}</li>
             </ul>
         </div>

app/templates/bio.hbs

@@ -0,0 +1,2 @@
+<div class="header"><h1>{{{model.title}}}</h1></div>
+<div class="content">{{{model.content}}}</div>

app/templates/works.hbs

@@ -1,2 +1,2 @@
-<div class="header">{{{model.title}}}</div>
+<div class="header"><h1>{{{model.title}}}</h1></div>
 <div class="content">{{{model.content}}}</div>

tests/unit/routes/bio-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:bio', 'Unit | Route | bio', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  var route = this.subject();
+  assert.ok(route);
+});