SilverBullet pivot to become an offline-first PWA (#403)

web/styles/main.scss

@@ -4,32 +4,41 @@
 
 @font-face {
   font-family: "iA-Mono";
-  src: url("/iAWriterMonoS-Regular.woff2");
+  src: url("/.client/iAWriterMonoS-Regular.woff2");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "iA-Mono";
-  src: url("/iAWriterMonoS-Bold.woff2");
+  src: url("/.client/iAWriterMonoS-Bold.woff2");
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: "iA-Mono";
-  src: url("/iAWriterMonoS-Italic.woff2");
+  src: url("/.client/iAWriterMonoS-Italic.woff2");
   font-weight: normal;
   font-style: italic;
 }
 
 @font-face {
   font-family: "iA-Mono";
-  src: url("/iAWriterMonoS-BoldItalic.woff2");
+  src: url("/.client/iAWriterMonoS-BoldItalic.woff2");
   font-weight: bold;
   font-style: italic;
 }
 
+html,
+body {
+  margin: 0;
+  height: 100%;
+  padding: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
 #sb-root {
   display: flex;
   flex-direction: column;

web/styles/theme.scss

@@ -14,6 +14,10 @@
   border-bottom: #cacaca 1px solid;
 }
 
+#sb-top.sb-sync-error {
+  background-color: #fdf8cb;
+}
+
 
 .sb-panel {
   border-left: 1px solid #eee;
@@ -131,13 +135,14 @@
 
 
   .cm-panels-bottom {
-      background-color: #e1e1e1;
-      border-top: #cacaca 1px solid;
-      .cm-vim-panel {
-        padding: 0 20px;
-        max-width: var(--editor-width);
-        margin: auto;
-      }
+    background-color: #e1e1e1;
+    border-top: #cacaca 1px solid;
+
+    .cm-vim-panel {
+      padding: 0 20px;
+      max-width: var(--editor-width);
+      margin: auto;
+    }
   }
 
   .cm-editor .cm-tooltip-autocomplete {
@@ -563,6 +568,11 @@ html[data-theme="dark"] {
     color: #fff;
   }
 
+  #sb-top.sb-sync-error {
+    background-color: #622626;
+  }
+
+
   .sb-directive-start {
     background-color: rgb(38, 38, 38) !important;
   }
@@ -588,9 +598,7 @@ html[data-theme="dark"] {
     color: #c7c7c7;
   }
 
-  .sb-meta {
-
-  }
+  .sb-meta {}
 
   .sb-modal-box,
   /* duplicating the class name to increase specificity */
@@ -613,6 +621,7 @@ html[data-theme="dark"] {
       border-top: rgb(62, 62, 62) 1px solid;
       background: rgb(38, 38, 38);
       color: white !important;
+
       .cm-vim-panel {
         max-width: var(--editor-width);
         margin: auto;
@@ -671,4 +680,4 @@ html[data-theme="dark"] {
     }
   }
 
-}
+}