Fix up a lot of dark-mode and chromium issues, as well as some branding

index.html

@@ -17,11 +17,13 @@
     <div class="mainDiv">
         <div class="startDiv">
             <h1>Safe home for your notes</h1>
-            <p class="burgerText">Burgernotes is the service for storing your <b>shopping list</b>, <b>tasks'n
+            <p class="burgerText">Burgernotes is the number one service for storing your <b>shopping list</b>, <b>tasks'n todos</b>, <b>code snippets</b> plus more. And it's totally free.</p>
-                    todos</b>, <b>code snippets</b> plus more. Oh, and did we mention it's free too?</p>
             <br>
-            <a>🍔 Download</a> or
+            <div class="downloadDiv">
+                <a>🍔 Download</a>
+                <p> or </p>
                 <a href="/app">Open in your web browser</a>
+            </div>
             <br><br>
             <br>
         </div>
@@ -34,8 +36,7 @@
         <div class="feature black">
             <h1>For your device.</h1>
             <p>Burgernotes features a simple, yet powerful user interface.</p>
-            <p>We support your device, including Windows, macOS, Linux + iOS and
+            <p>We support many devices, including Windows, macOS, Linux + iOS and Android.</p>
-                Android.</p>
         </div>
 
         <div class="feature" style="background-color: rgba(0, 0, 0, 0); margin-bottom: 0;">
@@ -53,15 +54,15 @@
             </details>
             <br>
             <details>
-                <summary>How can i trust Burgernotes to keep my notes private and secure?</summary>
+                <summary>How can I trust Burgernotes to keep my notes private and secure?</summary>
                 <br>
-                We use industry-standard encryption (AES-256) to keep your notes secure.<br>End-to-end encryption ensures your notes are only visible to you, not Hectabit, or anyone else. Our source code is fully open, meaning anyone can audit our encryption.
+                We use industry-standard encryption (AES-256) to keep your notes secure.<br>End-to-end encryption ensures your notes are only visible to you, not us, or anyone else. Our source code is fully open, meaning anyone can audit our encryption.
             </details>
             <br>
             <details>
                 <summary>Does Burgernotes accept donations?</summary>
                 <br>
-                Yes! Donations of any amount is appreciated to keep Burgernotes running. <br>You may donate at www.hectabit.org/donate, the non-profit software project behind Burgernotes.
+                Yes! Donations of any amount is appreciated to keep Burgernotes running. <br>You may donate at https://www.hectabit.org/donate, the non-profit software project behind Burgernotes.
             </details>
         </div>
 

static/css/style.css

@@ -4,7 +4,6 @@
 :root {
     --contrast: #eee;
     --contrast2: #fff;
-    --invertdm: 0%;
     --bar: #f4f4f4;
     --editor: #ffffff;
     --text-color: #000000;
@@ -18,6 +17,7 @@
     --unselected-note-button-text-color: #000000;
     --option-background: #ffffff;
     --invert: 100%;
+    --sessioninvert: 100%;
     --bottomBarHover: #e4e4e4;
 }
 
@@ -25,7 +25,6 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-	--invertdm: 100%;
         --contrast: #2d2f21;
         --contrast2: #2d2f21;
         --bar: #2d2f31;
@@ -41,6 +40,7 @@
         --unselected-note-button-text-color: #ffffff;
         --option-background: #202124;
         --invert: 100%;
+        --sessioninvert: 0%;
         --bottomBarHover: #e4e4e4;
     }
 
@@ -56,10 +56,6 @@
         color: white !important;
     }
 
-    .newNote img {
-        filter: invert(100%);
-    }
-
     #errorDiv p {
         color: white !important;
     }
@@ -102,10 +98,10 @@
     }
 
     .mainDiv .black {
-        background-color: #000000 !important;
+        background-color: var(--bar) !important;
     }
     .mainDiv .black p {
-        background-color: #000000 !important;
+        background-color: var(--bar) !important;
     }
 
     .mainDiv .yellow {
@@ -180,7 +176,7 @@ body {
     border-top-width: 1px;
     display: flex;
     text-wrap: nowrap;
-    overflow-x: scroll;
+    overflow-x: auto;
 }
 
 .bottomBar button {
@@ -194,7 +190,6 @@ body {
 }
 
 .bottomBar .markdownButton {
-    filter: invert(var(--invertdm));
     padding-left: 17.5px;
     padding-right: 17.5px;
     background-image: url("../../static/svg/markdown.svg");
@@ -204,7 +199,6 @@ body {
 }
 
 .bottomBar .removeButton {
-    filter: invert(var(--invertdm));
     padding-left: 17.5px;
     padding-right: 17.5px;
     background-image: url("../../static/svg/delete.svg");
@@ -234,7 +228,6 @@ body {
     height: 90px;
 
     background-color: var(--bar);
-
     border: solid;
     border-color: var(--border-color);
     border-width: 1px;
@@ -279,7 +272,6 @@ body {
 
 .topBar img {
     scale: 0.5;
-    filter: invert(var(--invertdm));
 }
 
 .notesBar {
@@ -298,7 +290,7 @@ body {
 
 .notesDiv {
     height: calc(100% - 50px);
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .notesBar .noteButton, .notesBar .loadingStuff {
@@ -433,7 +425,7 @@ iframe#markdown {
     flex-direction: column;
     max-width: 90%;
     max-height: 90%;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .optionsDiv button {
@@ -523,11 +515,11 @@ iframe#markdown {
 .optionsDiv img {
     height: 18px;
     padding-right: 5px;
-    filter: invert(var(--invert));
     position: absolute;
     left: 20px;
     scale: 1.3;
     transform: translateY(1px);
+    filter: invert(var(--sessioninvert)) !important;
 }
 
 .optionsDiv .section {
@@ -571,7 +563,7 @@ iframe#markdown {
 
 .sessionDiv img {
     display: inline;
-    filter: none;
+    filter: none !important;
     height: 35px;
     position: static;
     margin-right: 5px;
@@ -651,6 +643,7 @@ iframe#markdown {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    height: 100%;
 }
 
 .w100 {
@@ -719,6 +712,20 @@ iframe#markdown {
     font-size: 18px;
 }
 
+.downloadDiv {
+    justify-content: center;
+    display: flex;
+}
+
+.downloadDiv p {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.downloadDiv a {
+    margin: 0 !important;
+}
+
 .mainDiv a {
     padding: 15px;
     padding-left: 20px;
@@ -801,7 +808,6 @@ iframe#markdown {
 .links a img {
     transform: translateY(5px);
     padding-right: 10px;
-    filter: invert(var(--invertdm));
 }
 
 .links a:hover {