convert to scss

.gitignore

@@ -74,3 +74,11 @@ _html
 
 # Node
 node_modules
+
+
+
+.gulp-scss-cache
+.sass-cache
+
+*~
+.DS_Store

gulpfile.js

@@ -5,18 +5,17 @@
     "use strict";
 
     var gulp = require('gulp'),
-        shell = require('gulp-shell');
+        plugins = require('gulp-load-plugins')();
 
-    var PYTHON_FILES = [
-        'silk/**/*.py',
-        'tests/tests/**/*.py',
-        'tests/*.py'
-    ];
 
     gulp.task('watch', function () {
-        gulp.watch(PYTHON_FILES, ['test-python']);
+        gulp.watch('scss/**/*.scss', ['scss']);
     });
 
-    gulp.task('test-python', shell.task(['./tests/manage.py test']));
+    gulp.task('scss', function () {
+        gulp.src('scss/**/*.scss')
+            .pipe(plugins.scss())
+            .pipe(gulp.dest('silk/static/silk/css'))
+    });
 
 })();

package.json

@@ -22,6 +22,9 @@
   "homepage": "https://github.com/mtford90/silk",
   "devDependencies": {
     "gulp": "^3.8.10",
-    "gulp-shell": "^0.2.11"
+    "gulp-scss": "^1.1.1",
+    "gulp-shell": "^0.4.2",
+    "gulp-util": "^3.0.5",
+    "q": "^1.4.1"
   }
 }

scss/cell.scss

@@ -0,0 +1,33 @@
+.cell {
+  display: inline-block;
+  background-color: transparent;
+  padding: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+  border-radius: 4px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  div {
+    margin: 2px;
+  }
+  .timestamp-div {
+    margin-bottom: 15px;
+    font-size: 13px;
+  }
+  .meta {
+    font-size: 12px;
+    color: #be5b43;
+    .unit {
+      font-size: 9px;
+      font-weight: lighter !important;
+    }
+
+  }
+  .method-div {
+    font-weight: bold;
+    font-size: 20px;
+  }
+  .path-div {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+}

scss/colors.scss

@@ -0,0 +1,19 @@
+.very-good-font-color {
+  color: #bac54b;
+}
+
+.good-font-color {
+  color: #c3a948;
+}
+
+.ok-font-color {
+  color: #c08245;
+}
+
+.bad-font-color {
+  color: #be5b43;
+}
+
+.very-bad-font-color {
+  color: #b9424f;
+}

scss/fonts.scss

@@ -0,0 +1,85 @@
+/**
+*   Fira Sans
+*/
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-Regular.woff);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-Medium.woff);
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-Bold.woff);
+  font-weight: bolder;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-Light.woff);
+  font-weight: lighter;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-RegularItalic.woff);
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-MediumItalic.woff);
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-BoldItalic.woff);
+  font-weight: bolder;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: FiraSans;
+  src: url(../fonts/fira/FiraSans-LightItalic.woff);
+  font-weight: lighter;
+  font-style: italic;
+}
+
+/**
+*   Fantasque
+*/
+
+@font-face {
+  font-family: Fantasque;
+  src: url(../fonts/fantasque/FantasqueSansMono-Regular.woff);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(../fonts/fantasque/FantasqueSansMono-Bold.woff);
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(../fonts/fantasque/FantasqueSansMono-RegItalic.woff);
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Fantasque;
+  src: url(../fonts/fantasque/FantasqueSansMono-BoldItalic.woff);
+  font-weight: bold;
+  font-style: italic;
+}

scss/heading.scss

@@ -0,0 +1,14 @@
+.heading {
+  width: 100%;
+  background-color: transparent;
+  height: 30px;
+  display: table;
+  font-weight: bold;
+  margin-top: 20px;
+  .inner-heading {
+    display: table-cell;
+    text-align: left;
+    padding: 0;
+    vertical-align: middle;
+  }
+}

scss/numeric.scss

@@ -0,0 +1,15 @@
+.numeric {
+  font-weight: normal;
+}
+
+.unit {
+  font-weight: normal;
+}
+
+.numeric .unit {
+  font-size: 12px;
+}
+
+.numeric {
+  font-size: 20px;
+}

scss/summary.scss

@@ -0,0 +1,24 @@
+#error-div {
+  margin: 10px;
+}
+
+#query-div {
+  margin: auto;
+  width: 960px;
+  text-align: center;
+}
+
+#code {
+  text-align: left;
+}
+
+.name-div {
+  margin-top: 20px;
+  margin-bottom: 15px;
+  font-weight: bold;
+}
+
+.description {
+  text-align: left;
+}
+

setup.py

@@ -9,7 +9,7 @@
 
 setup(
     name='django-silk',
-    version='0.5.4',
+    version='0.5.5',
     packages=['silk'],
     include_package_data=True,
     license='MIT License',

silk/static/silk/css/cell.css

@@ -1,38 +1,25 @@
 .cell {
-    display: inline-block;
-    background-color: transparent;
-    padding: 10px;
-    margin-left: 10px;
-    margin-top: 10px;
-    border-radius: 4px;
-    transition: background-color 0.15s ease, color 0.15s ease;
-
-}
-
-.cell div {
-    margin: 2px;
-}
-
-.cell .timestamp-div {
+  display: inline-block;
+  background-color: transparent;
+  padding: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+  border-radius: 4px;
+  transition: background-color 0.15s ease, color 0.15s ease; }
+  .cell div {
+    margin: 2px; }
+  .cell .timestamp-div {
     margin-bottom: 15px;
-    font-size: 13px;
-}
-
-.cell .meta {
+    font-size: 13px; }
+  .cell .meta {
     font-size: 12px;
-    color: #be5b43;
-}
-.cell .meta .unit {
-    font-size: 9px;
-    font-weight: lighter !important;
-}
-
-.cell .method-div {
+    color: #be5b43; }
+    .cell .meta .unit {
+      font-size: 9px;
+      font-weight: lighter !important; }
+  .cell .method-div {
     font-weight: bold;
-    font-size: 20px;
-}
-
-.cell .path-div {
+    font-size: 20px; }
+  .cell .path-div {
     font-size: 18px;
-    margin-bottom: 15px;
-}
+    margin-bottom: 15px; }

silk/static/silk/css/colors.css

@@ -1,18 +1,14 @@
 .very-good-font-color {
-    color: #bac54b;
-}
+  color: #bac54b; }
 
 .good-font-color {
-    color: #c3a948;
-}
+  color: #c3a948; }
 
 .ok-font-color {
-    color: #c08245;
-}
+  color: #c08245; }
+
 .bad-font-color {
-    color: #be5b43;
-}
+  color: #be5b43; }
 
 .very-bad-font-color {
-    color: #b9424f;
-}
+  color: #b9424f; }