Design pixel push

heynote-codemirror/src/block/note-block.js

@@ -189,9 +189,11 @@ const blockLayer = layer({
             markers.push(new RectangleMarker(
                 idx++ % 2 == 0 ? "block-even" : "block-odd",
                 0,
-                fromCoordsTop - (view.documentTop - view.documentPadding.top) - 1 - 6,
+                // Change "- 0 - 6" to "+ 1 - 6" on the following line, and "+ 1 + 13" to "+2 + 13" on the line below, 
+                // in order to make the block backgrounds to have no gap between them
+                fromCoordsTop - (view.documentTop - view.documentPadding.top) - 0 - 6,
                 null, // width is set to 100% in CSS
-                (toCoordsBottom - fromCoordsTop) + 2 + 13,
+                (toCoordsBottom - fromCoordsTop) + 1 + 13,
             ))
         })
         return markers

heynote-codemirror/src/styles.css

@@ -24,7 +24,7 @@ body {
 
 .blocks-layer .block-even {
     width: 100%;
-    background: #232537;
+    background: #252B37;
 }
 .blocks-layer .block-odd {
     width: 100%;
@@ -32,11 +32,10 @@ body {
 }
 
 .light-theme .blocks-layer .block-even {
-    background: #fffae7;
+    background: #ffffff;
 }
 .light-theme .blocks-layer .block-odd {
-    //background: #f5f9f6;
-    background: #e0f0e4;
+    background: #f4f8f4;
 }
 
 .block-start {

heynote-codemirror/src/theme/light.js

@@ -3,7 +3,7 @@ import { EditorView } from "@codemirror/view";
 export const heynoteLight = EditorView.theme({
     "&": {
         //color: base04,
-        backgroundColor: "#f5f5f5",
+        backgroundColor: "#dfdfdf",
     },
     ".cm-content": {
         //caretColor: cursor,
@@ -13,10 +13,10 @@ export const heynoteLight = EditorView.theme({
         borderLeftColor: "#000",
     },
     ".cm-gutters": {
-        backgroundColor: "transparent",
+        backgroundColor: "rgba(0,0,0, 0.04)",
         color: "rgba(0,0,0, 0.25)",
         border: "none",
-        borderRight: "1px solid rgba(0,0,0, 0.07)",
+        borderRight: "1px solid rgba(0,0,0, 0.05)",
     },
     ".cm-activeLineGutter": {
         backgroundColor: "transparent",