diff --git a/source/css/base.styl b/source/css/base.styl
deleted file mode 100644
index 654aacf..0000000
--- a/source/css/base.styl
+++ /dev/null
@@ -1,461 +0,0 @@
-bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
-
-/* ---------------------------------
- *   Override Bulma CSS Framework
- * --------------------------------- */
-$body-size ?= 14px
-$body-background-color ?= #f7f7f7
-
-$family-sans-serif ?= Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif
-$family-code ?= "Source Code Pro", monospace, "Microsoft YaHei"
-
-$primary ?= $blue
-$custom-colors ?= {
-    grey-lightest: {
-        '1': $grey-lightest
-        '2': $grey-darker
-    }
-}
-
-$gap ?= 64px
-$tablet ?= 769px
-$desktop ?= 1088px
-$widescreen ?= 1280px
-$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)
-
-$card-radius ?= $radius
-$card-media-margin ?= 0.75rem
-$card-shadow ?= $shadow, 0 0 1px rgba(0,0,0,0.1)
-
-$content-heading-weight ?= $weight-normal
-
-$article-size ?= 1.1rem
-
-// FIXME: https://github.com/groenroos/bulma-stylus/issues/11
-@import bulma-stylus-root + "/utilities/initial-variables"
-@import bulma-stylus-root + "/utilities/functions"
-@import bulma-stylus-root + "/utilities/derived-variables"
-
-$colors = merge($colors, $custom-colors)
-
-@import bulma-stylus-root + "/utilities/animations"
-@import bulma-stylus-root + "/utilities/mixins"
-@import bulma-stylus-root + "/utilities/controls"
-@import bulma-stylus-root + "/base/_all"
-@import bulma-stylus-root + "/components/_all"
-@import bulma-stylus-root + "/elements/_all"
-@import bulma-stylus-root + "/form/_all"
-@import bulma-stylus-root + "/grid/_all"
-@import bulma-stylus-root + "/layout/_all"
-
-
-/* ---------------------------------
- *          Custom Layout
- * --------------------------------- */
-+widescreen()
-    .is-1-column .container
-    .is-2-column .container
-        max-width: $desktop - 2 * $gap
-        width: $desktop - 2 * $gap
-+fullhd()
-    .is-2-column .container
-        max-width: $widescreen - 2 * $gap
-        width: $widescreen - 2 * $gap
-    .is-1-column .container
-        max-width: $desktop - 2 * $gap
-        width: $desktop - 2 * $gap
-+tablet()
-    .column-main,
-    .column-left,
-    .column-right,
-    .column-right-shadow
-        &.is-sticky
-            align-self: flex-start
-            position: -webkit-sticky
-            position: sticky
-            top: .75rem
-    .column-right-shadow
-        &.is-sticky
-            top: 1.5rem
-+mobile()
-    .section
-        padding: 1.5rem 1rem
-
-.navbar-main
-    box-shadow: $shadow
-    .navbar-menu,
-    .navbar-start,
-    .navbar-end
-        align-items: stretch
-        display: flex
-        padding: 0
-        flex-shrink: 0
-    .navbar-menu
-        flex-grow: 1
-        flex-shrink: 0
-        overflow-x: auto
-    .navbar-start
-        justify-content: flex-start
-        margin-right: auto
-    .navbar-end
-        justify-content: flex-end
-        margin-left: auto
-    .navbar-item
-        display: flex
-        align-items: center
-        padding: 1.25rem 0.75rem
-        &.is-active
-            color: $primary
-            background-color: transparent
-    +until($navbar-breakpoint)
-        .navbar-menu
-            justify-content: center
-            box-shadow: none
-        .navbar-start
-            margin-right: 0
-        .navbar-end
-            margin-left: 0
-
-.title
-    color: $black-ter
-
-.card
-    border-radius: $card-radius
-    & + .card,
-    & + .column-right-shadow
-        margin-top: 1.5rem
-    .card-image
-        overflow: hidden
-        border-top-left-radius: $card-radius
-        border-top-right-radius: $card-radius
-    .media + .media
-        border: none
-        margin-top: 0
-
-.content
-    h1
-        font-size: 1.75em
-    h2
-        font-size: 1.5em
-    h3
-        font-size: 1.25em
-    h4
-        font-size: 1.125em
-    h5
-        font-size: 1em
-    pre
-        font-size: 0.85em
-    code
-        padding: 0
-        background: transparent
-    blockquote
-        footer
-            strong + cite
-                margin-left: 0.5em
-
-
-/* ---------------------------------
- *         Font icon fixes
- * --------------------------------- */
-.fa, .fab, .fal, .far, .fas
-    line-height: inherit
-
-
-/* ---------------------------------
- *        Fix Gist Snippet
- * --------------------------------- */
-.gist
-    table
-        tr:hover
-            background: transparent
-        td
-            border: none
-    .file
-        all: initial
-
-
-/* ---------------------------------
- *        Fix code highlight
- * --------------------------------- */
-figure.highlight
-    padding: 0
-    width: 100%
-    position: relative
-    margin: 1em 0 1em !important
-    &.folded
-        .highlight-body
-            height: 0
-
-    pre,
-    table tr:hover
-        color: inherit
-        background: transparent
-
-    table
-        width: auto
-
-        tr td
-            border: none
-        tr:not(:first-child) td
-            padding-top: 0
-        tr:not(:last-child) td
-            padding-bottom: 0
-
-    pre
-        padding: 0
-        overflow: visible
-
-        .line,
-        code .hljs
-            line-height: 1.5rem
-
-    figcaption,
-    .gutter
-        background: rgba(200, 200, 200, 0.15)
-
-    figcaption
-        margin: 0 !important
-        padding: .3em .0em .3em .75em
-        font-style: normal
-        font-size: .8em
-
-        *
-            color: $grey
-
-        span
-            font-weight: 500
-            font-family: $family-code
-
-        .level-left *:not(:last-child)
-            margin-right: .5em
-
-        .level-right *:not(:first-child)
-            margin-left: .5em
-
-        .fold
-            cursor: pointer
-
-        &.level
-            overflow: auto
-            .level-right
-                a
-                    padding: .0em 0.75em
-
-
-    .highlight-body
-        overflow: auto
-
-    .gutter
-        text-align: right
-
-    .tag,
-    .title,
-    .number,
-    .section
-        display: inherit
-        font: inherit
-        margin: inherit
-        padding: inherit
-        background: inherit
-        height: inherit
-        text-align: inherit
-        vertical-align: inherit
-        min-width: inherit
-        border-radius: inherit
-
-
-/* ---------------------------------
- *  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
-    &.article
-        .article-meta,
-        .article-tags
-            color: $grey
-        .article-meta
-            overflow-x: auto
-            margin-bottom: 0.5rem
-        .article-more
-            @extend .button.is-light
-        .content
-            font-size: $article-size
-            blockquote.pullquote
-                float: right
-                max-width: 50%
-                font-size: 1.15rem
-                position: relative
-            a
-                word-wrap: break-word
-
-footer.footer
-    background: $white
-    .level-start
-        +mobile()
-            text-align: center
-    .level-end
-        .field
-            flex-wrap: wrap
-            align-items: center
-            +mobile()
-                justify-content: center
-                margin-top: 1rem
-
-.navbar-logo,
-.footer-logo
-    img
-        max-height: 1.75rem
-
-.thumbnail
-    object-fit: cover
-    width: 100% !important
-    height: 100% !important
-
-.pagination
-    .pagination-link,
-    .pagination-ellipsis,
-    .pagination-previous,
-    .pagination-next
-        a
-            color: $black-ter
-    .pagination-link,
-    .pagination-previous,
-    .pagination-next
-        border: none
-        background: $white
-        box-shadow: $shadow
-    .pagination-link.is-current
-        background: $primary
-
-.post-navigation
-    color: $grey
-    flex-wrap: wrap
-    justify-content: space-around
-    .level-item
-        margin-bottom: 0
-
-.timeline
-    margin-left: 1rem
-    padding-left: 1.5rem
-    padding-top: 1rem
-    border-left: 1px solid hsl(0, 0%, 86%)
-    .media
-        position: relative
-        &:before,
-        &:last-child:after
-            content: ''
-            display: block
-            position: absolute
-            left: calc(-5px - 1.5rem)
-        &:before
-            width: 9px
-            height: 9px
-            top: 1.3rem
-            background: hsl(0, 0%, 86%)
-            border-radius: 50%
-        &:first-child:before
-            top: 0.3rem
-        &:last-child:after
-            top: calc(1.3rem + 9px)
-            width: 9px
-            bottom: 0
-            background: white
-        &:first-child:last-child:after
-            top: calc(0.3rem + 9px)
-
-.rtl
-     direction: rtl
-     .level
-        &, &.is-mobile
-            .level-item:not(:last-child)
-                margin-left: 0.75rem
-                margin-right: 0
-
-.donate
-    position: relative
-    .qrcode
-        display: none
-        position: absolute
-        z-index: 99
-        bottom: 2.5em
-        line-height: 0
-        overflow: hidden
-        border-radius: 4px
-        box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.2)
-        img
-            max-width: 280px
-    &:hover
-        .qrcode
-            display: block
-    &:first-child:not(:last-child)
-        .qrcode
-            left: -0.75rem
-    &:last-child:not(:first-child)
-        .qrcode
-            right: -0.75rem
-
-.gallery-item
-    .caption
-        color: $grey
-
-+mobile()
-    #toc
-        display: none
-        position: fixed
-        margin: 1rem
-        left: 0
-        right: 0
-        bottom: 0
-        z-index: 100
-        max-height: calc(100vh - 2rem)
-        overflow-y: auto
-    #toc-mask
-        display: none
-        position: fixed
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        z-index: 99
-        background: rgba(0, 0, 0, 0.7)
-    #toc,
-    #toc-mask
-        &.is-active
-            display: block
-
-// Overflow table
-.table-overflow
-    overflow-x: auto
-    table
-        width: auto!important
-        th
-            word-break: keep-all
-
-// Video container
-.video-container
-    position: relative
-    padding-bottom: 56.25%
-    padding-top: 25px
-    height: 0
-    iframe
-        position: absolute
-        top: 0
-        left: 0
-        width: 100%
-        height: 100%
\ No newline at end of file
diff --git a/source/css/include/article.styl b/source/css/include/article.styl
new file mode 100644
index 0000000..029238f
--- /dev/null
+++ b/source/css/include/article.styl
@@ -0,0 +1,101 @@
+/* ---------------------------------
+ *    Article Summary and Content
+ * --------------------------------- */
+$article-font-size ?= 1.1rem
+
+article
+    &.media
+        .media-content
+            color: $text-light
+
+            .title
+                margin: 0
+                line-height: inherit
+
+    &.article
+        .article-meta, .article-tags
+            color: $text-light
+
+        .article-meta
+            overflow-x: auto
+            margin-bottom: .5rem
+
+        .article-more
+            @extend .button.is-light
+
+        .content
+            font-size: $article-font-size
+
+            a
+                word-wrap: break-word
+
+            h1
+                font-size: 1.75em
+
+            h2
+                font-size: 1.5em
+
+            h3
+                font-size: 1.25em
+
+            h4
+                font-size: 1.125em
+
+            h5
+                font-size: 1em
+
+            pre
+                font-size: .85em
+
+            code
+                padding: 0
+                background: transparent
+
+            blockquote
+                &.pullquote
+                    float: right
+                    max-width: 50%
+                    font-size: 1.15rem
+                    position: relative
+
+                footer
+                    strong + cite
+                        margin-left: .5em
+
+.rtl
+    direction: rtl
+
+    .level
+        &, &.is-mobile
+            .level-item:not(:last-child)
+                margin-left: .75rem
+                margin-right: 0
+
+.thumbnail
+    object-fit: cover
+    width: 100% !important
+    height: 100% !important
+
+// Overflow table
+.table-overflow
+    overflow-x: auto
+
+    table
+        width: auto !important
+
+        th
+            word-break: keep-all
+
+// Video container
+.video-container
+    position: relative
+    padding-bottom: 56.25%
+    padding-top: 25px
+    height: 0
+
+    iframe
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
diff --git a/source/css/include/base.styl b/source/css/include/base.styl
new file mode 100644
index 0000000..525890f
--- /dev/null
+++ b/source/css/include/base.styl
@@ -0,0 +1,60 @@
+bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
+
+/* ---------------------------------
+ *   Override Bulma CSS Framework
+ * --------------------------------- */
+$body-size ?= 14px
+$body-background-color ?= #f7f7f7
+
+$family-sans-serif ?= Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif
+$family-code ?= "Source Code Pro", monospace, "Microsoft YaHei"
+
+$primary ?= $blue
+$custom-colors ?= {
+    grey-lightest: {
+        '1': $grey-lightest
+        '2': $grey-darker
+    }
+}
+
+$navbar-item-active-color ?= $primary
+$footer-background-color ?= $scheme-main
+
+$gap ?= 64px
+$tablet ?= 769px
+$desktop ?= 1088px
+$widescreen ?= 1280px
+$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)
+
+$card-radius ?= $radius
+$card-media-margin ?= 0.75rem
+$card-shadow ?= $shadow, 0 0 1px rgba(0, 0, 0, 0.1)
+
+$content-heading-weight ?= $weight-normal
+
+
+$logo-height ?= 1.75rem
+
+// FIXME: https://github.com/groenroos/bulma-stylus/issues/11
+@import bulma-stylus-root + "/utilities/initial-variables"
+@import bulma-stylus-root + "/utilities/functions"
+@import bulma-stylus-root + "/utilities/derived-variables"
+
+$colors = merge($colors, $custom-colors)
+
+@import bulma-stylus-root + "/utilities/animations"
+@import bulma-stylus-root + "/utilities/mixins"
+@import bulma-stylus-root + "/utilities/controls"
+@import bulma-stylus-root + "/base/_all"
+@import bulma-stylus-root + "/components/_all"
+@import bulma-stylus-root + "/elements/_all"
+@import bulma-stylus-root + "/form/_all"
+@import bulma-stylus-root + "/grid/_all"
+@import bulma-stylus-root + "/layout/_all"
diff --git a/source/css/include/button.styl b/source/css/include/button.styl
new file mode 100644
index 0000000..e3059b8
--- /dev/null
+++ b/source/css/include/button.styl
@@ -0,0 +1,7 @@
+/* ---------------------------------
+ *            Buttons
+ * --------------------------------- */
+.button
+    &.is-transparent
+        background: transparent
+        border-color: transparent
diff --git a/source/css/include/card.styl b/source/css/include/card.styl
new file mode 100644
index 0000000..cf7117f
--- /dev/null
+++ b/source/css/include/card.styl
@@ -0,0 +1,13 @@
+/* ---------------------------------
+ *              Card
+ * --------------------------------- */
+.card
+    overflow: hidden
+    border-radius: $card-radius
+
+    & + .card, & + .column-right-shadow
+        margin-top: 1.5rem
+
+    .media + .media
+        border: none
+        margin-top: 0
diff --git a/source/css/include/codeblock.styl b/source/css/include/codeblock.styl
new file mode 100644
index 0000000..dbbc7ba
--- /dev/null
+++ b/source/css/include/codeblock.styl
@@ -0,0 +1,101 @@
+/* ---------------------------------
+ *          Code Highlight
+ * --------------------------------- */
+$codeblock-caption-bg ?= rgba(200, 200, 200, .15)
+
+figure.highlight
+    padding: 0
+    width: 100%
+    position: relative
+    margin: 1em 0 1em !important
+
+    &.folded
+        .highlight-body
+            height: 0
+
+    pre, table tr:hover
+        color: inherit
+        background: transparent
+
+    table
+        width: auto
+
+        tr td
+            border: none
+
+        tr:not(:first-child) td
+            padding-top: 0
+
+        tr:not(:last-child) td
+            padding-bottom: 0
+
+    pre
+        padding: 0
+        overflow: visible
+
+        .line, code .hljs
+            line-height: 1.5rem
+
+    figcaption, .gutter
+        background: $codeblock-caption-bg
+
+    figcaption
+        margin: 0 !important
+        padding: .3em 0em .3em .75em
+        font-style: normal
+        font-size: .8em
+
+        *
+            color: $grey
+
+        span
+            font-weight: 500
+            font-family: $family-code
+
+        .level-left *:not(:last-child)
+            margin-right: .5em
+
+        .level-right *:not(:first-child)
+            margin-left: .5em
+
+        .fold
+            cursor: pointer
+
+        &.level
+            overflow: auto
+
+            .level-right
+                a
+                    padding: 0em .75em
+
+    .highlight-body
+        overflow: auto
+
+    .gutter
+        text-align: right
+
+    .tag, .title, .number, .section
+        display: inherit
+        font: inherit
+        margin: inherit
+        padding: inherit
+        background: inherit
+        height: inherit
+        text-align: inherit
+        vertical-align: inherit
+        min-width: inherit
+        border-radius: inherit
+
+/* ---------------------------------
+ *        Fix Gist Snippet
+ * --------------------------------- */
+.gist
+    table
+        tr:hover
+            background: transparent
+
+        td
+            border: none
+
+    .file
+        all: initial
diff --git a/source/css/include/donate.styl b/source/css/include/donate.styl
new file mode 100644
index 0000000..82499fa
--- /dev/null
+++ b/source/css/include/donate.styl
@@ -0,0 +1,34 @@
+/* ---------------------------------
+ *          Donate Buttons
+ * --------------------------------- */
+$donate-qrcode-max-width ?= 280px
+$donate-qrcode-shadow ?= $card-shadow
+$donate-qrcode-box-radius ?= $card-radius
+
+.donate
+    position: relative
+
+    .qrcode
+        display: none
+        position: absolute
+        z-index: 99
+        bottom: 2.5em
+        line-height: 0
+        overflow: hidden
+        box-shadow: $donate-qrcode-shadow
+        border-radius: $donate-qrcode-box-radius
+
+        img
+            max-width: $donate-qrcode-max-width
+
+    &:hover
+        .qrcode
+            display: block
+
+    &:first-child:not(:last-child)
+        .qrcode
+            left: -.75rem
+
+    &:last-child:not(:first-child)
+        .qrcode
+            right: -.75rem
diff --git a/source/css/include/footer.styl b/source/css/include/footer.styl
new file mode 100644
index 0000000..c58431b
--- /dev/null
+++ b/source/css/include/footer.styl
@@ -0,0 +1,20 @@
+/* ---------------------------------
+ *            Page Footer
+ * --------------------------------- */
+footer.footer
+    .level-start
+        +mobile()
+            text-align: center
+
+    .level-end
+        .field
+            flex-wrap: wrap
+            align-items: center
+
+            +mobile()
+                justify-content: center
+                margin-top: 1rem
+
+.footer-logo
+    img
+        max-height: $logo-height
diff --git a/source/css/helper.styl b/source/css/include/helper.styl
similarity index 97%
rename from source/css/helper.styl
rename to source/css/include/helper.styl
index 7a0c93c..2ba7ed5 100644
--- a/source/css/helper.styl
+++ b/source/css/include/helper.styl
@@ -4,92 +4,122 @@
 $spacer ?= 1rem
 $spacers ?= 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * 3
 
