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

8 files changed, 24 insertions, 13 deletions

diff --git a/templates/staff/jams/edit_basics.html b/templates/staff/jams/edit_basics.html
index e9bc69e1..c6d9753f 100644
--- a/templates/staff/jams/edit_basics.html
+++ b/templates/staff/jams/edit_basics.html
@@ -2,6 +2,8 @@
 {% block title %}Staff | Jams | Edit (Basics){% endblock %}
 {% block og_title %}Staff | Jams | Edit (Basics){% endblock %}
 {% block og_description %}Edit the basic info for a code jam{% endblock %}
+{% block page_classes %}uses-rst{% endblock %}
+
 {% block content %}
     <div class="uk-container uk-container-small uk-section">
         <h1 class="uk-text-center">Code Jam: Edit (Basics)</h1>
diff --git a/templates/staff/jams/edit_ending.html b/templates/staff/jams/edit_ending.html
index 600ad6fc..7bde88ee 100644
--- a/templates/staff/jams/edit_ending.html
+++ b/templates/staff/jams/edit_ending.html
@@ -2,9 +2,12 @@
 {% block title %}Staff | Jams | Edit (Ending Comments){% endblock %}
 {% block og_title %}Staff | Jams | Edit (Ending Comments){% endblock %}
 {% block og_description %}Edit the ending comments for a code jam{% endblock %}
