initial commit

styles/_theme.sass

@@ -0,0 +1,7 @@
+$primary: #202225; 
+$primaryAlt: lighten($primary, 5); 
+$danger: #d44848; 
+$text: #dcddde; 
+$link: #00d1b2; 
+$linkAct: darken($link, 10); 
+$fontFamily: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 

styles/comps/_all.sass

@@ -0,0 +1,5 @@
+// import all components from this folder
+@import 'footer.sass';
+@import 'navbar.sass';
+@import 'spinner.sass'; 
+@import 'paginate.sass';

styles/comps/footer.sass

@@ -0,0 +1,6 @@
+.footer
+  text-align: center;
+  padding: 10px 10px 15px;
+  background: $primaryAlt;
+  p 
+    margin-bottom: 0; 

styles/comps/navbar.sass

@@ -0,0 +1,126 @@
+.navbar
+  background: $primaryAlt; 
+  display: flex; 
+  flex-direction: row; 
+  align-items: center; 
+  height: 55px; 
+  
+  .navbar-brand
+    margin-left: 0.75em; 
+    margin-right: auto;
+    
+    h3 
+      margin-bottom: 0; 
+
+  .navbar-burger
+    display: none; 
+    width: 32px;
+    margin-right: 10px;  
+
+    &.active div
+      &:nth-child(1)
+        transform-origin: center; 
+        transform: translateY(8px) rotate(45deg); 
+      &:nth-child(2)
+        opacity: 0; 
+      &:nth-child(3)
+        transform-origin: left -6px; 
+        transform: translateY(8px) rotate(-45deg); 
+
+    div
+      transition: all ease-in-out 150ms;  
+      width: 100%;
+      height: 2px; 
+      margin: 5px 0; 
+      border-radius: 1px; 
+      background: $text; 
+
+
+  .navbar-items
+    display: inline-flex; 
+    flex-direction: row; 
+    
+    .active .item, .item:hover
+      background: $primary; 
+
+    .item
+      margin: 0; 
+      cursor: pointer; 
+      padding: 15px 20px;
+
+  // .dropdown
+  //   position: relative; 
+
+  //   &:hover 
+  //     .dropdown-items
+  //       height: auto; 
+
+  //   .dropdown-root:after
+  //     content: ' \25BE'; 
+
+  //   .dropdown-items
+  //     height: 0;
+  //     width: 125px; 
+  //     overflow: hidden;
+  //     top: 100%; 
+  //     left: 0px; 
+  //     z-index: 6;
+  //     position: absolute; 
+  //     background: $primaryAlt; 
+
+  //     .item 
+  //       padding: 0; 
+  //       margin: 0 !important; 
+  //       padding: 8px 10px;
+  //       &.active, &:hover,
+  //         background: none; 
+  //         color: $linkAct;
+
+
+@media screen and (max-width: 840px) 
+  .navbar
+    .navbar-burger
+      display: inline-block; 
+
+    .navbar-items
+        display: block; 
+        overflow: hidden;
+        position: fixed; 
+        top: 55px; 
+        left: 0; 
+        z-index: 5; 
+        background: $primaryAlt; 
+        width: 100%; 
+        transform: scaleY(0); 
+        transform-origin: top; 
+        transition: all ease-in-out 125ms; 
+
+        &.active
+          transform: scaleY(1); 
+          overflow: auto; 
+
+        .item
+          text-align: center; 
+          width: 100%; 
+          padding: 5px 0; 
+
+    // .dropdown
+    //   padding: 0 !important; 
+
+    // .dropdown-root
+    //   display: none; 
+
+    // .dropdown-items
+    //   position: relative !important; 
+    //   overflow: hidden;
+    //   padding: 0 !important; 
+    //   height: auto !important;
+    //   width: 100% !important; 
+
+    //   .item
+    //     width: 100% !important;
+    //     padding: 5px 0 !important;
+    //     text-align: center !important; 
+
+    //     &:last-child
+    //       padding: 5px 0 0 !important;

styles/comps/paginate.sass