-for n in (0..5)
+for n in (0 .. 5)
     .ml-{n}
         margin-left: $spacers[n] !important
+
     .mr-{n}
         margin-right: $spacers[n] !important
+
     .mx-{n}
         @extend .ml-{n}, .mr-{n}
+
     .ml-n{n}
         margin-left: - $spacers[n] !important
+
     .mr-n{n}
         margin-right: - $spacers[n] !important
+
     .mx-n{n}
         @extend .ml-n{n}, .mr-n{n}
+
     .mt-{n}
         margin-top: $spacers[n] !important
+
     .mb-{n}
         margin-bottom: $spacers[n] !important
+
     .my-{n}
         @extend .mt-{n}, .mb-{n}
+
     .mt-n{n}
         margin-top: - $spacers[n] !important
+
     .mb-n{n}
         margin-bottom: - $spacers[n] !important
+
     .my-n{n}
         @extend .mt-n{n}, .mb-n{n}
 
     .pl-{n}
         padding-left: $spacers[n] !important
+
     .pr-{n}
         padding-right: $spacers[n] !important
+
     .px-{n}
         @extend .pl-{n}, .pr-{n}
+
     .pl-n{n}
         padding-left: - $spacers[n] !important
+
     .pr-n{n}
         padding-right: - $spacers[n] !important
