From 415529cf3ad5cd362a49f31ec0982b603ea84466 Mon Sep 17 00:00:00 2001
From: sgelis <74539800+sgelis@users.noreply.github.com>
Date: Sun, 15 Jan 2023 02:10:55 +0100
Subject: [PATCH] Outsource all inline scripts and styles (#635)

* Outsource all inline scripts and styles. Fixes jazzband/django-silk#531.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 scss/{ => components}/cell.scss               |   0
 scss/{ => components}/colors.scss             |   0
 scss/{ => components}/fonts.scss              |  24 +-
 scss/{ => components}/heading.scss            |   0
 scss/{ => components}/numeric.scss            |   0
 scss/{ => components}/row.scss                |   0
 scss/{ => components}/summary.scss            |   0
 scss/pages/base.scss                          | 124 +++++++
 scss/pages/clear_db.scss                      |  39 +++
 scss/pages/cprofile.scss                      |  53 +++
 scss/pages/detail_base.scss                   |  32 ++
 scss/pages/profile_detail.scss                |  53 +++
 scss/pages/profiling.scss                     |  20 ++
 scss/pages/raw.scss                           |  31 ++
 scss/pages/request.scss                       |  72 +++++
 scss/pages/requests.scss                      |  19 ++
 scss/pages/root_base.scss                     | 269 +++++++++++++++
 scss/pages/sql.scss                           |  55 ++++
 scss/pages/sql_detail.scss                    |  59 ++++
 scss/pages/summary.scss                       |  51 +++
 silk/static/silk/css/cell.css                 |  25 --
 silk/static/silk/css/components/cell.css      |  32 ++
 .../silk/css/{ => components}/colors.css      |  15 +-
 silk/static/silk/css/components/fonts.css     |  72 +++++
 silk/static/silk/css/components/heading.css   |  14 +
 silk/static/silk/css/components/numeric.css   |  15 +
 silk/static/silk/css/components/row.css       |  56 ++++
 .../silk/css/{ => components}/summary.css     |  15 +-
 silk/static/silk/css/fonts.css                |  71 ----
 silk/static/silk/css/heading.css              |  12 -
 silk/static/silk/css/numeric.css              |  11 -
 silk/static/silk/css/pages/base.css           | 118 +++++++
 silk/static/silk/css/pages/clear_db.css       |  41 +++
 silk/static/silk/css/pages/cprofile.css       |  52 +++
 silk/static/silk/css/pages/detail_base.css    |  32 ++
 silk/static/silk/css/pages/profile_detail.css |  52 +++
 silk/static/silk/css/pages/profiling.css      |  16 +
 silk/static/silk/css/pages/raw.css            |  31 ++
 silk/static/silk/css/pages/request.css        |  64 ++++
 silk/static/silk/css/pages/requests.css       |  19 ++
 silk/static/silk/css/pages/root_base.css      | 252 +++++++++++++++
 silk/static/silk/css/pages/sql.css            |  53 +++
 silk/static/silk/css/pages/sql_detail.css     |  59 ++++
 silk/static/silk/css/pages/summary.css        |  51 +++
 silk/static/silk/css/row.css                  |  43 ---
 silk/static/silk/js/{ => components}/cell.js  |   0
 .../silk/js/{ => components}/filters.js       |   0
 silk/static/silk/js/pages/base.js             |   5 +
 silk/static/silk/js/pages/clear_db.js         |   7 +
 silk/static/silk/js/pages/detail_base.js      |   1 +
 silk/static/silk/js/pages/profile_detail.js   |  15 +
 silk/static/silk/js/pages/profiling.js        |   4 +
 silk/static/silk/js/pages/raw.js              |   1 +
 silk/static/silk/js/pages/request.js          |   1 +
 silk/static/silk/js/pages/requests.js         |   4 +
 silk/static/silk/js/pages/root_base.js        |  15 +
 silk/static/silk/js/pages/sql_detail.js       |   4 +
 silk/static/silk/js/pages/summary.js          |   7 +
 silk/templates/silk/base/base.html            | 143 +-------
 silk/templates/silk/base/detail_base.html     |  49 +--
 silk/templates/silk/base/root_base.html       | 306 +-----------------
 silk/templates/silk/clear_db.html             |  55 +---
 silk/templates/silk/cprofile.html             |  59 +---
 silk/templates/silk/profile_detail.html       |  77 +----
 silk/templates/silk/profiling.html            |  32 +-
 silk/templates/silk/raw.html                  |  40 +--
 silk/templates/silk/request.html              |  88 +----
 silk/templates/silk/requests.html             |  30 +-
 silk/templates/silk/sql.html                  |  66 +---
 silk/templates/silk/sql_detail.html           |  74 +----
 silk/templates/silk/summary.html              |  69 +---
 71 files changed, 2051 insertions(+), 1223 deletions(-)
 rename scss/{ => components}/cell.scss (100%)
 rename scss/{ => components}/colors.scss (100%)
 rename scss/{ => components}/fonts.scss (57%)
 rename scss/{ => components}/heading.scss (100%)
 rename scss/{ => components}/numeric.scss (100%)
 rename scss/{ => components}/row.scss (100%)
 rename scss/{ => components}/summary.scss (100%)
 create mode 100644 scss/pages/base.scss
 create mode 100644 scss/pages/clear_db.scss
 create mode 100644 scss/pages/cprofile.scss
 create mode 100644 scss/pages/detail_base.scss
 create mode 100644 scss/pages/profile_detail.scss
 create mode 100644 scss/pages/profiling.scss
 create mode 100644 scss/pages/raw.scss
 create mode 100644 scss/pages/request.scss
 create mode 100644 scss/pages/requests.scss
 create mode 100644 scss/pages/root_base.scss
 create mode 100644 scss/pages/sql.scss
 create mode 100644 scss/pages/sql_detail.scss
 create mode 100644 scss/pages/summary.scss
 delete mode 100644 silk/static/silk/css/cell.css
 create mode 100644 silk/static/silk/css/components/cell.css
 rename silk/static/silk/css/{ => components}/colors.css (51%)
 create mode 100644 silk/static/silk/css/components/fonts.css
 create mode 100644 silk/static/silk/css/components/heading.css
 create mode 100644 silk/static/silk/css/components/numeric.css
 create mode 100644 silk/static/silk/css/components/row.css
 rename silk/static/silk/css/{ => components}/summary.css (56%)
 delete mode 100644 silk/static/silk/css/fonts.css
 delete mode 100644 silk/static/silk/css/heading.css
 delete mode 100644 silk/static/silk/css/numeric.css
 create mode 100644 silk/static/silk/css/pages/base.css
 create mode 100644 silk/static/silk/css/pages/clear_db.css
 create mode 100644 silk/static/silk/css/pages/cprofile.css
 create mode 100644 silk/static/silk/css/pages/detail_base.css
 create mode 100644 silk/static/silk/css/pages/profile_detail.css
 create mode 100644 silk/static/silk/css/pages/profiling.css
 create mode 100644 silk/static/silk/css/pages/raw.css
 create mode 100644 silk/static/silk/css/pages/request.css
 create mode 100644 silk/static/silk/css/pages/requests.css
 create mode 100644 silk/static/silk/css/pages/root_base.css
 create mode 100644 silk/static/silk/css/pages/sql.css
 create mode 100644 silk/static/silk/css/pages/sql_detail.css
 create mode 100644 silk/static/silk/css/pages/summary.css
 delete mode 100644 silk/static/silk/css/row.css
 rename silk/static/silk/js/{ => components}/cell.js (100%)
 rename silk/static/silk/js/{ => components}/filters.js (100%)
 create mode 100644 silk/static/silk/js/pages/base.js
 create mode 100644 silk/static/silk/js/pages/clear_db.js
 create mode 100644 silk/static/silk/js/pages/detail_base.js
 create mode 100644 silk/static/silk/js/pages/profile_detail.js
 create mode 100644 silk/static/silk/js/pages/profiling.js
 create mode 100644 silk/static/silk/js/pages/raw.js
 create mode 100644 silk/static/silk/js/pages/request.js
 create mode 100644 silk/static/silk/js/pages/requests.js
 create mode 100644 silk/static/silk/js/pages/root_base.js
 create mode 100644 silk/static/silk/js/pages/sql_detail.js
 create mode 100644 silk/static/silk/js/pages/summary.js

diff --git a/scss/cell.scss b/scss/components/cell.scss
similarity index 100%
rename from scss/cell.scss
rename to scss/components/cell.scss
diff --git a/scss/colors.scss b/scss/components/colors.scss
similarity index 100%
rename from scss/colors.scss
rename to scss/components/colors.scss
diff --git a/scss/fonts.scss b/scss/components/fonts.scss
similarity index 57%
rename from scss/fonts.scss
rename to scss/components/fonts.scss
index 91efebcb..e3177e34 100644
--- a/scss/fonts.scss
+++ b/scss/components/fonts.scss
@@ -4,52 +4,52 @@
 
 @font-face {
   font-family: FiraSans;
-  src: url(../fonts/fira/FiraSans-Regular.woff);
+  src: url(../../fonts/fira/FiraSans-Regular.woff);
   font-weight: normal;
 }
 
 @font-face {
   font-family: FiraSans;
-  src: url(../fonts/fira/FiraSans-Medium.woff);
+  src: url(../../fonts/fira/FiraSans-Medium.woff);
   font-weight: bold;
 }
 
 @font-face {
   font-family: FiraSans;
-  src: url(../fonts/fira/FiraSans-Bold.woff);
+  src: url(../../fonts/fira/FiraSans-Bold.woff);
   font-weight: bolder;
 }
 
 @font-face {
   font-family: FiraSans;
-  src: url(../fonts/fira/FiraSans-Light.woff);
+  src: url(../../fonts/fira/FiraSans-Light.woff);
   font-weight: lighter;
 }
 
 @font-face {
   font-family: FiraSans;
-  src: url(../fonts/fira/FiraSans-RegularItalic.woff);
+  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);
+  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);
+  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);
+  src: url(../../fonts/fira/FiraSans-LightItalic.woff);
   font-weight: lighter;
   font-style: italic;
 }
@@ -60,26 +60,26 @@
 
 @font-face {
   font-family: Fantasque;
-  src: url(../fonts/fantasque/FantasqueSansMono-Regular.woff);
+  src: url(../../fonts/fantasque/FantasqueSansMono-Regular.woff);
   font-weight: normal;
 }
 
 @font-face {
   font-family: Fantasque;
-  src: url(../fonts/fantasque/FantasqueSansMono-Bold.woff);
+  src: url(../../fonts/fantasque/FantasqueSansMono-Bold.woff);
   font-weight: bold;
 }
 
 @font-face {
   font-family: Fantasque;
-  src: url(../fonts/fantasque/FantasqueSansMono-RegItalic.woff);
+  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);
+  src: url(../../fonts/fantasque/FantasqueSansMono-BoldItalic.woff);
   font-weight: bold;
   font-style: italic;
 }
