various updates and fixes

src/scripts/app.tag

@@ -3,7 +3,7 @@
     <div
       style={
               {
-                "opacity" : showBorder ? "0.7" : "1",
+                "opacity" : showBorder ? "0.8" : "1",
                 "background-color" : showBorder ? "white" : "white"
               }
             }

src/scripts/browse.tag

@@ -61,11 +61,12 @@
             </h2>
           </div>
           <div class="card-body">
-            <raw
-              classname=""
-              content="{ converter.makeHtml(result[1].content) }"
+            <div
+              data-is="raw"
+              class="summary"
+              content="{ converter.makeHtml(result[1].content)}"
             >
-            </raw>
+            </div>
             <button
               class="btn btn-link readmore"
               style={linkStyle}
@@ -225,7 +226,17 @@ self.getprev = (ev) => {
   self.getPrev(self.opts.state.results[0][1].id)
 }
 
+self.addEls = () => {
+  var summaries = document.getElementsByClassName("summary");
+  for(var i = 0; i < summaries.length; i++) {
+    var paragraphs = summaries[i].getElementsByTagName("p");
+    var paragraph = paragraphs[paragraphs.length-1];
+    paragraph.textContent = paragraph.textContent+"…";
+  }
+};
+
 self.on("mount", () => {
+  self.on("updated", self.addEls);
   if (!self.opts.state.category_filter &&
       !self.opts.state.category_tag &&
       self.opts.state.results.length == 0) {
@@ -235,7 +246,8 @@ self.on("mount", () => {
     self.filterCategories(self.opts.state.category_tag)();
   }
   else if ((self.opts.state.results.length > 0) &&
-           !self.opts.state.category_tag) {
+            !self.opts.state.category_tag) {
+    self.addEls();
     return;
   }
   else {

src/scripts/projects.tag

@@ -26,11 +26,23 @@
           <div class="card-header">
             <h5
               class="show-sm show-xs project-title"
+              style={
+                {
+                  "margin" : "auto",
+                  "text-align" : "center"
+                }
+              }
             >
               { this.project().name }
             </h5>
             <h3
               class="hide-sm hide-xs project-title"
+              style={
+                {
+                  "margin" : "auto",
+                  "text-align" : "center"
+                }
+              }
             >
               { this.project().name }
             </h3>
@@ -39,17 +51,55 @@
           <div class="card-body">
             <div class="tile">
               <div class="tile-content">
-                <p class="tile-title">Written primarily in { this.project().language} </p>
-                <p class="tile-subtitle">Started on {moment(this.project().created_at).format("MMMM Do YYYY") }</p>
+                <div class="container">
+                  <div class="columns">
+                    <div class="col-md-12">
+                      <p class="tile-title">Written primarily in { this.project().language} </p>
+                    </div>
+                  </div>
+                  <div class="columns">
+                    <div class="col-md-12">
+                      <p class="tile-subtitle">Started on {moment(this.project().created_at).format("MMMM Do YYYY") }</p>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div class="tile-action">
-              <a
-                target="_blank"
-                href={this.project().html_url}>
-                  <button class="btn btn-primary branded">
-                    See on github
-                  </button>
-              </a>
+                <div class="container">
+                  <div class="columns">
+                    <div class="col-12">
+                      <iframe
+                        style={
+                          {
+                            "float" : "right",
+                            "margin-bottom" : "8px"
+                          }
+                        }
+                        src={"https://ghbtns.com/github-btn.html?user=nisstyre56&repo="+this.project().name+"&type=star&count=false&size=large"}
+                        frameborder="0"
+                        scrolling="0"
+                        width="70px"
+                        height="30px"
+                      >
+                      </iframe>
+                    </div>
+                    <div class="col-12">
+                      <iframe
+                        style={
+                          {
+                            "float" : "right"
+                          }
+                        }
+                        src={"https://ghbtns.com/github-btn.html?user=nisstyre56&repo="+this.project().name+"&type=fork&count=false&size=large"}
+                        frameborder="0"
+                        scrolling="0"
+                        width="70px"
+                        height="30px"
+                      >
+                      </iframe>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -106,7 +156,6 @@ project() {
 next() {
   self.update({"swipe" : false});
   self.projects = Z.goRight(self.projects);
-  console.log(self.project());
   self.update(
     {
       "transition" : "fadeInRight",

src/scripts/raw.tag

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

src/styles/riotblog.scss

@@ -318,16 +318,16 @@ p, h6, h5, h4, h3, h2, h1 {
   @extend .shadow;
   height: 250px !important;
   @media(max-width: 1000px) {
-    height: 280px !important;
+    height: 285px !important;
   }
   @media(max-width: 800px) {
-    height: 270px !important;
+    height: 275px !important;
   }
   @media(max-width: 360px) {
-    height: 275px !important;
+    height: 280px !important;
   }
   @media(max-width: 330px) {
-    height: 295px !important;
+    height: 300px !important;
   }
 }
 
@@ -367,26 +367,18 @@ $bg-color: red;
   }
 }
 
+.tags {
+  vertical-align: top !important;
+}
+
 .category-chip {
+  height: 22px !important;
+  vertical-align: top !important;
   &: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%;