diff --git a/themes/brainbaking-minimal/assets/sass/_brainbaking-intro.sass b/themes/brainbaking-minimal/assets/sass/_brainbaking-intro.sass
new file mode 100644
index 00000000..af72f38b
--- /dev/null
+++ b/themes/brainbaking-minimal/assets/sass/_brainbaking-intro.sass
@@ -0,0 +1,41 @@
+.intro 
+    transform: translateY(22vh)
+
+
+.intro > h1 
+    color: #212121
+    font-size: 12vh
+
+
+.intro > h2 
+    color: #757575
+    font-size: 3vmin
+
+
+.intro > .profile 
+    width: 10vh
+    height: 10vh
+    border-radius: 50%
+
+.avatar-container 
+  width: 100px
+  margin-left: 45px
+
+  .avatar-img-border 
+    width: 100%
+    border-radius: 50%
+    margin-left: -50%
+    display: inline-block
+    box-shadow: 0 0 8px rgba(0, 0, 0, .8)
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8)
+    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8)
+
+  .avatar-img 
+    width: 100%
+    border-radius: 50%
+    display: block
+
+.intro
+  margin-top: -150px
+  @media (min-width: 768px) 
+    margin-top: -40px
diff --git a/themes/brainbaking-minimal/assets/sass/_brainbaking.sass b/themes/brainbaking-minimal/assets/sass/_brainbaking.sass
index 61aa45c7..d06e2ef8 100644
--- a/themes/brainbaking-minimal/assets/sass/_brainbaking.sass
+++ b/themes/brainbaking-minimal/assets/sass/_brainbaking.sass
@@ -1,128 +1,30 @@
 html body
-  font-family: 'Source Serif Pro', sans-serif
+  font-family: $font-stack
+html, body
+  height: 100%
 
-.list 
-  text-align: left
-  padding-left: 4rem
+body 
+    padding-top: 55px
+    display: flex
+    text-align: center
+    flex-direction: column
+
+.copyright 
+    margin: 15px 0
+
+.navbar-icon 
+    font-size: 125%
+    display: inline-block !important
 
 
-.list h2 
-  border-top: 1px solid #eee
-  padding-top: 1rem
+.navbar.navbar-default 
+    border-top: 5px solid var(--accent)
 
 
-.list h3 
-  color: #999
+footer 
+    border-bottom: 5px solid var(--accent)
 
 
-.list-ul 
-  list-style: none
-  margin: 0
-  padding: 0
-  padding-bottom: 4rem
-
-
-@media (min-width: 768px) 
-  .list h3 
-    float: left
-    margin-top: 1.5rem
-  
-
-  .list-ul 
-    padding-left: 7rem    
-  
-
-
-.list-ul li 
-  padding: 1rem
-
-
-.list-ul .list-date 
-  font-weight: normal
-  padding-left: 0.6rem
-  padding-right: 0.6rem
-  color: white
-  background-color: var(--accent)
-  border-radius: 2rem
-  margin-top: 1.5rem
-  float: left  
-
-
-.list-ul div 
-  margin-left: 60px
-
-
-.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover 
-  background-color: white !important
-  border-color: var(--accent) !important
-
-
-/** commento specific **/
-.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
-.commento-root .commento-round-check input[type=radio]:checked+label:before 
-  background: var(--accent) !important
-  border: 1px solid var(--accent) !important
-
-
-.commento-root .commento-markdown-help tr td pre 
-  padding: 0 !important
-
-
-.commento-button 
-  color: white !important
-  background: var(--accent) !important
-
-
-.commento-google-button:before 
-   content: "\f1a0"
-   font-family: FontAwesome
-   display: inline-block
-   padding-right: 3px
-   vertical-align: middle
-
-.commento-github-button:before 
-   content: "\f09b"
-   font-family: FontAwesome
-   display: inline-block
-   padding-right: 3px
-   vertical-align: middle
-
-.commento-twitter-button:before 
-   content: "\f099"
-   font-family: FontAwesome
-   display: inline-block
-   padding-right: 3px
-   vertical-align: middle
-
-
-.commento-oauth-buttons button 
-  width: auto !important
-
-
-.commento-root a,
-.commento-email-button 
-  color: var(--accent) !important
-
-
-.commento-name 
-  font-size: 14pt !important    
-
-
-.commento-root .commento-card .commento-body p,
-.commento-root textarea 
-  font-size: 12pt !important  
-
-
-.commento-root *,
-.commento-root-font * 
-  font-family: 'Source Serif Pro', sans-serif !important
-  line-height: 1.7 !important
-  color: #333
-  text-align: left !important
-
-
-/** index.html **/
-
 ul 
   list-style: circle
 