diff --git a/scss/heading.scss b/scss/components/heading.scss
similarity index 100%
rename from scss/heading.scss
rename to scss/components/heading.scss
diff --git a/scss/numeric.scss b/scss/components/numeric.scss
similarity index 100%
rename from scss/numeric.scss
rename to scss/components/numeric.scss
diff --git a/scss/row.scss b/scss/components/row.scss
similarity index 100%
rename from scss/row.scss
rename to scss/components/row.scss
diff --git a/scss/summary.scss b/scss/components/summary.scss
similarity index 100%
rename from scss/summary.scss
rename to scss/components/summary.scss
diff --git a/scss/pages/base.scss b/scss/pages/base.scss
new file mode 100644
index 00000000..4db416a0
--- /dev/null
+++ b/scss/pages/base.scss
@@ -0,0 +1,124 @@
+body {
+  font-family: FiraSans, "Helvetica Neue", Arial, sans-serif;
+  background-color: #f3f3f3;
+  margin: 0;
+  font-weight: lighter;
+}
+
+pre {
+  font-family: Fantasque;
+  background-color: white !important;
+  padding: 0.5em !important;
+  margin: 0 !important;
+  font-size: 14px;
+  text-align: left;
+}
+
+code {
+  font-family: Fantasque;
+  background-color: white !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: 14px;
+
+}
+
+html {
+  margin: 0;
+}
+
+#header {
+  height: 50px;
+  background-color: rgb(51, 51, 68);
+  width: 100%;
+  position: relative;
+  padding: 0;
+
+
+}
+
+#header div {
+  display: inline-block;
+}
+
+.menu {
+  height: 50px;
+  padding: 0;
+  margin: 0;
+
+}
+
+.menu-item {
+  height: 50px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin: 0;
+  margin-right: -4px;
+  color: white;
+
+}
+
+.menu-item a {
+  color: white !important;
+}
+
+#filter .menu-item {
+  margin-right: 0px;
+}
+
+.selectable-menu-item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+}
+
+.selectable-menu-item:hover {
+  background-color: #f3f3f3;
+  cursor: pointer;
+  color: black !important;
+}
+
+.selectable-menu-item:hover a {
+  color: black !important;
+}
+
+.menu-item-selected {
+  background-color: #f3f3f3;
+  color: black !important;
+}
+
+.menu-item-selected a {
+  color: black !important;
+}
+
+.menu-item-outer {
+  display: table !important;
+  height: 100%;
+  width: 100%;
+}
+
+.menu-item-inner {
+  display: table-cell !important;
+  vertical-align: middle;
+  width: 100%;
+}
+
+a:visited {
+  color: black;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+#filter {
+  height: 50px;
+  position: absolute;
+  right: 0;
+}
+
+.description {
+  font-style: italic;
+  font-size: 14px;
+  margin-bottom: 5px;
+}
diff --git a/scss/pages/clear_db.scss b/scss/pages/clear_db.scss
new file mode 100644
index 00000000..b26c62cd
--- /dev/null
+++ b/scss/pages/clear_db.scss
@@ -0,0 +1,39 @@
+.wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.inner {
+  margin: auto;
+  width: 960px;
+}
+
+.cleardb-form .cleardb-form-wrapper{
+  margin-bottom: 20px;
+}
+
+.cleardb-form label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.cleardb-form .btn {
+  background: #333344;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 2px;
+  cursor: pointer;
+  box-shadow: none;
+  font-size: 16px;
+  line-height: 20px;
+  border: 0;
+  min-width: 150px;
+  text-align: center;
+}
+.cleardb-form label :last-child {
+  margin-bottom: 0;
+}
+.msg {
+  margin-top: 20px;
+  color: #bac54b;
+}
diff --git a/scss/pages/cprofile.scss b/scss/pages/cprofile.scss
new file mode 100644
index 00000000..04889d22
--- /dev/null
+++ b/scss/pages/cprofile.scss
@@ -0,0 +1,53 @@
+#query-info-div {
+  margin-top: 15px;
+}
+
+#query-info-div .timestamp-div {
+  font-size: 13px;
+
+}
+
+#pyprofile-div {
+  display: block;
+  margin: auto;
+  width: 960px;
+}
+
+.pyprofile {
+  text-align: left;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+#graph-div {
+  padding: 25px;
+  background-color: white;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  width: 960px;
+  text-align: center;
+}
+
+#percent {
+  width: 20px;
+}
+
+svg {
+  display: block;
+}
diff --git a/scss/pages/detail_base.scss b/scss/pages/detail_base.scss
new file mode 100644
index 00000000..3605da30
--- /dev/null
+++ b/scss/pages/detail_base.scss
@@ -0,0 +1,32 @@
+#traceback {
+  overflow: visible;
+}
+
+#time-div {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+#query-div {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#query {
+  text-align: left;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+.line {
+  width: 100%;
+  display: inline-block;
+}
+
+.the-line {
+  background-color: #c3c3c3;
+}
+
+pre {
+  margin: 0;
+}
diff --git a/scss/pages/profile_detail.scss b/scss/pages/profile_detail.scss
new file mode 100644
index 00000000..04889d22
--- /dev/null
+++ b/scss/pages/profile_detail.scss
@@ -0,0 +1,53 @@
+#query-info-div {
+  margin-top: 15px;
+}
+
+#query-info-div .timestamp-div {
+  font-size: 13px;
+
+}
+
+#pyprofile-div {
+  display: block;
+  margin: auto;
+  width: 960px;
+}
+
+.pyprofile {
+  text-align: left;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+#graph-div {
+  padding: 25px;
+  background-color: white;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  width: 960px;
+  text-align: center;
+}
+
+#percent {
+  width: 20px;
+}
+
+svg {
+  display: block;
+}
diff --git a/scss/pages/profiling.scss b/scss/pages/profiling.scss
new file mode 100644
index 00000000..bec16d09
--- /dev/null
+++ b/scss/pages/profiling.scss
@@ -0,0 +1,20 @@
+.name-div {
+  font-weight: bold;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+.description {
+
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+.pyprofile {
+  overflow: scroll;
+  max-height: 650px;
+}
diff --git a/scss/pages/raw.scss b/scss/pages/raw.scss
new file mode 100644
index 00000000..fd49d273
--- /dev/null
+++ b/scss/pages/raw.scss
@@ -0,0 +1,31 @@
+pre {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: white !important;
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  /*noinspection CssInvalidElement*/
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+code {
+  font-family: Fantasque;
+  background-color: white !important;
+  width: 100% !important;
+  height: auto;
+  padding:0 !important;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
diff --git a/scss/pages/request.scss b/scss/pages/request.scss
new file mode 100644
index 00000000..d5eb83d0
--- /dev/null
+++ b/scss/pages/request.scss
@@ -0,0 +1,72 @@
+pre {
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  /*noinspection CssInvalidElement*/
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+#request-summary {
+
+}
+
+.cell {
+  background-color: transparent;
+  margin-top: 15px;
+}
+
+div.wrapper {
+  width: 100%;
+}
+
+div.wrapper div#request-summary {
+  margin: auto;
+  text-align: center;
+  width: 100%;
+}
+
+div.wrapper div#request-info {
+  width: 960px;
+  margin: auto auto 20px;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+.headers {
+  font-size: 12px;
+  font-family: Fantasque;
+  background-color: white;
+  width: 100%;
+}
+
+.headers tr:hover {
+  background-color: #f4f4f4;
+}
+
+.headers td {
+  padding-bottom: 5px;
+  padding-left: 5px;
+}
+
+.headers .key {
+  font-weight: bold;
+}
+
+.headers .value {
+
+}
diff --git a/scss/pages/requests.scss b/scss/pages/requests.scss
new file mode 100644
index 00000000..d241cb40
--- /dev/null
+++ b/scss/pages/requests.scss
@@ -0,0 +1,19 @@
+.container {
+  padding: 0 1em;
+}
+
+.resizing-input input {
+  background-color: white;
+  padding-top: 2px;
+  color: black;
+  box-shadow: inset 0 0 3px black;
+}
+
+.resizing-input input::placeholder {
+  color: #383838;
+  opacity: 1;
+}
+
+.filter-section {
+  line-height: 2.3;
+}
diff --git a/scss/pages/root_base.scss b/scss/pages/root_base.scss
new file mode 100644
index 00000000..0179c944
--- /dev/null
+++ b/scss/pages/root_base.scss
@@ -0,0 +1,269 @@
+.cell:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
+
+.cell {
+  text-align: center;
+}
+
+/* General styles for all menus */
+
+.cbp-spmenu {
+  background: rgb(51, 51, 68);
+  position: fixed;
+}
+
+h3 {
+  color: white;
+  font-size: 1.9em;
+  padding: 10px;
+  margin: 0;
+  font-weight: 300;
+  background: rgb(51, 51, 68);
+}
+
+/*.cbp-spmenu div {*/
+/*display: block;*/
+/*color: #fff;*/
+/*font-size: 1.1em;*/
+/*font-weight: 300;*/
+/*}*/
+
+/* Orientation-dependent styles for the content of the menu */
+
+.cbp-spmenu-vertical {
+  width: 300px;
+  height: 100%;
+  top: 0;
+  z-index: 1000;
+}
+
+/* Vertical menu that slides from the left or right */
+
+.cbp-spmenu-right {
+  right: -300px;
+}
+
+.cbp-spmenu-right.cbp-spmenu-open {
+  right: 0px;
+}
+
+/* Push classes applied to the body */
+
+.cbp-spmenu-push {
+  overflow-x: hidden;
+  position: relative;
+  left: 0;
+}
+
+.cbp-spmenu-push-toleft {
+  left: -300px;
+}
+
+/* Transitions */
+
+.cbp-spmenu,
+.cbp-spmenu-push {
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+/* Example media queries */
+
+@media screen and (max-width: 55.1875em) {
+
+  .cbp-spmenu-horizontal {
+    font-size: 75%;
+    height: 110px;
+  }
+
+}
+
+.active-filter {
+  font-size: 12px;
+  color: white;
+}
+
+.active-filter td {
+  padding: 0;
+  margin: 0;
+}
+
+#cbp-spmenu-s2 button {
+  color: white;
+  background: none;
+  border: none;
+}
+
+#cbp-spmenu-s2 button:hover {
+  color: black;
+  background: white;
+  border: none;
+  cursor: pointer;
+}
+
+#cbp-spmenu-s2 button:focus {
+  outline: none;
+}
+
+#slider-label {
+  margin-top: 5px;
+}
+
+#outer-slider {
+  text-align: center;
+  width: 80%;
+}
+
+#seconds {
+  width: 200px;
+  height: 50px;
+}
+
+#slider {
+  width: 80%;
+  margin: auto;
+  margin-top: 10px;
+}
+
+input[type="number"],
+input[type="text"] {
+  border: none;
+  padding: 10px;
+  width: 222px;
+}
+
+.add-button {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.add-button.disabled {
+  color: darkgray !important;
+}
+
+.add-button.disabled:hover {
+  background: transparent !important;
+  cursor: default !important;
+}
+
+.button-div {
+  display: inline-block;
+  text-align: center;
+  height: 50px;
+
+}
+
+.apply-div {
+  display: inline-block;
+  background-color: white;
+  color: black;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.apply-div:hover {
+  cursor: pointer;
+}
+
+select {
+  border-radius: 0;
+  max-width: 100%;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  /*safari and chrome*/
+  select {
+    //height: 30px;
+    line-height: 30px;
+    background: #f4f4f4;
+  }
+}
+
+select::-moz-focus-inner {
+  /*Remove button padding in FF*/
+  border: 0;
+  padding: 0;
+}
+
+#cbp-spmenu-s2 p {
+  margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 0;
+  font-size: 12px;
+  color: white;
+  font-style: oblique;
+  line-height: 16px;;
+}
+
+#filter-item {
+  width: 24px;
+  height: 20px;
+  float: right;
+  display: inline;
+  background-image: url('../../filter.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  text-align: right;
+}
+
+#filter-item #num-filters {
+  position: relative;
+  top: 7px;
+  left: 1px;
+}
+
+.resizing-input {
+  display: inline-block;
+}
+
+.resizing-input input, .resizing-input span {
+  font-size: 12px;
+  font-family: FiraSans;
+  white-space: pre;
+  font-weight: 300;
+  background-color: transparent;
+  color: white;
+  padding: 0;
+  padding-left: 4px;
+  padding-right: 4px;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.resizing-input input:focus {
+  outline: none;
+}
+
+.resizing-input input {
+
+}
+
+h4 {
+  padding: 0;
+  margin: 3px;
+  margin-left: 10px;
+  color: white;
+  font-weight: lighter;
+  font-size: 20px;
+}
+
+.filter-section {
+  color: white;
+  font-size: 12px;
+  line-height: 2.3;
+  padding: 10px;
+}
+
+.filter-section select {
+  margin-bottom: 10px;
+}
+
+.filter-section input {
+  padding: 4px;
+}
diff --git a/scss/pages/sql.scss b/scss/pages/sql.scss
new file mode 100644
index 00000000..6f8222cf
--- /dev/null
+++ b/scss/pages/sql.scss
@@ -0,0 +1,55 @@
+.right-aligned {
+  text-align: right;
+
+}
+
+.center-aligned {
+  text-align: center;
+
+}
+
+.left-aligned {
+  text-align: left;
+}
+
+#table-pagination {
+  text-align: center;
+  margin: 20px;
+}
+
+table {
+  border-spacing: 0;
+  margin: auto;
+  max-width: 920px;
+}
+
+tr {
+  height: 20px;
+}
+
+tr.data-row:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
+
+td {
+  padding: 5px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+th {
+  height: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#table-div {
+  width: 100%;
+  margin-top: 40px;
+}
+
+#table-pagination div {
+  padding: 5px;
+}
diff --git a/scss/pages/sql_detail.scss b/scss/pages/sql_detail.scss
new file mode 100644
index 00000000..c6af3acd
--- /dev/null
+++ b/scss/pages/sql_detail.scss
@@ -0,0 +1,59 @@
+#traceback {
+  width: 960px;
+  margin: auto;
+}
+
+#traceback pre {
+  margin-top: 15px !important;
+  margin-bottom: 15px !important;
+}
+
+#traceback .not-third-party {
+  font-weight: bold;
+}
+
+a:hover {
+  color: #9dd0ff;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+code {
+  background-color: transparent !important;
+}
+
+#query-div pre {
+  background-color: transparent !important;
+}
+
+#query-div {
+  padding-top: 15px;
+}
+
+#query-info-div div {
+  padding-top: 5px;
+}
+
+#query-plan-div {
+  text-align: left;
+  width: 960px;
+  margin: auto;
+}
+
+#plan-div code {
+  margin: auto !important;
+  display: inline-block;
+}
+
+#query-plan-head {
+  padding-top: 5px;
+  padding-bottom: 15px;
+  text-align: center;
+  margin: auto;
+}
+
+.file-path {
+  font-size: 13px;
+}
diff --git a/scss/pages/summary.scss b/scss/pages/summary.scss
new file mode 100644
index 00000000..3a6576ed
--- /dev/null
+++ b/scss/pages/summary.scss
@@ -0,0 +1,51 @@
+.wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.inner {
+  margin: auto;
+  width: 960px;
+}
+
+.summary-cell {
+  display: inline-block;
+  text-align: center;
+  padding: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.summary-cell .desc {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.no-data {
+  font-size: 12px;
+  font-style: oblique;
+  margin-left: 10px;
+}
+
+h2 {
+  margin-bottom: 0;;
+}
+
+#filters {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+#filters input,
+#filters span {
+  color: black !important;
+  font-weight: bold;
+}
+
+#filter-image {
+  width: 20px;
+}
+
+#filter-cell {
+  padding-left: 5px;
+}
diff --git a/silk/static/silk/css/cell.css b/silk/static/silk/css/cell.css
deleted file mode 100644
index 83141d72..00000000
--- a/silk/static/silk/css/cell.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.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 {
-    margin-bottom: 15px;
-    font-size: 13px; }
-  .cell .meta {
-    font-size: 12px;
-    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: 18px;
-    margin-bottom: 15px; }
diff --git a/silk/static/silk/css/components/cell.css b/silk/static/silk/css/components/cell.css
new file mode 100644
index 00000000..b0e60a96
--- /dev/null
+++ b/silk/static/silk/css/components/cell.css
@@ -0,0 +1,32 @@
+.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 {
+  margin-bottom: 15px;
+  font-size: 13px;
+}
+.cell .meta {
+  font-size: 12px;
+  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: 18px;
+  margin-bottom: 15px;
+}
diff --git a/silk/static/silk/css/colors.css b/silk/static/silk/css/components/colors.css
similarity index 51%
rename from silk/static/silk/css/colors.css
rename to silk/static/silk/css/components/colors.css
index f997544e..f8ec26c4 100644
--- a/silk/static/silk/css/colors.css
+++ b/silk/static/silk/css/components/colors.css
@@ -1,14 +1,19 @@
 .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;