+
     .px-n{n}
         @extend .pl-n{n}, .pr-n{n}
+
     .pt-{n}
         padding-top: $spacers[n] !important
+
     .pb-{n}
         padding-bottom: $spacers[n] !important
+
     .py-{n}
         @extend .pt-{n}, .pb-{n}
+
     .pt-n{n}
         padding-top: - $spacers[n] !important
+
     .pb-n{n}
         padding-bottom: - $spacers[n] !important
+
     .py-n{n}
         @extend .pt-n{n}, .pb-n{n}
 
 .ml-auto
     margin-left: auto !important
+
 .mr-auto
     margin-right: auto !important
+
 .mx-auto
     @extend .ml-auto, .mr-auto
+
 .mt-auto
     margin-top: auto !important
+
 .mb-auto
     margin-bottom: auto !important
+
 .my-auto
     @extend .mt-auto, .mb-auto
 
 .pl-auto
     margin-left: auto !important
+
 .pr-auto
     margin-right: auto !important
+
 .px-auto
     @extend .pl-auto, .pr-auto
+
 .pt-auto
     margin-top: auto !important
+
 .pb-auto
     margin-bottom: auto !important
+
 .py-auto
     @extend .pt-auto, .pb-auto
 
-
 /* ---------------------------------
  *           Flex helpers
  * --------------------------------- */
