Merge branch 'follow-jekyll-master'

7 files changed, 592 insertions, 398 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b81656a..05fd080 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -20,11 +20,11 @@
                         {{if isset .Site.Params.author "name"}}
                         {{if isset .Site.Params.author "thumbnail"}}
                         {{if isset .Site.Params.author "description"}}
-                        <div class="post-top-meta">
-                            <div>
+                        <div class="row post-top-meta">
+                            <div class="col-xs-12 col-md-3 col-lg-2 text-center text-md-left mb-4 mb-md-0 md-nopad-right">
                                 <img class="author-thumb" src="{{ .Site.Params.author.thumbnail | urlize | relURL}}" alt="{{ .Site.Params.author.name }}">
                             </div>
-                            <div >
+                            <div class="col-xs-12 col-md-9 col-lg-10 text-center text-md-left md-nopad-left">
                                 <a target="_blank" class="link-dark">{{ .Site.Params.author.name }}</a><br>
                                 <span class="author-description">
                                     {{ .Site.Params.author.description }}<br>
diff --git a/layouts/partials/_shared/js.html b/layouts/partials/_shared/js.html
index 9c66c44..5bbd9b7 100644
--- a/layouts/partials/_shared/js.html
+++ b/layouts/partials/_shared/js.html
@@ -1,11 +1,11 @@
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-    
+
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
-    
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+
 <script src="{{"/js/mediumish.js" | urlize | relURL }}"></script>
diff --git a/layouts/partials/_shared/jumbotron.html b/layouts/partials/_shared/jumbotron.html
index 6ae3da3..0849d6d 100644
--- a/layouts/partials/_shared/jumbotron.html
+++ b/layouts/partials/_shared/jumbotron.html
@@ -9,8 +9,8 @@
 		</div>
 		<div class="col-md-8 p-5 align-self-center text-center">
 			{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
-			<a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a>
+			<a class="mt-1 mb-1" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a>
 			{{ end }}
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/partials/single-partials/share.html b/layouts/partials/single-partials/share.html
index 4af0877..07fa8d7 100644
--- a/layouts/partials/single-partials/share.html
+++ b/layouts/partials/single-partials/share.html
@@ -1,4 +1,4 @@
-<div class="share">
+<div class="share sticky-top sticky-top-offset">
     <p>Share</p>
     <ul>
         <li class="ml-1 mr-1">
@@ -35,4 +35,4 @@
             </li>
         </ul>
     {{ end }}
-</div>
\ No newline at end of file
+</div>
diff --git a/static/css/additional.css b/static/css/additional.css
index 0b09c8d..db4824e 100644
--- a/static/css/additional.css
+++ b/static/css/additional.css
@@ -25,4 +25,12 @@
 }
 .error{
     text-align: center !important;
-}
\ No newline at end of file
+}
+@media(min-width: 769px){
+    .md-nopad-right{
+        padding-right: 0px !important;
+    }
+    .md-nopad-left{
+        padding-left: 0px !important;
+    }
+}
diff --git a/static/css/medium.css b/static/css/medium.css
index af83ee1..c1536f7 100644
--- a/static/css/medium.css
+++ b/static/css/medium.css
@@ -1,614 +1,796 @@
 /* 
 Template Name: Mediumish 
 Copyright: Sal, WowThemes.net, https://www.wowthemes.net 
-Version: 1.0.22 
 License: https://www.wowthemes.net/freebies-license/ 
 */
 .mainheading {
-    padding:1rem 0rem;
+    padding: 1rem 0rem;
 }
+
 a {
-    color:#00ab6b;
-    transition:all 0.2s;
+    color: #00ab6b;
+    transition: all 0.2s;
 }
+
 a:hover {
     color: #038252;
-    text-decoration:none;
+    text-decoration: none;
 }
+
 pre {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 0 0 1.75em 0;
     border: #E3EDF3 1px solid;
     width: 100%;
-    padding: 10px;
+    padding: 7px;
     font-family: monospace, sans-serif;
     font-size: 14px;
     white-space: pre;
     overflow: auto;
-    background: #F7FAFB;
-    border-radius: 3px;
+    background: #fff;
+    border-radius: 0px;
+    line-height: 1.6;
+    color: #333;
+    margin-bottom: -rem;
 }
