feat: Add character-dialog shortcode and stylesheet

There has been a massive uptick in spam within the past two weeks. A
form field called `_gotcha` is a little on-the-nose, so as a first pass
effort, rename the field to something that sounds more legitimate for a
contact form. More involved strategies will be put in place, but this is
a quick and dirty fix that is worth a try based on the time involved.

assets/styles/mix-twbs.scss

@@ -0,0 +1,179 @@
+$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 "960x320 center" }}
+  {{ $croppedImage := $thumbnailImage.Fill "1500x500 center" }}
 <style>
   .motto::before {
     background-image: url('{{ $croppedImage.Permalink }}');