-for n in (0..5)
+for n in (0 .. 5)
     .order-{n}
         order: n !important
 
-
 .justify-content-start
     justify-content: start !important
 
@@ -99,16 +129,15 @@ for n in (0..5)
 .flex-shrink-1
     flex-shrink: 1 !important
 
-
 /* ---------------------------------
  *           Color helpers
  * --------------------------------- */
 .link-muted
     color: inherit
+
     &:hover
         color: $primary !important
 
-
 /* ---------------------------------
  *           Font helpers
  * --------------------------------- */
@@ -118,12 +147,12 @@ for n in (0..5)
 .line-height-inherit
     line-height: inherit !important
 
-
 /* ---------------------------------
  *          Image helpers
  * --------------------------------- */
 .image.is-7by3
     padding-top: 42.8%
+
     img
         bottom: 0
         left: 0
diff --git a/source/css/include/navbar.styl b/source/css/include/navbar.styl
new file mode 100644
index 0000000..cd87821
--- /dev/null
+++ b/source/css/include/navbar.styl
@@ -0,0 +1,47 @@
+/* ---------------------------------
+ *           Top Navigation
+ * --------------------------------- */
+.navbar-main
+    box-shadow: $shadow
+
+    .navbar-menu, .navbar-start, .navbar-end
+        align-items: stretch
+        display: flex
+        padding: 0
+        flex-shrink: 0
+
+    .navbar-menu
+        flex-grow: 1
+        flex-shrink: 0
+        overflow-x: auto
+
+    .navbar-start
+        justify-content: flex-start
+        margin-right: auto
+
+    .navbar-end
+        justify-content: flex-end
+        margin-left: auto
+
+    .navbar-item
+        display: flex
+        align-items: center
+        padding: 1.25rem .75rem
+
+        &.is-active
+            background-color: transparent
+
+    +until($navbar-breakpoint)
+        .navbar-menu
+            justify-content: center
+            box-shadow: none
+
+        .navbar-start
+            margin-right: 0
+
+        .navbar-end
+            margin-left: 0
+
+.navbar-logo
+    img
+        max-height: $logo-height
\ No newline at end of file
diff --git a/source/css/include/pagination.styl b/source/css/include/pagination.styl
new file mode 100644
index 0000000..28428c7
--- /dev/null
+++ b/source/css/include/pagination.styl
@@ -0,0 +1,29 @@
+/* ---------------------------------
+ *  Pagination and Post Navigation
+ * --------------------------------- */
+$pagination-box-shadow ?= $card-shadow
+$pagination-background-color ?= $button-background-color
+$post-navigation-fg ?= $grey
+
+.pagination
+    .pagination-link,
+    .pagination-ellipsis,
+    .pagination-previous,
+    .pagination-next
+        a
+            color: $pagination-color
+    .pagination-link,
+    .pagination-previous,
+    .pagination-next
+        border: none
+        background: $pagination-background-color
+        box-shadow: $pagination-box-shadow
+    .pagination-link.is-current
+        background: $pagination-current-background-color
+
+.post-navigation
+    color: $post-navigation-fg
+    flex-wrap: wrap
+    justify-content: space-around
+    .level-item
+        margin-bottom: 0
diff --git a/source/css/include/plugin.styl b/source/css/include/plugin.styl
new file mode 100644
index 0000000..e748fc1
--- /dev/null
+++ b/source/css/include/plugin.styl
@@ -0,0 +1,78 @@
+/* ---------------------------------
+ *        Back to Top Button
+ * --------------------------------- */
+#back-to-top
+    position: fixed
+    padding: 8px 0
+    transition: .4s ease opacity, .4s ease width, .4s ease transform, .4s ease border-radius
+    opacity: 0
+    line-height: 24px
+    outline: none
+    transform: translateY(120px)
+
+    &.fade-in
+        opacity: 1
+
+    &.rise-up
+        transform: translateY(0)
+
+/* ---------------------------------
+ *          Gallery Plugin
+ * --------------------------------- */
+.gallery-item
+    .caption
+        color: $grey
+
+/* ---------------------------------
+ *      Table of Content Widget
+ * --------------------------------- */
++mobile()
+    #toc
+        display: none
+        position: fixed
+        margin: 1rem
+        left: 0
+        right: 0
+        bottom: 0
+        z-index: 100
+        max-height: calc(100vh - 2rem)
+        overflow-y: auto
+
+    #toc-mask
+        display: none
+        position: fixed
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        z-index: 99
+        background: rgba(0, 0, 0, .7)
+
+    #toc, #toc-mask
+        &.is-active
+            display: block
+
+/* ---------------------------------
+ *      Page Loading Progressbar
+ * --------------------------------- */
+.pace
+    user-select: none
+    pointer-events: none
+
+    .pace-progress
+        top: 0
+        right: 100%
+        width: 100%
+        height: 2px
+        z-index: 2000
+        position: fixed
+        background: $primary
+
+.pace-inactive
+    display: none
+
+/* ---------------------------------
+ *       Fix FontAwesome Icons
+ * --------------------------------- */
+.fa, .fab, .fal, .far, .fas
+    line-height: inherit
diff --git a/source/css/include/responsive.styl b/source/css/include/responsive.styl
new file mode 100644
index 0000000..ec4d57e
--- /dev/null
+++ b/source/css/include/responsive.styl
@@ -0,0 +1,32 @@
+/* ---------------------------------
+ *         Responsive Layout
+ * --------------------------------- */
++widescreen()
+    .is-1-column .container, .is-2-column .container
+        max-width: $desktop - 2 * $gap
+        width: $desktop - 2 * $gap
+
++fullhd()
+    .is-2-column .container
+        max-width: $widescreen - 2 * $gap
+        width: $widescreen - 2 * $gap
+
+    .is-1-column .container
+        max-width: $desktop - 2 * $gap
+        width: $desktop - 2 * $gap
+
++tablet()
+    .column-main, .column-left, .column-right, .column-right-shadow
+        &.is-sticky
+            align-self: flex-start
+            position: -webkit-sticky
+            position: sticky
+            top: .75rem
+
+    .column-right-shadow
+        &.is-sticky
+            top: 1.5rem
+
++mobile()
+    .section
+        padding: 1.5rem 1rem
diff --git a/source/css/search.styl b/source/css/include/search.styl
similarity index 51%
rename from source/css/search.styl
rename to source/css/include/search.styl
index 2f4a683..5d21a0a 100644
--- a/source/css/search.styl
+++ b/source/css/include/search.styl
@@ -1,28 +1,34 @@
-$box-shadow = 0 4px 10px rgba(0, 0, 0, .05), 0 0 1px rgba(0, 0, 0, .1)
-$border-radius = 4px
-$bg-shadow = rgba(0, 0, 0, .7)
-$bg-container = #f7f7f7
-$bg-primary = rgb(39, 108, 218)
-$fg-primary = #fff
-$fg-input = #333
-$bg-input = #fff
-$bg-close-hover = $bg-container
-$bg-close-active = #eee
-$fg-result-header = #aaa
-$fg-result-item-secondary = #aaa
-$bg-result-item-hover = #fff
-$fg-result-item-active = $fg-primary
-$bg-result-item-active = $bg-primary
-$bg-result-item-highlight = $yellow
-$fg-pagination-item = #333
-$bg-pagination-item = #fff
-$bg-pagination-item-hover = $bg-container
-$fg-pagination-item-active = $fg-primary
-$bg-pagination-item-active = $bg-primary
-$bg-pagination-item-disabled = $bg-container
-$fg-border = #e2e2e2
-$container-width = 540px
-$container-margin = 100px
+/* ---------------------------------
+ *           Search Box
+ * --------------------------------- */
+// container sizes
+$searchbox-container-width ?= 540px
+$searchbox-container-margin ?= 100px
+$searchbox-breakpoint-width ?= 559px
+$searchbox-breakpoint-height ?= 479px
+// overlay and container styles
+$searchbox-box-shadow ?= $card-shadow
+$searchbox-border-radius ?= $radius
+$searchbox-bg-overlay ?= $modal-background-background-color
+$searchbox-bg-container ?= $white-ter
+$searchbox-border ?= $border
+// header styles
+$searchbox-bg-input ?= $white
+$searchbox-bg-close-hover ?= $searchbox-bg-container
+$searchbox-bg-close-active ?= $grey-lighter
+// body styles
+$searchbox-fg-result-header ?= $grey-light
+$searchbox-fg-result-item-secondary ?= $grey-light
+$searchbox-bg-result-item-hover ?= $searchbox-bg-input
+$searchbox-fg-result-item-active ?= findColorInvert($primary)
+$searchbox-bg-result-item-active ?= $primary
+$searchbox-bg-result-item-highlight ?= $yellow
+// footer styles
+$searchbox-bg-pagination-item ?= $searchbox-bg-input
+$searchbox-bg-pagination-item-hover ?= $searchbox-bg-container
+$searchbox-fg-pagination-item-active ?= findColorInvert($primary)
+$searchbox-bg-pagination-item-active ?= $primary
+$searchbox-bg-pagination-item-disabled ?= $searchbox-bg-container
 
 .searchbox
     display: none