+
 .mediumnavigation {
-    background:rgba(255,255,255,.97);
-    box-shadow:0 2px 2px -2px rgba(0,0,0,.15);
+    background: rgba(255, 255, 255, .97);
+    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .15);
     transition: top 0.2s ease-in-out;
 }
+
 .main-content {
-   min-height:300px;
+    min-height: 300px;
 }
+
 .site-content {
     min-height: 60vh;
     padding-top: 1.5rem;
     margin-top: 57px;
     transition: all 0.4s;
 }
+
 section {
-    margin-bottom:20px;
+    margin-bottom: 20px;
 }
+
 section.recent-posts {
-    margin-bottom:0;
+    margin-bottom: 0;
 }
+
 .section-title h2 {
-    border-bottom:1px solid rgba(0,0,0,.125);
-    margin-bottom:25px;
-    font-weight:700;
-    font-size:1.4rem;
-    margin-bottom:27px;
+    border-bottom: 1px solid rgba(0, 0, 0, .125);
+    margin-bottom: 25px;
+    font-weight: 700;
+    font-size: 1.4rem;
+    margin-bottom: 27px;
 }
+
 .section-title span {
-    border-bottom:1px solid rgba(0,0,0,.44);
-    display:inline-block;
-    padding-bottom:20px;
-    margin-bottom:-1px;
+    border-bottom: 1px solid rgba(0, 0, 0, .44);
+    display: inline-block;
+    padding-bottom: 20px;
+    margin-bottom: -1px;
 }
-.article-post ol, .article-post ul {
-    margin-bottom:1.5rem;
+
+.article-post ol,
+.article-post ul {
+    margin-bottom: 1.5rem;
 }
-.article-post ol ol, .article-post ul ul {
+
+.article-post ol ol,
+.article-post ul ul {
     list-style: disc;
-    margin-bottom:0rem;
+    margin-bottom: 0rem;
 }
+
 @media (min-width:576px) {
     .card-columns.listfeaturedtag {
-        -webkit-column-count:2;
-        -moz-column-count:2;
-        column-count:2;
-   }
+        -webkit-column-count: 2;
+        -moz-column-count: 2;
+        column-count: 2;
+    }
 }
+
 @media (min-width:992px) {
     .navbar-expand-lg .navbar-nav .nav-link {
-        padding-right:0.8rem;
-        padding-left:0.8rem;
-   }
+        padding-right: 0.8rem;
+        padding-left: 0.8rem;
+    }
 }
+
 .listfeaturedtag {
-    border:1px solid rgba(0,0,0,.125);
+    border: 1px solid rgba(0, 0, 0, .125);
     border-radius: .25rem;
-    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
 }
+
 .listfeaturedtag .wrapthumbnail {
-    height:290px;
-    flex:0 0 auto;
+    height: 290px;
+    flex: 0 0 auto;
     height: 100%;
 }
+
 .maxthumb {
-    max-height:300px;
-    overflow:hidden;
+    max-height: 300px;
+    overflow: hidden;
 }
