facet editing with CodeMirror!

4 files changed, 75 insertions, 1 deletions

diff --git a/scss/_browser.scss b/scss/_browser.scss
index b9910e8..b843916 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -15,7 +15,7 @@
   &.inspector {
     top: 0;
     position: sticky;
-    max-height: 100vh;
+    max-height: calc(100vh - 3rem);
     color: #c5c8c6;
 
     @include left-border;
diff --git a/scss/_footer.scss b/scss/_footer.scss
index 727ebda..4f1c8bd 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -1,6 +1,7 @@
 footer {
   display: flex;
   padding: 1rem 2rem;
+  height: 1rem;
 
   position: sticky;
   bottom: 0;
diff --git a/scss/codemirror.scss b/scss/codemirror.scss
new file mode 100644
index 0000000..1967f8c
--- /dev/null
+++ b/scss/codemirror.scss
@@ -0,0 +1,72 @@
+/*
+  vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
+*/
+
+/*background color*/
+.CodeMirror.cm-s-hybrid {
+  color: #c5c8c6;
+  background: #1d1f21;
+
+  height: auto;
+
+  /*selection color*/
+  .CodeMirror-selected,
+  .CodeMirror-line::selection,
+  .CodeMirror-line > span::selection,
+  .CodeMirror-line > span > span::selection, {
+    background: #373b41;
+  }
+
+  /*foreground color*/
+  .CodeMirror-cursor {
+    border-color: #c5c8c6;
+  }
+
+  /*color: fg_yellow*/
+  .cm-keyword {
+    color: #f0c674;
+  }
+
+  /*color: fg_comment*/
+  .cm-comment,
+  .cm-meta {
+    color: #707880;
+  }
+
+  /*color: fg_red*/
+  .cm-number,
+  .cm-atom {
+   color: #cc6666
+  }
+
+  /*color: fg_green*/
+  .cm-string,
+  .cm-string-2,
+  .cm-operator {
+    color: #b5bd68;
+  }
+
+  /*color: fg_purple*/
+  .cm-attribute,
+  .cm-propery {
+   color: #b294bb;
+  }
+
+  /*color: fg_blue*/
+  .cm-tag,
+  .cm-qualifier {
+   color: #81a2be;
+  }
+
+  /*color: fg_aqua*/
+  .cm-link,
+  .cm-header,
+  .cm-hr {
+    color: #8abeb7;
+  }
+
+  /*color: fg_orange*/
+  .cm-builtin, {
+    color: #de935f;
+  }
+}
diff --git a/scss/main.scss b/scss/main.scss
index c1e9d38..08ce942 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,6 +1,7 @@
 @import 'defs';
 @import 'reset';
 @import 'hljs';
+@import 'codemirror';
 @import 'header';
 @import 'footer';
 @import 'browser';