Switch styles to Sass

assets/styles/main.css

@@ -1,123 +0,0 @@
-.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, 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;
-}
-
-.list-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%;
-  }
-
-  .w-md-50 {
-    width: 50%;
-  }
-}
-
-h1 small {
-  font-size: 60%;
-  color: #9a9a9a;
-  font-weight: 300;
-  line-height: 1.5;
-}
-
-h1 {
-  font-weight: 400;
-  margin: 30px 0 15px;
-}
-
-.dogear {
-  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
-}
-
-.fa-stack-top {
-  vertical-align: top;
-}

assets/styles/mix-twbs.scss

@@ -0,0 +1,125 @@
+.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, 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;
+  }
+
+  .list-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%;
+    }
+
+    .w-md-50 {
+      width: 50%;
+    }
+  }
+
+  h1 small {
+    font-size: 60%;
+    color: #9a9a9a;
+    font-weight: 300;
+    line-height: 1.5;
+  }
+
+  h1 {
+    font-weight: 400;
+    margin: 30px 0 15px;
+  }
+
+  .dogear {
+    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
+  }
+
+  .fa-stack-top {
+    vertical-align: top;
+  }
+
+@import "bootstrap/bootstrap";

layouts/_default/baseof.html

@@ -5,11 +5,8 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ .Title }} - {{ .Site.Title }}</title>
-  {{ $twbscss := resources.Get "styles/bootstrap/bootstrap.scss" | resources.ToCSS }}
-  {{ $mycss := resources.Get "styles/main.css" }}
-  {{ $allcss := slice $twbscss $mycss | resources.Concat "css/bundle.css" }}
-  {{ $allcsspure := $allcss | resources.PostCSS (dict "nomap" true) | minify | fingerprint | resources.PostProcess }}
-  <link href="{{ $allcsspure.Permalink }}" rel="stylesheet" />
+  {{ $twbssass := resources.Get "styles/mix-twbs.scss" | resources.ToCSS | minify | resources.PostProcess }}
+  <link href="{{ $twbssass.Permalink }}" rel="stylesheet" />
   </head>
 
   {{ $millironx := resources.Get "graphics/millironx.svg" }}