diff --git a/include/util/console.js b/include/util/console.js
index edf0926..22e8dc4 100644
--- a/include/util/console.js
+++ b/include/util/console.js
@@ -1,6 +1,6 @@
 let chalk;
 try {
-    chalk = require('chalk');
+    chalk = require('chalk'); // eslint-disable-line node/no-extraneous-require
 } catch (e) { }
 
 module.exports = new Proxy({}, {
@@ -8,8 +8,8 @@ module.exports = new Proxy({}, {
         if (chalk) {
             return chalk[prop];
         }
-        return function () {
+        return function() {
             return arguments.length === 1 ? arguments[0] : arguments;
-        }.bind(obj);
+        };
     }
 });
diff --git a/layout/common/article-media.jsx b/layout/common/article-media.jsx
index 9f05fb5..9ce8751 100644
--- a/layout/common/article-media.jsx
+++ b/layout/common/article-media.jsx
@@ -20,7 +20,7 @@ module.exports = class extends Component {
             </a> : null}
             <div class="media-content size-small">
                 <p><time dateTime={dateXml}>{date}</time></p>
-                <p><a href={url} class="title is-size-6 has-text-weight-normal link-muted">{title}</a></p>
+                <p class="title is-6"><a href={url} class="link-muted">{title}</a></p>
                 <p class="is-uppercase">{categoryTags.length ? categoryTags : null}</p>
             </div>
         </article>;
diff --git a/layout/common/article.jsx b/layout/common/article.jsx
index 8004e7d..f8afe6b 100644
--- a/layout/common/article.jsx
+++ b/layout/common/article.jsx
@@ -66,7 +66,7 @@ module.exports = class extends Component {
                         </div>
                     </div> : null}
                     {/* Title */}
-                    <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal has-text-black-ter">
+                    <h1 class="title is-3 is-size-4-mobile">
                         {index ? <a class="link-muted" href={url_for(page.link || page.path)}>{page.title}</a> : page.title}
                     </h1>
                     {/* Content/Excerpt */}
@@ -79,7 +79,7 @@ module.exports = class extends Component {
                         })}
                     </div> : null}
                     {/* "Read more" button */}
-                    {index && page.excerpt ? <a class="article-more button is-small" href={`${url_for(page.path)}#more`}>{__('article.more')}</a> : null}
+                    {index && page.excerpt ? <a class="article-more button is-small size-small" href={`${url_for(page.path)}#more`}>{__('article.more')}</a> : null}
                     {/* Share button */}
                     {!index ? <Share config={config} page={page} helper={helper} /> : null}
                 </article>