-.listfeaturedtag .card, .card-footer {
+
+.listfeaturedtag .card,
+.card-footer {
     border: 0;
 }
+
 .listfeaturedtag .thumbnail {
-    background-size:cover;
-    height:100%;
-    display:block;
-    background-position:38% 22% !important;
-    background-origin:border-box!important;
+    background-size: cover;
+    height: 100%;
+    display: block;
+    background-position: 38% 22% !important;
+    background-origin: border-box !important;
     border-top-left-radius: .25rem;
     border-bottom-left-radius: .25rem;
 }
+
 .listfeaturedtag .card-block {
-    padding-left:0;
+    padding-left: 0;
 }
-.listfeaturedtag h2.card-title,.listrecent h2.card-title {
-    font-size:1.3rem;
-    font-weight:700;
+
+.listfeaturedtag h2.card-title,
+.listrecent h2.card-title {
+    font-size: 1.3rem;
+    font-weight: 700;
     line-height: 1.25;
 }
-.listfeaturedtag h4.card-text,.listrecent h4.card-text {
-    color:rgba(0,0,0,.44);
-    font-size:0.95rem;
-    line-height:1.4;
-    font-weight:400;
+
+.listfeaturedtag h4.card-text,
+.listrecent h4.card-text {
+    color: rgba(0, 0, 0, .44);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    font-weight: 400;
+}
+
+.featured-box-img-cover {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+}
+
+@media (max-width:991px) {
+    .featured-box-img-cover {
+        height: auto;
+        width: 100%;
+    }
 }
+
 .wrapfooter {
-    font-size:12px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
 }
+
 .author-thumb {
-    width:40px;
-    height:40px;
-    float:left;
-    margin-right:13px;
-    border-radius:100%;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
 }
+
 .post-top-meta {
-    margin-bottom:2rem;
+    margin-bottom: 2rem;
 }
+
 .post-top-meta .author-thumb {
-    width:72px;
-    height:72px;
+    width: 72px;
+    height: 72px;
 }
+
 .post-top-meta.authorpage .author-thumb {
-    margin-top:40px;
+    margin-top: 40px;
 }
+
 .post-top-meta span {
-    font-size:0.9rem;
-    color:rgba(0,0,0,.44);
-    display:inline-block;
+    font-size: 0.9rem;
+    color: rgba(0, 0, 0, .44);
+    display: inline-block;
 }
+
 .post-top-meta .author-description {
-    margin-bottom:5px;
-    margin-top:5px;
-    font-size:0.95rem;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    font-size: 0.95rem;
 }
-.author-meta {
-    flex:1 1 auto;
-    white-space:nowrap!important;
-    text-overflow:ellipsis!important;
-    overflow:hidden!important;
+
+.toc ul {
+    list-style: decimal;
+    font-weight: 400;
 }
-span.post-name,span.post-date,span.author-meta {
-    display:inline-block;
+
+.author-meta {
+    flex: 1 1 auto;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+    overflow: hidden !important;
+}
+
+span.post-name,
+span.post-date,
+span.author-meta {
+    display: inline-block;
 }
-span.post-date,span.post-read {
-    color:rgba(0,0,0,.44);
+
+span.post-date,
+span.post-read {
+    color: rgba(0, 0, 0, .44);
 }
+
 span.post-read-more {
-    align-items:center;
-    display:inline-block;
-    float:right;
-    margin-top:8px;
+    align-items: center;
+    display: inline-block;
+    float: right;
+    margin-top: 8px;
 }
+
 span.post-read-more a {
-    color:rgba(0,0,0,.44);
+    color: rgba(0, 0, 0, .44);
 }
-span.post-name a,span.post-read-more a:hover {
-    color:rgba(0,0,0,.8);
+
+span.post-name a,
+span.post-read-more a:hover {
+    color: rgba(0, 0, 0, .8);
 }
+
 .dot:after {
-    content:"·";
-    margin-left:3px;
-    margin-right:3px;
+    content: "·";
+    margin-left: 3px;
+    margin-right: 3px;
 }
+
 .mediumnavigation .form-control {
-    font-size:0.8rem;
-    border-radius:30px;
-    overflow:hidden;
-    border:1px solid rgba(0,0,0,0.04);
+    font-size: 0.8rem;
+    border-radius: 30px;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    min-width: 180px;
 }
+
 .mediumnavigation .form-inline {
-    margin-left:15px;
+    margin-left: 15px;
 }
+
 .mediumnavigation .form-inline .btn {
-    margin-left:-50px;
-    border:0;
-    border-radius:30px;
-    cursor:pointer;
+    margin-left: -50px;
+    border: 0;
+    border-radius: 30px;
+    cursor: pointer;
 }
-.mediumnavigation .form-inline .btn:hover,.mediumnavigation .form-inline .btn:active {
-    background:transparent;
-    color:green;
+
+.mediumnavigation .form-inline .btn:hover,
+.mediumnavigation .form-inline .btn:active {
+    background: transparent;
+    color: green;
 }
+
 .mediumnavigation .navbar-brand {
-    font-weight:500;
+    font-weight: 500;
 }
+
 .mediumnavigation .dropdown-menu {
-    border:1px solid rgba(0,0,0,0.08);
-    margin:.5rem 0 0;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    margin: .5rem 0 0;
 }
-.mediumnavigation .nav-item,.dropdown-menu {
-    font-size:0.9rem;
+
+.mediumnavigation .nav-item,
+.dropdown-menu {
+    font-size: 0.9rem;
 }
+
 .mediumnavigation .search-icon {
-    margin-left:-40px;
-    display:inline-block;
-    margin-top:3px;
-    cursor:pointer;
+    margin-left: -40px;
+    display: inline-block;
+    margin-top: 3px;
+    cursor: pointer;
 }
+
 .mediumnavigation .navbar-brand img {
-    max-height:30px;
-    margin-right:5px;
+    max-height: 30px;
+    margin-right: 5px;
 }
+
 .mainheading h1.sitetitle {
-    font-family:Righteous;
+    font-family: Righteous;
 }
+
 .mainheading h1.posttitle {
-    font-weight:700;
-    margin-bottom:1rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
 }
+
 .footer {
-    border-top:1px solid rgba(0,0,0,.05)!important;
-    padding-top:15px;
-    padding-bottom:12px;
-    font-size:0.8rem;
-    color:rgba(0,0,0,.44);
-    margin-top:50px;
-    margin-bottom:62px;
+    border-top: 1px solid rgba(0, 0, 0, .05) !important;
+    padding-top: 15px;
+    padding-bottom: 12px;
+    font-size: 0.8rem;
+    color: rgba(0, 0, 0, .44);
+    margin-top: 50px;
+    margin-bottom: 62px;
     position: relative;
     background: #fff;
 }
+
 .link-dark {
-    color:rgba(0,0,0,.8);
+    color: rgba(0, 0, 0, .8);
 }
+
 .article-post {
-    font-family:Merriweather;
-    font-size:1.1rem;
-    line-height:1.84;
-    color:rgba(0,0,0,.8);
+    font-family: Merriweather;
+    font-size: 1.1rem;
+    line-height: 1.84;
+    color: rgba(0, 0, 0, .8);
 }
+
 blockquote {
-    border-left:4px solid #00ab6b;
-    padding:0 20px;
-    font-style:italic;
-    color:rgba(0,0,0,.5);
+    border-left: 4px solid #00ab6b;
+    padding: 0 20px;
+    font-style: italic;
+    color: rgba(0, 0, 0, .5);
 }
-.article-post p,.article-post blockquote {
-    margin:0 0 1.5rem 0;
+
+.article-post p,
+.article-post blockquote {
+    margin: 0 0 1.5rem 0;
 }
+
 .featured-image {
-    display:block;
-    margin-bottom:1.5rem;
+    display: block;
+    margin-bottom: 1.5rem;
 }
+
 .share {
-    text-align:center;
+    text-align: center;
 }
+
 .share p {
-    margin-bottom:10px;
-    font-size:0.95rem;
+    margin-bottom: 10px;
+    font-size: 0.95rem;
 }
+
 .share ul li {
-    display:inline-block;
-    margin-bottom:9px;
+    display: inline-block;
+    margin-bottom: 9px;
 }
+
 .share ul {
-    padding-left:0;
-    margin-left:0;
+    padding-left: 0;
+    margin-left: 0;
 }
+
 .share ul li i.fa {
-   border:1px solid #ddd;
-    width:30px;
-    height:30px;
-    line-height:30px;
-   text-align:center;
-   border-radius:50%;
-}
+    border: 1px solid #ddd;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 50%;
+}
+
 .svgIcon {
-    vertical-align:middle;
+    vertical-align: middle;
+}
+
+.sticky-top-offset {
+    top: 100px;
 }
+
 @media (min-width:1024px) {
-    .share {
-        position:fixed;
-        display:block;
-   }
     .share ul li {
-        display:block;
-   }
+        display: block;
+    }
 }
+
 @media (max-width:999px) {
+    .featured-box-img-cover {
+        height: 359px;
+    }
+
     .alertbar {
-        position:relative !Important;
-        margin-bottom:20px;
-        margin-top:20px;
-        box-shadow:none !Important;
+        position: relative !Important;
+        margin-bottom: 20px;
+        margin-top: 20px;
+        box-shadow: none !Important;
         padding-right: 14px !Important;
-   }
+    }
+
     #comments {
         margin-right: 15px;
     }
+
     .jumbotron.fortags {
-       margin-bottom:0 !Important;
-   }
+        margin-bottom: 0 !Important;
+    }
+
+    .alertbar form {
+        margin-top: 20px;
+    }
+
+    .alertbar span,
     .alertbar form {
-       margin-top:20px;
-   }
-    .alertbar span, .alertbar form {
         display: block;
     }
+
     .alertbar input[type="submit"] {
-        border-radius:3px !Important;
+        border-radius: 3px !Important;
     }
+
     .alertbar input[type="email"] {
-       margin-right:0px !Important;
-       display:block;
-       border-right:1px solid #ddd !Important;
-       margin-bottom:10px;
-   }
+        margin-right: 0px !Important;
+        display: block;
+        border-right: 1px solid #ddd !Important;
+        margin-bottom: 10px;
+    }
+
     .jumbotron {
-       margin-bottom:0;
+        margin-bottom: 0;
         border-radius: 0;
-   }
-    .listfeaturedtag .wrapthumbnail, .listfeaturedtag .col-md-7 {
-        width:100%;
-        max-width:100%;
-        -webkit-box-flex: 0;
-        -webkit-flex: 100%;
-        -ms-flex: 100%;
-        flex: 100%;
-   }
-    .listfeaturedtag .wrapthumbnail {
-        height:250px;
-   }
+    }
+
     .listfeaturedtag .card {
-        height:auto;
-   }
+        height: auto;
+    }
+
     .listfeaturedtag .wrapfooter {
-        position:relative;
-        margin-top:30px;
-   }
+        position: relative;
+        margin-top: 30px;
+    }
+
     .listfeaturedtag .card-block {
-        padding:20px;
-   }
+        padding: 20px;
+    }
+
     .footer {
         margin-top: 0px;
         margin-bottom: 0px;
-   }
+    }
 }
