Update demo.

docs/blog/theme/stylesheet/style.less

@@ -368,8 +368,8 @@ ul.social {
 
   a:hover {
     z-index: 2;
-    -webkit-transform: translateY(-5px);
-    transform: translateY(-5px);
+    -webkit-transform: translateY(-2px);
+    transform: translateY(-2px);
   }
 
   a {
@@ -394,6 +394,10 @@ ul.social {
     background-color: @instagram-bg-color;
   }
 
+  a.sc-keybase {
+    background-color: @keybase-bg-color;
+  }
+
   a.sc-pinterest {
     background-color: @pinterest-bg-color;
   }
@@ -454,6 +458,10 @@ ul.social {
     background-color: @bitbucket-bg-color;
   }
 
+  a.sc-mastodon {
+    background-color: @mastodon-bg-color;
+  }
+
 }
 
 .ads-aside {
@@ -476,8 +484,8 @@ ul.social {
 
 @media screen and (min-width: 768px) {
   aside {
-    width: 25%;
-    height: 100%;
+    width: 25vw;
+    height: 100vh;
     position: fixed;
     top: 0;
     left: 0;
@@ -502,16 +510,17 @@ ul.social {
   }
 
   main {
-    width: 75%;
-    height: 100%;
+    width: 75vw;
+    height: 100vh;
     position: absolute;
     top: 0;
-    left: 25%;
+    left: 25vw;
+    overflow-x: hidden;
 
     article {
 
       &.single {
-        min-height: 80%;
+        min-height: 80vh;
       }
 
       ul.list {

docs/blog/theme/stylesheet/variables.less

@@ -55,6 +55,7 @@
 @github-bg-color: #111010;
 @google-bg-color: #d93e2d;
 @instagram-bg-color: #125688;
+@keybase-bg-color: #4c8dff;
 @linkedin-bg-color: #3371b7;
 @medium-bg-color: #00ab6b;
 @pinterest-bg-color: #c92619;
@@ -68,3 +69,4 @@
 @gitlab-bg-color: #fca326;
 @xing-bg-color: #007575;
 @bitbucket-bg-color: #0747A6;
+@mastodon-bg-color: #3088d4;