extract styles from layout into separate sass modules

11 files changed, 549 insertions, 376 deletions

diff --git a/assets/scss/404.scss b/assets/scss/404.scss
new file mode 100644
index 0000000..e7847c1
--- /dev/null
+++ b/assets/scss/404.scss
@@ -0,0 +1,70 @@
+.error404 {
+  height: 100%;
+}
+
+.error404 body,
+.error404 .main-container,
+.error404 .header,
+.error404 .container,
+.error404 .padder {
+  height: 100%;
+}
+
+.error404 .header {
+  overflow: hidden;
+}
+
+.error404 .main-description {
+  height: 100%;
+}
+
+.error404 .main-description h1 {
+  padding-bottom: 0.370em;
+}
+
+.error404 .main-description p {
+  display: inline;
+  font-size: 2em;
+  font-weight: 600;
+  color: #989898;
+}
+
+.error404 .main-description .img-col {
+  display: none;
+}
+
+@media screen and (max-height: 25em) {
+  .error404 .main-description h1 {
+    font-size: 4em;
+    padding-top: 1.3em;
+  }
+}
+
+@media screen and (min-width: 56.25em), (min-height: 52.5625em) and (min-width: 56.25em) {
+  .error404 .main-description p {
+    display: block;
+  }
+
+  .error404 .main-description .img-col {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 47%;
+  }
+
+  .error404 .main-description img {
+    position: static;
+    display: inline;
+    max-width: none;
+    max-height: 75em;
+    bottom: 9.1em;
+    z-index: -1;
+  }
+}
+
+@media screen and (max-height: 52.5625em) and (min-width: 56.25em) {
+  .error404 .main-description img {
+    bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
new file mode 100644
index 0000000..952827f
--- /dev/null
+++ b/assets/scss/_base.scss
@@ -0,0 +1,25 @@
+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;
+}
\ No newline at end of file
diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss
new file mode 100644
index 0000000..4b1a0b6
--- /dev/null
+++ b/assets/scss/_fonts.scss
@@ -0,0 +1,39 @@
+@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');
+}
\ No newline at end of file
diff --git a/assets/scss/critical.scss b/assets/scss/critical.scss
new file mode 100644
index 0000000..ca0ecef
--- /dev/null
+++ b/assets/scss/critical.scss
@@ -0,0 +1,387 @@
+@import "base";
+@import "fonts";
+
+body {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 50%;
+  line-height: 1.5;
+  background: white;
+  color: #2f2f2f;
+}
+
+.main-container {
+  font-size: 125%;
+}
+
+.main-container a {
+  color: #989898;
+  text-decoration: none;
+}
+
+.main-container a:hover {
+  color: #2f2f2f;
+}
+
+.main-container .blue-text {
+  color: #224afa;
+}
+
+.main-container a.blue-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: 0px;
+}
+
+.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: 0.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: 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;
+}
+
+.categories .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 {
+  font-size: 1.8em;
+  font-weight: 600;
+  color: #989898;
+}
+
+.default-text {
+  color: #2f2f2f;
+}
+
+.bold-text {
+  font-weight: bold;
+}
+
+.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: 0.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: 0px;
+  }
+
+  .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
diff --git a/exampleSite/resources/_gen/assets/scss/scss/404.scss_48b060fe05b0a273d182ef83c0605941.content b/exampleSite/resources/_gen/assets/scss/scss/404.scss_48b060fe05b0a273d182ef83c0605941.content
new file mode 100644
index 0000000..c8e4a0c
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/404.scss_48b060fe05b0a273d182ef83c0605941.content
@@ -0,0 +1 @@
+.error404{height:100%}.error404 body,.error404 .main-container,.error404 .header,.error404 .container,.error404 .padder{height:100%}.error404 .header{overflow:hidden}.error404 .main-description{height:100%}.error404 .main-description h1{padding-bottom:.37em}.error404 .main-description p{display:inline;font-size:2em;font-weight:600;color:#989898}.error404 .main-description .img-col{display:none}@media screen and (max-height:25em){.error404 .main-description h1{font-size:4em;padding-top:1.3em}}@media screen and (min-width:56.25em),(min-height:52.5625em) and (min-width:56.25em){.error404 .main-description p{display:block}.error404 .main-description .img-col{display:block;position:absolute;bottom:0;right:0;width:47%}.error404 .main-description img{position:static;display:inline;max-width:none;max-height:75em;bottom:9.1em;z-index:-1}}@media screen and (max-height:52.5625em) and (min-width:56.25em){.error404 .main-description img{bottom:0}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/404.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/404.scss_48b060fe05b0a273d182ef83c0605941.json
new file mode 100644
index 0000000..88db7ba
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/404.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -0,0 +1 @@
+{"Target":"scss/404.min.801f3e74fd90c5e59ed0db29d1022fd77d90744d534aec80b555dcacfc17631f.css","MediaType":"text/css","Data":{"Integrity":"sha256-gB8+dP2QxeWe0Nsp0QIv132QdE1TSuyAtVXcrPwXYx8="}}
\ 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
new file mode 100644
index 0000000..9ab72d9
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.content
@@ -0,0 +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 .blue-text{color:#224afa}.main-container a.blue-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{font-size:1.8em;font-weight:600;color:#989898}.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
diff --git a/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json
new file mode 100644
index 0000000..b7646f4
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/critical.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -0,0 +1 @@
+{"Target":"scss/critical.min.225b298ee1b5f8d864b7f44b91fa712648d0e22c5a2cda0677f0d3c7dfd144e2.css","MediaType":"text/css","Data":{"Integrity":"sha256-IlspjuG1+Nhkt/RLkfpxJkjQ4ixaLNoGd/DTx9/RROI="}}
\ No newline at end of file
diff --git a/layouts/404.html b/layouts/404.html
index c9c8caf..854bb3a 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,52 +1,11 @@
 {{- define "page-class" -}}error404{{- end -}}
 {{- define "head-includes" -}}
   {{- partialCached "head-includes.html" . -}}
+  {{with partial "funcs/GetCSS.html" (dict "sourcePath" "scss/404.scss" "enableSourceMap" false)}}
   <style>
-    .error404 {
-      height: 100%; }
-      .error404 body, .error404 .main-container, .error404 .header, .error404 .container, .error404 .padder {
-        height: 100%; }
-      .error404 .header {
-        overflow: hidden; }
-
-    .error404 .main-description {
-      height: 100%; }
-      .error404 .main-description h1 {
-        padding-bottom: 0.370em; }
-      .error404 .main-description p {
-        display: inline;
-        font-size: 2em;
-        font-weight: 600;
-        color: #989898; }
-      .error404 .main-description .img-col {
-        display: none; }
-
-    @media screen and (max-height: 25em) {
-      .error404 .main-description h1 {
-        font-size: 4em;
-        padding-top: 1.3em; } }
-
-    @media screen and (min-width: 56.25em), (min-height: 52.5625em) and (min-width: 56.25em) {
-      .error404 .main-description p {
-        display: block; }
-      .error404 .main-description .img-col {
-        display: block;
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        width: 47%; }
-      .error404 .main-description img {
-        position: static;
-        display: inline;
-        max-width: none;
-        max-height: 75em;
-        bottom: 9.1em;
-        z-index: -1; } }
-
-    @media screen and (max-height: 52.5625em) and (min-width: 56.25em) {
-      .error404 .main-description img {
-        bottom: 0; } }
+    {{.Content | safeCSS}}
   </style>
+  {{end}}
 {{- end -}}
 {{- define "main" -}}
   <div class="main-container">
diff --git a/layouts/partials/funcs/GetCSS.html b/layouts/partials/funcs/GetCSS.html
new file mode 100644
index 0000000..bcbb7a1
--- /dev/null
+++ b/layouts/partials/funcs/GetCSS.html
@@ -0,0 +1,14 @@
+{{$isProduction := hugo.IsProduction}}
+{{$sassOptions := dict "enableSourceMap" (.enableSourceMap | default (not $isProduction))}}
+
+{{with .outputPath}}
+  {{$sassOptions = merge $sassOptions (dict "targetPath" .)}}
+{{end}}
+
+{{$css := resources.Get .sourcePath | toCSS $sassOptions}}
+
+{{if $isProduction}}
+  {{$css = $css | minify | fingerprint}}
+{{end}}
+
+{{return $css}}
\ No newline at end of file
diff --git a/layouts/partials/head-includes.html b/layouts/partials/head-includes.html
index 9058b6e..c2be4eb 100644
--- a/layouts/partials/head-includes.html
+++ b/layouts/partials/head-includes.html
@@ -1,339 +1,14 @@
+{{with partial "funcs/GetCSS.html" (dict "sourcePath" "scss/critical.scss" "enableSourceMap" false)}}
 <style>
-  a,
-  body,
-  div,
-  h1,
-  html,
-  img,
-  li,
-  span,
-  ul,
-  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: white;
-    color: #2f2f2f; }
-
-  .main-container {
-    font-size: 125%; }
-    .main-container a {
-      color: #989898;
-      text-decoration: none; }
-    .main-container a:hover {
-      color: #2f2f2f; }
-    .main-container .blue-text {
-      color: #224afa; }
-    .main-container a.blue-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: 0px; }
-    .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: 0.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: 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; }
-
-  .categories .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 {
-    font-size: 1.8em;
-    font-weight: 600;
-    color: #989898; }
-
-  .default-text {
-    color: #2f2f2f; }
-
-  .bold-text {
-    font-weight: bold; }
-
-  .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: 0.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: 0px; }
-    .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%; }
-  }
+  {{.Content | safeCSS}}
 </style>
+{{end}}
+{{with partial "funcs/GetCSS.html" (dict "sourcePath" "scss/app.scss" "outputPath" "css/app.css")}}
 <noscript id="deferredCss">
-  {{$isProduction := hugo.IsProduction | or (eq .Site.Params.env "production")}}
-  {{$sassOptions := dict "targetPath" "css/app.css" "enableSourceMap" (not $isProduction)}}
-
-  {{$css := resources.Get "scss/app.scss" | toCSS $sassOptions}}
-
-  {{if $isProduction}}
-    {{$css = $css | minify | fingerprint}}
-  {{end}}
-  <link rel="stylesheet" href="{{$css.RelPermalink}}">
+  <link rel="stylesheet" href="{{.RelPermalink}}">
 </noscript>
+{{end}}
 <script>
   document.createElement("picture");
 </script>
-<script src="https://cdn.jsdelivr.net/picturefill/3.0.2/picturefill.min.js" async></script>
+<script src="https://cdn.jsdelivr.net/picturefill/3.0.2/picturefill.min.js" async></script>
\ No newline at end of file