+
 @media (max-width:1024px) {
     .post-top-meta .col-md-10 {
-        text-align:center;
-   }
+        text-align: center;
+    }
 }
+
 @media (max-width:767px) {
     .post-top-meta.authorpage {
-        text-align:center;
-   }
+        text-align: center;
+    }
 }
-.share,.share a {
-    color:rgba(0,0,0,.44);
-    fill:rgba(0,0,0,.44);
+
+.share,
+.share a {
+    color: rgba(0, 0, 0, .44);
+    fill: rgba(0, 0, 0, .44);
 }
+
 .graybg {
-    background-color:#fafafa;
-    padding:40px 0 46px;
-    position:relative;
+    background-color: #fafafa;
+    padding: 40px 0 46px;
+    position: relative;
 }
+
 .listrelated .card {
-    box-shadow:0 1px 7px rgba(0,0,0,.05);
-    border:0;
+    box-shadow: 0 1px 7px rgba(0, 0, 0, .05);
+    border: 0;
 }
+
 ul.tags {
-    list-style:none;
-    padding-left:0;
-    margin:0 0 3rem 0;
+    list-style: none;
+    padding-left: 0;
+    margin: 0 0 3rem 0;
 }
+
 ul.tags li {
-    display:inline-block;
-    font-size:0.9rem;
+    display: inline-block;
+    font-size: 0.9rem;
 }
+
 ul.tags li a {
-    background:rgba(0,0,0,.05);
-    color:rgba(0,0,0,.6);
-    border-radius:3px;
-    padding:5px 10px;
+    background: rgba(0, 0, 0, .05);
+    color: rgba(0, 0, 0, .6);
+    border-radius: 3px;
+    padding: 5px 10px;
 }
+
 ul.tags li a:hover {
-    background:rgba(0,0,0,.07);
-    text-decoration:none;
+    background: rgba(0, 0, 0, .07);
+    text-decoration: none;
 }
+
 .margtop3rem {
     margin-top: 3rem;
 }
+
 .sep {
-    height:1px;
-    width:20px;
-    background:#999;
-    margin:0px auto;
-    margin-bottom:1.2rem;
+    height: 1px;
+    width: 20px;
+    background: #999;
+    margin: 0px auto;
+    margin-bottom: 1.2rem;
 }
+
 .btn.follow {
-    border-color:#02B875;
-    color:#1C9963;
-    padding:3px 10px;
-    text-align:center;
-    border-radius:999em;
-    font-size:0.85rem;
-    display:inline-block;
+    border-color: #02B875;
+    color: #1C9963;
+    padding: 3px 10px;
+    text-align: center;
+    border-radius: 999em;
+    font-size: 0.85rem;
+    display: inline-block;
 }
+
 .btn.subscribe {
-    background-color:#1C9963;
-    border-color:#1C9963;
-    color:rgba(255,255,255,1);
-    fill:rgba(255,255,255,1);
-    border-radius:30px;
-    font-size:0.85rem;
-    margin-left:10px;
-    font-weight:600;
-    text-transform:uppercase;
+    background-color: #1C9963;
+    border-color: #1C9963;
+    color: rgba(255, 255, 255, 1);
+    fill: rgba(255, 255, 255, 1);
+    border-radius: 30px;
+    font-size: 0.85rem;
+    margin-left: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
 }
+
 .post-top-meta .btn.follow {
-    margin-left:5px;
-    margin-top:-4px;
+    margin-left: 5px;
+    margin-top: -4px;
 }
+
 .alertbar {
-    box-shadow:0 -3px 10px 0 rgba(0,0,0,.0785);
-    position:fixed;
-    bottom:0;
-    left:0;
-    background-color:#fff;
-    width:100%;
-    padding:14px 0;
-    z-index:1;
+    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .0785);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    padding: 14px 0;
+    z-index: 1;
     display: none;
 }
