added routing example

app/css/main.css

@@ -3,3 +3,5 @@ body {font-size: 1.2em;}
 .header, .footer {
     margin: 1.4em 0;
 }
+
+code {color: indianred}

app/js/app.js

@@ -43,6 +43,11 @@ route('/', function () {
     riot.mount('#view', 'home');
 });
 
+// about page
+route('/about', function () {
+    riot.mount('#view', 'about');
+});
+
 // [ start router ] ------------------------------
 
 route.start(true);

app/tags/home.tag.html

@@ -1,11 +1,11 @@
 <Home>
-    <section class="is-clear">
+    <section class="">
 
         <h1>RiotJS Kickstarter</h1>
 
         Built your next revolutionary <em>Single Page Application</em> (SPA) starting right here:
 
-        <blockquote>/app/tags/home.tag.html</blockquote>
+        <blockquote><code>/app/tags/home.tag.html</code> </blockquote>
 
         This <strong>seed</strong> kicks your development into high gear with all tools you'll <em>need</em>, and very <em>little</em> you don't.
 

app/tags/layout/footer.tag.html

@@ -1,6 +1,6 @@
 <Footer>
     <section class="footer">
-        &copy;2018 Your Website |
+        &copy;2019 Your Website |
         All rights reserved. |
         <a href="http://riotjs.com">RiotJS</a> &nbsp;
         <a href="http://n2geoff.github.io/grayscale/">Grayscale CSS</a>

app/tags/layout/header.tag.html

@@ -1,13 +1,14 @@
 <Header>
-    <section class="header">
+    <section class="nav">
-        <ul class="navbar">
+        <div class="nav-section">
-            <li class="nav is-large">RiotJS</li>
+            <div class="is-large">RiotJS</div>
-            <li class="nav"><a href="#/">Home</a></li>
+            <div class="content"><a href="#/">Home</a></div>
-        </ul>
+            <div class=""><a href="#/about">About</a></div>
+        </div>
     </section>
 
     <style>
         /* scoped styles */
-        .header {border-bottom: 1px solid #222;}
+        .nav {border-bottom: 1px solid #222;}
     </style>
 </Header>