+}
diff --git a/silk/static/silk/css/components/fonts.css b/silk/static/silk/css/components/fonts.css
new file mode 100644
index 00000000..2a2c14fc
--- /dev/null
+++ b/silk/static/silk/css/components/fonts.css
@@ -0,0 +1,72 @@
+/**
+*   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;
+}
diff --git a/silk/static/silk/css/components/heading.css b/silk/static/silk/css/components/heading.css
new file mode 100644
index 00000000..ee5ae8df
--- /dev/null
+++ b/silk/static/silk/css/components/heading.css
@@ -0,0 +1,14 @@
+.heading {
+  width: 100%;
+  background-color: transparent;
+  height: 30px;
+  display: table;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.heading .inner-heading {
+  display: table-cell;
+  text-align: left;
+  padding: 0;
+  vertical-align: middle;
+}
diff --git a/silk/static/silk/css/components/numeric.css b/silk/static/silk/css/components/numeric.css
new file mode 100644
index 00000000..fe141081
--- /dev/null
+++ b/silk/static/silk/css/components/numeric.css
@@ -0,0 +1,15 @@
+.numeric {
+  font-weight: normal;
+}
+
+.unit {
+  font-weight: normal;
+}
+
+.numeric .unit {
+  font-size: 12px;
+}
+
+.numeric {
+  font-size: 20px;
+}
diff --git a/silk/static/silk/css/components/row.css b/silk/static/silk/css/components/row.css
new file mode 100644
index 00000000..9acfcd8c
--- /dev/null
+++ b/silk/static/silk/css/components/row.css
@@ -0,0 +1,56 @@
+.row-wrapper {
+  display: table;
+  margin: 2rem;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
+}
+.row-wrapper .row {
+  display: table-row;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.row-wrapper .row div {
+  padding: 1rem;
+}
+.row-wrapper .row .col {
+  font-size: 20px;
+  display: table-cell;
+}
+.row-wrapper .row .timestamp-div {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  margin-bottom: 15px;
+  font-size: 13px;
+}
+.row-wrapper .row .meta {
+  font-size: 12px;
+  color: #be5b43;
+}
+.row-wrapper .row .meta .unit {
+  font-size: 9px;
+  font-weight: lighter !important;
+}
+.row-wrapper .row .method-div {
+  font-weight: bold;
+  font-size: 20px;
+}
+.row-wrapper .row .path-div {
+  font-size: 18px;
+  margin-bottom: 15px;
+}
+.row-wrapper .row .num-queries-div {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.row-wrapper .row .spacing .numeric {
+  padding: 0 0.3rem;
+}
+.row-wrapper .row .spacing .meta {
+  padding: 0 0.3rem;
+}
+.row-wrapper .row:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
diff --git a/silk/static/silk/css/summary.css b/silk/static/silk/css/components/summary.css
similarity index 56%
rename from silk/static/silk/css/summary.css
rename to silk/static/silk/css/components/summary.css
index e4a521ea..940bf9a5 100644
--- a/silk/static/silk/css/summary.css
+++ b/silk/static/silk/css/components/summary.css
@@ -1,18 +1,23 @@
 #error-div {
-  margin: 10px; }
+  margin: 10px;
+}
 
 #query-div {
   margin: auto;
   width: 960px;
-  text-align: center; }
+  text-align: center;
+}
 
 #code {
-  text-align: left; }
+  text-align: left;
+}
 
 .name-div {
   margin-top: 20px;
   margin-bottom: 15px;
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .description {
-  text-align: left; }
+  text-align: left;
+}
diff --git a/silk/static/silk/css/fonts.css b/silk/static/silk/css/fonts.css
deleted file mode 100644
index 7c10e1b1..00000000
--- a/silk/static/silk/css/fonts.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
-*   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; }
diff --git a/silk/static/silk/css/heading.css b/silk/static/silk/css/heading.css
deleted file mode 100644
index f702b983..00000000
--- a/silk/static/silk/css/heading.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.heading {
-  width: 100%;
-  background-color: transparent;
-  height: 30px;
-  display: table;
-  font-weight: bold;
-  margin-top: 20px; }
-  .heading .inner-heading {
-    display: table-cell;
-    text-align: left;
-    padding: 0;
-    vertical-align: middle; }
diff --git a/silk/static/silk/css/numeric.css b/silk/static/silk/css/numeric.css
deleted file mode 100644
index de378219..00000000
--- a/silk/static/silk/css/numeric.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.numeric {
-  font-weight: normal; }
-
-.unit {
-  font-weight: normal; }
-
-.numeric .unit {
-  font-size: 12px; }
-
-.numeric {
-  font-size: 20px; }
diff --git a/silk/static/silk/css/pages/base.css b/silk/static/silk/css/pages/base.css
new file mode 100644
index 00000000..05432b5b
--- /dev/null
+++ b/silk/static/silk/css/pages/base.css
@@ -0,0 +1,118 @@
+body {
+  font-family: FiraSans, "Helvetica Neue", Arial, sans-serif;
+  background-color: #f3f3f3;
+  margin: 0;
+  font-weight: lighter;
+}
+
+pre {
+  font-family: Fantasque;
+  background-color: white !important;
+  padding: 0.5em !important;
+  margin: 0 !important;
+  font-size: 14px;
+  text-align: left;
+}
+
+code {
+  font-family: Fantasque;
+  background-color: white !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: 14px;
+}
+
+html {
+  margin: 0;
+}
+
+#header {
+  height: 50px;
+  background-color: rgb(51, 51, 68);
+  width: 100%;
+  position: relative;
+  padding: 0;
+}
+
+#header div {
+  display: inline-block;
+}
+
+.menu {
+  height: 50px;
+  padding: 0;
+  margin: 0;
+}
+
+.menu-item {
+  height: 50px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin: 0;
+  margin-right: -4px;
+  color: white;
+}
+
+.menu-item a {
+  color: white !important;
+}
+
+#filter .menu-item {
+  margin-right: 0px;
+}
+
+.selectable-menu-item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.selectable-menu-item:hover {
+  background-color: #f3f3f3;
+  cursor: pointer;
+  color: black !important;
+}
+
+.selectable-menu-item:hover a {
+  color: black !important;
+}
+
+.menu-item-selected {
+  background-color: #f3f3f3;
+  color: black !important;
+}
+
+.menu-item-selected a {
+  color: black !important;
+}
+
+.menu-item-outer {
+  display: table !important;
+  height: 100%;
+  width: 100%;
+}
+
+.menu-item-inner {
+  display: table-cell !important;
+  vertical-align: middle;
+  width: 100%;
+}
+
+a:visited {
+  color: black;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+#filter {
+  height: 50px;
+  position: absolute;
+  right: 0;
+}
+
+.description {
+  font-style: italic;
+  font-size: 14px;
+  margin-bottom: 5px;
+}
diff --git a/silk/static/silk/css/pages/clear_db.css b/silk/static/silk/css/pages/clear_db.css
new file mode 100644
index 00000000..30fa2a38
--- /dev/null
+++ b/silk/static/silk/css/pages/clear_db.css
@@ -0,0 +1,41 @@
+.wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.inner {
+  margin: auto;
+  width: 960px;
+}
+
+.cleardb-form .cleardb-form-wrapper {
+  margin-bottom: 20px;
+}
+
+.cleardb-form label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.cleardb-form .btn {
+  background: #333344;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 2px;
+  cursor: pointer;
+  box-shadow: none;
+  font-size: 16px;
+  line-height: 20px;
+  border: 0;
+  min-width: 150px;
+  text-align: center;
+}
+
+.cleardb-form label :last-child {
+  margin-bottom: 0;
+}
+
+.msg {
+  margin-top: 20px;
+  color: #bac54b;
+}
diff --git a/silk/static/silk/css/pages/cprofile.css b/silk/static/silk/css/pages/cprofile.css
new file mode 100644
index 00000000..0953cad8
--- /dev/null
+++ b/silk/static/silk/css/pages/cprofile.css
@@ -0,0 +1,52 @@
+#query-info-div {
+  margin-top: 15px;
+}
+
+#query-info-div .timestamp-div {
+  font-size: 13px;
+}
+
+#pyprofile-div {
+  display: block;
+  margin: auto;
+  width: 960px;
+}
+
+.pyprofile {
+  text-align: left;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+#graph-div {
+  padding: 25px;
+  background-color: white;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  width: 960px;
+  text-align: center;
+}
+
+#percent {
+  width: 20px;
+}
+
+svg {
+  display: block;
+}
diff --git a/silk/static/silk/css/pages/detail_base.css b/silk/static/silk/css/pages/detail_base.css
new file mode 100644
index 00000000..3605da30
--- /dev/null
+++ b/silk/static/silk/css/pages/detail_base.css
@@ -0,0 +1,32 @@
+#traceback {
+  overflow: visible;
+}
+
+#time-div {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+#query-div {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#query {
+  text-align: left;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+.line {
+  width: 100%;
+  display: inline-block;
+}
+
+.the-line {
+  background-color: #c3c3c3;
+}
+
+pre {
+  margin: 0;
+}
diff --git a/silk/static/silk/css/pages/profile_detail.css b/silk/static/silk/css/pages/profile_detail.css
new file mode 100644
index 00000000..0953cad8
--- /dev/null
+++ b/silk/static/silk/css/pages/profile_detail.css
@@ -0,0 +1,52 @@
+#query-info-div {
+  margin-top: 15px;
+}
+
+#query-info-div .timestamp-div {
+  font-size: 13px;
+}
+
+#pyprofile-div {
+  display: block;
+  margin: auto;
+  width: 960px;
+}
+
+.pyprofile {
+  text-align: left;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+#graph-div {
+  padding: 25px;
+  background-color: white;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  width: 960px;
+  text-align: center;
+}
+
+#percent {
+  width: 20px;
+}
+
+svg {
+  display: block;
+}
diff --git a/silk/static/silk/css/pages/profiling.css b/silk/static/silk/css/pages/profiling.css
new file mode 100644
index 00000000..1e71fb2b
--- /dev/null
+++ b/silk/static/silk/css/pages/profiling.css
@@ -0,0 +1,16 @@
+.name-div {
+  font-weight: bold;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+.pyprofile {
+  overflow: scroll;
+  max-height: 650px;
+}
diff --git a/silk/static/silk/css/pages/raw.css b/silk/static/silk/css/pages/raw.css
new file mode 100644
index 00000000..37eb17a4
--- /dev/null
+++ b/silk/static/silk/css/pages/raw.css
@@ -0,0 +1,31 @@
+pre {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: white !important;
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  /*noinspection CssInvalidElement*/
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+code {
+  font-family: Fantasque;
+  background-color: white !important;
+  width: 100% !important;
+  height: auto;
+  padding: 0 !important;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
diff --git a/silk/static/silk/css/pages/request.css b/silk/static/silk/css/pages/request.css
new file mode 100644
index 00000000..fce76182
--- /dev/null
+++ b/silk/static/silk/css/pages/request.css
@@ -0,0 +1,64 @@
+pre {
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  /*noinspection CssInvalidElement*/
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+.cell {
+  background-color: transparent;
+  margin-top: 15px;
+}
+
+div.wrapper {
+  width: 100%;
+}
+
+div.wrapper div#request-summary {
+  margin: auto;
+  text-align: center;
+  width: 100%;
+}
+
+div.wrapper div#request-info {
+  width: 960px;
+  margin: auto auto 20px;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+.headers {
+  font-size: 12px;
+  font-family: Fantasque;
+  background-color: white;
+  width: 100%;
+}
+
+.headers tr:hover {
+  background-color: #f4f4f4;
+}
+
+.headers td {
+  padding-bottom: 5px;
+  padding-left: 5px;
+}
+
+.headers .key {
+  font-weight: bold;
+}
diff --git a/silk/static/silk/css/pages/requests.css b/silk/static/silk/css/pages/requests.css
new file mode 100644
index 00000000..d241cb40
--- /dev/null
+++ b/silk/static/silk/css/pages/requests.css
@@ -0,0 +1,19 @@
+.container {
+  padding: 0 1em;
+}
+
+.resizing-input input {
+  background-color: white;
+  padding-top: 2px;
+  color: black;
+  box-shadow: inset 0 0 3px black;
+}
+
+.resizing-input input::placeholder {
+  color: #383838;
+  opacity: 1;
+}
+
+.filter-section {
+  line-height: 2.3;
+}
diff --git a/silk/static/silk/css/pages/root_base.css b/silk/static/silk/css/pages/root_base.css
new file mode 100644
index 00000000..5906b4f4
--- /dev/null
+++ b/silk/static/silk/css/pages/root_base.css
@@ -0,0 +1,252 @@
+.cell:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
+
+.cell {
+  text-align: center;
+}
+
+/* General styles for all menus */
+.cbp-spmenu {
+  background: rgb(51, 51, 68);
+  position: fixed;
+}
+
+h3 {
+  color: white;
+  font-size: 1.9em;
+  padding: 10px;
+  margin: 0;
+  font-weight: 300;
+  background: rgb(51, 51, 68);
+}
+
+/*.cbp-spmenu div {*/
+/*display: block;*/
+/*color: #fff;*/
+/*font-size: 1.1em;*/
+/*font-weight: 300;*/
+/*}*/
+/* Orientation-dependent styles for the content of the menu */
+.cbp-spmenu-vertical {
+  width: 300px;
+  height: 100%;
+  top: 0;
+  z-index: 1000;
+}
+
+/* Vertical menu that slides from the left or right */
+.cbp-spmenu-right {
+  right: -300px;
+}
+
+.cbp-spmenu-right.cbp-spmenu-open {
+  right: 0px;
+}
+
+/* Push classes applied to the body */
+.cbp-spmenu-push {
+  overflow-x: hidden;
+  position: relative;
+  left: 0;
+}
+
+.cbp-spmenu-push-toleft {
+  left: -300px;
+}
+
+/* Transitions */
+.cbp-spmenu,
+.cbp-spmenu-push {
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+/* Example media queries */
+@media screen and (max-width: 55.1875em) {
+  .cbp-spmenu-horizontal {
+    font-size: 75%;
+    height: 110px;
+  }
+}
+.active-filter {
+  font-size: 12px;
+  color: white;
+}
+
+.active-filter td {
+  padding: 0;
+  margin: 0;
+}
+
+#cbp-spmenu-s2 button {
+  color: white;
+  background: none;
+  border: none;
+}
+
+#cbp-spmenu-s2 button:hover {
+  color: black;
+  background: white;
+  border: none;
+  cursor: pointer;
+}
+
+#cbp-spmenu-s2 button:focus {
+  outline: none;
+}
+
+#slider-label {
+  margin-top: 5px;
+}
+
+#outer-slider {
+  text-align: center;
+  width: 80%;
+}
+
+#seconds {
+  width: 200px;
+  height: 50px;
+}
+
+#slider {
+  width: 80%;
+  margin: auto;
+  margin-top: 10px;
+}
+
+input[type=number],
+input[type=text] {
+  border: none;
+  padding: 10px;
+  width: 222px;
+}
+
+.add-button {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.add-button.disabled {
+  color: darkgray !important;
+}
+
+.add-button.disabled:hover {
+  background: transparent !important;
+  cursor: default !important;
+}
+
+.button-div {
+  display: inline-block;
+  text-align: center;
+  height: 50px;
+}
+
+.apply-div {
+  display: inline-block;
+  background-color: white;
+  color: black;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.apply-div:hover {
+  cursor: pointer;
+}
+
+select {
+  border-radius: 0;
+  max-width: 100%;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  /*safari and chrome*/
+  select {
+    line-height: 30px;
+    background: #f4f4f4;
+  }
+}
+select::-moz-focus-inner {
+  /*Remove button padding in FF*/
+  border: 0;
+  padding: 0;
+}
+
+#cbp-spmenu-s2 p {
+  margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 0;
+  font-size: 12px;
+  color: white;
+  font-style: oblique;
+  line-height: 16px;
+}
+
+#filter-item {
+  width: 24px;
+  height: 20px;
+  float: right;
+  display: inline;
+  background-image: url("../../filter.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  text-align: right;
+}
+
+#filter-item #num-filters {
+  position: relative;
+  top: 7px;
+  left: 1px;
+}
+
+.resizing-input {
+  display: inline-block;
+}
+
+.resizing-input input, .resizing-input span {
+  font-size: 12px;
+  font-family: FiraSans;
+  white-space: pre;
+  font-weight: 300;
+  background-color: transparent;
+  color: white;
+  padding: 0;
+  padding-left: 4px;
+  padding-right: 4px;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.resizing-input input:focus {
+  outline: none;
+}
+
+h4 {
+  padding: 0;
+  margin: 3px;
+  margin-left: 10px;
+  color: white;
+  font-weight: lighter;
+  font-size: 20px;
+}
+
+.filter-section {
+  color: white;
+  font-size: 12px;
+  line-height: 2.3;
+  padding: 10px;
+}
+
+.filter-section select {
+  margin-bottom: 10px;
+}
+
+.filter-section input {
+  padding: 4px;
+}
diff --git a/silk/static/silk/css/pages/sql.css b/silk/static/silk/css/pages/sql.css
new file mode 100644
index 00000000..86f47b69
--- /dev/null
+++ b/silk/static/silk/css/pages/sql.css
@@ -0,0 +1,53 @@
+.right-aligned {
+  text-align: right;
+}
+
+.center-aligned {
+  text-align: center;
+}
+
+.left-aligned {
+  text-align: left;
+}
+
+#table-pagination {
+  text-align: center;
+  margin: 20px;
+}
+
+table {
+  border-spacing: 0;
+  margin: auto;
+  max-width: 920px;
+}
+
+tr {
+  height: 20px;
+}
+
+tr.data-row:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
+
+td {
+  padding: 5px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+th {
+  height: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#table-div {
+  width: 100%;
+  margin-top: 40px;
+}
+
+#table-pagination div {
+  padding: 5px;
+}
diff --git a/silk/static/silk/css/pages/sql_detail.css b/silk/static/silk/css/pages/sql_detail.css
new file mode 100644
index 00000000..c6af3acd
--- /dev/null
+++ b/silk/static/silk/css/pages/sql_detail.css
@@ -0,0 +1,59 @@
+#traceback {
+  width: 960px;
+  margin: auto;
+}
+
+#traceback pre {
+  margin-top: 15px !important;
+  margin-bottom: 15px !important;
+}
+
+#traceback .not-third-party {
+  font-weight: bold;
+}
+
+a:hover {
+  color: #9dd0ff;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+code {
+  background-color: transparent !important;
+}
+
+#query-div pre {
+  background-color: transparent !important;
+}
+
+#query-div {
+  padding-top: 15px;
+}
+
+#query-info-div div {
+  padding-top: 5px;
+}
+
+#query-plan-div {
+  text-align: left;
+  width: 960px;
+  margin: auto;
+}
+
+#plan-div code {
+  margin: auto !important;
+  display: inline-block;
+}
+
+#query-plan-head {
+  padding-top: 5px;
+  padding-bottom: 15px;
+  text-align: center;
+  margin: auto;
+}
+
+.file-path {
+  font-size: 13px;
+}
diff --git a/silk/static/silk/css/pages/summary.css b/silk/static/silk/css/pages/summary.css
new file mode 100644
index 00000000..65bbf7d5
--- /dev/null
+++ b/silk/static/silk/css/pages/summary.css
@@ -0,0 +1,51 @@
+.wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.inner {
+  margin: auto;
+  width: 960px;
+}
+
+.summary-cell {
+  display: inline-block;
+  text-align: center;
+  padding: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.summary-cell .desc {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.no-data {
+  font-size: 12px;
+  font-style: oblique;
+  margin-left: 10px;
+}
+
+h2 {
+  margin-bottom: 0;
+}
+
+#filters {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+#filters input,
+#filters span {
+  color: black !important;
+  font-weight: bold;
+}
+
+#filter-image {
+  width: 20px;
+}
+
+#filter-cell {
+  padding-left: 5px;
+}
diff --git a/silk/static/silk/css/row.css b/silk/static/silk/css/row.css
deleted file mode 100644
index ce86aa5d..00000000
--- a/silk/static/silk/css/row.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.row-wrapper {
-  display: table;
-  margin: 2rem;
-  width: 100%;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: fill-available; }
-  .row-wrapper .row {
-    display: table-row;
-    transition: background-color 0.15s ease, color 0.15s ease; }
-    .row-wrapper .row div {
-      padding: 1rem; }
-    .row-wrapper .row .col {
-      font-size: 20px;
-      display: table-cell; }
-    .row-wrapper .row .timestamp-div {
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
-      margin-bottom: 15px;
-      font-size: 13px; }
-    .row-wrapper .row .meta {
-      font-size: 12px;
-      color: #be5b43; }
-    .row-wrapper .row .meta .unit {
-      font-size: 9px;
-      font-weight: lighter !important; }
-    .row-wrapper .row .method-div {
-      font-weight: bold;
-      font-size: 20px; }
-    .row-wrapper .row .path-div {
-      font-size: 18px;
-      margin-bottom: 15px; }
-    .row-wrapper .row .num-queries-div {
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px; }
-    .row-wrapper .row .spacing .numeric {
-      padding: 0 0.3rem; }
-    .row-wrapper .row .spacing .meta {
-      padding: 0 0.3rem; }
-  .row-wrapper .row:hover {
-    background-color: #333344;
-    color: white;
-    cursor: pointer; }
diff --git a/silk/static/silk/js/cell.js b/silk/static/silk/js/components/cell.js
similarity index 100%
rename from silk/static/silk/js/cell.js
rename to silk/static/silk/js/components/cell.js
diff --git a/silk/static/silk/js/filters.js b/silk/static/silk/js/components/filters.js
similarity index 100%
rename from silk/static/silk/js/filters.js
rename to silk/static/silk/js/components/filters.js
diff --git a/silk/static/silk/js/pages/base.js b/silk/static/silk/js/pages/base.js
new file mode 100644
index 00000000..c031a862
--- /dev/null
+++ b/silk/static/silk/js/pages/base.js
@@ -0,0 +1,5 @@
+$(document).ready(function () {
+    configureSpanFontColors($('#num-joins-div').find('.numeric'), 3, 5);
+    configureSpanFontColors($('#time-taken-div').find('.numeric'), 200, 500);
+    configureSpanFontColors($('#num-queries-div').find('.numeric'), 10, 500);
+});
diff --git a/silk/static/silk/js/pages/clear_db.js b/silk/static/silk/js/pages/clear_db.js
new file mode 100644
index 00000000..73b84f60
--- /dev/null
+++ b/silk/static/silk/js/pages/clear_db.js
@@ -0,0 +1,7 @@
+$(document).ready(function () {
+    initFilters();
+    var $inputs = $('.resizing-input');
+    $inputs.focusout(function () {
+        $('#filter-form').submit();
+    });
+});
diff --git a/silk/static/silk/js/pages/detail_base.js b/silk/static/silk/js/pages/detail_base.js
new file mode 100644
index 00000000..0cc359d1
--- /dev/null
+++ b/silk/static/silk/js/pages/detail_base.js
@@ -0,0 +1 @@
+hljs.initHighlightingOnLoad();
diff --git a/silk/static/silk/js/pages/profile_detail.js b/silk/static/silk/js/pages/profile_detail.js
new file mode 100644
index 00000000..4f1c5b9b
--- /dev/null
+++ b/silk/static/silk/js/pages/profile_detail.js
@@ -0,0 +1,15 @@
+function createViz() {
+    var profileDotURL = JSON.parse(document.getElementById("profileDotURL").textContent);
+
+    $.get(
+        profileDotURL,
+        { cutoff: $('#percent').val() },
+        function (response) {
+            var svg = '#graph-div';
+            $(svg).html(Viz(response.dot));
+            $(svg + ' svg').attr('width', 960).attr('height', 600);
+            svgPanZoom(svg + ' svg', { controlIconsEnabled: true });
+        }
+    );
+}
+createViz();
diff --git a/silk/static/silk/js/pages/profiling.js b/silk/static/silk/js/pages/profiling.js
new file mode 100644
index 00000000..41652954
--- /dev/null
+++ b/silk/static/silk/js/pages/profiling.js
@@ -0,0 +1,4 @@
+$(document).ready(function () {
+    initFilters();
+    initFilterButton();
+});
diff --git a/silk/static/silk/js/pages/raw.js b/silk/static/silk/js/pages/raw.js
new file mode 100644
index 00000000..0cc359d1
--- /dev/null
+++ b/silk/static/silk/js/pages/raw.js
@@ -0,0 +1 @@
+hljs.initHighlightingOnLoad();
diff --git a/silk/static/silk/js/pages/request.js b/silk/static/silk/js/pages/request.js
new file mode 100644
index 00000000..0cc359d1
--- /dev/null
+++ b/silk/static/silk/js/pages/request.js
@@ -0,0 +1 @@
+hljs.initHighlightingOnLoad();
diff --git a/silk/static/silk/js/pages/requests.js b/silk/static/silk/js/pages/requests.js
new file mode 100644
index 00000000..41652954
--- /dev/null
+++ b/silk/static/silk/js/pages/requests.js
@@ -0,0 +1,4 @@
+$(document).ready(function () {
+    initFilters();
+    initFilterButton();
+});
diff --git a/silk/static/silk/js/pages/root_base.js b/silk/static/silk/js/pages/root_base.js
new file mode 100644
index 00000000..ad3e1d29
--- /dev/null
+++ b/silk/static/silk/js/pages/root_base.js
@@ -0,0 +1,15 @@
+function initFilterButton() {
+    $('#filter-button').click(function () {
+        $(this).toggleClass('active');
+        $('body').toggleClass('cbp-spmenu-push-toleft');
+        $('#cbp-spmenu-s2').toggleClass('cbp-spmenu-open');
+        initFilters();
+    });
+}
+function submitFilters() {
+    $('#filter-form2').submit();
+}
+function submitEmptyFilters() {
+    $('#cbp-spmenu-s2 :input:not([type=hidden])').val('');
+    submitFilters();
+}
diff --git a/silk/static/silk/js/pages/sql_detail.js b/silk/static/silk/js/pages/sql_detail.js
new file mode 100644
index 00000000..6daf3e15
--- /dev/null
+++ b/silk/static/silk/js/pages/sql_detail.js
@@ -0,0 +1,4 @@
+$(document).ready(function () {
+    configureSpanFontColors($('#num-joins-div').find('.numeric'), 3, 5);
+    configureSpanFontColors($('#time-taken-div').find('.numeric'), 200, 500);
+});
diff --git a/silk/static/silk/js/pages/summary.js b/silk/static/silk/js/pages/summary.js
new file mode 100644
index 00000000..73b84f60
--- /dev/null
+++ b/silk/static/silk/js/pages/summary.js
@@ -0,0 +1,7 @@
+$(document).ready(function () {
+    initFilters();
+    var $inputs = $('.resizing-input');
+    $inputs.focusout(function () {
+        $('#filter-form').submit();
+    });
+});
diff --git a/silk/templates/silk/base/base.html b/silk/templates/silk/base/base.html
index 11386854..15d5131a 100644
--- a/silk/templates/silk/base/base.html
+++ b/silk/templates/silk/base/base.html
@@ -3,151 +3,18 @@
 <html>
 <head>
     <title>Silky</title>
-    <link rel="stylesheet" href="{% static "silk/css/fonts.css" %}"/>
-    <link rel="stylesheet" href="{% static "silk/css/colors.css" %}"/>
+    <link rel="stylesheet" href="{% static "silk/css/components/fonts.css" %}"/>
+    <link rel="stylesheet" href="{% static "silk/css/components/colors.css" %}"/>
     <link rel="stylesheet" href="{% static "silk/lib/jquery-ui-1.13.1.min.css" %}"/>
     <link rel="icon" type="image/png" href="{% static 'silk/favicon-32x32.png' %}" sizes="32x32">
     <link rel="icon" type="image/png" href="{% static 'silk/favicon-16x16.png' %}" sizes="16x16">
-    <style>
-        body {
-            font-family: FiraSans, "Helvetica Neue", Arial, sans-serif;
-            background-color: #f3f3f3;
-            margin: 0;
-            font-weight: lighter;
-        }
-
-        pre {
-            font-family: Fantasque;
-            background-color: white !important;
-            padding: 0.5em !important;
-            margin: 0 !important;
-            font-size: 14px;
-            text-align: left;
-        }
-
-        code {
-            font-family: Fantasque;
-            background-color: white !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            font-size: 14px;
-
-        }
-
-        html {
-            margin: 0;
-        }
-
-        #header {
-            height: 50px;
-            background-color: rgb(51, 51, 68);
-            width: 100%;
-            position: relative;
-            padding: 0;
-
-
-        }
-
-        #header div {
-            display: inline-block;
-        }
-
-        .menu {
-            height: 50px;
-            padding: 0;
-            margin: 0;
-
-        }
-
-        .menu-item {
-            height: 50px;
-            padding-left: 10px;
-            padding-right: 10px;
-            margin: 0;
-            margin-right: -4px;
-            color: white;
-
-        }
-
-        .menu-item a {
-            color: white !important;
-        }
-
-        #filter .menu-item {
-            margin-right: 0px;
-        }
-
-        .selectable-menu-item {
-            transition: background-color 0.15s ease, color 0.15s ease;
-
-        }
-
-        .selectable-menu-item:hover {
-            background-color: #f3f3f3;
-            cursor: pointer;
-            color: black !important;
-        }
-
-        .selectable-menu-item:hover a {
-            color: black !important;
-        }
-
-        .menu-item-selected {
-            background-color: #f3f3f3;
-            color: black !important;
-        }
-
-        .menu-item-selected a {
-            color: black !important;
-        }
-
-        .menu-item-outer {
-            display: table !important;
-            height: 100%;
-            width: 100%;
-        }
-
-        .menu-item-inner {
-            display: table-cell !important;
-            vertical-align: middle;
-            width: 100%;
-        }
-
-        a:visited {
-            color: black;
-        }
-
-        a {
-            color: black;
-            text-decoration: none;
-        }
-
-        #filter {
-            height: 50px;
-            position: absolute;
-            right: 0;
-        }
-
-        .description {
-            font-style: italic;
-            font-size: 14px;
-            margin-bottom: 5px;
-        }
-
-
-    </style>
+    <link rel="stylesheet" href="{% static "silk/css/pages/base.css" %}"/>
     {% block style %}
     {% endblock %}
     <script src="{% static 'silk/lib/jquery-3.6.0.min.js' %}"></script>
     <script src="{% static 'silk/lib/jquery-ui-1.13.1.min.js' %}"></script>