+
 .alertbar form {
-   display: inline-block;
+    display: inline-block;
 }
+
 .alertbar input[type="email"] {
-    font-size:0.85rem;
-    padding:3px 5px 3px 10px;
-    border-top-left-radius:3px;
-    border-bottom-left-radius:3px;
-    border:1px solid #ddd;
-    border-right:0;
-    margin-right:-10px;
-    height:34px;
-    letter-spacing:0.5px;
-    margin-left:5px;
-}
+    font-size: 0.85rem;
+    padding: 3px 5px 3px 10px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border: 1px solid #ddd;
+    border-right: 0;
+    margin-right: -10px;
+    height: 34px;
+    letter-spacing: 0.5px;
+    margin-left: 5px;
+}
+
 .alertbar input[type="submit"] {
-    background-color:#1C9963;
-    border:1px solid #1C9963;
-    color:rgba(255,255,255,1);
-    fill:rgba(255,255,255,1);
-    font-size:0.85rem;
-    border-radius:0;
-    padding:4px 10px;
-    border-top-right-radius:3px;
-    border-bottom-right-radius:3px;
-    font-weight:600;
-    height:34px;
-    letter-spacing:0.5px;
+    background-color: #1C9963;
+    border: 1px solid #1C9963;
+    color: rgba(255, 255, 255, 1);
+    fill: rgba(255, 255, 255, 1);
+    font-size: 0.85rem;
+    border-radius: 0;
+    padding: 4px 10px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    font-weight: 600;
+    height: 34px;
+    letter-spacing: 0.5px;
     cursor: pointer;
 }
