put buttons on the side

src/scripts/browse.tag

@@ -1,38 +1,45 @@
 <browse>
-  <div class="content">
-    <menu
-      name="Categories"
-      items={opts.state.categories}
-      onfilter={filterCategories}
-    >
-    </menu>
-    <loading if={loading}></loading>
-    <div
-      if={!loading}
-      style={cardStyle}
-      class="card"
-      each={result in opts.state.results}
-    >
-      <div class="card-header">
-        <h3 class="card-title">
-          { result[1].title } by { result[1].author }
-        </h3>
+  <div class="content container">
+    <div class="columns">
+      <div class="column col-2">
+        <categoryfilter
+          name="Categories"
+          category={category}
+          items={opts.state.categories}
+          onfilter={filterCategories}
+        >
+        </categoryfilter>
       </div>
-      <div class="card-body">
-        <raw content="{ converter.makeHtml(result[1].content) }"></raw>
-        <a
-          style={linkStyle}
-          onclick={openPost(result[1].id)}
+      <div class="column col-10">
+        <loading if={loading}></loading>
+        <div
+          if={!loading}
+          style={cardStyle}
+          class="card"
+          each={result in opts.state.results}
         >
-          Read More
-        </a>
+          <div class="card-header">
+            <h3 class="card-title">
+              { result[1].title } by { result[1].author }
+            </h3>
+          </div>
+          <div class="card-body">
+            <raw content="{ converter.makeHtml(result[1].content) }"></raw>
+            <a
+              style={linkStyle}
+              onclick={openPost(result[1].id)}
+            >
+              Read More
+            </a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 
 <script type="es6">
 import './raw.tag';
-import './menu.tag';
+import './categoryfilter.tag';
 import './loading.tag';
 import route from 'riot-route';
 import { default as RiotControl } from 'riotcontrol';
@@ -42,6 +49,7 @@ var self = this;
 
 self.route = route;
 self.loading = false;
+self.category = false;
 self.converter = new showdown.Converter();
 
 self.openPost = (id) => {
@@ -63,7 +71,11 @@ self.filterCategories = (category) => {
   return ((ev) => {
     ev.preventDefault();
 
-    self.update({"loading" : true});
+    self.update({
+      "loading" : true,
+      "category" : category
+    });
+
     self.route(`browse/${category}`);
     window.cached(`/blog/getbrowse/${category}/0`)
     .then((resp) => { return resp.json() })

src/scripts/categoryfilter.tag

@@ -0,0 +1,43 @@
+<categoryfilter>
+  <div>
+    <h4>
+      { opts.name }
+    </h4>
+    <ul>
+      <!-- menu header text -->
+      <li class="divider">
+      </li>
+      <!-- menu item -->
+      <div each={item in opts.items} class="menu-item menu-element">
+        <button
+          class="btn btn-primary category-button"
+          style={highlight(item)}
+          onclick={parent.opts.onfilter(item)}
+        >
+          { item }
+        </button>
+        <yield/>
+      </div>
+    </ul>
+  </div>
+<script>
+
+preventDefault(ev) {
+  ev.preventDefault;
+}
+
+highlight(item) {
+
+  var styles = {
+    "text-transform" : "capitalize",
+    "background-color" : "white"
+  };
+
+  if (this.opts.category == item) {
+    styles["background-color"] = "rgba(103, 173, 219, 0.40)";
+  }
+  return styles;
+}
+
+</script>
+</categoryfilter>

src/scripts/links.tag

@@ -28,7 +28,7 @@
 
           <div class="tile-action">
             <a target="_blank" href={ item.href }>
-              <button class="btn btn-primary">
+              <button class="btn btn-primary branded">
                 Link
               </button>
             </a>

src/scripts/menu.tag

@@ -9,10 +9,10 @@
     </a>
     <ul class="menu">
       <!-- menu header text -->
-      <li class="divider" data-content="LINKS">
+      <li class="divider">
       </li>
       <!-- menu item -->
-      <div each={item in opts.items} class="menu-item">
+      <div each={item in opts.items} class="menu-item menu-element">
         <a
           class="btn btn-primary menu-button"
           style={styles}
@@ -21,7 +21,6 @@
           { item }
         </a>
         <yield/>
-        <li class="divider"></li>
       </div>
     </ul>
   </div>
@@ -32,7 +31,8 @@ preventDefault(ev) {
 }
 
 this.styles = {
-  "text-transform" : "capitalize"
+  "text-transform" : "capitalize",
+  "border-color" : "#4b93c1"
 };
 
 </script>

src/scripts/postcontrols.tag

@@ -2,7 +2,7 @@
     <div class="controls container">
       <div class="columns">
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-right " + (this.opts.atstart ? "disabled" : " ") + this.opts.prevloading}
+          <button class={"btn btn-lg nav-button branded float-right " + (this.opts.atstart ? "disabled" : " ") + this.opts.prevloading}
                   onclick={this.opts.prev}
           >
 
@@ -10,7 +10,7 @@
           </button>
         </div>
         <div class="column col-6">
-          <button class={"btn btn-lg nav-button float-left  " + (this.opts.atend ? "disabled" : " ") + this.opts.nextloading}
+          <button class={"btn btn-lg nav-button branded float-left  " + (this.opts.atend ? "disabled" : " ") + this.opts.nextloading}
                   onclick={this.opts.next}
           >
             <i class="fa fa-arrow-right" aria-hidden="true"></i>

src/scripts/projects.tag

@@ -31,7 +31,9 @@
               <a
                 target="_blank"
                 href={this.project().html_url}>
-                  <button class="btn btn-primary">See on github</button>
+                  <button class="btn btn-primary branded">
+                    See on github
+                  </button>
               </a>
               </div>
             </div>
@@ -43,7 +45,7 @@
           <div class="column col-6">
             <button
               onclick={this.prev}
-              class="btn btn-lg nav-button float-right"
+              class="btn btn-lg nav-button float-right branded"
             >
               <i class="fa fa-arrow-left" aria-hidden="true"></i>
             </button>
@@ -51,7 +53,7 @@
           <div class="column col-6">
             <button
               onclick={this.next}
-              class="btn btn-lg nav-button float-left"
+              class="btn btn-lg nav-button float-left branded"
             >
               <i class="fa fa-arrow-right" aria-hidden="true"></i>
             </button>

src/styles/riotblog.scss

@@ -79,6 +79,24 @@ $navbarHeight: 100px;
   }
 }
 
+.menu-element {
+  padding-bottom: 2px !important;
+  padding-top: 2px !important;
+}
+
+.category-button {
+  border-radius: 5px !important;
+  border-color: $branding2 !important;
+	display: block !important;
+	margin-top: 0;
+	padding: .6rem 1.2rem .4rem 1.2rem;
+  color: $branding !important;
+	text-decoration: none;
+  &:hover {
+    background-color: $brandingBG !important;
+  }
+}
+
 .menu-button {
 	display: block !important;
 	margin-top: 0;
@@ -90,7 +108,7 @@ $navbarHeight: 100px;
   }
 }
 
-.branded, button {
+.branded {
   border-radius: 5px !important;
   border-color: $branding2 !important;
 	display: block !important;