-    <script src="{% static 'silk/js/cell.js' %}"></script>
-    <script>
-        $(document).ready(function () {
-            configureSpanFontColors($('#num-joins-div').find('.numeric'), 3, 5);
-            configureSpanFontColors($('#time-taken-div').find('.numeric'), 200, 500);
-            configureSpanFontColors($('#num-queries-div').find('.numeric'), 10, 500);
-        });
-    </script>
+    <script src="{% static 'silk/js/components/cell.js' %}"></script>
+    <script src="{% static 'silk/js/pages/base.js' %}"></script>
     {% block js %}
     {% endblock %}
 
diff --git a/silk/templates/silk/base/detail_base.html b/silk/templates/silk/base/detail_base.html
index 7d2d43ac..58304938 100644
--- a/silk/templates/silk/base/detail_base.html
+++ b/silk/templates/silk/base/detail_base.html
@@ -2,54 +2,15 @@
 {% load static %}
 {% block style %}
     <link rel="stylesheet" href="{% static 'silk/lib/highlight/foundation.css' %}"/>
-    <link rel="stylesheet" href="{% static 'silk/css/heading.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/heading.css' %}"/>
     <link rel="icon" type="image/png" href="{% static 'silk/favicon-32x32.png' %}" sizes="32x32">
     <link rel="icon" type="image/png" href="{% static 'silk/favicon-16x16.png' %}" sizes="16x16">
