diff --git a/.github/workflows/build-test-site.yaml b/.github/workflows/build-test-site.yaml
index 45a11fac..622883a5 100644
--- a/.github/workflows/build-test-site.yaml
+++ b/.github/workflows/build-test-site.yaml
@@ -36,8 +36,8 @@ jobs:
         run: rm -rf node_modules && yarn install --frozen-lockfile
         working-directory: ./wowchemy
 
-      - name: Check for JS linting errors
-        run: yarn run lint:js
+      - name: Check for linting errors
+        run: yarn run lint
         working-directory: ./wowchemy
 
 #  format:
diff --git a/wowchemy/.stylelintrc.yaml b/wowchemy/.stylelintrc.yaml
index de511230..4ff9831d 100644
--- a/wowchemy/.stylelintrc.yaml
+++ b/wowchemy/.stylelintrc.yaml
@@ -4,9 +4,9 @@ extends:
   - stylelint-config-standard
   - stylelint-config-prettier
 rules:
-  at-rule-no-unknown: null
-  scss/at-rule-no-unknown: true
-  no-descending-specificity: null
+  at-rule-no-unknown: null # Use SCSS "at" rules
+  scss/at-rule-no-unknown: true # Use SCSS "at" rules
+  no-descending-specificity: null # Todo: remove once investigated/resolved
   font-family-no-missing-generic-family-keyword:
     - true
     - ignoreFontFamilies:
