From 6f732e7de4990e7dfabc5696004a45901c6403d4 Mon Sep 17 00:00:00 2001
From: Stuart Olivera <stuart@stuartolivera.com>
Date: Thu, 30 May 2019 01:03:03 -0400
Subject: [PATCH 1/6] docs: Add recommendation notes to deployment platform
 list

---
 docs/deployment.md | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/deployment.md b/docs/deployment.md
index 9be06081c..1c5e0430c 100755
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -16,22 +16,28 @@ To get started, deploy HackathonManager onto one of three supported platforms:
 
 ## Heroku
 
-Easiest & quickest way that requires little server knowledge, however isn't cheap (free tier not recommended)
+Easiest & quickest way that requires little server knowledge.
+
+Recommended if you aren't familiar with running a Linux virtual machine and can spend ~$17/month.
 
 [Get Started with Heroku &raquo;](deployment-heroku.md)
 
 ## Dokku
 
-A free alternative to Heroku, runs on your own virtual machine
+A free alternative to Heroku, runs on your own virtual machine.
+
+Recommended if you're on a budget and can set up Dokku on a Linux virtual machine, usually $5-10/month.
 
-[Get Started with Heroku &raquo;](deployment-dokku.md)
+[Get Started with Dokku &raquo;](deployment-dokku.md)
 
 ## OKD/OpenShift
 
-"Enterprise Kubernetes for Developers" packaged with a useful management UI + tooling
+"Enterprise Kubernetes for Developers" packaged with a useful management UI + tooling.
+
+Recommended if you already have an existing, reliable OKD/Kubernetes cluster.
 
 [Get Started with OKD &raquo;](deployment-okd.md)
 
 ### Other methods
 
-HackathonManager can also be deployed the same as any other Rails app, however this is **not** natively supported and will require you to fork this repo to integrate code changes.
+HackathonManager can also be deployed the same as any other Rails app, however this is **not** natively supported and will require you to fork this repo to integrate & maintain code changes.

From 3240c4b109cd1d16b154ef243c77af6a6c0f5030 Mon Sep 17 00:00:00 2001
From: Stuart Olivera <stuart@stuartolivera.com>
Date: Thu, 30 May 2019 01:03:32 -0400
Subject: [PATCH 2/6] docs: Clarify prerequisites to deploying on Dokku

---
 docs/deployment-dokku.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/deployment-dokku.md b/docs/deployment-dokku.md
index eb9023fbb..7cb4c684b 100644
--- a/docs/deployment-dokku.md
+++ b/docs/deployment-dokku.md
@@ -3,7 +3,11 @@ id: deployment-dokku
 title: Dokku Deployment
 ---
 