@@ -33,7 +39,7 @@ $container-margin = 100px
     z-index: 100
     font-size: 1rem
     line-height: 0
-    background: $bg-shadow
+    background: $searchbox-bg-overlay
 
     &.show
         display: flex
@@ -59,12 +65,12 @@ $container-margin = 100px
         z-index: 101
         display: flex
         overflow: hidden
-        box-shadow: $box-shadow
-        border-radius: $border-radius
-        background-color: $bg-container
-        width: $container-width
-        top: $container-margin
-        bottom: $container-margin
+        box-shadow: $searchbox-box-shadow
+        border-radius: $searchbox-border-radius
+        background-color: $searchbox-bg-container
+        width: $searchbox-container-width
+        top: $searchbox-container-margin
+        bottom: $searchbox-container-margin
 
     .searchbox-header, .searchbox-body, .searchbox-footer
         width: 100%
@@ -74,7 +80,7 @@ $container-margin = 100px
         flex-direction: row
         line-height: 1.5em
         font-weight: normal
-        background-color: $bg-input
+        background-color: $searchbox-bg-input
 
     .searchbox-input-container
         display: flex
@@ -82,51 +88,49 @@ $container-margin = 100px
 
     .searchbox-input
         flex-grow: 1
-        color: $fg-input
         box-sizing: border-box
         padding: .75em 0 .75em 1.25em
 
     .searchbox-close
         display: inline-block
