style: Delete old sass styles

Now that we know the `.container` can be 60rem max, we can safely use a
smaller size for the header images, reducing page size by 100kb on
average based on my testing.

assets/styles/mix-twbs.scss

@@ -1,179 +0,0 @@
-$web-font-path: "/fonts/nunito-sans/index.css";
-
-@import "bootstrap/functions";
-@import "bootswatch/lux/variables";
-@import "bootstrap/bootstrap";
-@import "bootswatch/lux/bootswatch";
-
-$peek-height: 25rem;
-
-.blurred-container {
-  position: relative;
-  width: 100%;
-  min-height: 35vh;
-  height: $peek-height;
-  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;
-  -webkit-text-stroke: 0.3px $gray-100;
-  line-height: 1;
-}
-
-.blurred-container .img-src {
-  position: fixed;
-  width: 100%;
-  min-height: 35vh;
-  height: $peek-height;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
-}
-
-.list-main {
-  position: relative;
-  background-color: #fff;
-  padding-bottom: calc(1rem + 95px);
-  padding-top: 1rem;
-}
-
-.footer-contents {
-  position: relative;
-  background-color: $gray-200;
-}
-
-/* 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;
-}
-
-.table-condensed th {
-  padding: 0.5rem;
-}
-
-.table-condensed td {
-  padding: 0.5rem;
-}
-
-@media (min-width: map-get($grid-breakpoints, md)) {
-  .fixed-bottom {
-    left: 25%;
-  }
-
-  .md-max-width-33 {
-    max-width: 33%;
-  }
-}
-
-.card-link {
-  white-space: nowrap;
-}
-
-.category-button {
-  position: absolute;
-  top: 1em;
-  right: 1em;
-  display: grid;
-}
-
-.card-title {
-  margin-right: 2.25em;
-}
-
-.thumb-icon-wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.thumb-icon-badge {
-  font-size: xx-large;
-}

layouts/partials/scrolling-image-header.html

@@ -1,6 +1,6 @@
 {{ $thumbnailImage := .Resources.GetMatch "*thumbnail*" }}
 {{ with $thumbnailImage }}
-  {{ $croppedImage := $thumbnailImage.Fill "1500x500 center" }}
+  {{ $croppedImage := $thumbnailImage.Fill "960x320 center" }}
 <style>
   .motto::before {
     background-image: url('{{ $croppedImage.Permalink }}');