+
 .form-control::-webkit-input-placeholder {
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, .5);
 }
+
 .form-control:-moz-placeholder {
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, .5);
 }
+
 .form-control::-moz-placeholder {
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, .5);
 }
+
 .form-control:-ms-input-placeholder {
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, .5);
 }
+
 .form-control::-ms-input-placeholder {
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, .5);
 }
+
 .authorpage h1 {
-    font-weight:700;
-    font-size:30px;
+    font-weight: 700;
+    font-size: 30px;
 }
+
 .post-top-meta.authorpage .author-thumb {
-    float:none;
+    float: none;
 }
+
 .authorpage .author-description {
-    font-size:1rem;
-    color:rgba(0,0,0,.6);
+    font-size: 1rem;
+    color: rgba(0, 0, 0, .6);
 }
+
 .post-top-meta.authorpage .btn.follow {
-    padding:7px 20px;
-    margin-top:10px;
-    margin-left:0;
-    font-size:0.9rem;
+    padding: 7px 20px;
+    margin-top: 10px;
+    margin-left: 0;
+    font-size: 0.9rem;
 }
+
 .graybg.authorpage {
-    border-top:1px solid #f0f0f0;
+    border-top: 1px solid #f0f0f0;
 }
+
 .authorpostbox {
-    width:760px;
-    margin:0px auto;
-    margin-bottom:1.5rem;
-    max-width:100%;
+    width: 760px;
+    margin: 0px auto;
+    margin-bottom: 1.5rem;
+    max-width: 100%;
 }
