Move from CSS to SCSS (#86)

* Rewrite existing style.css with sass

* Add "uses-rst" class for pages that use rendered RST

This replaces the previous method of just listing
every page in the sass

* Remove old debug print

* Mixins and error pages

* Newly built CSS

* Add SASS cache to .gitignore

* New error SASS

* Slight changes to error template

* Add UIKit SCSS to repo

This includes the LICENSE and our customizations, which
makes life way easier for contributors

* Reorganize sass folder; your watchers can avoid uikit now

* Sass folder should be called scss

* Change variable names

* [SCSS] Linting

* Fix scss_lint gem name [ci skip]

* [SCSS] Now you can compile with just Python!

* Temporary hack to make the wiki editor taller

* [SCSS] @jchristgit

* [SCSS.py] Require specification of include dir to simplify the SCSS imports

* [SCSS] All inline styles have been removed

* [SCSS] Update UIKit theme to import from our variables

* [SCSS] Remove extra newlines in errors/_common.scss

22 files changed, 788 insertions, 0 deletions

diff --git a/scss/pysite/_fonts.scss b/scss/pysite/_fonts.scss
new file mode 100644
index 00000000..51c88e96
--- /dev/null
+++ b/scss/pysite/_fonts.scss
@@ -0,0 +1,20 @@
+// Styling related to specific font-faces.
+// scss-lint:disable QualifyingElement UrlFormat
+
+@font-face {
+  font-family: "Fira Code";
+
+  src: url("https://unpkg.com/firacode/distr/eot/FiraCode-Regular.eot");
+  src: url("https://unpkg.com/firacode/distr/eot/FiraCode-Regular.eot?#iefix") format("embedded-opentype"),
+       url("https://unpkg.com/firacode/distr/woff2/FiraCode-Regular.woff2") format("woff2"),
+       url("https://unpkg.com/firacode/distr/woff/FiraCode-Regular.woff") format("woff"),
+       url("https://unpkg.com/firacode/distr/ttf/FiraCode-Regular.ttf")  format("truetype");
+}
+
+.fira-code {
+  font-family: 'Fira Code', "monospace", Fallback;
+}
+
+textarea.fira-code {
+  line-height: 1.3 !important;
+}
diff --git a/scss/pysite/_mixins.scss b/scss/pysite/_mixins.scss
new file mode 100644
index 00000000..a7883a23
--- /dev/null
+++ b/scss/pysite/_mixins.scss
@@ -0,0 +1,43 @@
+// scss-lint:disable VendorPrefix
+
+@mixin linear_gradient_background($base_colour, $start_colour, $end_colour) {
+  // Apply a linear gradient background to a selector
+  // scss-lint:disable DuplicateProperty NameFormat
+
+  background: $base_colour;
+  background: -webkit-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+  background: -moz-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+  background: -ms-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+  background: -o-linear-gradient(top, $start_colour 3%, $end_colour 100%);
+  background: -webkit-gradient(linear, top, bottom, color-stop(3%, $start_colour), color-stop(100%, $end_colour));
+  background: linear-gradient(to bottom, $start_colour 3%, $end_colour 100%);
+
+  // Why is this a thing?
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$base_colour}', endColorstr='#{$end_colour}', GradientType=0);
+}
+
+@mixin box_shadow($offset_x, $offset_y, $colour, $blur_radius: 0, $spread_radius: 0) {
+  // Apply a box shadow to a selector
+  -webkit-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour;
+  -moz-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour;
+  box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour;
+}
+
+@mixin inset_box_shadow($offset_x, $offset_y, $colour, $blur_radius: 0, $spread_radius: 0) {
+  // Apply an inset box shadow to a selector
+  -webkit-box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour;
+  -moz-box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour;
+  box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour;
+}
+
+@mixin border_radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin transition($type, $time, $effect) {
+  transition: $type $time $effect;
+  -moz-transition: $type $time $effect;
+  -webkit-transition: $type $time $effect;
+}
diff --git a/scss/pysite/_uikit_shim.scss b/scss/pysite/_uikit_shim.scss
new file mode 100644
index 00000000..38e58abc
--- /dev/null
+++ b/scss/pysite/_uikit_shim.scss
@@ -0,0 +1,110 @@
+// Styling that modifies things that are already provided
+// by UIKit. This file is intended to be imported from the
+// main `style.scss`.
+
+
+@import "variables";
+
+$button_dark_background_colour: rgba(0, 0, 0, .95);
+$button_dark_border_colour: rgba(34, 34, 34, .93);
+$button_dark_hover_background_colour: rgba(0, 0, 0, .70);
+
+$button_darkish_background_colour: rgba(0, 0, 0, .11);
+$button_darkish_border_colour: rgba(34, 34, 34, .09);
+$button_darkish_hover_background_colour: rgba(0, 0, 0, .22);
+
+$dropbar_background_colour: #222222;
+$nav_header_colour: #666666;
+
+.uk-offcanvas-content {
+  flex: 1 0 auto;
+}
+
+.uk-background-secondary .uk-navbar-dropdown-nav {
+  .uk-active a {
+    color: $white;
+  }
+
+  .uk-nav-header {
+    color: $nav_header_colour;
+    font-size: 120%;
+    font-weight: bold;
+    padding: 0;
+    text-transform: none;
+
+    &.uk-active {
+      color: $white;
+    }
+  }
+
+  .uk-navbar-dropbar {
+    background: $dropbar_background_colour;
+  }
+}
+
+.uk-navbar-container,
+.uk-sticky-placeholder,
+.uk-navbar-nav > li > a,
+.uk-navbar-left > a {
+  height: 70px;
+}
+
+.uk-navbar-dropdown {
+  overflow-y: auto;
+  top: 45px !important;
+}
+
+.uk-article-title {
+  margin-bottom: 0 !important;
+}
+
+.uk-article-meta {
+  margin-left: 2px;
+  margin-top: 0 !important;
+}
+
+.uk-section {
+  padding-bottom: 30px;
+  padding-top: 20px;
+}
+
+.uk-heading-divider .uk-article-meta {
+  margin-bottom: 0;
+}
+
+footer {
+  // scss-lint:disable QualifyingElement
+  flex-shrink: 0;
+
+  div.uk-section {
+    padding: 0;
+
+    div.uk-text-center {
+      margin-top: 20px;
+    }
+  }
+}
+
+.uk-button-dark {
+  background: $button_dark_background_colour;
+  border: 1px solid $button_dark_border_colour;
+  color: $white;
+
+  :hover {
+    background: $button_dark_hover_background_colour;
+  }
+}
+
+.uk-button-darkish {  // Technically our own style, but uses the uk prefix
+  background: $button_darkish_background_colour;
+  border: 1px solid $button_darkish_border_colour;
+
+  :hover {
+    background: $button_darkish_hover_background_colour;
+  }
+}
+
+.uk-navbar-container {
+  padding-left: 40px;
+  padding-right: 40px;
+}
diff --git a/scss/pysite/_variables.scss b/scss/pysite/_variables.scss
new file mode 100644
index 00000000..4b249387
--- /dev/null
+++ b/scss/pysite/_variables.scss
@@ -0,0 +1,8 @@
+// Variables for use throughout the site's SCSS files
+
+
+$white: #FFFFFF;
+$black: #000000;
+$red: #FF0000;
+
+$primary_background: #7289DA;
diff --git a/scss/pysite/pages/_rst.scss b/scss/pysite/pages/_rst.scss
new file mode 100644
index 00000000..8274eb5f
--- /dev/null
+++ b/scss/pysite/pages/_rst.scss
@@ -0,0 +1,19 @@
+// Page-specific styling for pages that make use of embedded
+// RST documents that have been parsed into HTML.
+
+
+$page_classes: (
+  uses-rst,  // All pages that declare their use of the RST parser
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .document li p {
+      margin-bottom: 0;
+    }
+
+    .document img {
+      margin-bottom: 20px;
+    }
+  }
+}
diff --git a/scss/pysite/pages/errors/_common.scss b/scss/pysite/pages/errors/_common.scss
new file mode 100644
index 00000000..27dac785
--- /dev/null
+++ b/scss/pysite/pages/errors/_common.scss
@@ -0,0 +1,131 @@
+@import "mixins";
+@import "variables";
+
+$close_button_background: #FF5F4F;
+
+$error_header_color: #E84149;
+
+$half_opacity_black: rgba(0, 0, 0, .5);
+
+$maximize_button_background: #19CC32;
+$minimize_button_background: #F9C206;
+
+$muted_background: #E8E8E8;
+
+$top_bar_background_gradient_1: #F1F1F1;
+$top_bar_background_gradient_2: #E9E9E9;
+$top_bar_background_gradient_3: #D8D8D8;
+$top_bar_bottom_border: #BDBCC1;
+$top_bar_shadow_colour: rgba(255, 255, 255, .76);
+
+$window_border: #C1C2C2;
+
+$page_classes: (
+  blueprint-error,  // All error pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .window {
+      @include border_radius(4px);
+      @include box_shadow(0, 4px, $half_opacity_black, 12px);
+
+      border: 1px solid $window_border;
+      height: 500px;
+      margin: 20px auto auto;
+      width: 100%;
+    }
+
+    .inside {
+      background: $black;
+      height: 100%;
+      padding-right: 20px;
+    }
+
+    .block {
+      background: $black;
+      width: 100%;
+    }
+
+    .top,
+    .panel {
+      float: left;
+    }
+
+    .top {
+      @include linear_gradient_background($top_bar_background_gradient_1, $top_bar_background_gradient_2, $top_bar_background_gradient_3);
+      @include inset_box_shadow(0, 1px, $top_bar_shadow_colour, 1px, 0);
+
+      border-bottom: 2px solid $top_bar_bottom_border;
+      overflow: hidden;
+      padding: 7px 0;
+      position: relative;
+      width: 100%;
+    }
+
+    .panel {
+      padding-left: 9px;
+      padding-top: 2px;
+    }
+
+    // Window buttons
+
+    #terminal-close,
+    #second-button,
+    #third-button {
+      @include border_radius(6px);
+
+      cursor: pointer;
+      display: inline-block;
+      float: left;
+      height: 12px;
+      margin-right: 7px;
+      width: 12px;
+    }
+
+    #terminal-close {
+      background: $close_button_background;
+    }
+
+    #second-button {
+      background: $minimize_button_background;
+    }
+
+    #third-button {
+      background: $maximize_button_background;
+    }
+
+    #terminal {
+      background-color: $black;
+      color: $white;
+      height: 100%;
+      width: 100%;
+
+      code {
+        white-space: pre-wrap;
+      }
+    }
+
+    pre {
+      border: 0;
+      border-radius: 3px;
+    }
+
+    .uk-background-muted,
+    .error-header {
+      background-color: $muted_background !important;
+    }
+
+    .error-header {
+      color: $error_header_color;
+      font-family: monospace;
+    }
+
+    code,
+    pre {
+      overflow-wrap: break-word;
+      width: 100%;
+      word-wrap: break-word;
+    }
+  }
+}
diff --git a/scss/pysite/pages/main/_index.scss b/scss/pysite/pages/main/_index.scss
new file mode 100644
index 00000000..36a046cf
--- /dev/null
+++ b/scss/pysite/pages/main/_index.scss
@@ -0,0 +1,11 @@
+$page_classes: (
+  page-main-index,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    #invite-button {
+      padding: 0;
+    }
+  }
+}
diff --git a/scss/pysite/pages/main/about/_partners.scss b/scss/pysite/pages/main/about/_partners.scss
new file mode 100644
index 00000000..280d9a46
--- /dev/null
+++ b/scss/pysite/pages/main/about/_partners.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-main-about-partners,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    #partner-cards .uk-card-default {
+      margin-top: 2em;
+      text-align: center;
+    }
+  }
+}
diff --git a/scss/pysite/pages/main/about/_privacy.scss b/scss/pysite/pages/main/about/_privacy.scss
new file mode 100644
index 00000000..b4203f8d
--- /dev/null
+++ b/scss/pysite/pages/main/about/_privacy.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-main-about-privacy,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    td,
+    th {
+      max-width: 30rem;
+    }
+  }
+}
diff --git a/scss/pysite/pages/main/info/_resources.scss b/scss/pysite/pages/main/info/_resources.scss
new file mode 100644
index 00000000..ec2854d7
--- /dev/null
+++ b/scss/pysite/pages/main/info/_resources.scss
@@ -0,0 +1,29 @@
+$page_classes: (
+  page-main-info-resources,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .payment-icon {
+      margin-right: 1em;
+
+      img {
+        height: 2em;
+      }
+    }
+
+    .payment-description {
+      height: 3.7rem;
+      margin-right: .5rem;
+      vertical-align: text-bottom;
+    }
+
+    .resource-title {
+      margin-bottom: -1rem;
+
+      div {
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/scss/pysite/pages/main/jams/_index.scss b/scss/pysite/pages/main/jams/_index.scss
new file mode 100644
index 00000000..80e6fd3d
--- /dev/null
+++ b/scss/pysite/pages/main/jams/_index.scss
@@ -0,0 +1,11 @@
+$page_classes: (
+  page-main-jams-index,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .date-separator {
+      vertical-align: middle;
+    }
+  }
+}
diff --git a/scss/pysite/pages/main/jams/_join.scss b/scss/pysite/pages/main/jams/_join.scss
new file mode 100644
index 00000000..6281edee
--- /dev/null
+++ b/scss/pysite/pages/main/jams/_join.scss
@@ -0,0 +1,33 @@
+$page_classes: (
+  page-main-jams-join,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .question-label {
+      margin-top: 0;
+    }
+
+    .checkbox-label {
+      padding-left: .7rem;
+    }
+
+    .radio-label {
+      padding-left: .7rem;
+      padding-right: 1rem;
+    }
+
+    .range-label {
+      padding-left: .3rem;
+    }
+
+    .textarea {
+      min-height: 15rem;
+      resize: vertical;
+    }
+
+    .slider-label {
+      margin-right: 1rem;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/jams/_edit_ending.scss b/scss/pysite/pages/staff/jams/_edit_ending.scss
new file mode 100644
index 00000000..c21d3bd8
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/_edit_ending.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-staff-jams-edit-ending,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    #editor {
+      min-height: 50vh;
+      resize: vertical;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/jams/_edit_info.scss b/scss/pysite/pages/staff/jams/_edit_info.scss
new file mode 100644
index 00000000..5863c2bb
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/_edit_info.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-staff-jams-edit-info,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .editor {
+      min-height: 30vh;
+      resize: vertical;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/jams/forms/_preamble_edit.scss b/scss/pysite/pages/staff/jams/forms/_preamble_edit.scss
new file mode 100644
index 00000000..2847b3d5
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/forms/_preamble_edit.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-staff-jams-forms-preamble-edit,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .editor {
+      min-height: 30vh;
+      resize: vertical;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/jams/forms/_questions_view.scss b/scss/pysite/pages/staff/jams/forms/_questions_view.scss
new file mode 100644
index 00000000..eea8eab2
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/forms/_questions_view.scss
@@ -0,0 +1,13 @@
+$page_classes: (
+  page-staff-jams-forms-questions,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .delete-question-button,
+    .edit-question-button {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/jams/forms/_view.scss b/scss/pysite/pages/staff/jams/forms/_view.scss
new file mode 100644
index 00000000..f0a233f3
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/forms/_view.scss
@@ -0,0 +1,13 @@
+$page_classes: (
+  page-staff-jams-forms-view,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .delete-question-button,
+    .edit-question-button {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/jams/infractions/_view.scss b/scss/pysite/pages/staff/jams/infractions/_view.scss
new file mode 100644
index 00000000..bcee8fdf
--- /dev/null
+++ b/scss/pysite/pages/staff/jams/infractions/_view.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-staff-jams-infractions,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .delete-infraction-button {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/tables/_edit.scss b/scss/pysite/pages/staff/tables/_edit.scss
new file mode 100644
index 00000000..17b1fecd
--- /dev/null
+++ b/scss/pysite/pages/staff/tables/_edit.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-staff-tables-edit,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    #editor {
+      min-height: 50vh;
+      resize: vertical;
+    }
+  }
+}
diff --git a/scss/pysite/pages/staff/tables/_table.scss b/scss/pysite/pages/staff/tables/_table.scss
new file mode 100644
index 00000000..cfe5b658
--- /dev/null
+++ b/scss/pysite/pages/staff/tables/_table.scss
@@ -0,0 +1,12 @@
+$page_classes: (
+  page-staff-tables-table,
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .delete-infraction-button {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+}
diff --git a/scss/pysite/pages/wiki/_common.scss b/scss/pysite/pages/wiki/_common.scss
new file mode 100644
index 00000000..c5ab3a2f
--- /dev/null
+++ b/scss/pysite/pages/wiki/_common.scss
@@ -0,0 +1,82 @@
+@import "variables";
+
+$quote_colour: #99AAB5;
+$sidebar_button_border_colour: rgba(0, 0, 0, .11);
+
+$page_classes: (
+  blueprint-wiki,  // All wiki pages
+);
+
+@each $class in $page_classes {
+  .#{$class} {
+    .quote {
+      border-left: 3px solid $primary_background;
+      color: $quote_colour;
+      margin-bottom: 1rem;
+      padding-left: 20px;
+    }
+
+    #wiki-nav .uk-nav-divider {
+      min-width: 8rem;
+    }
+
+    #wiki-sidebar {
+      transition: width ease 1s;
+    }
+
+    #wiki-page {
+      overflow-x: hidden;
+    }
+
+    #wiki-sidebar-button {
+      align-items: center;
+      border: 1px solid $sidebar_button_border_colour;
+      color: $white;
+      height: 3rem;
+      justify-content: center;
+      min-height: 3rem;
+      min-width: 3rem;
+      width: 3rem;
+    }
+
+    #doc-view {
+      width: calc(100% - 6rem);
+    }
+
+    @media (max-width: 639px) {
+      #doc-view {
+        width: calc(100% - 1rem);
+      }
+    }
+
+    #editor {
+      min-height: 50vh;
+      resize: vertical;
+    }
+
+    .sidebar-search-input {
+      border-left: 0;
+      border-right: 0;
+      margin-top: 5px;
+      padding-right: 0;
+    }
+
+    .search-button {
+      border: 0;
+      width: 100%;
+    }
+
+    .content {
+      flex-grow: 1;
+      margin: 0 1rem 1rem;
+    }
+
+    .location-input {
+      margin-left: 15px;
+    }
+
+    .preview-title {
+      padding: 1rem 1rem .1rem;
+    }
+  }
+}
diff --git a/scss/pysite/style.scss b/scss/pysite/style.scss
new file mode 100644
index 00000000..09396faf
--- /dev/null
+++ b/scss/pysite/style.scss
@@ -0,0 +1,169 @@
+// General imports, for styles that apply to all pages
+// scss-lint:disable QualifyingElement
+
+@import "fonts";
+@import "mixins";
+@import "uikit_shim";
+@import "variables";
+
+/*
+  Page-specific styling imports
+
+  You can target pages in the following ways:
+
+  * For specific pages, take the view name, prefix it with
+    "page-" and replace all the dots with dashes. This will
+    give you a class that only matches that page.
+  * For all pages under a specific blueprint, take the blueprint
+    name, prefix it with "blueprint-" and replace all the dots with
+    dashes. This will give you a class that matches every page
+    under that blueprint.
+
+  For example:
+    "main.index.jams" -> ".page-main-index-jams"
+    "wiki" -> ".blueprint-wiki"
+
+  Additionally, you can use your own class names for categories of pages.
+  For example, you might provide a "uses-rst" class, which you would then
+  make use of in your templates by putting it in a "page_classes" block.
+
+  For example:
+    {% block page_classes %}uses-rst{% endblock %}
+
+  If you do this, make sure you document it on the wiki!
+*/
+
+
+// Styles useful across all pages
+@import "pages/rst";
+
+// Sectional: Errors Blueprint
+@import "pages/errors/common";
+
+// Sectional: Main Blueprint
+@import "pages/main/index";
+
+@import "pages/main/about/partners";
+@import "pages/main/about/privacy";
+
+@import "pages/main/info/resources";
+
+@import "pages/main/jams/index";
+@import "pages/main/jams/join";
+
+// Sectional: Staff Blueprint
+@import "pages/staff/jams/edit_ending";
+@import "pages/staff/jams/edit_info";
+
+@import "pages/staff/jams/forms/preamble_edit";
+@import "pages/staff/jams/forms/questions_view";
+@import "pages/staff/jams/forms/view";
+
+@import "pages/staff/jams/infractions/view";
+
+@import "pages/staff/tables/edit";
+@import "pages/staff/tables/table";
+
+// Sectional: Wiki Blueprint
+@import "pages/wiki/common";
+
+/*
+  Custom styling using our own classes and IDs. If instead you're
+  modifying existing UIKit styles to better suit our site, you should
+  put it in the UIKit shim file instead.
+*/
+
+$table_border_colour: rgb(229, 229, 229);
+
+html {
+  height: 100%;
+
+  body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+}
+
+.navbar-logo {
+  height: 60%;
+  margin-left: -10px;
+  margin-top: 2px;
+  max-width: 110%;
+  padding-left: 3px;
+}
+
+.hover-title a {
+  @include transition(opacity, 200ms, ease-in-out);
+
+  opacity: 0;
+  visibility: hidden;
+}
+
+.hover-title:hover a {
+  @include transition(opacity, 200ms, ease-in-out);
+
+  opacity: 1;
+  visibility: visible;
+}
+
+.debug-mode-item {
+  color: $primary_background !important;
+}
+
+.sponsor-logo {
+  max-width: 15rem;
+}
+
+.cursor-default {
+  cursor: default !important;
+}
+
+.full-width {
+  width: 100%;
+}
+
+// Forms
+
+select {
+  -webkit-appearance: unset !important;
+
+  left: auto !important;
+  opacity: 1 !important;
+  position: relative !important;
+  top: auto !important;
+}
+
+div.danger-input * {
+  border-color: $red !important;
+  color: $red;
+
+  transition: color .5s ease,
+              border-color .5s ease;
+}
+
+// Tables
+
+table.table-bordered {
+  border: 1px solid $table_border_colour !important;
+}
+
+tr.thick-bottom-border {
+  border-bottom: 3px solid $table_border_colour !important;
+}
+
+td.left-border,
+th.left-border {
+  border-left: 1px solid $table_border_colour !important;
+}
+
+td.right-border,
+th.right-border {
+  border-right: 1px solid $table_border_colour !important;
+}
+
+// Flash of Unstyled Content fixes
+
+.prevent-fouc {
+  display: none;
+}