@@ -0,0 +1,18 @@
+.paginate
+  list-style: none; 
+  text-align: center; 
+  user-select: none; 
+  margin: 0; 
+
+  li
+    display: inline-block;
+    
+    &.active a
+      border-color: $link;
+
+    a
+      outline: 0; 
+      border-radius: 50%; 
+      border: 1px solid;
+      border-color: transparent;
+      padding: 3px 8px;

styles/comps/spinner.sass

@@ -0,0 +1,15 @@
+.spinner
+  height: 24px; 
+  width: 24px; 
+  border-radius: 100%; 
+  border: 2px solid $text; 
+  $noBorder: none; 
+  border-right: $noBorder; 
+  border-bottom: $noBorder; 
+  animation: spinner 500ms linear infinite;  
+
+@keyframes spinner 
+  from 
+    transform: rotate(0deg); 
+  to
+    transform: rotate(360deg);

styles/mixins/_all.sass

@@ -0,0 +1,2 @@
+// import all mixins from this folder
+@import '_placeholder.sass'; 

styles/mixins/_placeholder.sass

@@ -0,0 +1,11 @@
+@mixin placeholder()
+  &::-webkit-input-placeholder
+    @content
+  &::-moz-placeholder
+    @content
+  &:-ms-input-placeholder
+    @content
+  &:-moz-placeholder
+    @content
+  &::placeholder
+    @content

styles/style.sass

@@ -0,0 +1,117 @@
+// import milligram
+@import '../node_modules/milligram/src/milligram.sass';
+
+// import codemirror
+@import '../node_modules/codemirror/lib/codemirror.css'; 
+@import '../node_modules/codemirror/theme/monokai.css'; 
+
+// import other stuff
+@import '_theme.sass'; 
+@import 'mixins/_all.sass'; 
+@import 'comps/_all.sass'; 
+  
+body, code, pre
+  background: $primary; 
+  color: $text; 
+  margin: 0; 
+
+pre, code
+  font-size: 1.5rem; 
+  word-break: break-all;
+
+input, textarea, select, button, 
+.button, .cm-s-monokai.CodeMirror
+  color: $text
+  border: none !important; 
+  border-radius: .4rem; 
+  background-color: $primaryAlt !important;
+
+button
+  &[disabled], &.disabled
+    cursor: default;
+
+input, textarea
+  font-size: 1.6rem;
+  font-family: $fontFamily;
+  font-weight: 300; 
+  resize: none;
+  &[disabled]
+    opacity: 0.8; 
+    cursor: not-allowed;  
+  @include placeholder()
+    opacity: 0.85; 
+    color: $text; 
+
+select
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  text-overflow: '';
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat; 
+
+  &:focus
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
+
+.button.disabled
+  cursor: default; 
+
+a
+  color: $link
+  cursor: pointer; 
+  &:visited, &:focus
+    color: $link;
+  &:hover
+    color: $linkAct; 
+
+.danger
+  color: $danger; 
+
+.noMargin
+  margin: 0 !important; 
+
+.float-right
+  margin-left: auto;
+  
+.float-left
+  margin-right: auto; 
+
+.container
+  display: flex;
+  flex-direction: column;
+
+.CodeMirror 
+  width: 100%; 
+
+.cm-s-monokai span.cm-comment
+  color: #ccc9ba; 
+
+.content
+  min-height: calc(100vh - 55px - 50px);
+  padding: 10px; 
+  p, pre
+    word-wrap: break-word;
+    word-break: break-all;
+
+.v-center
+  min-height: calc(100vh - 55px - 50px - 20px); 
+  flex-direction: row; 
+  align-items: center; 
+
+.no-mob
+  display: none !important; 
+
+.inline
+  display: inline-flex !important; 
+  align-items: middle; 
+  
+  select, input
+    width: auto;
+    height: 28px; 
+    flex-grow: 1;
+    margin-left: 5px; 
+    margin-bottom: 0; 
+    padding: 6px; 
+    border: none; 
+
+@media screen and (min-width: 640px)
+  .no-mob
+    display: block !important;