Improve post and page templates, fix About link, remove Forum link

Author: pingswept

assets/css/rascal.css

@@ -12,6 +12,8 @@ body {
   background-color: #f5f5f5;
   margin-top: 0px;
   padding-top: 60px;
+  position: static;
+  /* to prevent weird overlap on page.hbs */
 }
 ul.nav li {
   display: inline;

assets/css/rascal.less

@@ -26,6 +26,7 @@ body {
     background-color: @rascal-bright-white;
     margin-top: 0px;
     padding-top: 60px;
+    position: static; /* to prevent weird overlap on page.hbs */
 }
 
 ul.nav li {

index.hbs

@@ -10,9 +10,8 @@
             <a class="brand" href="/"><img src="http://rascalmicro.com/img/rm-logo-words-only-light.png"></a>
             <ul class="nav">
                 <li class="active"><a href="http://store.rascalmicro.com">Store</a></li>
-                <li><a href="/about.htm">About</a></li>
+                <li><a href="/about">About</a></li>
                 <li><a href="/blog/">Blog</a></li>
-                <li><a href="/forum/">Forum</a></li>
                 <li><a href="/docs/">Docs</a></li>
             </ul>
         </div>

page.hbs

@@ -3,20 +3,32 @@
 {{! This is a page template. A page outputs content just like any other post, and has all the same
     attributes by default, but you can also customise it to behave differently if you prefer. }}
 
+    <div class="navbar-fill">
+        <div class="container">
+            <a class="brand" href="/"><img src="http://rascalmicro.com/img/rm-logo-words-only-light.png"></a>
+            <ul class="nav">
+                <li class="active"><a href="http://store.rascalmicro.com">Store</a></li>
+                <li><a href="/about">About</a></li>
+                <li><a href="/blog/">Blog</a></li>
+                <li><a href="/docs/">Docs</a></li>
+            </ul>
+        </div>
+    </div>
+    <script type="text/javascript">
+      function activateNavbar() { // From https://gist.github.com/1362111, but with the regex tweaked
+        var path = location.pathname.replace (/^(\/.+?\/).+$/, '$1');
+        $('ul.nav li').removeClass("active");
+        $('ul.nav a[href="' + path + '"]').parent().addClass("active");
+      }
+      $(function(){
+        activateNavbar();
+      })
+    </script>
+
 <main class="content" role="main">
 
     <article class="{{post_class}}">
 
-        <header class="post-header">
-            <a class="blog-logo" href="{{@blog.url}}">
-                {{#if @blog.logo}}
-                    <img src="{{@blog.logo}}" alt="Blog Logo" />
-                {{else}}
-                    <span class="blog-title">{{@blog.title}}</span>
-                {{/if}}
-            </a>
-        </header>
-
         {{#post}}
 
             <h1 class="post-title">{{{title}}}</h1>

post.hbs

@@ -3,21 +3,32 @@
 {{! The comment above "< default" means - insert everything in this file into
     the {body} of the default.hbs template, which contains our header/footer. }}
 
+    <div class="navbar-fill">
+        <div class="container">
+            <a class="brand" href="/"><img src="http://rascalmicro.com/img/rm-logo-words-only-light.png"></a>
+            <ul class="nav">
+                <li class="active"><a href="http://store.rascalmicro.com">Store</a></li>
+                <li><a href="/about">About</a></li>
+                <li><a href="/blog/">Blog</a></li>
+                <li><a href="/docs/">Docs</a></li>
+            </ul>
+        </div>
+    </div>
+    <script type="text/javascript">
+      function activateNavbar() { // From https://gist.github.com/1362111, but with the regex tweaked
+        var path = location.pathname.replace (/^(\/.+?\/).+$/, '$1');
+        $('ul.nav li').removeClass("active");
+        $('ul.nav a[href="' + path + '"]').parent().addClass("active");
+      }
+      $(function(){
+        activateNavbar();
+      })
+    </script>
+
 <main class="content" role="main">
 
     <article class="{{post_class}}">
 
-        {{! Each post has the blog logo at the top, with a link back to the home page }}
-        <header class="post-header">
-            <a class="blog-logo" href="{{@blog.url}}">
-                {{#if @blog.logo}}
-                    <img src="{{@blog.logo}}" alt="Blog Logo" />
-                {{else}}
-                    <span class="blog-title">{{@blog.title}}</span>
-                {{/if}}
-            </a>
-        </header>
-
         {{! Everything inside the #post tags pulls data from the post }}
         {{#post}}
 
@@ -58,4 +69,4 @@
 
     </article>
 
-</main>
+</main>