fade out text

src/scripts/app.tag

@@ -9,6 +9,10 @@
             }
       class="header"
     >
+    <div class="container">
+      <div class="columns">
+        <div class="col-2"></div>
+        <div class="col-8">
           <section
             style={{"margin-top" : page !== "posts" ? "15px" : "5px"}}
             class="text-center nav navbar centered navbar-section"
@@ -16,9 +20,26 @@
             <h3 class="blog-title">{ currentPage }</h3>
           </section>
         </div>
-    <section class="text-center nav navbar centered navbar-section">
+        <div class="col-2">
+          <section
+            class="text-center nav navbar centered navbar-section header-social"
+            style={
+              {
+              "margin-left" : "5px",
+              "margin-right" : "5px",
+              "float" : "right"
+              }
+            }
+          >
+            <headersocial
+              link="https://twitter.com/weskerfoot"
+            >
+            </headersocial>
           </section>
-
+        </div>
+      </div>
+    </div>
+  </div>
     <div id="menu"
       class={"show-md show-sm show-xs navigate-small dropdown dropdown-right " + (menuActive ? "active" : "")}
     >
@@ -32,7 +53,8 @@
       <!-- menu component -->
       <ul
         show={menuActive}
-        class="mobile-menu tab tab-block menu">
+        class="mobile-menu tab tab-block menu"
+      >
         <li
           each="{page in ['browse', 'projects', 'links', 'about']}"
           class={"navigate-tab tab-item " + (parent.active.get(page) ? "active" : "")}
@@ -97,6 +119,7 @@ import './postsview.tag';
 import './about.tag';
 import './links.tag';
 import './browse.tag';
+import './headersocial.tag';
 
 import route from 'riot-route';
 import lens from './lenses.js';

src/scripts/browse.tag

@@ -232,6 +232,7 @@ self.addEls = () => {
     var paragraphs = summaries[i].getElementsByTagName("p");
     var paragraph = paragraphs[paragraphs.length-1];
     paragraph.textContent = paragraph.textContent+"…";
+    paragraph.className = "blurmore";
   }
 };
 

src/scripts/headersocial.tag

@@ -0,0 +1,21 @@
+<headersocial>
+  <div class="btn-group btn-group-block">
+    <a
+      href={opts.link}
+      target="_blank"
+      class="social-brand tooltip tooltip-left"
+      data-tooltip="Follow me"
+      style={
+        {
+          "background-color" : "#FBFCFD",
+          "color" : "#1da1f2 !important",
+          "padding-right" : "10px",
+          "padding-left" : "10px",
+          "font-size" : "3em",
+        }
+      }
+    >
+      <i class="fa fa-twitter" aria-hidden="true"></i>
+    </a>
+  </div>
+</headersocial>

src/scripts/links.tag

@@ -14,7 +14,7 @@
       <div each={links in groups}
            class="column col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 links-column"
       >
-        <h5 class="text-center">{links.title}</h5>
+        <h4 class="text-center">{links.title}</h4>
         <div each={item in links.items} class="tile link-box">
           <div class="tile-icon">
 

src/scripts/projects.tag

@@ -5,7 +5,7 @@
       >
         <div class="column col-8">
           <h4 class="float-right">
-            Some Projects I Work On
+            Projects I Work On
           </h4>
         </div>
         <div class="column col-4">
@@ -78,7 +78,7 @@
                         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"
+                        width="72px"
                         height="30px"
                       >
                       </iframe>
@@ -93,7 +93,7 @@
                         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"
+                        width="72px"
                         height="30px"
                       >
                       </iframe>

src/styles/riotblog.scss

@@ -150,6 +150,28 @@ html {
   }
 }
 
+.header-social {
+  margin-top : 6%;
+  margin-bottom : 2%;
+  @media (max-width: 600px) {
+    margin-top: 7%;
+  }
+  @media (max-width: 530px) {
+    margin-top: 8%;
+  }
+}
+
+.social-brand {
+  border: none !important;
+	display: block !important;
+	padding: .6rem 1.2rem .4rem 1.2rem;
+	text-decoration: none;
+  line-height: 2rem;
+  &:hover {
+    color: $brandingBG !important;
+  }
+}
+
 .branded {
   border-radius: 2px !important;
   border-color: $branding2 !important;
@@ -316,9 +338,9 @@ p, h6, h5, h4, h3, h2, h1 {
 
 .projects-card {
   @extend .shadow;
-  height: 250px !important;
+  height: 230px !important;
-  @media(max-width: 1000px) {
+  @media(max-width: 1468px) {
-    height: 285px !important;
+    height: 310px !important;
   }
   @media(max-width: 800px) {
     height: 275px !important;
@@ -360,6 +382,48 @@ $bg-color: red;
   position: absolute;
 }
 
+@mixin gradient-text($gradient, $bg : 'light') {
+  @supports(mix-blend-mode: lighten) {
+    display: inline-block;
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0; right: 0; bottom: 0; left: 0;
+
+      background: unquote($gradient);
+      pointer-events: none;
+    }
+
+    @if ($bg == 'light') {
+      color: #000;
+      background: #fff;
+      mix-blend-mode: multiply;
+
+      &::before {
+        mix-blend-mode: screen;
+      }
+    } @else {
+      color: #fff;
+      background: #000;
+      mix-blend-mode: lighten;
+
+      &::before {
+        mix-blend-mode: multiply;
+      }
+    }
+  }
+}
+
+.summary {
+}
+
+.blurmore {
+  @include gradient-text('linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 100%)', 'light');
+}
+
 .readmore {
   color: $branding !important;
   &:hover {