-    <style>
-        #traceback {
-            overflow: visible;
-        }
-
-        #time-div {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-
-        #query-div {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-
-        #query {
-            text-align: left;
-            margin: 0 auto;
-            display: inline-block;
-        }
-
-        .line {
-            width: 100%;
-            display: inline-block;
-        }
-
-        .the-line {
-            background-color: #c3c3c3;
-        }
-
-
-
-        pre {
-            margin: 0;
-        }
-
-
-
-
-    </style>
-    <link rel="stylesheet" href="{% static 'silk/css/numeric.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/numeric.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/detail_base.css' %}"/>
 {% endblock %}
 
 {% block js %}
-    <script src="{% static 'silk/js/cell.js' %}"></script>
+    <script src="{% static 'silk/js/components/cell.js' %}"></script>
     <script src="{% static 'silk/lib/highlight/highlight.pack.js' %}"></script>
-    <script>hljs.initHighlightingOnLoad();</script>
+    <script src="{% static 'silk/js/pages/detail_base.js' %}"></script>
 {% endblock %}
diff --git a/silk/templates/silk/base/root_base.html b/silk/templates/silk/base/root_base.html
index 1f381b37..5154e818 100644
--- a/silk/templates/silk/base/root_base.html
+++ b/silk/templates/silk/base/root_base.html
@@ -8,288 +8,14 @@
 {% endblock %}
 
 {% block style %}
