diff --git a/source/css/cyberpunk.styl b/source/css/cyberpunk.styl
index 4ee2e19..829eb0f 100644
--- a/source/css/cyberpunk.styl
+++ b/source/css/cyberpunk.styl
@@ -26,6 +26,10 @@ $navbar-item-color ?= $black
 $navbar-item-active-color ?= $black
 $navbar-item-hover-color ?= $black
 $navbar-item-hover-background-color ?= transparent
+$navbar-item-margin-v ?= 1.25rem
+$navbar-item-margin-h ?= .25rem
+$navbar-item-padding-v ?= 0
+$navbar-item-padding-h ?= .5rem
 $menu-label-color ?= $blue
 $menu-item-hover-color ?= $black
 $menu-item-hover-background-color ?= $yellow
@@ -43,6 +47,21 @@ $searchbox-bg-result-item-hover ?= $black
 
 @import 'style'
 
+cut-corner-left(size)
+    clip-path: unquote('polygon(' + size + ' 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%, 0 ' + size + ')')
+
+cut-corner-right(size)
+    clip-path: unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '), 0 0)')
+
+cut-corner-inner(size)
+    clip-path: unquote('polygon(1px 1px, calc(100% - ' + size + ' - 1px) 1px, calc(100% - 1px) calc(1px + ' + size + '), calc(100% - 1px) calc(100% - 1px), calc(1px + ' + size + ') calc(100% - 1px), 1px calc(100% - ' + size + ' - 1px), 1px 1px)')
+
+cut-corner-inner-top-right(size)
+    clip-path: unquote('polygon(1px 1px, calc(100% - ' + size + ' - 1px) 1px, calc(100% - 1px) ' + size + ', calc(100% - 1px) calc(100% + 1px), 1px calc(100% + 1px))')
+
+cut-corner-inner-bottom-left(size)
+    clip-path: unquote('polygon(1px -1px, calc(100% - 1px) -1px, calc(100% - 1px) calc(100% - 1px), calc(1px + ' + size + ') calc(100% - 1px), 1px calc(100% - 1px - ' + size + '))')
+
 body
     counter-reset: card
 
@@ -50,6 +69,66 @@ body
     color: $black
     background: $blue
 
