From 13a3c1e29473aa9f563e8db4ad94cb3eee9bdfe6 Mon Sep 17 00:00:00 2001
From: Gareth Coles <gdude2002@gmail.com>
Date: Tue, 5 Jun 2018 16:07:35 +0100
Subject: 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
---
 templates/main/about/privacy.html  | 18 +++++++++---------
 templates/main/base.html           | 10 ++++++----
 templates/main/index.html          |  2 +-
 templates/main/info/resources.html | 11 ++++++-----
 templates/main/jams/index.html     |  5 +++--
 templates/main/jams/join.html      | 23 ++++++++++++-----------
 templates/main/jams/profile.html   |  2 +-
 templates/main/navigation.html     |  4 ++--
 8 files changed, 40 insertions(+), 35 deletions(-)

(limited to 'templates/main')

diff --git a/templates/main/about/privacy.html b/templates/main/about/privacy.html
index ce6e20f8..ebf3eebd 100644
--- a/templates/main/about/privacy.html
+++ b/templates/main/about/privacy.html
@@ -31,12 +31,12 @@
 
                 <h3>Data collection</h3>
 
-                <table class="uk-table uk-table-divider uk-table-striped uk-table-small table-bordered">
+                <table class="uk-table uk-table-divider uk-table-striped uk-table-small table-bordered" id="data-collection-table">
                     <thead>
                         <tr class="thick-bottom-border">
                             <th>What we collect</th>
                             <th class="uk-table-shrink">When</th>
-                            <th style="max-width: 30rem;">What it's used for</th>
+                            <th>What it's used for</th>
                             <th>Who can access it</th>
                         </tr>
                     </thead>
@@ -44,25 +44,25 @@
                         <tr>
                             <td>Discord user ID</td>
                             <td class="uk-table-shrink"><strong>self.accept()</strong> run on Discord</td>
-                            <td style="max-width: 30rem;">Statistics, data association (infractions, code jam applications, etc)</td>
+                            <td>Statistics, data association (infractions, code jam applications, etc)</td>
                             <td>Administrative staff</td>
                         </tr>
                         <tr>
                             <td>Discord username and discriminator</td>
                             <td class="uk-table-shrink"><strong>self.accept()</strong> run on Discord</td>
-                            <td style="max-width: 30rem;">Display purposes (alongside ID in staff areas, public profiles)</td>
+                            <td>Display purposes (alongside ID in staff areas, public profiles)</td>
                             <td>Public, for code jam team listings and winner info</td>
                         </tr>
                         <tr>
                             <td>Assigned roles on Discord</td>
                             <td class="uk-table-shrink"><strong>self.accept()</strong> run on Discord</td>
-                            <td style="max-width: 30rem;">Access control for the site</td>
+                            <td>Access control for the site</td>
                             <td>Administrative staff</td>
                         </tr>
                         <tr class="thick-bottom-border">
                             <td>Messages sent on Discord</td>
                             <td class="uk-table-shrink"><strong>self.accept()</strong> run on Discord</td>
-                            <td style="max-width: 30rem;">
+                            <td>
                                 Stored in memory by the bot for processing temporarily, no message content reaches
                                 the database unless you're using a bot command that interfaces with the site - May be
                                 temporarily written to a log file for debugging purposes
@@ -73,20 +73,20 @@
                         <tr class="thick-bottom-border">
                             <td>OAuth access and refresh token</td>
                             <td class="uk-table-shrink">Discord login on site</td>
-                            <td style="max-width: 30rem;">Used to find your Discord user ID when you log in</td>
+                            <td>Used to find your Discord user ID when you log in</td>
                             <td>Administrative staff</td>
                         </tr>
 
                         <tr>
                             <td>GitHub username</td>
                             <td class="uk-table-shrink">Code jam profile</td>
-                            <td style="max-width: 30rem;">Used to identify you on GitHub as part of a code jam team</td>
+                            <td>Used to identify you on GitHub as part of a code jam team</td>
                             <td>Public, for code jam team listings</td>
                         </tr>
                         <tr>
                             <td>Timezone</td>
                             <td class="uk-table-shrink">Code jam profile</td>
