organize styles and rename some style classes

9 files changed, 245 insertions, 236 deletions

diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss
new file mode 100644
index 0000000..4fb5db0
--- /dev/null
+++ b/assets/scss/_layout.scss
@@ -0,0 +1,37 @@
+.padder {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+
+.accent-text {
+  color: $accent-color;
+}
+
+.default-text {
+  color: $text-color;
+}
+
+.bold-text {
+  font-weight: bold;
+}
+
+.transparent {
+  opacity: 0;
+}
+
+.break-word {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.clearfix:after {
+  content: "";
+  display: block;
+  clear: both;
+}
\ No newline at end of file
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 02d3976..5ba6d01 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -1,6 +1,6 @@
 @import "vars";
 
-.burger-wrap {
+.burger-holder {
   float: right;
   height: 100%;
 
@@ -72,36 +72,34 @@
 .projects {
   margin-top: 4.5em;
   margin-bottom: 3.5em;
+}
 
-  & .project {
-    margin-bottom: 2em;
-  }
+.project {
+  margin-bottom: 2em;
 
-  & a {
+  a {
     position: relative;
     display: block;
   }
 
-  & a:hover{
-    & .project-hover {
-      background: $accent-color;
-      color: $tile-text-hover-color;
-      opacity: 0.9;
-      -webkit-transition: opacity 200ms linear;
-      -moz-transition: opacity 200ms linear;
-      -ms-transition: opacity 200ms linear;
-      -o-transition: opacity 200ms linear;
-      transition: opacity 200ms linear;
-    }
-  }
-
   img {
     display: block;
     max-width: 100%;
     height: auto;
   }
 
-  & .project-hover {
+  a:hover &-hover {
+    background: $accent-color;
+    color: $tile-text-hover-color;
+    opacity: 0.9;
+    -webkit-transition: opacity 200ms linear;
+    -moz-transition: opacity 200ms linear;
+    -ms-transition: opacity 200ms linear;
+    -o-transition: opacity 200ms linear;
+    transition: opacity 200ms linear;
+  }
+
+  &-hover {
     position: absolute;
     top: 0;
     left: 0;
@@ -114,20 +112,20 @@
     -o-transition: all 200ms linear 300ms;
     transition: all 200ms linear 300ms;
   }
-}
 
-.project-caption {
-  padding: 1.5em;
-  line-height: 1.2;
+  &-caption {
+    padding: 1.5em;
+    line-height: 1.2;
+  }
 
-  & .project-title {
+  &-title {
     max-height: 3.5em;
     font-size: 2.8em;
     font-weight: bold;
     overflow: hidden;
   }
 
-  & .project-type {
+  &-type {
     margin-top: .5em;
     font-size: 1.4em;
     text-transform: uppercase;
@@ -248,12 +246,12 @@
 
 //446
 @media only screen and (min-width: 27.875em) {
-  .project-caption {
-    & .project-title {
+  .project {
+    &-title {
       font-size: 3.5em;
     }
 
-    & .project-type {
+    &-type {
       font-size: 1.6em;
     }
   }
@@ -261,30 +259,30 @@
 
 //741
 @media only screen and (min-width: 46.3125em) {
-  .projects {
-    margin-top: 10em;
+  .short-col {
+    width: 32.21238%;
+  }
 
-    & .project {
-      float: left;
-    }
+  .wide-col {
+    width: 66.01769%;
+  }
 
-    & .short-col {
-      width: 32.21238%;
-    }
+  .projects {
+    margin-top: 10em;
+  }
 
-    & .wide-col {
-      width: 66.01769%;
-    }
+  .project {
+    float: left;
 
-    & .project:nth-child(2n) {
+    &:nth-child(2n) {
       margin-right: 1.7699%;
     }
-  }
 
-  .project-caption {
-    padding: 3.7em 2.5em 3.7em 3em;
+    &-caption {
+      padding: 3.7em 2.5em 3.7em 3em;
+    }
 
-    & .project-title {
+    &-title {
       font-size: 4em;
       max-height: 4.8em;
     }
@@ -293,9 +291,7 @@
 
 //936
 @media only screen and (min-width: 58.5em) {
-  .project-caption {
-    & .project-title {
-      font-size: 4.6em;
-    }
+  .project-title {
+    font-size: 4.6em;
   }
-}
+}
\ No newline at end of file
diff --git a/assets/scss/critical.scss b/assets/scss/critical.scss
index ce0bfad..13d4295 100644
--- a/assets/scss/critical.scss
+++ b/assets/scss/critical.scss
@@ -1,6 +1,7 @@
 @import "vars";
 @import "base";
 @import "fonts";
+@import "layout";
 
 body {
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -10,33 +11,22 @@ body {
   color: $text-color;
 }
 
-.main-container {
-  font-size: 125%;
-}
-
-.main-container a {
-  color: $group-text-color;
-  text-decoration: none;
-}
-
-.main-container a:hover {
-  color: $text-color;
-}
-
-.main-container .accent-text {
+a {
   color: $accent-color;
-}
+  text-decoration: none;
 
-.main-container a.accent-text:hover {
-  color: $accent-hover-color;
+  &:hover {
+    color: $accent-hover-color;
+  }
 }
 
-.padder {
-  padding-left: 2em;
-  padding-right: 2em;
+.main-container {
+  font-size: 125%;
+  overflow-x: hidden;
 }
 
-.nav-container, .header {
+.nav-container,
+.header {
   background: $hero-color;
 }
 
@@ -50,18 +40,18 @@ body {
 
 .logo {
   float: left;
-}
 
-.logo:before {
-  display: inline-block;
-  vertical-align: middle;
-  content: '';
-  height: 100%;
-  width: 0px;
-}
+  &:before {
+    display: inline-block;
+    vertical-align: middle;
+    content: '';
+    height: 100%;
+    width: 0px;
+  }
 
-.logo img {
-  vertical-align: middle;
+  img {
+    vertical-align: middle;
+  }
 }
 
 .links {
@@ -79,90 +69,72 @@ body {
   -webkit-transition: opacity .4s;
   -o-transition: opacity .4s;
   transition: opacity .4s;
-}
 
-.links li {
-  padding: 0.5em 0;
-}
+  li {
+    padding: 0.5em 0;
+  }
 
-.links .active a {
-  color: $text-color;
-}
+  a {
+    color: $group-text-color;
+    font-size: 1.8em;
+    font-weight: 600;
+    -webkit-transition: all 500ms;
+    -moz-transition: all 500ms;
+    -ms-transition: all 500ms;
+    -o-transition: all 500ms;
+    transition: all 500ms;
 
-.links a {
-  font-size: 1.8em;
-  font-weight: 600;
-  -webkit-transition: all 500ms;
-  -moz-transition: all 500ms;
-  -ms-transition: all 500ms;
-  -o-transition: all 500ms;
-  transition: all 500ms;
-}
+    &:hover {
+      color: $text-color;
+    }
 
-.break-word {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-  word-break: break-word;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
+    &.active {
+      color: $text-color;
+    }
+  }
 }
 
 .main-description {
   position: relative;
-}
 
-.main-description h1 {
-  position: relative;
-  font-size: 4em;
-  font-weight: bold;
-  line-height: 1.15;
-  padding-top: 1.3em;
-  padding-bottom: 1.3em;
-  z-index: 1;
-}
+  h1 {
+    position: relative;
+    font-size: 4em;
+    font-weight: bold;
+    line-height: 1.15;
+    padding-top: 1.3em;
+    padding-bottom: 1.3em;
+    z-index: 1;
+  }
 
-.main-description img {
-  position: absolute;
-  bottom: 0;
-  display: block;
-  max-width: 100%;
-  height: auto;
+  img {
+    position: absolute;
+    bottom: 0;
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
 }
 
-.categories .category {
+.category {
   margin-top: 3em;
-}
 
-.categories .category.line {
-  margin: 0;
-}
-
-.categories .name {
-  font-size: 1.6em;
-  font-weight: bold;
-  text-transform: uppercase;
-  margin-bottom: 0.472em;
-}
-
-.categories .description {
-  color: $group-text-color;
-  font-size: 1.8em;
-  font-weight: 600;
-}
-
-.default-text {
-  color: $text-color;
-}
+  &.line {
+    margin: 0;
+  }
 
-.bold-text {
-  font-weight: bold;
-}
+  &-label {
+    font-size: 1.6em;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-bottom: 0.472em;
+  }
 
-.transparent {
-  opacity: 0;
+  &-content {
+    color: $group-text-color;
+    font-size: 1.8em;
+    font-weight: 600;
+  }
 }
 
 .animated {
@@ -240,28 +212,35 @@ body {
   animation-name: fadeIn;
 }
 
+//361
 @media only screen and (min-width: 22.5625em) {
-  .main-description h1 {
-    font-size: 4.6em;
-    padding-top: 1.923em;
-    padding-bottom: 1.923em;
+  .main-description {
+    h1 {
+      font-size: 4.6em;
+      padding-top: 1.923em;
+      padding-bottom: 1.923em;
+    }
   }
 
-  .categories .category {
+  .category {
     margin-top: 5em;
-  }
 
-  .categories .name {
-    margin-bottom: 0.625em;
+    &-label {
+      margin-bottom: 0.625em;
+    }
   }
 }
 
+//537
 @media only screen and (min-width: 33.5625em) {
-  .main-description h1 {
-    font-size: 5.2em;
+  .main-description {
+    h1 {
+      font-size: 5.2em;
+    }
   }
 }
 
+//741
 @media only screen and (min-width: 46.3125em) {
   .links {
     visibility: visible;
@@ -273,111 +252,108 @@ body {
     height: 100%;
     -webkit-box-shadow: none;
     box-shadow: none;
-  }
 
-  .links:before {
-    display: inline-block;
-    vertical-align: middle;
-    content: '';
-    height: 100%;
-    width: 0px;
-  }
+    &:before {
+      display: inline-block;
+      vertical-align: middle;
+      content: '';
+      height: 100%;
+      width: 0px;
+    }
 
-  .links li {
-    display: inline-block;
-    width: auto;
-    margin-left: 4em;
-    vertical-align: middle;
+    li {
+      display: inline-block;
+      width: auto;
+      margin-left: 4em;
+      vertical-align: middle;
+    }
   }
 
-  .burger-wrap {
+  .burger-holder {
     display: none;
   }
 
-  .showBurger .burger-wrap {
-    display: block;
-  }
+  .showBurger {
+    .burger-holder {
+      display: block;
+    }
 
-  .showBurger .links {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    float: none;
-    height: auto;
-    padding: 1em 0;
-    -webkit-box-shadow: 0 5px 7px 0 $header-shadow-color;
-    box-shadow: 0 5px 7px 0 $header-shadow-color;
-  }
+    .links {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      float: none;
+      height: auto;
+      padding: 1em 0;
+      -webkit-box-shadow: 0 5px 7px 0 $header-shadow-color;
+      box-shadow: 0 5px 7px 0 $header-shadow-color;
 
-  .showBurger .links:before {
-    display: none;
-  }
+      &:before {
+        display: none;
+      }
 
-  .showBurger .links > li {
-    display: list-item;
-    margin: 0;
+      & > li {
+        display: list-item;
+        margin: 0;
+      }
+    }
   }
 
-  .main-description h1 {
-    font-size: 5.4em;
-    line-height: 1.1428;
-    padding-top: 2.3148em;
-    padding-bottom: 2.3148em;
+  .main-description {
+    h1 {
+      font-size: 5.4em;
+      line-height: 1.1428;
+      padding-top: 2.3148em;
+      padding-bottom: 2.3148em;
+    }
   }
 
-  .categories .category,
-  .categories .name,
-  .categories .description {
+  .category {
+    width: 100%;
     float: left;
-  }
 
-  .categories .category {
-    width: 100%;
-  }
+    & > div {
+      float: left;
+    }
 
-  .categories .name {
-    width: 30%;
-    margin-bottom: 0;
-  }
+    &-label {
+      width: 30%;
+      margin-bottom: 0;
+    }
 
-  .categories .description {
-    width: 70%;
+    &-content {
+      width: 70%;
+    }
   }
 
   .projects {
     margin-top: 10em;
   }
-
-  .clearfix:after {
-    content: "";
-    display: block;
-    clear: both;
-  }
 }
 
+//936
 @media only screen and (min-width: 58.5em) {
-  .main-description h1 {
-    padding-bottom: 3.907em;
+  .main-description {
+    h1 {
+      padding-bottom: 3.907em;
+    }
   }
 
-  .categories .category {
+  .category {
     margin-top: 7.5em;
-  }
 
-  .categories .name {
-    width: 42.47787%;
-  }
+    &-label {
+      width: 42.47787%;
+    }
 
-  .categories .description {
-    width: 57.52213%;
+    &-content {
+      width: 57.52213%;
+    }
   }
 }
 
+//1170
 @media only screen and (min-width: 73.125em) {
-  .main-container {
-    overflow-x: hidden;
-  }
-
   .container {
     max-width: 117em;
     margin: 0 auto;
diff --git a/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content
index def444e..8073226 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.content
@@ -1 +1 @@
-.burger-wrap{float:right;height:100%}.burger-wrap:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform .5s,top .2s}.burger .middle{top:.8em;transition:transform .5s ease .2s,top .2s}.burger .bottom{top:1.6em;transition:all .5s ease .1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.projects .project{margin-bottom:2em}.projects a{position:relative;display:block}.projects a:hover .project-hover{background:#224afa;color:#fff;opacity:.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.projects img{display:block;max-width:100%;height:auto}.projects .project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding:1.5em;line-height:1.2}.project-caption .project-title{max-height:3.5em;font-size:2.8em;font-weight:700;overflow:hidden}.project-caption .project-type{margin-top:.5em;font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.3s;animation-duration:.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width:22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}}@media only screen and (min-width:27.875em){.project-caption .project-title{font-size:3.5em}.project-caption .project-type{font-size:1.6em}}@media only screen and (min-width:46.3125em){.projects{margin-top:10em}.projects .project{float:left}.projects .short-col{width:32.21238%}.projects .wide-col{width:66.01769%}.projects .project:nth-child(2n){margin-right:1.7699%}.project-caption{padding:3.7em 2.5em 3.7em 3em}.project-caption .project-title{font-size:4em;max-height:4.8em}}@media only screen and (min-width:58.5em){.project-caption .project-title{font-size:4.6em}}
\ No newline at end of file
+.burger-holder{float:right;height:100%}.burger-holder:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.burger{position:relative;width:2.5em;height:1.8em;display:inline-block;vertical-align:middle;cursor:pointer}.burger>div{position:absolute;left:0;right:0;background:#171616;height:.2em}.burger .top{top:0;transition:transform .5s,top .2s}.burger .middle{top:.8em;transition:transform .5s ease .2s,top .2s}.burger .bottom{top:1.6em;transition:all .5s ease .1s}.BurgerMenu--active .burger .top{top:.8em;transform:rotate(135deg)}.BurgerMenu--active .burger .middle{transform:rotate(-135deg)}.BurgerMenu--active .burger .bottom{top:.8em;opacity:0;transform:rotate(180deg)}.BurgerMenu--active .links{visibility:visible;opacity:1}.projects{margin-top:4.5em;margin-bottom:3.5em}.project{margin-bottom:2em}.project a{position:relative;display:block}.project img{display:block;max-width:100%;height:auto}a:hover .project-hover{background:#224afa;color:#fff;opacity:.9;-webkit-transition:opacity 200ms linear;-moz-transition:opacity 200ms linear;-ms-transition:opacity 200ms linear;-o-transition:opacity 200ms linear;transition:opacity 200ms linear}.project-hover{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:all 200ms linear 300ms;-moz-transition:all 200ms linear 300ms;-ms-transition:all 200ms linear 300ms;-o-transition:all 200ms linear 300ms;transition:all 200ms linear 300ms}.project-caption{padding:1.5em;line-height:1.2}.project-title{max-height:3.5em;font-size:2.8em;font-weight:700;overflow:hidden}.project-type{margin-top:.5em;font-size:1.4em;text-transform:uppercase}.line::before{content:"";display:block;height:1px;background:#ebebeb;margin-top:4.2em;margin-bottom:4.2em}.bottom-space{margin-bottom:4.2em}.stickyNavigation .nav-container{position:fixed;z-index:10;width:100%;padding-bottom:1.5em;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1);-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:.3s;animation-duration:.3s}.stickyNavigation .navbar{height:5em;padding-top:1.5em}.stickyNavigation .logo img{max-height:5em}.stickyNavigation .header{padding-top:9.1em}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}40%{opacity:0}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@media only screen and (min-width:22.5625em){.projects{margin-top:7.5em;margin-bottom:6em}}@media only screen and (min-width:27.875em){.project-title{font-size:3.5em}.project-type{font-size:1.6em}}@media only screen and (min-width:46.3125em){.short-col{width:32.21238%}.wide-col{width:66.01769%}.projects{margin-top:10em}.project{float:left}.project:nth-child(2n){margin-right:1.7699%}.project-caption{padding:3.7em 2.5em 3.7em 3em}.project-title{font-size:4em;max-height:4.8em}}@media only screen and (min-width:58.5em){.project-title{font-size:4.6em}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json
index dd684ab..41b3d69 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json
+++ b/exampleSite/resources/_gen/assets/scss/scss/app.scss_cf77da1f4ca537338a3eb28dc8a2d96c.json
@@ -1 +1 @@
-{"Target":"css/app.min.dbf567fcfd206a5535ec3083a921e74bf0ca0e43ebea55a3986ac2b973d3b7f6.css","MediaType":"text/css","Data":{"Integrity":"sha256-2/Vn/P0galU17DCDqSHnS/DKDkPr6lWjmGrCuXPTt/Y="}}
\ No newline at end of file
+{"Target":"css/app.min.ee0853373cc2b213c34733ce4f1d7ebb90c2d91be77c29865ac4fd6489d4d31c.css","MediaType":"text/css","Data":{"Integrity":"sha256-7ghTNzzCshPDRzPOTx1+u5DC2RvnfCmGWsT9ZInU0xw="}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.content b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.content
index 6d795fb..b98e87c 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.content
@@ -1 +1 @@
-html,body,div,ul,li,h1,a,img,span,p{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ul{list-style:none}@font-face{font-family:open sans;font-weight:600;font-style:normal;src:url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot);src:url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot?#iefix)format("embedded-opentype"),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2)format("woff2"),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff)format("woff"),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf)format("truetype"),url(//fonts.gstatic.com/l/font?kit=MTP_ySUJH_bn48VBG8sNSllIn5tFQcqMuf-jhyJP0ps&skey=a162967ffaa5aa08&v=v13#OpenSans)format("svg")}@font-face{font-family:open sans;font-weight:700;font-style:normal;src:url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot);src:url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot?#iefix)format("embedded-opentype"),local("Open Sans Bold"),local("Open-Sans-700"),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2)format("woff2"),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff)format("woff"),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf)format("truetype"),url(//fonts.gstatic.com/l/font?kit=k3k702ZOKiLJc3WVjuplzFlIn5tFQcqMuf-jhyJP0ps&skey=cd9e1a36bb25a3c3&v=v13#OpenSans)format("svg")}@font-face{font-family:open sans;font-weight:400;font-style:normal;src:url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);src:url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix)format("embedded-opentype"),local("Open Sans"),local("Open-Sans-regular"),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2)format("woff2"),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff)format("woff"),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf)format("truetype"),url(//fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4&skey=62c1cbfccc78b4b2&v=v13#OpenSans)format("svg")}body{font-family:open sans,helvetica neue,Helvetica,Arial,sans-serif;font-size:50%;line-height:1.5;background:#fff;color:#2f2f2f}.main-container{font-size:125%}.main-container a{color:#989898;text-decoration:none}.main-container a:hover{color:#2f2f2f}.main-container .accent-text{color:#224afa}.main-container a.accent-text:hover{color:#1538d1}.padder{padding-left:2em;padding-right:2em}.nav-container,.header{background:#f1f1f1}.navbar{position:relative;z-index:5;height:7.1em;max-height:7.1em;padding-top:2em}.logo{float:left}.logo:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.logo img{vertical-align:middle}.links{visibility:hidden;opacity:0;position:absolute;top:100%;right:-2em;left:-2em;padding:1em 0;background:#f1f1f1;text-align:center;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1);-webkit-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.links li{padding:.5em 0}.links .active a{color:#2f2f2f}.links a{font-size:1.8em;font-weight:600;-webkit-transition:all 500ms;-moz-transition:all 500ms;-ms-transition:all 500ms;-o-transition:all 500ms;transition:all 500ms}.break-word{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.main-description{position:relative}.main-description h1{position:relative;font-size:4em;font-weight:700;line-height:1.15;padding-top:1.3em;padding-bottom:1.3em;z-index:1}.main-description img{position:absolute;bottom:0;display:block;max-width:100%;height:auto}.categories .category{margin-top:3em}.categories .category.line{margin:0}.categories .name{font-size:1.6em;font-weight:700;text-transform:uppercase;margin-bottom:.472em}.categories .description{color:#989898;font-size:1.8em;font-weight:600}.default-text{color:#2f2f2f}.bold-text{font-weight:700}.transparent{opacity:0}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes fadeIn{0%{opacity:0}40%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}40%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeIn;animation-name:fadeIn}@media only screen and (min-width:22.5625em){.main-description h1{font-size:4.6em;padding-top:1.923em;padding-bottom:1.923em}.categories .category{margin-top:5em}.categories .name{margin-bottom:.625em}}@media only screen and (min-width:33.5625em){.main-description h1{font-size:5.2em}}@media only screen and (min-width:46.3125em){.links{visibility:visible;opacity:1;position:static;float:right;width:auto;padding:0;height:100%;-webkit-box-shadow:none;box-shadow:none}.links:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.links li{display:inline-block;width:auto;margin-left:4em;vertical-align:middle}.burger-wrap{display:none}.showBurger .burger-wrap{display:block}.showBurger .links{visibility:hidden;opacity:0;position:absolute;float:none;height:auto;padding:1em 0;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1)}.showBurger .links:before{display:none}.showBurger .links>li{display:list-item;margin:0}.main-description h1{font-size:5.4em;line-height:1.1428;padding-top:2.3148em;padding-bottom:2.3148em}.categories .category,.categories .name,.categories .description{float:left}.categories .category{width:100%}.categories .name{width:30%;margin-bottom:0}.categories .description{width:70%}.projects{margin-top:10em}.clearfix:after{content:"";display:block;clear:both}}@media only screen and (min-width:58.5em){.main-description h1{padding-bottom:3.907em}.categories .category{margin-top:7.5em}.categories .name{width:42.47787%}.categories .description{width:57.52213%}}@media only screen and (min-width:73.125em){.main-container{overflow-x:hidden}.container{max-width:117em;margin:0 auto}.showBurger .links{left:-100%;right:-100%}}
\ No newline at end of file
+html,body,div,ul,li,h1,a,img,span,p{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ul{list-style:none}@font-face{font-family:open sans;font-weight:600;font-style:normal;src:url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot);src:url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot?#iefix)format("embedded-opentype"),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2)format("woff2"),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff)format("woff"),url(//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf)format("truetype"),url(//fonts.gstatic.com/l/font?kit=MTP_ySUJH_bn48VBG8sNSllIn5tFQcqMuf-jhyJP0ps&skey=a162967ffaa5aa08&v=v13#OpenSans)format("svg")}@font-face{font-family:open sans;font-weight:700;font-style:normal;src:url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot);src:url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot?#iefix)format("embedded-opentype"),local("Open Sans Bold"),local("Open-Sans-700"),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2)format("woff2"),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff)format("woff"),url(//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf)format("truetype"),url(//fonts.gstatic.com/l/font?kit=k3k702ZOKiLJc3WVjuplzFlIn5tFQcqMuf-jhyJP0ps&skey=cd9e1a36bb25a3c3&v=v13#OpenSans)format("svg")}@font-face{font-family:open sans;font-weight:400;font-style:normal;src:url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);src:url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix)format("embedded-opentype"),local("Open Sans"),local("Open-Sans-regular"),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2)format("woff2"),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff)format("woff"),url(//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf)format("truetype"),url(//fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4&skey=62c1cbfccc78b4b2&v=v13#OpenSans)format("svg")}.padder{padding-left:2em;padding-right:2em}.accent-text{color:#224afa}.default-text{color:#2f2f2f}.bold-text{font-weight:700}.transparent{opacity:0}.break-word{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.clearfix:after{content:"";display:block;clear:both}body{font-family:open sans,helvetica neue,Helvetica,Arial,sans-serif;font-size:50%;line-height:1.5;background:#fff;color:#2f2f2f}a{color:#224afa;text-decoration:none}a:hover{color:#1538d1}.main-container{font-size:125%;overflow-x:hidden}.nav-container,.header{background:#f1f1f1}.navbar{position:relative;z-index:5;height:7.1em;max-height:7.1em;padding-top:2em}.logo{float:left}.logo:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.logo img{vertical-align:middle}.links{visibility:hidden;opacity:0;position:absolute;top:100%;right:-2em;left:-2em;padding:1em 0;background:#f1f1f1;text-align:center;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1);-webkit-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.links li{padding:.5em 0}.links a{color:#989898;font-size:1.8em;font-weight:600;-webkit-transition:all 500ms;-moz-transition:all 500ms;-ms-transition:all 500ms;-o-transition:all 500ms;transition:all 500ms}.links a:hover{color:#2f2f2f}.links a.active{color:#2f2f2f}.main-description{position:relative}.main-description h1{position:relative;font-size:4em;font-weight:700;line-height:1.15;padding-top:1.3em;padding-bottom:1.3em;z-index:1}.main-description img{position:absolute;bottom:0;display:block;max-width:100%;height:auto}.category{margin-top:3em}.category.line{margin:0}.category-label{font-size:1.6em;font-weight:700;text-transform:uppercase;margin-bottom:.472em}.category-content{color:#989898;font-size:1.8em;font-weight:600}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes fadeIn{0%{opacity:0}40%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}40%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:fadeIn;animation-name:fadeIn}@media only screen and (min-width:22.5625em){.main-description h1{font-size:4.6em;padding-top:1.923em;padding-bottom:1.923em}.category{margin-top:5em}.category-label{margin-bottom:.625em}}@media only screen and (min-width:33.5625em){.main-description h1{font-size:5.2em}}@media only screen and (min-width:46.3125em){.links{visibility:visible;opacity:1;position:static;float:right;width:auto;padding:0;height:100%;-webkit-box-shadow:none;box-shadow:none}.links:before{display:inline-block;vertical-align:middle;content:'';height:100%;width:0}.links li{display:inline-block;width:auto;margin-left:4em;vertical-align:middle}.burger-holder{display:none}.showBurger .burger-holder{display:block}.showBurger .links{visibility:hidden;opacity:0;position:absolute;float:none;height:auto;padding:1em 0;-webkit-box-shadow:0 5px 7px 0 rgba(1,1,1,.1);box-shadow:0 5px 7px 0 rgba(1,1,1,.1)}.showBurger .links:before{display:none}.showBurger .links>li{display:list-item;margin:0}.main-description h1{font-size:5.4em;line-height:1.1428;padding-top:2.3148em;padding-bottom:2.3148em}.category{width:100%;float:left}.category>div{float:left}.category-label{width:30%;margin-bottom:0}.category-content{width:70%}.projects{margin-top:10em}}@media only screen and (min-width:58.5em){.main-description h1{padding-bottom:3.907em}.category{margin-top:7.5em}.category-label{width:42.47787%}.category-content{width:57.52213%}}@media only screen and (min-width:73.125em){.container{max-width:117em;margin:0 auto}.showBurger .links{left:-100%;right:-100%}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json
index 43afe82..50961a4 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json
+++ b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -1 +1 @@
-{"Target":"scss/critical.min.408018769d3db0945f44b14695ac22393eed6164dc85d5ef663c2e0d529be35c.css","MediaType":"text/css","Data":{"Integrity":"sha256-QIAYdp09sJRfRLFGlawiOT7tYWTchdXvZjwuDVKb41w="}}
\ No newline at end of file
+{"Target":"scss/critical.min.75bd93ef516259b65ea82b157044c325ccb9c492691ba643af86ef6b6bb45ed3.css","MediaType":"text/css","Data":{"Integrity":"sha256-db2T71FiWbZeqCsVcETDJcy5xJJpG6ZDr4bva2u0XtM="}}
\ No newline at end of file
diff --git a/layouts/partials/modules/text-groups.html b/layouts/partials/modules/text-groups.html
index f978088..bae5c12 100644
--- a/layouts/partials/modules/text-groups.html
+++ b/layouts/partials/modules/text-groups.html
@@ -3,10 +3,10 @@
   {{- range . -}}
     <div class="category{{with .class}} {{.}}{{end}}">
       {{- with .name -}}
-        <div class="name">{{- . | safeHTML -}}</div>
+        <div class="category-label">{{- . | safeHTML -}}</div>
       {{- end -}}
       {{- with .description -}}
-        <div class="description">{{- . | safeHTML -}}</div>
+        <div class="category-content">{{- . | safeHTML -}}</div>
       {{- end -}}
     </div>
   {{- end -}}
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 25c6b5f..4734efd 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -5,7 +5,7 @@
     <div class="padder">
       <div class="navbar animated slideInDown">
         <div class="logo"><a href="{{.Site.BaseURL}}"><img src="{{.Site.Params.logoImage | relURL}}" alt="{{.Site.Params.logoImageAlt}}"></a></div>
-        <div class="burger-wrap">
+        <div class="burger-holder">
           <div class="burger">
             <div class="top"></div>
             <div class="middle"></div>
@@ -15,7 +15,7 @@
         <ul class="links">
           {{$permalink := .Permalink}}
           {{- range .Site.Menus.main -}}
-            <li {{if in $permalink .URL }}class="active"{{end}}><a href="{{.URL}}">{{.Name}}</a></li>
+            <li><a href="{{.URL}}"{{if in $permalink .URL}} class="active"{{end}}>{{.Name}}</a></li>
           {{- end -}}
         </ul>
       </div>