put all css files into themes/distorsion/assets/ since we have our custom theme anyway

assets/sass/_about.scss

@@ -1,30 +0,0 @@
-.about {
-    width: 100%;
-    background-color: $smoke;
-    text-align: justify;
-  
-    p {
-      @include size(h3);
-      margin-top: $vertical-rhythm;
-    }
-  
-    a {
-      background-image: linear-gradient($accent, $accent);
-      background-repeat: repeat-x;
-      background-position: 0 95%;
-      background-size: 2px 3px;
-      text-decoration: none;
-      text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
-      .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
-      .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
-      .03em .075em $white, -.03em .075em $white, .06em .075em $white,
-      -.06em .075em $white, .09em .075em $white, -.09em .075em $white,
-      .12em .075em $white, -.12em .075em $white, .15em .075em $white,
-      -.15em .075em $white;
-  
-      &:hover {
-        color: $accent;
-      }
-    }
-  }
-  

assets/sass/_gallery.scss

@@ -1,74 +0,0 @@
-.gallery {
-  .gallery-item {
-    position: relative;
-    width: 50%;
-    padding: 0;
-
-    &::after {
-      content: "";
-      display: block;
-      padding-bottom: 100%;
-    }
-
-    &:hover {
-      .overlay {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-
-  .overlay {
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: .2s ease-out;
-    opacity: 0;
-    background-color: $black;
-    cursor: pointer;
-
-    a {
-      color: $white;
-
-      &:hover {
-        color: $accent;
-      }
-    }
-
-    h2 {
-      margin: $vertical-rhythm;
-      color: $white;
-    }
-  }
-
-  .gallery-img-container {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  img {
-    padding: $vertical-rhythm * 3;
-    /*TODO: This is an ugly hack. Either fix or ensure images to have a good dimension*/
-    width: 640px;
-    height: auto;
-  }
-
-  .gallery-modal-link {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-}

assets/sass/main.scss

@@ -1,274 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Rubik|Bitter");
-@import "flexboxgrid";
-@import "colors";
-@import "typography";
-@import "animation";
-@import "layout";
-@import "base";
-@import "modal";
-@import "about";
-@import "gallery";
-@import "members";
-
-@media (max-width: 47.99em) {
-  body .container {
-    padding: $vertical-rhythm * 4 $vertical-rhythm;
-  }
-
-  nav {
-    // Hide menu links between logo and hamburger menu
-    div:not(:first-child):not(:last-child) {
-      display: none;
-    }
-
-    div.nav-toggle a {
-      display: inline-block;
-    }
-  }
-}
-
-@media (max-width: 25em) {
-  body .container {
-    padding: $vertical-rhythm * 4 $vertical-rhythm;
-  }
-
-  nav {
-    div.logo,
-    div.nav-toggle {
-      max-width: 50% !important;
-    }
-  }
-}
-
-nav {
-  position: absolute;
-  z-index: 100;
-  bottom: 0;
-  width: 100%;
-  height: $vertical-rhythm * 2;
-  background-color: $white;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
-  text-align: center;
-
-  h3 {
-    margin: 0;
-    font-family: $font-body;
-    font-weight: 600;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-  }
-
-  img {
-    display: inline-block;
-    max-width: 10em;
-    max-height: 2.5em;
-    vertical-align: middle;
-  }
-
-  .logo,
-  .nav-toggle {
-    visibility: hidden;
-  }
-
-  .nav-toggle a {
-    display: none;
-  }
-}
-
-.nav-fixed {
-  position: fixed;
-  top: 0;
-  bottom: auto;
-}
-
-.nav-full {
-  position: fixed;
-  top: 0;
-  right: -100vw;
-  bottom: 0;
-  width: 100vw;
-  height: 100%;
-  transform: translate(0, 0);
-  transition: .25s ease-out;
-  background-color: $black;
-
-  a {
-    color: $white;
-
-    &:hover {
-      color: $accent;
-    }
-  }
-}
-
-.nav-full.active {
-  transform: translate(-100vw, 0);
-}
-
-main {
-  transition: .25s ease-in;
-  background-color: $white;
-
-  &.active {
-    transform: translate(-100vw, 0);
-  }
-}
-
-.container {
-  max-width: 43.75rem; // 700px
-  margin: auto;
-  padding: $vertical-rhythm * 4 0 $vertical-rhythm * 4;
-}
-
-p {
-  margin-bottom: $vertical-rhythm;
-
-  code {
-    font-family: $font-code;
-  }
-}
-
-h1,
-h2,
-h3 {
-  margin-bottom: $vertical-rhythm;
-  font-family: $font-header;
-  letter-spacing: 2px;
-  line-height: 1.45;
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.home-logo {
-  margin-bottom: $vertical-rhythm;
-}
-
-.posts-list {
-  margin: 0 0 $vertical-rhythm;
-}
-
-.sub-header,
-time {
-  @include size(p);
-  margin-bottom: $vertical-rhythm;
-  color: $storm;
-}
-
-.content {
-  width: 100%;
-  text-align: left;
-
-  time {
-    margin-left: 3px;
-  }
-
-  a {
-    background-image: linear-gradient($accent, $accent);
-    background-repeat: repeat-x;
-    background-position: 0 95%;
-    background-size: 1px 2px;
-    text-decoration: none;
-    text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
-    .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
-    .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
-    .03em .075em $white, -.03em .075em $white, .06em .075em $white,
-    -.06em .075em $white, .09em .075em $white, -.09em .075em $white,
-    .12em .075em $white, -.12em .075em $white, .15em .075em $white,
-    -.15em .075em $white;
-
-    &:hover {
-      color: $accent;
-    }
-  }
-}
-
-.highlight {
-  margin: 10px 0;
-}
-
-.pagination {
-  margin: 50px 0 0;
-
-  &:nth-child(2) {
-    float: right;
-  }
-}
-
-.full {
-  top: 0;
-  bottom: 0;
-  height: 100vh;
-}
-
-.blog {
-  display: flex;
-  min-height: 100vh;
-
-  h2 {
-    margin-bottom: 0;
-  }
-
-  h3 {
-    margin: 0 0 $vertical-rhythm * 2;
-    font-family: $font-body;
-  }
-}
-
-.contact {
-  width: 100%;
-  padding-bottom: $vertical-rhythm * 2;
-  background-color: $smoke;
-
-  form {
-    margin-top: $vertical-rhythm;
-  }
-
-  .contact-submit {
-    position: relative;
-  }
-
-  #form-submit {
-    display: block;
-    width: 50%;
-    margin: 0 auto;
-  }
-
-  #form-thankyou {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-input {
-  width: 100%;
-  margin: 8px 0;
-  padding: 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  border-color: $smoke;
-  background-color: $white;
-  color: $black;
-
-  &[type="submit"] {
-    transition: .2s ease-out;
-    background-color: $storm;
-    color: $white;
-
-    &:hover {
-      background-color: $accent;
-      color: $white;
-      cursor: pointer;
-    }
-  }
-}
-
-textarea {
-  @extend input;
-  min-height: $vertical-rhythm * 4;
-  overflow: auto;
-}

themes/distorsion/assets/sass/_about.scss

@@ -1,28 +1,30 @@
 .about {
-  width: 100%;
+    width: 100%;
-  background-color: $smoke;
+    background-color: $smoke;
+    text-align: justify;
   
-  p {
+    p {
-    @include size(h3);
+      @include size(h3);
-    margin-top: $vertical-rhythm;
+      margin-top: $vertical-rhythm;
-  }
+    }
   
-  a {
+    a {
-    background-image: linear-gradient($accent, $accent);
+      background-image: linear-gradient($accent, $accent);
-    background-repeat: repeat-x;
+      background-repeat: repeat-x;
-    background-position: 0 95%;
+      background-position: 0 95%;
-    background-size: 2px 3px;
+      background-size: 2px 3px;
-    text-decoration: none;
+      text-decoration: none;
-    text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
+      text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
-    .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
+      .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
-    .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
+      .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
-    .03em .075em $white, -.03em .075em $white, .06em .075em $white,
+      .03em .075em $white, -.03em .075em $white, .06em .075em $white,
-    -.06em .075em $white, .09em .075em $white, -.09em .075em $white,
+      -.06em .075em $white, .09em .075em $white, -.09em .075em $white,
-    .12em .075em $white, -.12em .075em $white, .15em .075em $white,
+      .12em .075em $white, -.12em .075em $white, .15em .075em $white,
-    -.15em .075em $white;
+      -.15em .075em $white;
   
-    &:hover {
+      &:hover {
-      color: $accent;
+        color: $accent;
+      }
     }
   }
-}
+  

themes/distorsion/assets/sass/_gallery.scss

@@ -53,10 +53,14 @@
     justify-content: center;
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
 
   img {
     padding: $vertical-rhythm * 3;
+    /*TODO: This is an ugly hack. Either fix or ensure images to have a good dimension*/
+    width: 640px;
+    height: auto;
   }
 
   .gallery-modal-link {

themes/distorsion/assets/sass/main.scss

@@ -8,6 +8,7 @@
 @import "modal";
 @import "about";
 @import "gallery";
+@import "members";
 
 @media (max-width: 47.99em) {
   body .container {