-    <link rel="stylesheet" href="{% static 'silk/css/cell.css' %}"/>
-    <link rel="stylesheet" href="{% static 'silk/css/row.css' %}"/>
-    <link rel="stylesheet" href="{% static 'silk/css/numeric.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/cell.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/row.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/numeric.css' %}"/>
     <link rel="stylesheet" href="{% static "silk/lib/jquery.datetimepicker.css" %}"/>
     <link rel="icon" type="image/png" href="{% static 'silk/favicon-32x32.png' %}" sizes="32x32">
     <link rel="icon" type="image/png" href="{% static 'silk/favicon-16x16.png' %}" sizes="16x16">
     <!-- Begin Custom Styles -->
-    <style>
-    .cell:hover {
-        background-color: rgb(51, 51, 68);
-        color: white;
-        cursor: pointer;
-    }
-
-    .cell {
-        text-align: center;
-    }
-
-    /* General styles for all menus */
-
-    .cbp-spmenu {
-        background: rgb(51, 51, 68);
-        position: fixed;
-    }
-
-    h3 {
-        color: white;
-        font-size: 1.9em;
-        padding: 10px;
-        margin: 0;
-        font-weight: 300;
-        background: rgb(51, 51, 68);
-    }
-
-    /*.cbp-spmenu div {*/
-    /*display: block;*/
-    /*color: #fff;*/
-    /*font-size: 1.1em;*/
-    /*font-weight: 300;*/
-    /*}*/
-
-    /* Orientation-dependent styles for the content of the menu */
-
-    .cbp-spmenu-vertical {
-        width: 300px;
-        height: 100%;
-        top: 0;
-        z-index: 1000;
-    }
-
-    /* Vertical menu that slides from the left or right */
-
-    .cbp-spmenu-right {
-        right: -300px;
-    }
-
-    .cbp-spmenu-right.cbp-spmenu-open {
-        right: 0px;
-    }
-
-    /* Push classes applied to the body */
-
-    .cbp-spmenu-push {
-        overflow-x: hidden;
-        position: relative;
-        left: 0;
-    }
-
-    .cbp-spmenu-push-toleft {
-        left: -300px;
-    }
-
-    /* Transitions */
-
-    .cbp-spmenu,
-    .cbp-spmenu-push {
-        -webkit-transition: all 0.3s ease;
-        -moz-transition: all 0.3s ease;
-        transition: all 0.3s ease;
-    }
-
-    /* Example media queries */
-
-    @media screen and (max-width: 55.1875em) {
-
-        .cbp-spmenu-horizontal {
-            font-size: 75%;
-            height: 110px;
-        }
-
-    }
-
-    .active-filter {
-        font-size: 12px;
-        color: white;
-    }
-
-    .active-filter td {
-        padding: 0;
-        margin: 0;
-    }
-
-    #cbp-spmenu-s2 button {
-        color: white;
-        background: none;
-        border: none;
-    }
-
-    #cbp-spmenu-s2 button:hover {
-        color: black;
-        background: white;
-        border: none;
-        cursor: pointer;
-    }
-
-    #cbp-spmenu-s2 button:focus {
-        outline: none;
-    }
-
-    #slider-label {
-        margin-top: 5px;
-    }
-
-    #outer-slider {
-        text-align: center;
-        width: 80%;
-    }
-
-    #seconds {
-        width: 200px;
-        height: 50px;
-    }
-
-    #slider {
-        width: 80%;
-        margin: auto;
-        margin-top: 10px;
-    }
-
-    input[type="number"],
-    input[type="text"] {
-        border: none;
-        padding: 10px;
-        width: 222px;
-    }
-
-    .add-button {
-        font-size: 20px;
-        font-weight: bold;
-    }
-
-    .add-button.disabled {
-        color: darkgray !important;
-    }
-
-    .add-button.disabled:hover {
-        background: transparent !important;
-        cursor: default !important;
-    }
-
-    .button-div {
-        display: inline-block;
-        text-align: center;
-        height: 50px;
-
-    }
-
-    .apply-div {
-        display: inline-block;
-        background-color: white;
-        color: black;
-        margin: 10px;
-        padding: 10px;
-        border-radius: 5px;
-    }
-
-    .apply-div:hover {
-        cursor: pointer;
-    }
-
-    select {
-        border-radius: 0;
-        max-width: 100%;
-    }
-
-    @media screen and (-webkit-min-device-pixel-ratio: 0) {
-        /*safari and chrome*/
-        select {
-{#            height: 30px;#}
-            line-height: 30px;
-            background: #f4f4f4;
-        }
-    }
-
-    select::-moz-focus-inner {
-        /*Remove button padding in FF*/
-        border: 0;
-        padding: 0;
-    }
-
-
-
-
-    #cbp-spmenu-s2 p {
-        margin-bottom: 10px;
-        margin-left: 10px;
-        margin-right: 10px;
-        margin-top: 0;
-        font-size: 12px;
-        color: white;
-        font-style: oblique;
-        line-height: 16px;;
-    }
-
-    #filter-item {
-        width: 24px;
-        height: 20px;
-        float: right;
-        display: inline;
-        background-image: url('{% static 'silk/filter.png' %}');
-        background-size: contain;
-        background-repeat: no-repeat;
-        text-align: right;
-    }
-
-    #filter-item #num-filters {
-        position: relative;
-        top: 7px;
-        left: 1px;
-    }
-
-    .resizing-input {
-        display: inline-block;
-    }
-
-    .resizing-input input, .resizing-input span {
-        font-size: 12px;
-        font-family: FiraSans;
-        white-space: pre;
-        font-weight: 300;
-        background-color: transparent;
-        color: white;
-        padding: 0;
-        padding-left: 4px;
-        padding-right: 4px;
-        margin: 0;
-        letter-spacing: 1px;
-    }
-
-    .resizing-input input:focus {
-        outline: none;
-    }
-
-    .resizing-input input {
-
-    }
-
-    h4 {
-        padding: 0;
-        margin: 3px;
-        margin-left: 10px;
-        color: white;
-        font-weight: lighter;
-        font-size: 20px;
-    }
-
-    .filter-section {
-        color: white;
-        font-size: 12px;
-        line-height: 2.3;
-        padding: 10px;
-    }
-
-    .filter-section select {
-        margin-bottom: 10px;
-    }
-
-    .filter-section input {
-        padding: 4px;
-    }
-
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/root_base.css' %}"/>
     <!-- End Custom Styles -->
 {% endblock %}
 