-        color: $fg-input
         font-size: 1.5em
         padding: .5em .75em
         cursor: pointer
 
         &:hover
-            background: $bg-close-hover
+            background: $searchbox-bg-close-hover
 
         &:active
-            background: $bg-close-active
+            background: $searchbox-bg-close-active
 
     .searchbox-body
         flex-grow: 1
         overflow-y: auto
-        border-top: 1px solid $fg-border
+        border-top: 1px solid $searchbox-border
 
     .searchbox-result-section header, .searchbox-result-item
         padding: .75em 1em
 
     .searchbox-result-section
-        border-bottom: 1px solid $fg-border
+        border-bottom: 1px solid $searchbox-border
 
         header
-            color: $fg-result-header
+            color: $searchbox-fg-result-header
 
     .searchbox-result-item
         display: flex
         flex-direction: row
 
         &:not(.disabled):not(.active):not(:active):hover
-            background-color: $bg-result-item-hover
+            background-color: $searchbox-bg-result-item-hover
 
         &:active, &.active
-            color: $fg-result-item-active
-            background-color: $bg-result-item-active
+            color: $searchbox-fg-result-item-active
+            background-color: $searchbox-bg-result-item-active
 
         em
             font-style: normal
-            background: $bg-result-item-highlight
+            background: $searchbox-bg-result-item-highlight
 
     .searchbox-result-icon
         margin-right: 1em