@@ -141,91 +43,43 @@ div.highlight
   margin-top: 1.5em
   margin-bottom: 1.5em
 
-
-figure img 
-  margin-bottom: 0
-
+img 
+    max-width: 100%
 
 figure 
   margin-bottom: 1.5em !important
-
-
-figure figcaption 
-  margin-top: 1rem !important  
-
-
-figure figcaption h4, figure figcaption p 
-  text-align: center
-  margin-top: 0 !important
-  font-size: 1.7rem !important 
-  font-style: italic
-  font-weight: normal
-  color: #aaa
-
-
-.avatar-container 
-  width: 50px
-  margin-left: 45px
-
-.avatar-container  .avatar-img-border 
-  width: 100%
-  border-radius: 50%
-  margin-left: -50%
-  display: inline-block
-  box-shadow: 0 0 8px rgba(0, 0, 0, .8)
-  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8)
-  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8)
-
-.avatar-container  .avatar-img 
-  width: 100%
-  border-radius: 50%
-  display: block
-
-
-.intro .freshly-baked 
-  visibility: hidden
-
-
-.intro 
-  margin-top: -150px
-
-
-@media only screen and (min-width: 500px) 
-  .intro .freshly-baked 
-    visibility: visible
-  
-
-
-@media only screen and (min-width: 768px) 
-  .intro 
-    margin-top: -40px
-  
-
-  .avatar-container 
-    width: 100px
-  
-  
-  .avatar-container  .avatar-img-border 
-    width: 100%
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
-    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
-    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
-  
-  
-  .avatar-container  .avatar-img 
-    width: 100%
-  
+  img
+    margin-bottom: 0
+  figcaption 
+    margin-top: 1rem !important
+    h4, p 
+      text-align: center
+      margin-top: 0 !important
+      font-size: 1.7rem !important 
+      font-style: italic
+      font-weight: normal
+      color: #aaa
 
 
 /** general **/
 
-main, blockquote 
+blockquote 
   font-size: 14pt !important
   line-height: 1.7
 
 
+a:link, a:visited 
+    color: var(--accent) !important
+
+a.icon:hover 
+    text-decoration: none
+
+a:hover 
+    color: var(--accent) !important
+
+
 nav 
-  font-family: 'Open Sans', sans-serif !important
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important
   font-size: 14px !important
   line-height: 1.4 !important
 
@@ -283,24 +137,11 @@ pre
     font-size: 10pt !important
   
 
-
-/* -- voor 20'+ breedbeeldschermen */
-@media only screen and (min-width: 1600px) 
-  main 
-    max-width: 930px !important
-	
-
-  .big-img .container 
-    height: 250px !important
-  
-
-
-/* -- voor fatsoenlijke schermen */
-@media only screen and (min-width: 768px) 
-  /* indien header image, hoogte vergroten */
-  .big-img .container 
+.big-img .container 
+  @media (min-width: 768px)
     height: 200px
-  
+  @media (min-width: 1600px) 
+    height: 250px !important
 
 
 blockquote 
@@ -309,19 +150,22 @@ blockquote
 
 
 main 
-	padding-top: 0 !important
+  font-size: 14pt !important
+  line-height: 1.7
+  margin: auto
+  padding: 25px
+  flex: 1 0 auto
+  max-width: 750px
 
+  padding-top: 0 !important
+  @media (min-width: 1600px)
+    max-width: 930px !important
 
-main .text-justify p 
-  margin: 0 0 20px !important
+  .text-justify p 
+    margin: 0 0 20px !important
 
-
-main .text-justify blockquote p 
-  margin: 0 !important
-
-
-a:link, a:visited 
-    color: var(--accent) !important
+  .text-justify blockquote p 
+    margin: 0 !important
 
 
 .big-img 
@@ -335,53 +179,11 @@ a:link, a:visited
   border-bottom: 1px solid var(--accent)
 
 
+.item 
+    padding: 10px 0
+
 .item-tag 
     color: var(--accent)
-    background-color: white !important
+    background-color: white
     border: 1px solid var(--accent)
     font-size: 1.3rem