@@ -325,26 +51,8 @@ <h3>Filters</h3>
 {% endblock %}
 
 {% block js %}
-    <script src="{% static 'silk/js/cell.js' %}"></script>
+    <script src="{% static 'silk/js/components/cell.js' %}"></script>
     <script src="{% static 'silk/lib/jquery.datetimepicker.js' %}"></script>
-    <script src="{% static 'silk/js/filters.js' %}"></script>
-
-    <script>
-        function initFilterButton() {
-            $('#filter-button').click(function () {
-                $(this).toggleClass('active');
-                $('body').toggleClass('cbp-spmenu-push-toleft');
-                $('#cbp-spmenu-s2').toggleClass('cbp-spmenu-open');
-                initFilters();
-            });
-        }
-        function submitFilters() {
-            $('#filter-form2').submit();
-        }
-        function submitEmptyFilters() {
-            $('#cbp-spmenu-s2 :input:not([type=hidden])').val('');
-            submitFilters();
-        }
-    </script>
-
+    <script src="{% static 'silk/js/components/filters.js' %}"></script>
+    <script src="{% static 'silk/js/pages/root_base.js' %}"></script>
 {% endblock %}
diff --git a/silk/templates/silk/clear_db.html b/silk/templates/silk/clear_db.html
index 5e698bed..af097c6f 100644
--- a/silk/templates/silk/clear_db.html
+++ b/silk/templates/silk/clear_db.html
@@ -7,63 +7,12 @@
 
 {% block style %}
     {{ block.super }}
-    <style>
-        .wrapper {
-            width: 100%;
-            margin-bottom: 20px;
-        }
-
-        .inner {
-            margin: auto;
-            width: 960px;
-        }
-
-        .cleardb-form .cleardb-form-wrapper{
-            margin-bottom: 20px;
-        }
-
-        .cleardb-form label {
-            display: block;
-            margin-bottom: 8px;
-        }
-
-        .cleardb-form .btn {
-            background: #333344;
-            color: #fff;
-            padding: 10px 20px;
-            border-radius: 2px;
-            cursor: pointer;
-            box-shadow: none;
-            font-size: 16px;
-            line-height: 20px;
-            border: 0;
-            min-width: 150px;
-            text-align: center;
-        }
-        .cleardb-form label :last-child {
-            margin-bottom: 0;
-        }
-        .msg {
-            margin-top: 20px;
-            color: #bac54b;
-        }
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/clear_db.css' %}"/>
 {% endblock %}
 
 {% block js %}
     {{ block.super }}
-    <script>
-
-
-        $(document).ready(function () {
-            initFilters();
-            var $inputs = $('.resizing-input');
-            $inputs.focusout(function () {
-                $('#filter-form').submit();
-            });
-        });
-
-    </script>
+    <script src="{% static 'silk/js/pages/clear_db.js' %}"></script>
 {% endblock %}
 {% block data %}
     <div class="wrapper">
diff --git a/silk/templates/silk/cprofile.html b/silk/templates/silk/cprofile.html
index 3dfe2599..5d96eed7 100644
--- a/silk/templates/silk/cprofile.html
+++ b/silk/templates/silk/cprofile.html
@@ -12,63 +12,8 @@
 
 {% block style %}
     {{ block.super }}
-    <link rel="stylesheet" href="{% static 'silk/css/summary.css' %}">
-    <style>
-        #query-info-div {
-            margin-top: 15px;
-        }
-
-        #query-info-div .timestamp-div {
-            font-size: 13px;
-
-        }
-
-        #pyprofile-div {
-            display: block;
-            margin: auto;
-            width: 960px;
-        }
-
-        .pyprofile {
-            text-align: left;
-        }
-
-        a {
-            color: #45ADA8;
-        }
-
-        a:visited {
-            color: #45ADA8;
-        }
-
-        a:hover {
-            color: #547980;
-        }
-
-        a:active {
-            color: #594F4F;
-        }
-
-        #graph-div {
-            padding: 25px;
-            background-color: white;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            margin-top: 25px;
-            width: 960px;
-            text-align: center;
-        }
-
-        #percent {
-            width: 20px;
-        }
-
-        svg {
-          display: block;
-        }
-
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/components/summary.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/pages/cprofile.css' %}">
 {% endblock %}
 
 {% block menu %}
diff --git a/silk/templates/silk/profile_detail.html b/silk/templates/silk/profile_detail.html
index 367589ba..61f2edf5 100644
--- a/silk/templates/silk/profile_detail.html
+++ b/silk/templates/silk/profile_detail.html
@@ -12,63 +12,8 @@
 
 {% block style %}
     {{ block.super }}
-    <link rel="stylesheet" href="{% static 'silk/css/summary.css' %}">
-    <style>
-        #query-info-div {
-            margin-top: 15px;
-        }
-
-        #query-info-div .timestamp-div {
-            font-size: 13px;
-
-        }
-
-        #pyprofile-div {
-            display: block;
-            margin: auto;
-            width: 960px;
-        }
-
-        .pyprofile {
-            text-align: left;
-        }
-
-        a {
-            color: #45ADA8;
-        }
-
-        a:visited {
-            color: #45ADA8;
-        }
-
-        a:hover {
-            color: #547980;
-        }
-
-        a:active {
-            color: #594F4F;
-        }
-
-        #graph-div {
-            padding: 25px;
-            background-color: white;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            margin-top: 25px;
-            width: 960px;
-            text-align: center;
-        }
-
-        #percent {
-            width: 20px;
-        }
-
-        svg {
-          display: block;
-        }
-
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/components/summary.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/pages/profile_detail.css' %}">
 {% endblock %}
 
 {% block menu %}
@@ -121,21 +66,9 @@
             </div>
             <div id="graph-div">
             </div>
-            <script>
-                function createViz() {
-                    $.get(
-                        "{% url 'silk:request_profile_dot' request_id=silk_request.pk %}",
-                        { cutoff: $('#percent').val() },
-                        function (response) {
-                            var svg = '#graph-div';
-                            $(svg).html(Viz(response.dot));
-                            $(svg + ' svg').attr('width', 960).attr('height', 600);
-                            svgPanZoom(svg + ' svg', { controlIconsEnabled: true });
-                        }
-                    );
-                }
-                createViz();
-            </script>
+            {% url 'silk:request_profile_dot' request_id=silk_request.pk as profile_dot_url %}
+            {{ profile_dot_url|json_script:'profileDotURL' }}
+            <script src="{% static 'silk/js/pages/profile_detail.js' %}"></script>
             {% endif %}
 
             {% if silk_request.pyprofile %}
diff --git a/silk/templates/silk/profiling.html b/silk/templates/silk/profiling.html
index 2470d9c1..3aae20a2 100644
--- a/silk/templates/silk/profiling.html
+++ b/silk/templates/silk/profiling.html
@@ -12,29 +12,7 @@
 
 {% block style %}
     {{ block.super }}
-    <style>
-        .name-div {
-            font-weight: bold;
-        }
-
-        .container {
-            padding: 0 1em;
-        }
-
-        .description {
-
-        }
-
-        h2 {
-            margin-bottom: 10px;
-        }
-
-        .pyprofile {
-            overflow: scroll;
-            max-height: 650px;
-        }
-    </style>
-
+    <link rel="stylesheet" href="{% static 'silk/css/pages/profiling.css' %}"/>
 {% endblock %}
 
 {% block filter %}
@@ -73,13 +51,7 @@
 
 {% block js %}
     {{ block.super }}
-    <script>
-
-        $(document).ready(function () {
-            initFilters();
-            initFilterButton();
-        });
-    </script>
+    <script src="{% static 'silk/js/pages/profiling.js' %}"></script>
 {% endblock %}
 
 {% block filters %}
diff --git a/silk/templates/silk/raw.html b/silk/templates/silk/raw.html
index db229f0a..2f3e3c54 100644
--- a/silk/templates/silk/raw.html
+++ b/silk/templates/silk/raw.html
@@ -1,46 +1,12 @@
 {% load static %}
 <html>
 <head>