@@ -141,14 +145,14 @@ $container-margin = 100px
         text-overflow: ellipsis
 
     .searchbox-result-title-secondary
-        color: $fg-result-item-secondary
+        color: $searchbox-fg-result-item-secondary
 
     .searchbox-result-preview
         margin-top: .25em
 
     .searchbox-result-item:not(:active):not(.active)
         .searchbox-result-preview
-            color: $fg-result-item-secondary
+            color: $searchbox-fg-result-item-secondary
 
     .searchbox-footer
         padding: .5em 1em
@@ -168,26 +172,25 @@ $container-margin = 100px
         .searchbox-pagination-link
             overflow: hidden
             padding: .5em .8em
-            color: $fg-pagination-item
-            box-shadow: $box-shadow
-            border-radius: $border-radius
-            background-color: $bg-pagination-item
+            box-shadow: $searchbox-box-shadow
+            border-radius: $searchbox-border-radius
+            background-color: $searchbox-bg-pagination-item
 
         .searchbox-pagination-item.active
             .searchbox-pagination-link
-                color: $fg-pagination-item-active
-                background-color: $bg-pagination-item-active
+                color: $searchbox-fg-pagination-item-active
+                background-color: $searchbox-bg-pagination-item-active
 
         .searchbox-pagination-item.disabled
             .searchbox-pagination-link
                 cursor: not-allowed