-
-
-
-/* --- goodreads widget styles --- */
-.goodreadswidget 
-  border-bottom: 3px solid var(--accent)
-  padding: 0px
-  padding-bottom: 10px
-
-
-.goodreadswidget h2 
-  visibility: hidden
-  display: none
-
-
-.goodreadswidget .gr_grid_branding 
-  padding-right: 20px
-  font-size: 14pt !important
-
-
-@media (min-width: 768px) 
-  .gr_grid_book_container 
-    height: 600px !important
-  
-
-
-.gr_grid_book_container 
-  float: left
-  width: 25%
-  height: 300px
-  padding: 5px
-  overflow: hidden
-
-
-.gr_grid_book_container img 
-  width: 100%
-  height: 100%
-
-
-.gr_grid_book_container:hover img 
-    opacity: 0.3
-
-
-.gr_grid_book_container img:hover 
-  background: rgba(100, 100, 100, 0.7)
diff --git a/themes/brainbaking-minimal/assets/sass/_commento.sass b/themes/brainbaking-minimal/assets/sass/_commento.sass
new file mode 100644
index 00000000..8f48797e
--- /dev/null
+++ b/themes/brainbaking-minimal/assets/sass/_commento.sass
@@ -0,0 +1,49 @@
+.commento-root
+  textarea
+    font-size: 12pt !important
+
+  .commento-round-check input[type=checkbox]:checked+label:before, .commento-round-check input[type=radio]:checked+label:before 
+    background: var(--accent) !important
+    border: 1px solid var(--accent) !important
+
+  .commento-markdown-help tr td pre 
+    padding: 0 !important
+
+  .commento-card
+    .commento-body
+      p
+        font-size: 12pt !important
+
+.commento-button 
+  color: white !important
+  background: var(--accent) !important
+
+.commento-google-button:before 
+  @extend %fa
+  content: "\f1a0"
+
+.commento-github-button:before 
+  @extend %fa
+  content: "\f09b"
+
+.commento-twitter-button:before 
+  @extend %fa
+  content: "\f099"
+
+.commento-oauth-buttons button 
+  width: auto !important
+
+.commento-root a,
+.commento-email-button 
+  color: var(--accent) !important
+
+.commento-name 
+  font-size: 14pt !important    
+
+.commento-root *,
+.commento-root-font * 
+  font-family: $font-stack !important
+  line-height: 1.7 !important
+  color: $grey
+  text-align: left !important
+
diff --git a/themes/brainbaking-minimal/assets/sass/_fonts.sass b/themes/brainbaking-minimal/assets/sass/_fonts.sass
index 72b797c3..3a603d6a 100644
--- a/themes/brainbaking-minimal/assets/sass/_fonts.sass
+++ b/themes/brainbaking-minimal/assets/sass/_fonts.sass
@@ -1,3 +1,11 @@
+%fa
+  font-family: FontAwesome
+  display: inline-block
+  padding-right: 3px
+  vertical-align: middle
+
+$font-stack: 'Source Serif Pro', sans-serif;
+
 /* latin-ext */
 @font-face
   font-family: 'Source Serif Pro'
