Housekeeping (#306)

Author: davidmyersdev

README.md

@@ -4,13 +4,15 @@
 [![Donate](https://img.shields.io/badge/donate-FF5F5F?style=for-the-badge&logo=ko-fi&logoColor=white)](https://voracious.link/donate)
 # Octo
 
-Unlock the full potential of your accumulated knowledge. Sign up at [octo.app](https://octo.app).
+A local-first knowledge management app for deep work.
+
+Get started for free at [octo.app](https://octo.app).
 
 <a href="https://octo.app">
   <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="assets/screenshot-dark.png">
-    <source media="(prefers-color-scheme: light)" srcset="assets/screenshot-light.png">
-    <img alt="Shows the Octo app with an open tab containing a markdown document." src="assets/screenshot-dark.png">
+    <source media="(prefers-color-scheme: dark)" srcset="assets/screenshot-desktop-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="assets/screenshot-desktop-light.png">
+    <img alt="Shows the Octo app with an open tab containing a markdown document." src="assets/screenshot-desktop-dark.png">
   </picture>
 </a>
 

assets/css/tailwind.css

@@ -3,6 +3,32 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --syntax-blue: #5cbaff;
+    --syntax-green: #a4f0c8;
+    --syntax-grey: #557294;
+    --syntax-pink: #b464cd;
+    --syntax-purple: #a4a4f0;
+    --syntax-yellow: #dad17e;
+
+    --ink-syntax-atom-color: var(--syntax-blue);
+    --ink-syntax-comment-color: var(--syntax-grey);
+    --ink-syntax-keyword-color: var(--syntax-pink);
+    --ink-syntax-meta-color: var(--syntax-yellow);
+    --ink-syntax-name-color: var(--syntax-blue);
+    --ink-syntax-name-property-color: var(--syntax-purple);
+    --ink-syntax-name-property-definition-color: var(--syntax-purple);
+    --ink-syntax-name-variable-color: var(--syntax-blue);
+    --ink-syntax-name-variable-definition-color: var(--syntax-blue);
+    --ink-syntax-name-variable-local-color: var(--syntax-blue);
+    --ink-syntax-number-color: var(--syntax-blue);
+    --ink-syntax-operator-color: var(--syntax-purple);
+    --ink-syntax-processing-instruction-color: var(--syntax-grey);
+    --ink-syntax-punctuation-color: var(--syntax-purple);
+    --ink-syntax-string-color: var(--syntax-green);
+    --ink-syntax-url-color: var(--syntax-grey);
+  }
+
   :root {
     @apply bg-layer;
     @apply text-layer;
@@ -89,6 +115,13 @@
 
   .light,
   [data-appearance=light] {
+    --syntax-blue: #0066cc;
+    --syntax-green: #2e8b57;
+    --syntax-grey: #708090;
+    --syntax-pink: #9932cc;
+    --syntax-purple: #6a5acd;
+    --syntax-yellow: #9b870c;
+
     --layer-0-bg: 244 244 245;
     --layer-0-bg-hover: 228 228 231;
     --layer-0-bg-active: 228 228 231;

assets/screenshot-dark.png

@@ -166,7 +166,6 @@ export default defineComponent({
   --ink-block-background-color: rgb(v-bind('nextLayer.bgCssVar'));
   --ink-block-background-color-on-hover: rgb(v-bind('nextLayer.bgHoverCssVar'));
   --ink-syntax-hashtag-background-color: rgb(v-bind('nextLayer.bgCssVar'));
-  --ink-syntax-processing-instruction-color: rgb(v-bind('nextLayer.textCssVar') / 0.1);
 
   .core-editor-toolbar {
     max-width: var(--core-editor-max-width-in-chars);
@@ -234,10 +233,10 @@ export default defineComponent({
       max-width: var(--core-editor-max-width-in-chars);
     }
 
-    .ink-mde-task-toggle {
-      @apply checkbox;
+    .ink-mde-task-marker {
+      @apply checkbox outline-1;
 
-      top: -2px;
+      translate: 0 -2px;
     }
 
     .cm-editor,

assets/screenshot-desktop-dark.png

@@ -182,8 +182,10 @@ export default defineComponent({
 
 <style scoped>
 :deep(.editor) {
-  .ink-mde-editor {
-    padding: 1.5rem;
+  .ink-mde {
+    .ink-mde-editor {
+      padding: 1rem;
+    }
   }
 }
 </style>