-                            <td style="max-width: 30rem;">A factor in code jam team match-ups</td>
+                            <td>A factor in code jam team match-ups</td>
                             <td>Administrative staff</td>
                         </tr>
                     </tbody>
diff --git a/templates/main/base.html b/templates/main/base.html
index 8893be01..2a3f295c 100644
--- a/templates/main/base.html
+++ b/templates/main/base.html
@@ -15,9 +15,9 @@
 
             <!-- Stylesheets -->
             <link rel="shortcut icon" href="{{ static_file('favicon.ico') }}">
-            <link rel="stylesheet" href="{{ static_file('uikit_blurple.css') }}"/>
-            <link rel="stylesheet" href="{{ static_file('style.css') }}"/>
-            <link rel="stylesheet" href="{{ static_file('css/pygments-monokai.css') }}"/>
+            <link rel="stylesheet" href="{{ static_file('css/uikit_blurple.css') }}"/>
+            <link rel="stylesheet" href="{{ static_file('css/style.css') }}"/>
+            <link rel="stylesheet" href="{{ static_file('css/bundled/pygments-monokai.css') }}"/>
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 
             <!-- OpenGraph metadata -->
@@ -29,7 +29,9 @@
 
         {% endblock %}
     </head>
-    <body class="page-{{ current_page.replace(".", "-") }}">
+    <body class="{% block page_classes %}{% endblock page_classes %}
+                 page-{{ current_page.replace(".", "-") }}
+                 blueprint-{{ blueprint.replace(".", "-") }}">
         {% if current_page == "main.index" %}
         <div class="uk-offcanvas-content uk-section-primary">
         {% else %}
diff --git a/templates/main/index.html b/templates/main/index.html
index 06d29aba..c2d81a43 100644
--- a/templates/main/index.html
+++ b/templates/main/index.html
@@ -18,7 +18,7 @@
             on a complex project, we've got someone who can help you if you get stuck.
         </p>
         <div class="uk-container uk-align-center">
-            <a href="{{ url_for('main.invite') }}" class="uk-button uk-button-large uk-button-darkish" style="padding: 0;">
+            <a href="{{ url_for('main.invite') }}" class="uk-button uk-button-large uk-button-darkish" id="invite-button">
                 <img src="https://discordapp.com/api/guilds/267624335836053506/embed.png?style=banner3">
             </a>
         </div>
diff --git a/templates/main/info/resources.html b/templates/main/info/resources.html
index ae416d33..f3f4d0c0 100644
--- a/templates/main/info/resources.html
+++ b/templates/main/info/resources.html
@@ -75,16 +75,17 @@
                                 {% endif %}
 
                                 {% if data["payment_description"] %}
-                                    <img class="uk-float-left" style="height: 3.7rem; vertical-align: text-bottom; margin-right: 0.5rem;" uk-tooltip="{{ data["payment_description"] }}" src="{{ file_path }}" />
+                                    <img class="uk-float-left payment-description" uk-tooltip="{{ data["payment_description"] }}" src="{{ file_path }}" />
                                 {% else %}
-                                    <img class="uk-float-left" style="height: 3.7rem; vertical-align: text-bottom; margin-right: 0.5rem;" uk-tooltip="{{ data["payment"].title() }}" src="{{ file_path }}" />
+                                    <img class="uk-float-left payment-description" uk-tooltip="{{ data["payment"].title() }}" src="{{ file_path }}" />
                                 {% endif %}
-                                <div style="margin-bottom: -1rem;">
+
+                                <div class="resource-title">
                                     <strong>{{ item }}</strong> <br />
-                                    <div class="uk-button-group" style="padding-bottom: 0;">
+                                    <div class="uk-button-group">
                                         {% for url in data.urls %}
                                         <a class="uk-button uk-button-default uk-button-small"
-                                            uk-tooltip="title: {{ url.title }}; pos: bottom"
+                                           uk-tooltip="title: {{ url.title }}; pos: bottom"
                                            href="{{ url.url }}"><i class="{{ url.classes }}"></i></a>
                                         {% endfor %}
                                     </div>
diff --git a/templates/main/jams/index.html b/templates/main/jams/index.html
index 5c2df182..e72e7e84 100644
--- a/templates/main/jams/index.html
+++ b/templates/main/jams/index.html
@@ -1,6 +1,7 @@
 {% extends "main/base.html" %}
 {% block title %}Code Jams | Home{% endblock %}
 {% block og_title %}Code Jams | Home{% endblock %}
+{% block page_classes %}uses-rst{% endblock %}
 {% block content %}
 <div class="uk-section">
     <div class="uk-container uk-container-small">
@@ -39,7 +40,7 @@
                     </p>
 
                     <a href="https://jetbrains.com">
-                        <img src="{{ static_file("images/jetbrains.png") }}" style="max-width: 15rem;" />
+                        <img src="{{ static_file("images/jetbrains.png") }}" class="sponsor-logo"/>
                     </a>
                 </figure>
             </div>
@@ -85,7 +86,7 @@
                             {{ format_datetime(jam.date_start) }} UTC
                         </span>
 
-                        <span style="vertical-align: middle">
+                        <span class="date-separator">
                             <i class="uk-icon fa-fw far fa-arrow-right" ></i>
                         </span>
 
diff --git a/templates/main/jams/join.html b/templates/main/jams/join.html
index 4bd4f2b0..4ff645b8 100644
--- a/templates/main/jams/join.html
+++ b/templates/main/jams/join.html
@@ -1,18 +1,19 @@
 {% extends "main/base.html" %}
 {% block title %}Code Jams | Join{% endblock %}
 {% block og_title %}Code Jams | Join{% endblock %}
+{% block page_classes %}uses-rst{% endblock %}
 
 {% macro show_question(question) %}
     <div id="div-{{ question.id }}">
         <div class="uk-form-label">
             {% if question.optional %}
-                <label class="uk-form-label" style="margin-top: 0" for="{{ question.id }}">
+                <label class="uk-form-label question-label" for="{{ question.id }}">
                     <strong>{{ question.title }}</strong>
                     <br />
                     <span class="uk-text-meta">You may skip this question</span>
                 </label>
             {% else %}
-                <label class="uk-form-label" style="margin-top: 0" for="{{ question.id }}">
+                <label class="uk-form-label question-label" for="{{ question.id }}">
                     <strong>{{ question.title }}</strong>
                     <br />
                     <span class="uk-text-meta">This question is required</span>
@@ -23,10 +24,10 @@
             {% if question.type == "checkbox" %}
                 {% if question.optional %}
                     <input class="uk-checkbox" type="checkbox" name="{{ question.id }}" id="{{ question.id }}">
-                    <label for="{{ question.id }}" style="padding-left: 0.7rem;">Confirm</label>
+                    <label for="{{ question.id }}" class="checkbox-label">Confirm</label>
                 {% else %}
                     <input class="uk-checkbox" type="checkbox" name="{{ question.id }}" id="{{ question.id }}" required>
-                    <label for="{{ question.id }}" style="padding-left: 0.7rem;">Confirm</label>
+                    <label for="{{ question.id }}" class="checkbox-label">Confirm</label>
                 {% endif %}
 
             {% elif question.type == "email" %}
@@ -47,12 +48,12 @@
                 {% if question.optional %}
                     {% for option in question.data.options %}
                         <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ option }}" value="{{ option }}">
-                        <label style="padding-left: 0.7rem; padding-right: 1rem;" for="{{ question.id }}-{{ option }}">{{ option }}</label>
+                        <label class="radio-label" for="{{ question.id }}-{{ option }}">{{ option }}</label>
                     {% endfor %}
                 {% else %}
                     {% for option in question.data.options %}
                         <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ option }}" value="{{ option }}" required>
-                        <label style="padding-left: 0.7rem; padding-right: 1rem;" for="{{ question.id }}-{{ option }}">{{ option }}</label>
+                        <label class="radio-label" for="{{ question.id }}-{{ option }}">{{ option }}</label>
                     {% endfor %}
                 {% endif %}
 
@@ -62,14 +63,14 @@
                         {% for num in range(question.data.min, question.data.max + 1) %}
                             <span>
                                 <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ num }}" value="{{ num }}">