diff --git a/themes/brainbaking-minimal/assets/sass/_goodreads.sass b/themes/brainbaking-minimal/assets/sass/_goodreads.sass
new file mode 100644
index 00000000..765c2957
--- /dev/null
+++ b/themes/brainbaking-minimal/assets/sass/_goodreads.sass
@@ -0,0 +1,43 @@
+
+/* --- goodreads widget styles --- */
+.goodreadswidget 
+  border-bottom: 3px solid var(--accent)
+  padding: 0px
+  padding-bottom: 10px
+
+
+.goodreadswidget h2 
+  visibility: hidden
+  display: none
+
+
+.goodreadswidget .gr_grid_branding 
+  padding-right: 20px
+  font-size: 14pt !important
+
+
+@media (min-width: 768px) 
+  .gr_grid_book_container 
+    height: 600px !important
+  
+
+
+.gr_grid_book_container 
+  float: left
+  width: 25%
+  height: 300px
+  padding: 5px
+  overflow: hidden
+
+
+.gr_grid_book_container img 
+  width: 100%
+  height: 100%
+
+
+.gr_grid_book_container:hover img 
+    opacity: 0.3
+
+
+.gr_grid_book_container img:hover 
+  background: rgba(100, 100, 100, 0.7)
diff --git a/themes/brainbaking-minimal/assets/sass/_listing.sass b/themes/brainbaking-minimal/assets/sass/_listing.sass
new file mode 100644
index 00000000..8db4919b
--- /dev/null
+++ b/themes/brainbaking-minimal/assets/sass/_listing.sass
@@ -0,0 +1,48 @@
+.list 
+  text-align: left
+  padding-left: 4rem
+
+  h2 
+    border-top: 1px solid #eee
+    padding-top: 1rem
+
+  h3 
+    color: #999
+    @media (min-width: 768px) 
+      float: left
+      margin-top: 1.5rem
+
+.list-ul 
+  list-style: none
+  margin: 0
+  padding: 0
+  padding-bottom: 4rem
+  @media (min-width: 768px) 
+    padding-left: 7rem
+  
+  li 
+    padding: 1rem
+
+  .list-date 
+    font-weight: normal
+    padding-left: 0.6rem
+    padding-right: 0.6rem
+    color: white
+    background-color: var(--accent)
+    border-radius: 2rem
+    margin-top: 1.5rem
+    float: left  
+
+  div 
+    margin-left: 60px
+
+
+.pages 
+    padding: 15px 0
+
+.pages-icon 
+    padding: 0 15px
+
+.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover 
+  background-color: white !important
+  border-color: var(--accent) !important
diff --git a/themes/brainbaking-minimal/assets/sass/_minimal.sass b/themes/brainbaking-minimal/assets/sass/_minimal.sass
deleted file mode 100644
index 4d9a5050..00000000
--- a/themes/brainbaking-minimal/assets/sass/_minimal.sass
+++ /dev/null
@@ -1,100 +0,0 @@
-html, body 
-    height: 100%
-
-
-body 
-    padding-top: 55px
-    display: flex
-    text-align: center
-    flex-direction: column
-
-
-main 
-    margin: auto
-    padding: 25px
-    flex: 1 0 auto
-    max-width: 750px
-
-
-/*footer*/
-
-.copyright 
-    margin: 15px 0
-
-
-/*home page*/
-
-.intro 
-    transform: translateY(22vh)
-
-
-.intro > h1 
-    color: #212121
-    font-size: 12vh
-
-
-.intro > h2 
-    color: #757575
-    font-size: 3vmin
-
-
-.intro > .profile 
-    width: 10vh
-    height: 10vh
-    border-radius: 50%
-
-
-/*apply accent colour to links*/
-
-a:link, a:visited 
-    color: var(--accent)
-
-
-a.icon:hover 
-    text-decoration: none
-
-
-a:hover 
-    color: var(--accent) !important
-
-
-/*paginator at bottom of list view*/
-
-.pages 
-    padding: 15px 0
-
-
-.pages-icon 
-    padding: 0 15px
-
-
-/*list item for posts and projects*/
-
-.item 
-    padding: 10px 0
-
-
-.item-tag 
-    background-color: var(--accent)
-
-
-/*navigation bar icons*/
-
-.navbar-icon 
-    font-size: 125%
-    display: inline-block !important
-
-
-/*coloured borders at top and bottom of the page*/
-
-.navbar.navbar-default 
-    border-top: var(--border-width) solid var(--accent)
-
-
-footer 
-    border-bottom: var(--border-width) solid var(--accent)
-
-
-img 
-    max-width: 100%
-
diff --git a/themes/brainbaking-minimal/assets/sass/main.sass b/themes/brainbaking-minimal/assets/sass/main.sass
index dd8a177e..05bb4709 100644
--- a/themes/brainbaking-minimal/assets/sass/main.sass
+++ b/themes/brainbaking-minimal/assets/sass/main.sass
@@ -1,3 +1,8 @@
+$grey: #333
+
 @import 'fonts'
-@import 'minimal'
 @import 'brainbaking'
+@import 'brainbaking-intro'
+@import 'listing'
+@import 'commento'
+@import 'goodreads'
diff --git a/themes/brainbaking-minimal/layouts/partials/css.html b/themes/brainbaking-minimal/layouts/partials/css.html
index 0e3cca3a..5a18192a 100644
--- a/themes/brainbaking-minimal/layouts/partials/css.html
+++ b/themes/brainbaking-minimal/layouts/partials/css.html
@@ -2,7 +2,6 @@
 
 :root {
 	--accent: {{ if .Params.accent }}{{ .Params.accent }}{{ else }}{{ .Site.Params.accent }}{{ end }};
-	--border-width: {{ if .Site.Params.showBorder | default false }} 5px {{ else }} 0 {{ end }};
 }
 
 </style>