Move custom style code to its own file

assets/styles/main.css

@@ -0,0 +1,111 @@
+.blurred-container {
+    position: relative;
+    width: 100%;
+    min-height: 35vh;
+    height: 350px;
+    top: 0;
+    left: 0;
+}
+
+.blurred-container .motto {
+    color: #fff;
+    font-size: 76px;
+    font-weight: 600;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, .33);
+    text-transform: uppercase;
+    top: 7.5vh;
+    z-index: 3;
+    display: block;
+    margin: 0 auto;
+    position: relative;
+    width: 60%;
+    height: 0
+}
+
+.motto h1 {
+    background: #0000007d;
+}
+
+.blurred-container .img-src {
+    position: fixed;
+    width: 100%;
+    min-height: 35vh;
+    height: 350px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+}
+
+.blur {
+    opacity: 0;
+}
+
+main {
+    position: relative;
+    background-color: #fff;
+}
+
+/* Gives me greater control over fonts */
+.font-serif {
+    font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+.font-sans {
+    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.font-mono {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.font-small-caps {
+    font-variant-caps: small-caps;
+}
+
+.strikethrough {
+    text-decoration: line-through;
+}
+
+.sfTable {
+    margin: 0 auto;
+}
+
+.text-align-left {
+    text-align: left
+}
+
+.text-align-right {
+    text-align: right;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+.media-object {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+@media (min-width: 768px) {
+    .pull-left {
+        max-width: 25%;
+    }
+}
+
+h1 small {
+    font-size: 60%;
+    color: #9a9a9a;
+    font-weight: 300;
+    line-height: 1.5;
+}
+
+h1 {
+    font-weight: 400;
+    margin: 30px 0 15px;
+}

layouts/_default/baseof.html

@@ -8,122 +8,10 @@
     <title>{{ .Title }} - {{ .Site.Title }}</title>
 
     {{ $twbscss := resources.Get "node/node_modules/bootstrap/scss/bootstrap.scss" | resources.ToCSS }}
-    {{ $allcss := slice $twbscss | resources.Concat "css/bundle.css" }}
+    {{ $mycss := resources.Get "styles/main.css" }}
+    {{ $allcss := slice $twbscss $mycss | resources.Concat "css/bundle.css" }}
     {{ $allcsspure := $allcss | resources.PostCSS | minify | fingerprint | resources.PostProcess }}
     <link href="{{ $allcsspure.Permalink }}" rel="stylesheet">
-    <style>
-        .blurred-container {
-            position: relative;
-            width: 100%;
-            min-height: 35vh;
-            height: 350px;
-            top: 0;
-            left: 0;
-        }
-
-        .blurred-container .motto {
-            color: #fff;
-            font-size: 76px;
-            font-weight: 600;
-            text-align: center;
-            text-shadow: 0 0 10px rgba(0, 0, 0, .33);
-            text-transform: uppercase;
-            top: 7.5vh;
-            z-index: 3;
-            display: block;
-            margin: 0 auto;
-            position: relative;
-            width: 60%;
-            height: 0
-        }
-
-        .motto h1 {
-            background: #0000007d;
-        }
-
-        .blurred-container .img-src {
-            position: fixed;
-            width: 100%;
-            min-height: 35vh;
-            height: 350px;
-            background-repeat: no-repeat;
-            background-size: cover;
-            background-position: center center;
-        }
-
-        .blur {
-            opacity: 0;
-        }
-
-        main {
-            position: relative;
-            background-color: #fff;
-        }
-
-        /* Gives me greater control over fonts */
-        .font-serif {
-            font-family: Georgia, "Times New Roman", Times, serif;
-        }
-
-        .font-sans {
-            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        }
-
-        .font-mono {
-            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-        }
-
-        .font-small-caps {
-            font-variant-caps: small-caps;
-        }
-
-        .strikethrough {
-            text-decoration: line-through;
-        }
-
-        .sfTable {
-            margin: 0 auto;
-        }
-
-        .text-align-left {
-            text-align: left
-        }
-
-        .text-align-right {
-            text-align: right;
-        }
-
-        .float-left {
-            float: left;
-        }
-
-        .float-right {
-            float: right;
-        }
-
-        .media-object {
-            max-height: 100%;
-            max-width: 100%;
-        }
-
-        @media (min-width: 768px) {
-            .pull-left {
-                max-width: 25%;
-            }
-        }
-
-        h1 small {
-            font-size: 60%;
-            color: #9a9a9a;
-            font-weight: 300;
-            line-height: 1.5;
-        }
-
-        h1 {
-            font-weight: 400;
-            margin: 30px 0 15px;
-        }
-    </style>
 </head>
 
 {{ $millironx := resources.Get "graphics/millironx.svg" }}