From 09e1c6b19561cd0b7468d58e4ecdaa7611740432 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 01:16:13 -0400
Subject: [PATCH 01/17] Move CSS into a file

---
 lib/better_errors/templates/main.css | 677 ++++++++++++++++++++++++++
 lib/better_errors/templates/main.erb | 695 +--------------------------
 2 files changed, 679 insertions(+), 693 deletions(-)
 create mode 100644 lib/better_errors/templates/main.css

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
new file mode 100644
index 00000000..c1bf27d8
--- /dev/null
+++ b/lib/better_errors/templates/main.css
@@ -0,0 +1,677 @@
+/* Basic reset */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  vertical-align: top;
+  text-align: left;
+}
+
+textarea {
+  resize: none;
+}
+
+body {
+  font-size: 10pt;
+}
+
+body, td, input, textarea {
+  font-family: helvetica neue, lucida grande, sans-serif;
+  line-height: 1.5;
+  color: #333;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+html {
+  background: #f0f0f5;
+}
+
+.clearfix::after{
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+/* ---------------------------------------------------------------------
+ * Basic layout
+ * --------------------------------------------------------------------- */
+
+/* Small */
+@media screen and (max-width: 1100px) {
+  html {
+    overflow-y: scroll;
+  }
+
+  body {
+    margin: 0 20px;
+  }
+
+  header.exception {
+    margin: 0 -20px;
+  }
+
+  nav.sidebar {
+    padding: 0;
+    margin: 20px 0;
+  }
+
+  ul.frames {
+    max-height: 200px;
+    overflow: auto;
+  }
+}
+
+/* Wide */
+@media screen and (min-width: 1100px) {
+  header.exception {
+     position: fixed;
+     top: 0;
+     left: 0;
+     right: 0;
+  }
+
+  nav.sidebar,
+  .frame_info {
+    position: fixed;
+    top: 95px;
+    bottom: 0;
+
+    box-sizing: border-box;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  nav.sidebar {
+    width: 40%;
+    left: 20px;
+    top: 115px;
+    bottom: 20px;
+  }
+
+  .frame_info {
+    right: 0;
+    left: 40%;
+
+    padding: 20px;
+    padding-left: 10px;
+    margin-left: 30px;
+  }
+}
+
+nav.sidebar {
+  background: #d3d3da;
+  border-top: solid 3px #a33;
+  border-bottom: solid 3px #a33;
+  border-radius: 4px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+/* ---------------------------------------------------------------------
+ * Header
+ * --------------------------------------------------------------------- */
+
+header.exception {
+  padding: 18px 20px;
+
+  height: 59px;
+  min-height: 59px;
+
+  overflow: hidden;
+
+  background-color: #20202a;
+  color: #aaa;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+  font-weight: 200;
+  box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+
+  -webkit-text-smoothing: antialiased;
+}
+
+/* Heading */
+header.exception h2 {
+  font-weight: 200;
+  font-size: 11pt;
+}
+
+header.exception h2,
+header.exception p {
+  line-height: 1.4em;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+}
+
+header.exception h2 strong {
+  font-weight: 700;
+  color: #d55;
+}
+
+header.exception p {
+  font-weight: 200;
+  font-size: 20pt;
+  color: white;
+}
+
+header.exception:hover {
+  height: auto;
+  z-index: 2;
+}
+
+header.exception:hover h2,
+header.exception:hover p {
+  padding-right: 20px;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  height: auto;
+  max-height: 7.5em;
+}
+
+@media screen and (max-width: 1100px) {
+  header.exception {
+    height: auto;
+  }
+
+  header.exception h2,
+  header.exception p {
+    padding-right: 20px;
+    overflow-y: auto;
+    word-wrap: break-word;
+    height: auto;
+    max-height: 7em;
+  }
+}
+
+/* ---------------------------------------------------------------------
+ * Navigation
+ * --------------------------------------------------------------------- */
+
+nav.tabs {
+  border-bottom: solid 1px #ddd;
+
+  background-color: #eee;
+  text-align: center;
+
+  padding: 6px;
+
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+nav.tabs a {
+  display: inline-block;
+
+  height: 22px;
+  line-height: 22px;
+  padding: 0 10px;
+
+  text-decoration: none;
+  font-size: 8pt;
+  font-weight: bold;
+
+  color: #999;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+nav.tabs a.selected {
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 16px;
+  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4);
+}
+
+nav.tabs a.disabled {
+  text-decoration: line-through;
+  text-shadow: none;
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------
+ * Sidebar
+ * --------------------------------------------------------------------- */
+
+ul.frames {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Each item */
+ul.frames li {
+  background-color: #f8f8f8;
+  background: -webkit-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
+  background: -moz-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
+  background: linear-gradient(top, #f8f8f8 80%, #f0f0f0);
+  box-shadow: inset 0 -1px 0 #e2e2e2;
+  padding: 7px 20px;
+
+  cursor: pointer;
+  overflow: hidden;
+}
+
+ul.frames .name,
+ul.frames .location {
+  overflow: hidden;
+  height: 1.5em;
+
+  white-space: nowrap;
+  word-wrap: none;
+  text-overflow: ellipsis;
+}
+
+ul.frames .method {
+  color: #966;
+}
+
+ul.frames .location {
+  font-size: 0.85em;
+  font-weight: 400;
+  color: #999;
+}
+
+ul.frames .line {
+  font-weight: bold;
+}
+
+/* Selected frame */
+ul.frames li.selected {
+  background: #38a;
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+ul.frames li.selected .name,
+ul.frames li.selected .method,
+ul.frames li.selected .location {
+  color: white;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+}
+
+ul.frames li.selected .location {
+  opacity: 0.6;
+}
+
+/* Iconography */
+ul.frames li {
+  padding-left: 60px;
+  position: relative;
+}
+
+ul.frames li .icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 15px;
+
+  text-align: center;
+
+  background: white;
+  border: solid 2px #ccc;
+
+  font-size: 9pt;
+  font-weight: 200;
+  font-style: normal;
+
+  position: absolute;
+  top: 14px;
+  left: 20px;
+}
+
+ul.frames .icon.application {
+  background: #808090;
+  border-color: #555;
+}
+
+ul.frames .icon.application:before {
+  content: 'A';
+  color: white;
+  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+/* Responsiveness -- flow to single-line mode */
+@media screen and (max-width: 1100px) {
+  ul.frames li {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 36px;
+    line-height: 1.3;
+  }
+
+  ul.frames li .icon {
+    width: 11px;
+    height: 11px;
+    line-height: 11px;
+
+    top: 7px;
+    left: 10px;
+    font-size: 5pt;
+  }
+
+  ul.frames .name,
+  ul.frames .location {
+    display: inline-block;
+    line-height: 1.3;
+    height: 1.3em;
+  }
+
+  ul.frames .name {
+    margin-right: 10px;
+  }
+}
+
+/* ---------------------------------------------------------------------
+ * Monospace
+ * --------------------------------------------------------------------- */
+
+pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums {
+  font-family: menlo, lucida console, monospace;
+  font-size: 8pt;
+}
+
+/* ---------------------------------------------------------------------
+ * Display area
+ * --------------------------------------------------------------------- */
+
+.trace_info {
+  background: #fff;
+  padding: 6px;
+  border-radius: 3px;
+  margin-bottom: 2px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
+}
+
+.code_block{
+  background: #f1f1f1;
+  border-left: 1px solid #ccc;
+}
+
+/* Titlebar */
+.trace_info .title {
+  background: #f1f1f1;
+
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+  padding: 6px 10px;
+
+  border: solid 1px #ccc;
+  border-bottom: 0;
+
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
+.trace_info .title .name,
+.trace_info .title .location {
+  font-size: 9pt;
+  line-height: 26px;
+  height: 26px;
+  overflow: hidden;
+}
+
+.trace_info .title .location {
+  float: left;
+  font-weight: bold;
+  font-size: 10pt;
+}
+
+.trace_info .title .location a {
+  color:inherit;
+  text-decoration:none;
+  border-bottom:1px solid #aaaaaa;
+}
+
+.trace_info .title .location a:hover {
+  border-color:#666666;
+}
+
+.trace_info .title .name {
+  float: right;
+  font-weight: 200;
+}
+
+.code, .be-console, .unavailable {
+  background: #fff;
+  padding: 5px;
+
+  box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.code_linenums{
+  background:#f1f1f1;
+  padding-top:10px;
+  padding-bottom:9px;
+  float:left;
+}
+
+.code_linenums span{
+  display:block;
+  padding:0 12px;
+}
+
+.code {
+  margin-bottom: -1px;
+  border-top-left-radius:2px;
+  padding: 10px 0;
+  overflow: auto;
+}
+
+.code pre{
+  padding-left:12px;
+  min-height:16px;
+}
+
+/* Source unavailable */
+p.unavailable {
+  padding: 20px 0 40px 0;
+  text-align: center;
+  color: #b99;
+  font-weight: bold;
+}
+
+p.unavailable:before {
+  content: '\00d7';
+  display: block;
+
+  color: #daa;
+
+  text-align: center;
+  font-size: 40pt;
+  font-weight: normal;
+  margin-bottom: -10px;
+}
+
+@-webkit-keyframes highlight {
+  0%   { background: rgba(220, 30, 30, 0.3); }
+  100% { background: rgba(220, 30, 30, 0.1); }
+}
+@-moz-keyframes highlight {
+  0%   { background: rgba(220, 30, 30, 0.3); }
+  100% { background: rgba(220, 30, 30, 0.1); }
+}
+@keyframes highlight {
+  0%   { background: rgba(220, 30, 30, 0.3); }
+  100% { background: rgba(220, 30, 30, 0.1); }
+}
+
+.code .highlight, .code_linenums .highlight {
+  background: rgba(220, 30, 30, 0.1);
+  -webkit-animation: highlight 400ms linear 1;
+  -moz-animation: highlight 400ms linear 1;
+  animation: highlight 400ms linear 1;
+}
+
+/* REPL shell */
+.be-console {
+  padding: 0 1px 10px 1px;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.be-console pre {
+  padding: 10px 10px 0 10px;
+  max-height: 400px;
+  overflow-x: none;
+  overflow-y: auto;
+  margin-bottom: -3px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+/* .command-line > span + input */
+.be-console .command-line {
+  display: table;
+  width: 100%;
+}
+
+.be-console .command-line span,
+.be-console .command-line input {
+  display: table-cell;
+}
+
+.be-console .command-line span {
+  width: 1%;
+  padding-right: 5px;
+  padding-left: 10px;
+  white-space: pre;
+}
+
+.be-console .command-line input {
+  width: 99%;
+}
+
+/* Input box */
+.be-console input,
+.be-console input:focus {
+  outline: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  margin: 0;
+}
+
+/* Hint text */
+.hint {
+  margin: 15px 0 20px 0;
+  font-size: 8pt;
+  color: #8080a0;
+  padding-left: 20px;
+}
+
+.hint:before {
+  content: '\25b2';
+  margin-right: 5px;
+  opacity: 0.5;
+}
+
+/* ---------------------------------------------------------------------
+ * Variable infos
+ * --------------------------------------------------------------------- */
+
+.sub {
+  padding: 10px 0;
+  margin: 10px 0;
+}
+
+.sub:before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 4px;
+
+  border-radius: 2px;
+  background: rgba(0, 150, 200, 0.05);
+  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07);
+}
+
+.sub h3 {
+  color: #39a;
+  font-size: 1.1em;
+  margin: 10px 0;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+
+  -webkit-font-smoothing: antialiased;
+}
+
+.sub .inset {
+  overflow-y: auto;
+}
+
+.sub table {
+  table-layout: fixed;
+}
+
+.sub table td {
+  border-top: dotted 1px #ddd;
+  padding: 7px 1px;
+}
+
+.sub table td.name {
+  width: 150px;
+
+  font-weight: bold;
+  font-size: 0.8em;
+  padding-right: 20px;
+
+  word-wrap: break-word;
+}
+
+.sub table td pre {
+  max-height: 15em;
+  overflow-y: auto;
+}
+
+.sub table td pre {
+  width: 100%;
+
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+/* "(object doesn't support inspect)" */
+.sub .unsupported {
+  font-family: sans-serif;
+  color: #777;
+}
+
+/* ---------------------------------------------------------------------
+ * Scrollbar
+ * --------------------------------------------------------------------- */
+
+nav.sidebar::-webkit-scrollbar,
+.inset pre::-webkit-scrollbar,
+.be-console pre::-webkit-scrollbar,
+.code::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.inset pre::-webkit-scrollbar-thumb,
+.be-console pre::-webkit-scrollbar-thumb,
+.code::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 5px;
+}
+
+nav.sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.0);
+  border-radius: 5px;
+}
+
+nav.sidebar:hover::-webkit-scrollbar-thumb {
+  background-color: #999;
+  background: -webkit-linear-gradient(left, #aaa, #999);
+}
+
+.be-console pre:hover::-webkit-scrollbar-thumb,
+.inset pre:hover::-webkit-scrollbar-thumb,
+.code:hover::-webkit-scrollbar-thumb {
+  background: #888;
+}
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index f0041177..8a143046 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -5,699 +5,8 @@
 </head>
 <body>
     <%# Stylesheets are placed in the <body> for Turbolinks compatibility. %>
-    <style>
-    /* Basic reset */
-    * {
-        margin: 0;
-        padding: 0;
-    }
-
-    table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    th, td {
-        vertical-align: top;
-        text-align: left;
-    }
-
-    textarea {
-        resize: none;
-    }
-
-    body {
-        font-size: 10pt;
-    }
-
-    body, td, input, textarea {
-        font-family: helvetica neue, lucida grande, sans-serif;
-        line-height: 1.5;
-        color: #333;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    }
-
-    html {
-        background: #f0f0f5;
-    }
-
-    .clearfix::after{
-        clear: both;
-        content: ".";
-        display: block;
-        height: 0;
-        visibility: hidden;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Basic layout
-     * --------------------------------------------------------------------- */
-
-    /* Small */
-    @media screen and (max-width: 1100px) {
-        html {
-            overflow-y: scroll;
-        }
-
-        body {
-            margin: 0 20px;
-        }
-
-        header.exception {
-            margin: 0 -20px;
-        }
-
-        nav.sidebar {
-            padding: 0;
-            margin: 20px 0;
-        }
-
-        ul.frames {
-            max-height: 200px;
-            overflow: auto;
-        }
-    }
-
-    /* Wide */
-    @media screen and (min-width: 1100px) {
-        header.exception {
-           position: fixed;
-           top: 0;
-           left: 0;
-           right: 0;
-        }
-
-        nav.sidebar,
-        .frame_info {
-            position: fixed;
-            top: 95px;
-            bottom: 0;
-
-            box-sizing: border-box;
-
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-
-        nav.sidebar {
-            width: 40%;
-            left: 20px;
-            top: 115px;
-            bottom: 20px;
-        }
-
-        .frame_info {
-            right: 0;
-            left: 40%;
-
-            padding: 20px;
-            padding-left: 10px;
-            margin-left: 30px;
-        }
-    }
-
-    nav.sidebar {
-        background: #d3d3da;
-        border-top: solid 3px #a33;
-        border-bottom: solid 3px #a33;
-        border-radius: 4px;
-        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-
-    /* ---------------------------------------------------------------------
-     * Header
-     * --------------------------------------------------------------------- */
-
-    header.exception {
-        padding: 18px 20px;
-
-        height: 59px;
-        min-height: 59px;
-
-        overflow: hidden;
-
-        background-color: #20202a;
-        color: #aaa;
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
-        font-weight: 200;
-        box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-
-        -webkit-text-smoothing: antialiased;
-    }
-
-    /* Heading */
-    header.exception h2 {
-        font-weight: 200;
-        font-size: 11pt;
-    }
-
-    header.exception h2,
-    header.exception p {
-        line-height: 1.4em;
-        overflow: hidden;
-        white-space: pre;
-        text-overflow: ellipsis;
-    }
-
-    header.exception h2 strong {
-        font-weight: 700;
-        color: #d55;
-    }
-
-    header.exception p {
-        font-weight: 200;
-        font-size: 20pt;
-        color: white;
-    }
-
-    header.exception:hover {
-        height: auto;
-        z-index: 2;
-    }
-
-    header.exception:hover h2,
-    header.exception:hover p {
-        padding-right: 20px;
-        overflow-y: auto;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        height: auto;
-        max-height: 7.5em;
-    }
-
-    @media screen and (max-width: 1100px) {
-        header.exception {
-            height: auto;
-        }
-
-        header.exception h2,
-        header.exception p {
-            padding-right: 20px;
-            overflow-y: auto;
-            word-wrap: break-word;
-            height: auto;
-            max-height: 7em;
-        }
-    }
-
-    <%#
-    /* Light theme */
-    header.exception {
-        text-shadow: 0 1px 0 rgba(250, 250, 250, 0.6);
-        background: rgba(200,100,50,0.10);
-        color: #977;
-    }
-    header.exception h2 strong {
-        color: #533;
-    }
-    header.exception p {
-        color: #744;
-    }
-    %>
-
-    /* ---------------------------------------------------------------------
-     * Navigation
-     * --------------------------------------------------------------------- */
-
-    nav.tabs {
-        border-bottom: solid 1px #ddd;
-
-        background-color: #eee;
-        text-align: center;
-
-        padding: 6px;
-
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    }
-
-    nav.tabs a {
-        display: inline-block;
-
-        height: 22px;
-        line-height: 22px;
-        padding: 0 10px;
-
-        text-decoration: none;
-        font-size: 8pt;
-        font-weight: bold;
-
-        color: #999;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    }
-
-    nav.tabs a.selected {
-        color: white;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 16px;
-        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-        text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4);
-    }
-
-    nav.tabs a.disabled {
-        text-decoration: line-through;
-        text-shadow: none;
-        cursor: default;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Sidebar
-     * --------------------------------------------------------------------- */
-
-    ul.frames {
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    /* Each item */
-    ul.frames li {
-        background-color: #f8f8f8;
-        background: -webkit-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        background: -moz-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        background: linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-        box-shadow: inset 0 -1px 0 #e2e2e2;
-        padding: 7px 20px;
-
-        cursor: pointer;
-        overflow: hidden;
-    }
-
-    ul.frames .name,
-    ul.frames .location {
-        overflow: hidden;
-        height: 1.5em;
-
-        white-space: nowrap;
-        word-wrap: none;
-        text-overflow: ellipsis;
-    }
-
-    ul.frames .method {
-        color: #966;
-    }
-
-    ul.frames .location {
-        font-size: 0.85em;
-        font-weight: 400;
-        color: #999;
-    }
-
-    ul.frames .line {
-        font-weight: bold;
-    }
-
-    /* Selected frame */
-    ul.frames li.selected {
-        background: #38a;
-        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    ul.frames li.selected .name,
-    ul.frames li.selected .method,
-    ul.frames li.selected .location {
-        color: white;
-        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    ul.frames li.selected .location {
-        opacity: 0.6;
-    }
-
-    /* Iconography */
-    ul.frames li {
-        padding-left: 60px;
-        position: relative;
-    }
-
-    ul.frames li .icon {
-        display: block;
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
-        border-radius: 15px;
-
-        text-align: center;
-
-        background: white;
-        border: solid 2px #ccc;
-
-        font-size: 9pt;
-        font-weight: 200;
-        font-style: normal;
-
-        position: absolute;
-        top: 14px;
-        left: 20px;
-    }
-
-    ul.frames .icon.application {
-        background: #808090;
-        border-color: #555;
-    }
-
-    ul.frames .icon.application:before {
-        content: 'A';
-        color: white;
-        text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-    }
-
-    /* Responsiveness -- flow to single-line mode */
-    @media screen and (max-width: 1100px) {
-        ul.frames li {
-            padding-top: 6px;
-            padding-bottom: 6px;
-            padding-left: 36px;
-            line-height: 1.3;
-        }
-
-        ul.frames li .icon {
-            width: 11px;
-            height: 11px;
-            line-height: 11px;
-
-            top: 7px;
-            left: 10px;
-            font-size: 5pt;
-        }
-
-        ul.frames .name,
-        ul.frames .location {
-            display: inline-block;
-            line-height: 1.3;
-            height: 1.3em;
-        }
-
-        ul.frames .name {
-            margin-right: 10px;
-        }
-    }
-
-    /* ---------------------------------------------------------------------
-     * Monospace
-     * --------------------------------------------------------------------- */
-
-    pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums {
-        font-family: menlo, lucida console, monospace;
-        font-size: 8pt;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Display area
-     * --------------------------------------------------------------------- */
-
-    .trace_info {
-        background: #fff;
-        padding: 6px;
-        border-radius: 3px;
-        margin-bottom: 2px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
-    }
-
-    .code_block{
-        background: #f1f1f1;
-        border-left: 1px solid #ccc;
-    }
-
-    /* Titlebar */
-    .trace_info .title {
-        background: #f1f1f1;
-
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
-        overflow: hidden;
-        padding: 6px 10px;
-
-        border: solid 1px #ccc;
-        border-bottom: 0;
-
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-    }
-
-    .trace_info .title .name,
-    .trace_info .title .location {
-        font-size: 9pt;
-        line-height: 26px;
-        height: 26px;
-        overflow: hidden;
-    }
-
-    .trace_info .title .location {
-        float: left;
-        font-weight: bold;
-        font-size: 10pt;
-    }
-
-    .trace_info .title .location a {
-        color:inherit;
-        text-decoration:none;
-        border-bottom:1px solid #aaaaaa;
-    }
-
-    .trace_info .title .location a:hover {
-        border-color:#666666;
-    }
-
-    .trace_info .title .name {
-        float: right;
-        font-weight: 200;
-    }
-
-    .code, .be-console, .unavailable {
-        background: #fff;
-        padding: 5px;
-
-        box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-    }
-
-    .code_linenums{
-        background:#f1f1f1;
-        padding-top:10px;
-        padding-bottom:9px;
-        float:left;
-    }
-
-    .code_linenums span{
-        display:block;
-        padding:0 12px;
-    }
-
-    .code {
-        margin-bottom: -1px;
-        border-top-left-radius:2px;
-        padding: 10px 0;
-        overflow: auto;
-    }
-
-    .code pre{
-        padding-left:12px;
-        min-height:16px;
-    }
-
-    /* Source unavailable */
-    p.unavailable {
-        padding: 20px 0 40px 0;
-        text-align: center;
-        color: #b99;
-        font-weight: bold;
-    }
-
-    p.unavailable:before {
-        content: '\00d7';
-        display: block;
-
-        color: #daa;
-
-        text-align: center;
-        font-size: 40pt;
-        font-weight: normal;
-        margin-bottom: -10px;
-    }
-
-    @-webkit-keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-    @-moz-keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-    @keyframes highlight {
-        0%   { background: rgba(220, 30, 30, 0.3); }
-        100% { background: rgba(220, 30, 30, 0.1); }
-    }
-
-    .code .highlight, .code_linenums .highlight {
-        background: rgba(220, 30, 30, 0.1);
-        -webkit-animation: highlight 400ms linear 1;
-        -moz-animation: highlight 400ms linear 1;
-        animation: highlight 400ms linear 1;
-    }
-
-    /* REPL shell */
-    .be-console {
-        padding: 0 1px 10px 1px;
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-    }
-
-    .be-console pre {
-        padding: 10px 10px 0 10px;
-        max-height: 400px;
-        overflow-x: none;
-        overflow-y: auto;
-        margin-bottom: -3px;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-    }
-
-    /* .command-line > span + input */
-    .be-console .command-line {
-        display: table;
-        width: 100%;
-    }
-
-    .be-console .command-line span,
-    .be-console .command-line input {
-        display: table-cell;
-    }
-
-    .be-console .command-line span {
-        width: 1%;
-        padding-right: 5px;
-        padding-left: 10px;
-        white-space: pre;
-    }
-
-    .be-console .command-line input {
-        width: 99%;
-    }
-
-    /* Input box */
-    .be-console input,
-    .be-console input:focus {
-        outline: 0;
-        border: 0;
-        padding: 0;
-        background: transparent;
-        margin: 0;
-    }
-
-    /* Hint text */
-    .hint {
-        margin: 15px 0 20px 0;
-        font-size: 8pt;
-        color: #8080a0;
-        padding-left: 20px;
-    }
-
-    .hint:before {
-        content: '\25b2';
-        margin-right: 5px;
-        opacity: 0.5;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Variable infos
-     * --------------------------------------------------------------------- */
-
-    .sub {
-        padding: 10px 0;
-        margin: 10px 0;
-    }
-
-    .sub:before {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 4px;
-
-        border-radius: 2px;
-        background: rgba(0, 150, 200, 0.05);
-        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07);
-    }
-
-    .sub h3 {
-        color: #39a;
-        font-size: 1.1em;
-        margin: 10px 0;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-
-        -webkit-font-smoothing: antialiased;
-    }
-
-    .sub .inset {
-        overflow-y: auto;
-    }
-
-    .sub table {
-        table-layout: fixed;
-    }
-
-    .sub table td {
-        border-top: dotted 1px #ddd;
-        padding: 7px 1px;
-    }
-
-    .sub table td.name {
-        width: 150px;
-
-        font-weight: bold;
-        font-size: 0.8em;
-        padding-right: 20px;
-
-        word-wrap: break-word;
-    }
-
-    .sub table td pre {
-        max-height: 15em;
-        overflow-y: auto;
-    }
-
-    .sub table td pre {
-        width: 100%;
-
-        word-wrap: break-word;
-        white-space: normal;
-    }
-
-    /* "(object doesn't support inspect)" */
-    .sub .unsupported {
-      font-family: sans-serif;
-      color: #777;
-    }
-
-    /* ---------------------------------------------------------------------
-     * Scrollbar
-     * --------------------------------------------------------------------- */
-
-    nav.sidebar::-webkit-scrollbar,
-    .inset pre::-webkit-scrollbar,
-    .be-console pre::-webkit-scrollbar,
-    .code::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-    }
-
-    .inset pre::-webkit-scrollbar-thumb,
-    .be-console pre::-webkit-scrollbar-thumb,
-    .code::-webkit-scrollbar-thumb {
-        background: #ccc;
-        border-radius: 5px;
-    }
-
-    nav.sidebar::-webkit-scrollbar-thumb {
-        background: rgba(0, 0, 0, 0.0);
-        border-radius: 5px;
-    }
-
-    nav.sidebar:hover::-webkit-scrollbar-thumb {
-        background-color: #999;
-        background: -webkit-linear-gradient(left, #aaa, #999);
-    }
-
-    .be-console pre:hover::-webkit-scrollbar-thumb,
-    .inset pre:hover::-webkit-scrollbar-thumb,
-    .code:hover::-webkit-scrollbar-thumb {
-        background: #888;
-    }
+    <style type='text/css'>
+      <%= File.open(File.expand_path("templates/main.css", File.dirname(__FILE__))).read %>
     </style>
 
     <%# IE8 compatibility crap %>

From 8fef360aa9c546bec3ba6f6232f9ffa434affc4d Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 01:28:15 -0400
Subject: [PATCH 02/17] Remove space, border around sidebar

---
 lib/better_errors/templates/main.css | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index c1bf27d8..cc4da31b 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -90,12 +90,10 @@ html {
     overflow-y: auto;
     overflow-x: hidden;
   }
-
+  
   nav.sidebar {
     width: 40%;
-    left: 20px;
-    top: 115px;
-    bottom: 20px;
+    left: 0;
   }
 
   .frame_info {
@@ -110,9 +108,6 @@ html {
 
 nav.sidebar {
   background: #d3d3da;
-  border-top: solid 3px #a33;
-  border-bottom: solid 3px #a33;
-  border-radius: 4px;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 

From f8a343216382c6cdca01da163c1bc63640a6ac25 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 01:52:02 -0400
Subject: [PATCH 03/17] Scroll frames without "tabs"

---
 lib/better_errors/templates/main.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index cc4da31b..b155030d 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -66,7 +66,6 @@ html {
 
   ul.frames {
     max-height: 200px;
-    overflow: auto;
   }
 }
 
@@ -86,9 +85,6 @@ html {
     bottom: 0;
 
     box-sizing: border-box;
-
-    overflow-y: auto;
-    overflow-x: hidden;
   }
   
   nav.sidebar {
@@ -96,6 +92,14 @@ html {
     left: 0;
   }
 
+  ul.frames {
+    position: absolute;
+    top: 34px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   .frame_info {
     right: 0;
     left: 40%;
@@ -103,9 +107,16 @@ html {
     padding: 20px;
     padding-left: 10px;
     margin-left: 30px;
+
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 }
 
+ul.frames {
+  overflow: auto;
+}
+
 nav.sidebar {
   background: #d3d3da;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);

From 2fad9cc4be619837a6d2ab1923a5393b5f65f19c Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 01:52:32 -0400
Subject: [PATCH 04/17] Connect selected frame color with file

---
 lib/better_errors/templates/main.css | 37 ++++++----------------------
 1 file changed, 8 insertions(+), 29 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index b155030d..4f1eaf55 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -26,7 +26,6 @@ body, td, input, textarea {
   font-family: helvetica neue, lucida grande, sans-serif;
   line-height: 1.5;
   color: #333;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 html {
@@ -104,9 +103,7 @@ html {
     right: 0;
     left: 40%;
 
-    padding: 20px;
-    padding-left: 10px;
-    margin-left: 30px;
+    border-left: 5px solid #38a;
 
     overflow-y: auto;
     overflow-x: hidden;
@@ -136,7 +133,6 @@ header.exception {
 
   background-color: #20202a;
   color: #aaa;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
   font-weight: 200;
   box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
 
@@ -225,7 +221,6 @@ nav.tabs a {
   font-weight: bold;
 
   color: #999;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 nav.tabs a.selected {
@@ -233,12 +228,10 @@ nav.tabs a.selected {
   background: rgba(0, 0, 0, 0.5);
   border-radius: 16px;
   box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.4);
 }
 
 nav.tabs a.disabled {
   text-decoration: line-through;
-  text-shadow: none;
   cursor: default;
 }
 
@@ -297,7 +290,6 @@ ul.frames li.selected .name,
 ul.frames li.selected .method,
 ul.frames li.selected .location {
   color: white;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 }
 
 ul.frames li.selected .location {
@@ -339,7 +331,6 @@ ul.frames .icon.application {
 ul.frames .icon.application:before {
   content: 'A';
   color: white;
-  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 }
 
 /* Responsiveness -- flow to single-line mode */
@@ -377,7 +368,7 @@ ul.frames .icon.application:before {
  * Monospace
  * --------------------------------------------------------------------- */
 
-pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums {
+pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums, .title .name {
   font-family: menlo, lucida console, monospace;
   font-size: 8pt;
 }
@@ -387,11 +378,7 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
  * --------------------------------------------------------------------- */
 
 .trace_info {
-  background: #fff;
-  padding: 6px;
-  border-radius: 3px;
   margin-bottom: 2px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
 }
 
 .code_block{
@@ -401,17 +388,11 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
 
 /* Titlebar */
 .trace_info .title {
-  background: #f1f1f1;
+  background: #38a;
+  color: white;
 
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
   overflow: hidden;
-  padding: 6px 10px;
-
-  border: solid 1px #ccc;
-  border-bottom: 0;
-
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  padding: 5px 10px 5px 0;
 }
 
 .trace_info .title .name,
@@ -429,9 +410,8 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
 }
 
 .trace_info .title .location a {
-  color:inherit;
-  text-decoration:none;
-  border-bottom:1px solid #aaaaaa;
+  color:white;
+  text-decoration:underline;
 }
 
 .trace_info .title .location a:hover {
@@ -582,7 +562,7 @@ p.unavailable:before {
  * --------------------------------------------------------------------- */
 
 .sub {
-  padding: 10px 0;
+  padding: 10px;
   margin: 10px 0;
 }
 
@@ -601,7 +581,6 @@ p.unavailable:before {
   color: #39a;
   font-size: 1.1em;
   margin: 10px 0;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
 
   -webkit-font-smoothing: antialiased;
 }

From 7f8e2084ed233d526bbfc31866d8b15e0591ba37 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 02:01:33 -0400
Subject: [PATCH 05/17] Fix height mismatch between code and linenums

---
 lib/better_errors/code_formatter/html.rb |  2 +-
 lib/better_errors/templates/main.css     | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/lib/better_errors/code_formatter/html.rb b/lib/better_errors/code_formatter/html.rb
index ec96a214..7663f095 100644
--- a/lib/better_errors/code_formatter/html.rb
+++ b/lib/better_errors/code_formatter/html.rb
@@ -15,7 +15,7 @@ def formatted_lines
     def formatted_nums
       each_line_of(highlighted_lines) { |highlight, current_line, str|
         class_name = highlight ? "highlight" : ""
-        sprintf '<span class="%s">%5d</span>', class_name, current_line
+        sprintf '<pre class="%s">%4d</pre>', class_name, current_line
       }
     end
 
diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 4f1eaf55..b0375087 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -383,7 +383,8 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
 
 .code_block{
   background: #f1f1f1;
-  border-left: 1px solid #ccc;
+  padding-bottom: 1px;
+  border-bottom: 1px solid #ccc;
 }
 
 /* Titlebar */
@@ -437,9 +438,8 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
   float:left;
 }
 
-.code_linenums span{
-  display:block;
-  padding:0 12px;
+.code_linenums pre{
+  padding:0 6px;
 }
 
 .code {
@@ -451,6 +451,9 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
 
 .code pre{
   padding-left:12px;
+}
+
+.code pre, .code_linenums pre {
   min-height:16px;
 }
 

From 8d5e6780869e91a356c818a7782e1d9eb39a6c67 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 02:18:54 -0400
Subject: [PATCH 06/17] Flatten shadows and use white background

---
 lib/better_errors/templates/main.css | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index b0375087..7ffc1945 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -29,7 +29,7 @@ body, td, input, textarea {
 }
 
 html {
-  background: #f0f0f5;
+  background: white;
 }
 
 .clearfix::after{
@@ -114,11 +114,6 @@ ul.frames {
   overflow: auto;
 }
 
-nav.sidebar {
-  background: #d3d3da;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
 /* ---------------------------------------------------------------------
  * Header
  * --------------------------------------------------------------------- */
@@ -134,7 +129,6 @@ header.exception {
   background-color: #20202a;
   color: #aaa;
   font-weight: 200;
-  box-shadow: inset 0 -5px 3px -3px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
 
   -webkit-text-smoothing: antialiased;
 }
@@ -205,8 +199,6 @@ nav.tabs {
   text-align: center;
 
   padding: 6px;
-
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 nav.tabs a {
@@ -227,7 +219,6 @@ nav.tabs a.selected {
   color: white;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 16px;
-  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 nav.tabs a.disabled {
@@ -240,17 +231,12 @@ nav.tabs a.disabled {
  * --------------------------------------------------------------------- */
 
 ul.frames {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 /* Each item */
 ul.frames li {
-  background-color: #f8f8f8;
-  background: -webkit-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-  background: -moz-linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-  background: linear-gradient(top, #f8f8f8 80%, #f0f0f0);
-  box-shadow: inset 0 -1px 0 #e2e2e2;
   padding: 7px 20px;
+  border-bottom: 1pt solid #eee;
 
   cursor: pointer;
   overflow: hidden;
@@ -283,7 +269,6 @@ ul.frames .line {
 /* Selected frame */
 ul.frames li.selected {
   background: #38a;
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.01), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 
 ul.frames li.selected .name,
@@ -427,8 +412,6 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
 .code, .be-console, .unavailable {
   background: #fff;
   padding: 5px;
-
-  box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .code_linenums{
@@ -577,7 +560,6 @@ p.unavailable:before {
 
   border-radius: 2px;
   background: rgba(0, 150, 200, 0.05);
-  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07);
 }
 
 .sub h3 {

From 18cbedddcf4ba3b5bbeafb72742e72473739dec1 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 02:53:34 -0400
Subject: [PATCH 07/17] Chevron pointing to the right

---
 lib/better_errors/templates/main.css | 33 ++++++++++++++++++++++------
 lib/better_errors/templates/main.erb |  2 +-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 7ffc1945..be86703d 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -242,8 +242,8 @@ ul.frames li {
   overflow: hidden;
 }
 
-ul.frames .name,
-ul.frames .location {
+ul.frames li .name,
+ul.frames li .location {
   overflow: hidden;
   height: 1.5em;
 
@@ -252,20 +252,33 @@ ul.frames .location {
   text-overflow: ellipsis;
 }
 
-ul.frames .method {
+ul.frames li .method {
   color: #966;
 }
 
-ul.frames .location {
+ul.frames li .location {
   font-size: 0.85em;
   font-weight: 400;
   color: #999;
 }
 
-ul.frames .line {
+ul.frames li .line {
   font-weight: bold;
 }
 
+ul.frames li .chevron {
+  float: right;
+  margin-right: -10px;
+  color: #ccc;
+  font-size: 24px;
+  line-height: 34px;
+}
+@media screen and (max-width: 1100px) {
+  ul.frames li .chevron {
+    display: none;
+  }
+}
+
 /* Selected frame */
 ul.frames li.selected {
   background: #38a;
@@ -273,7 +286,8 @@ ul.frames li.selected {
 
 ul.frames li.selected .name,
 ul.frames li.selected .method,
-ul.frames li.selected .location {
+ul.frames li.selected .location,
+ul.frames li.selected .chevron {
   color: white;
 }
 
@@ -378,7 +392,12 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
   color: white;
 
   overflow: hidden;
-  padding: 5px 10px 5px 0;
+  padding: 5px 10px;
+}
+@media screen and (min-width: 1100px) {
+  .trace_info .title {
+    padding: 5px 10px 5px 0;
+  }
 }
 
 .trace_info .title .name,
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index 8a143046..b38a249e 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -65,7 +65,7 @@
             <ul class="frames">
                 <% backtrace_frames.each_with_index do |frame, index| %>
                     <li class="<%= frame.context %>" data-context="<%= frame.context %>" data-index="<%= index %>">
-                        <span class='stroke'></span>
+                        <span class='chevron'>&#9656;</span>
                         <i class="icon <%= frame.context %>"></i>
                         <div class="info">
                             <div class="name">

From c485bb481db50433829980597872aa433ce20f51 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 13:59:10 -0400
Subject: [PATCH 08/17] "tabs" are now a segmented control

---
 lib/better_errors/templates/main.css | 28 +++++++++++++++++++---------
 lib/better_errors/templates/main.erb |  5 ++---
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index be86703d..ab00d9ba 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -93,7 +93,7 @@ html {
 
   ul.frames {
     position: absolute;
-    top: 34px;
+    top: 36px;
     bottom: 0;
     left: 0;
     right: 0;
@@ -192,16 +192,15 @@ header.exception:hover p {
  * Navigation
  * --------------------------------------------------------------------- */
 
-nav.tabs {
+nav.segmented {
   border-bottom: solid 1px #ddd;
 
-  background-color: #eee;
   text-align: center;
 
   padding: 6px;
 }
 
-nav.tabs a {
+nav.segmented a {
   display: inline-block;
 
   height: 22px;
@@ -212,16 +211,27 @@ nav.tabs a {
   font-size: 8pt;
   font-weight: bold;
 
-  color: #999;
+  color: #38a;
+  border: 1px solid #38a;
+}
+
+nav.segmented a:first-child {
+  border-right: 0;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 
-nav.tabs a.selected {
+nav.segmented a:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+nav.segmented a.selected {
   color: white;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 16px;
+  background: #38a;
 }
 
-nav.tabs a.disabled {
+nav.segmented a.disabled {
   text-decoration: line-through;
   cursor: default;
 }
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index b38a249e..6b053e6e 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -58,9 +58,8 @@
 
     <section class="backtrace">
         <nav class="sidebar">
-            <nav class="tabs">
-                <a href="#" id="application_frames">Application Frames</a>
-                <a href="#" id="all_frames">All Frames</a>
+            <nav class="segmented">
+                <a href="#" id="application_frames">Application Frames</a><a href="#" id="all_frames">All Frames</a>
             </nav>
             <ul class="frames">
                 <% backtrace_frames.each_with_index do |frame, index| %>

From 208df4a1495604c44088e6ba0339df8231389568 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 14:34:46 -0400
Subject: [PATCH 09/17] Redesign and semanticize variables

---
 lib/better_errors/templates/main.css          | 70 ++++++-------------
 lib/better_errors/templates/variable_info.erb | 59 ++++++----------
 2 files changed, 44 insertions(+), 85 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index ab00d9ba..8ae1cd17 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -263,7 +263,7 @@ ul.frames li .location {
 }
 
 ul.frames li .method {
-  color: #966;
+  color: #666;
 }
 
 ul.frames li .location {
@@ -301,10 +301,6 @@ ul.frames li.selected .chevron {
   color: white;
 }
 
-ul.frames li.selected .location {
-  opacity: 0.6;
-}
-
 /* Iconography */
 ul.frames li {
   padding-left: 60px;
@@ -377,9 +373,9 @@ ul.frames .icon.application:before {
  * Monospace
  * --------------------------------------------------------------------- */
 
-pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums, .title .name {
+pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums, .title .name,
+ul.frames li .method {
   font-family: menlo, lucida console, monospace;
-  font-size: 8pt;
 }
 
 /* ---------------------------------------------------------------------
@@ -466,6 +462,7 @@ pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums
 }
 
 .code pre, .code_linenums pre {
+  font-size: 11px;
   min-height:16px;
 }
 
@@ -576,66 +573,41 @@ p.unavailable:before {
  * Variable infos
  * --------------------------------------------------------------------- */
 
-.sub {
-  padding: 10px;
-  margin: 10px 0;
-}
-
-.sub:before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 4px;
-
-  border-radius: 2px;
-  background: rgba(0, 150, 200, 0.05);
-}
-
-.sub h3 {
-  color: #39a;
-  font-size: 1.1em;
-  margin: 10px 0;
+.variables h3 {
+  background-color: #38a;
+  color: white;
+  padding: 4px;
+  font-size: 8pt;
+  margin-top: 1rem;
 
   -webkit-font-smoothing: antialiased;
 }
 
-.sub .inset {
-  overflow-y: auto;
-}
-
-.sub table {
-  table-layout: fixed;
-}
-
-.sub table td {
-  border-top: dotted 1px #ddd;
-  padding: 7px 1px;
-}
-
-.sub table td.name {
-  width: 150px;
+.variables h4 {
+  margin-top: 5px;
+  padding-left: 5px;
 
   font-weight: bold;
-  font-size: 0.8em;
-  padding-right: 20px;
+  font-size: 9pt;
 
   word-wrap: break-word;
 }
 
-.sub table td pre {
+.variables pre {
   max-height: 15em;
   overflow-y: auto;
-}
-
-.sub table td pre {
-  width: 100%;
 
+  font-size: 9pt;
   word-wrap: break-word;
   white-space: normal;
+
+  margin-left: 2rem;
+  border-bottom: 1px dotted #ddd;
 }
 
 /* "(object doesn't support inspect)" */
-.sub .unsupported {
+.variables .unsupported {
+  display: block;
   font-family: sans-serif;
   color: #777;
 }
diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb
index 213f0a2e..64a91b87 100644
--- a/lib/better_errors/templates/variable_info.erb
+++ b/lib/better_errors/templates/variable_info.erb
@@ -1,8 +1,8 @@
 <header class="trace_info clearfix">
-    <div class="title">
-        <h2 class="name"><%= @frame.name %></h2>
+    <h2 class="title">
+        <div class="name">#<%= @frame.name %></div>
         <div class="location"><span class="filename"><a href="<%= editor_url(@frame) %>"><%= @frame.pretty_path %></a></span></div>
-    </div>
+    </h2>
     <div class="code_block clearfix">
         <%== html_formatted_code_block @frame %>
     </div>
@@ -31,42 +31,29 @@
     </div>
 <% end %>
 
-<div class="sub">
-    <h3>Request info</h3>
-    <div class='inset variables'>
-        <table class="var_table">
-            <% if rails_params %>
-                <tr><td class="name">Request parameters</td><td><pre><%== inspect_value rails_params %></pre></td></tr>
-            <% end %>
-            <% if rack_session %>
-                <tr><td class="name">Rack session</td><td><pre><%== inspect_value rack_session %></pre></td></tr>
-            <% end %>
-        </table>
-    </div>
-</div>
+<div class="variables">
+    <h3>Request Info</h3>
+    <% if rails_params %>
+        <h4 class="name">Request Parameters</h4>
+        <pre><%== inspect_value rails_params %></pre>
+    <% end %>
+    <% if rack_session %>
+        <h4 class="name">Rack Session</h4>
+        <pre><%== inspect_value rack_session %></pre>
+    <% end %>
 
 <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
-    <div class="sub">
-        <h3>Local Variables</h3>
-        <div class='inset variables'>
-            <table class="var_table">
-                <% @frame.local_variables.each do |name, value| %>
-                    <tr><td class="name"><%= name %></td><td><pre><%== inspect_value value %></pre></td></tr>
-                <% end %>
-            </table>
-        </div>
-    </div>
+    <h3>Local Variables</h3>
+    <% @frame.local_variables.each do |name, value| %>
+        <h4 class="name"><%= name %></h4>
+        <pre><%== inspect_value value %></pre>
+    <% end %>
 
-    <div class="sub">
-        <h3>Instance Variables</h3>
-        <div class="inset variables">
-            <table class="var_table">
-                <% @frame.instance_variables.each do |name, value| %>
-                    <tr><td class="name"><%= name %></td><td><pre><%== inspect_value value %></pre></td></tr>
-                <% end %>
-            </table>
-        </div>
-    </div>
+    <h3>Instance Variables (<%= @frame.class_name %>)</h3>
+    <% @frame.instance_variables.each do |name, value| %>
+        <h4 class="name"><%= name %></h4>
+        <pre><%== inspect_value value %></pre>
+    <% end %>
 
     <!-- <%= Time.now.to_f - @var_start_time %> seconds -->
 <% end %>

From b1f707d796e890984677209a0830130da76208ca Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 14:37:18 -0400
Subject: [PATCH 10/17] Display variables sorted by name

---
 lib/better_errors/templates/variable_info.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb
index 64a91b87..03a5f5cd 100644
--- a/lib/better_errors/templates/variable_info.erb
+++ b/lib/better_errors/templates/variable_info.erb
@@ -44,13 +44,13 @@
 
 <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
     <h3>Local Variables</h3>
-    <% @frame.local_variables.each do |name, value| %>
+    <% @frame.local_variables.sort_by(&:first).each do |name, value| %>
         <h4 class="name"><%= name %></h4>
         <pre><%== inspect_value value %></pre>
     <% end %>
 
     <h3>Instance Variables (<%= @frame.class_name %>)</h3>
-    <% @frame.instance_variables.each do |name, value| %>
+    <% @frame.instance_variables.sort_by(&:first).each do |name, value| %>
         <h4 class="name"><%= name %></h4>
         <pre><%== inspect_value value %></pre>
     <% end %>

From 54f518cced3208dc02bfe3346c56bc3931886501 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 17:35:46 -0400
Subject: [PATCH 11/17] Redesign REPL

Shorter prompt. Individual results as their own element with a heading and more visual dilineation for each.
---
 lib/better_errors/repl/basic.rb               |   2 +-
 lib/better_errors/templates/main.css          | 100 +++++++++++++-----
 lib/better_errors/templates/main.erb          |  24 +++--
 lib/better_errors/templates/variable_info.erb |  19 ++--
 4 files changed, 93 insertions(+), 52 deletions(-)

diff --git a/lib/better_errors/repl/basic.rb b/lib/better_errors/repl/basic.rb
index c2144531..3e4f0106 100644
--- a/lib/better_errors/repl/basic.rb
+++ b/lib/better_errors/repl/basic.rb
@@ -11,7 +11,7 @@ def send_input(str)
 
     private
       def execute(str)
-        "=> #{@binding.eval(str).inspect}\n"
+        "=> #{CGI.escapeHTML(@binding.eval(str).inspect)}\n"
       rescue Exception => e
         "!! #{e.inspect rescue e.class.to_s rescue "Exception"}\n"
       end
diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 8ae1cd17..bd381cc2 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -373,7 +373,7 @@ ul.frames .icon.application:before {
  * Monospace
  * --------------------------------------------------------------------- */
 
-pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums, .title .name,
+pre, code, .be-repl .command-line input, .be-repl .command-line .prompt, .be-repl .output .command, textarea, .code_linenums, .title .name,
 ul.frames li .method {
   font-family: menlo, lucida console, monospace;
 }
@@ -436,7 +436,6 @@ ul.frames li .method {
 
 .code, .be-console, .unavailable {
   background: #fff;
-  padding: 5px;
 }
 
 .code_linenums{
@@ -506,35 +505,65 @@ p.unavailable:before {
   animation: highlight 400ms linear 1;
 }
 
+h3 {
+  background-color: #38a;
+  color: white;
+  padding: 4px;
+  font-size: 8pt;
+  margin-top: 1rem;
+
+  -webkit-font-smoothing: antialiased;
+}
+
 /* REPL shell */
 .be-console {
-  padding: 0 1px 10px 1px;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
 }
 
-.be-console pre {
-  padding: 10px 10px 0 10px;
-  max-height: 400px;
+.be-console .output {
+  max-height: 15rem;
   overflow-x: none;
   overflow-y: auto;
-  margin-bottom: -3px;
+
+  padding: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #ccc;
+}
+.be-console .output:not(.used) {
+  padding-bottom: 0;
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+@media screen and (min-height: 800px) {
+  .be-console .output {
+    max-height: 25rem;
+  }
+}
+
+.be-console .output pre, .be-console .output h4 {
+  font-size: 9pt;
   word-wrap: break-word;
   white-space: pre-wrap;
+  width: 100%;
+}
+.be-console .output h4 {
+  background-color: #ddd;
+  padding: 5px 0;
+  margin-top: 10px;
 }
 
 /* .command-line > span + input */
 .be-console .command-line {
   display: table;
-  width: 100%;
 }
 
-.be-console .command-line span,
+.be-console .command-line .prompt,
 .be-console .command-line input {
   display: table-cell;
+  line-height: 12px;
+  font-size: 9pt;
 }
 
-.be-console .command-line span {
+.be-console .command-line .prompt {
   width: 1%;
   padding-right: 5px;
   padding-left: 10px;
@@ -563,26 +592,10 @@ p.unavailable:before {
   padding-left: 20px;
 }
 
-.hint:before {
-  content: '\25b2';
-  margin-right: 5px;
-  opacity: 0.5;
-}
-
 /* ---------------------------------------------------------------------
  * Variable infos
  * --------------------------------------------------------------------- */
 
-.variables h3 {
-  background-color: #38a;
-  color: white;
-  padding: 4px;
-  font-size: 8pt;
-  margin-top: 1rem;
-
-  -webkit-font-smoothing: antialiased;
-}
-
 .variables h4 {
   margin-top: 5px;
   padding-left: 5px;
@@ -646,3 +659,34 @@ nav.sidebar:hover::-webkit-scrollbar-thumb {
 .code:hover::-webkit-scrollbar-thumb {
   background: #888;
 }
+
+.bold {
+  font-weight: bold;
+}
+.black {
+  color: black;
+}
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+.yellow {
+  color: yellow;
+}
+.blue {
+  color: blue;
+}
+.magenta {
+  color: magenta;
+}
+.cyan {
+  color: cyan;
+}
+.white {
+  color: white;
+}
+.green {
+  color: green;
+}
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index 6b053e6e..1b2aa217 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -130,7 +130,7 @@
 
         this.promptElement  = this.container.querySelector(".command-line .prompt");
         this.inputElement   = this.container.querySelector("input");
-        this.outputElement  = this.container.querySelector("pre");
+        this.outputElement  = this.container.querySelector(".output");
 
         var self = this;
         this.inputElement.onkeydown = function(ev) {
@@ -164,24 +164,28 @@
         }
     };
 
-    REPL.prototype.writeRawOutput = function(output) {
-        this.outputElement.innerHTML += output;
-        this.outputElement.scrollTop = this.outputElement.scrollHeight;
+    REPL.prototype.writeErrorOutput = function(error) {
+      this.writeOutput("<pre class='error'>" + error + "</pre>");
     };
 
-    REPL.prototype.writeOutput = function(output) {
-        this.writeRawOutput(escapeHTML(output));
+    REPL.prototype.writeResultOutput = function(prompt, command, result) {
+        this.writeOutput("<h4 class='command'>" + prompt + " "  + command + "</h4>");
+        this.writeOutput("<pre class='result'>" + result + "</pre>");
+    };
+
+    REPL.prototype.writeOutput = function(content) {
+      this.outputElement.className = "output used";
+      this.outputElement.innerHTML += content;
+      this.outputElement.scrollTop = this.outputElement.scrollHeight;
     };
 
     REPL.prototype.sendInput = function(line) {
         var self = this;
         apiCall("eval", { "index": this.index, source: line }, function(response) {
             if(response.error) {
-                self.writeOutput(response.error + "\n");
+                self.writeErrorOutput(response.error);
             }
-            self.writeOutput(self._prompt + " ");
-            self.writeRawOutput(response.highlighted_input + "\n");
-            self.writeOutput(response.result);
+            self.writeResultOutput(self._prompt, response.highlighted_input, response.result);
             self.setPrompt(response.prompt);
             self.setInput(response.prefilled_input);
         });
diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb
index 03a5f5cd..6a1b9966 100644
--- a/lib/better_errors/templates/variable_info.erb
+++ b/lib/better_errors/templates/variable_info.erb
@@ -6,23 +6,16 @@
     <div class="code_block clearfix">
         <%== html_formatted_code_block @frame %>
     </div>
-
-    <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
-        <div class="be-repl">
-            <div class="be-console">
-                <pre></pre>
-                <div class="command-line"><span class='prompt'>&gt;&gt;</span> <input tabindex="1"/></div>
-            </div>
-        </div>
-    <% end %>
 </header>
 
 <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
-    <div class="hint">
-        This is a live shell. Type in here.
+    <div class="be-repl">
+        <h3>Console</h3>
+        <div class="be-console">
+            <div class="output"></div>
+            <div class="command-line"><span class='prompt'>&gt;</span> <input tabindex="1"/></div>
+        </div>
     </div>
-
-    <div class="variable_info"></div>
 <% end %>
 
 <% unless BetterErrors.binding_of_caller_available? %>

From c0acf06e92c76b491383548a3899916f9d321534 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 17:07:20 -0400
Subject: [PATCH 12/17] Add icon to editor link

---
 lib/better_errors/templates/main.css          | 5 ++++-
 lib/better_errors/templates/variable_info.erb | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index bd381cc2..3af39fe4 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -422,7 +422,10 @@ ul.frames li .method {
 
 .trace_info .title .location a {
   color:white;
-  text-decoration:underline;
+  text-decoration: none;
+}
+.trace_info .title .location a .filename {
+  text-decoration: underline;
 }
 
 .trace_info .title .location a:hover {
diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb
index 6a1b9966..932c43f3 100644
--- a/lib/better_errors/templates/variable_info.erb
+++ b/lib/better_errors/templates/variable_info.erb
@@ -1,7 +1,9 @@
 <header class="trace_info clearfix">
     <h2 class="title">
         <div class="name">#<%= @frame.name %></div>
-        <div class="location"><span class="filename"><a href="<%= editor_url(@frame) %>"><%= @frame.pretty_path %></a></span></div>
+        <div class="location">
+            <a class="filename" href="<%= editor_url(@frame) %>"><span class="filename"><%= @frame.pretty_path %></span> &#x270E;</a>
+        </div>
     </h2>
     <div class="code_block clearfix">
         <%== html_formatted_code_block @frame %>

From 7f95a8f2dbf4b4072d0c17940ac5cf4e114c6f3a Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Thu, 28 Jun 2018 17:26:18 -0400
Subject: [PATCH 13/17] Fix encoding issue with CSS

---
 lib/better_errors/templates/main.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index 1b2aa217..8e55ffbb 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -6,7 +6,7 @@
 <body>
     <%# Stylesheets are placed in the <body> for Turbolinks compatibility. %>
     <style type='text/css'>
-      <%= File.open(File.expand_path("templates/main.css", File.dirname(__FILE__))).read %>
+      <%== File.open(File.expand_path("templates/main.css", File.dirname(__FILE__))).read %>
     </style>
 
     <%# IE8 compatibility crap %>

From 3c308f334614a2d8a8aef82eefa50cc53c9209de Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Mon, 9 Jul 2018 12:13:27 -0400
Subject: [PATCH 14/17] Console layout WIP

---
 lib/better_errors/error_page.rb      |   2 +-
 lib/better_errors/templates/main.css | 148 ++++++++++++++++++---------
 2 files changed, 102 insertions(+), 48 deletions(-)

diff --git a/lib/better_errors/error_page.rb b/lib/better_errors/error_page.rb
index f417a3d9..158975f4 100644
--- a/lib/better_errors/error_page.rb
+++ b/lib/better_errors/error_page.rb
@@ -118,7 +118,7 @@ def eval_and_respond(index, code)
       result, prompt, prefilled_input = @repls[index].send_input(code)
 
       {
-        highlighted_input: CodeRay.scan(code, :ruby).div(wrap: nil),
+        highlighted_input: CodeRay.scan(code, :ruby).html(wrap: :span),
         prefilled_input:   prefilled_input,
         prompt:            prompt,
         result:            result
diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 3af39fe4..3db3ee80 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -382,14 +382,9 @@ ul.frames li .method {
  * Display area
  * --------------------------------------------------------------------- */
 
-.trace_info {
-  margin-bottom: 2px;
-}
-
-.code_block{
+.code_block {
   background: #f1f1f1;
   padding-bottom: 1px;
-  border-bottom: 1px solid #ccc;
 }
 
 /* Titlebar */
@@ -437,10 +432,6 @@ ul.frames li .method {
   font-weight: 200;
 }
 
-.code, .be-console, .unavailable {
-  background: #fff;
-}
-
 .code_linenums{
   background:#f1f1f1;
   padding-top:10px;
@@ -513,28 +504,27 @@ h3 {
   color: white;
   padding: 4px;
   font-size: 8pt;
-  margin-top: 1rem;
 
   -webkit-font-smoothing: antialiased;
 }
 
 /* REPL shell */
 .be-console {
+  background-color: #002B36;
+  color: white;
 }
 
 .be-console .output {
   max-height: 15rem;
-  overflow-x: none;
+  overflow-x: hidden;
   overflow-y: auto;
 
   padding: 8px;
-  margin-bottom: 8px;
   border-bottom: 1px solid #ccc;
 }
 .be-console .output:not(.used) {
-  padding-bottom: 0;
+  padding: 0;
   border-bottom: 0;
-  margin-bottom: 0;
 }
 @media screen and (min-height: 800px) {
   .be-console .output {
@@ -549,14 +539,25 @@ h3 {
   width: 100%;
 }
 .be-console .output h4 {
-  background-color: #ddd;
-  padding: 5px 0;
+  padding: 8px;
   margin-top: 10px;
 }
+.be-console .output h4:first-child {
+  margin-top: 0;
+}
+
+.be-console .output h4, .be-console .command-line {
+  background-color: #555;
+}
+
+.be-console .output pre {
+  padding: 8px;
+}
 
 /* .command-line > span + input */
 .be-console .command-line {
   display: table;
+  padding: 8px 0;
 }
 
 .be-console .command-line .prompt,
@@ -585,6 +586,7 @@ h3 {
   padding: 0;
   background: transparent;
   margin: 0;
+  color: inherit;
 }
 
 /* Hint text */
@@ -663,33 +665,85 @@ nav.sidebar:hover::-webkit-scrollbar-thumb {
   background: #888;
 }
 
-.bold {
-  font-weight: bold;
-}
-.black {
-  color: black;
-}
-.red {
-  color: red;
-}
-.green {
-  color: green;
-}
-.yellow {
-  color: yellow;
-}
-.blue {
-  color: blue;
-}
-.magenta {
-  color: magenta;
-}
-.cyan {
-  color: cyan;
-}
-.white {
-  color: white;
-}
-.green {
-  color: green;
-}
+
+.CodeRay .debug{color:#fff;background:#00f}
+.CodeRay .annotation{color:#586E75}
+.CodeRay .attribute-name{color:#93A1A1}
+.CodeRay .attribute-value{color:#93A1A1}
+.CodeRay .binary{color:#509}
+.CodeRay .char .content{color:#d20}
+.CodeRay .char .delimiter{color:#710}
+.CodeRay .char{color:#2AA198}
+.CodeRay .class{color:#268BD2;font-weight:bold}
+.CodeRay .class-variable{color:#268BD2}
+.CodeRay .color{color:#eee8d5}
+.CodeRay .comment{color:#586E75}
+.CodeRay .comment .char{color:#859900}
+.CodeRay .comment .delimiter{color:#859900}
+.CodeRay .complex{color:#a08}
+.CodeRay .constant{color:#B58900;font-weight:bold}
+.CodeRay .decorator{color:#268BD2}
+.CodeRay .definition{color:#099;font-weight:bold}
+.CodeRay .delimiter{color:#000}
+.CodeRay .directive{color:#088;font-weight:bold}
+.CodeRay .doc{color:#93A1A1}
+.CodeRay .doc-string{color:#93A1A1;font-weight:bold}
+.CodeRay .doctype{color:#DC322F}
+.CodeRay .entity{color:#CB4B16;font-weight:bold}
+.CodeRay .error{color:#93A1A1;background-color:#faa}
+.CodeRay .escape{color:#CB4B16}
+.CodeRay .exception{color:#CB4B16;font-weight:bold}
+.CodeRay .float{color:#2AA198}
+.CodeRay .function{color:#268BD2;font-weight:bold}
+.CodeRay .global-variable{color:#268BD2}
+.CodeRay .hex{color:#2AA198}
+.CodeRay .imaginary{color:#f00}
+.CodeRay .include{color:#b44;font-weight:bold}
+.CodeRay .inline{background-color:transparent;color:#93A1A1!important}
+.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}
+.CodeRay .instance-variable{color:#268BD2}
+.CodeRay .integer{color:#2AA198}
+.CodeRay .key .char{color:#DC322F}
+.CodeRay .key .delimiter{color:#268BD2}
+.CodeRay .key{color:#859900}
+.CodeRay .keyword{color:#859900;font-weight:bold}
+.CodeRay .label{color:#93A1A1;font-weight:bold}
+.CodeRay .local-variable{color:#268BD2}
+.CodeRay .namespace{color:#859900;font-weight:bold}
+.CodeRay .octal{color:#2AA198}
+.CodeRay .operator, .predefined{color:#859900;font-weight:bold}
+.CodeRay .predefined-constant{color:#2AA198}
+.CodeRay .predefined-type{color:#DC322F;font-weight:bold}
+.CodeRay .preprocessor{color:#859900}
+.CodeRay .pseudo-class{color:#859900;font-weight:bold}
+.CodeRay .regexp .content{color:#2AA198}
+.CodeRay .regexp .delimiter{color:#DC322F}
+.CodeRay .regexp .modifier{color:#CB4B16}
+.CodeRay .regexp{background-color:transparent}
+.CodeRay .reserved{color:#268BD2;font-weight:bold}
+.CodeRay .shell .content{color:#2b2}
+.CodeRay .shell .delimiter{color:#161}
+.CodeRay .shell{background-color:transparent}
+.CodeRay .string .char{color:#2AA198}
+.CodeRay .string .content{color:#2AA198}
+.CodeRay .string .delimiter{color:#DC322F}
+.CodeRay .string .modifier{color:#2AA198}
+.CodeRay .string{background-color:transparent}
+.CodeRay .symbol .content{color:#2AA198}
+.CodeRay .symbol .delimiter{color:#2AA198}
+.CodeRay .symbol{color:#2AA198}
+.CodeRay .tag{color: #268BD2}
+.CodeRay .type{color:#DC322F;font-weight:bold}
+.CodeRay .value{color:#268BD2}
+.CodeRay .variable{color:#268BD2}
+.CodeRay .insert{background:transparent}
+.CodeRay .delete{background:transparent}
+.CodeRay .change{color:#CB4B16;background:transparent}
+.CodeRay .head{color:#CB4B16;background:transparent}
+.CodeRay .head .filename{color:#CB4B16}
+.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
+.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
+.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
+.CodeRay .delete .delete{color:##2AA198;background:transparent;font-weight:bold}
+.CodeRay .change .change{color:#CB4B16}
+.CodeRay .head .head{color:#CB4B16}

From 3078d288cebf09b97c0edba6cbfe3229ebbd60b7 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Sat, 18 Apr 2020 15:59:54 -0400
Subject: [PATCH 15/17] Use SASS to develop page style

---
 .gitignore                           |   3 +
 Rakefile                             |  40 ++
 better_errors.gemspec                |   1 +
 lib/better_errors/templates/main.css | 750 +--------------------------
 lib/better_errors/templates/main.erb |   8 +-
 style/main.scss                      | 749 ++++++++++++++++++++++++++
 6 files changed, 800 insertions(+), 751 deletions(-)
 create mode 100644 style/main.scss

diff --git a/.gitignore b/.gitignore
index d3f6a852..ab515301 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,6 @@
 
 /gemfiles/*.gemfile.lock
 /gemfiles/.bundle
+
+# This is the debug version of the file and should not be committed.
+lib/better_errors/templates/*.development.css
diff --git a/Rakefile b/Rakefile
index cb84ee87..be793e04 100644
--- a/Rakefile
+++ b/Rakefile
@@ -1,5 +1,6 @@
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
+require "sassc"
 
 RSpec::Core::RakeTask.new(:test)
 task :default => :test
@@ -36,3 +37,42 @@ namespace :test do
     with_each_gemfile { sh "bundle exec rspec" rescue nil }
   end
 end
+
+namespace :style do
+  desc "Build main.development.css (overrides main.css)"
+  task :develop => [:build] do
+    root_dir = File.dirname(__FILE__)
+    style_dir = "#{root_dir}/style"
+    output_dir = "#{root_dir}/lib/better_errors/templates"
+
+    engine = SassC::Engine.new(
+      File.read("#{style_dir}/main.scss"),
+      filename: "#{style_dir}/main.scss",
+      style: :expanded,
+      line_comments: true,
+      load_paths: [style_dir],
+    )
+    css = engine.render
+    File.open("#{output_dir}/main.development.css", "w") do |f|
+      f.write(css)
+    end
+  end
+
+  desc "Build main.css from the SASS sources"
+  task :build do
+    root_dir = File.dirname(__FILE__)
+    style_dir = "#{root_dir}/style"
+    output_dir = "#{root_dir}/lib/better_errors/templates"
+
+    engine = SassC::Engine.new(
+      File.read("#{style_dir}/main.scss"),
+      filename: "#{style_dir}/main.scss",
+      style: :compressed,
+      load_paths: [style_dir],
+    )
+    css = engine.render
+    File.open("#{output_dir}/main.css", "w") do |f|
+      f.write(css)
+    end
+  end
+end
diff --git a/better_errors.gemspec b/better_errors.gemspec
index ef996b0d..f8375e0b 100644
--- a/better_errors.gemspec
+++ b/better_errors.gemspec
@@ -25,6 +25,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency "rspec-html-matchers"
   s.add_development_dependency "rspec-its"
   s.add_development_dependency "yard"
+  s.add_development_dependency "sassc"
   # kramdown 2.1 requires Ruby 2.3+
   s.add_development_dependency "kramdown", (RUBY_VERSION < '2.3' ? '< 2.0.0' : '> 2.0.0')
   # simplecov and coveralls must not be included here. See the Gemfiles instead.
diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 3db3ee80..71e1c9cc 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -1,749 +1 @@
-/* Basic reset */
-* {
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th, td {
-  vertical-align: top;
-  text-align: left;
-}
-
-textarea {
-  resize: none;
-}
-
-body {
-  font-size: 10pt;
-}
-
-body, td, input, textarea {
-  font-family: helvetica neue, lucida grande, sans-serif;
-  line-height: 1.5;
-  color: #333;
-}
-
-html {
-  background: white;
-}
-
-.clearfix::after{
-  clear: both;
-  content: ".";
-  display: block;
-  height: 0;
-  visibility: hidden;
-}
-
-/* ---------------------------------------------------------------------
- * Basic layout
- * --------------------------------------------------------------------- */
-
-/* Small */
-@media screen and (max-width: 1100px) {
-  html {
-    overflow-y: scroll;
-  }
-
-  body {
-    margin: 0 20px;
-  }
-
-  header.exception {
-    margin: 0 -20px;
-  }
-
-  nav.sidebar {
-    padding: 0;
-    margin: 20px 0;
-  }
-
-  ul.frames {
-    max-height: 200px;
-  }
-}
-
-/* Wide */
-@media screen and (min-width: 1100px) {
-  header.exception {
-     position: fixed;
-     top: 0;
-     left: 0;
-     right: 0;
-  }
-
-  nav.sidebar,
-  .frame_info {
-    position: fixed;
-    top: 95px;
-    bottom: 0;
-
-    box-sizing: border-box;
-  }
-  
-  nav.sidebar {
-    width: 40%;
-    left: 0;
-  }
-
-  ul.frames {
-    position: absolute;
-    top: 36px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .frame_info {
-    right: 0;
-    left: 40%;
-
-    border-left: 5px solid #38a;
-
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-}
-
-ul.frames {
-  overflow: auto;
-}
-
-/* ---------------------------------------------------------------------
- * Header
- * --------------------------------------------------------------------- */
-
-header.exception {
-  padding: 18px 20px;
-
-  height: 59px;
-  min-height: 59px;
-
-  overflow: hidden;
-
-  background-color: #20202a;
-  color: #aaa;
-  font-weight: 200;
-
-  -webkit-text-smoothing: antialiased;
-}
-
-/* Heading */
-header.exception h2 {
-  font-weight: 200;
-  font-size: 11pt;
-}
-
-header.exception h2,
-header.exception p {
-  line-height: 1.4em;
-  overflow: hidden;
-  white-space: pre;
-  text-overflow: ellipsis;
-}
-
-header.exception h2 strong {
-  font-weight: 700;
-  color: #d55;
-}
-
-header.exception p {
-  font-weight: 200;
-  font-size: 20pt;
-  color: white;
-}
-
-header.exception:hover {
-  height: auto;
-  z-index: 2;
-}
-
-header.exception:hover h2,
-header.exception:hover p {
-  padding-right: 20px;
-  overflow-y: auto;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  height: auto;
-  max-height: 7.5em;
-}
-
-@media screen and (max-width: 1100px) {
-  header.exception {
-    height: auto;
-  }
-
-  header.exception h2,
-  header.exception p {
-    padding-right: 20px;
-    overflow-y: auto;
-    word-wrap: break-word;
-    height: auto;
-    max-height: 7em;
-  }
-}
-
-/* ---------------------------------------------------------------------
- * Navigation
- * --------------------------------------------------------------------- */
-
-nav.segmented {
-  border-bottom: solid 1px #ddd;
-
-  text-align: center;
-
-  padding: 6px;
-}
-
-nav.segmented a {
-  display: inline-block;
-
-  height: 22px;
-  line-height: 22px;
-  padding: 0 10px;
-
-  text-decoration: none;
-  font-size: 8pt;
-  font-weight: bold;
-
-  color: #38a;
-  border: 1px solid #38a;
-}
-
-nav.segmented a:first-child {
-  border-right: 0;
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
-
-nav.segmented a:last-child {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-
-nav.segmented a.selected {
-  color: white;
-  background: #38a;
-}
-
-nav.segmented a.disabled {
-  text-decoration: line-through;
-  cursor: default;
-}
-
-/* ---------------------------------------------------------------------
- * Sidebar
- * --------------------------------------------------------------------- */
-
-ul.frames {
-}
-
-/* Each item */
-ul.frames li {
-  padding: 7px 20px;
-  border-bottom: 1pt solid #eee;
-
-  cursor: pointer;
-  overflow: hidden;
-}
-
-ul.frames li .name,
-ul.frames li .location {
-  overflow: hidden;
-  height: 1.5em;
-
-  white-space: nowrap;
-  word-wrap: none;
-  text-overflow: ellipsis;
-}
-
-ul.frames li .method {
-  color: #666;
-}
-
-ul.frames li .location {
-  font-size: 0.85em;
-  font-weight: 400;
-  color: #999;
-}
-
-ul.frames li .line {
-  font-weight: bold;
-}
-
-ul.frames li .chevron {
-  float: right;
-  margin-right: -10px;
-  color: #ccc;
-  font-size: 24px;
-  line-height: 34px;
-}
-@media screen and (max-width: 1100px) {
-  ul.frames li .chevron {
-    display: none;
-  }
-}
-
-/* Selected frame */
-ul.frames li.selected {
-  background: #38a;
-}
-
-ul.frames li.selected .name,
-ul.frames li.selected .method,
-ul.frames li.selected .location,
-ul.frames li.selected .chevron {
-  color: white;
-}
-
-/* Iconography */
-ul.frames li {
-  padding-left: 60px;
-  position: relative;
-}
-
-ul.frames li .icon {
-  display: block;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  border-radius: 15px;
-
-  text-align: center;
-
-  background: white;
-  border: solid 2px #ccc;
-
-  font-size: 9pt;
-  font-weight: 200;
-  font-style: normal;
-
-  position: absolute;
-  top: 14px;
-  left: 20px;
-}
-
-ul.frames .icon.application {
-  background: #808090;
-  border-color: #555;
-}
-
-ul.frames .icon.application:before {
-  content: 'A';
-  color: white;
-}
-
-/* Responsiveness -- flow to single-line mode */
-@media screen and (max-width: 1100px) {
-  ul.frames li {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: 36px;
-    line-height: 1.3;
-  }
-
-  ul.frames li .icon {
-    width: 11px;
-    height: 11px;
-    line-height: 11px;
-
-    top: 7px;
-    left: 10px;
-    font-size: 5pt;
-  }
-
-  ul.frames .name,
-  ul.frames .location {
-    display: inline-block;
-    line-height: 1.3;
-    height: 1.3em;
-  }
-
-  ul.frames .name {
-    margin-right: 10px;
-  }
-}
-
-/* ---------------------------------------------------------------------
- * Monospace
- * --------------------------------------------------------------------- */
-
-pre, code, .be-repl .command-line input, .be-repl .command-line .prompt, .be-repl .output .command, textarea, .code_linenums, .title .name,
-ul.frames li .method {
-  font-family: menlo, lucida console, monospace;
-}
-
-/* ---------------------------------------------------------------------
- * Display area
- * --------------------------------------------------------------------- */
-
-.code_block {
-  background: #f1f1f1;
-  padding-bottom: 1px;
-}
-
-/* Titlebar */
-.trace_info .title {
-  background: #38a;
-  color: white;
-
-  overflow: hidden;
-  padding: 5px 10px;
-}
-@media screen and (min-width: 1100px) {
-  .trace_info .title {
-    padding: 5px 10px 5px 0;
-  }
-}
-
-.trace_info .title .name,
-.trace_info .title .location {
-  font-size: 9pt;
-  line-height: 26px;
-  height: 26px;
-  overflow: hidden;
-}
-
-.trace_info .title .location {
-  float: left;
-  font-weight: bold;
-  font-size: 10pt;
-}
-
-.trace_info .title .location a {
-  color:white;
-  text-decoration: none;
-}
-.trace_info .title .location a .filename {
-  text-decoration: underline;
-}
-
-.trace_info .title .location a:hover {
-  border-color:#666666;
-}
-
-.trace_info .title .name {
-  float: right;
-  font-weight: 200;
-}
-
-.code_linenums{
-  background:#f1f1f1;
-  padding-top:10px;
-  padding-bottom:9px;
-  float:left;
-}
-
-.code_linenums pre{
-  padding:0 6px;
-}
-
-.code {
-  margin-bottom: -1px;
-  border-top-left-radius:2px;
-  padding: 10px 0;
-  overflow: auto;
-}
-
-.code pre{
-  padding-left:12px;
-}
-
-.code pre, .code_linenums pre {
-  font-size: 11px;
-  min-height:16px;
-}
-
-/* Source unavailable */
-p.unavailable {
-  padding: 20px 0 40px 0;
-  text-align: center;
-  color: #b99;
-  font-weight: bold;
-}
-
-p.unavailable:before {
-  content: '\00d7';
-  display: block;
-
-  color: #daa;
-
-  text-align: center;
-  font-size: 40pt;
-  font-weight: normal;
-  margin-bottom: -10px;
-}
-
-@-webkit-keyframes highlight {
-  0%   { background: rgba(220, 30, 30, 0.3); }
-  100% { background: rgba(220, 30, 30, 0.1); }
-}
-@-moz-keyframes highlight {
-  0%   { background: rgba(220, 30, 30, 0.3); }
-  100% { background: rgba(220, 30, 30, 0.1); }
-}
-@keyframes highlight {
-  0%   { background: rgba(220, 30, 30, 0.3); }
-  100% { background: rgba(220, 30, 30, 0.1); }
-}
-
-.code .highlight, .code_linenums .highlight {
-  background: rgba(220, 30, 30, 0.1);
-  -webkit-animation: highlight 400ms linear 1;
-  -moz-animation: highlight 400ms linear 1;
-  animation: highlight 400ms linear 1;
-}
-
-h3 {
-  background-color: #38a;
-  color: white;
-  padding: 4px;
-  font-size: 8pt;
-
-  -webkit-font-smoothing: antialiased;
-}
-
-/* REPL shell */
-.be-console {
-  background-color: #002B36;
-  color: white;
-}
-
-.be-console .output {
-  max-height: 15rem;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  padding: 8px;
-  border-bottom: 1px solid #ccc;
-}
-.be-console .output:not(.used) {
-  padding: 0;
-  border-bottom: 0;
-}
-@media screen and (min-height: 800px) {
-  .be-console .output {
-    max-height: 25rem;
-  }
-}
-
-.be-console .output pre, .be-console .output h4 {
-  font-size: 9pt;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  width: 100%;
-}
-.be-console .output h4 {
-  padding: 8px;
-  margin-top: 10px;
-}
-.be-console .output h4:first-child {
-  margin-top: 0;
-}
-
-.be-console .output h4, .be-console .command-line {
-  background-color: #555;
-}
-
-.be-console .output pre {
-  padding: 8px;
-}
-
-/* .command-line > span + input */
-.be-console .command-line {
-  display: table;
-  padding: 8px 0;
-}
-
-.be-console .command-line .prompt,
-.be-console .command-line input {
-  display: table-cell;
-  line-height: 12px;
-  font-size: 9pt;
-}
-
-.be-console .command-line .prompt {
-  width: 1%;
-  padding-right: 5px;
-  padding-left: 10px;
-  white-space: pre;
-}
-
-.be-console .command-line input {
-  width: 99%;
-}
-
-/* Input box */
-.be-console input,
-.be-console input:focus {
-  outline: 0;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  margin: 0;
-  color: inherit;
-}
-
-/* Hint text */
-.hint {
-  margin: 15px 0 20px 0;
-  font-size: 8pt;
-  color: #8080a0;
-  padding-left: 20px;
-}
-
-/* ---------------------------------------------------------------------
- * Variable infos
- * --------------------------------------------------------------------- */
-
-.variables h4 {
-  margin-top: 5px;
-  padding-left: 5px;
-
-  font-weight: bold;
-  font-size: 9pt;
-
-  word-wrap: break-word;
-}
-
-.variables pre {
-  max-height: 15em;
-  overflow-y: auto;
-
-  font-size: 9pt;
-  word-wrap: break-word;
-  white-space: normal;
-
-  margin-left: 2rem;
-  border-bottom: 1px dotted #ddd;
-}
-
-/* "(object doesn't support inspect)" */
-.variables .unsupported {
-  display: block;
-  font-family: sans-serif;
-  color: #777;
-}
-
-/* ---------------------------------------------------------------------
- * Scrollbar
- * --------------------------------------------------------------------- */
-
-nav.sidebar::-webkit-scrollbar,
-.inset pre::-webkit-scrollbar,
-.be-console pre::-webkit-scrollbar,
-.code::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-.inset pre::-webkit-scrollbar-thumb,
-.be-console pre::-webkit-scrollbar-thumb,
-.code::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 5px;
-}
-
-nav.sidebar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.0);
-  border-radius: 5px;
-}
-
-nav.sidebar:hover::-webkit-scrollbar-thumb {
-  background-color: #999;
-  background: -webkit-linear-gradient(left, #aaa, #999);
-}
-
-.be-console pre:hover::-webkit-scrollbar-thumb,
-.inset pre:hover::-webkit-scrollbar-thumb,
-.code:hover::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-
-.CodeRay .debug{color:#fff;background:#00f}
-.CodeRay .annotation{color:#586E75}
-.CodeRay .attribute-name{color:#93A1A1}
-.CodeRay .attribute-value{color:#93A1A1}
-.CodeRay .binary{color:#509}
-.CodeRay .char .content{color:#d20}
-.CodeRay .char .delimiter{color:#710}
-.CodeRay .char{color:#2AA198}
-.CodeRay .class{color:#268BD2;font-weight:bold}
-.CodeRay .class-variable{color:#268BD2}
-.CodeRay .color{color:#eee8d5}
-.CodeRay .comment{color:#586E75}
-.CodeRay .comment .char{color:#859900}
-.CodeRay .comment .delimiter{color:#859900}
-.CodeRay .complex{color:#a08}
-.CodeRay .constant{color:#B58900;font-weight:bold}
-.CodeRay .decorator{color:#268BD2}
-.CodeRay .definition{color:#099;font-weight:bold}
-.CodeRay .delimiter{color:#000}
-.CodeRay .directive{color:#088;font-weight:bold}
-.CodeRay .doc{color:#93A1A1}
-.CodeRay .doc-string{color:#93A1A1;font-weight:bold}
-.CodeRay .doctype{color:#DC322F}
-.CodeRay .entity{color:#CB4B16;font-weight:bold}
-.CodeRay .error{color:#93A1A1;background-color:#faa}
-.CodeRay .escape{color:#CB4B16}
-.CodeRay .exception{color:#CB4B16;font-weight:bold}
-.CodeRay .float{color:#2AA198}
-.CodeRay .function{color:#268BD2;font-weight:bold}
-.CodeRay .global-variable{color:#268BD2}
-.CodeRay .hex{color:#2AA198}
-.CodeRay .imaginary{color:#f00}
-.CodeRay .include{color:#b44;font-weight:bold}
-.CodeRay .inline{background-color:transparent;color:#93A1A1!important}
-.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}
-.CodeRay .instance-variable{color:#268BD2}
-.CodeRay .integer{color:#2AA198}
-.CodeRay .key .char{color:#DC322F}
-.CodeRay .key .delimiter{color:#268BD2}
-.CodeRay .key{color:#859900}
-.CodeRay .keyword{color:#859900;font-weight:bold}
-.CodeRay .label{color:#93A1A1;font-weight:bold}
-.CodeRay .local-variable{color:#268BD2}
-.CodeRay .namespace{color:#859900;font-weight:bold}
-.CodeRay .octal{color:#2AA198}
-.CodeRay .operator, .predefined{color:#859900;font-weight:bold}
-.CodeRay .predefined-constant{color:#2AA198}
-.CodeRay .predefined-type{color:#DC322F;font-weight:bold}
-.CodeRay .preprocessor{color:#859900}
-.CodeRay .pseudo-class{color:#859900;font-weight:bold}
-.CodeRay .regexp .content{color:#2AA198}
-.CodeRay .regexp .delimiter{color:#DC322F}
-.CodeRay .regexp .modifier{color:#CB4B16}
-.CodeRay .regexp{background-color:transparent}
-.CodeRay .reserved{color:#268BD2;font-weight:bold}
-.CodeRay .shell .content{color:#2b2}
-.CodeRay .shell .delimiter{color:#161}
-.CodeRay .shell{background-color:transparent}
-.CodeRay .string .char{color:#2AA198}
-.CodeRay .string .content{color:#2AA198}
-.CodeRay .string .delimiter{color:#DC322F}
-.CodeRay .string .modifier{color:#2AA198}
-.CodeRay .string{background-color:transparent}
-.CodeRay .symbol .content{color:#2AA198}
-.CodeRay .symbol .delimiter{color:#2AA198}
-.CodeRay .symbol{color:#2AA198}
-.CodeRay .tag{color: #268BD2}
-.CodeRay .type{color:#DC322F;font-weight:bold}
-.CodeRay .value{color:#268BD2}
-.CodeRay .variable{color:#268BD2}
-.CodeRay .insert{background:transparent}
-.CodeRay .delete{background:transparent}
-.CodeRay .change{color:#CB4B16;background:transparent}
-.CodeRay .head{color:#CB4B16;background:transparent}
-.CodeRay .head .filename{color:#CB4B16}
-.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
-.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
-.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
-.CodeRay .delete .delete{color:##2AA198;background:transparent;font-weight:bold}
-.CodeRay .change .change{color:#CB4B16}
-.CodeRay .head .head{color:#CB4B16}
+*{margin:0;padding:0}table{width:100%;border-collapse:collapse}th,td{vertical-align:top;text-align:left}textarea{resize:none}body{font-size:10pt}body,td,input,textarea{font-family:helvetica neue, lucida grande, sans-serif;line-height:1.5;color:#333}html{background:white}.clearfix::after{clear:both;content:".";display:block;height:0;visibility:hidden}@media screen and (max-width: 1100px){html{overflow-y:scroll}body{margin:0 20px}header.exception{margin:0 -20px}nav.sidebar{padding:0;margin:20px 0}ul.frames{max-height:200px}}@media screen and (min-width: 1100px){header.exception{position:fixed;top:0;left:0;right:0}nav.sidebar,.frame_info{position:fixed;top:95px;bottom:0;box-sizing:border-box}nav.sidebar{width:40%;left:0}ul.frames{position:absolute;top:36px;bottom:0;left:0;right:0}.frame_info{right:0;left:40%;border-left:5px solid #38a;overflow-y:auto;overflow-x:hidden}}ul.frames{overflow:auto}header.exception{padding:18px 20px;height:59px;min-height:59px;overflow:hidden;background-color:#20202a;color:#aaa;font-weight:200;-webkit-text-smoothing:antialiased}header.exception h2{font-weight:200;font-size:11pt}header.exception h2,header.exception p{line-height:1.4em;overflow:hidden;white-space:pre;text-overflow:ellipsis}header.exception h2 strong{font-weight:700;color:#d55}header.exception p{font-weight:200;font-size:20pt;color:white}header.exception:hover{height:auto;z-index:2}header.exception:hover h2,header.exception:hover p{padding-right:20px;overflow-y:auto;word-wrap:break-word;white-space:pre-wrap;height:auto;max-height:7.5em}@media screen and (max-width: 1100px){header.exception{height:auto}header.exception h2,header.exception p{padding-right:20px;overflow-y:auto;word-wrap:break-word;height:auto;max-height:7em}}nav.segmented{border-bottom:solid 1px #ddd;text-align:center;padding:6px}nav.segmented a{display:inline-block;height:22px;line-height:22px;padding:0 10px;text-decoration:none;font-size:8pt;font-weight:bold;color:#38a;border:1px solid #38a}nav.segmented a:first-child{border-right:0;border-top-left-radius:8px;border-bottom-left-radius:8px}nav.segmented a:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}nav.segmented a.selected{color:white;background:#38a}nav.segmented a.disabled{text-decoration:line-through;cursor:default}ul.frames li{padding:7px 20px;border-bottom:1pt solid #eee;cursor:pointer;overflow:hidden}ul.frames li .name,ul.frames li .location{overflow:hidden;height:1.5em;white-space:nowrap;word-wrap:none;text-overflow:ellipsis}ul.frames li .method{color:#666}ul.frames li .location{font-size:0.85em;font-weight:400;color:#999}ul.frames li .line{font-weight:bold}ul.frames li .chevron{float:right;margin-right:-10px;color:#ccc;font-size:24px;line-height:34px}@media screen and (max-width: 1100px){ul.frames li .chevron{display:none}}ul.frames li.selected{background:#38a}ul.frames li.selected .name,ul.frames li.selected .method,ul.frames li.selected .location,ul.frames li.selected .chevron{color:white}ul.frames li{padding-left:60px;position:relative}ul.frames li .icon{display:block;width:20px;height:20px;line-height:20px;border-radius:15px;text-align:center;background:white;border:solid 2px #ccc;font-size:9pt;font-weight:200;font-style:normal;position:absolute;top:14px;left:20px}ul.frames .icon.application{background:#808090;border-color:#555}ul.frames .icon.application:before{content:'A';color:white}@media screen and (max-width: 1100px){ul.frames li{padding-top:6px;padding-bottom:6px;padding-left:36px;line-height:1.3}ul.frames li .icon{width:11px;height:11px;line-height:11px;top:7px;left:10px;font-size:5pt}ul.frames .name,ul.frames .location{display:inline-block;line-height:1.3;height:1.3em}ul.frames .name{margin-right:10px}}pre,code,.be-repl .command-line input,.be-repl .command-line .prompt,.be-repl .output .command,textarea,.code_linenums,.title .name,ul.frames li .method{font-family:menlo, lucida console, monospace}.code_block{background:#f1f1f1;padding-bottom:1px}.trace_info .title{background:#38a;color:white;overflow:hidden;padding:5px 10px}@media screen and (min-width: 1100px){.trace_info .title{padding:5px 10px 5px 0}}.trace_info .title .name,.trace_info .title .location{font-size:9pt;line-height:26px;height:26px;overflow:hidden}.trace_info .title .location{float:left;font-weight:bold;font-size:10pt}.trace_info .title .location a{color:white;text-decoration:none}.trace_info .title .location a .filename{text-decoration:underline}.trace_info .title .location a:hover{border-color:#666666}.trace_info .title .name{float:right;font-weight:200}.code_linenums{background:#f1f1f1;padding-top:10px;padding-bottom:9px;float:left}.code_linenums pre{padding:0 6px}.code{margin-bottom:-1px;border-top-left-radius:2px;padding:10px 0;overflow:auto}.code pre{padding-left:12px}.code pre,.code_linenums pre{font-size:11px;min-height:16px}p.unavailable{padding:20px 0 40px 0;text-align:center;color:#b99;font-weight:bold}p.unavailable:before{content:'\00d7';display:block;color:#daa;text-align:center;font-size:40pt;font-weight:normal;margin-bottom:-10px}@-webkit-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@-moz-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}.code .highlight,.code_linenums .highlight{background:rgba(220,30,30,0.1);-webkit-animation:highlight 400ms linear 1;-moz-animation:highlight 400ms linear 1;animation:highlight 400ms linear 1}h3{background-color:#38a;color:white;padding:4px;font-size:8pt;-webkit-font-smoothing:antialiased}.be-console{background-color:#002B36;color:white}.be-console .output{max-height:15rem;overflow-x:hidden;overflow-y:auto;padding:8px;border-bottom:1px solid #ccc}.be-console .output:not(.used){padding:0;border-bottom:0}@media screen and (min-height: 800px){.be-console .output{max-height:25rem}}.be-console .output pre,.be-console .output h4{font-size:9pt;word-wrap:break-word;white-space:pre-wrap;width:100%}.be-console .output h4{padding:8px;margin-top:10px}.be-console .output h4:first-child{margin-top:0}.be-console .output h4,.be-console .command-line{background-color:#555}.be-console .output pre{padding:8px}.be-console .command-line{display:table;padding:8px 0}.be-console .command-line .prompt,.be-console .command-line input{display:table-cell;line-height:12px;font-size:9pt}.be-console .command-line .prompt{width:1%;padding-right:5px;padding-left:10px;white-space:pre}.be-console .command-line input{width:99%}.be-console input,.be-console input:focus{outline:0;border:0;padding:0;background:transparent;margin:0;color:inherit}.hint{margin:15px 0 20px 0;font-size:8pt;color:#8080a0;padding-left:20px}.variables h4{margin-top:5px;padding-left:5px;font-weight:bold;font-size:9pt;word-wrap:break-word}.variables pre{max-height:15em;overflow-y:auto;font-size:9pt;word-wrap:break-word;white-space:normal;margin-left:2rem;border-bottom:1px dotted #ddd}.variables .unsupported{display:block;font-family:sans-serif;color:#777}nav.sidebar::-webkit-scrollbar,.inset pre::-webkit-scrollbar,.be-console pre::-webkit-scrollbar,.code::-webkit-scrollbar{width:10px;height:10px}.inset pre::-webkit-scrollbar-thumb,.be-console pre::-webkit-scrollbar-thumb,.code::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}nav.sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,0);border-radius:5px}nav.sidebar:hover::-webkit-scrollbar-thumb{background-color:#999;background:-webkit-linear-gradient(left, #aaa, #999)}.be-console pre:hover::-webkit-scrollbar-thumb,.inset pre:hover::-webkit-scrollbar-thumb,.code:hover::-webkit-scrollbar-thumb{background:#888}.CodeRay .debug{color:#fff;background:#00f}.CodeRay .annotation{color:#586E75}.CodeRay .attribute-name{color:#93A1A1}.CodeRay .attribute-value{color:#93A1A1}.CodeRay .binary{color:#509}.CodeRay .char .content{color:#d20}.CodeRay .char .delimiter{color:#710}.CodeRay .char{color:#2AA198}.CodeRay .class{color:#268BD2;font-weight:bold}.CodeRay .class-variable{color:#268BD2}.CodeRay .color{color:#eee8d5}.CodeRay .comment{color:#586E75}.CodeRay .comment .char{color:#859900}.CodeRay .comment .delimiter{color:#859900}.CodeRay .complex{color:#a08}.CodeRay .constant{color:#B58900;font-weight:bold}.CodeRay .decorator{color:#268BD2}.CodeRay .definition{color:#099;font-weight:bold}.CodeRay .delimiter{color:#000}.CodeRay .directive{color:#088;font-weight:bold}.CodeRay .doc{color:#93A1A1}.CodeRay .doc-string{color:#93A1A1;font-weight:bold}.CodeRay .doctype{color:#DC322F}.CodeRay .entity{color:#CB4B16;font-weight:bold}.CodeRay .error{color:#93A1A1;background-color:#faa}.CodeRay .escape{color:#CB4B16}.CodeRay .exception{color:#CB4B16;font-weight:bold}.CodeRay .float{color:#2AA198}.CodeRay .function{color:#268BD2;font-weight:bold}.CodeRay .global-variable{color:#268BD2}.CodeRay .hex{color:#2AA198}.CodeRay .imaginary{color:#f00}.CodeRay .include{color:#b44;font-weight:bold}.CodeRay .inline{background-color:transparent;color:#93A1A1 !important}.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}.CodeRay .instance-variable{color:#268BD2}.CodeRay .integer{color:#2AA198}.CodeRay .key .char{color:#DC322F}.CodeRay .key .delimiter{color:#268BD2}.CodeRay .key{color:#859900}.CodeRay .keyword{color:#859900;font-weight:bold}.CodeRay .label{color:#93A1A1;font-weight:bold}.CodeRay .local-variable{color:#268BD2}.CodeRay .namespace{color:#859900;font-weight:bold}.CodeRay .octal{color:#2AA198}.CodeRay .operator,.predefined{color:#859900;font-weight:bold}.CodeRay .predefined-constant{color:#2AA198}.CodeRay .predefined-type{color:#DC322F;font-weight:bold}.CodeRay .preprocessor{color:#859900}.CodeRay .pseudo-class{color:#859900;font-weight:bold}.CodeRay .regexp .content{color:#2AA198}.CodeRay .regexp .delimiter{color:#DC322F}.CodeRay .regexp .modifier{color:#CB4B16}.CodeRay .regexp{background-color:transparent}.CodeRay .reserved{color:#268BD2;font-weight:bold}.CodeRay .shell .content{color:#2b2}.CodeRay .shell .delimiter{color:#161}.CodeRay .shell{background-color:transparent}.CodeRay .string .char{color:#2AA198}.CodeRay .string .content{color:#2AA198}.CodeRay .string .delimiter{color:#DC322F}.CodeRay .string .modifier{color:#2AA198}.CodeRay .string{background-color:transparent}.CodeRay .symbol .content{color:#2AA198}.CodeRay .symbol .delimiter{color:#2AA198}.CodeRay .symbol{color:#2AA198}.CodeRay .tag{color:#268BD2}.CodeRay .type{color:#DC322F;font-weight:bold}.CodeRay .value{color:#268BD2}.CodeRay .variable{color:#268BD2}.CodeRay .insert{background:transparent}.CodeRay .delete{background:transparent}.CodeRay .change{color:#CB4B16;background:transparent}.CodeRay .head{color:#CB4B16;background:transparent}.CodeRay .head .filename{color:#CB4B16}.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}.CodeRay .change .change{color:#CB4B16}.CodeRay .head .head{color:#CB4B16}
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index 6c4a2596..6f99ecb1 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -1,12 +1,16 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title><%= exception_type %> at <%= request_path %></title>
+    <title><%= exception_type %> at <%= request_path %> - Better Errors</title>
 </head>
 <body>
     <%# Stylesheets are placed in the <body> for Turbolinks compatibility. %>
     <style type='text/css'>
-      <%== File.open(File.expand_path("templates/main.css", File.dirname(__FILE__))).read %>
+      <% if File.exist?(File.expand_path("templates/main.development.css", File.dirname(__FILE__))) %>
+        <%== File.open(File.expand_path("templates/main.development.css", File.dirname(__FILE__))).read %>
+      <% else %>
+        <%== File.open(File.expand_path("templates/main.css", File.dirname(__FILE__))).read %>
+      <% end %>
     </style>
 
     <%# IE8 compatibility crap %>
diff --git a/style/main.scss b/style/main.scss
new file mode 100644
index 00000000..c3e86d5b
--- /dev/null
+++ b/style/main.scss
@@ -0,0 +1,749 @@
+/* Basic reset */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  vertical-align: top;
+  text-align: left;
+}
+
+textarea {
+  resize: none;
+}
+
+body {
+  font-size: 10pt;
+}
+
+body, td, input, textarea {
+  font-family: helvetica neue, lucida grande, sans-serif;
+  line-height: 1.5;
+  color: #333;
+}
+
+html {
+  background: white;
+}
+
+.clearfix::after{
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+/* ---------------------------------------------------------------------
+ * Basic layout
+ * --------------------------------------------------------------------- */
+
+/* Small */
+@media screen and (max-width: 1100px) {
+  html {
+    overflow-y: scroll;
+  }
+
+  body {
+    margin: 0 20px;
+  }
+
+  header.exception {
+    margin: 0 -20px;
+  }
+
+  nav.sidebar {
+    padding: 0;
+    margin: 20px 0;
+  }
+
+  ul.frames {
+    max-height: 200px;
+  }
+}
+
+/* Wide */
+@media screen and (min-width: 1100px) {
+  header.exception {
+     position: fixed;
+     top: 0;
+     left: 0;
+     right: 0;
+  }
+
+  nav.sidebar,
+  .frame_info {
+    position: fixed;
+    top: 95px;
+    bottom: 0;
+
+    box-sizing: border-box;
+  }
+  
+  nav.sidebar {
+    width: 40%;
+    left: 0;
+  }
+
+  ul.frames {
+    position: absolute;
+    top: 36px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .frame_info {
+    right: 0;
+    left: 40%;
+
+    border-left: 5px solid #38a;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+
+ul.frames {
+  overflow: auto;
+}
+
+/* ---------------------------------------------------------------------
+ * Header
+ * --------------------------------------------------------------------- */
+
+header.exception {
+  padding: 18px 20px;
+
+  height: 59px;
+  min-height: 59px;
+
+  overflow: hidden;
+
+  background-color: #20202a;
+  color: #aaa;
+  font-weight: 200;
+
+  -webkit-text-smoothing: antialiased;
+}
+
+/* Heading */
+header.exception h2 {
+  font-weight: 200;
+  font-size: 11pt;
+}
+
+header.exception h2,
+header.exception p {
+  line-height: 1.4em;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+}
+
+header.exception h2 strong {
+  font-weight: 700;
+  color: #d55;
+}
+
+header.exception p {
+  font-weight: 200;
+  font-size: 20pt;
+  color: white;
+}
+
+header.exception:hover {
+  height: auto;
+  z-index: 2;
+}
+
+header.exception:hover h2,
+header.exception:hover p {
+  padding-right: 20px;
+  overflow-y: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  height: auto;
+  max-height: 7.5em;
+}
+
+@media screen and (max-width: 1100px) {
+  header.exception {
+    height: auto;
+  }
+
+  header.exception h2,
+  header.exception p {
+    padding-right: 20px;
+    overflow-y: auto;
+    word-wrap: break-word;
+    height: auto;
+    max-height: 7em;
+  }
+}
+
+/* ---------------------------------------------------------------------
+ * Navigation
+ * --------------------------------------------------------------------- */
+
+nav.segmented {
+  border-bottom: solid 1px #ddd;
+
+  text-align: center;
+
+  padding: 6px;
+}
+
+nav.segmented a {
+  display: inline-block;
+
+  height: 22px;
+  line-height: 22px;
+  padding: 0 10px;
+
+  text-decoration: none;
+  font-size: 8pt;
+  font-weight: bold;
+
+  color: #38a;
+  border: 1px solid #38a;
+}
+
+nav.segmented a:first-child {
+  border-right: 0;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+nav.segmented a:last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+nav.segmented a.selected {
+  color: white;
+  background: #38a;
+}
+
+nav.segmented a.disabled {
+  text-decoration: line-through;
+  cursor: default;
+}
+
+/* ---------------------------------------------------------------------
+ * Sidebar
+ * --------------------------------------------------------------------- */
+
+ul.frames {
+}
+
+/* Each item */
+ul.frames li {
+  padding: 7px 20px;
+  border-bottom: 1pt solid #eee;
+
+  cursor: pointer;
+  overflow: hidden;
+}
+
+ul.frames li .name,
+ul.frames li .location {
+  overflow: hidden;
+  height: 1.5em;
+
+  white-space: nowrap;
+  word-wrap: none;
+  text-overflow: ellipsis;
+}
+
+ul.frames li .method {
+  color: #666;
+}
+
+ul.frames li .location {
+  font-size: 0.85em;
+  font-weight: 400;
+  color: #999;
+}
+
+ul.frames li .line {
+  font-weight: bold;
+}
+
+ul.frames li .chevron {
+  float: right;
+  margin-right: -10px;
+  color: #ccc;
+  font-size: 24px;
+  line-height: 34px;
+}
+@media screen and (max-width: 1100px) {
+  ul.frames li .chevron {
+    display: none;
+  }
+}
+
+/* Selected frame */
+ul.frames li.selected {
+  background: #38a;
+}
+
+ul.frames li.selected .name,
+ul.frames li.selected .method,
+ul.frames li.selected .location,
+ul.frames li.selected .chevron {
+  color: white;
+}
+
+/* Iconography */
+ul.frames li {
+  padding-left: 60px;
+  position: relative;
+}
+
+ul.frames li .icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 15px;
+
+  text-align: center;
+
+  background: white;
+  border: solid 2px #ccc;
+
+  font-size: 9pt;
+  font-weight: 200;
+  font-style: normal;
+
+  position: absolute;
+  top: 14px;
+  left: 20px;
+}
+
+ul.frames .icon.application {
+  background: #808090;
+  border-color: #555;
+}
+
+ul.frames .icon.application:before {
+  content: 'A';
+  color: white;
+}
+
+/* Responsiveness -- flow to single-line mode */
+@media screen and (max-width: 1100px) {
+  ul.frames li {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 36px;
+    line-height: 1.3;
+  }
+
+  ul.frames li .icon {
+    width: 11px;
+    height: 11px;
+    line-height: 11px;
+
+    top: 7px;
+    left: 10px;
+    font-size: 5pt;
+  }
+
+  ul.frames .name,
+  ul.frames .location {
+    display: inline-block;
+    line-height: 1.3;
+    height: 1.3em;
+  }
+
+  ul.frames .name {
+    margin-right: 10px;
+  }
+}
+
+/* ---------------------------------------------------------------------
+ * Monospace
+ * --------------------------------------------------------------------- */
+
+pre, code, .be-repl .command-line input, .be-repl .command-line .prompt, .be-repl .output .command, textarea, .code_linenums, .title .name,
+ul.frames li .method {
+  font-family: menlo, lucida console, monospace;
+}
+
+/* ---------------------------------------------------------------------
+ * Display area
+ * --------------------------------------------------------------------- */
+
+.code_block {
+  background: #f1f1f1;
+  padding-bottom: 1px;
+}
+
+/* Titlebar */
+.trace_info .title {
+  background: #38a;
+  color: white;
+
+  overflow: hidden;
+  padding: 5px 10px;
+}
+@media screen and (min-width: 1100px) {
+  .trace_info .title {
+    padding: 5px 10px 5px 0;
+  }
+}
+
+.trace_info .title .name,
+.trace_info .title .location {
+  font-size: 9pt;
+  line-height: 26px;
+  height: 26px;
+  overflow: hidden;
+}
+
+.trace_info .title .location {
+  float: left;
+  font-weight: bold;
+  font-size: 10pt;
+}
+
+.trace_info .title .location a {
+  color:white;
+  text-decoration: none;
+}
+.trace_info .title .location a .filename {
+  text-decoration: underline;
+}
+
+.trace_info .title .location a:hover {
+  border-color:#666666;
+}
+
+.trace_info .title .name {
+  float: right;
+  font-weight: 200;
+}
+
+.code_linenums{
+  background:#f1f1f1;
+  padding-top:10px;
+  padding-bottom:9px;
+  float:left;
+}
+
+.code_linenums pre{
+  padding:0 6px;
+}
+
+.code {
+  margin-bottom: -1px;
+  border-top-left-radius:2px;
+  padding: 10px 0;
+  overflow: auto;
+}
+
+.code pre{
+  padding-left:12px;
+}
+
+.code pre, .code_linenums pre {
+  font-size: 11px;
+  min-height:16px;
+}
+
+/* Source unavailable */
+p.unavailable {
+  padding: 20px 0 40px 0;
+  text-align: center;
+  color: #b99;
+  font-weight: bold;
+}
+
+p.unavailable:before {
+  content: '\00d7';
+  display: block;
+
+  color: #daa;
+
+  text-align: center;
+  font-size: 40pt;
+  font-weight: normal;
+  margin-bottom: -10px;
+}
+
+@-webkit-keyframes highlight {
+  0%   { background: rgba(220, 30, 30, 0.3); }
+  100% { background: rgba(220, 30, 30, 0.1); }
+}
+@-moz-keyframes highlight {
+  0%   { background: rgba(220, 30, 30, 0.3); }
+  100% { background: rgba(220, 30, 30, 0.1); }
+}
+@keyframes highlight {
+  0%   { background: rgba(220, 30, 30, 0.3); }
+  100% { background: rgba(220, 30, 30, 0.1); }
+}
+
+.code .highlight, .code_linenums .highlight {
+  background: rgba(220, 30, 30, 0.1);
+  -webkit-animation: highlight 400ms linear 1;
+  -moz-animation: highlight 400ms linear 1;
+  animation: highlight 400ms linear 1;
+}
+
+h3 {
+  background-color: #38a;
+  color: white;
+  padding: 4px;
+  font-size: 8pt;
+
+  -webkit-font-smoothing: antialiased;
+}
+
+/* REPL shell */
+.be-console {
+  background-color: #002B36;
+  color: white;
+}
+
+.be-console .output {
+  max-height: 15rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  padding: 8px;
+  border-bottom: 1px solid #ccc;
+}
+.be-console .output:not(.used) {
+  padding: 0;
+  border-bottom: 0;
+}
+@media screen and (min-height: 800px) {
+  .be-console .output {
+    max-height: 25rem;
+  }
+}
+
+.be-console .output pre, .be-console .output h4 {
+  font-size: 9pt;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
+}
+.be-console .output h4 {
+  padding: 8px;
+  margin-top: 10px;
+}
+.be-console .output h4:first-child {
+  margin-top: 0;
+}
+
+.be-console .output h4, .be-console .command-line {
+  background-color: #555;
+}
+
+.be-console .output pre {
+  padding: 8px;
+}
+
+/* .command-line > span + input */
+.be-console .command-line {
+  display: table;
+  padding: 8px 0;
+}
+
+.be-console .command-line .prompt,
+.be-console .command-line input {
+  display: table-cell;
+  line-height: 12px;
+  font-size: 9pt;
+}
+
+.be-console .command-line .prompt {
+  width: 1%;
+  padding-right: 5px;
+  padding-left: 10px;
+  white-space: pre;
+}
+
+.be-console .command-line input {
+  width: 99%;
+}
+
+/* Input box */
+.be-console input,
+.be-console input:focus {
+  outline: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  margin: 0;
+  color: inherit;
+}
+
+/* Hint text */
+.hint {
+  margin: 15px 0 20px 0;
+  font-size: 8pt;
+  color: #8080a0;
+  padding-left: 20px;
+}
+
+/* ---------------------------------------------------------------------
+ * Variable infos
+ * --------------------------------------------------------------------- */
+
+.variables h4 {
+  margin-top: 5px;
+  padding-left: 5px;
+
+  font-weight: bold;
+  font-size: 9pt;
+
+  word-wrap: break-word;
+}
+
+.variables pre {
+  max-height: 15em;
+  overflow-y: auto;
+
+  font-size: 9pt;
+  word-wrap: break-word;
+  white-space: normal;
+
+  margin-left: 2rem;
+  border-bottom: 1px dotted #ddd;
+}
+
+/* "(object doesn't support inspect)" */
+.variables .unsupported {
+  display: block;
+  font-family: sans-serif;
+  color: #777;
+}
+
+/* ---------------------------------------------------------------------
+ * Scrollbar
+ * --------------------------------------------------------------------- */
+
+nav.sidebar::-webkit-scrollbar,
+.inset pre::-webkit-scrollbar,
+.be-console pre::-webkit-scrollbar,
+.code::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.inset pre::-webkit-scrollbar-thumb,
+.be-console pre::-webkit-scrollbar-thumb,
+.code::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 5px;
+}
+
+nav.sidebar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.0);
+  border-radius: 5px;
+}
+
+nav.sidebar:hover::-webkit-scrollbar-thumb {
+  background-color: #999;
+  background: -webkit-linear-gradient(left, #aaa, #999);
+}
+
+.be-console pre:hover::-webkit-scrollbar-thumb,
+.inset pre:hover::-webkit-scrollbar-thumb,
+.code:hover::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+
+.CodeRay .debug{color:#fff;background:#00f}
+.CodeRay .annotation{color:#586E75}
+.CodeRay .attribute-name{color:#93A1A1}
+.CodeRay .attribute-value{color:#93A1A1}
+.CodeRay .binary{color:#509}
+.CodeRay .char .content{color:#d20}
+.CodeRay .char .delimiter{color:#710}
+.CodeRay .char{color:#2AA198}
+.CodeRay .class{color:#268BD2;font-weight:bold}
+.CodeRay .class-variable{color:#268BD2}
+.CodeRay .color{color:#eee8d5}
+.CodeRay .comment{color:#586E75}
+.CodeRay .comment .char{color:#859900}
+.CodeRay .comment .delimiter{color:#859900}
+.CodeRay .complex{color:#a08}
+.CodeRay .constant{color:#B58900;font-weight:bold}
+.CodeRay .decorator{color:#268BD2}
+.CodeRay .definition{color:#099;font-weight:bold}
+.CodeRay .delimiter{color:#000}
+.CodeRay .directive{color:#088;font-weight:bold}
+.CodeRay .doc{color:#93A1A1}
+.CodeRay .doc-string{color:#93A1A1;font-weight:bold}
+.CodeRay .doctype{color:#DC322F}
+.CodeRay .entity{color:#CB4B16;font-weight:bold}
+.CodeRay .error{color:#93A1A1;background-color:#faa}
+.CodeRay .escape{color:#CB4B16}
+.CodeRay .exception{color:#CB4B16;font-weight:bold}
+.CodeRay .float{color:#2AA198}
+.CodeRay .function{color:#268BD2;font-weight:bold}
+.CodeRay .global-variable{color:#268BD2}
+.CodeRay .hex{color:#2AA198}
+.CodeRay .imaginary{color:#f00}
+.CodeRay .include{color:#b44;font-weight:bold}
+.CodeRay .inline{background-color:transparent;color:#93A1A1!important}
+.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}
+.CodeRay .instance-variable{color:#268BD2}
+.CodeRay .integer{color:#2AA198}
+.CodeRay .key .char{color:#DC322F}
+.CodeRay .key .delimiter{color:#268BD2}
+.CodeRay .key{color:#859900}
+.CodeRay .keyword{color:#859900;font-weight:bold}
+.CodeRay .label{color:#93A1A1;font-weight:bold}
+.CodeRay .local-variable{color:#268BD2}
+.CodeRay .namespace{color:#859900;font-weight:bold}
+.CodeRay .octal{color:#2AA198}
+.CodeRay .operator, .predefined{color:#859900;font-weight:bold}
+.CodeRay .predefined-constant{color:#2AA198}
+.CodeRay .predefined-type{color:#DC322F;font-weight:bold}
+.CodeRay .preprocessor{color:#859900}
+.CodeRay .pseudo-class{color:#859900;font-weight:bold}
+.CodeRay .regexp .content{color:#2AA198}
+.CodeRay .regexp .delimiter{color:#DC322F}
+.CodeRay .regexp .modifier{color:#CB4B16}
+.CodeRay .regexp{background-color:transparent}
+.CodeRay .reserved{color:#268BD2;font-weight:bold}
+.CodeRay .shell .content{color:#2b2}
+.CodeRay .shell .delimiter{color:#161}
+.CodeRay .shell{background-color:transparent}
+.CodeRay .string .char{color:#2AA198}
+.CodeRay .string .content{color:#2AA198}
+.CodeRay .string .delimiter{color:#DC322F}
+.CodeRay .string .modifier{color:#2AA198}
+.CodeRay .string{background-color:transparent}
+.CodeRay .symbol .content{color:#2AA198}
+.CodeRay .symbol .delimiter{color:#2AA198}
+.CodeRay .symbol{color:#2AA198}
+.CodeRay .tag{color: #268BD2}
+.CodeRay .type{color:#DC322F;font-weight:bold}
+.CodeRay .value{color:#268BD2}
+.CodeRay .variable{color:#268BD2}
+.CodeRay .insert{background:transparent}
+.CodeRay .delete{background:transparent}
+.CodeRay .change{color:#CB4B16;background:transparent}
+.CodeRay .head{color:#CB4B16;background:transparent}
+.CodeRay .head .filename{color:#CB4B16}
+.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
+.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
+.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
+.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}
+.CodeRay .change .change{color:#CB4B16}
+.CodeRay .head .head{color:#CB4B16}

From d0d096ea77df66c062cc2dda4e0640dcce076894 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Sat, 18 Apr 2020 16:16:43 -0400
Subject: [PATCH 16/17] Refactor SCSS

---
 lib/better_errors/templates/main.css |   2 +-
 style/main.scss                      | 463 ++++++++++-----------------
 style/syntax_highlighting.scss       |  83 +++++
 3 files changed, 257 insertions(+), 291 deletions(-)
 create mode 100644 style/syntax_highlighting.scss

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 71e1c9cc..99b806cc 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -1 +1 @@
-*{margin:0;padding:0}table{width:100%;border-collapse:collapse}th,td{vertical-align:top;text-align:left}textarea{resize:none}body{font-size:10pt}body,td,input,textarea{font-family:helvetica neue, lucida grande, sans-serif;line-height:1.5;color:#333}html{background:white}.clearfix::after{clear:both;content:".";display:block;height:0;visibility:hidden}@media screen and (max-width: 1100px){html{overflow-y:scroll}body{margin:0 20px}header.exception{margin:0 -20px}nav.sidebar{padding:0;margin:20px 0}ul.frames{max-height:200px}}@media screen and (min-width: 1100px){header.exception{position:fixed;top:0;left:0;right:0}nav.sidebar,.frame_info{position:fixed;top:95px;bottom:0;box-sizing:border-box}nav.sidebar{width:40%;left:0}ul.frames{position:absolute;top:36px;bottom:0;left:0;right:0}.frame_info{right:0;left:40%;border-left:5px solid #38a;overflow-y:auto;overflow-x:hidden}}ul.frames{overflow:auto}header.exception{padding:18px 20px;height:59px;min-height:59px;overflow:hidden;background-color:#20202a;color:#aaa;font-weight:200;-webkit-text-smoothing:antialiased}header.exception h2{font-weight:200;font-size:11pt}header.exception h2,header.exception p{line-height:1.4em;overflow:hidden;white-space:pre;text-overflow:ellipsis}header.exception h2 strong{font-weight:700;color:#d55}header.exception p{font-weight:200;font-size:20pt;color:white}header.exception:hover{height:auto;z-index:2}header.exception:hover h2,header.exception:hover p{padding-right:20px;overflow-y:auto;word-wrap:break-word;white-space:pre-wrap;height:auto;max-height:7.5em}@media screen and (max-width: 1100px){header.exception{height:auto}header.exception h2,header.exception p{padding-right:20px;overflow-y:auto;word-wrap:break-word;height:auto;max-height:7em}}nav.segmented{border-bottom:solid 1px #ddd;text-align:center;padding:6px}nav.segmented a{display:inline-block;height:22px;line-height:22px;padding:0 10px;text-decoration:none;font-size:8pt;font-weight:bold;color:#38a;border:1px solid #38a}nav.segmented a:first-child{border-right:0;border-top-left-radius:8px;border-bottom-left-radius:8px}nav.segmented a:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}nav.segmented a.selected{color:white;background:#38a}nav.segmented a.disabled{text-decoration:line-through;cursor:default}ul.frames li{padding:7px 20px;border-bottom:1pt solid #eee;cursor:pointer;overflow:hidden}ul.frames li .name,ul.frames li .location{overflow:hidden;height:1.5em;white-space:nowrap;word-wrap:none;text-overflow:ellipsis}ul.frames li .method{color:#666}ul.frames li .location{font-size:0.85em;font-weight:400;color:#999}ul.frames li .line{font-weight:bold}ul.frames li .chevron{float:right;margin-right:-10px;color:#ccc;font-size:24px;line-height:34px}@media screen and (max-width: 1100px){ul.frames li .chevron{display:none}}ul.frames li.selected{background:#38a}ul.frames li.selected .name,ul.frames li.selected .method,ul.frames li.selected .location,ul.frames li.selected .chevron{color:white}ul.frames li{padding-left:60px;position:relative}ul.frames li .icon{display:block;width:20px;height:20px;line-height:20px;border-radius:15px;text-align:center;background:white;border:solid 2px #ccc;font-size:9pt;font-weight:200;font-style:normal;position:absolute;top:14px;left:20px}ul.frames .icon.application{background:#808090;border-color:#555}ul.frames .icon.application:before{content:'A';color:white}@media screen and (max-width: 1100px){ul.frames li{padding-top:6px;padding-bottom:6px;padding-left:36px;line-height:1.3}ul.frames li .icon{width:11px;height:11px;line-height:11px;top:7px;left:10px;font-size:5pt}ul.frames .name,ul.frames .location{display:inline-block;line-height:1.3;height:1.3em}ul.frames .name{margin-right:10px}}pre,code,.be-repl .command-line input,.be-repl .command-line .prompt,.be-repl .output .command,textarea,.code_linenums,.title .name,ul.frames li .method{font-family:menlo, lucida console, monospace}.code_block{background:#f1f1f1;padding-bottom:1px}.trace_info .title{background:#38a;color:white;overflow:hidden;padding:5px 10px}@media screen and (min-width: 1100px){.trace_info .title{padding:5px 10px 5px 0}}.trace_info .title .name,.trace_info .title .location{font-size:9pt;line-height:26px;height:26px;overflow:hidden}.trace_info .title .location{float:left;font-weight:bold;font-size:10pt}.trace_info .title .location a{color:white;text-decoration:none}.trace_info .title .location a .filename{text-decoration:underline}.trace_info .title .location a:hover{border-color:#666666}.trace_info .title .name{float:right;font-weight:200}.code_linenums{background:#f1f1f1;padding-top:10px;padding-bottom:9px;float:left}.code_linenums pre{padding:0 6px}.code{margin-bottom:-1px;border-top-left-radius:2px;padding:10px 0;overflow:auto}.code pre{padding-left:12px}.code pre,.code_linenums pre{font-size:11px;min-height:16px}p.unavailable{padding:20px 0 40px 0;text-align:center;color:#b99;font-weight:bold}p.unavailable:before{content:'\00d7';display:block;color:#daa;text-align:center;font-size:40pt;font-weight:normal;margin-bottom:-10px}@-webkit-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@-moz-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}.code .highlight,.code_linenums .highlight{background:rgba(220,30,30,0.1);-webkit-animation:highlight 400ms linear 1;-moz-animation:highlight 400ms linear 1;animation:highlight 400ms linear 1}h3{background-color:#38a;color:white;padding:4px;font-size:8pt;-webkit-font-smoothing:antialiased}.be-console{background-color:#002B36;color:white}.be-console .output{max-height:15rem;overflow-x:hidden;overflow-y:auto;padding:8px;border-bottom:1px solid #ccc}.be-console .output:not(.used){padding:0;border-bottom:0}@media screen and (min-height: 800px){.be-console .output{max-height:25rem}}.be-console .output pre,.be-console .output h4{font-size:9pt;word-wrap:break-word;white-space:pre-wrap;width:100%}.be-console .output h4{padding:8px;margin-top:10px}.be-console .output h4:first-child{margin-top:0}.be-console .output h4,.be-console .command-line{background-color:#555}.be-console .output pre{padding:8px}.be-console .command-line{display:table;padding:8px 0}.be-console .command-line .prompt,.be-console .command-line input{display:table-cell;line-height:12px;font-size:9pt}.be-console .command-line .prompt{width:1%;padding-right:5px;padding-left:10px;white-space:pre}.be-console .command-line input{width:99%}.be-console input,.be-console input:focus{outline:0;border:0;padding:0;background:transparent;margin:0;color:inherit}.hint{margin:15px 0 20px 0;font-size:8pt;color:#8080a0;padding-left:20px}.variables h4{margin-top:5px;padding-left:5px;font-weight:bold;font-size:9pt;word-wrap:break-word}.variables pre{max-height:15em;overflow-y:auto;font-size:9pt;word-wrap:break-word;white-space:normal;margin-left:2rem;border-bottom:1px dotted #ddd}.variables .unsupported{display:block;font-family:sans-serif;color:#777}nav.sidebar::-webkit-scrollbar,.inset pre::-webkit-scrollbar,.be-console pre::-webkit-scrollbar,.code::-webkit-scrollbar{width:10px;height:10px}.inset pre::-webkit-scrollbar-thumb,.be-console pre::-webkit-scrollbar-thumb,.code::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}nav.sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,0);border-radius:5px}nav.sidebar:hover::-webkit-scrollbar-thumb{background-color:#999;background:-webkit-linear-gradient(left, #aaa, #999)}.be-console pre:hover::-webkit-scrollbar-thumb,.inset pre:hover::-webkit-scrollbar-thumb,.code:hover::-webkit-scrollbar-thumb{background:#888}.CodeRay .debug{color:#fff;background:#00f}.CodeRay .annotation{color:#586E75}.CodeRay .attribute-name{color:#93A1A1}.CodeRay .attribute-value{color:#93A1A1}.CodeRay .binary{color:#509}.CodeRay .char .content{color:#d20}.CodeRay .char .delimiter{color:#710}.CodeRay .char{color:#2AA198}.CodeRay .class{color:#268BD2;font-weight:bold}.CodeRay .class-variable{color:#268BD2}.CodeRay .color{color:#eee8d5}.CodeRay .comment{color:#586E75}.CodeRay .comment .char{color:#859900}.CodeRay .comment .delimiter{color:#859900}.CodeRay .complex{color:#a08}.CodeRay .constant{color:#B58900;font-weight:bold}.CodeRay .decorator{color:#268BD2}.CodeRay .definition{color:#099;font-weight:bold}.CodeRay .delimiter{color:#000}.CodeRay .directive{color:#088;font-weight:bold}.CodeRay .doc{color:#93A1A1}.CodeRay .doc-string{color:#93A1A1;font-weight:bold}.CodeRay .doctype{color:#DC322F}.CodeRay .entity{color:#CB4B16;font-weight:bold}.CodeRay .error{color:#93A1A1;background-color:#faa}.CodeRay .escape{color:#CB4B16}.CodeRay .exception{color:#CB4B16;font-weight:bold}.CodeRay .float{color:#2AA198}.CodeRay .function{color:#268BD2;font-weight:bold}.CodeRay .global-variable{color:#268BD2}.CodeRay .hex{color:#2AA198}.CodeRay .imaginary{color:#f00}.CodeRay .include{color:#b44;font-weight:bold}.CodeRay .inline{background-color:transparent;color:#93A1A1 !important}.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}.CodeRay .instance-variable{color:#268BD2}.CodeRay .integer{color:#2AA198}.CodeRay .key .char{color:#DC322F}.CodeRay .key .delimiter{color:#268BD2}.CodeRay .key{color:#859900}.CodeRay .keyword{color:#859900;font-weight:bold}.CodeRay .label{color:#93A1A1;font-weight:bold}.CodeRay .local-variable{color:#268BD2}.CodeRay .namespace{color:#859900;font-weight:bold}.CodeRay .octal{color:#2AA198}.CodeRay .operator,.predefined{color:#859900;font-weight:bold}.CodeRay .predefined-constant{color:#2AA198}.CodeRay .predefined-type{color:#DC322F;font-weight:bold}.CodeRay .preprocessor{color:#859900}.CodeRay .pseudo-class{color:#859900;font-weight:bold}.CodeRay .regexp .content{color:#2AA198}.CodeRay .regexp .delimiter{color:#DC322F}.CodeRay .regexp .modifier{color:#CB4B16}.CodeRay .regexp{background-color:transparent}.CodeRay .reserved{color:#268BD2;font-weight:bold}.CodeRay .shell .content{color:#2b2}.CodeRay .shell .delimiter{color:#161}.CodeRay .shell{background-color:transparent}.CodeRay .string .char{color:#2AA198}.CodeRay .string .content{color:#2AA198}.CodeRay .string .delimiter{color:#DC322F}.CodeRay .string .modifier{color:#2AA198}.CodeRay .string{background-color:transparent}.CodeRay .symbol .content{color:#2AA198}.CodeRay .symbol .delimiter{color:#2AA198}.CodeRay .symbol{color:#2AA198}.CodeRay .tag{color:#268BD2}.CodeRay .type{color:#DC322F;font-weight:bold}.CodeRay .value{color:#268BD2}.CodeRay .variable{color:#268BD2}.CodeRay .insert{background:transparent}.CodeRay .delete{background:transparent}.CodeRay .change{color:#CB4B16;background:transparent}.CodeRay .head{color:#CB4B16;background:transparent}.CodeRay .head .filename{color:#CB4B16}.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}.CodeRay .change .change{color:#CB4B16}.CodeRay .head .head{color:#CB4B16}
+.CodeRay .debug{color:#fff;background:#00f}.CodeRay .annotation{color:#586E75}.CodeRay .attribute-name{color:#93A1A1}.CodeRay .attribute-value{color:#93A1A1}.CodeRay .binary{color:#509}.CodeRay .char .content{color:#d20}.CodeRay .char .delimiter{color:#710}.CodeRay .char{color:#2AA198}.CodeRay .class{color:#268BD2;font-weight:bold}.CodeRay .class-variable{color:#268BD2}.CodeRay .color{color:#eee8d5}.CodeRay .comment{color:#586E75}.CodeRay .comment .char{color:#859900}.CodeRay .comment .delimiter{color:#859900}.CodeRay .complex{color:#a08}.CodeRay .constant{color:#B58900;font-weight:bold}.CodeRay .decorator{color:#268BD2}.CodeRay .definition{color:#099;font-weight:bold}.CodeRay .delimiter{color:#000}.CodeRay .directive{color:#088;font-weight:bold}.CodeRay .doc{color:#93A1A1}.CodeRay .doc-string{color:#93A1A1;font-weight:bold}.CodeRay .doctype{color:#DC322F}.CodeRay .entity{color:#CB4B16;font-weight:bold}.CodeRay .error{color:#93A1A1;background-color:#faa}.CodeRay .escape{color:#CB4B16}.CodeRay .exception{color:#CB4B16;font-weight:bold}.CodeRay .float{color:#2AA198}.CodeRay .function{color:#268BD2;font-weight:bold}.CodeRay .global-variable{color:#268BD2}.CodeRay .hex{color:#2AA198}.CodeRay .imaginary{color:#f00}.CodeRay .include{color:#b44;font-weight:bold}.CodeRay .inline{background-color:transparent;color:#93A1A1 !important}.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}.CodeRay .instance-variable{color:#268BD2}.CodeRay .integer{color:#2AA198}.CodeRay .key .char{color:#DC322F}.CodeRay .key .delimiter{color:#268BD2}.CodeRay .key{color:#859900}.CodeRay .keyword{color:#859900;font-weight:bold}.CodeRay .label{color:#93A1A1;font-weight:bold}.CodeRay .local-variable{color:#268BD2}.CodeRay .namespace{color:#859900;font-weight:bold}.CodeRay .octal{color:#2AA198}.CodeRay .operator,.CodeRay .predefined{color:#859900;font-weight:bold}.CodeRay .predefined-constant{color:#2AA198}.CodeRay .predefined-type{color:#DC322F;font-weight:bold}.CodeRay .preprocessor{color:#859900}.CodeRay .pseudo-class{color:#859900;font-weight:bold}.CodeRay .regexp .content{color:#2AA198}.CodeRay .regexp .delimiter{color:#DC322F}.CodeRay .regexp .modifier{color:#CB4B16}.CodeRay .regexp{background-color:transparent}.CodeRay .reserved{color:#268BD2;font-weight:bold}.CodeRay .shell .content{color:#2b2}.CodeRay .shell .delimiter{color:#161}.CodeRay .shell{background-color:transparent}.CodeRay .string .char{color:#2AA198}.CodeRay .string .content{color:#2AA198}.CodeRay .string .delimiter{color:#DC322F}.CodeRay .string .modifier{color:#2AA198}.CodeRay .string{background-color:transparent}.CodeRay .symbol .content{color:#2AA198}.CodeRay .symbol .delimiter{color:#2AA198}.CodeRay .symbol{color:#2AA198}.CodeRay .tag{color:#268BD2}.CodeRay .type{color:#DC322F;font-weight:bold}.CodeRay .value{color:#268BD2}.CodeRay .variable{color:#268BD2}.CodeRay .insert{background:transparent}.CodeRay .delete{background:transparent}.CodeRay .change{color:#CB4B16;background:transparent}.CodeRay .head{color:#CB4B16;background:transparent}.CodeRay .head .filename{color:#CB4B16}.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}.CodeRay .change .change{color:#CB4B16}.CodeRay .head .head{color:#CB4B16}*{margin:0;padding:0}table{width:100%;border-collapse:collapse}th,td{vertical-align:top;text-align:left}textarea{resize:none}body{font-size:10pt}body,td,input,textarea{font-family:helvetica neue, lucida grande, sans-serif;line-height:1.5;color:#333}html{background:white}.clearfix::after{clear:both;content:".";display:block;height:0;visibility:hidden}@media screen and (max-width: 1100px){html{overflow-y:scroll}body{margin:0 20px}header.exception{margin:0 -20px}nav.sidebar{padding:0;margin:20px 0}ul.frames{max-height:200px}}@media screen and (min-width: 1100px){header.exception{position:fixed;top:0;left:0;right:0}nav.sidebar,.frame_info{position:fixed;top:95px;bottom:0;box-sizing:border-box}nav.sidebar{width:40%;left:0}ul.frames{position:absolute;top:36px;bottom:0;left:0;right:0}.frame_info{right:0;left:40%;border-left:5px solid #38a;overflow-y:auto;overflow-x:hidden}}ul.frames{overflow:auto}header.exception{padding:18px 20px;height:59px;min-height:59px;overflow:hidden;background-color:#20202a;color:#aaa;font-weight:200;-webkit-text-smoothing:antialiased}header.exception h2{font-weight:200;font-size:11pt}header.exception h2,header.exception p{line-height:1.4em;overflow:hidden;white-space:pre;text-overflow:ellipsis}header.exception h2 strong{font-weight:700;color:#d55}header.exception p{font-weight:200;font-size:20pt;color:white}header.exception:hover{height:auto;z-index:2}header.exception:hover h2,header.exception:hover p{padding-right:20px;overflow-y:auto;word-wrap:break-word;white-space:pre-wrap;height:auto;max-height:7.5em}@media screen and (max-width: 1100px){header.exception{height:auto}header.exception h2,header.exception p{padding-right:20px;overflow-y:auto;word-wrap:break-word;height:auto;max-height:7em}}nav.segmented{border-bottom:solid 1px #ddd;text-align:center;padding:6px}nav.segmented a{display:inline-block;height:22px;line-height:22px;padding:0 10px;text-decoration:none;font-size:8pt;font-weight:bold;color:#38a;border:1px solid #38a}nav.segmented a:first-child{border-right:0;border-top-left-radius:8px;border-bottom-left-radius:8px}nav.segmented a:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}nav.segmented a.selected{color:white;background:#38a}nav.segmented a.disabled{text-decoration:line-through;cursor:default}ul.frames li{padding:7px 20px;border-bottom:1pt solid #eee;cursor:pointer;overflow:hidden}ul.frames li .name,ul.frames li .location{overflow:hidden;height:1.5em;white-space:nowrap;word-wrap:none;text-overflow:ellipsis}ul.frames li .method{color:#666}ul.frames li .location{font-size:0.85em;font-weight:400;color:#999}ul.frames li .line{font-weight:bold}ul.frames li .chevron{float:right;margin-right:-10px;color:#ccc;font-size:24px;line-height:34px}@media screen and (max-width: 1100px){ul.frames li .chevron{display:none}}ul.frames li.selected{background:#38a}ul.frames li.selected .name,ul.frames li.selected .method,ul.frames li.selected .location,ul.frames li.selected .chevron{color:white}ul.frames li{padding-left:60px;position:relative}ul.frames li .icon{display:block;width:20px;height:20px;line-height:20px;border-radius:15px;text-align:center;background:white;border:solid 2px #ccc;font-size:9pt;font-weight:200;font-style:normal;position:absolute;top:14px;left:20px}ul.frames .icon.application{background:#808090;border-color:#555}ul.frames .icon.application:before{content:'A';color:white}@media screen and (max-width: 1100px){ul.frames li{padding-top:6px;padding-bottom:6px;padding-left:36px;line-height:1.3}ul.frames li .icon{width:11px;height:11px;line-height:11px;top:7px;left:10px;font-size:5pt}ul.frames .name,ul.frames .location{display:inline-block;line-height:1.3;height:1.3em}ul.frames .name{margin-right:10px}}pre,code,.be-repl .command-line input,.be-repl .command-line .prompt,.be-repl .output .command,textarea,.code_linenums,.title .name,ul.frames li .method{font-family:menlo, lucida console, monospace}.trace_info .title{background:#38a;color:white;overflow:hidden;padding:5px 10px}@media screen and (min-width: 1100px){.trace_info .title{padding:5px 10px 5px 0}}.trace_info .title .name,.trace_info .title .location{font-size:9pt;line-height:26px;height:26px;overflow:hidden}.trace_info .title .location{float:left;font-weight:bold;font-size:10pt}.trace_info .title .location a{color:white;text-decoration:none}.trace_info .title .location a .filename{text-decoration:underline}.trace_info .title .location a:hover{border-color:#666666}.trace_info .title .name{float:right;font-weight:200}.trace_info .code_block{background:#f1f1f1;padding-bottom:1px}.code_linenums{background:#f1f1f1;padding-top:10px;padding-bottom:9px;float:left}.code_linenums pre{padding:0 6px}.code{margin-bottom:-1px;border-top-left-radius:2px;padding:10px 0;overflow:auto}.code pre{padding-left:12px}.code pre,.code_linenums pre{font-size:11px;min-height:16px}.code .highlight,.code_linenums .highlight{background:rgba(220,30,30,0.1);-webkit-animation:highlight 400ms linear 1;-moz-animation:highlight 400ms linear 1;animation:highlight 400ms linear 1}p.unavailable{padding:20px 0 40px 0;text-align:center;color:#b99;font-weight:bold}p.unavailable:before{content:'\00d7';display:block;color:#daa;text-align:center;font-size:40pt;font-weight:normal;margin-bottom:-10px}@-webkit-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@-moz-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}h3{background-color:#38a;color:white;padding:4px;font-size:8pt;-webkit-font-smoothing:antialiased}.be-console{background-color:#002B36;color:white}.be-console .output{max-height:15rem;overflow-x:hidden;overflow-y:auto;padding:8px;border-bottom:1px solid #ccc}.be-console .output:not(.used){padding:0;border-bottom:0}@media screen and (min-height: 800px){.be-console .output{max-height:25rem}}.be-console .output pre,.be-console .output h4{font-size:9pt;word-wrap:break-word;white-space:pre-wrap;width:100%}.be-console .output h4{padding:8px;margin-top:10px;background-color:#555}.be-console .output h4:first-child{margin-top:0}.be-console .output pre{padding:8px}.be-console .command-line{display:table;padding:8px 0;background-color:#555}.be-console .command-line .prompt,.be-console .command-line input{display:table-cell;line-height:12px;font-size:9pt}.be-console .command-line .prompt{width:1%;padding-right:5px;padding-left:10px;white-space:pre}.be-console .command-line input{width:99%}.be-console input,.be-console input:focus{outline:0;border:0;padding:0;background:transparent;margin:0;color:inherit}.hint{margin:15px 0 20px 0;font-size:8pt;color:#8080a0;padding-left:20px}.variables h4{margin-top:5px;padding-left:5px;font-weight:bold;font-size:9pt;word-wrap:break-word}.variables pre{max-height:15em;overflow-y:auto;font-size:9pt;word-wrap:break-word;white-space:normal;margin-left:2rem;border-bottom:1px dotted #ddd}.variables .unsupported{display:block;font-family:sans-serif;color:#777}
diff --git a/style/main.scss b/style/main.scss
index c3e86d5b..cd0ec4cd 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,3 +1,5 @@
+@import "syntax_highlighting";
+
 /* Basic reset */
 * {
   margin: 0;
@@ -373,63 +375,66 @@ ul.frames .icon.application:before {
  * Monospace
  * --------------------------------------------------------------------- */
 
-pre, code, .be-repl .command-line input, .be-repl .command-line .prompt, .be-repl .output .command, textarea, .code_linenums, .title .name,
+pre,
+code,
+.be-repl .command-line input,
+.be-repl .command-line .prompt,
+.be-repl .output .command,
+textarea,
+.code_linenums,
+.title .name,
 ul.frames li .method {
   font-family: menlo, lucida console, monospace;
 }
 
-/* ---------------------------------------------------------------------
- * Display area
- * --------------------------------------------------------------------- */
-
-.code_block {
-  background: #f1f1f1;
-  padding-bottom: 1px;
-}
-
-/* Titlebar */
-.trace_info .title {
-  background: #38a;
-  color: white;
-
-  overflow: hidden;
-  padding: 5px 10px;
-}
-@media screen and (min-width: 1100px) {
-  .trace_info .title {
-    padding: 5px 10px 5px 0;
+.trace_info {
+  .title {
+    background: #38a;
+    color: white;
+
+    overflow: hidden;
+    padding: 5px 10px;
+
+    @media screen and (min-width: 1100px) {
+      padding: 5px 10px 5px 0;
+    }
+
+    .name, .location {
+      font-size: 9pt;
+      line-height: 26px;
+      height: 26px;
+      overflow: hidden;
+    }
+
+    .location {
+      float: left;
+      font-weight: bold;
+      font-size: 10pt;
+
+      a {
+        color: white;
+        text-decoration: none;
+
+        .filename {
+          text-decoration: underline;
+        }
+
+        &:hover {
+          border-color:#666666;
+        }
+      }
+    }
+
+    .name {
+      float: right;
+      font-weight: 200;
+    }
   }
-}
-
-.trace_info .title .name,
-.trace_info .title .location {
-  font-size: 9pt;
-  line-height: 26px;
-  height: 26px;
-  overflow: hidden;
-}
-
-.trace_info .title .location {
-  float: left;
-  font-weight: bold;
-  font-size: 10pt;
-}
-
-.trace_info .title .location a {
-  color:white;
-  text-decoration: none;
-}
-.trace_info .title .location a .filename {
-  text-decoration: underline;
-}
 
-.trace_info .title .location a:hover {
-  border-color:#666666;
-}
-
-.trace_info .title .name {
-  float: right;
-  font-weight: 200;
+  .code_block {
+    background: #f1f1f1;
+    padding-bottom: 1px;
+  }
 }
 
 .code_linenums{
@@ -437,10 +442,10 @@ ul.frames li .method {
   padding-top:10px;
   padding-bottom:9px;
   float:left;
-}
 
-.code_linenums pre{
-  padding:0 6px;
+  pre{
+    padding: 0 6px;
+  }
 }
 
 .code {
@@ -448,15 +453,24 @@ ul.frames li .method {
   border-top-left-radius:2px;
   padding: 10px 0;
   overflow: auto;
-}
 
-.code pre{
-  padding-left:12px;
+  pre {
+    padding-left:12px;
+  }
 }
 
-.code pre, .code_linenums pre {
-  font-size: 11px;
-  min-height:16px;
+.code, .code_linenums {
+  pre {
+    font-size: 11px;
+    min-height: 16px;
+  }
+
+  .highlight {
+    background: rgba(220, 30, 30, 0.1);
+    -webkit-animation: highlight 400ms linear 1;
+    -moz-animation: highlight 400ms linear 1;
+    animation: highlight 400ms linear 1;
+  }
 }
 
 /* Source unavailable */
@@ -465,18 +479,18 @@ p.unavailable {
   text-align: center;
   color: #b99;
   font-weight: bold;
-}
 
-p.unavailable:before {
-  content: '\00d7';
-  display: block;
+  &:before {
+    content: '\00d7';
+    display: block;
 
-  color: #daa;
+    color: #daa;
 
-  text-align: center;
-  font-size: 40pt;
-  font-weight: normal;
-  margin-bottom: -10px;
+    text-align: center;
+    font-size: 40pt;
+    font-weight: normal;
+    margin-bottom: -10px;
+  }
 }
 
 @-webkit-keyframes highlight {
@@ -492,13 +506,6 @@ p.unavailable:before {
   100% { background: rgba(220, 30, 30, 0.1); }
 }
 
-.code .highlight, .code_linenums .highlight {
-  background: rgba(220, 30, 30, 0.1);
-  -webkit-animation: highlight 400ms linear 1;
-  -moz-animation: highlight 400ms linear 1;
-  animation: highlight 400ms linear 1;
-}
-
 h3 {
   background-color: #38a;
   color: white;
@@ -508,88 +515,83 @@ h3 {
   -webkit-font-smoothing: antialiased;
 }
 
-/* REPL shell */
 .be-console {
   background-color: #002B36;
   color: white;
-}
 
-.be-console .output {
-  max-height: 15rem;
-  overflow-x: hidden;
-  overflow-y: auto;
+  .output {
+    max-height: 15rem;
+    overflow-x: hidden;
+    overflow-y: auto;
 
-  padding: 8px;
-  border-bottom: 1px solid #ccc;
-}
-.be-console .output:not(.used) {
-  padding: 0;
-  border-bottom: 0;
-}
-@media screen and (min-height: 800px) {
-  .be-console .output {
-    max-height: 25rem;
+    padding: 8px;
+    border-bottom: 1px solid #ccc;
+
+    &:not(.used) {
+      padding: 0;
+      border-bottom: 0;
+    }
+    @media screen and (min-height: 800px) {
+      max-height: 25rem;
+    }
+
+    pre, h4 {
+      font-size: 9pt;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      width: 100%;
+    }
+    h4 {
+      padding: 8px;
+      margin-top: 10px;
+      background-color: #555;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    pre {
+      padding: 8px;
+    }
   }
-}
 
-.be-console .output pre, .be-console .output h4 {
-  font-size: 9pt;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  width: 100%;
-}
-.be-console .output h4 {
-  padding: 8px;
-  margin-top: 10px;
-}
-.be-console .output h4:first-child {
-  margin-top: 0;
-}
-
-.be-console .output h4, .be-console .command-line {
-  background-color: #555;
-}
-
-.be-console .output pre {
-  padding: 8px;
-}
-
-/* .command-line > span + input */
-.be-console .command-line {
-  display: table;
-  padding: 8px 0;
-}
-
-.be-console .command-line .prompt,
-.be-console .command-line input {
-  display: table-cell;
-  line-height: 12px;
-  font-size: 9pt;
-}
-
-.be-console .command-line .prompt {
-  width: 1%;
-  padding-right: 5px;
-  padding-left: 10px;
-  white-space: pre;
-}
-
-.be-console .command-line input {
-  width: 99%;
-}
+  /* .command-line > span + input */
+  .command-line {
+    display: table;
+    padding: 8px 0;
+    background-color: #555;
+
+    .prompt,
+    input {
+      display: table-cell;
+      line-height: 12px;
+      font-size: 9pt;
+    }
+
+    .prompt {
+      width: 1%;
+      padding-right: 5px;
+      padding-left: 10px;
+      white-space: pre;
+    }
+
+    input {
+      width: 99%;
+    }
+  }
 
-/* Input box */
-.be-console input,
-.be-console input:focus {
-  outline: 0;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  margin: 0;
-  color: inherit;
+  /* Input box */
+  input,
+  input:focus {
+    outline: 0;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    margin: 0;
+    color: inherit;
+  }
 }
 
-/* Hint text */
 .hint {
   margin: 15px 0 20px 0;
   font-size: 8pt;
@@ -597,153 +599,34 @@ h3 {
   padding-left: 20px;
 }
 
-/* ---------------------------------------------------------------------
- * Variable infos
- * --------------------------------------------------------------------- */
-
-.variables h4 {
-  margin-top: 5px;
-  padding-left: 5px;
+.variables {
+  h4 {
+    margin-top: 5px;
+    padding-left: 5px;
 
-  font-weight: bold;
-  font-size: 9pt;
+    font-weight: bold;
+    font-size: 9pt;
 
-  word-wrap: break-word;
-}
+    word-wrap: break-word;
+  }
 
-.variables pre {
-  max-height: 15em;
-  overflow-y: auto;
+  pre {
+    max-height: 15em;
+    overflow-y: auto;
 
-  font-size: 9pt;
-  word-wrap: break-word;
-  white-space: normal;
+    font-size: 9pt;
+    word-wrap: break-word;
+    white-space: normal;
 
-  margin-left: 2rem;
-  border-bottom: 1px dotted #ddd;
-}
+    margin-left: 2rem;
+    border-bottom: 1px dotted #ddd;
+  }
 
-/* "(object doesn't support inspect)" */
-.variables .unsupported {
-  display: block;
-  font-family: sans-serif;
-  color: #777;
+  /* "(object doesn't support inspect)" */
+  .unsupported {
+    display: block;
+    font-family: sans-serif;
+    color: #777;
+  }
 }
 
-/* ---------------------------------------------------------------------
- * Scrollbar
- * --------------------------------------------------------------------- */
-
-nav.sidebar::-webkit-scrollbar,
-.inset pre::-webkit-scrollbar,
-.be-console pre::-webkit-scrollbar,
-.code::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-.inset pre::-webkit-scrollbar-thumb,
-.be-console pre::-webkit-scrollbar-thumb,
-.code::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 5px;
-}
-
-nav.sidebar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.0);
-  border-radius: 5px;
-}
-
-nav.sidebar:hover::-webkit-scrollbar-thumb {
-  background-color: #999;
-  background: -webkit-linear-gradient(left, #aaa, #999);
-}
-
-.be-console pre:hover::-webkit-scrollbar-thumb,
-.inset pre:hover::-webkit-scrollbar-thumb,
-.code:hover::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-
-.CodeRay .debug{color:#fff;background:#00f}
-.CodeRay .annotation{color:#586E75}
-.CodeRay .attribute-name{color:#93A1A1}
-.CodeRay .attribute-value{color:#93A1A1}
-.CodeRay .binary{color:#509}
-.CodeRay .char .content{color:#d20}
-.CodeRay .char .delimiter{color:#710}
-.CodeRay .char{color:#2AA198}
-.CodeRay .class{color:#268BD2;font-weight:bold}
-.CodeRay .class-variable{color:#268BD2}
-.CodeRay .color{color:#eee8d5}
-.CodeRay .comment{color:#586E75}
-.CodeRay .comment .char{color:#859900}
-.CodeRay .comment .delimiter{color:#859900}
-.CodeRay .complex{color:#a08}
-.CodeRay .constant{color:#B58900;font-weight:bold}
-.CodeRay .decorator{color:#268BD2}
-.CodeRay .definition{color:#099;font-weight:bold}
-.CodeRay .delimiter{color:#000}
-.CodeRay .directive{color:#088;font-weight:bold}
-.CodeRay .doc{color:#93A1A1}
-.CodeRay .doc-string{color:#93A1A1;font-weight:bold}
-.CodeRay .doctype{color:#DC322F}
-.CodeRay .entity{color:#CB4B16;font-weight:bold}
-.CodeRay .error{color:#93A1A1;background-color:#faa}
-.CodeRay .escape{color:#CB4B16}
-.CodeRay .exception{color:#CB4B16;font-weight:bold}
-.CodeRay .float{color:#2AA198}
-.CodeRay .function{color:#268BD2;font-weight:bold}
-.CodeRay .global-variable{color:#268BD2}
-.CodeRay .hex{color:#2AA198}
-.CodeRay .imaginary{color:#f00}
-.CodeRay .include{color:#b44;font-weight:bold}
-.CodeRay .inline{background-color:transparent;color:#93A1A1!important}
-.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}
-.CodeRay .instance-variable{color:#268BD2}
-.CodeRay .integer{color:#2AA198}
-.CodeRay .key .char{color:#DC322F}
-.CodeRay .key .delimiter{color:#268BD2}
-.CodeRay .key{color:#859900}
-.CodeRay .keyword{color:#859900;font-weight:bold}
-.CodeRay .label{color:#93A1A1;font-weight:bold}
-.CodeRay .local-variable{color:#268BD2}
-.CodeRay .namespace{color:#859900;font-weight:bold}
-.CodeRay .octal{color:#2AA198}
-.CodeRay .operator, .predefined{color:#859900;font-weight:bold}
-.CodeRay .predefined-constant{color:#2AA198}
-.CodeRay .predefined-type{color:#DC322F;font-weight:bold}
-.CodeRay .preprocessor{color:#859900}
-.CodeRay .pseudo-class{color:#859900;font-weight:bold}
-.CodeRay .regexp .content{color:#2AA198}
-.CodeRay .regexp .delimiter{color:#DC322F}
-.CodeRay .regexp .modifier{color:#CB4B16}
-.CodeRay .regexp{background-color:transparent}
-.CodeRay .reserved{color:#268BD2;font-weight:bold}
-.CodeRay .shell .content{color:#2b2}
-.CodeRay .shell .delimiter{color:#161}
-.CodeRay .shell{background-color:transparent}
-.CodeRay .string .char{color:#2AA198}
-.CodeRay .string .content{color:#2AA198}
-.CodeRay .string .delimiter{color:#DC322F}
-.CodeRay .string .modifier{color:#2AA198}
-.CodeRay .string{background-color:transparent}
-.CodeRay .symbol .content{color:#2AA198}
-.CodeRay .symbol .delimiter{color:#2AA198}
-.CodeRay .symbol{color:#2AA198}
-.CodeRay .tag{color: #268BD2}
-.CodeRay .type{color:#DC322F;font-weight:bold}
-.CodeRay .value{color:#268BD2}
-.CodeRay .variable{color:#268BD2}
-.CodeRay .insert{background:transparent}
-.CodeRay .delete{background:transparent}
-.CodeRay .change{color:#CB4B16;background:transparent}
-.CodeRay .head{color:#CB4B16;background:transparent}
-.CodeRay .head .filename{color:#CB4B16}
-.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
-.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
-.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
-.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}
-.CodeRay .change .change{color:#CB4B16}
-.CodeRay .head .head{color:#CB4B16}
diff --git a/style/syntax_highlighting.scss b/style/syntax_highlighting.scss
new file mode 100644
index 00000000..5950edf5
--- /dev/null
+++ b/style/syntax_highlighting.scss
@@ -0,0 +1,83 @@
+.CodeRay {
+  .debug{color:#fff;background:#00f}
+  .annotation{color:#586E75}
+  .attribute-name{color:#93A1A1}
+  .attribute-value{color:#93A1A1}
+  .binary{color:#509}
+  .char .content{color:#d20}
+  .char .delimiter{color:#710}
+  .char{color:#2AA198}
+  .class{color:#268BD2;font-weight:bold}
+  .class-variable{color:#268BD2}
+  .color{color:#eee8d5}
+  .comment{color:#586E75}
+  .comment .char{color:#859900}
+  .comment .delimiter{color:#859900}
+  .complex{color:#a08}
+  .constant{color:#B58900;font-weight:bold}
+  .decorator{color:#268BD2}
+  .definition{color:#099;font-weight:bold}
+  .delimiter{color:#000}
+  .directive{color:#088;font-weight:bold}
+  .doc{color:#93A1A1}
+  .doc-string{color:#93A1A1;font-weight:bold}
+  .doctype{color:#DC322F}
+  .entity{color:#CB4B16;font-weight:bold}
+  .error{color:#93A1A1;background-color:#faa}
+  .escape{color:#CB4B16}
+  .exception{color:#CB4B16;font-weight:bold}
+  .float{color:#2AA198}
+  .function{color:#268BD2;font-weight:bold}
+  .global-variable{color:#268BD2}
+  .hex{color:#2AA198}
+  .imaginary{color:#f00}
+  .include{color:#b44;font-weight:bold}
+  .inline{background-color:transparent;color:#93A1A1!important}
+  .inline-delimiter{font-weight:bold;color:#DC322F}
+  .instance-variable{color:#268BD2}
+  .integer{color:#2AA198}
+  .key .char{color:#DC322F}
+  .key .delimiter{color:#268BD2}
+  .key{color:#859900}
+  .keyword{color:#859900;font-weight:bold}
+  .label{color:#93A1A1;font-weight:bold}
+  .local-variable{color:#268BD2}
+  .namespace{color:#859900;font-weight:bold}
+  .octal{color:#2AA198}
+  .operator, .predefined{color:#859900;font-weight:bold}
+  .predefined-constant{color:#2AA198}
+  .predefined-type{color:#DC322F;font-weight:bold}
+  .preprocessor{color:#859900}
+  .pseudo-class{color:#859900;font-weight:bold}
+  .regexp .content{color:#2AA198}
+  .regexp .delimiter{color:#DC322F}
+  .regexp .modifier{color:#CB4B16}
+  .regexp{background-color:transparent}
+  .reserved{color:#268BD2;font-weight:bold}
+  .shell .content{color:#2b2}
+  .shell .delimiter{color:#161}
+  .shell{background-color:transparent}
+  .string .char{color:#2AA198}
+  .string .content{color:#2AA198}
+  .string .delimiter{color:#DC322F}
+  .string .modifier{color:#2AA198}
+  .string{background-color:transparent}
+  .symbol .content{color:#2AA198}
+  .symbol .delimiter{color:#2AA198}
+  .symbol{color:#2AA198}
+  .tag{color: #268BD2}
+  .type{color:#DC322F;font-weight:bold}
+  .value{color:#268BD2}
+  .variable{color:#268BD2}
+  .insert{background:transparent}
+  .delete{background:transparent}
+  .change{color:#CB4B16;background:transparent}
+  .head{color:#CB4B16;background:transparent}
+  .head .filename{color:#CB4B16}
+  .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
+  .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
+  .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
+  .delete .delete{color:#2AA198;background:transparent;font-weight:bold}
+  .change .change{color:#CB4B16}
+  .head .head{color:#CB4B16}
+}

From e78fee21842ee40e8c1c59f0b8b2df9cbf1bfe58 Mon Sep 17 00:00:00 2001
From: Robin Daugherty <robin@robindaugherty.net>
Date: Sat, 18 Apr 2020 16:34:15 -0400
Subject: [PATCH 17/17] Refactor and rename more SCSS

---
 lib/better_errors/code_formatter/html.rb      |   2 +-
 lib/better_errors/templates/main.css          |   2 +-
 lib/better_errors/templates/main.erb          |   2 +-
 lib/better_errors/templates/variable_info.erb |   4 +-
 style/main.scss                               | 454 +++++++++---------
 5 files changed, 221 insertions(+), 243 deletions(-)

diff --git a/lib/better_errors/code_formatter/html.rb b/lib/better_errors/code_formatter/html.rb
index 7663f095..955e3fe4 100644
--- a/lib/better_errors/code_formatter/html.rb
+++ b/lib/better_errors/code_formatter/html.rb
@@ -2,7 +2,7 @@ module BetterErrors
   # @private
   class CodeFormatter::HTML < CodeFormatter
     def source_unavailable
-      "<p class='unavailable'>Source is not available</p>"
+      "<p class='code-unavailable'>Source is not available</p>"
     end
 
     def formatted_lines
diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
index 99b806cc..5a61bbb2 100644
--- a/lib/better_errors/templates/main.css
+++ b/lib/better_errors/templates/main.css
@@ -1 +1 @@
-.CodeRay .debug{color:#fff;background:#00f}.CodeRay .annotation{color:#586E75}.CodeRay .attribute-name{color:#93A1A1}.CodeRay .attribute-value{color:#93A1A1}.CodeRay .binary{color:#509}.CodeRay .char .content{color:#d20}.CodeRay .char .delimiter{color:#710}.CodeRay .char{color:#2AA198}.CodeRay .class{color:#268BD2;font-weight:bold}.CodeRay .class-variable{color:#268BD2}.CodeRay .color{color:#eee8d5}.CodeRay .comment{color:#586E75}.CodeRay .comment .char{color:#859900}.CodeRay .comment .delimiter{color:#859900}.CodeRay .complex{color:#a08}.CodeRay .constant{color:#B58900;font-weight:bold}.CodeRay .decorator{color:#268BD2}.CodeRay .definition{color:#099;font-weight:bold}.CodeRay .delimiter{color:#000}.CodeRay .directive{color:#088;font-weight:bold}.CodeRay .doc{color:#93A1A1}.CodeRay .doc-string{color:#93A1A1;font-weight:bold}.CodeRay .doctype{color:#DC322F}.CodeRay .entity{color:#CB4B16;font-weight:bold}.CodeRay .error{color:#93A1A1;background-color:#faa}.CodeRay .escape{color:#CB4B16}.CodeRay .exception{color:#CB4B16;font-weight:bold}.CodeRay .float{color:#2AA198}.CodeRay .function{color:#268BD2;font-weight:bold}.CodeRay .global-variable{color:#268BD2}.CodeRay .hex{color:#2AA198}.CodeRay .imaginary{color:#f00}.CodeRay .include{color:#b44;font-weight:bold}.CodeRay .inline{background-color:transparent;color:#93A1A1 !important}.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}.CodeRay .instance-variable{color:#268BD2}.CodeRay .integer{color:#2AA198}.CodeRay .key .char{color:#DC322F}.CodeRay .key .delimiter{color:#268BD2}.CodeRay .key{color:#859900}.CodeRay .keyword{color:#859900;font-weight:bold}.CodeRay .label{color:#93A1A1;font-weight:bold}.CodeRay .local-variable{color:#268BD2}.CodeRay .namespace{color:#859900;font-weight:bold}.CodeRay .octal{color:#2AA198}.CodeRay .operator,.CodeRay .predefined{color:#859900;font-weight:bold}.CodeRay .predefined-constant{color:#2AA198}.CodeRay .predefined-type{color:#DC322F;font-weight:bold}.CodeRay .preprocessor{color:#859900}.CodeRay .pseudo-class{color:#859900;font-weight:bold}.CodeRay .regexp .content{color:#2AA198}.CodeRay .regexp .delimiter{color:#DC322F}.CodeRay .regexp .modifier{color:#CB4B16}.CodeRay .regexp{background-color:transparent}.CodeRay .reserved{color:#268BD2;font-weight:bold}.CodeRay .shell .content{color:#2b2}.CodeRay .shell .delimiter{color:#161}.CodeRay .shell{background-color:transparent}.CodeRay .string .char{color:#2AA198}.CodeRay .string .content{color:#2AA198}.CodeRay .string .delimiter{color:#DC322F}.CodeRay .string .modifier{color:#2AA198}.CodeRay .string{background-color:transparent}.CodeRay .symbol .content{color:#2AA198}.CodeRay .symbol .delimiter{color:#2AA198}.CodeRay .symbol{color:#2AA198}.CodeRay .tag{color:#268BD2}.CodeRay .type{color:#DC322F;font-weight:bold}.CodeRay .value{color:#268BD2}.CodeRay .variable{color:#268BD2}.CodeRay .insert{background:transparent}.CodeRay .delete{background:transparent}.CodeRay .change{color:#CB4B16;background:transparent}.CodeRay .head{color:#CB4B16;background:transparent}.CodeRay .head .filename{color:#CB4B16}.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}.CodeRay .change .change{color:#CB4B16}.CodeRay .head .head{color:#CB4B16}*{margin:0;padding:0}table{width:100%;border-collapse:collapse}th,td{vertical-align:top;text-align:left}textarea{resize:none}body{font-size:10pt}body,td,input,textarea{font-family:helvetica neue, lucida grande, sans-serif;line-height:1.5;color:#333}html{background:white}.clearfix::after{clear:both;content:".";display:block;height:0;visibility:hidden}@media screen and (max-width: 1100px){html{overflow-y:scroll}body{margin:0 20px}header.exception{margin:0 -20px}nav.sidebar{padding:0;margin:20px 0}ul.frames{max-height:200px}}@media screen and (min-width: 1100px){header.exception{position:fixed;top:0;left:0;right:0}nav.sidebar,.frame_info{position:fixed;top:95px;bottom:0;box-sizing:border-box}nav.sidebar{width:40%;left:0}ul.frames{position:absolute;top:36px;bottom:0;left:0;right:0}.frame_info{right:0;left:40%;border-left:5px solid #38a;overflow-y:auto;overflow-x:hidden}}ul.frames{overflow:auto}header.exception{padding:18px 20px;height:59px;min-height:59px;overflow:hidden;background-color:#20202a;color:#aaa;font-weight:200;-webkit-text-smoothing:antialiased}header.exception h2{font-weight:200;font-size:11pt}header.exception h2,header.exception p{line-height:1.4em;overflow:hidden;white-space:pre;text-overflow:ellipsis}header.exception h2 strong{font-weight:700;color:#d55}header.exception p{font-weight:200;font-size:20pt;color:white}header.exception:hover{height:auto;z-index:2}header.exception:hover h2,header.exception:hover p{padding-right:20px;overflow-y:auto;word-wrap:break-word;white-space:pre-wrap;height:auto;max-height:7.5em}@media screen and (max-width: 1100px){header.exception{height:auto}header.exception h2,header.exception p{padding-right:20px;overflow-y:auto;word-wrap:break-word;height:auto;max-height:7em}}nav.segmented{border-bottom:solid 1px #ddd;text-align:center;padding:6px}nav.segmented a{display:inline-block;height:22px;line-height:22px;padding:0 10px;text-decoration:none;font-size:8pt;font-weight:bold;color:#38a;border:1px solid #38a}nav.segmented a:first-child{border-right:0;border-top-left-radius:8px;border-bottom-left-radius:8px}nav.segmented a:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}nav.segmented a.selected{color:white;background:#38a}nav.segmented a.disabled{text-decoration:line-through;cursor:default}ul.frames li{padding:7px 20px;border-bottom:1pt solid #eee;cursor:pointer;overflow:hidden}ul.frames li .name,ul.frames li .location{overflow:hidden;height:1.5em;white-space:nowrap;word-wrap:none;text-overflow:ellipsis}ul.frames li .method{color:#666}ul.frames li .location{font-size:0.85em;font-weight:400;color:#999}ul.frames li .line{font-weight:bold}ul.frames li .chevron{float:right;margin-right:-10px;color:#ccc;font-size:24px;line-height:34px}@media screen and (max-width: 1100px){ul.frames li .chevron{display:none}}ul.frames li.selected{background:#38a}ul.frames li.selected .name,ul.frames li.selected .method,ul.frames li.selected .location,ul.frames li.selected .chevron{color:white}ul.frames li{padding-left:60px;position:relative}ul.frames li .icon{display:block;width:20px;height:20px;line-height:20px;border-radius:15px;text-align:center;background:white;border:solid 2px #ccc;font-size:9pt;font-weight:200;font-style:normal;position:absolute;top:14px;left:20px}ul.frames .icon.application{background:#808090;border-color:#555}ul.frames .icon.application:before{content:'A';color:white}@media screen and (max-width: 1100px){ul.frames li{padding-top:6px;padding-bottom:6px;padding-left:36px;line-height:1.3}ul.frames li .icon{width:11px;height:11px;line-height:11px;top:7px;left:10px;font-size:5pt}ul.frames .name,ul.frames .location{display:inline-block;line-height:1.3;height:1.3em}ul.frames .name{margin-right:10px}}pre,code,.be-repl .command-line input,.be-repl .command-line .prompt,.be-repl .output .command,textarea,.code_linenums,.title .name,ul.frames li .method{font-family:menlo, lucida console, monospace}.trace_info .title{background:#38a;color:white;overflow:hidden;padding:5px 10px}@media screen and (min-width: 1100px){.trace_info .title{padding:5px 10px 5px 0}}.trace_info .title .name,.trace_info .title .location{font-size:9pt;line-height:26px;height:26px;overflow:hidden}.trace_info .title .location{float:left;font-weight:bold;font-size:10pt}.trace_info .title .location a{color:white;text-decoration:none}.trace_info .title .location a .filename{text-decoration:underline}.trace_info .title .location a:hover{border-color:#666666}.trace_info .title .name{float:right;font-weight:200}.trace_info .code_block{background:#f1f1f1;padding-bottom:1px}.code_linenums{background:#f1f1f1;padding-top:10px;padding-bottom:9px;float:left}.code_linenums pre{padding:0 6px}.code{margin-bottom:-1px;border-top-left-radius:2px;padding:10px 0;overflow:auto}.code pre{padding-left:12px}.code pre,.code_linenums pre{font-size:11px;min-height:16px}.code .highlight,.code_linenums .highlight{background:rgba(220,30,30,0.1);-webkit-animation:highlight 400ms linear 1;-moz-animation:highlight 400ms linear 1;animation:highlight 400ms linear 1}p.unavailable{padding:20px 0 40px 0;text-align:center;color:#b99;font-weight:bold}p.unavailable:before{content:'\00d7';display:block;color:#daa;text-align:center;font-size:40pt;font-weight:normal;margin-bottom:-10px}@-webkit-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@-moz-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}h3{background-color:#38a;color:white;padding:4px;font-size:8pt;-webkit-font-smoothing:antialiased}.be-console{background-color:#002B36;color:white}.be-console .output{max-height:15rem;overflow-x:hidden;overflow-y:auto;padding:8px;border-bottom:1px solid #ccc}.be-console .output:not(.used){padding:0;border-bottom:0}@media screen and (min-height: 800px){.be-console .output{max-height:25rem}}.be-console .output pre,.be-console .output h4{font-size:9pt;word-wrap:break-word;white-space:pre-wrap;width:100%}.be-console .output h4{padding:8px;margin-top:10px;background-color:#555}.be-console .output h4:first-child{margin-top:0}.be-console .output pre{padding:8px}.be-console .command-line{display:table;padding:8px 0;background-color:#555}.be-console .command-line .prompt,.be-console .command-line input{display:table-cell;line-height:12px;font-size:9pt}.be-console .command-line .prompt{width:1%;padding-right:5px;padding-left:10px;white-space:pre}.be-console .command-line input{width:99%}.be-console input,.be-console input:focus{outline:0;border:0;padding:0;background:transparent;margin:0;color:inherit}.hint{margin:15px 0 20px 0;font-size:8pt;color:#8080a0;padding-left:20px}.variables h4{margin-top:5px;padding-left:5px;font-weight:bold;font-size:9pt;word-wrap:break-word}.variables pre{max-height:15em;overflow-y:auto;font-size:9pt;word-wrap:break-word;white-space:normal;margin-left:2rem;border-bottom:1px dotted #ddd}.variables .unsupported{display:block;font-family:sans-serif;color:#777}
+.CodeRay .debug{color:#fff;background:#00f}.CodeRay .annotation{color:#586E75}.CodeRay .attribute-name{color:#93A1A1}.CodeRay .attribute-value{color:#93A1A1}.CodeRay .binary{color:#509}.CodeRay .char .content{color:#d20}.CodeRay .char .delimiter{color:#710}.CodeRay .char{color:#2AA198}.CodeRay .class{color:#268BD2;font-weight:bold}.CodeRay .class-variable{color:#268BD2}.CodeRay .color{color:#eee8d5}.CodeRay .comment{color:#586E75}.CodeRay .comment .char{color:#859900}.CodeRay .comment .delimiter{color:#859900}.CodeRay .complex{color:#a08}.CodeRay .constant{color:#B58900;font-weight:bold}.CodeRay .decorator{color:#268BD2}.CodeRay .definition{color:#099;font-weight:bold}.CodeRay .delimiter{color:#000}.CodeRay .directive{color:#088;font-weight:bold}.CodeRay .doc{color:#93A1A1}.CodeRay .doc-string{color:#93A1A1;font-weight:bold}.CodeRay .doctype{color:#DC322F}.CodeRay .entity{color:#CB4B16;font-weight:bold}.CodeRay .error{color:#93A1A1;background-color:#faa}.CodeRay .escape{color:#CB4B16}.CodeRay .exception{color:#CB4B16;font-weight:bold}.CodeRay .float{color:#2AA198}.CodeRay .function{color:#268BD2;font-weight:bold}.CodeRay .global-variable{color:#268BD2}.CodeRay .hex{color:#2AA198}.CodeRay .imaginary{color:#f00}.CodeRay .include{color:#b44;font-weight:bold}.CodeRay .inline{background-color:transparent;color:#93A1A1 !important}.CodeRay .inline-delimiter{font-weight:bold;color:#DC322F}.CodeRay .instance-variable{color:#268BD2}.CodeRay .integer{color:#2AA198}.CodeRay .key .char{color:#DC322F}.CodeRay .key .delimiter{color:#268BD2}.CodeRay .key{color:#859900}.CodeRay .keyword{color:#859900;font-weight:bold}.CodeRay .label{color:#93A1A1;font-weight:bold}.CodeRay .local-variable{color:#268BD2}.CodeRay .namespace{color:#859900;font-weight:bold}.CodeRay .octal{color:#2AA198}.CodeRay .operator,.CodeRay .predefined{color:#859900;font-weight:bold}.CodeRay .predefined-constant{color:#2AA198}.CodeRay .predefined-type{color:#DC322F;font-weight:bold}.CodeRay .preprocessor{color:#859900}.CodeRay .pseudo-class{color:#859900;font-weight:bold}.CodeRay .regexp .content{color:#2AA198}.CodeRay .regexp .delimiter{color:#DC322F}.CodeRay .regexp .modifier{color:#CB4B16}.CodeRay .regexp{background-color:transparent}.CodeRay .reserved{color:#268BD2;font-weight:bold}.CodeRay .shell .content{color:#2b2}.CodeRay .shell .delimiter{color:#161}.CodeRay .shell{background-color:transparent}.CodeRay .string .char{color:#2AA198}.CodeRay .string .content{color:#2AA198}.CodeRay .string .delimiter{color:#DC322F}.CodeRay .string .modifier{color:#2AA198}.CodeRay .string{background-color:transparent}.CodeRay .symbol .content{color:#2AA198}.CodeRay .symbol .delimiter{color:#2AA198}.CodeRay .symbol{color:#2AA198}.CodeRay .tag{color:#268BD2}.CodeRay .type{color:#DC322F;font-weight:bold}.CodeRay .value{color:#268BD2}.CodeRay .variable{color:#268BD2}.CodeRay .insert{background:transparent}.CodeRay .delete{background:transparent}.CodeRay .change{color:#CB4B16;background:transparent}.CodeRay .head{color:#CB4B16;background:transparent}.CodeRay .head .filename{color:#CB4B16}.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.CodeRay .insert .insert{color:#CB4B16;background:transparent;font-weight:bold}.CodeRay .delete .delete{color:#2AA198;background:transparent;font-weight:bold}.CodeRay .change .change{color:#CB4B16}.CodeRay .head .head{color:#CB4B16}*{margin:0;padding:0}table{width:100%;border-collapse:collapse}th,td{vertical-align:top;text-align:left}textarea{resize:none}body{font-size:10pt}body,td,input,textarea{font-family:helvetica neue, lucida grande, sans-serif;line-height:1.5;color:#333}html{background:white}.clearfix::after,.trace_info .code_block::after,.trace_info::after{clear:both;content:".";display:block;height:0;visibility:hidden}@media screen and (max-width: 1100px){html{overflow-y:scroll}body{margin:0 20px}header.exception{margin:0 -20px}nav.frames{padding:0;margin:20px 0}ul.frames{max-height:200px}}@media screen and (min-width: 1100px){header.exception{position:fixed;top:0;left:0;right:0}nav.frames,.frame_info{position:fixed;top:95px;bottom:0;box-sizing:border-box}nav.frames{width:40%;left:0}ul.frames{position:absolute;top:36px;bottom:0;left:0;right:0}.frame_info{right:0;left:40%;border-left:5px solid #38a;overflow-y:auto;overflow-x:hidden}}header.exception{padding:18px 20px;height:59px;min-height:59px;overflow:hidden;background-color:#20202a;color:#aaa;font-weight:200;-webkit-text-smoothing:antialiased}header.exception h2{font-weight:200;font-size:11pt}header.exception h2 strong{font-weight:700;color:#d55}header.exception h2,header.exception p{line-height:1.4em;overflow:hidden;white-space:pre;text-overflow:ellipsis}@media screen and (max-width: 1100px){header.exception h2,header.exception p{height:auto;padding-right:20px;overflow-y:auto;word-wrap:break-word;height:auto;max-height:7em}}header.exception p{font-weight:200;font-size:20pt;color:white}header.exception:hover{height:auto;z-index:2}header.exception:hover h2,header.exception:hover p{padding-right:20px;overflow-y:auto;word-wrap:break-word;white-space:pre-wrap;height:auto;max-height:7.5em}nav.segmented{border-bottom:solid 1px #ddd;text-align:center;padding:6px}nav.segmented a{display:inline-block;height:22px;line-height:22px;padding:0 10px;text-decoration:none;font-size:8pt;font-weight:bold;color:#38a;border:1px solid #38a}nav.segmented a:first-child{border-right:0;border-top-left-radius:8px;border-bottom-left-radius:8px}nav.segmented a:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}nav.segmented a.selected{color:white;background:#38a}nav.segmented a.disabled{text-decoration:line-through;cursor:default}ul.frames{overflow:auto}ul.frames li{padding:7px 20px;border-bottom:1pt solid #eee;cursor:pointer;overflow:hidden;padding-left:60px;position:relative}ul.frames li .name,ul.frames li .location{overflow:hidden;height:1.5em;white-space:nowrap;word-wrap:none;text-overflow:ellipsis}ul.frames li .method{color:#666}ul.frames li .location{font-size:0.85em;font-weight:400;color:#999}ul.frames li .line{font-weight:bold}ul.frames li .chevron{float:right;margin-right:-10px;color:#ccc;font-size:24px;line-height:34px}@media screen and (max-width: 1100px){ul.frames li .chevron{display:none}}ul.frames li.selected{background:#38a}ul.frames li.selected .name,ul.frames li.selected .method,ul.frames li.selected .location,ul.frames li.selected .chevron{color:white}ul.frames li .icon{display:block;width:20px;height:20px;line-height:20px;border-radius:15px;text-align:center;background:white;border:solid 2px #ccc;font-size:9pt;font-weight:200;font-style:normal;position:absolute;top:14px;left:20px}ul.frames li .icon.application{background:#808090;border-color:#555}ul.frames li .icon.application:before{content:'A';color:white}@media screen and (max-width: 1100px){ul.frames li{padding-top:6px;padding-bottom:6px;padding-left:36px;line-height:1.3}ul.frames li .icon{width:11px;height:11px;line-height:11px;top:7px;left:10px;font-size:5pt}ul.frames li .name,ul.frames li .location{display:inline-block;line-height:1.3;height:1.3em}ul.frames li .name{margin-right:10px}}pre,code,.be-repl .command-line input,.be-repl .command-line .prompt,.be-repl .output .command,textarea,.code_linenums,.title .name,ul.frames li .method{font-family:menlo, lucida console, monospace}.trace_info .title{background:#38a;color:white;overflow:hidden;padding:5px 10px}@media screen and (min-width: 1100px){.trace_info .title{padding:5px 10px 5px 0}}.trace_info .title .name,.trace_info .title .location{font-size:9pt;line-height:26px;height:26px;overflow:hidden}.trace_info .title .location{float:left;font-weight:bold;font-size:10pt}.trace_info .title .location a{color:white;text-decoration:none}.trace_info .title .location a .filename{text-decoration:underline}.trace_info .title .location a:hover{border-color:#666666}.trace_info .title .name{float:right;font-weight:200}.trace_info .code_block{background:#f1f1f1;padding-bottom:1px}.trace_info .code_block .code_linenums{background:#f1f1f1;padding-top:10px;padding-bottom:9px;float:left}.trace_info .code_block .code_linenums pre{padding:0 6px}.trace_info .code_block .code{margin-bottom:-1px;border-top-left-radius:2px;padding:10px 0;overflow:auto}.trace_info .code_block .code pre{padding-left:12px}.trace_info .code_block .code pre,.trace_info .code_block .code_linenums pre{font-size:11px;min-height:16px}.trace_info .code_block .code .highlight,.trace_info .code_block .code_linenums .highlight{background:rgba(220,30,30,0.1);-webkit-animation:highlight 400ms linear 1;-moz-animation:highlight 400ms linear 1;animation:highlight 400ms linear 1}.trace_info .code_block .code-unavailable{padding:20px 0 40px 0;text-align:center;color:#b99;font-weight:bold}.trace_info .code_block .code-unavailable:before{content:'\00d7';display:block;color:#daa;text-align:center;font-size:40pt;font-weight:normal;margin-bottom:-10px}@-webkit-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@-moz-keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}@keyframes highlight{0%{background:rgba(220,30,30,0.3)}100%{background:rgba(220,30,30,0.1)}}h3{background-color:#38a;color:white;padding:4px;font-size:8pt;-webkit-font-smoothing:antialiased}.be-console{background-color:#002B36;color:white}.be-console .output{max-height:15rem;overflow-x:hidden;overflow-y:auto;padding:8px;border-bottom:1px solid #ccc}.be-console .output:not(.used){padding:0;border-bottom:0}@media screen and (min-height: 800px){.be-console .output{max-height:25rem}}.be-console .output pre,.be-console .output h4{font-size:9pt;word-wrap:break-word;white-space:pre-wrap;width:100%}.be-console .output h4{padding:8px;margin-top:10px;background-color:#555}.be-console .output h4:first-child{margin-top:0}.be-console .output pre{padding:8px}.be-console .command-line{display:table;padding:8px 0;background-color:#555}.be-console .command-line .prompt,.be-console .command-line input{display:table-cell;line-height:12px;font-size:9pt}.be-console .command-line .prompt{width:1%;padding-right:5px;padding-left:10px;white-space:pre}.be-console .command-line input{width:99%}.be-console input,.be-console input:focus{outline:0;border:0;padding:0;background:transparent;margin:0;color:inherit}.hint{margin:15px 0 20px 0;font-size:8pt;color:#8080a0;padding-left:20px}.variables h4{margin-top:5px;padding-left:5px;font-weight:bold;font-size:9pt;word-wrap:break-word}.variables pre{max-height:15em;overflow-y:auto;font-size:9pt;word-wrap:break-word;white-space:normal;margin-left:2rem;border-bottom:1px dotted #ddd}.variables .unsupported{display:block;font-family:sans-serif;color:#777}
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
index 6f99ecb1..4fa2cf6b 100644
--- a/lib/better_errors/templates/main.erb
+++ b/lib/better_errors/templates/main.erb
@@ -61,7 +61,7 @@
     </div>
 
     <section class="backtrace">
-        <nav class="sidebar">
+        <nav class="frames">
             <nav class="segmented">
                 <a href="#" id="application_frames">Application Frames</a><a href="#" id="all_frames">All Frames</a>
             </nav>
diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb
index 932c43f3..0ecee6b5 100644
--- a/lib/better_errors/templates/variable_info.erb
+++ b/lib/better_errors/templates/variable_info.erb
@@ -1,11 +1,11 @@
-<header class="trace_info clearfix">
+<header class="trace_info">
     <h2 class="title">
         <div class="name">#<%= @frame.name %></div>
         <div class="location">
             <a class="filename" href="<%= editor_url(@frame) %>"><span class="filename"><%= @frame.pretty_path %></span> &#x270E;</a>
         </div>
     </h2>
-    <div class="code_block clearfix">
+    <div class="code_block">
         <%== html_formatted_code_block @frame %>
     </div>
 </header>
diff --git a/style/main.scss b/style/main.scss
index cd0ec4cd..fea684b3 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -60,7 +60,7 @@ html {
     margin: 0 -20px;
   }
 
-  nav.sidebar {
+  nav.frames {
     padding: 0;
     margin: 20px 0;
   }
@@ -79,7 +79,7 @@ html {
      right: 0;
   }
 
-  nav.sidebar,
+  nav.frames,
   .frame_info {
     position: fixed;
     top: 95px;
@@ -88,7 +88,7 @@ html {
     box-sizing: border-box;
   }
   
-  nav.sidebar {
+  nav.frames {
     width: 40%;
     left: 0;
   }
@@ -112,10 +112,6 @@ html {
   }
 }
 
-ul.frames {
-  overflow: auto;
-}
-
 /* ---------------------------------------------------------------------
  * Header
  * --------------------------------------------------------------------- */
@@ -133,241 +129,220 @@ header.exception {
   font-weight: 200;
 
   -webkit-text-smoothing: antialiased;
-}
 
-/* Heading */
-header.exception h2 {
-  font-weight: 200;
-  font-size: 11pt;
-}
-
-header.exception h2,
-header.exception p {
-  line-height: 1.4em;
-  overflow: hidden;
-  white-space: pre;
-  text-overflow: ellipsis;
-}
-
-header.exception h2 strong {
-  font-weight: 700;
-  color: #d55;
-}
+  h2 {
+    font-weight: 200;
+    font-size: 11pt;
+    strong {
+      font-weight: 700;
+      color: #d55;
+    }
+  }
 
-header.exception p {
-  font-weight: 200;
-  font-size: 20pt;
-  color: white;
-}
+  h2,
+  p {
+    line-height: 1.4em;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
 
-header.exception:hover {
-  height: auto;
-  z-index: 2;
-}
+    @media screen and (max-width: 1100px) {
+      height: auto;
 
-header.exception:hover h2,
-header.exception:hover p {
-  padding-right: 20px;
-  overflow-y: auto;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  height: auto;
-  max-height: 7.5em;
-}
+      padding-right: 20px;
+      overflow-y: auto;
+      word-wrap: break-word;
+      height: auto;
+      max-height: 7em;
+    }
+  }
 
-@media screen and (max-width: 1100px) {
-  header.exception {
-    height: auto;
+  p {
+    font-weight: 200;
+    font-size: 20pt;
+    color: white;
   }
 
-  header.exception h2,
-  header.exception p {
-    padding-right: 20px;
-    overflow-y: auto;
-    word-wrap: break-word;
+  &:hover {
     height: auto;
-    max-height: 7em;
+    z-index: 2;
+
+    h2,
+    p {
+      padding-right: 20px;
+      overflow-y: auto;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      height: auto;
+      max-height: 7.5em;
+    }
   }
 }
 
-/* ---------------------------------------------------------------------
- * Navigation
- * --------------------------------------------------------------------- */
-
 nav.segmented {
   border-bottom: solid 1px #ddd;
 
   text-align: center;
 
   padding: 6px;
-}
 
-nav.segmented a {
-  display: inline-block;
+  a {
+    display: inline-block;
 
-  height: 22px;
-  line-height: 22px;
-  padding: 0 10px;
+    height: 22px;
+    line-height: 22px;
+    padding: 0 10px;
 
-  text-decoration: none;
-  font-size: 8pt;
-  font-weight: bold;
+    text-decoration: none;
+    font-size: 8pt;
+    font-weight: bold;
 
-  color: #38a;
-  border: 1px solid #38a;
-}
+    color: #38a;
+    border: 1px solid #38a;
 
-nav.segmented a:first-child {
-  border-right: 0;
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
+    &:first-child {
+      border-right: 0;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
 
-nav.segmented a:last-child {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
+    &:last-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
 
-nav.segmented a.selected {
-  color: white;
-  background: #38a;
-}
+    &.selected {
+      color: white;
+      background: #38a;
+    }
 
-nav.segmented a.disabled {
-  text-decoration: line-through;
-  cursor: default;
+    &.disabled {
+      text-decoration: line-through;
+      cursor: default;
+    }
+  }
 }
 
-/* ---------------------------------------------------------------------
- * Sidebar
- * --------------------------------------------------------------------- */
-
 ul.frames {
-}
+  overflow: auto;
 
-/* Each item */
-ul.frames li {
-  padding: 7px 20px;
-  border-bottom: 1pt solid #eee;
+  li {
+    padding: 7px 20px;
+    border-bottom: 1pt solid #eee;
 
-  cursor: pointer;
-  overflow: hidden;
-}
-
-ul.frames li .name,
-ul.frames li .location {
-  overflow: hidden;
-  height: 1.5em;
+    cursor: pointer;
+    overflow: hidden;
 
-  white-space: nowrap;
-  word-wrap: none;
-  text-overflow: ellipsis;
-}
+    .name,
+    .location {
+      overflow: hidden;
+      height: 1.5em;
 
-ul.frames li .method {
-  color: #666;
-}
+      white-space: nowrap;
+      word-wrap: none;
+      text-overflow: ellipsis;
+    }
 
-ul.frames li .location {
-  font-size: 0.85em;
-  font-weight: 400;
-  color: #999;
-}
+    .method {
+      color: #666;
+    }
 
-ul.frames li .line {
-  font-weight: bold;
-}
+    .location {
+      font-size: 0.85em;
+      font-weight: 400;
+      color: #999;
+    }
 
-ul.frames li .chevron {
-  float: right;
-  margin-right: -10px;
-  color: #ccc;
-  font-size: 24px;
-  line-height: 34px;
-}
-@media screen and (max-width: 1100px) {
-  ul.frames li .chevron {
-    display: none;
-  }
-}
+    .line {
+      font-weight: bold;
+    }
 
-/* Selected frame */
-ul.frames li.selected {
-  background: #38a;
-}
+    .chevron {
+      float: right;
+      margin-right: -10px;
+      color: #ccc;
+      font-size: 24px;
+      line-height: 34px;
 
-ul.frames li.selected .name,
-ul.frames li.selected .method,
-ul.frames li.selected .location,
-ul.frames li.selected .chevron {
-  color: white;
-}
+      @media screen and (max-width: 1100px) {
+        display: none;
+      }
+    }
 
-/* Iconography */
-ul.frames li {
-  padding-left: 60px;
-  position: relative;
-}
+    &.selected {
+      background: #38a;
 
-ul.frames li .icon {
-  display: block;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  border-radius: 15px;
+      .name,
+      .method,
+      .location,
+      .chevron {
+        color: white;
+      }
+    }
 
-  text-align: center;
+    /* Iconography */
+    padding-left: 60px;
+    position: relative;
 
-  background: white;
-  border: solid 2px #ccc;
+    .icon {
+      display: block;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      border-radius: 15px;
 
-  font-size: 9pt;
-  font-weight: 200;
-  font-style: normal;
+      text-align: center;
 
-  position: absolute;
-  top: 14px;
-  left: 20px;
-}
+      background: white;
+      border: solid 2px #ccc;
 
-ul.frames .icon.application {
-  background: #808090;
-  border-color: #555;
-}
+      font-size: 9pt;
+      font-weight: 200;
+      font-style: normal;
 
-ul.frames .icon.application:before {
-  content: 'A';
-  color: white;
-}
+      position: absolute;
+      top: 14px;
+      left: 20px;
+    }
 
-/* Responsiveness -- flow to single-line mode */
-@media screen and (max-width: 1100px) {
-  ul.frames li {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: 36px;
-    line-height: 1.3;
-  }
+    .icon.application {
+      background: #808090;
+      border-color: #555;
+    }
 
-  ul.frames li .icon {
-    width: 11px;
-    height: 11px;
-    line-height: 11px;
+    .icon.application:before {
+      content: 'A';
+      color: white;
+    }
 
-    top: 7px;
-    left: 10px;
-    font-size: 5pt;
-  }
+    /* Responsiveness -- flow to single-line mode */
+    @media screen and (max-width: 1100px) {
+      padding-top: 6px;
+      padding-bottom: 6px;
+      padding-left: 36px;
+      line-height: 1.3;
+
+      .icon {
+        width: 11px;
+        height: 11px;
+        line-height: 11px;
+
+        top: 7px;
+        left: 10px;
+        font-size: 5pt;
+      }
 
-  ul.frames .name,
-  ul.frames .location {
-    display: inline-block;
-    line-height: 1.3;
-    height: 1.3em;
-  }
+      .name,
+      .location {
+        display: inline-block;
+        line-height: 1.3;
+        height: 1.3em;
+      }
 
-  ul.frames .name {
-    margin-right: 10px;
+      .name {
+        margin-right: 10px;
+      }
+    }
   }
 }
 
@@ -388,6 +363,8 @@ ul.frames li .method {
 }
 
 .trace_info {
+  @extend .clearfix;
+
   .title {
     background: #38a;
     color: white;
@@ -432,64 +409,65 @@ ul.frames li .method {
   }
 
   .code_block {
+    @extend .clearfix;
+
     background: #f1f1f1;
     padding-bottom: 1px;
-  }
-}
 
-.code_linenums{
-  background:#f1f1f1;
-  padding-top:10px;
-  padding-bottom:9px;
-  float:left;
+    .code_linenums{
+      background:#f1f1f1;
+      padding-top:10px;
+      padding-bottom:9px;
+      float:left;
 
-  pre{
-    padding: 0 6px;
-  }
-}
+      pre{
+        padding: 0 6px;
+      }
+    }
 
-.code {
-  margin-bottom: -1px;
-  border-top-left-radius:2px;
-  padding: 10px 0;
-  overflow: auto;
+    .code {
+      margin-bottom: -1px;
+      border-top-left-radius:2px;
+      padding: 10px 0;
+      overflow: auto;
 
-  pre {
-    padding-left:12px;
-  }
-}
+      pre {
+        padding-left:12px;
+      }
+    }
 
-.code, .code_linenums {
-  pre {
-    font-size: 11px;
-    min-height: 16px;
-  }
+    .code, .code_linenums {
+      pre {
+        font-size: 11px;
+        min-height: 16px;
+      }
 
-  .highlight {
-    background: rgba(220, 30, 30, 0.1);
-    -webkit-animation: highlight 400ms linear 1;
-    -moz-animation: highlight 400ms linear 1;
-    animation: highlight 400ms linear 1;
-  }
-}
+      .highlight {
+        background: rgba(220, 30, 30, 0.1);
+        -webkit-animation: highlight 400ms linear 1;
+        -moz-animation: highlight 400ms linear 1;
+        animation: highlight 400ms linear 1;
+      }
+    }
 
-/* Source unavailable */
-p.unavailable {
-  padding: 20px 0 40px 0;
-  text-align: center;
-  color: #b99;
-  font-weight: bold;
+    .code-unavailable {
+      padding: 20px 0 40px 0;
+      text-align: center;
+      color: #b99;
+      font-weight: bold;
 
-  &:before {
-    content: '\00d7';
-    display: block;
+      &:before {
+        content: '\00d7';
+        display: block;
 
-    color: #daa;
+        color: #daa;
 
-    text-align: center;
-    font-size: 40pt;
-    font-weight: normal;
-    margin-bottom: -10px;
+        text-align: center;
+        font-size: 40pt;
+        font-weight: normal;
+        margin-bottom: -10px;
+      }
+    }
   }
 }