diff --git a/wowchemy/assets/js/wowchemy-search.js b/wowchemy/assets/js/wowchemy-search.js
index 52b7a335..c5b07de8 100644
--- a/wowchemy/assets/js/wowchemy-search.js
+++ b/wowchemy/assets/js/wowchemy-search.js
@@ -179,7 +179,7 @@ if (typeof Fuse === 'function') {
     let fuse = new Fuse(search_index, fuseOptions);
 
     // On page load, check for search query in URL.
-    let query = getSearchQuery('q')
+    let query = getSearchQuery('q');
     if (query) {
       $('body').addClass('searching');
       $('.search-results').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 200);
diff --git a/wowchemy/assets/scss/wowchemy/_root.scss b/wowchemy/assets/scss/wowchemy/_base.scss
similarity index 52%
rename from wowchemy/assets/scss/wowchemy/_root.scss
rename to wowchemy/assets/scss/wowchemy/_base.scss
index ce5579e9..a613de39 100644
--- a/wowchemy/assets/scss/wowchemy/_root.scss
+++ b/wowchemy/assets/scss/wowchemy/_base.scss
@@ -338,282 +338,3 @@ small,
 .responsive-wrap iframe {
   max-width: 100%;
 }
-
-/*************************************************
- *  Modals.
- **************************************************/
-
-.modal-content {
-  background: $sta-background;
-}
-
-.dark .modal-content {
-  background: $sta-dark-background;
-}
-
-.modal-title {
-  margin: 0; /* Override default h5 margin. */
-}
-
-.modal-content pre {
-  margin: 0;
-}
-
-.modal-header {
-  border: 0;
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.modal-footer {
-  border: 0;
-}
-
-#modal-error {
-  color: red;
-}
-
-/*************************************************
- *  Gallery.
- **************************************************/
-
-.gallery {
-  margin: 0.5em -4px 1.5em -4px;
-  font-size: 0;
-}
-
-.gallery img {
-  // Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
-  min-height: 48px;
-  min-width: 48px;
-}
-
-a[data-fancybox] {
-  text-decoration: none;
-  cursor: zoom-in;
-}
-
-.gallery a[data-fancybox] img {
-  height: 250px;
-  width: auto;
-  max-width: inherit;
-  display: inherit;
-  margin: 0;
-  padding: 4px;
-  box-shadow: none;
-  vertical-align: inherit;
-}
-
-.fancybox-caption {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  text-align: center;
-}
-
-/*************************************************
- *  Pager.
- **************************************************/
-
-.post-nav {
-  margin-top: 1rem;
-  font-size: 0.8rem;
-}
-
-.post-nav-item {
-  hyphens: auto;
-  word-wrap: break-word;
-  padding: 11px 0 12px;
-  width: 100%;
-}
-
-.post-nav-item a {
-  color: #2b2b2b;
-  line-height: 1.7;
-  text-transform: none;
-}
-
-.post-nav-item .meta-nav {
-  color: #767676;
-  font-weight: 900;
-  line-height: 2;
-  text-transform: uppercase;
-}
-
-.dark .post-nav-item a {
-  color: #ddd;
-}
-
-/**************************************************
- *  Tags/Labels
- **************************************************/
-
-.badge-light {
-  border: none;
-  color: rgba(0, 0, 0, 0.68);
-  background: rgba(0, 0, 0, 0.05);
-  font-weight: normal;
-  border-radius: 3px;
-  padding: 5px 10px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-
-.article-tags > .badge-light:last-child {
-  margin-right: 0;
-}
-
-.badge-light[href]:focus,
-.badge-light[href]:hover {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-a.badge:focus,
-a.badge:hover {
-  color: rgba(0, 0, 0, 0.68);
-}
-
-.tag-cloud a {
-  display: inline-block;
-  position: relative;
-  margin: 8px 10px;
-  word-wrap: break-word;
-  transition-duration: 0.2s;
-  transition-property: transform;
-  transition-timing-function: ease-out;
-}
-
-.tag-cloud a:active,
-.tag-cloud a:focus,
-.tag-cloud a:hover {
-  color: $sta-primary-dark;
-  transform: scale(1.2);
-}
-
-.dark .tag-cloud a:active,
-.dark .tag-cloud a:focus,
-.dark .tag-cloud a:hover {
-  color: $sta-primary-light;
-}
-
-/*************************************************
- *  Button size override
- *************************************************/
-
-.btn {
-  padding: 0.5rem;
-  font-size: 0.8rem;
-  line-height: 0.9; // Anything less and multiline button text may overlap.
-  border-radius: 0.3rem;
-}
-
-.btn-links .btn {
-  padding: 5px 0.5rem 5px 0.5rem;
-  line-height: 1;
-}
-
-.btn.btn-sm {
-  padding: 5px 0.4rem 5px 0.4rem;
-  font-size: 14px;
-  border-radius: 0.2rem;
-}
-
-.btn-page-header {
-  // Satisfy Lighthouse tap targets criteria.
-  margin: 8px 8px 8px 0;
-}
-
-/*************************************************
- *  Toolbar Buttons
- **************************************************/
-
-.btn-toolbar .btn {
-  font-size: 0.9rem;
-  padding: 10px 14px 9px;
-  border: none;
-}
-
-.btn-toolbar .btn:first-child {
-  border-radius: 6px 0 0 6px;
-}
-
-.btn-toolbar .btn:last-child {
-  border-radius: 0 6px 6px 0;
-}
-
-.btn-toolbar .btn.btn-primary:hover,
-.btn-toolbar .btn.btn-primary:focus {
-  background-color: $sta-primary-light !important;
-}
-
-.btn-toolbar .btn.btn-primary:active,
-.btn-toolbar .btn.btn-primary.active {
-  background-color: $sta-primary-dark !important;
-}
-
-.btn-primary:not(:disabled):not(.disabled).active:focus,
-.btn-primary:not(:disabled):not(.disabled):active:focus,
-.show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem $sta-primary-light;
-}
-
-/*************************************************
- *  Tables
- **************************************************/
-
-/* Based on Bootstrap's `table-responsive` style. */
-table {
-  display: block;
-  width: 100%;
-  overflow-x: scroll;
-  margin-bottom: 1rem;
-  font-size: 0.8rem;
-  // Override `article-style`'s `break-word` wrapping to make wide tables scrollable.
-  overflow-wrap: normal;
-  word-wrap: normal;
-  word-break: normal;
-}
-
-table > thead > tr > th,
-table > tbody > tr > th,
-table > tfoot > tr > th,
-table > thead > tr > td,
-table > tbody > tr > td,
-table > tfoot > tr > td {
-  padding: 8px;
-  line-height: 1.43;
-  vertical-align: top;
-  border-top: 1px solid #ddd;
-}
-
-table > thead > tr > th {
-  vertical-align: bottom;
-  border-bottom: 2px solid #ddd;
-}
-
-table > caption + thead > tr:first-child > th,
-table > colgroup + thead > tr:first-child > th,
-table > thead:first-child > tr:first-child > th,
-table > caption + thead > tr:first-child > td,
-table > colgroup + thead > tr:first-child > td,
-table > thead:first-child > tr:first-child > td {
-  border-top: 0;
-}
-
-table > tbody + tbody {
-  border-top: 2px solid #ddd;
-}
-
-table table {
-  background-color: #fff;
-}
-
-/* Table Striped */
-table > tbody > tr:nth-child(odd) > td,
-table > tbody > tr:nth-child(odd) > th {
-  background-color: #f9f9f9;
-}
-
-/* Table Hover */
-table > tbody > tr:hover > td,
-table > tbody > tr:hover > th {
-  background-color: #e5e5e5;
-}
diff --git a/wowchemy/assets/scss/wowchemy/_dark.scss b/wowchemy/assets/scss/wowchemy/_dark.scss
index a457cc06..7c4ba5c1 100644
--- a/wowchemy/assets/scss/wowchemy/_dark.scss
+++ b/wowchemy/assets/scss/wowchemy/_dark.scss
@@ -2,25 +2,37 @@
  *  Dark themed components
  **************************************************/
 
+.dark .article-title a {
+  color: #fff;
+}
+
+.dark .pagination li > a,
+.pagination li > span {
+  background-color: rgb(40, 42, 54);
+  border: 1px solid #ddd;
+}
+
 body.dark,
 .dark .docs-toc-link,
-.dark .docs-sidebar .nav > li:not(.active) > a,
 .dark .modal button.close,
-.dark input,
-.dark .form-control,
-.dark .form-control:focus {
+.dark input {
   color: rgb(248, 248, 242);
   background: $sta-dark-background;
 }
 
 .dark .form-control {
+  color: rgb(248, 248, 242);
   background-color: rgb(68, 71, 90);
-}
 
-.dark .form-control:focus {
-  background-color: rgb(68, 71, 90);
-  border-color: $sta-primary;
-  box-shadow: 0 0 0 0.2rem $sta-primary-dark;
+  &::placeholder {
+    color: #fff;
+    opacity: 1;
+  }
+  &:focus {
+    background-color: rgb(68, 71, 90);
+    border-color: $sta-primary;
+    box-shadow: 0 0 0 0.2rem $sta-primary-dark;
+  }
 }
 
 .dark h1,
@@ -67,10 +79,6 @@ body.dark,
   background-color: rgb(60, 62, 74);
 }
 
-.dark .article-title a {
-  color: #fff;
-}
-
 .dark .portrait-title h2 {
   color: #fff;
 }
@@ -91,12 +99,6 @@ body.dark,
   color: rgba(255, 255, 255, 0.54);
 }
 
-.dark .pagination li > a,
-.pagination li > span {
-  background-color: rgb(40, 42, 54);
-  border: 1px solid #ddd;
-}
-
 .dark .card {
   background: #343a40;
 }
@@ -138,3 +140,8 @@ body.dark,
 .dark .btn.btn-primary.active {
   color: initial;
 }
+
+.dark .docs-sidebar .nav > li:not(.active) > a {
+  color: rgb(248, 248, 242);
+  background: $sta-dark-background;
+}
diff --git a/wowchemy/assets/scss/wowchemy/_widgets.scss b/wowchemy/assets/scss/wowchemy/_widgets.scss
deleted file mode 100644
index 16765084..00000000
--- a/wowchemy/assets/scss/wowchemy/_widgets.scss
+++ /dev/null
@@ -1,633 +0,0 @@
-/*************************************************
- *  Page Builder: sections and widgets
- **************************************************/
-
-.home-section {
-  // Use `background` rather than `background-color` so it can support gradients in theme packs.
-  background: $sta-home-section-odd;
-  position: relative; // Required for component positioning within section.
-  padding: 110px 0 110px 0;
-  z-index: 0; // Explicit z-order otherwise `.home-section-bg` can be hidden by any `.home-section` background.
-}
-
-// Responsive fullscreen option for widgets
-.home-section.fullscreen {
-  min-height: calc(100vh - 70px);
-}
-@include media-breakpoint-down(md) {
-  .home-section.fullscreen {
-    min-height: calc(100vh - 50px);
-  }
-}
-.no-navbar .home-section.fullscreen {
-  min-height: 100vh;
-}
-
-// Section theming
-
-.home-section.light,
-.home-section.light h1 {
-  color: #000;
-}
-
-.home-section.light a {
-  color: $sta-link;
-}
-
-.home-section.dark a {
-  color: $sta-dark-link;
-}
-
-/* Override dark colors that may be inherited from body.dark */
-.home-section.dark,
-.home-section.dark h1,
-.home-section.dark h2,
-.home-section.dark h3,
-.home-section.dark a:not(.btn) {
-  color: #fff;
-}
-
-/* Underline links in dark sections to separate them from text */
-.home-section.dark a:not(.btn):not(.hero-cta-alt) {
-  text-decoration: underline;
-}
-
-/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */
-.home-section.dark .alert a {
-  color: inherit !important;
-  text-decoration: inherit !important;
-}
-
-/* Big underline style for links in dark sections */
-
-/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */
-
-/*
-.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) {
-  text-decoration: none;
-  position: relative;
-}
-.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a):after {
-  background: #fff;
-  content: "";
-  height: 2px;
-  left: 0;
-  right: 0;
-  position: absolute;
-  top: 100%;
-} */
-
-// Fill padding of `.home-section` parent
-.home-section-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%; // Or fill-available when supported.
-  width: 100%; // Or fill-available when supported.
-  z-index: -1; // Place bg div behind content.
-}
-
-/* Default background image properties for home sections. */
-.home-section-bg.bg-image {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-/* Create a parallax-like scrolling effect on desktop browsers. */
-.parallax {
-  background-attachment: fixed;
-}
-// Workaround issue with mobile browser support for fixed parallax background.
-@include media-breakpoint-down(md) {
-  .parallax {
-    background-attachment: scroll;
-  }
-}
-
-.home-section:first-of-type {
-  padding-top: 50px;
-}
-
-.home-section:nth-of-type(even) {
-  background: $sta-home-section-even;
-}
-
-.dark .home-section {
-  background: $sta-dark-home-section-odd;
-}
-
-.dark .home-section:nth-of-type(even) {
-  background: $sta-dark-home-section-even;
-}
-
-@media screen and (max-width: 768px) {
-  .home-section {
-    padding: 60px 0 60px 0;
-  }
-  .home-section:first-of-type {
-    padding-top: 40px;
-  }
-}
-
-.section-heading h1 {
-  margin: 0 0 10px 0;
-}
-
-.section-subheading {
-  font-size: 1.25rem;
-  font-family: $sta-font-heading, sans-serif;
-  font-weight: bold;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.section-heading p {
-  font-weight: 400;
-  font-size: 1.1rem;
-  color: rgba(0, 0, 0, 0.54); // Accessible contrast, matching footer text color.
-}
-
-.dark .section-heading p {
-  color: rgb(158, 158, 158);
-}
-
-/*************************************************
- *  Widgets (common)
- **************************************************/
-
-.see-all {
-  margin-top: 2rem;
-  text-transform: uppercase;
-}
-
-/* Reset code highlighting style in Alerts when Alert is child of a `.dark` widget, but Alert should be light.` */
-
-/* But will this affect page which should have dark Alert? */
-.dark .alert pre,
-.dark .alert code {
-  color: initial;
-  background-color: initial;
-}
-
-/*************************************************
- *  Hero Widget
- **************************************************/
-
-.wg-hero {
-  padding: 3em 0; // More compact top and bottom padding for Hero.
-}
-
-.hero-title {
-  font-size: 2.7rem;
-  margin-top: 0;
-  line-height: 1;
-}
-
-.hero-lead {
-  max-width: 768px;
-  font-size: 1.35rem;
-}
-
-.wg-hero.dark .hero-title,
-.wg-hero.dark .hero-lead,
-.wg-hero.dark .hero-cta-alt,
-.wg-hero.dark .hero-note > * {
-  color: #fff;
-
-  /* text-shadow: 1px 1px 4px rgba(0,0,0,0.5); */
-
- /* Uncomment to standout on complicated backgrounds. */
-}
-
-.wg-hero.dark a:not(.wg-hero .btn) {
-  color: #fff;
-}
-
-.wg-hero .hero-lead a {
-  text-decoration: underline;
-}
-
-.wg-hero .cta-btns {
-  margin-bottom: 16px;
-}
-
-.wg-hero .btn {
-  padding: 0.6em 2.1em;
-}
-
-.wg-hero.dark .btn {
-  color: $sta-primary-dark;
-}
-
-a.hero-cta-alt {
-  display: inline-block;
-  position: relative;
-  transition-duration: 0.2s;
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  font-size: 1.1rem;
-}
-
-a.hero-cta-alt:active,
-a.hero-cta-alt:focus,
-a.hero-cta-alt:hover {
-  transform: scale(1.1);
-}
-
-.wg-hero .btn-lg {
-  font-size: 1.1rem;
-}
-
-.wg-hero .hero-note {
-  font-size: 0.8rem;
-}
-
-.hero-media {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  text-align: center;
-}
-
-/*************************************************
- *  Slider Widget
- **************************************************/
-
-/* Clear `.home-section` as any padding or animation interferes with Slider's layout and animations. */
-.home-section.wg-slider {
-  padding: 0;
-  animation: none;
-  animation-delay: unset;
-}
-
-/* The Slider widget reuses the Hero widget's `.wg-hero` class.
- * We must remove any `animation` and `clear` (although Hero no longer sets `clear: both`) in this instance or
- * multiple slides can be `.active` at once. */
-.carousel-inner .wg-hero {
-  animation: none;
-  clear: none;
-}
-
-/*************************************************
- *  Featurette Widget
- **************************************************/
-
-.featurette {
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: #555;
-  text-align: center;
-}
-
-.featurette .section-subheading {
-  margin-top: 0;
-  margin-bottom: 5px;
-  font-weight: 400;
-  color: #333;
-}
-
-.dark .featurette,
-.dark .featurette .section-subheading {
-  color: #fff;
-}
-
-.featurette-icon {
-  display: block;
-  width: 100%;
-  color: $sta-primary;
-  font-size: 3rem;
-  text-align: center;
-}
-
-/*************************************************
- *  About widget
- **************************************************/
-
-#profile {
-  text-align: center;
-  padding: 30px 10px;
-  position: relative;
-}
-
-.avatar {
-  width: 270px;
-  height: 270px;
-  margin: 0 auto;
-  object-fit: cover;
-}
-
-// Use smaller avatar size in About widget on small devices.
-@include media-breakpoint-down(sm) {
-  .wg-about .avatar {
-    width: 200px;
-    height: 200px;
-  }
-}
-
-.avatar-circle {
-  border-radius: 50%;
-}
-
-.avatar-square {
-  border-radius: 3px;
-}
-
-.portrait-title h2 {
-  font-size: 1.75em;
-  font-weight: 300;
-  color: #000;
-  margin: 20px 0 10px 0;
-}
-
-.portrait-title h3 {
-  font-size: 1rem;
-  font-weight: 300;
-  color: rgba(0, 0, 0, 0.54);
-  margin: 0 0 10px 0;
-}
-
-ul.network-icon {
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-#profile .network-icon {
-  margin-top: 30px;
-}
-
-.network-icon li {
-  margin-right: 10px;
-}
-
-.network-icon li:last-of-type {
-  margin-right: 0;
-}
-
-.network-icon li:hover {
-  transform: scale(1.2);
-}
-
-.big-icon {
-  font-size: 2rem;
-}
-
-ul.ul-interests li {
-  font-size: 0.9rem;
-}
-
-ul.ul-edu {
-  list-style: none;
-}
-
-ul.ul-edu li {
-  position: relative;
-  padding: 0 15px 4px 3px;
-}
-
-ul.ul-edu li .description p {
-  margin: 0;
-}
-
-ul.ul-edu li .description p.course {
-  font-size: 0.9rem;
-}
-
-ul.ul-edu li .description p.institution {
-  font-size: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-/*************************************************
- * Experience
- **************************************************/
-
-.exp-title {
-  text-transform: none !important;
-}
-
-.exp-company {
-  font-weight: normal !important;
-  text-transform: none !important;
-}
-
-.exp-meta {
-  font-size: 0.8rem;
-}
-
-.experience .card-text,
-.experience .card-text p {
-  color: #000 !important;
-  font-size: 0.75rem !important;
-}
-
-.dark .experience .text-muted {
-  color: rgba(255, 255, 255, 0.8) !important;
-}
-
-.dark .experience .card-text,
-.dark .experience .card-text p {
-  color: rgb(248, 248, 242) !important;
-}
-
-// For a UL after P, remove the spacing between (P margin-bottom) without affecting any nested lists.
-.card .card-text p + ul {
-  margin-top: -1rem;
-  margin-bottom: 0;
-}
-
-.experience .m-2 .border,
-.experience .col.border-right {
-  border-color: $sta-primary !important;
-}
-
-.experience .m-2 .border.exp-fill {
-  background-color: $sta-primary !important;
-}
-
-/*************************************************
- * Talks
- **************************************************/
-
-.talk-metadata {
-  color: #4b4f56;
-  font-size: 0.8rem;
-}
-
-/*************************************************
- *  Projects
- **************************************************/
-
-.project-widget-simple li {
-  margin-bottom: 1rem;
-}
-
-.project-widget-simple li:last-of-type {
-  margin-bottom: 0;
-}
-
-.project-widget-simple .project-title {
-  margin-bottom: 6px;
-}
-
-.project-widget-simple .project-summary {
-  font-size: 0.9rem;
-  margin-bottom: 0.4rem;
-}
-
-.projects-container {
-  display: block;
-  position: relative;
-
-  /* margin-top: 5rem; */
-  overflow: hidden;
-}
-
-.project-toolbar {
-  margin-bottom: 2rem;
-}
-
-.project-card {
-  position: relative;
-  width: calc(
-    33.3% - 13.3px
-  ); /* Fluid 3 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
-}
-@media screen and (max-width: 1199px) {
-  .project-card {
-    width: calc(
-      50% - 10px
-    ); /* Fluid 2 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
-  }
-}
-@media screen and (max-width: 768px) {
-  .project-card {
-    width: 100%; /* 1 column */
-  }
-}
-
-.project-item {
-  margin-bottom: 1.5rem;
-}
-
-.project-card.project-item {
-  margin: 0 0 20px 0; /* Set to Isotope's gutter size */
-}
-
-.project-card .card {
-  margin: 0; /* Remove default card margin and use Isotope gutter */
-}
-
-.project-showcase .project-item {
-  margin-bottom: 3rem;
-}
-
-.project-item:last-of-type {
-  margin-bottom: 0;
-}
-
-.isotope-item {
-  z-index: 2;
-}
-
-.isotope-item:hover {
-  z-index: 3;
-}
-
-/*************************************************
- *  Accomplishments
- **************************************************/
-
-.card.course {
-  margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */
-}
-
-.card.course:last-of-type {
-  margin-bottom: 0;
-}
-
-.course .card-subtitle a {
-  border-bottom: solid 1px transparent;
-}
-
-.course .card-subtitle a:hover {
-  border-bottom: solid 1px;
-  text-decoration: none;
-}
-
-/*************************************************
- *  People widget
- **************************************************/
-
-.people-widget {
-  font-size: 0.8rem;
-  text-align: center;
-}
-
-.people-widget .portrait-title h2 {
-  font-size: 1rem;
-}
-
-.people-widget .portrait-title h3 {
-  font-size: 0.7rem;
-}
-
-.people-widget .avatar {
-  width: 80%;
-  max-width: 150px;
-  height: auto;
-}
-
-@media (min-width: 576px) {
-  .people-widget .col-sm-auto {
-    width: 30%;
-  }
-}
-@media (min-width: 992px) {
-  .people-widget .col-sm-auto {
-    width: 20%;
-  }
-}
-
-/*************************************************
- *  Contact
- **************************************************/
-
-.wg-contact .fa-ul {
-  margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
-}
-
-.wg-contact .fa-li {
-  position: absolute;
-  left: -3.14285714rem; /* Negative of `.wg-contact .fa-ul` margin. */
-  width: 2rem; /* Match `fa-2x` icon size. */
-  top: 0.14285714em; /* Default FA value. */
-  text-align: center;
-}
-
-.wg-contact li {
-  padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
-  margin-bottom: 0.3rem;
-}
-
-.wg-contact li:last-of-type {
-  margin-bottom: 0;
-}
-
-#map {
-  height: 350px;
-  width: 100%;
-}
-
-// Prevent OpenStreetMap inheriting link color from section of a different theme variation.
-// E.g. Light colored OpenStreetMap UI inheriting dark themed link (`.home-section.dark a`)
-// from a dark widget page section.
-#map a {
-  color: initial;
-}
diff --git a/wowchemy/assets/scss/wowchemy/components/_all.scss b/wowchemy/assets/scss/wowchemy/components/_all.scss
new file mode 100644
index 00000000..8085cd7b
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/components/_all.scss
@@ -0,0 +1,10 @@
+/* Wowchemy Components */
+
+@import 'author-card';
+@import 'breadcrumb';
+@import 'card';
+@import 'modal';
+@import 'nav';
+@import 'pagination';
+@import 'sharing';
+@import 'shortcode';
diff --git a/wowchemy/assets/scss/wowchemy/components/_author-card.scss b/wowchemy/assets/scss/wowchemy/components/_author-card.scss
new file mode 100644
index 00000000..b9415ab2
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/components/_author-card.scss
@@ -0,0 +1,49 @@
+/*************************************************
+ *  Author profile card
+ **************************************************/
+
+.author-card .avatar {
+  width: 60px;
+  height: 60px;
+}
+
+.author-card .card-title {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.84);
+}
+
+.author-card .card-title a {
+  color: rgba(0, 0, 0, 0.84);
+}
+
+.dark .author-card .card-title,
+.dark .author-card .card-title a {
+  color: rgba(255, 255, 255, 0.84);
+}
+
+.author-card p {
+  margin-bottom: 5px;
+}
+
+.author-card .card-subtitle {
+  font-weight: 300;
+  font-size: 0.8rem;
+  color: rgba(0, 0, 0, 0.54);
+  margin-bottom: 7px;
+}
+
+.dark .author-card .card-subtitle {
+  color: rgba(255, 255, 255, 0.54);
+}
+
+.author-card .card-text {
+  color: rgba(0, 0, 0, 0.76);
+  font-size: 0.8rem;
+  margin-bottom: 4px;
+}
+
+.dark .author-card .card-text {
+  color: rgba(255, 255, 255, 0.76);
+}
diff --git a/wowchemy/assets/scss/wowchemy/_breadcrumb.scss b/wowchemy/assets/scss/wowchemy/components/_breadcrumb.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_breadcrumb.scss
rename to wowchemy/assets/scss/wowchemy/components/_breadcrumb.scss
diff --git a/wowchemy/assets/scss/wowchemy/_card.scss b/wowchemy/assets/scss/wowchemy/components/_card.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_card.scss
rename to wowchemy/assets/scss/wowchemy/components/_card.scss
diff --git a/wowchemy/assets/scss/wowchemy/components/_modal.scss b/wowchemy/assets/scss/wowchemy/components/_modal.scss
new file mode 100644
index 00000000..83612cb1
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/components/_modal.scss
@@ -0,0 +1,32 @@
+/*************************************************
+ *  Modals.
+ **************************************************/
+
+.modal-content {
+  background: $sta-background;
+}
+
+.dark .modal-content {
+  background: $sta-dark-background;
+}
+
+.modal-title {
+  margin: 0; /* Override default h5 margin. */
+}
+
+.modal-content pre {
+  margin: 0;
+}
+
+.modal-header {
+  border: 0;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.modal-footer {
+  border: 0;
+}
+
+#modal-error {
+  color: red;
+}
diff --git a/wowchemy/assets/scss/wowchemy/_nav.scss b/wowchemy/assets/scss/wowchemy/components/_nav.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_nav.scss
rename to wowchemy/assets/scss/wowchemy/components/_nav.scss
index 2619cd9c..a85f7552 100644
--- a/wowchemy/assets/scss/wowchemy/_nav.scss
+++ b/wowchemy/assets/scss/wowchemy/components/_nav.scss
@@ -2,6 +2,12 @@
  *  Navigation bar
  **************************************************/
 
