defer non-critical css

layouts/partials/css.html

@@ -0,0 +1,482 @@
+<style type="text/css">
+html {
+    font-family: sans-serif;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%
+}
+
+body {
+    margin: 0
+}
+
+a {
+    background-color: transparent
+}
+
+h1 {
+    margin: .67em 0;
+    font-size: 2em
+}
+
+img {
+    border: 0
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+:after,:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+html {
+    font-size: 10px;
+    -webkit-tap-highlight-color: rgba(0,0,0,0)
+}
+
+body {
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333;
+    background-color: #fff
+}
+
+a {
+    color: #337ab7;
+    text-decoration: none
+}
+
+img {
+    vertical-align: middle
+}
+
+.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img {
+    display: block;
+    max-width: 100%;
+    height: auto
+}
+
+.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit
+}
+
+.h1,.h2,.h3,h1,h2,h3 {
+    margin-top: 20px;
+    margin-bottom: 10px
+}
+
+.h4,.h5,.h6,h4,h5,h6 {
+    margin-top: 10px;
+    margin-bottom: 10px
+}
+
+.h1,h1 {
+    font-size: 36px
+}
+
+.h4,h4 {
+    font-size: 18px
+}
+
+p {
+    margin: 0 0 10px
+}
+
+ol,ul {
+    margin-top: 0;
+    margin-bottom: 10px
+}
+
+.container-fluid {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto
+}
+
+.row {
+    margin-right: -15px;
+    margin-left: -15px
+}
+
+.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
+    position: relative;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px
+}
+
+.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
+    float: left
+}
+
+.col-xs-12 {
+    width: 100%
+}
+
+.col-xs-6 {
+    width: 50%
+}
+
+@media (min-width: 768px) {
+    .col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9 {
+        float:left
+    }
+
+    .col-sm-8 {
+        width: 66.66666667%
+    }
+
+    .col-sm-6 {
+        width: 50%
+    }
+
+    .col-sm-4 {
+        width: 33.33333333%
+    }
+}
+
+@media (min-width: 992px) {
+    .col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9 {
+        float:left
+    }
+
+    .col-md-9 {
+        width: 75%
+    }
+
+    .col-md-4 {
+        width: 33.33333333%
+    }
+
+    .col-md-3 {
+        width: 25%
+    }
+}
+
+.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before {
+    display: table;
+    content: " "
+}
+
+.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after {
+    clear: both
+}
+
+.visible-lg,.visible-md,.visible-sm,.visible-xs {
+    display: none!important
+}
+
+html,body {
+    overflow-x: hidden
+}
+
+.img-responsive {
+    margin: 0 auto
+}
+
+a,button {
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out
+}
+
+a i.fa,button i.fa {
+    margin: 0 5px
+}
+
+#sidebar {
+    padding-top: 18px;
+    padding-left: 36px;
+    padding-right: 0
+}
+
+.sidebar-content {
+    z-index: 0;
+    padding: 0 1.7em 0 0
+}
+
+@media screen and (min-width: 992px) {
+    .sidebar-content {
+        padding-left:0;
+        padding-right: 18px
+    }
+}
+
+.sidebar-heading {
+    font-size: 24px;
+    text-transform: uppercase;
+    letter-spacing: .1em
+}
+
+.sidebar-heading a {
+    color: #000;
+    text-decoration: none;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out
+}
+
+.sidebar-p {
+    color: #555;
+    font-size: 14px
+}
+
+.sidebar-menu {
+    list-style-type: none;
+    padding-left: 12px;
+    margin-bottom: 12px
+}
+
+.sidebar-menu li {
+    margin-bottom: 5px
+}
+
+.sidebar-menu li a {
+    color: #555
+}
+
+.sidebar-menu li:before {
+    font-family: fontawesome;
+    content: '\f105';
+    margin: 0 5px 0 -15px;
+    color: #555
+}
+
+.sidebar-menu li.active a {
+    color: #379392;
+    font-weight: 700
+}
+
+.sidebar-menu li.active:before {
+    color: #379392
+}
+
+.content-column {
+    padding-top: 26px;
+    padding-left: 36px;
+    padding-right: 36px
+}
+
+.grid {
+    padding-top: 5px;
+    overflow-y: hidden
+}
+
+.small-navbar {
+    margin-bottom: 20px
+}
+
+p.social {
+    margin-top: 12px
+}
+
+p.social a {
+    margin: 0 10px 10px 0;
+    color: #fff;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    line-height: 40px;
+    font-size: 15px;
+    text-align: center;
+    vertical-align: bottom;
+    border: solid 1px #555;
+    color: #555;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out
+}
+
+.copyright {
+    color: #555;
+    font-size: 13px
+}
+
+.copyright p.credit {
+    margin-bottom: 10px
+}
+
+.copyright p.credit a {
+    color: #225b5b
+}
+
+.grid {
+    margin-right: -15px;
+    margin-left: -15px
+}
+
+.box-masonry {
+    background: #fff;
+    margin-bottom: 30px;
+    position: relative;
+    box-shadow: 0 0 5px #ccc;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+.box-masonry h4 {
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .1em
+}
+
+.box-masonry h4 a {
+    color: #000;
+    border-bottom: solid 1px transparent
+}
+
+.box-masonry .box-masonry-text {
+    padding: 15px 20px
+}
+
+.box-masonry .box-masonry-text p {
+    color: #555;
+    font-size: 14px
+}
+
+.box-masonry h2:last-child,.box-masonry p:last-child {
+    margin-bottom: 0
+}
+
+.box-masonry .box-masonry-image {
+    display: block;
+    position: relative;
+    min-height: 100px;
+    background: #ccc
+}
+
+.box-masonry .box-masonry-image.with-hover-overlay:before {
+    display: block;
+    position: absolute;
+    content: " ";
+    background: #fff;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out
+}
+
+.box-masonry .box-masonry-image.with-hover-icon:after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translate(0,-50%);
+    -ms-transform: translate(0,-50%);
+    transform: translate(0,-50%);
+    opacity: 0;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    transition: all .2s ease-out;
+    font-family: fontawesome;
+    content: '\f105';
+    text-align: center;
+    font-size: 50px;
+    color: #555
+}
+
+body {
+    font-family: roboto,Helvetica,Arial,sans-serif;
+    font-size: 16px;
+    line-height: 1.55;
+    color: #000;
+    background-color: #f4f4f4
+}
+
+a {
+    color: #379392;
+    text-decoration: none
+}
+
+h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
+    font-family: roboto,Helvetica,Arial,sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
+    color: #000;
+    margin-top: 8px;
+    margin-bottom: 8px
+}
+
+h1,.h1 {
+    font-size: 48px
+}
+
+h4,.h4 {
+    font-size: 24px;
+    font-weight: 700
+}
+
+h1,.h1,h2,.h2,h3,.h3 {
+    margin-top: 8px;
+    margin-bottom: 8px
+}
+
+p {
+    margin: 0 0 24px
+}
+
+.fa {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+.fa-envelope:before {
+    content: "\f0e0"
+}
+
+.fa-linkedin:before {
+    content: "\f0e1"
+}
+
+.fa-instagram:before {
+    content: "\f16d"
+}
+
+p,ul,blockquote {
+    margin-top: 8px;
+    margin-bottom: 8px
+}
+
+ul,ol {
+    padding-inline-start:0;margin-left: 1em
+}
+
+li {
+    margin-left: .1em
+}
+
+.row {
+    display: flex;
+    justify-content: center
+}
+
+.box-masonry-text h4 {
+    margin-top: 0;
+    margin-bottom: 5.5px
+}
+</style>

layouts/partials/head.html

@@ -7,13 +7,14 @@
     {{ .Site.Title }}
   {{ end }}
 </title>
+{{ partial "css.html" . }}
 {{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="{{ "css/bootstrap.min.css" | absURL }}">
+<link rel="preload" href="{{ "css/bootstrap.min.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,700,400italic">
+<link rel="preload" href="//fonts.googleapis.com/css?family=Roboto:400,300,700,400italic" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<link rel="stylesheet" href="{{ "css/font-awesome.min.css" | absURL }}">
+<link rel="preload" href="{{ "css/font-awesome.min.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<link rel="stylesheet" href="{{ "css/owl.carousel.css" | absURL }}">
+<link rel="preload" href="{{ "css/owl.carousel.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<link rel="stylesheet" href="{{ "css/owl.theme.css" | absURL }}">
+<link rel="preload" href="{{ "css/owl.theme.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <!-- Theme stylesheet, if possible do not edit this stylesheet -->
 {{ with .Site.Params.style }}
   <link href="{{ printf "css/style.%s.css" . | absURL }}" rel="stylesheet" id="theme-stylesheet">
@@ -30,7 +31,7 @@
   ` | safeHTML }}
 
 <!-- Custom stylesheet - for your changes -->
-<link href="{{ "css/custom.css" | absURL }}" rel="stylesheet">
+<link rel="preload" href="{{ "css/custom.css" | absURL }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <link rel="shortcut icon" href="{{ "img/favicon.png" | absURL }}">
 {{ with .OutputFormats.Get "RSS" }}
   {{ printf `<link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML }}