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

1 files changed, 131 insertions, 0 deletions

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;
+    }
+  }
+}