1 files changed, 234 insertions, 35 deletions
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index 09d234a..cd10e39 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -1,25 +1,163 @@
+main {
+    width: 100%;
+    display: flex ;
+    align-items: stretch ;
+    flex-flow: row wrap ;
+    margin: 0;
+}
+.svg-icon-arrow {
+    display: block;
+    z-index: 2;
+    width: 18px;
+    height: 18px;
+    &:hover {
+        -moz-transform: scaleX(-1);
+        -o-transform: scaleX(-1);
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+        filter: FlipH;
+        -ms-filter: "FlipH";
+        transition: 0.5s;
+    }
+}
+.note-list-container, .balance-container {
+    position: relative;
+    order: 1;
+    z-index: 1;
+    visibility: hidden;
+    //background: #fbfafa;
+    padding: 4px;
+    border-left: 1px #f9f9f9 solid;
+    max-width: 320px;
+    .list-note-preview {
+        li {
+            height: 4.5rem;
+        }
+        h4 {
+            @include fontsize(15);
+        }
+    }
+    .note-preview {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
+.balance-container {
+    order: 3;
+    min-width: 320px;
+}
+.list-notebook {
+
+}
+.icon-notebook {
+    display: inline-block;
+    content: " ";
+    width: 24px;
+    height: 24px;
+    background: url('/media/moleskine.svg'); 
+}
+.list-note-preview {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    li {
+        @include fontsize(13);
+        min-height: 4.5rem;
+        box-shadow: 0 -1px 0 #e7e2ee inset;
+        margin: 0;
+        padding: 6px 12px;
+        &:hover {
+            background: #f1f1f1;
+        }
+        a {
+            color: lighten($body_font_color, 15);
+            text-decoration: none;
+        }
+    }
+    h4 {
+        @include fontsize(16);
+        margin: 0;
+        padding: 8px 0 8px 6px;
+        font-weight: normal;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    .note-preview {
+        padding-left: 6px;
+        margin-bottom: 16px;
+        margin-right: 6px;
+    }
+}
 .note-title {
-    @include fontsize(22);
+    @include fontsize(26);
 }
 .note-header {
     @extend %clearfix;
 }
-.note-header-float {
-    width: 30%;
-    float: right;
+.note-header-right {
     text-align: right;
+    float: right;
+    width: 50%;
 }
 .note-time, .note-url {
     text-align: right;
     @include fancy-sans;
+    @include fontsize(12);
+    margin-bottom: 0;
+    text-transform: uppercase;
+}
+.note-url {
+    margin-top: 0;
+}
+.note-header {
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+}
+.edit-btn-wrapper{
+    text-align: right;
+}
+.note-header-left {
+    @include fancy-sans;
     @include fontsize(13);
+    float: left;
+    width: 50%;
+    .label {
+        text-transform: uppercase;
+        @include fontsize(11);
+        color: $body_font_light;
+        margin-right: 4px;
+    }
+    ul {
+        display: inline-block;
+        padding: 0;
+        margin-bottom: 0;
+    }
+    li { 
+        margin-right: 4px;
+        display: inline-block;
+    }
+    a {
+        text-decoration: none;
+        color: darken($body_font_light, 5);;
+        &:hover {
+            color: darken($body_font_light, 25);
+        }
+    }
+}
+.notebook {
+    display: block;
 }
 .note-container {
-    @include constrain(80%);
+    max-width: 60%;
+    position: relative;
+    flex:1;
+    order: 2;
+    background: #fff;
+    z-index: 4;
 }
 #note-body {
     @include fancy-sans;
-    @include fontsize(15);
+    @include fontsize(14);
 }
 .inactive {
     .ql-editor {
@@ -39,33 +177,94 @@
         font-size:inherit;
     }
 }
-.note-list-container {
-    max-width: 300px;
-    ul {
-        padding: 0;
-        list-style-type: none;
-    }
-    li {
-        @include fontsize(13);
-        height: 4.5rem;
-        box-shadow: 0 -1px 0 #e7e2ee inset;
-        margin: 0;
-        a {
-            color: lighten($body_font_color, 15);
-            text-decoration: none;
-        }
-    }
-    h4 {
-        @include fontsize(15);
-        margin: 0;
-        padding: 8px 0 8px 6px;
-        font-weight: normal;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    .note-preview {
-        padding-left: 6px;
-        overflow: hidden;
-        white-space: nowrap;
-    }
+#user-menu, #notebooks-menu {
+    display: none;
+}
+.active {
+    display: block !important;
+}
+
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
+
+*/
+
+.hljs, pre.ql-syntax {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #002b36 !important;
+  color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+  color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+  color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #073642;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
 }