+.card:not(#back-to-top)
+    overflow: visible
+    counter-increment: card
+
+    &:before, &:after
+        position: absolute
+
+    &:before
+        content: ''
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        background-color: $blue
+        cut-corner-right(16px)
+
+    &:after
+        content: 'R' counter(card)
+        color: $blue
+        right: 2rem
+        bottom: -.6em
+        font-size: .75rem
+        padding: 0 .25em
+        background: $body-background-color
+
+    .card-image, .card-content
+        cut-corner-inner-top-right(16px)
+
+    .card-content
+        background-color: $body-background-color
+        cut-corner-inner(16px)
+
+    .card-image + .card-content
+        cut-corner-inner-bottom-left(16px)
+
+.button
+    border: none
+    outline: none
+    cut-corner-left(8px)
+
+    &.is-primary
+        border-radius: 0 !important
+
+.menu-list a
+    cut-corner-left(8px)
+
+.tags.has-addons
+    .tag:first-child
+        background: $yellow !important
+
+    .tag:last-child
+        background: $blue !important
+
+.pagination-previous, .pagination-next, .pagination-link
+    cut-corner-left(8px)
+    &:hover
+        background-color: $blue
+        &, a
+            color: $black
+
 .navbar-main
     padding-top: 10px
     padding-bottom: 30px
@@ -66,10 +145,29 @@ body
     .navbar-start
         .navbar-item
             &:hover, &.is-active
-                text-decoration: underline
+                color: $navbar-background-color
+                background-color: $body-background-color !important
 
-        &.is-active
-            font-weight: bold
+article.article,
+article.media
+    .title a
+        background-image: linear-gradient(transparent calc(100% - 2px), $text-strong 2px)
+        background-repeat: no-repeat
+        background-size: 0 100%
+        transition: background-size .25s ease-in-out
+
+    .title:hover a
+        background-size: 100% 100%
+
+article.article
+    .article-more
+        @extend .button.is-link
+
+.content
+    blockquote
+        background: transparent
+        border: .5px solid $blue
+        border-left: 5px solid $blue
 
 .footer
     position: relative
@@ -86,98 +184,19 @@ body
     & > .container
         padding-top: 40px
 
-.card:not(#back-to-top)
-    overflow: visible
-    box-shadow: 0 0 0 .9px $blue
-    counter-increment: card
-
-    &:before, &:after
-        content: ''
-        position: absolute
-        width: 12.5px
-        height: 21.5px
-        z-index: 10
-        background: $body-background-color
-
+.timeline .media
     &:before
-        top: -12px
-        right: -1.5px
-        border-left: 1px solid $blue
-        transform: rotate(-45deg)
-        transform-origin: right center
-
-    &:after
-        left: -1.5px
-        bottom: -12px
-        border-right: 1px solid $blue
-        transform: rotate(-45deg)
-        transform-origin: left center
-
-    .card-content
-        &:after
-            content: 'R' counter(card)
-            display: inline-block
-            position: absolute
-            color: $blue
-            right: 2rem
-            bottom: -.6em
-            font-size: .75rem
-            padding: 0 .25em
-            background: $body-background-color
-
-.button:not(.is-transparent), .pagination-link.is-current
-    border: none
-    outline: none
-
-    &.is-primary
-        border-radius: 0 !important
-
-    &.article-more
-        color: $black
-        background-color: $blue
-        margin-left: auto
-
-    &:before, &:after
-        content: ''
-        position: absolute
-        width: 0
-        z-index: 10
-
-    &:before
-        top: 0
-        left: 0
-        border-top: 8px solid $card-background-color
-        border-right: 8px solid transparent
-
-    &:after
-        right: 0
-        bottom: 0
-        border-left: 8px solid transparent
-        border-bottom: 8px solid $card-background-color
-
-.tags
-    .tag + .is-grey-lightest
-        background: $yellow
-
-article.article
-    .title a
-        background-image: linear-gradient(transparent calc(100% - 2px), $text-strong 2px)
-        background-repeat: no-repeat
-        background-size: 0 100%
-        transition: background-size .25s ease-in-out
-
-    .title:hover a
-        background-size: 100% 100%
-
-.content
-    blockquote
-        background: transparent
-        border: .5px solid $blue
-        border-left: 5px solid $blue
+        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
 
 .searchbox .searchbox-container
     border: 1px solid $blue
 
+    .searchbox-body
+        border-bottom: 1px solid $searchbox-border
+
+        li:last-child .searchbox-result-section
+            border-bottom: none
+
     .searchbox-result-item
         em
             color: $black
@@ -186,3 +205,4 @@ article.article
     color: $black
     background: $blue
     margin-top: 45px
+    cut-corner-left(8px)
diff --git a/source/css/include/navbar.styl b/source/css/include/navbar.styl
index cd87821..a11191c 100644
--- a/source/css/include/navbar.styl
+++ b/source/css/include/navbar.styl
@@ -1,6 +1,11 @@
 /* ---------------------------------
  *           Top Navigation
  * --------------------------------- */
+$navbar-item-padding-v ?= 1.25rem
+$navbar-item-padding-h ?= .75rem
+$navbar-item-margin-v ?= 0
+$navbar-item-margin-h ?= 0
+
 .navbar-main
     box-shadow: $shadow
 
@@ -26,7 +31,8 @@
     .navbar-item
         display: flex
         align-items: center
-        padding: 1.25rem .75rem
+        padding: $navbar-item-padding-v $navbar-item-padding-h
+        margin: $navbar-item-margin-v $navbar-item-margin-h
 
         &.is-active
             background-color: transparent
diff --git a/source/css/include/timeline.styl b/source/css/include/timeline.styl
index 6c4f942..1d00f94 100644
--- a/source/css/include/timeline.styl
+++ b/source/css/include/timeline.styl
@@ -16,7 +16,7 @@ $timeline-bg-line ?= $card-background-color
             content: ''
             display: block
             position: absolute
-            left: calc(-5px - 1.5rem)
+            left: calc(-.375rem - 1.5rem - .25px)
 
         &:before
             width: .75rem