+
+{% block page_classes %}uses-rst{% endblock %}
 {% block extra_head %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
 {% endblock %}
+
 {% block content %}
     <div class="uk-container uk-container-small uk-section">
         <h1 class="uk-text-center">Code Jam: Edit (Ending Comments)</h1>
@@ -16,7 +19,7 @@
                 </div>
 
                 <div class="uk-form-controls uk-form-controls-text">
-                    <div id="editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.end_rst }}</div>
+                    <div id="editor" class="uk-textarea">{{ jam.end_rst }}</div>
                 </div>
 
                 <input type="hidden" name="end_rst" id="end_rst" value="{{ jam.end_rst }}" />
diff --git a/templates/staff/jams/edit_info.html b/templates/staff/jams/edit_info.html
index 81a0a9ac..7fdc3c22 100644
--- a/templates/staff/jams/edit_info.html
+++ b/templates/staff/jams/edit_info.html
@@ -2,9 +2,12 @@
 {% block title %}Staff | Jams | Edit (Info){% endblock %}
 {% block og_title %}Staff | Jams | Edit (Info){% endblock %}
 {% block og_description %}Edit the basic info for a code jam{% endblock %}
+
+{% block page_classes %}uses-rst{% endblock %}
 {% block extra_head %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
 {% endblock %}
+
 {% block content %}
     <div class="uk-container uk-container-small uk-section">
         <h1 class="uk-text-center">Code Jam: Edit (Info)</h1>
@@ -44,7 +47,7 @@
                 </div>
 
                 <div class="uk-form-controls uk-form-controls-text">
-                    <div id="info_editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.info_rst }}</div>
+                    <div id="info_editor" class="uk-textarea editor">{{ jam.info_rst }}</div>
                 </div>
 
                 <input type="hidden" name="info_rst" id="info_rst" value="{{ jam.info_rst }}" />
@@ -65,7 +68,7 @@
                 </div>
 
                 <div class="uk-form-controls uk-form-controls-text">
-                    <div id="task_editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.task_rst }}</div>
+                    <div id="task_editor" class="uk-textarea editor">{{ jam.task_rst }}</div>
                 </div>
 
                 <input type="hidden" name="task_rst" id="task_rst" value="{{ jam.task_rst }}" />
diff --git a/templates/staff/jams/forms/preamble_edit.html b/templates/staff/jams/forms/preamble_edit.html
index 6e3fec0d..4108481b 100644
--- a/templates/staff/jams/forms/preamble_edit.html
+++ b/templates/staff/jams/forms/preamble_edit.html
@@ -1,9 +1,12 @@
 {% extends "main/base.html" %}
 {% block title %}Staff | Forms | Edit Preamble{% endblock %}
 {% block og_title %}Staff | Forms | Edit Preamble{% endblock %}
+
+{% block page_classes %}uses-rst{% endblock %}
 {% block extra_head %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
 {% endblock %}
+
 {% block content %}
     <div class="uk-container uk-container-small uk-section">
         <h1 class="uk-text-center">Form: Edit Preamble</h1>
@@ -15,7 +18,7 @@
                 </div>
 
                 <div class="uk-form-controls uk-form-controls-text">
-                    <div id="editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ form.preamble_rst }}</div>
+                    <div id="editor" class="uk-textarea">{{ form.preamble_rst }}</div>
                 </div>
 
                 <input type="hidden" name="preamble_rst" id="preamble_rst" value="{{ form.preamble_rst }}" />
diff --git a/templates/staff/jams/forms/questions_view.html b/templates/staff/jams/forms/questions_view.html
index c9d5098c..bebdde40 100644
--- a/templates/staff/jams/forms/questions_view.html
+++ b/templates/staff/jams/forms/questions_view.html
@@ -49,8 +49,8 @@
                         {% for question in questions %}
                             <tr id="row-{{ question.id }}">
                                 <td class="uk-table-shrink">
-                                    <button class="uk-button-small uk-button uk-button-danger delete-question-button" style="padding-left: 5px; padding-right: 5px;" data-question-id="{{ question.id }}"><i class="uk-icon fa-fw far fa-trash"></i></button>
-                                    <a href="{{ url_for("staff.jams.forms.questions.edit", question=question.id) }}" class="uk-button-small uk-button uk-button-primary edit-question-button" style="padding-left: 5px; padding-right: 5px;"><i class="uk-icon fa-fw far fa-pencil"></i></a>
+                                    <button class="uk-button-small uk-button uk-button-danger delete-question-button" data-question-id="{{ question.id }}"><i class="uk-icon fa-fw far fa-trash"></i></button>
+                                    <a href="{{ url_for("staff.jams.forms.questions.edit", question=question.id) }}" class="uk-button-small uk-button uk-button-primary edit-question-button"><i class="uk-icon fa-fw far fa-pencil"></i></a>
                                 </td>
                                 <td class="uk-text-truncate" title="{{ question.id }}">{{ question.id }}</td>
                                 <td class="uk-table-shrink">
@@ -579,8 +579,8 @@
 
             const row = `
     <td class="uk-table-shrink">
-        <button class="uk-button-small uk-button uk-button-danger delete-question-button" style="padding-left: 5px; padding-right: 5px;" data-question-id="${question.id}"><i class="uk-icon fa-fw far fa-trash"></i></button>
-        <a href="${q_url}" class="uk-button-small uk-button uk-button-primary edit-question-button" style="padding-left: 5px; padding-right: 5px;"><i class="uk-icon fa-fw far fa-pencil"></i></a>
+        <button class="uk-button-small uk-button uk-button-danger delete-question-button" data-question-id="${question.id}"><i class="uk-icon fa-fw far fa-trash"></i></button>
+        <a href="${q_url}" class="uk-button-small uk-button uk-button-primary edit-question-button"><i class="uk-icon fa-fw far fa-pencil"></i></a>
     </td>
     <td class="uk-text-truncate" title="${question.id}">${question.id}</td>
     <td class="uk-table-shrink">${optional}</td>
diff --git a/templates/staff/jams/forms/view.html b/templates/staff/jams/forms/view.html
index 46474ae9..83ff1ae4 100644
--- a/templates/staff/jams/forms/view.html
+++ b/templates/staff/jams/forms/view.html
@@ -50,7 +50,7 @@
                         {% for question in questions %}
                             <tr id="row-{{ question.id }}">
                                 <td class="uk-table-shrink">
-                                    <button class="uk-button-small uk-button uk-button-danger delete-question-button" style="padding-left: 5px; padding-right: 5px;" data-question-id="{{ question.id }}"><i class="uk-icon fa-fw far fa-times"></i></button>
+                                    <button class="uk-button-small uk-button uk-button-danger delete-question-button" data-question-id="{{ question.id }}"><i class="uk-icon fa-fw far fa-times"></i></button>
                                 </td>
                                 <td class="uk-text-truncate" title="{{ question.id }}">{{ question.id }}</td>
                                 <td class="uk-table-shrink">
@@ -742,7 +742,7 @@
 
             const row = `
     <td class="uk-table-shrink">
-        <button class="uk-button-small uk-button uk-button-danger delete-question-button" style="padding-left: 5px; padding-right: 5px;" data-question-id="${question.id}"><i class="uk-icon fa-fw far fa-times"></i></button>
+        <button class="uk-button-small uk-button uk-button-danger delete-question-button" data-question-id="${question.id}"><i class="uk-icon fa-fw far fa-times"></i></button>
     </td>
     <td class="uk-text-truncate" title="${question.id}">${question.id}</td>
     <td class="uk-table-shrink">${optional}</td>
diff --git a/templates/staff/jams/index.html b/templates/staff/jams/index.html
index b5734b51..c38883c2 100644
--- a/templates/staff/jams/index.html
+++ b/templates/staff/jams/index.html
@@ -26,7 +26,7 @@
                         {% if jam.state == "planning" %}
                             <i class="uk-icon uk-text-muted fa-fw far fa-edit state-{{ jam.number }}" title="State: Planning" id="state-{{ jam.number }}-planning"></i>
                         {% else %}
-                            <i class="uk-icon uk-text-muted fa-fw far fa-edit state-{{ jam.number }}" style="display: none;" title="State: Planning" id="state-{{ jam.number }}-planning"></i>
+                            <i class="uk-icon uk-text-muted fa-fw far fa-edit state-{{ jam.number }}" hidden="hidden" title="State: Planning" id="state-{{ jam.number }}-planning"></i>
                         {% endif %}
 
                         {% if jam.state == "announced" %}
diff --git a/templates/staff/jams/infractions/view.html b/templates/staff/jams/infractions/view.html
index bb3cf0ce..00374632 100644
--- a/templates/staff/jams/infractions/view.html
+++ b/templates/staff/jams/infractions/view.html
@@ -46,7 +46,7 @@
                         {% for infraction in infractions %}
                             <tr id="row-{{ infraction.id }}">
                                 <td class="uk-table-shrink">
-                                    <button class="uk-button-small uk-button uk-button-danger delete-infraction-button" style="padding-left: 5px; padding-right: 5px;" data-infraction-id="{{ infraction.id }}"><i class="uk-icon fa-fw far fa-trash"></i></button>
+                                    <button class="uk-button-small uk-button uk-button-danger delete-infraction-button" data-infraction-id="{{ infraction.id }}"><i class="uk-icon fa-fw far fa-trash"></i></button>
                                 </td>
                                 <td class="uk-text-truncate" title="{{ infraction.id }}">{{ infraction.id }}</td>
                                 <td class="uk-table-shrink">
@@ -316,7 +316,7 @@
             }
             const row = `
     <td class="uk-table-shrink">
-        <button class="uk-button-small uk-button uk-button-danger delete-infraction-button" style="padding-left: 5px; padding-right: 5px;" data-infraction-id="${infraction.id}"><i class="uk-icon fa-fw far fa-trash"></i></button>
+        <button class="uk-button-small uk-button uk-button-danger delete-infraction-button" data-infraction-id="${infraction.id}"><i class="uk-icon fa-fw far fa-trash"></i></button>
     </td>
     <td class="uk-text-truncate" title="${infraction.id}">${infraction.id}</td>
     <td class="uk-table-shrink"><code>${participant}</code></td>