update buttons

build/styles/riotblog.min.css

@@ -6,7 +6,20 @@
   margin-bottom: 25px !important;
   margin: auto !important; }
 
+.navigate-tab {
+  border: thin solid;
+  border-radius: 5px !important;
+  margin-bottom: 5px;
+  margin-left: 2px;
+  margin-right: 2px; }
+  .navigate-tab:hover {
+    background-color: #5764c6; }
+
+.navigate-item:hover {
+  color: white !important; }
+
 .content-box, .projects-box, .posts-box {
+  margin-top: 10px;
   display: flex !important;
   /* defines flexbox */
   flex-direction: column !important;

src/scripts/app.tag

@@ -1,10 +1,22 @@
 <app>
   <ul class="navigate tab tab-block">
-    <li class={"tab-item " + (this.active.posts ? "active" : "")}>
-      <a onclick={to(`posts/${this.state.pid}`)} href="#">Posts</a>
+    <li class={"navigate-tab tab-item " + (this.active.posts ? "active" : "")}>
+      <a
+        class="navigate-item"
+        onclick={to(`posts/${this.state.pid}`)}
+        href="#"
+      >
+        Posts
+      </a>
     </li>
-    <li class={"tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
-      <a onclick={to("projects")} href="#">Projects</a>
+    <li class={"navigate-tab tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
+      <a
+        class="navigate-item"
+        onclick={to("projects")}
+        href="#"
+      >
+        Projects
+      </a>
     </li>
   </ul>
   <div class="content">

src/styles/riotblog.scss

@@ -1,3 +1,5 @@
+$branding: #5764c6;
+
 .post-text, .ltb-title, .post, .postnav {
   text-align: center;
 }
@@ -11,7 +13,25 @@
   margin: auto !important;
 }
 
+.navigate-tab {
+  border: thin solid;
+  border-radius: 5px !important;
+  margin-bottom: 5px;
+  margin-left: 2px;
+  margin-right: 2px;
+  &:hover {
+    background-color: $branding;
+  }
+}
+
+.navigate-item {
+  &:hover {
+    color: white !important;
+  }
+}
+
 .content-box {
+  margin-top: 10px;
   display: flex !important;                   /* defines flexbox */
   flex-direction: column !important;          /* top to bottom */
   justify-content: space-between !important;  /* first item at start, last at end */