-                background-color: $bg-pagination-item-disabled
+                background-color: $searchbox-bg-pagination-item-disabled
 
         .searchbox-pagination-item:not(.active):not(.disabled)
             .searchbox-pagination-link:hover
-                background-color: $bg-pagination-item-hover
+                background-color: $searchbox-bg-pagination-item-hover
 
-@media screen and (max-width: 559px), screen and (max-height: 479px)
+@media screen and (max-width: $searchbox-breakpoint-width), screen and (max-height: $searchbox-breakpoint-height)
     .searchbox .searchbox-container
         top: 0
         left: 0
diff --git a/source/css/include/timeline.styl b/source/css/include/timeline.styl
new file mode 100644
index 0000000..6c4f942
--- /dev/null
+++ b/source/css/include/timeline.styl
@@ -0,0 +1,38 @@
+/* ---------------------------------
+ *          Archive Timeline
+ * --------------------------------- */
+$timeline-fg-line ?= $grey-lighter
+$timeline-bg-line ?= $card-background-color
+
+.timeline
+    margin-left: 1rem
+    padding: 1rem 0 0 1.5rem
+    border-left: 1px solid $timeline-fg-line
+
+    .media
+        position: relative
+
+        &:before, &:last-child:after
+            content: ''
+            display: block
+            position: absolute
+            left: calc(-5px - 1.5rem)
+
+        &:before
+            width: .75rem
+            height: .75rem
+            top: calc(1rem + 1.5 * .85rem / 2 - .75rem / 2)
+            background: $timeline-fg-line
+            border-radius: 50%
+
+        &:first-child:before
+            top: calc(1.5 * .85rem / 2 - .75rem / 2)
+
+        &:last-child:after
+            width: .75rem
+            top: calc(1rem + 1.5 * .85rem / 2 + .75rem / 2)
+            bottom: 0
+            background: $timeline-bg-line
+
+        &:first-child:last-child:after
+            top: calc(1.5 * .85rem / 2 + .75rem / 2)
diff --git a/source/css/plugin/back-to-top.styl b/source/css/plugin/back-to-top.styl
deleted file mode 100644
index bee9edf..0000000
--- a/source/css/plugin/back-to-top.styl
+++ /dev/null
@@ -1,12 +0,0 @@
-#back-to-top
-    position: fixed
-    padding: 8px 0
-    transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius
-    opacity: 0
-    line-height: 24px
-    outline: none
-    transform: translateY(120px)
-    &.fade-in
-        opacity: 1
-    &.rise-up
-        transform: translateY(0)
diff --git a/source/css/plugin/progressbar.styl b/source/css/plugin/progressbar.styl
deleted file mode 100644
index 1fe8b93..0000000
--- a/source/css/plugin/progressbar.styl
+++ /dev/null
@@ -1,14 +0,0 @@
-.pace
-    user-select: none
-    pointer-events: none
-    .pace-progress
-        top: 0
-        right: 100%
-        width: 100%
-        height: 2px
-        z-index: 2000
-        position: fixed
-        background: $primary
-  
-.pace-inactive
-    display: none
\ No newline at end of file
diff --git a/source/css/style.styl b/source/css/style.styl
index 64b8210..9fbc783 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,6 +1,17 @@
-@import "base"
-@import "helper"
-@import "search"
-
-@import "plugin/back-to-top"
-@import "plugin/progressbar"
\ No newline at end of file
+// Base CSS framework
+@import 'include/base'
+// Helper classes & mixins
+@import 'include/helper'
+// Icarus components
+@import 'include/button'
+@import 'include/card'
+@import 'include/article'
+@import 'include/navbar'
+@import 'include/footer'
+@import 'include/pagination'
+@import 'include/timeline'
+@import 'include/search'
+@import 'include/codeblock'
+@import 'include/donate'
+@import 'include/plugin'
+@import 'include/responsive'