diff --git a/layout/common/comment.jsx b/layout/common/comment.jsx
index 638703f..26860b0 100644
--- a/layout/common/comment.jsx
+++ b/layout/common/comment.jsx
@@ -12,7 +12,7 @@ module.exports = class extends Component {
 
         return <div class="card">
             <div class="card-content">
-                <h3 class="title is-5 has-text-weight-normal">{__('article.comments')}</h3>
+                <h3 class="title is-5">{__('article.comments')}</h3>
                 {(() => {
                     try {
                         const Comment = require('../comment/' + comment.type);
diff --git a/layout/common/footer.jsx b/layout/common/footer.jsx
index a524dc3..12f20a5 100644
--- a/layout/common/footer.jsx
+++ b/layout/common/footer.jsx
@@ -36,7 +36,7 @@ class Footer extends Component {
                             {Object.keys(links).map(name => {
                                 const link = links[name];
                                 return <p class="control">
-                                    <a class={`button is-white ${link.icon ? 'is-large' : ''}`} target="_blank" rel="noopener" title={name} href={link.url}>
+                                    <a class={`button is-transparent ${link.icon ? 'is-large' : ''}`} target="_blank" rel="noopener" title={name} href={link.url}>
                                         {link.icon ? <i class={link.icon}></i> : name}
                                     </a>
                                 </p>;
diff --git a/layout/misc/paginator.jsx b/layout/misc/paginator.jsx
index 4da1497..7bb2df5 100644
--- a/layout/misc/paginator.jsx
+++ b/layout/misc/paginator.jsx
@@ -27,12 +27,12 @@ module.exports = class extends Component {
             for (const i of range) {
                 if (l) {
                     if (i - l === 2) {
-                        elements.push(<li><a class="pagination-link has-text-black-ter" href={getPageUrl(l + 1)}>{l + 1}</a></li>);
+                        elements.push(<li><a class="pagination-link" href={getPageUrl(l + 1)}>{l + 1}</a></li>);
                     } else if (i - l !== 1) {
-                        elements.push(<li><span class="pagination-ellipsis has-text-black-ter" dangerouslySetInnerHTML={{ __html: '&hellip;' }}></span></li>);
+                        elements.push(<li><span class="pagination-ellipsis" dangerouslySetInnerHTML={{ __html: '&hellip;' }}></span></li>);
                     }
                 }
-                elements.push(<li><a class={`pagination-link${c === i ? ' is-current' : ' has-text-black-ter'}`} href={getPageUrl(i)}>{i}</a></li>);
+                elements.push(<li><a class={`pagination-link${c === i ? ' is-current' : ''}`} href={getPageUrl(i)}>{i}</a></li>);
                 l = i;
             }
             return elements;
diff --git a/layout/widget/profile.jsx b/layout/widget/profile.jsx
index 4513ab6..d0ffc9a 100644
--- a/layout/widget/profile.jsx
+++ b/layout/widget/profile.jsx
@@ -9,7 +9,7 @@ class Profile extends Component {
         }
         return <div class="level is-mobile">
             {links.filter(link => typeof link === 'object').map(link => {
-                return <a class="level-item button is-white is-marginless"
+                return <a class="level-item button is-transparent is-marginless"
                     target="_blank" rel="noopener" title={link.name} href={link.url}>
                     {'icon' in link ? <i class={link.icon}></i> : link.name}
                 </a>;
@@ -32,14 +32,14 @@ class Profile extends Component {
         return <div class="card widget">
             <div class="card-content">
                 <nav class="level">
-                    <div class="level-item has-text-centered" style="flex-shrink: 1">
+                    <div class="level-item has-text-centered flex-shrink-1">
                         <div>
                             <figure class="image is-128x128 mx-auto mb-2">
                                 <img class={avatarRounded ? 'is-rounded' : ''} src={avatar} alt={author} />
                             </figure>
-                            {author ? <p class="is-size-4 is-block">{author}</p> : null}
+                            {author ? <p class="title is-size-4 is-block line-height-inherit">{author}</p> : null}
                             {authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null}
-                            {location ? <p class="is-size-6 is-flex justify-content-center has-text-grey">
+                            {location ? <p class="is-size-6 is-flex justify-content-center">
                                 <i class="fas fa-map-marker-alt mr-1"></i>
                                 <span>{location}</span>
                             </p> : null}
@@ -51,7 +51,7 @@ class Profile extends Component {
                         <div>
                             <p class="heading">{counter.post.title}</p>
                             <a href={counter.post.url}>
-                                <p class="title has-text-weight-normal">{counter.post.count}</p>
+                                <p class="title">{counter.post.count}</p>
                             </a>
                         </div>
                     </div>
@@ -59,7 +59,7 @@ class Profile extends Component {
                         <div>
                             <p class="heading">{counter.category.title}</p>
                             <a href={counter.category.url}>
-                                <p class="title has-text-weight-normal">{counter.category.count}</p>
+                                <p class="title">{counter.category.count}</p>
                             </a>
                         </div>
                     </div>
@@ -67,7 +67,7 @@ class Profile extends Component {
                         <div>
                             <p class="heading">{counter.tag.title}</p>
                             <a href={counter.tag.url}>
-                                <p class="title has-text-weight-normal">{counter.tag.count}</p>
+                                <p class="title">{counter.tag.count}</p>
                             </a>
                         </div>
                     </div>
diff --git a/source/css/base.styl b/source/css/base.styl
index d304e1d..dea9c93 100644
--- a/source/css/base.styl
+++ b/source/css/base.styl
@@ -25,6 +25,8 @@ $fullhd ?= 1472px
 
 $shadow ?= 0 4px 10px rgba(0, 0, 0, 0.05)
 
+$title-weight ?= $weight-normal
+
 $control-height ?= 2.25em
 $button-padding-vertical ?= calc(0.375em - 1px)
 
@@ -121,14 +123,14 @@ $colors = merge($colors, $custom-colors)
         .navbar-end
             margin-left: 0
 
+.title
+    color: $black-ter
+
 .card
     border-radius: $card-radius
     & + .card,
     & + .column-right-shadow
         margin-top: 1.5rem
-    &.card-transparent
-        box-shadow: none
-        background: transparent
     .card-image
         overflow: hidden
         border-top-left-radius: $card-radius
@@ -268,14 +270,18 @@ figure.highlight
 
 /* ---------------------------------
  *  Custom Element/Component styles
- * --------------------------------- */
+ * --------------------------------- */ 
+.button.is-transparent
+    @extend .button.is-white
+    background: transparent !important
+
 article
     &.media
         .media-content
             color: $grey
             .title
+                margin: 0
                 line-height: inherit
-                color: $black-ter
     &.article
         .article-meta,
         .article-tags
@@ -307,8 +313,6 @@ footer.footer
             +mobile()
                 justify-content: center
                 margin-top: 1rem
-            .button
-                background: transparent
 
 .navbar-logo,
 .footer-logo
@@ -321,6 +325,8 @@ footer.footer
     height: 100% !important
 
 .pagination
+    .pagination-link,
+    .pagination-ellipsis,
     .pagination-previous,
     .pagination-next
         a
@@ -470,6 +476,10 @@ footer.footer
         .qrcode
             right: -0.75rem
 
+.gallery-item
+    .caption
+        color: $grey
+
 +mobile()
     #toc
         display: none
@@ -503,9 +513,9 @@ footer.footer
     line-height: 24px
     outline: none
     transform: translateY(120px)
-    .fade-in
+    &.fade-in
         opacity: 1
-    .rise-up
+    &.rise-up
         transform: translateY(0)
 
 .pace
diff --git a/source/css/helper.styl b/source/css/helper.styl
index 855c7a0..7a0c93c 100644
--- a/source/css/helper.styl
+++ b/source/css/helper.styl
@@ -87,7 +87,7 @@ for n in (0..5)
  * --------------------------------- */
 for n in (0..5)
     .order-{n}
-        order: n
+        order: n !important
 
 
 .justify-content-start
@@ -96,6 +96,9 @@ for n in (0..5)
 .justify-content-center
     justify-content: center !important
 
+.flex-shrink-1
+    flex-shrink: 1 !important
+
 
 /* ---------------------------------
  *           Color helpers
@@ -110,7 +113,10 @@ for n in (0..5)
  *           Font helpers
  * --------------------------------- */
 .size-small
-    font-size: .85rem
+    font-size: .85rem !important
+
+.line-height-inherit
+    line-height: inherit !important
 
 
 /* ---------------------------------
diff --git a/source/js/animation.js b/source/js/animation.js
index 30bb1a9..0824e58 100644
--- a/source/js/animation.js
+++ b/source/js/animation.js
@@ -14,9 +14,11 @@
         element.style.opacity = '0';
     });
     document.querySelector('body > .navbar').style.transform = 'translateY(-100px)';
-    ['.column-main > .card',
+    [
+        '.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
         '.column-left > .card, .column-right-shadow > .card',
-        '.column-right > .card'].forEach(selector => {
+        '.column-right > .card'
+    ].forEach(selector => {
         $(selector).forEach(element => {
             element.style.transition = '0s';
             element.style.opacity = '0';
@@ -30,9 +32,11 @@
             element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
         });
         document.querySelector('body > .navbar').style.transform = 'translateY(0)';
-        ['.column-main > .card',
+        [
+            '.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
             '.column-left > .card, .column-right-shadow > .card',
-            '.column-right > .card'].forEach(selector => {
+            '.column-right > .card'
+        ].forEach(selector => {
             let i = 1;
             $(selector).forEach(element => {
                 setTimeout(() => {
diff --git a/source/js/main.js b/source/js/main.js
index 2d0521c..6ba7333 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -9,7 +9,7 @@
         if ($(this).parent('a').length === 0) {
             $(this).wrap('<a class="gallery-item" href="' + $(this).attr('src') + '"></a>');
             if (this.alt) {
-                $(this).after('<div class="has-text-centered is-size-6 has-text-grey caption">' + this.alt + '</div>');
+                $(this).after('<p class="has-text-centered is-size-6 caption">' + this.alt + '</p>');
             }
         }
     });