-    <link rel="stylesheet" href="{% static 'silk/css/fonts.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/fonts.css' %}"/>
     <link rel="stylesheet" href="{% static 'silk/lib/highlight/foundation.css' %}"/>
 
-    <style>
-        pre {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            background-color: white !important;
-            white-space: pre-wrap; /* css-3 */
-            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-            /*noinspection CssInvalidElement*/
-            white-space: -pre-wrap; /* Opera 4-6 */
-            white-space: -o-pre-wrap; /* Opera 7 */
-            word-wrap: break-word; /* Internet Explorer 5.5+ */
-        }
-
-        code {
-            font-family: Fantasque;
-            background-color: white !important;
-            width: 100% !important;
-            height: auto;
-            padding:0 !important;
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-        }
-
-        html {
-            margin: 0;
-            padding: 0;
-        }
-
-
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/raw.css' %}"/>
     <script src="{% static 'silk/lib/highlight/highlight.pack.js' %}"></script>
-    <script>hljs.initHighlightingOnLoad();</script>
+    <script src="{% static 'silk/js/pages/raw.js' %}"></script>
 
 </head>
 <body>
diff --git a/silk/templates/silk/request.html b/silk/templates/silk/request.html
index 0d8fdfd1..ca545874 100644
--- a/silk/templates/silk/request.html
+++ b/silk/templates/silk/request.html
@@ -3,92 +3,16 @@
 {% load silk_inclusion %}
 {% load static %}
 {% block style %}
-    <link rel="stylesheet" href="{% static 'silk/css/cell.css' %}"/>
-    <link rel="stylesheet" href="{% static 'silk/css/numeric.css' %}"/>
-    <link rel="stylesheet" href="{% static 'silk/css/heading.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/cell.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/numeric.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/components/heading.css' %}"/>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/request.css' %}"/>
     <link rel="stylesheet" href="{% static 'silk/lib/highlight/foundation.css' %}"/>
-    <style>
-
-        pre {
-            white-space: pre-wrap; /* css-3 */
-            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-            /*noinspection CssInvalidElement*/
-            white-space: -pre-wrap; /* Opera 4-6 */
-            white-space: -o-pre-wrap; /* Opera 7 */
-            word-wrap: break-word; /* Internet Explorer 5.5+ */
-        }
-
-        #request-summary {
-
-        }
-
-        .cell {
-            background-color: transparent;
-            margin-top: 15px;
-        }
-
-        div.wrapper {
-            width: 100%;
-        }
-
-        div.wrapper div#request-summary {
-            margin: auto;
-            text-align: center;
-            width: 100%;
-        }
-
-        div.wrapper div#request-info {
-            width: 960px;
-            margin: auto auto 20px;
-        }
-
-        a {
-            color: #45ADA8;
-        }
-
-        a:visited {
-            color: #45ADA8;
-        }
-
-        a:hover {
-            color: #547980;
-        }
-
-        a:active {
-            color: #594F4F;
-        }
-
-        .headers {
-            font-size: 12px;
-            font-family: Fantasque;
-            background-color: white;
-            width: 100%;
-        }
-
-        .headers tr:hover {
-            background-color: #f4f4f4;
-        }
-
-        .headers td {
-            padding-bottom: 5px;
-            padding-left: 5px;
-        }
-
-        .headers .key {
-            font-weight: bold;
-        }
-
-        .headers .value {
-
-        }
-
-
-    </style>
 {% endblock %}
 {% block js %}
     <script src="{% static 'silk/lib/highlight/highlight.pack.js' %}"></script>
-    <script>hljs.initHighlightingOnLoad();</script>
-    <script src="{% static 'silk/js/cell.js' %}"></script>
+    <script src="{% static 'silk/js/pages/request.js' %}"></script>
+    <script src="{% static 'silk/js/components/cell.js' %}"></script>
 {% endblock %}
 {% block onload %}
 {% endblock %}
diff --git a/silk/templates/silk/requests.html b/silk/templates/silk/requests.html
index fdaf1e3c..2baf6f38 100644
--- a/silk/templates/silk/requests.html
+++ b/silk/templates/silk/requests.html
@@ -4,27 +4,7 @@
 
 {% block style %}
     {{ block.super }}
-    <style>
-        .container {
-            padding: 0 1em;
-        }
-
-        .resizing-input input {
-            background-color: white;
-            padding-top: 2px;
-            color: black;
-            box-shadow: inset 0 0 3px black;
-        }
-
-        .resizing-input input::placeholder {
-            color: #383838;
-            opacity: 1;
-        }
-
-        .filter-section {
-            line-height: 2.3;
-        }
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/requests.css' %}"/>
 {% endblock %}
 
 {% block menu %}
@@ -33,13 +13,7 @@
 
 {% block js %}
     {{ block.super }}
-    <script>
-
-        $(document).ready(function () {
-            initFilters();
-            initFilterButton();
-        });
-    </script>
+    <script src="{% static 'silk/js/pages/requests.js' %}"></script>
 {% endblock %}
 
 {% block filter %}
diff --git a/silk/templates/silk/sql.html b/silk/templates/silk/sql.html
index 924181b3..e7b7172d 100644
--- a/silk/templates/silk/sql.html
+++ b/silk/templates/silk/sql.html
@@ -11,67 +11,11 @@
 {% endblock %}
 
 {% block style %}
-    <style>
-        .right-aligned {
-            text-align: right;
-
-        }
-
-        .center-aligned {
-            text-align: center;
-
-        }
-
-        .left-aligned {
-            text-align: left;
-        }
-
-        #table-pagination {
-            text-align: center;
-            margin: 20px;
-        }
-
-        table {
-            border-spacing: 0;
-            margin: auto;
-            max-width: 920px;
-        }
-
-        tr {
-            height: 20px;
-        }
-
-        tr.data-row:hover {
-            background-color: rgb(51, 51, 68);
-            color: white;
-            cursor: pointer;
-        }
-
-        td {
-            padding: 5px;
-            padding-left: 20px;
-            padding-right: 20px;
-        }
-
-        th {
-            height: 40px;
-            padding-left: 20px;
-            padding-right: 20px;
-        }
-
-        #table-div {
-            width: 100%;
-            margin-top: 40px;
-        }
-
-        #table-pagination div {
-            padding: 5px;
-        }
-    </style>
-    <link rel="stylesheet" href="{% static 'silk/css/colors.css' %}">
-    <link rel="stylesheet" href="{% static 'silk/css/numeric.css' %}">
-    <link rel="stylesheet" href="{% static 'silk/css/summary.css' %}">
-    <link rel="stylesheet" href="{% static 'silk/css/cell.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/pages/sql.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/components/colors.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/components/numeric.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/components/summary.css' %}">
+    <link rel="stylesheet" href="{% static 'silk/css/components/cell.css' %}">
 {% endblock %}
 
 {% block menu %}
diff --git a/silk/templates/silk/sql_detail.html b/silk/templates/silk/sql_detail.html
index a118bf56..3c72fccc 100644
--- a/silk/templates/silk/sql_detail.html
+++ b/silk/templates/silk/sql_detail.html
@@ -1,85 +1,17 @@
 {% extends "silk/base/detail_base.html" %}
+{% load static %}
 {% load silk_filters %}
 {% load silk_nav %}
 {% load silk_inclusion %}
 
 {% block js %}
     {{ block.super }}
-    <script>
-        $(document).ready(function () {
-            configureSpanFontColors($('#num-joins-div').find('.numeric'), 3, 5);
-            configureSpanFontColors($('#time-taken-div').find('.numeric'), 200, 500);
-        });
-    </script>
+    <script src="{% static 'silk/js/pages/sql_detail.js' %}"></script>
 {% endblock %}
 
 {% block style %}
     {{ block.super }}
-    <style>
-        #traceback {
-            width: 960px;
-            margin: auto;
-        }
-
-        #traceback pre {
-            margin-top: 15px !important;
-            margin-bottom: 15px !important;
-        }
-
-        #traceback .not-third-party {
-            font-weight: bold;
-        }
-
-
-        a:hover {
-            color: #9dd0ff;
-        }
-
-        a:active {
-            color: #594F4F;
-        }
-
-        code {
-            background-color: transparent !important;
-        }
-
-        #query-div pre {
-            background-color: transparent !important;
-        }
-
-        #query-div {
-            padding-top: 15px;
-        }
-
-        #query-info-div div {
-            padding-top: 5px;
-        }
-
-        #query-plan-div {
-            text-align: left;
-            width: 960px;
-            margin: auto;
-        }
-
-        #plan-div code {
-            margin: auto !important;
-            display: inline-block;
-        }
-
-        #query-plan-head {
-          padding-top: 5px;
-          padding-bottom: 15px;
-            text-align: center;
-            margin: auto;
-        }
-
-        .file-path {
-            font-size: 13px;
-        }
-
-
-
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/sql_detail.css' %}"/>
 {% endblock %}
 
 {% block menu %}
diff --git a/silk/templates/silk/summary.html b/silk/templates/silk/summary.html
index f24af728..f65ada01 100644
--- a/silk/templates/silk/summary.html
+++ b/silk/templates/silk/summary.html
@@ -7,77 +7,12 @@
 
 {% block style %}
     {{ block.super }}
-    <style>
-        .wrapper {
-            width: 100%;
-            margin-bottom: 20px;
-        }
-
-        .inner {
-            margin: auto;
-            width: 960px;
-        }
-
-        .summary-cell {
-            display: inline-block;
-            text-align: center;
-            padding: 10px;
-            margin-left: 10px;
-            margin-top: 10px;
-        }
-
-        .summary-cell .desc {
-            margin-top: 8px;
-            font-size: 12px;
-        }
-
-        .no-data {
-            font-size: 12px;
-            font-style: oblique;
-            margin-left: 10px;
-        }
-
-        h2 {
-            margin-bottom: 0;;
-        }
-
-        #filters {
-            margin-top: 10px;
-            font-size: 12px;
-        }
-
-        #filters input,
-        #filters span {
-            color: black !important;
-            font-weight: bold;
-        }
-
-        #filter-image {
-            width: 20px;
-        }
-
-        #filter-cell {
-            padding-left: 5px;
-        }
-
-
-    </style>
+    <link rel="stylesheet" href="{% static 'silk/css/pages/summary.css' %}"/>
 {% endblock %}
 
 {% block js %}
     {{ block.super }}
-    <script>
-
-
-        $(document).ready(function () {
-            initFilters();
-            var $inputs = $('.resizing-input');
-            $inputs.focusout(function () {
-                $('#filter-form').submit();
-            });
-        });
-
-    </script>
+    <script src="{% static 'silk/js/pages/summary.js' %}"></script>
 {% endblock %}
 {% block data %}
     <div class="wrapper">