color scheme changed

src/scripts/app.tag

@@ -2,7 +2,7 @@
   <ul class="navigate tab tab-block">
     <li class={"navigate-tab tab-item " + (this.active.posts ? "active" : "")}>
       <a
-        class="navigate-item"
+        class={"navigate-item " + (this.active.posts ? "tab-active" : "")}
         onclick={to(`posts/${this.state.pid}`)}
         href="#"
       >
@@ -11,7 +11,7 @@
     </li>
     <li class={"navigate-tab tab-item animated fadeIn " + (this.active.projects ? "active" : "")}>
       <a
-        class="navigate-item"
+        class={"navigate-item " + (this.active.projects ? "tab-active" : "")}
         onclick={to("projects")}
         href="#"
       >

src/scripts/loading.tag

@@ -1,3 +1,5 @@
 <loading>
-  <div class="loading animated fadeIn"></div>
+  <div class="content-box">
+    <div class="loader-branded animated fadeIn"></div>
+  </div>
 </loading>

src/scripts/post.tag

@@ -7,7 +7,6 @@
         class={`animated ${this.transition}`}
       >
         <h4 class="post-title">{ this.title }</h4>
-        <h5 class="post-author">Posted by { this.author }</h5>
         <p class="post-content centered text-break">
           <raw content="{ this.converter.makeHtml(this.content) }"></raw>
         </p>
@@ -56,7 +55,7 @@ prev(ev) {
   if (self.prevloading || self.nextloading) {
     return;
   }
-  self.prevloading = " loading";
+  self.prevloading = " loader-branded";
 
   if (self.opts.state.pid > 1) {
     self.opts.state.pid--;
@@ -71,7 +70,7 @@ next(ev) {
   if (self.nextloading || self.prevloading) {
     return;
   }
-  self.nextloading = " loading";
+  self.nextloading = " loader-branded";
   if (!self.nomore) {
     self.opts.state.pid++;
     self.update();

src/styles/riotblog.scss

@@ -1,4 +1,57 @@
-$branding: #5764c6;
+$brandingBG: rgba(27, 76, 108, 0.50);
+$branding: #25658f;
+$branding2: #4b93c1;
+
+.branded, button {
+  border-radius: 5px;
+  border-color: $branding2 !important;
+	display: block;
+	margin-top: 0;
+	padding: .6rem 1.2rem .4rem 1.2rem;
+	text-decoration: none;
+  color: $branding !important;
+  background-color: white !important;
+  &:hover {
+    background-color: $brandingBG !important;
+  }
+}
+
+.loader-branded {
+	color: transparent !important;
+	min-height: 1.6rem;
+	pointer-events: none;
+	position: relative;
+
+  &:after {
+    -webkit-animation: loading .5s infinite linear;
+    animation: loading .5s infinite linear;
+    border: .2rem solid $branding;
+    border-radius: .8rem;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1.6rem;
+    left: 50%;
+    margin-left: -.8rem;
+    margin-top: -.8rem;
+    position: absolute;
+    top: 50%;
+    width: 1.6rem;
+    z-index: 1;
+  }
+}
+
+.tab-active {
+  border-bottom-color: $branding !important;
+  color: $branding !important;
+}
+
+a {
+  color: $branding2 !important;
+}
+
+.branded-loader {}
 
 .post-text, .title, .post, .postnav {
   text-align: center;
@@ -19,9 +72,6 @@ $branding: #5764c6;
 	color: #3A4145;
 }
 
-.loading {
-}
-
 .navigate {
   width: 20% !important;
   margin-bottom: 25px !important;
@@ -35,11 +85,12 @@ $branding: #5764c6;
   margin-left: 2px;
   margin-right: 2px;
   &:hover {
-    background-color: $branding;
+    background-color: $brandingBG;
   }
 }
 
 .navigate-item {
+  color: $branding !important;
   &:hover {
     color: white !important;
   }