Initial Hugo port

static/css/custom.css

@@ -0,0 +1,89 @@
+.site-header {
+    background: #202226;
+}
+/* TODO Proper theme overrides */
+h1, .site-title {
+    color: #00ADFF !important;
+}
+.page-link {
+    color: white !important;
+}
+.bigimage {
+  transform: skew(-10deg);
+  color: white;
+  padding: 2em;
+  height: 50vh;
+  width: 100%;
+  text-align: center;
+}
+/*My kingdom for a 'backdrop-filter'!*/
+img.background {
+  color: black;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: -1;
+  -webkit-filter: blur(2px);
+  filter: blur(2px);
+  -webkit-transition: .3s ease-in-out;
+  transition: .3s ease-in-out;
+}
+.bigimage:hover img {
+    -webkit-filter: blur(0);
+	filter: blur(0);
+}
+a.button {
+    transform: skew(10deg);
+    color: white;
+    touch-callout: none;
+    user-select: none;
+    display: inline-block;
+    border: .2em solid;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 0.5em;
+    background: rgba(255, 255, 255, 0.3);
+}
+.badge {
+    /* Center the content */
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border-radius: 0.5em;
+
+    /* Spacing */
+    padding: 4px 8px;
+}
+.bg-green {
+    background: green;
+}
+* {
+  box-sizing: border-box;
+}
+/* This technique doesn't naturally cause horizontal overflow, but once there is natural vertical overflow, it causes horizontal overflow, so stopping here. */
+body {
+  overflow-x: hidden;
+}
+img { 
+  max-width: 100%; 
+}
+p, figure {
+  margin: 15px 0;
+}
+.full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+figcaption {
+  text-align: center;
+  color: #999;
+}