-Below are steps & notes to deploy HackathonManager on Dokku. This assumes you already have [Dokku](http://dokku.viewdocs.io/dokku/) running on a machine and can SSH into the box. DNS should likely be set up as well, but isn't required for bare minimum functionality.
+Below are steps & notes to deploy HackathonManager on Dokku.
+
+>This assumes you already have a virtual machine with [Dokku](http://dokku.viewdocs.io/dokku/) running on it, and can SSH into the VM. DNS should be set up as well, but isn't required for bare minimum functionality.
+>
+>If you need a VM, check out [DigitalOean](https://m.do.co/c/b5ee103e23c3) or [Linode](https://www.linode.com/?r=e90a6fb2a6999fb4ec7b60b1add3e288f97954bf) and the [Dokku docs](http://dokku.viewdocs.io/dokku/) to get started.
 
 If you have any questions at all, please don't hesitate to reach out to [Stuart](https://github.com/sman591)! This doc is very much a work in progress but we want to keep it as up to date as possible.
 
@@ -11,8 +15,8 @@ If you have any questions at all, please don't hesitate to reach out to [Stuart]
 
 Currently used and required Dokku plugins (other than the defaults):
 
-- [MySQL](https://github.com/dokku/dokku-mysql)
-- [Redis](https://github.com/dokku/dokku-redis) (required by Sidekiq)
+- [MySQL](https://github.com/dokku/dokku-mysql) (data storage)
+- [Redis](https://github.com/dokku/dokku-redis) (background jobs + caching)
 - [dokku-letsencrypt](https://github.com/dokku/dokku-letsencrypt) (Optional: free, automated SSL certificates)
 
 ### Dokku Setup Steps

From dcb58802b4bf8eb21414b2dd0fb5989b964283ca Mon Sep 17 00:00:00 2001
From: Stuart Olivera <stuart@stuartolivera.com>
Date: Thu, 30 May 2019 12:41:47 -0400
Subject: [PATCH 3/6] Remove unused mailer.sass

---
 app/assets/stylesheets/mailer.sass | 123 -----------------------------
 config/initializers/assets.rb      |   2 +-
 2 files changed, 1 insertion(+), 124 deletions(-)
 delete mode 100644 app/assets/stylesheets/mailer.sass

diff --git a/app/assets/stylesheets/mailer.sass b/app/assets/stylesheets/mailer.sass
deleted file mode 100644
index 05251f80f..000000000
--- a/app/assets/stylesheets/mailer.sass
+++ /dev/null
@@ -1,123 +0,0 @@
-@import general/variables
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600')
-
-body
-  background: #ccc
-  color: #201e1f
-  font-family: 'Open Sans', sans-serif
-  font-size: 16px
-  font-weight: $font-light
-  text-align: center
-  margin: 0
-  padding: 0
-body *
-  font-family: 'Open Sans', sans-serif
-
-html
-  margin: 0
-  padding: 0
-
-ul
-  list-style: none
-  padding: 0
-
-li
-  margin: 5px 0
-
-table
-  border: 0
-  padding: 0
-  width: 100%
-
-.coderit-logo
-  display: inline-block
-  width: 76px
-  vertical-align: bottom
-
-#content
-  max-width: 800px
-  width: 100%
-  margin: 30px auto
-  background: white
-  @media (max-width: 800px)
-    margin: 0 auto
-
-#main-content
-  background: white
-  padding: 20px 40px 64px
-  @media (max-width: 800px)
-    padding-left: 35px
-    padding-right: 35px
-  @media (max-width: 500px)
-    padding-left: 20px
-    padding-right: 20px
-
-
-.banner
-  width: 100%
-
-.email-footer
-  background: #201e1f
-  padding: 18px 0
-
-.email-footer td span
-  margin-right: 20px
-  color: white
-
-.email-footer td span a
-  color: white
-
-h1, h2
-  line-height: 1.27
-  font-weight: $font-light
-  text-transform: uppercase
-  font-size: 30px
-  color: $primary
-  margin: 30px 0 30px
-
-h3
-  font-weight: 600
-  font-size: 20px
-  text-transform: uppercase
-  color: #fc401c
-
-h4
-  font-weight: 200
-  font-size: 13px
-  text-transform: uppercase
-
-a.nodecor
-  text-decoration: none
-
-p
-  font-weight: $font-light
-  font-size: 16px
-  line-height: 1.7
-  text-align: left
-
-strong
-  font-weight: 600
-
-img
-  max-width: 100%
-
-div.center
-  margin: 0 auto
-
-h1.center,h2.center,h3.center,h4.center,h5.center,h6.center,p.center
-  text-align: center
-
-.button
-  background: $button--background
-  border: 1px solid $button--border
-  display: inline-block
-  padding: 0.6em 1.3em
-  font-size: 15px
-  text-transform: uppercase
-  letter-spacing: 0.07em
-  color: $button--text
-  font-weight: 600
-  margin: 12px 5px
-  text-decoration: none
-  box-shadow: 0 2px 15px rgba($button--background, 0.3)
-  border-radius: 3px
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index e7f4f2857..5a24bbaa8 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -12,4 +12,4 @@
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
-Rails.application.config.assets.precompile += %w[manage.css vendor/*.js vendor/*.css mailer.css]
+Rails.application.config.assets.precompile += %w[manage.css vendor/*.js vendor/*.css]

From c8ea13cddbc7a0584b17206d97523265f4ba6db3 Mon Sep 17 00:00:00 2001
From: Stuart Olivera <stuart@stuartolivera.com>
Date: Thu, 30 May 2019 12:42:26 -0400
Subject: [PATCH 4/6] Reformat Ruby with Rufo

---
 config/initializers/assets.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 5a24bbaa8..f77ff1009 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -1,12 +1,12 @@
 # Be sure to restart your server when you modify this file.
 
 # Version of your assets, change this if you want to expire all your assets.
-Rails.application.config.assets.version = '1.0'
+Rails.application.config.assets.version = "1.0"
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
 # Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')
+Rails.application.config.assets.paths << Rails.root.join("node_modules")
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

From c6c01f5027d3412f90d62690c8a6ae84229b54fa Mon Sep 17 00:00:00 2001
From: Stuart Olivera <stuart@stuartolivera.com>
Date: Thu, 30 May 2019 11:28:32 -0400
Subject: [PATCH 5/6] feat: Use CSS variables instead of SASS variables

In preparation for theming with #142
---
 app/assets/stylesheets/application.sass       |   1 +
 .../stylesheets/forms/_confirmation.sass      |   6 +-
 app/assets/stylesheets/forms/_forms.sass      |  88 ++++++-----
 app/assets/stylesheets/general/_base.sass     |  39 +++--
 app/assets/stylesheets/general/_button.sass   |  42 +++---
 app/assets/stylesheets/general/_css4.scss     |  96 ++++++++++++
 app/assets/stylesheets/general/_flashes.sass  |  10 +-
 app/assets/stylesheets/general/_footer.sass   |   8 +-
 app/assets/stylesheets/general/_header.sass   |  16 +-
 .../stylesheets/general/_media-queries.sass   |   3 +-
 .../stylesheets/general/_status-colors.sass   |   6 +-
 app/assets/stylesheets/general/_table.sass    |  16 +-
 .../stylesheets/general/_variables.sass       | 140 ------------------
 .../stylesheets/general/_variables.scss       | 122 +++++++++++++++
 14 files changed, 364 insertions(+), 229 deletions(-)
 create mode 100644 app/assets/stylesheets/general/_css4.scss
 delete mode 100644 app/assets/stylesheets/general/_variables.sass
 create mode 100644 app/assets/stylesheets/general/_variables.scss

diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 8cdbea9f5..11023f63a 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -12,6 +12,7 @@
  */
 
 @import general/variables
+@import general/css4
 
 // general styles
 @import general/mixins
diff --git a/app/assets/stylesheets/forms/_confirmation.sass b/app/assets/stylesheets/forms/_confirmation.sass
index 2e26111b2..dfc41cfcd 100644
--- a/app/assets/stylesheets/forms/_confirmation.sass
+++ b/app/assets/stylesheets/forms/_confirmation.sass
@@ -5,8 +5,10 @@
   padding: 30px 0
 
   .success_message
-    background: $primary
-    color: $white_pure
+    @include css4
+      background: var(--primary)
+    @include css4
+      color: var(--white-pure)
     margin: 0 auto 25px auto
     padding: 10px 30px
     a
diff --git a/app/assets/stylesheets/forms/_forms.sass b/app/assets/stylesheets/forms/_forms.sass
index 7955a038c..34a76f6a5 100644
--- a/app/assets/stylesheets/forms/_forms.sass
+++ b/app/assets/stylesheets/forms/_forms.sass
@@ -1,12 +1,13 @@
 $form-spacing-horizontal: 9px
 
 #disclaimer, .alert
-  background: $alert--background
-  color: $alert--text
+  @include css4
+    background: var(--alert--background)
+    color: var(--alert--text)
+    border: 1px solid var(--alert--border)
   margin: 5px auto 55px auto
   padding: 18px 35px
   line-height: 1.4
-  border: 1px solid $alert--border
   border-radius: 3px
   box-shadow: 0 6px 35px rgba(0, 0, 0, .1)
 
@@ -28,22 +29,25 @@ fieldset
     margin-right: -10px
 
   legend
-    background: $black
-    color: $white
+    @include css4
+      background: var(--black)
+      color: var(--white)
     width: 100%
     text-align: center
     padding: 0.5em
 
 hr
   border: none
-  border-top: 1px solid $input--border-color
+  @include css4
+    border-top: 1px solid var(--input--border-color)
   margin: 35px 0 40px
   width: 80px
 
 .alert
-  color: $alert--text--error
-  background: $alert--background--error
-  border-color: $alert--border--error
+  @include css4
+    color: var(--alert--text--error)
+    background: var(--alert--background--error)
+    border-color: var(--alert--border--error)
 
 .form-container, .cancel_btn_wrap
   margin: 0 auto
@@ -58,10 +62,12 @@ hr
     margin-bottom: 30px
 
 .simple_form
-  color: $grey
+  @include css4
+    color: var(--grey)
   .error
-    background: $input--error--background
-    color: $input--error--text
+    @include css4
+      background: var(--input--error--background)
+      color: var(--input--error--text)
     font-size: 0.74rem
     padding: 6px 9px
     flex: 1 1 100%
@@ -69,7 +75,8 @@ hr
     text-decoration: none
     position: absolute
     margin-left: -16px
-    color: $input--required-star
+    @include css4
+      color: var(--input--required-star)
     align-self: flex-start
 
 .form-inputs
@@ -99,36 +106,41 @@ label
   align-items: center
   width: 100%
   flex-shrink: 0
-  font-weight: $font-light
+  @include css4
+    font-weight: var(--font-light)
   padding-top: 5px
   padding-bottom: 8px
   text-align: left
 
 // all form input types
 input[type=text], input[type=email], input[type=tel], input[type=date], input[type="url"], input[type=password], input[type=file], input[type=checkbox], input[type=radio], textarea, select
-  background: $input--background
-  color: $input--text
-  font-family: $font-body-family
-  font-weight: $font-reg
+  @include css4
+    background: var(--input--background)
+    color: var(--input--text)
+    font-family: var(--font-body-family)
+    font-weight: var(--font-reg)
+    border: 1px solid var(--input--border-color)
   font-size: 100%
-  border: 1px solid $input--border-color
   margin-bottom: 5px
   outline: none
   padding: 9px 14px
   width: 100%
   @include transition(150ms, border-color, ease-out, 0ms)
-  @include placeholder-color($input--text--placeholder)
+  @include css4
+    @include placeholder-color(var(--input--text--placeholder))
   &:focus
-    color: $input--text--focus
-    background-color: $input--background--focus
-    border-color: $input--border-color--focus
+    @include css4
+      color: var(--input--text--focus)
+      background-color: var(--input--background--focus)
+      border-color: var(--input--border-color--focus)
     border-width: 2px
     padding: 8px 13px
 
 // just selects
 select
   @include appearance (none)
-  background: asset-url("arrow_down_hover.svg"), $input--background
+  @include css4
+    background: asset-url("arrow_down_hover.svg"), var(--input--background)
   background-repeat: no-repeat
   background-position: right
   background-size: auto 100%
@@ -162,7 +174,8 @@ input[type=checkbox]
     -moz-osx-font-smoothing: grayscale
     // end .fa
     content: ""
-    color: $primary
+    @include css4
+      color: var(--primary)
     font-size: 25px
     margin-left: 2px
     margin-top: -4px
@@ -196,7 +209,8 @@ input[type=radio]
   &:checked
     &::after
       content: ""
-      background: $primary
+      @include css4
+        background: var(--primary)
       display: block
       width: 100%
       height: 100%
@@ -221,15 +235,18 @@ input[type=submit]
   margin-top: 20px
 
 .field_with_errors
-  color: $red !important
+  @include css4
+    color: var(--red) !important
 
 .hint
-  color: $input--hint
+  @include css4
+    color: var(--input--hint)
   font-style: italic
   width: 100%
 
 .supporting-text
-  color: $input--hint
+  @include css4
+    color: var(--input--hint)
   line-height: 1.5
   margin-left: $form-spacing-horizontal
   margin-right: $form-spacing-horizontal
@@ -238,17 +255,20 @@ input[type=submit]
 
 // jquery ui override
 .ui-autocomplete
-  background: $input--background--focus
-  border: 1px solid $input--border-color--focus
-  color: $input--text--focus
+  @include css4
+    background: var(--input--background--focus)
+    border: 1px solid var(--input--border-color--focus)
+    color: var(--input--text--focus)
   list-style: none
   padding: 0
   .ui-menu-item a
     padding: 2px 5px
     display: block
     &:hover, &.ui-state-focus
-      background: $primary
-      color: $white
+      @include css4
+        background: var(--primary)
+      @include css4
+        color: var(--white)
 
 // form wizard
 .wizard-stage
diff --git a/app/assets/stylesheets/general/_base.sass b/app/assets/stylesheets/general/_base.sass
index 5819ba5c5..bb0520b52 100644
--- a/app/assets/stylesheets/general/_base.sass
+++ b/app/assets/stylesheets/general/_base.sass
@@ -6,41 +6,49 @@ body, html
   min-height: 250px
 
 body
-  background: $white_pure
-  color: $grey-med
-  font-family: $font-body-family
+  @include css4
+    background: var(--white-pure)
+    color: var(--grey-med)
+    font-family: var(--font-body-family)
+    font-weight: var(--font-light)
   font-size: 16px
-  font-weight: $font-light
   margin: 0
   padding: 0
   overflow-x: hidden
 
 h1, h2, h3
-  font-family: $font-headlines-family
+  @include css4
+    font-family: var(--font-headlines-family)
   margin-top: 0
 h1
   font-size: 2.250rem
-  font-weight: $font-light
+  @include css4
+    font-weight: var(--font-light)
 h2
   font-size: 2rem
-  font-weight: $font-bold
+  @include css4
+    font-weight: var(--font-bold)
 h3
   font-size: 1.750rem
-  font-weight: $font-reg
+  @include css4
+    font-weight: var(--font-reg)
   margin-top: 0px
 h4
-  font-weight: $font-light
+  @include css4
+    font-weight: var(--font-light)
 
 img
   max-width: 100%
   width: 100%
 
 a
-  color: $link--text
+  @include css4
+    color: var(--link--text)
   text-decoration: none
   @include transition(100ms, color, ease-out, 0ms)
   &:hover
-    color: $link--text--hover
+    @include css4
+      color: var(--link--text--hover)
 
 a.underline
   text-decoration: underline
@@ -52,14 +60,17 @@ a.underline
   position: relative
 
 .section-title
-  color: $section-title--text
+  @include css4
+    color: var(--section-title--text)
   font-size: 2.1rem
   line-height: 1.2
   text-align: left
   &.white
-    color: $white
+    @include css4
+      color: var(--white)
   .emphasized
-    color: $section-title--text--emphasized
+    @include css4
+      color: var(--section-title--text--emphasized)
 
 .section-title--actions
   display: flex
diff --git a/app/assets/stylesheets/general/_button.sass b/app/assets/stylesheets/general/_button.sass
index 0b4740f6e..edad98822 100644
--- a/app/assets/stylesheets/general/_button.sass
+++ b/app/assets/stylesheets/general/_button.sass
@@ -3,21 +3,23 @@
  */
 
 .button, input[type=submit]
-  background: $button--background
-  border: 1px solid $button--border
+  @include css4
+    color: var(--button--text)
+    background: var(--button--background)
+    border: 1px solid var(--button--border)
   cursor: pointer
   display: inline-block
   padding: 0.6em 1.3em
   font-size: 15px
   text-transform: uppercase
-  color: $button--text
   font-weight: 600
   text-align: center
   text-decoration: none
   -webkit-appearance: none
   @include transition(150ms, all, ease-in-out, 0ms)
-  @include box-shadow(0 2px 15px rgba($button--background, 0.3))
   @include border-radius(3px)
+  @include css4
+    @include box-shadow(0 2px 15px rgba(var(--button--background), 0.3))
 
   &.button--with-margin
     margin: 0.5em 0.5em 0.5em 0
@@ -27,16 +29,18 @@
     min-width: initial
     padding: 3px 5px
   &:hover, &:focus
-    background: $button--background--hover
-    border-color: $button--border--hover
-    color: $button--text--hover
-    outline-color: $button--background--hover
+    @include css4
+      background: var(--button--background--hover)
+      border-color: var(--button--border--hover)
+      color: var(--button--text--hover)
+      outline-color: var(--button--background--hover)
   &:disabled
-    color: lighten($secondary, 40%)
+    @include css4
+      color: var(--primary-lightest)
+      border: 1px solid var(--primary-lightest)
+      @include box-shadow(inset 0 0 0 0 var(--primary-light))
     background: transparent
-    border: 1px solid lighten($secondary, 35%)
     cursor: default
-    @include box-shadow(inset 0 0 0 0 lighten($secondary, 5%))
 
 .button-center
   margin-left: auto
@@ -44,10 +48,12 @@
 
 .button-outline
   background: transparent
-  border: 1px solid $white_pure
+  @include css4
+    border: 1px solid var(--white-pure)
   &:hover
-    outline-color: lighten($secondary, 5%)
-    border-color: lighten($secondary, 5%)
+    @include css4
+      outline-color: var(--primary-light)
+      border-color: var(--primary-light)
 
 .button-clean
   background: transparent
@@ -72,8 +78,9 @@
 
   &:hover
     transform: scale(1.04)
-    background: $button--background
-    @include box-shadow(0 4px 18px rgba($button--background, 0.35))
+    @include css4
+      background: var(--button--background)
+      @include box-shadow(0 4px 18px rgba(var(--button--background), 0.35))
 
 .my-mlh-cta__text
   flex: 1
@@ -85,7 +92,8 @@
   display: flex
   align-items: center
   flex-flow: row nowrap
-  color: $button--background
+  @include css4
+    color: var(--button--background)
   padding: 0px 9px
   justify-content: center
   border-radius: 0 2px 2px 0
diff --git a/app/assets/stylesheets/general/_css4.scss b/app/assets/stylesheets/general/_css4.scss
new file mode 100644
index 000000000..e0272b2e7
--- /dev/null
+++ b/app/assets/stylesheets/general/_css4.scss
@@ -0,0 +1,96 @@
+/*
+
+Source:
+ - https://css-tricks.com/difference-between-types-of-css-variables/
+ - https://codepen.io/vank0/pen/kkGvAb
+
+Enables use of CSS variables with a default fallback.
+Overrides the var() function, which when wrapped around a "@include css4" block,
+will generate both a CSS variable- and hard-coded definition.
+
+Usage example:
+
+$variables: (
+  --primary: blue;
+}
+
+.my-div {
+  padding: 10px;
+  @include css4 {
+    background: var(--blue);
+  }
+}
+
+Would output:
+
+.my-div {
+  padding: 10px;
+  background: blue;
+  background: var(--blue);
+}
+
+Browsers that support CSS variables will use the second var(--primary) definition,
+while older browsers (i.e. IE 11) will ignore it and use the fallback.
+
+If the CSS variable is dynamically overridden later on in the CSS/HTML/JS,
+older browsers will *not* respect the change. For example,
+
+:root {
+  --primary: red;
+}
+
+New browsers would use "red" for all instances of var(--primary),
+but old browsers would be stuck at "blue".
+
+We accept this trade-off because:
+ - Our main audience is using newer browsers than IE 11
+ - Old browsers will at least render _something_ rather than looking broken
+*/
+
+// Toggle these to debug the fallback
+$css4: true;
+$compatibility: true;
+
+// Here we transfer the variables from the map to the :root element
+@if ($css4) {
+  :root {
+    @each $variable, $value in $variables {
+      #{$variable}: $value;
+    }
+  }
+}
+
+// This is the "magic" function
+@function var($variable) {
+  @if ($css4) {
+    @return unquote('var(' + $variable + ')');
+  } @else {
+    $value: map-get($variables, $variable);
+    $value-as-str: '#{$value}';
+    @if (str-index($value-as-str, 'var')) {
+      // Turns "var(--foo)" into "--foo"
+      // Trade-off: this will use the default, non-customized
+      // variables on old browsers (e.g. IE 11)
+      $deep-variable: str-slice($value-as-str, 5, -2);
+      @return var($deep-variable);
+    } @else {
+      @return $value;
+    }
+  }
+}
+
+// The mixin temporally sets the $css4 variable to false, compiles the css3 fallback, then makes the variable true again and compiles the css4 code. It should contain properties that use css4 variables, otherwise there will be unnessesary duplication of properties.
+@mixin css4 {
+  @if ($css4) {
+    $css4-backup: $css4;
+    @if ($compatibility) {
+      $css4: false !global;
+      @content;
+    }
+    $css4: true !global;
+    @content;
+    $css4: $css4-backup;
+  } @else {
+    @content;
+  }
+}
diff --git a/app/assets/stylesheets/general/_flashes.sass b/app/assets/stylesheets/general/_flashes.sass
index 05c7529db..449578d22 100644
--- a/app/assets/stylesheets/general/_flashes.sass
+++ b/app/assets/stylesheets/general/_flashes.sass
@@ -1,6 +1,7 @@
 .flashes
-  background: $flashes--background
-  color: $flashes--text
+  @include css4
+    background: var(--flashes--background)
+    color: var(--flashes--text)
   padding-top: 20px
   padding-bottom: 20px
   font-weight: 400
@@ -10,8 +11,9 @@
   animation-delay: 0.4s
 
 .flashes--error
-  background: $flashes--error--background
-  color: $flashes--error--text
+  @include css4
+    background: var(--flashes--error--background)
+    color: var(--flashes--error--text)
 
 .flashes__icon
   margin-right: 0.4em
diff --git a/app/assets/stylesheets/general/_footer.sass b/app/assets/stylesheets/general/_footer.sass
index fb46e7886..cf60a18fc 100644
--- a/app/assets/stylesheets/general/_footer.sass
+++ b/app/assets/stylesheets/general/_footer.sass
@@ -1,8 +1,9 @@
 // located in the sidebar
 .footer
-  background: $grey-dark
+  @include css4
+    background: var(--grey-dark)
+    color: var(--offwhite)
   bottom: 0
-  color: $offwhite
   font-size: 0.875rem
   padding: 7px 0
   position: absolute
@@ -11,7 +12,8 @@
   .coderit-logo
     background: url(image_path('coderit_logo.png')) center center no-repeat
     @include background-size (contain)
-    color: $primary
+    @include css4
+      color: var(--primary)
     display: inline-block
     opacity: 0.9
     text-indent: -9999px
diff --git a/app/assets/stylesheets/general/_header.sass b/app/assets/stylesheets/general/_header.sass
index 835cc4629..99e1d8dae 100644
--- a/app/assets/stylesheets/general/_header.sass
+++ b/app/assets/stylesheets/general/_header.sass
@@ -7,7 +7,8 @@ $account-nav-padding-vert: 15px
   display: flex
   flex-flow: row nowrap
   justify-content: center
-  background: $account-header--background
+  @include css4
+    background: var(--account-header--background)
 
 .header__wrapper
   display: flex
@@ -28,7 +29,8 @@ $account-nav-padding-vert: 15px
       margin-right: 0
 
 .account-nav
-  border-bottom: 1px solid $account-nav--border-color
+  @include css4
+    border-bottom: 1px solid var(--account-nav--border-color)
   width: 100%
   display: flex
   flex-flow: row nowrap
@@ -57,14 +59,16 @@ $account-nav-padding-vert: 15px
   margin-left: $account-nav-spacing-horiz
   margin-right: $account-nav-spacing-horiz
   text-transform: uppercase
-  font-weight: $font-bold
-  color: $account-nav--text
+  @include css4
+    font-weight: var(--font-bold)
+    color: var(--account-nav--text)
   @media (max-width: 700px)
     margin-left: 10px
     margin-right: 10px
 
 .account-nav__link--active
-  color: $account-nav--text--active
-  border-bottom: 4px solid $account-nav--border-color--active
+  @include css4
+    color: var(--account-nav--text--active)
+    border-bottom: 4px solid var(--account-nav--border-color--active)
   padding-bottom: $account-nav-padding-vert - 3px
   margin-bottom: -1px
diff --git a/app/assets/stylesheets/general/_media-queries.sass b/app/assets/stylesheets/general/_media-queries.sass
index 31710af01..98296546d 100644
--- a/app/assets/stylesheets/general/_media-queries.sass
+++ b/app/assets/stylesheets/general/_media-queries.sass
@@ -4,7 +4,8 @@
     margin-left: 0
 
   .sidebar
-    left: -$sidebar-width
+    @include css4
+      left: -var(--sidebar-width)
     #sidebar-toggle
       display: block
 
diff --git a/app/assets/stylesheets/general/_status-colors.sass b/app/assets/stylesheets/general/_status-colors.sass
index 1b2ccc273..011169bf3 100644
--- a/app/assets/stylesheets/general/_status-colors.sass
+++ b/app/assets/stylesheets/general/_status-colors.sass
@@ -5,9 +5,11 @@
 .acc-status-waitlist
   color: darken(#0df, 7%)
 .acc-status-late_waitlist
-  color: darken($primary, 20%)
+  @include css4
+    color: var(--primary-darkest)
 .acc-status-pending
-  color: $primary
+  @include css4
+    color: var(--primary)
 .acc-status-rsvp_denied
   color: darken(#f00, 7%)
 .acc-status-rsvp_confirmed
diff --git a/app/assets/stylesheets/general/_table.sass b/app/assets/stylesheets/general/_table.sass
index e4925cbdc..55cb0ecce 100644
--- a/app/assets/stylesheets/general/_table.sass
+++ b/app/assets/stylesheets/general/_table.sass
@@ -1,17 +1,19 @@
 .table
   border: 0
   border-spacing: 0
-  color: $black
+  @include css4
+    color: var(--black)
   margin: 20px 0
   width: 100%
   th, td
     margin: 0
     border: 0
   th
-    background: $secondary
-    color: $white
+    @include css4
+      background: var(--primary)
+      color: var(--white)
+      font-weight: var(--font-light)
     font-size: 1em
-    font-weight: $font-light
     text-align: left
     padding: 9px 13px
   td
@@ -21,6 +23,8 @@
       padding-left: 10px
   tr
     &:nth-child(odd)
-      background: $grey-light
+      @include css4
+        background: var(--grey-light)
     &.accent
-      background: lighten($grey-med, 20%)
+      @include css4
+        background: var(--gray-med-light)
diff --git a/app/assets/stylesheets/general/_variables.sass b/app/assets/stylesheets/general/_variables.sass
deleted file mode 100644
index df5839ffe..000000000
--- a/app/assets/stylesheets/general/_variables.sass
+++ /dev/null
@@ -1,140 +0,0 @@
-// TODO: automatically generate a /app/assets/stylesheets/variable-overrides.sass
-// so people know they can override them, and provide instructions to modify this file.
-
-/*
- * Allow for overridden variables.
- * To use, place a custom `variable-overrides.sass` in your own app, at:
- * /app/assets/stylesheets/variable-overrides.sass
- * with any of the variables below.
- */
-// TODO: support overrides
-
-/*
- * hackathon_manager variables
- *
- * All variables defined below should have the !default flag at the end of
- * the value. This ensures that if the variable is set in variable-overrides,
- * the default value here won't be used.
- */
-
-/*
- * Colors
- */
-$orange     : #f58625 !default
-$black      : #231F20 !default
-$grey       : #6D6E71 !default
-$blue       : #3413ac !default
-$white      : darken(#fff, 1%) !default
-$white-grey : darken($white, 5%) !default
-$red        : #fc401c !default
-
-/*
- * Standardized colors
- */
-$primary      : $orange !default
-$secondary    : $orange !default
-
-/*
- * General colors
- */
-$white_pure   : #FFFFFF !default
-$grey-light   : #bbbbbb !default
-$grey-med     : #888888 !default
-$grey-dark    : #343434 !default
-$offwhite     : #FCF7F2 !default
-
-/*
- * Fonts
- */
-$font-body-family       : 'Open Sans', sans-serif !default
-$font-headlines-family  : 'Open Sans', sans-serif !default
-$font-bold              : 600 !default
-$font-reg               : 400 !default
-$font-light             : 300 !default
-
-/*
- * Constants
- */
-$sidebar-width: 200px !default
-
-/*
- * Media breakpoints
- */
-$breakpoint-tablet: 1000px !default
-
-/*
- * Headings
- */
-$section-title--text: #5d5c77
-$section-title--text--emphasized: $primary
-
-/*
- * Links
- */
-$link--text: $secondary !default
-$link--text--hover: lighten($secondary, 10%) !default
-
-/*
- * Buttons
- */
-$button--background: $primary !default
-$button--border: $primary !default
-$button--text: $white_pure !default
-
-// Hover state
-$button--background--hover: lighten($primary, 15%) !default
-$button--border--hover: lighten($primary, 15%) !default
-$button--text--hover: $white_pure !default
-
-/*
- * Forms
- */
-$input--border-color: #d1d3d4 !default
-$input--background: $white_pure !default
-$input--text: $grey-dark !default
-$input--text--placeholder: #d1d3d4 !default
-
-$input--hint: darken(#d1d3d4, 10%) !default
-$input--error--background: $red !default
-$input--error--text: $white_pure !default
-$input--required-star: #bcbec0 !default
-
-// Focused state
-$input--border-color--focus: $primary !default
-$input--background--focus: $input--background !default
-$input--text--focus: $input--text !default
-
-/*
- * Alerts
- */
-$alert--background: $white_pure !default
-$alert--border: $grey-dark !default
-$alert--text: $grey-dark !default
-
-$alert--background--error: $red !default
-$alert--border--error: $red !default
-$alert--text--error: $white_pure !default
-
-/*
- * Flashes
- */
-$flashes--background: hsl(51, 87%, 94%) !default
-$flashes--text: hsl(40, 68%, 20%) !default
-
-$flashes--error--background: hsl(11, 87%, 94%) !default
-$flashes--error--text: hsl(0, 68%, 20%) !default
-
-/*
- * Account header
- */
-$account-header--background: $grey-dark !default
-
-/*
- * Account navigation
- */
-$account-nav--text: #888
-$account-nav--border-color: $grey-light
-
-// Active state
-$account-nav--text--active: $grey-dark
-$account-nav--border-color--active: $primary
diff --git a/app/assets/stylesheets/general/_variables.scss b/app/assets/stylesheets/general/_variables.scss
new file mode 100644
index 000000000..ee08df24f
--- /dev/null
+++ b/app/assets/stylesheets/general/_variables.scss
@@ -0,0 +1,122 @@
+/*
+
+HackathonManager variables
+
+All variables defined below end up being defined as CSS variables:
+:root {
+  --my-var: ...;
+  ...
+}
+
+Which enables them to be overridden for theming.
+
+It is nessesary to define the variables in sass map instead of :root for compatibility reasons.
+See css4.scss for more details.
+
+*/
+
+$variables: (
+  /*
+   * Colors
+   ***************************************************************************/
+    --black: #231f20,
+  --grey: #6d6e71,
+  --blue: #3413ac,
+  --white: darken(#fff, 1%),
+  --white-grey: darken(#fff, 6%),
+  --red: #fc401c,
+  /*
+   * Standardized colors
+   ***************************************************************************/
+    --primary: #f58625,
+  --primary-light: lighten(#f58625, 5%),
+  --primary-lighter: lighten(#f58625, 10%),
+  --primary-lighterer: lighten(#f58625, 15%),
+  --primary-lightest: lighten(#f58625, 40%),
+  --primary-darkest: darken(#f58625, 20%),
+  /*
+   * General colors
+   ***************************************************************************/
+    --white-pure: #ffffff,
+  --grey-light: #bbbbbb,
+  --gray-med-light: lighten(#888888, 20%),
+  --grey-med: #888888,
+  --grey-dark: #343434,
+  --offwhite: #fcf7f2,
+  /*
+   * Fonts
+   ***************************************************************************/
+    --font-body-family: unquote('"Open Sans", sans-serif'),
+  --font-headlines-family: unquote('"Open Sans", sans-serif'),
+  --font-bold: 600,
+  --font-reg: 400,
+  --font-light: 300,
+  /*
+   * Constants
+   ***************************************************************************/
+    --sidebar-width: 200px,
+  /*
+   * Media breakpoints
+   ***************************************************************************/
+    --breakpoint-tablet: 1000px,
+  /*
+   * Headings
+   ***************************************************************************/
+    --section-title--text: #5d5c77,
+  --section-title--text--emphasized: var(--primary),
+  /*
+   * Links
+   ***************************************************************************/
+    --link--text: var(--primary),
+  --link--text--hover: var(--primary-lighter),
+  /*
+   * Buttons
+   ***************************************************************************/
+    --button--background: var(--primary),
+  --button--border: var(--primary),
+  --button--text: var(--white-pure),
+  --button--background--hover: var(--primary-lighterer),
+  --button--border--hover: var(--primary-lighterer),
+  --button--text--hover: var(--white-pure),
+  /*
+   * Forms
+   ***************************************************************************/
+    --input--border-color: #d1d3d4,
+  --input--background: var(--white-pure),
+  --input--text: var(--grey-dark),
+  --input--text--placeholder: #d1d3d4,
+  --input--hint: darken(#d1d3d4, 10%),
+  --input--error--background: var(--red),
+  --input--error--text: var(--white-pure),
+  --input--required-star: #bcbec0,
+  --input--border-color--focus: var(--primary),
+  --input--background--focus: var(--input--background),
+  --input--text--focus: var(--input--text),
+  /*
+   * Alerts
+   ***************************************************************************/
+    --alert--background: var(--white-pure),
+  --alert--border: var(--grey-dark),
+  --alert--text: var(--grey-dark),
+  --alert--background--error: var(--red),
+  --alert--border--error: var(--red),
+  --alert--text--error: var(--white-pure),
+  /*
+   * Flashes
+   ***************************************************************************/
+    --flashes--background: hsl(51, 87%, 94%),
+  --flashes--text: hsl(40, 68%, 20%),
+  --flashes--error--background: hsl(11, 87%, 94%),
+  --flashes--error--text: hsl(0, 68%, 20%),
+  /*
+   * Account header
+   ***************************************************************************/
+    --account-header--background: var(--grey-dark),
+  /*
+   * Account navigation
+   ***************************************************************************/
+    --account-nav--text: #888,
+  --account-nav--border-color: var(--grey-light),
+  --account-nav--text--active: var(--grey-dark),
+  --account-nav--border-color--active: var(--primary)
+);

From 92fd2f7d851b857444306549ee13cbbb8e93fe09 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 30 May 2019 17:18:39 +0000
Subject: [PATCH 6/6] chore(release): 1.10.0 [skip ci]

# [1.10.0](https://github.com/codeRIT/hackathon-manager/compare/v1.9.0...v1.10.0) (2019-05-30)

### Documentation

* Add recommendation notes to deployment platform list ([6f732e7](https://github.com/codeRIT/hackathon-manager/commit/6f732e7))
* Clarify prerequisites to deploying on Dokku ([3240c4b](https://github.com/codeRIT/hackathon-manager/commit/3240c4b))

### Features

* Use CSS variables instead of SASS variables ([c6c01f5](https://github.com/codeRIT/hackathon-manager/commit/c6c01f5)), closes [#142](https://github.com/codeRIT/hackathon-manager/issues/142)
---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ea060913..6c9367624 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# [1.10.0](https://github.com/codeRIT/hackathon-manager/compare/v1.9.0...v1.10.0) (2019-05-30)
+
+
+### Documentation
+
+* Add recommendation notes to deployment platform list ([6f732e7](https://github.com/codeRIT/hackathon-manager/commit/6f732e7))
+* Clarify prerequisites to deploying on Dokku ([3240c4b](https://github.com/codeRIT/hackathon-manager/commit/3240c4b))
+
+
+### Features
+
+* Use CSS variables instead of SASS variables ([c6c01f5](https://github.com/codeRIT/hackathon-manager/commit/c6c01f5)), closes [#142](https://github.com/codeRIT/hackathon-manager/issues/142)
+
 # [1.9.0](https://github.com/codeRIT/hackathon-manager/compare/v1.8.0...v1.9.0) (2019-05-30)