inspector styling, dropdown fixes

2 files changed, 53 insertions, 33 deletions

diff --git a/scss/browser.scss b/scss/browser.scss
index 524fc62..ab03d59 100644
--- a/scss/browser.scss
+++ b/scss/browser.scss
@@ -1,10 +1,5 @@
 .browser {
-  position: absolute;
   display: flex;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
 
   .view {
     display: flex;
@@ -13,24 +8,41 @@
     flex: 1 1 0;
     min-width: 0;
 
-    &.inspector .content {
-      margin: 0;
-      padding: 0;
-      display: flex;
+    &.inspector {
+      top: 0;
+      position: sticky;
+      height: 100vh;
+      color: #c5c8c6;
 
-      > * {
-        display: block;
-        margin: 2em;
+      @include left-border;
+      border-color: $gray-dark;
+      background: $gray-dark;
+
+      nav {
+        background: inherit;
       }
 
-      > code.hljs {
+      .content {
         margin: 0;
-        border-radius: 0;
-        flex: 1;
+        padding: 0;
+        display: flex;
+        background: $gray-darker;
+
+        > * {
+          display: block;
+          margin: 0;
+          padding: 1em;
+          border-radius: 0;
+          border: 0;
+          flex: 1;
+        }
       }
     }
 
     nav {
+      position: sticky;
+      top: 0;
+
       display: flex;
       flex: 0 0 3.2em;
       justify-content: space-between;
diff --git a/scss/main.scss b/scss/main.scss
index fa9901a..070eac0 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,9 +1,35 @@
 @import 'hljs';
 
+$gray-bright:   #eeeeee;
+$gray-dark:     #303336;
+$gray-darker:   #1d1f21;
+$gray-neutral:  #b9bdc1;
+$gray-success:  #bdddc1;
+$gray-fail:     #ddbdc1;
+
+@mixin left-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 0 0 $w;
+  border-radius: 0 6px 6px 0;
+}
+
+@mixin right-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 $w 0 0;
+  border-radius: 6px 0 0 6px;
+}
+
 @import 'browser';
 
 body {
   font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  margin: 0;
+  padding: 0;
 }
 
 a {
@@ -58,24 +84,6 @@ h1 .icons {
   }
 }
 
-$gray-bright: #eeeeee;
-$gray-dark: #303336;
-$gray-neutral: #b9bdc1;
-$gray-success: #bdddc1;
-$gray-fail: #ddbdc1;
-
-@mixin left-border($w: 0.6rem) {
-  border-style: solid;
-  border-width: 0 0 0 $w;
-  border-radius: 0 6px 6px 0;
-}
-
-@mixin right-border($w: 0.6rem) {
-  border-style: solid;
-  border-width: 0 $w 0 0;
-  border-radius: 6px 0 0 6px;
-}
-
 pre > code.hljs {
   @include left-border;
   border-color: $gray-dark;