+
 .authorpostbox .img-thumb {
-    width:100%;
+    width: 100%;
 }
+
 .sociallinks {
-    margin:1rem 0;
+    margin: 1rem 0;
 }
+
 .sociallinks a {
-    background:#666;
-    color:#fff;
-    width:22px;
-    height:22px;
-    display:inline-block;
-    text-align:center;
-    line-height:22px;
-    border-radius:50%;
-    font-size:12px;
+    background: #666;
+    color: #fff;
+    width: 22px;
+    height: 22px;
+    display: inline-block;
+    text-align: center;
+    line-height: 22px;
+    border-radius: 50%;
+    font-size: 12px;
 }
+
 #comments {
     margin-top: 3rem;
     margin-bottom: 1.5rem;
 }
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
-}
-.article-post .h1, .article-post .h2, .article-post .h3, .article-post .h4, .article-post .h5, .article-post .h6, .article-post h1, .article-post h2, .article-post h3, .article-post h4, .article-post h5, .article-post h6 {
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.article-post .h1,
+.article-post .h2,
+.article-post .h3,
+.article-post .h4,
+.article-post .h5,
+.article-post .h6,
+.article-post h1,
+.article-post h2,
+.article-post h3,
+.article-post h4,
+.article-post h5,
+.article-post h6 {
     font-weight: 700;
     margin-bottom: 1.5rem;
 }
+
 .article-post img.shadow {
     -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30);
     -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30);
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30);
 }
+
+.layout-page .article-post {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 1rem;
+}
+
+.layout-page .article-post p {
+    margin-bottom: 1rem;
+}
+
 img {
-   max-width:100%;
+    max-width: 100%;
 }
+
 .bottompagination span.navigation {
-    display:block;
-    font-size:0.93rem;
-    padding:15px 0 0 0;
-    text-align:center;
-    margin-bottom:0rem;
-    color:#999;
-    border-top:1px solid #ddd;
+    display: block;
+    font-size: 0.93rem;
+    padding: 15px 0 0 0;
+    text-align: center;
+    margin-bottom: 0rem;
+    color: #999;
+    border-top: 1px solid #ddd;
 }
+
 .pointerup {
-    margin-bottom:-17px;
-    margin-left:49%;
-    font-size:30px;
+    margin-bottom: -17px;
+    margin-left: 49%;
+    font-size: 30px;
 }
+
 .pointerup i.fa {
-    color:#eaeaea;
+    color: #eaeaea;
 }
+
 .bottompagination span.navigation i {
-    display:inline-block;
+    display: inline-block;
 }
+
 span.navigation {
     display: inline-block;
     font-size: 0.93rem;
     font-weight: 700;
-    text-align:center;
+    text-align: center;
 }
+
 .pagination {
-   display:block;
+    display: block;
 }
+
 iframe {
-   max-width:100%;
+    max-width: 100%;
 }
-.transpdark {    
-    background: rgba(0,0,0,0.75);
+
+.transpdark {
+    background: rgba(0, 0, 0, 0.75);
     color: #fff;
 }
+
 @media (min-width:768px) {
     .jumbotron.fortags {
-        margin-bottom:-50px;
+        margin-bottom: -50px;
         margin-top: 3rem;
-        padding:0;
-        height:350px;
-        border-radius:0;
+        padding: 0;
+        height: 350px;
+        border-radius: 0;
         background-image: url(../images/jumbotron.jpg);
-        background-size:cover;
-   }
+        background-size: cover;
+    }
+
     .jumbotron.fortags .col-md-4 {
-        background:rgba(0,0,0,0.75);
-        color:#fff;
-   }
+        background: rgba(0, 0, 0, 0.75);
+        color: #fff;
+    }
+
     .jumbotron.fortags .row {
-        margin:0;
-   }
+        margin: 0;
+    }
 }