-                                <label style="padding-left: 0.3rem;" for="{{ question.id }}-{{ num }}">{{ num }}</label>
+                                <label class="range-label" for="{{ question.id }}-{{ num }}">{{ num }}</label>
                             </span>
                         {% endfor %}
                     {% else %}
                         {% for num in range(question.data.min, question.data.max + 1) %}
                             <span>
                                 <input class="uk-radio radio-{{ question.id }}" type="radio" name="{{ question.id }}" id="{{ question.id }}-{{ num }}" value="{{ num }}" required>
-                                <label style="padding-left: 0.3rem;" for="{{ question.id }}-{{ num }}">{{ num }}</label>
+                                <label class="range-label" for="{{ question.id }}-{{ num }}">{{ num }}</label>
                             </span>
                         {% endfor %}
                     {% endif %}
@@ -84,14 +85,14 @@
 
             {% elif question.type == "textarea" %}
                 {% if question.optional %}
-                    <textarea class="uk-input uk-textarea fira-code" name="{{ question.id }}" id="{{ question.id }}" style="resize: vertical; min-height: 15rem;"></textarea>
+                    <textarea class="uk-input uk-textarea fira-code textarea" name="{{ question.id }}" id="{{ question.id }}"></textarea>
                 {% else %}
-                    <textarea class="uk-input uk-textarea fira-code" name="{{ question.id }}" id="{{ question.id }}" style="resize: vertical; min-height: 15rem;" required></textarea>
+                    <textarea class="uk-input uk-textarea fira-code textarea" name="{{ question.id }}" id="{{ question.id }}" required></textarea>
                 {% endif %}
 
             {% elif question.type == "slider" %}
                 <div class="uk-flex uk-flex-between">
-                    <label class="uk-label" style="margin-right: 1rem;" for="{{ question.id }}" id="{{ question.id }}-slider-value">{{ question.data.min }}</label>
+                    <label class="uk-label slider-label" for="{{ question.id }}" id="{{ question.id }}-slider-value">{{ question.data.min }}</label>
                     <input class="uk-range range-slider" name="{{ question.id }}" id="{{ question.id }}" min="{{ question.data.min }}" max="{{ question.data.max }}" step="1" value="{{ question.data.min }}" type="range">
                 </div>
 
diff --git a/templates/main/jams/profile.html b/templates/main/jams/profile.html
index 98867c8a..ba37f810 100644
--- a/templates/main/jams/profile.html
+++ b/templates/main/jams/profile.html
@@ -66,7 +66,7 @@
                         <i class="uk-icon fa-fw fas fa-bomb"></i> &nbsp;Delete
                     </a>
                 {% else %}
-                    <a class="uk-button uk-button-default uk-text-muted uk-link-muted" style="cursor: default !important"
+                    <a class="uk-button uk-button-default uk-text-muted uk-link-muted cursor-default"
                        uk-tooltip="title: You can't delete your profile because you haven't submitted one yet!; pos: bottom">
                         <i class="uk-icon fa-fw fas fa-bomb"></i> &nbsp;Delete
                     </a>
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index 8aa52961..ea525d2f 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -38,7 +38,7 @@
             <ul class="uk-navbar-nav">
                 <li>
                     <a><i class="uk-icon fas fa-chevron-down"></i></a>
-                    <div class="uk-navbar-dropdown uk-background-secondary" uk-dropdown="pos: bottom-right" style="overflow-y: auto;">
+                    <div class="uk-navbar-dropdown uk-background-secondary" uk-dropdown="pos: bottom-right">
                         <ul class="uk-nav uk-navbar-dropdown-nav">
                             <li class="uk-nav-header uk-hidden@m">Navigation</li>
 
@@ -72,7 +72,7 @@
                                     <li class="uk-active"><a href="{{ url_for('discord.login') }}"><i class="uk-icon fas fa-lock"></i> &nbsp;Login with Discord</a></li>
                                 {% endif %}
                             {% else %}
-                                <li class="uk-active"><a style="color: #7289DA !important"><i class="uk-icon fas fa-exclamation-triangle"></i> &nbsp;Debug mode</a></li>
+                                <li class="uk-active"><a class="debug-mode-item"><i class="uk-icon fas fa-exclamation-triangle"></i> &nbsp;Debug mode</a></li>
                             {% endif %}
 
                             {% if current_page.startswith("main.info") %}
-- 
cgit v1.2.3