+.dropdown-menu {
+  background-color: $sta-menu-primary !important;
+  color: $sta-menu-text !important;
+  z-index: 1032; // I18n dropdown over mobile expanded menu.
+}
+
 .navbar {
   height: 70px;
   background: $sta-menu-primary;
@@ -233,12 +239,6 @@ ul.nav-icons li.nav-item a.nav-link {
   padding: 0;
 }
 
-.dropdown-menu {
-  background-color: $sta-menu-primary !important;
-  color: $sta-menu-text !important;
-  z-index: 1032; // I18n dropdown over mobile expanded menu.
-}
-
 .dark .dropdown-menu {
   background-color: $sta-dark-menu-primary !important;
   color: $sta-dark-menu-text !important;
diff --git a/wowchemy/assets/scss/wowchemy/components/_pagination.scss b/wowchemy/assets/scss/wowchemy/components/_pagination.scss
new file mode 100644
index 00000000..427b6389
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/components/_pagination.scss
@@ -0,0 +1,32 @@
+/*************************************************
+ *  Pager.
+ **************************************************/
+
+.post-nav {
+  margin-top: 1rem;
+  font-size: 0.8rem;
+}
+
+.post-nav-item {
+  hyphens: auto;
+  word-wrap: break-word;
+  padding: 11px 0 12px;
+  width: 100%;
+}
+
+.post-nav-item a {
+  color: #2b2b2b;
+  line-height: 1.7;
+  text-transform: none;
+}
+
+.post-nav-item .meta-nav {
+  color: #767676;
+  font-weight: 900;
+  line-height: 2;
+  text-transform: uppercase;
+}
+
+.dark .post-nav-item a {
+  color: #ddd;
+}
diff --git a/wowchemy/assets/scss/wowchemy/components/_sharing.scss b/wowchemy/assets/scss/wowchemy/components/_sharing.scss
new file mode 100644
index 00000000..e14e9096
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/components/_sharing.scss
@@ -0,0 +1,50 @@
+/*************************************************
+ *  Sharing
+ **************************************************/
+
+.share-box {
+  margin-top: 0.7rem;
+}
+
+ul.share {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+ul.share li {
+  display: inline-flex;
+  margin-right: 8px;
+}
+
+ul.share li:last-of-type {
+  margin-right: 0;
+}
+
+ul.share li i {
+  display: block;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 22px;
+  text-align: center;
+  transition: all 150ms ease-in-out;
+}
+
+ul.share li a {
+  text-decoration: none !important;
+  color: rgba(0, 0, 0, 0.84);
+}
+
+.dark ul.share li a {
+  color: rgba(255, 255, 255, 0.84);
+}
+
+ul.share li:hover i {
+  transform: scale(1.2);
+}
diff --git a/wowchemy/assets/scss/wowchemy/_shortcodes.scss b/wowchemy/assets/scss/wowchemy/components/_shortcode.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_shortcodes.scss
rename to wowchemy/assets/scss/wowchemy/components/_shortcode.scss
diff --git a/wowchemy/assets/scss/wowchemy/elements/_all.scss b/wowchemy/assets/scss/wowchemy/elements/_all.scss
new file mode 100644
index 00000000..8fa64378
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/elements/_all.scss
@@ -0,0 +1,9 @@
+/* Wowchemy Elements */
+
+@import 'button';
+@import 'callout';
+@import 'content';
+@import 'icon';
+@import 'media';
+@import 'table';
+@import 'tag';
diff --git a/wowchemy/assets/scss/wowchemy/elements/_button.scss b/wowchemy/assets/scss/wowchemy/elements/_button.scss
new file mode 100644
index 00000000..d2a4842b
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/elements/_button.scss
@@ -0,0 +1,60 @@
+/*************************************************
+ *  Button size override
+ *************************************************/
+
+.btn {
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 0.9; // Anything less and multiline button text may overlap.
+  border-radius: 0.3rem;
+}
+
+.btn-links .btn {
+  padding: 5px 0.5rem 5px 0.5rem;
+  line-height: 1;
+}
+
+.btn.btn-sm {
+  padding: 5px 0.4rem 5px 0.4rem;
+  font-size: 14px;
+  border-radius: 0.2rem;
+}
+
+.btn-page-header {
+  // Satisfy Lighthouse tap targets criteria.
+  margin: 8px 8px 8px 0;
+}
+
+/*************************************************
+ *  Toolbar Buttons
+ **************************************************/
+
+.btn-toolbar .btn {
+  font-size: 0.9rem;
+  padding: 10px 14px 9px;
+  border: none;
+}
+
+.btn-toolbar .btn:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.btn-toolbar .btn:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+.btn-toolbar .btn.btn-primary:hover,
+.btn-toolbar .btn.btn-primary:focus {
+  background-color: $sta-primary-light !important;
+}
+
+.btn-toolbar .btn.btn-primary:active,
+.btn-toolbar .btn.btn-primary.active {
+  background-color: $sta-primary-dark !important;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem $sta-primary-light;
+}
diff --git a/wowchemy/assets/scss/wowchemy/_callouts.scss b/wowchemy/assets/scss/wowchemy/elements/_callout.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_callouts.scss
rename to wowchemy/assets/scss/wowchemy/elements/_callout.scss
diff --git a/wowchemy/assets/scss/wowchemy/_content.scss b/wowchemy/assets/scss/wowchemy/elements/_content.scss
similarity index 51%
rename from wowchemy/assets/scss/wowchemy/_content.scss
rename to wowchemy/assets/scss/wowchemy/elements/_content.scss
index ae633384..ba275661 100644
--- a/wowchemy/assets/scss/wowchemy/_content.scss
+++ b/wowchemy/assets/scss/wowchemy/elements/_content.scss
@@ -79,12 +79,71 @@
   color: rgba(255, 255, 255, 0.54) !important;
 }
 
+.article-style {
+  // Any unresponsive embeds, e.g. Plotly, should be wrapped to handle on a case-by-case basis.
+  // If any unresponsive embeds still remain in the article, prevent article overflow and DIV scrolling.
+  // Note that lazy-loaded images, e.g. Gallery, may cause scrollable Y-overflow if only X-overflow is hidden pre-load.
+  overflow: hidden;
+
+  // Word wrap text content.
+  @include word-wrap();
+
+  // Underline links if they are a similar color to the body text.
+  a {
+    text-decoration: $sta-link-decoration;
+  }
+
+  img,
+  video {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    padding: 0;
+  }
+
+  td img,
+  td video {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  figure {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  figure img {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
 .article-metadata {
   margin-bottom: 15px;
   overflow: hidden;
   font-size: 14px;
   letter-spacing: 0.03em;
   color: rgba(0, 0, 0, 0.54);
+
+  a {
+    color: rgba(0, 0, 0, 0.54);
+  }
+  a:hover {
+    color: $sta-primary;
+  }
+  .author-notes {
+    cursor: help;
+    padding-left: 3px;
+  }
+  .author-highlighted {
+    font-weight: bold;
+  }
+}
+
+/* For article page only, not lists. */
+article .article-metadata {
+  margin-bottom: 20px;
 }
 
 .dark .article-metadata {
@@ -95,32 +154,6 @@
   margin-bottom: 5px;
 }
 
-/* For article page only, not lists. */
-article .article-metadata {
-  margin-bottom: 20px;
-}
-
-.article-metadata a {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.dark .article-metadata a {
-  color: rgba(255, 255, 255, 0.54);
-}
-
-.article-metadata a:hover {
-  color: $sta-primary;
-}
-
-.article-metadata .author-notes {
-  cursor: help;
-  padding-left: 3px;
-}
-
-.article-metadata .author-highlighted {
-  font-weight: bold;
-}
-
 .article-categories {
   white-space: nowrap; /* Keep category icon on same line as category links, otherwise context lost. */
 }
@@ -135,95 +168,6 @@ article .article-metadata {
   content: '\00B7';
 }
 
-@mixin word-wrap() {
-  // Break very long words such as pasted URL strings.
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  //-ms-word-break: break-all;
-  //word-break: break-all;
-  word-break: break-word;
-
-  // Add a hyphen where the word breaks, if supported (No Blink).
-  //-ms-hyphens: auto;
-  //-moz-hyphens: auto;
-  //-webkit-hyphens: auto;
-  //hyphens: auto;
-}
-
-.article-style {
-  // Any unresponsive embeds, e.g. Plotly, should be wrapped to handle on a case-by-case basis.
-  // If any unresponsive embeds still remain in the article, prevent article overflow and DIV scrolling.
-  // Note that lazy-loaded images, e.g. Gallery, may cause scrollable Y-overflow if only X-overflow is hidden pre-load.
-  overflow: hidden;
-
-  // Word wrap text content.
-  @include word-wrap();
-}
-
-// Underline links if they are a similar color to the body text.
-.article-style a {
-  text-decoration: $sta-link-decoration;
-}
-
-.article-style img,
-.article-style video {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  padding: 0;
-}
-
-.article-style td img,
-.article-style td video {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.article-style figure {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.article-style figure img {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/*************************************************
- *  Publications
- **************************************************/
-
-.pub-banner {
-  max-width: 100%;
-  height: auto;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.pub-row-heading {
-  font-weight: bold;
-}
-
-#container-publications {
-  display: block;
-  position: relative;
-  overflow: hidden;
-}
-
-.li-cite-author {
-  font-size: 1em;
-  color: inherit;
-}
-
-.li-cite-author a {
-  color: inherit;
-}
-
-.dark .li-cite-author a {
-  color: rgb(248, 248, 242);
-}
-
 /*************************************************
  *  Content widgets
  **************************************************/
@@ -246,107 +190,6 @@ article .article-metadata {
   margin-top: 1.2rem;
 }
 
-/*************************************************
- *  Sharing
- **************************************************/
-
-.share-box {
-  margin-top: 0.7rem;
-}
-
-ul.share {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-ul.share li {
-  display: inline-flex;
-  margin-right: 8px;
-}
-
-ul.share li:last-of-type {
-  margin-right: 0;
-}
-
-ul.share li i {
-  display: block;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  font-size: 22px;
-  text-align: center;
-  transition: all 150ms ease-in-out;
-}
-
-ul.share li a {
-  text-decoration: none !important;
-  color: rgba(0, 0, 0, 0.84);
-}
-
-.dark ul.share li a {
-  color: rgba(255, 255, 255, 0.84);
-}
-
-ul.share li:hover i {
-  transform: scale(1.2);
-}
-
-/*************************************************
- *  Author profile card
- **************************************************/
-
-.author-card .avatar {
-  width: 60px;
-  height: 60px;
-}
-
-.author-card .card-title {
-  margin-top: 0;
-  margin-bottom: 15px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.84);
-}
-
-.author-card .card-title a {
-  color: rgba(0, 0, 0, 0.84);
-}
-
-.dark .author-card .card-title,
-.dark .author-card .card-title a {
-  color: rgba(255, 255, 255, 0.84);
-}
-
-.author-card p {
-  margin-bottom: 5px;
-}
-
-.author-card .card-subtitle {
-  font-weight: 300;
-  font-size: 0.8rem;
-  color: rgba(0, 0, 0, 0.54);
-  margin-bottom: 7px;
-}
-
-.dark .author-card .card-subtitle {
-  color: rgba(255, 255, 255, 0.54);
-}
-
-.author-card .card-text {
-  color: rgba(0, 0, 0, 0.76);
-  font-size: 0.8rem;
-  margin-bottom: 4px;
-}
-
-.dark .author-card .card-text {
-  color: rgba(255, 255, 255, 0.76);
-}
-
 /*************************************************
  *  Comments
  **************************************************/
@@ -366,3 +209,11 @@ ul.share li:hover i {
 .article-widget h3 {
   margin-top: 0;
 }
+
+/*************************************************
+ *  Dark theme
+ **************************************************/
+
+.dark .article-metadata a {
+  color: rgba(255, 255, 255, 0.54);
+}
diff --git a/wowchemy/assets/scss/wowchemy/_icons.scss b/wowchemy/assets/scss/wowchemy/elements/_icon.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_icons.scss
rename to wowchemy/assets/scss/wowchemy/elements/_icon.scss
diff --git a/wowchemy/assets/scss/wowchemy/elements/_media.scss b/wowchemy/assets/scss/wowchemy/elements/_media.scss
new file mode 100644
index 00000000..d04fa459
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/elements/_media.scss
@@ -0,0 +1,36 @@
+/*************************************************
+ *  Gallery.
+ **************************************************/
+
+.gallery {
+  margin: 0.5em -4px 1.5em -4px;
+  font-size: 0;
+}
+
+.gallery img {
+  // Satisfy Lighthouse criteria even if a lazy image hasn't loaded yet.
+  min-height: 48px;
+  min-width: 48px;
+}
+
+a[data-fancybox] {
+  text-decoration: none;
+  cursor: zoom-in;
+}
+
+.gallery a[data-fancybox] img {
+  height: 250px;
+  width: auto;
+  max-width: inherit;
+  display: inherit;
+  margin: 0;
+  padding: 4px;
+  box-shadow: none;
+  vertical-align: inherit;
+}
+
+.fancybox-caption {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-align: center;
+}
diff --git a/wowchemy/assets/scss/wowchemy/elements/_table.scss b/wowchemy/assets/scss/wowchemy/elements/_table.scss
new file mode 100644
index 00000000..ed5a5d3a
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/elements/_table.scss
@@ -0,0 +1,62 @@
+/*************************************************
+ *  Tables
+ **************************************************/
+
+/* Based on Bootstrap's `table-responsive` style. */
+table {
+  display: block;
+  width: 100%;
+  overflow-x: scroll;
+  margin-bottom: 1rem;
+  font-size: 0.8rem;
+  // Override `article-style`'s `break-word` wrapping to make wide tables scrollable.
+  overflow-wrap: normal;
+  word-wrap: normal;
+  word-break: normal;
+}
+
+table > thead > tr > th,
+table > tbody > tr > th,
+table > tfoot > tr > th,
+table > thead > tr > td,
+table > tbody > tr > td,
+table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.43;
+  vertical-align: top;
+  border-top: 1px solid #ddd;
+}
+
+table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #ddd;
+}
+
+table > caption + thead > tr:first-child > th,
+table > colgroup + thead > tr:first-child > th,
+table > thead:first-child > tr:first-child > th,
+table > caption + thead > tr:first-child > td,
+table > colgroup + thead > tr:first-child > td,
+table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+
+table > tbody + tbody {
+  border-top: 2px solid #ddd;
+}
+
+table table {
+  background-color: #fff;
+}
+
+/* Table Striped */
+table > tbody > tr:nth-child(odd) > td,
+table > tbody > tr:nth-child(odd) > th {
+  background-color: #f9f9f9;
+}
+
+/* Table Hover */
+table > tbody > tr:hover > td,
+table > tbody > tr:hover > th {
+  background-color: #e5e5e5;
+}
diff --git a/wowchemy/assets/scss/wowchemy/elements/_tag.scss b/wowchemy/assets/scss/wowchemy/elements/_tag.scss
new file mode 100644
index 00000000..c416bb77
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/elements/_tag.scss
@@ -0,0 +1,51 @@
+/**************************************************
+ *  Tags/Labels
+ **************************************************/
+
+.badge-light {
+  border: none;
+  color: rgba(0, 0, 0, 0.68);
+  background: rgba(0, 0, 0, 0.05);
+  font-weight: normal;
+  border-radius: 3px;
+  padding: 5px 10px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.article-tags > .badge-light:last-child {
+  margin-right: 0;
+}
+
+.badge-light[href]:focus,
+.badge-light[href]:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+a.badge:focus,
+a.badge:hover {
+  color: rgba(0, 0, 0, 0.68);
+}
+
+.tag-cloud a {
+  display: inline-block;
+  position: relative;
+  margin: 8px 10px;
+  word-wrap: break-word;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+}
+
+.tag-cloud a:active,
+.tag-cloud a:focus,
+.tag-cloud a:hover {
+  color: $sta-primary-dark;
+  transform: scale(1.2);
+}
+
+.dark .tag-cloud a:active,
+.dark .tag-cloud a:focus,
+.dark .tag-cloud a:hover {
+  color: $sta-primary-light;
+}
diff --git a/wowchemy/assets/scss/wowchemy/helpers/_all.scss b/wowchemy/assets/scss/wowchemy/helpers/_all.scss
new file mode 100644
index 00000000..b67f31c0
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/helpers/_all.scss
@@ -0,0 +1,3 @@
+/* Wowchemy Helpers */
+
+@import 'word-wrap';
diff --git a/wowchemy/assets/scss/wowchemy/helpers/_word-wrap.scss b/wowchemy/assets/scss/wowchemy/helpers/_word-wrap.scss
new file mode 100644
index 00000000..e8f68567
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/helpers/_word-wrap.scss
@@ -0,0 +1,14 @@
+@mixin word-wrap() {
+  // Break very long words such as pasted URL strings.
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  //-ms-word-break: break-all;
+  //word-break: break-all;
+  word-break: break-word;
+
+  // Add a hyphen where the word breaks, if supported (No Blink).
+  //-ms-hyphens: auto;
+  //-moz-hyphens: auto;
+  //-webkit-hyphens: auto;
+  //hyphens: auto;
+}
diff --git a/wowchemy/assets/scss/wowchemy/layouts/_all.scss b/wowchemy/assets/scss/wowchemy/layouts/_all.scss
new file mode 100644
index 00000000..25761f43
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/layouts/_all.scss
@@ -0,0 +1,6 @@
+@import 'book';
+@import 'footer';
+@import 'listing';
+@import 'publication';
+@import 'rtl';
+@import 'search';
diff --git a/wowchemy/assets/scss/wowchemy/_book.scss b/wowchemy/assets/scss/wowchemy/layouts/_book.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_book.scss
rename to wowchemy/assets/scss/wowchemy/layouts/_book.scss
diff --git a/wowchemy/assets/scss/wowchemy/_footer.scss b/wowchemy/assets/scss/wowchemy/layouts/_footer.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_footer.scss
rename to wowchemy/assets/scss/wowchemy/layouts/_footer.scss
diff --git a/wowchemy/assets/scss/wowchemy/_listings.scss b/wowchemy/assets/scss/wowchemy/layouts/_listing.scss
similarity index 87%
rename from wowchemy/assets/scss/wowchemy/_listings.scss
rename to wowchemy/assets/scss/wowchemy/layouts/_listing.scss
index c1b80891..e1b7243d 100644
--- a/wowchemy/assets/scss/wowchemy/_listings.scss
+++ b/wowchemy/assets/scss/wowchemy/layouts/_listing.scss
@@ -32,13 +32,13 @@
   margin-bottom: 2rem;
 }
 
-.media.stream-item .article-title,
-.card-simple .article-title {
+.card-simple .article-title,
+.media.stream-item .article-title {
   font-size: 1.2rem;
 }
 
-.media.stream-item .article-style,
-.card-simple .article-style {
+.card-simple .article-style,
+.media.stream-item .article-style {
   margin-top: 2px;
   font-size: 0.8rem;
 }
diff --git a/wowchemy/assets/scss/wowchemy/layouts/_publication.scss b/wowchemy/assets/scss/wowchemy/layouts/_publication.scss
new file mode 100644
index 00000000..3f232598
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/layouts/_publication.scss
@@ -0,0 +1,33 @@
+/*************************************************
+ *  Publications
+ **************************************************/
+
+.pub-banner {
+  max-width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.pub-row-heading {
+  font-weight: bold;
+}
+
+#container-publications {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.li-cite-author {
+  font-size: 1em;
+  color: inherit;
+}
+
+.li-cite-author a {
+  color: inherit;
+}
+
+.dark .li-cite-author a {
+  color: rgb(248, 248, 242);
+}
diff --git a/wowchemy/assets/scss/wowchemy/_rtl.scss b/wowchemy/assets/scss/wowchemy/layouts/_rtl.scss
similarity index 100%
rename from wowchemy/assets/scss/wowchemy/_rtl.scss
rename to wowchemy/assets/scss/wowchemy/layouts/_rtl.scss
diff --git a/wowchemy/assets/scss/wowchemy/_search.scss b/wowchemy/assets/scss/wowchemy/layouts/_search.scss
similarity index 99%
rename from wowchemy/assets/scss/wowchemy/_search.scss
rename to wowchemy/assets/scss/wowchemy/layouts/_search.scss
index 45c68b17..af065cc9 100644
--- a/wowchemy/assets/scss/wowchemy/_search.scss
+++ b/wowchemy/assets/scss/wowchemy/layouts/_search.scss
@@ -22,22 +22,6 @@
   background-color: $sta-dark-background;
 }
 
-// Hide body scrollbars whilst searching in modal
-.searching {
-  overflow: hidden;
-}
-
-.searching .search-modal {
-  transform: scale(1);
-  -webkit-transform: scale(1);
-  visibility: visible;
-  z-index: 1031; /* Highest index, higher than navbar. */
-}
-
-.searching #search-box #search-query {
-  width: 100%;
-}
-
 .search-modal > .container {
   padding-top: 70px; /* Navbar height. */
 }
@@ -94,7 +78,7 @@
   font-weight: 900;
   content: '\f002';
   font-size: 1rem;
-  opacity: 0.25;
+  opacity: 0.5;
   line-height: 1rem;
   position: absolute;
   left: 0.7rem;
@@ -102,6 +86,10 @@
   overflow-x: hidden;
 }
 
+.dark #search-query {
+  background-color: $sta-dark-background;
+}
+
 #search-box #search-query {
   border: 1px solid #dedede;
   border-radius: 1rem;
@@ -112,10 +100,6 @@
   font-size: 0.8rem;
 }
 
-.dark #search-query {
-  background-color: $sta-dark-background;
-}
-
 .form-control:focus {
   border-color: $sta-primary;
   box-shadow: 0 0 0 0.2rem $sta-primary-light;
@@ -212,3 +196,18 @@
 .dark .ais-search-box--input {
   background-color: $sta-dark-background;
 }
+// Hide body scrollbars whilst searching in modal
+.searching {
+  overflow: hidden;
+}
+
+.searching .search-modal {
+  transform: scale(1);
+  -webkit-transform: scale(1);
+  visibility: visible;
+  z-index: 1031; /* Highest index, higher than navbar. */
+}
+
+.searching #search-box #search-query {
+  width: 100%;
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_about.scss b/wowchemy/assets/scss/wowchemy/widgets/_about.scss
new file mode 100644
index 00000000..30511c32
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_about.scss
@@ -0,0 +1,102 @@
+/*************************************************
+ *  About widget
+ **************************************************/
+
+#profile {
+  text-align: center;
+  padding: 30px 10px;
+  position: relative;
+}
+
+.avatar {
+  width: 270px;
+  height: 270px;
+  margin: 0 auto;
+  object-fit: cover;
+}
+
+// Use smaller avatar size in About widget on small devices.
+@include media-breakpoint-down(sm) {
+  .wg-about .avatar {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+.avatar-circle {
+  border-radius: 50%;
+}
+
+.avatar-square {
+  border-radius: 3px;
+}
+
+.portrait-title h2 {
+  font-size: 1.75em;
+  font-weight: 300;
+  color: #000;
+  margin: 20px 0 10px 0;
+}
+
+.portrait-title h3 {
+  font-size: 1rem;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.54);
+  margin: 0 0 10px 0;
+}
+
+ul.network-icon {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#profile .network-icon {
+  margin-top: 30px;
+}
+
+.network-icon li {
+  margin-right: 10px;
+}
+
+.network-icon li:last-of-type {
+  margin-right: 0;
+}
+
+.network-icon li:hover {
+  transform: scale(1.2);
+}
+
+.big-icon {
+  font-size: 2rem;
+}
+
+ul.ul-interests li {
+  font-size: 0.9rem;
+}
+
+ul.ul-edu {
+  list-style: none;
+}
+
+ul.ul-edu li {
+  position: relative;
+  padding: 0 15px 4px 3px;
+}
+
+ul.ul-edu li .description p {
+  margin: 0;
+}
+
+ul.ul-edu li .description p.course {
+  font-size: 0.9rem;
+}
+
+ul.ul-edu li .description p.institution {
+  font-size: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_all.scss b/wowchemy/assets/scss/wowchemy/widgets/_all.scss
new file mode 100644
index 00000000..4a7d08ed
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_all.scss
@@ -0,0 +1,8 @@
+@import 'base';
+@import 'about';
+@import 'contact';
+@import 'experience';
+@import 'featurette';
+@import 'hero';
+@import 'people';
+@import 'portfolio';
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_base.scss b/wowchemy/assets/scss/wowchemy/widgets/_base.scss
new file mode 100644
index 00000000..8a6a22d5
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_base.scss
@@ -0,0 +1,220 @@
+/*************************************************
+ *  Page Builder: sections and widgets
+ **************************************************/
+
+.home-section {
+  // Use `background` rather than `background-color` so it can support gradients in theme packs.
+  background: $sta-home-section-odd;
+  position: relative; // Required for component positioning within section.
+  padding: 110px 0 110px 0;
+  z-index: 0; // Explicit z-order otherwise `.home-section-bg` can be hidden by any `.home-section` background.
+}
+
+// Responsive fullscreen option for widgets
+.home-section.fullscreen {
+  min-height: calc(100vh - 70px);
+}
+@include media-breakpoint-down(md) {
+  .home-section.fullscreen {
+    min-height: calc(100vh - 50px);
+  }
+}
+.no-navbar .home-section.fullscreen {
+  min-height: 100vh;
+}
+
+// Section theming
+
+.home-section.light,
+.home-section.light h1 {
+  color: #000;
+}
+
+.home-section.light a {
+  color: $sta-link;
+}
+
+.home-section.dark a {
+  color: $sta-dark-link;
+}
+
+/* Override dark colors that may be inherited from body.dark */
+.home-section.dark,
+.home-section.dark h1,
+.home-section.dark h2,
+.home-section.dark h3,
+.home-section.dark a:not(.btn) {
+  color: #fff;
+}
+
+/* Underline links in dark sections to separate them from text */
+.home-section.dark a:not(.btn):not(.hero-cta-alt) {
+  text-decoration: underline;
+}
+
+/* Revert Alert Box Link style (.home-section.dark style above should not be applied to it) */
+.home-section.dark .alert a {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
+
+/* Big underline style for links in dark sections */
+
+/* Disabled as it's an experimental style that requires CSS NOT Selector Level 4 (only in Safari) */
+
+/*
+.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a) {
+  text-decoration: none;
+  position: relative;
+}
+.home-section.dark.big-underline a:not(.btn):not(.hero-cta-alt):not(.alert a):after {
+  background: #fff;
+  content: "";
+  height: 2px;
+  left: 0;
+  right: 0;
+  position: absolute;
+  top: 100%;
+} */
+
+// Fill padding of `.home-section` parent
+.home-section-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%; // Or fill-available when supported.
+  width: 100%; // Or fill-available when supported.
+  z-index: -1; // Place bg div behind content.
+}
+
+/* Default background image properties for home sections. */
+.home-section-bg.bg-image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/* Create a parallax-like scrolling effect on desktop browsers. */
+.parallax {
+  background-attachment: fixed;
+}
+// Workaround issue with mobile browser support for fixed parallax background.
+@include media-breakpoint-down(md) {
+  .parallax {
+    background-attachment: scroll;
+  }
+}
+
+.home-section:first-of-type {
+  padding-top: 50px;
+}
+
+.home-section:nth-of-type(even) {
+  background: $sta-home-section-even;
+}
+
+.dark .home-section {
+  background: $sta-dark-home-section-odd;
+}
+
+.dark .home-section:nth-of-type(even) {
+  background: $sta-dark-home-section-even;
+}
+
+@media screen and (max-width: 768px) {
+  .home-section {
+    padding: 60px 0 60px 0;
+  }
+  .home-section:first-of-type {
+    padding-top: 40px;
+  }
+}
+
+.section-heading h1 {
+  margin: 0 0 10px 0;
+}
+
+.section-subheading {
+  font-size: 1.25rem;
+  font-family: $sta-font-heading, sans-serif;
+  font-weight: bold;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-heading p {
+  font-weight: 400;
+  font-size: 1.1rem;
+  color: rgba(0, 0, 0, 0.54); // Accessible contrast, matching footer text color.
+}
+
+.dark .section-heading p {
+  color: rgb(158, 158, 158);
+}
+
+/*************************************************
+ *  Widgets (common)
+ **************************************************/
+
+.see-all {
+  margin-top: 2rem;
+  text-transform: uppercase;
+}
+
+/* Reset code highlighting style in Alerts when Alert is child of a `.dark` widget, but Alert should be light.` */
+
+/* But will this affect page which should have dark Alert? */
+.dark .alert pre,
+.dark .alert code {
+  color: initial;
+  background-color: initial;
+}
+
+/*************************************************
+ *  Slider Widget
+ **************************************************/
+
+/* Clear `.home-section` as any padding or animation interferes with Slider's layout and animations. */
+.home-section.wg-slider {
+  padding: 0;
+  animation: none;
+  animation-delay: unset;
+}
+
+/* The Slider widget reuses the Hero widget's `.wg-hero` class.
+ * We must remove any `animation` and `clear` (although Hero no longer sets `clear: both`) in this instance or
+ * multiple slides can be `.active` at once. */
+.carousel-inner .wg-hero {
+  animation: none;
+  clear: none;
+}
+
+/*************************************************
+ * Talks
+ **************************************************/
+
+.talk-metadata {
+  color: #4b4f56;
+  font-size: 0.8rem;
+}
+
+/*************************************************
+ *  Accomplishments
+ **************************************************/
+
+.card.course {
+  margin-bottom: 1rem; /* More compact spacing than Experience widget as typically more items here. */
+}
+
+.card.course:last-of-type {
+  margin-bottom: 0;
+}
+
+.course .card-subtitle a {
+  border-bottom: solid 1px transparent;
+}
+
+.course .card-subtitle a:hover {
+  border-bottom: solid 1px;
+  text-decoration: none;
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_contact.scss b/wowchemy/assets/scss/wowchemy/widgets/_contact.scss
new file mode 100644
index 00000000..8dacf52b
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_contact.scss
@@ -0,0 +1,36 @@
+/*************************************************
+ *  Contact
+ **************************************************/
+
+.wg-contact .fa-ul {
+  margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
+}
+
+.wg-contact .fa-li {
+  position: absolute;
+  left: -3.14285714rem; /* Negative of `.wg-contact .fa-ul` margin. */
+  width: 2rem; /* Match `fa-2x` icon size. */
+  top: 0.14285714em; /* Default FA value. */
+  text-align: center;
+}
+
+.wg-contact li {
+  padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
+  margin-bottom: 0.3rem;
+}
+
+.wg-contact li:last-of-type {
+  margin-bottom: 0;
+}
+
+#map {
+  height: 350px;
+  width: 100%;
+}
+
+// Prevent OpenStreetMap inheriting link color from section of a different theme variation.
+// E.g. Light colored OpenStreetMap UI inheriting dark themed link (`.home-section.dark a`)
+// from a dark widget page section.
+#map a {
+  color: initial;
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_experience.scss b/wowchemy/assets/scss/wowchemy/widgets/_experience.scss
new file mode 100644
index 00000000..74f57ea6
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_experience.scss
@@ -0,0 +1,46 @@
+/*************************************************
+ * Experience
+ **************************************************/
+
+.exp-title {
+  text-transform: none !important;
+}
+
+.exp-company {
+  font-weight: normal !important;
+  text-transform: none !important;
+}
+
+.exp-meta {
+  font-size: 0.8rem;
+}
+
+.experience .card-text,
+.experience .card-text p {
+  color: #000 !important;
+  font-size: 0.75rem !important;
+}
+
+.dark .experience .text-muted {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.dark .experience .card-text,
+.dark .experience .card-text p {
+  color: rgb(248, 248, 242) !important;
+}
+
+// For a UL after P, remove the spacing between (P margin-bottom) without affecting any nested lists.
+.card .card-text p + ul {
+  margin-top: -1rem;
+  margin-bottom: 0;
+}
+
+.experience .m-2 .border,
+.experience .col.border-right {
+  border-color: $sta-primary !important;
+}
+
+.experience .m-2 .border.exp-fill {
+  background-color: $sta-primary !important;
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_featurette.scss b/wowchemy/assets/scss/wowchemy/widgets/_featurette.scss
new file mode 100644
index 00000000..0a49cd01
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_featurette.scss
@@ -0,0 +1,30 @@
+/*************************************************
+ *  Featurette Widget
+ **************************************************/
+
+.featurette {
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: #555;
+  text-align: center;
+}
+
+.featurette .section-subheading {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-weight: 400;
+  color: #333;
+}
+
+.dark .featurette,
+.dark .featurette .section-subheading {
+  color: #fff;
+}
+
+.featurette-icon {
+  display: block;
+  width: 100%;
+  color: $sta-primary;
+  font-size: 3rem;
+  text-align: center;
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_hero.scss b/wowchemy/assets/scss/wowchemy/widgets/_hero.scss
new file mode 100644
index 00000000..382d9abd
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_hero.scss
@@ -0,0 +1,80 @@
+/*************************************************
+ *  Hero Widget
+ **************************************************/
+
+.wg-hero {
+  padding: 3em 0; // More compact top and bottom padding for Hero.
+}
+
+.hero-title {
+  font-size: 2.7rem;
+  margin-top: 0;
+  line-height: 1;
+}
+
+.hero-lead {
+  max-width: 768px;
+  font-size: 1.35rem;
+}
+
+.wg-hero.dark .hero-title,
+.wg-hero.dark .hero-lead,
+.wg-hero.dark .hero-cta-alt,
+.wg-hero.dark .hero-note > * {
+  color: #fff;
+
+  /* text-shadow: 1px 1px 4px rgba(0,0,0,0.5); */
+
+  /* Uncomment to standout on complicated backgrounds. */
+}
+
+.wg-hero.dark a:not(.wg-hero .btn) {
+  color: #fff;
+}
+
+.wg-hero .hero-lead a {
+  text-decoration: underline;
+}
+
+.wg-hero .cta-btns {
+  margin-bottom: 16px;
+}
+
+.wg-hero .btn {
+  padding: 0.6em 2.1em;
+}
+
+.wg-hero.dark .btn {
+  color: $sta-primary-dark;
+}
+
+a.hero-cta-alt {
+  display: inline-block;
+  position: relative;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  font-size: 1.1rem;
+}
+
+a.hero-cta-alt:active,
+a.hero-cta-alt:focus,
+a.hero-cta-alt:hover {
+  transform: scale(1.1);
+}
+
+.wg-hero .btn-lg {
+  font-size: 1.1rem;
+}
+
+.wg-hero .hero-note {
+  font-size: 0.8rem;
+}
+
+.hero-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_people.scss b/wowchemy/assets/scss/wowchemy/widgets/_people.scss
new file mode 100644
index 00000000..1ca7cda5
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_people.scss
@@ -0,0 +1,33 @@
+/*************************************************
+ *  People widget
+ **************************************************/
+
+.people-widget {
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.people-widget .portrait-title h2 {
+  font-size: 1rem;
+}
+
+.people-widget .portrait-title h3 {
+  font-size: 0.7rem;
+}
+
+.people-widget .avatar {
+  width: 80%;
+  max-width: 150px;
+  height: auto;
+}
+
+@media (min-width: 576px) {
+  .people-widget .col-sm-auto {
+    width: 30%;
+  }
+}
+@media (min-width: 992px) {
+  .people-widget .col-sm-auto {
+    width: 20%;
+  }
+}
diff --git a/wowchemy/assets/scss/wowchemy/widgets/_portfolio.scss b/wowchemy/assets/scss/wowchemy/widgets/_portfolio.scss
new file mode 100644
index 00000000..1070c0d2
--- /dev/null
+++ b/wowchemy/assets/scss/wowchemy/widgets/_portfolio.scss
@@ -0,0 +1,79 @@
+/*************************************************
+ *  Projects
+ **************************************************/
+
+.project-widget-simple li {
+  margin-bottom: 1rem;
+}
+
+.project-widget-simple li:last-of-type {
+  margin-bottom: 0;
+}
+
+.project-widget-simple .project-title {
+  margin-bottom: 6px;
+}
+
+.project-widget-simple .project-summary {
+  font-size: 0.9rem;
+  margin-bottom: 0.4rem;
+}
+
+.projects-container {
+  display: block;
+  position: relative;
+
+  /* margin-top: 5rem; */
+  overflow: hidden;
+}
+
+.project-toolbar {
+  margin-bottom: 2rem;
+}
+
+.project-card {
+  position: relative;
+  width: calc(
+    33.3% - 13.3px
+  ); /* Fluid 3 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
+}
+@media screen and (max-width: 1199px) {
+  .project-card {
+    width: calc(
+      50% - 10px
+    ); /* Fluid 2 columns ($gutter * ($number_of_cols - 1) / $number_of_cols; following https://stackoverflow.com/a/51290967) */
+  }
+}
+@media screen and (max-width: 768px) {
+  .project-card {
+    width: 100%; /* 1 column */
+  }
+}
+
+.project-item {
+  margin-bottom: 1.5rem;
+}
+
+.project-card.project-item {
+  margin: 0 0 20px 0; /* Set to Isotope's gutter size */
+}
+
+.project-card .card {
+  margin: 0; /* Remove default card margin and use Isotope gutter */
+}
+
+.project-showcase .project-item {
+  margin-bottom: 3rem;
+}
+
+.project-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-item:hover {
+  z-index: 3;
+}
diff --git a/wowchemy/assets/scss/wowchemy/wowchemy.scss b/wowchemy/assets/scss/wowchemy/wowchemy.scss
index ce894ec2..f0a743d6 100644
--- a/wowchemy/assets/scss/wowchemy/wowchemy.scss
+++ b/wowchemy/assets/scss/wowchemy/wowchemy.scss
@@ -5,19 +5,11 @@
  *  License: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/LICENSE.md
  **************************************************/
 
-@import 'root';
-@import 'callouts';
-@import 'shortcodes';
-@import 'icons';
-@import 'footer';
-@import 'nav';
-@import 'card';
-@import 'search';
-@import 'content';
-@import 'listings';
-@import 'widgets';
-@import 'book';
+@import 'helpers/all';
+@import 'base';
+@import 'elements/all';
+@import 'components/all';
+@import 'layouts/all';
+@import 'widgets/all';
 @import 'dark';
 @import 'integrations';
-@import 'rtl';
-@import 'breadcrumb';
diff --git a/wowchemy/package.json b/wowchemy/package.json
index 3a0be07e..5d37df43 100644
--- a/wowchemy/package.json
+++ b/wowchemy/package.json
@@ -28,8 +28,9 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "yarn run lint:js && yarn run lint:style",
     "lint:js": "eslint assets/js/",
-    "lint:style": "stylelint \"assets/{css,scss}/**/*.{css,scss}\"",
+    "lint:style": "stylelint \"assets/scss/**/*.scss\"",
     "format": "prettier --write \"*.{css,js,json,md,scss}\" \"./**/*.{css,js,json,md,scss}\"",
     "stylelint-conflict-check": "stylelint-config-prettier-check"
   }