-.jumbotron.fortags { 
-         margin-top: 3rem;
-         padding:0;
-         border-radius:0;
-         background-image: url(../images/jumbotron.jpg);
-         background-size:cover;
+
+.jumbotron.fortags {
+    margin-top: 3rem;
+    padding: 0;
+    border-radius: 0;
+    background-image: url(../images/jumbotron.jpg);
+    background-size: cover;
 }
+
 .jumbotron.fortags a {
     padding: 5px 10px 7px;
     background: #222;
@@ -617,38 +799,50 @@ iframe {
     font-weight: 500;
     text-transform: lowercase;
     font-size: 0.8rem;
+    display: inline-block;
 }
+
 .layout-page .jumbotron.fortags {
-   display:none;
+    display: none;
 }
+
 .mb-30px {
-   margin-bottom:30px;
+    margin-bottom: 30px;
 }
+
 .flex-first {
     -webkit-box-ordinal-group: 0;
     -webkit-order: -1;
     -ms-flex-order: -1;
     order: -1;
 }
+
 @media (min-width: 768px) {
     .flex-md-unordered {
         -webkit-box-ordinal-group: 1;
         -webkit-order: 1;
         -ms-flex-order: 1;
         order: 1;
-   }
+    }
+
     .flex-first {
         -webkit-box-ordinal-group: 0;
         -webkit-order: 1;
         -ms-flex-order: 1;
         order: 1;
-   }
+    }
 }
+
 @media (max-width: 768px) {
     .share {
-       margin-top:30px;
-   }
+        margin-top: 30px;
+    }
 }
+
 .card .img-fluid {
-   width:100%;
+    width: 100%;
+}
+
+.sticky-top-80 {
+    top: 80px;
 }
diff --git a/static/js/mediumish.js b/static/js/mediumish.js
index 6c0ce7a..8449962 100644
--- a/static/js/mediumish.js
+++ b/static/js/mediumish.js
@@ -28,42 +28,35 @@ jQuery(document).ready(function($){
     });
 
 
-        // Smooth scroll to an anchor
-        $('a.smoothscroll[href*="#"]')
-          // Remove links that don't actually link to anything
-          .not('[href="#"]')
-          .not('[href="#0"]')
-          .click(function(event) {
-            // On-page links
-            if (
-              location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
-              &&
-              location.hostname == this.hostname
-            ) {
-              // Figure out element to scroll to
-              var target = $(this.hash);
-              target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
-              // Does a scroll target exist?
-              if (target.length) {
-                // Only prevent default if animation is actually gonna happen
-                event.preventDefault();
-                $('html, body').animate({
-                  scrollTop: target.offset().top
-                }, 1000, function() {
-                  // Callback after animation
-                  // Must change focus!
-                  var $target = $(target);
-                  $target.focus();
-                  if ($target.is(":focus")) { // Checking if the target was focused
-                    return false;
-                  } else {
-                    $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
-                    $target.focus(); // Set focus again
-                  };
-                });
-              }
-            }
-          });
+    // Smooth on external page
+    $(function() {
+      setTimeout(function() {
+        if (location.hash) {
+          /* we need to scroll to the top of the window first, because the browser will always jump to the anchor first before JavaScript is ready, thanks Stack Overflow: http://stackoverflow.com/a/3659116 */
+          window.scrollTo(0, 0);
+          target = location.hash.split('#');
+          smoothScrollTo($('#'+target[1]));
+        }
+      }, 1);
+
+      // taken from: https://css-tricks.com/snippets/jquery/smooth-scrolling/
+      $('a[href*=\\#]:not([href=\\#])').click(function() {
+        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+          smoothScrollTo($(this.hash));
+          return false;
+        }
+      });
+
+      function smoothScrollTo(target) {
+        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
+        if (target.length) {
+          $('html,body').animate({
+            scrollTop: target.offset().top
+          }, 1000);
+        }
+      }
+    });
     
     
     // Hide Header on on scroll down
@@ -85,7 +78,6 @@ jQuery(document).ready(function($){
 
     function hasScrolled() {
         var st = $(this).scrollTop();
-        var brandrow = $('.brandrow').css("height");
         
         // Make sure they scroll more than delta
         if(Math.abs(lastScrollTop - st) <= delta)