layout buttons

src/scripts/browse.tag

@@ -61,14 +61,18 @@
             </h2>
           </div>
           <div class="card-body">
-              <raw content="{ converter.makeHtml(result[1].content) }"></raw>
+            <raw
-            <a
+              classname=""
+              content="{ converter.makeHtml(result[1].content) }"
+            >
+            </raw>
+            <button
+              class="btn btn-link readmore"
               style={linkStyle}
-              href={"/blog/posts/"+result[1].id}
               onclick={openPost(result[1].id)}
             >
-              More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
+              Read More
-            </a>
+            </button>
           </div>
         </div>
       </div>

src/scripts/categories.tag

@@ -3,7 +3,7 @@
   <i class="fa fa-tag" aria-hidden="true"></i>
   <label
     each="{category in opts.names}"
-    class="chip"
+    class="chip category-chip"
     onclick={browseCategories(category)}
   >
     {category}

src/scripts/post.tag

@@ -1,6 +1,5 @@
 <post>
   <div class="posts-box post centered">
-    <categories names={categories}></categories>
     <div
       data-is="postcontrols"
       prevloading={prevloading}
@@ -12,16 +11,52 @@
     >
     </div>
     <loading if={loading}></loading>
+    <div
+      if={!loading}
+      class="container show-sm"
+    >
+      <div class="columns">
+        <div class="column col-12">
+          <div
+            data-is="categories"
+            names={categories}
+            style={{"float" : "left"}}
+          >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      if={!loading}
+      class="container hide-sm"
+    >
+      <div class="columns">
+        <div class="column col-4">
+          <div
+            data-is="social"
+            style={{"float" : "left"}}
+            show={!loading}
+            ref="social"
+            title={title}
+            postid={_id}
+          >
+          </div>
+        </div>
+        <div class="column col-4"></div>
+        <div class="column col-4">
+          <div
+            data-is="categories"
+            names={categories}
+            style={{"float" : "right"}}
+          >
+          </div>
+        </div>
+      </div>
+
+    </div>
     <div class="text-break">
       <div class={"" + (loading ? "invisible" : "fadeIn")}>
-
-        <social
-          show={!loading}
-          ref="social"
-          title={title}
-          postid={_id}
-        >
-        </social>
         <p class="post-content centered text-break">
           <raw
             content="{ content }"

src/scripts/raw.tag

@@ -1,5 +1,5 @@
 <raw>
-  <div></div>
+  <div class={opts.classname}></div>
   <script>
   updateContent() {
     this.root.innerHTML = opts.content;

src/styles/riotblog.scss

@@ -1,5 +1,7 @@
 $brandingBG: rgba(103, 173, 219, 0.40);
 $brandingBG2: rgba(75, 147, 193, 0.65);
+$brandingBG3: rgba(103, 173, 219, 0.27);
+
 $branding: #25658f;
 $branding2: #4b93c1;
 $branding3: #1b4c6c;
@@ -109,7 +111,7 @@ html {
 }
 
 .category-button {
-  border-radius: 5px !important;
+  border-radius: 2px !important;
   border-color: $branding2 !important;
 	display: block !important;
 	margin-top: 0;
@@ -149,7 +151,7 @@ html {
 }
 
 .branded {
-  border-radius: 5px !important;
+  border-radius: 2px !important;
   border-color: $branding2 !important;
 	display: block !important;
 	margin-top: 0;
@@ -261,7 +263,7 @@ p, h6, h5, h4, h3, h2, h1 {
 
 .navigate-tab {
   border: thin solid;
-  border-radius: 5px !important;
+  border-radius: 2px !important;
   margin-bottom: 5px;
   margin-left: 2px;
   margin-right: 2px;
@@ -290,7 +292,7 @@ p, h6, h5, h4, h3, h2, h1 {
 
 .mobile-menu {
   left: -100% !important;
-  border-radius: 5px !important;
+  border-radius: 2px !important;
   border: 1px solid !important;
   border-color: $branding !important;
 }
@@ -358,6 +360,33 @@ $bg-color: red;
   position: absolute;
 }
 
+.readmore {
+  color: $branding !important;
+  &:hover {
+    background-color: $brandingBG3 !important;
+  }
+}
+
+.category-chip {
+  &:hover {
+    background-color: $brandingBG3 !important;
+  }
+}
+
+.post-buttons-large {
+  display: none !important;
+  @media(min-width: 400px) {
+    display: inherit !important;
+  }
+}
+
+.post-buttons-mobile {
+  display: none !important;
+  @media(max-width: 400px) {
+    display: inherit !important;
+  }
+}
+
 .post-card {
   @extend .shadow;
   max-width: 80%;
@@ -457,7 +486,7 @@ code {
 }
 
 .rounded-button {
-  border-radius: 13px;
+  border-radius: 2px;
 }
 
 .maxinput {