add styles

semanticdata · semanticdata · commit c466a6df40a8 · 2024-01-11T20:16:09.000-06:00
diff --git a/README.md b/README.md
@@ -14,6 +14,10 @@ A Firefox extension for simple notetaking in Firefox's New Tab.
 
 ![screenshot](screenshot-1.png)
 
+## TODO
+
+- [ ] Integrate a new [options](https://github.com/semanticdata/firefox-chatgpt-in-sidebar/blob/main/options/options.js) menu, or toggle. Could be used to store bg-color, txt-color, etc. This in theory allows the user to customize the editor.
+
 ## Acknowledgments
 
 This extension is based on [Tab Notes](https://github.com/nsht/tab_notes) which hasn't received an update in 4 years.
diff --git a/manifest.json b/manifest.json
@@ -4,15 +4,15 @@
   "browser_specific_settings": {
     "gecko": {
       "id": "newtab-notes@semanticdata",
-      "strict_min_version": "60.0"
+      "strict_min_version": "100.0"
     }
   },
-  "version": "0.1.3",
+  "version": "0.2.0",
   "author": "semanticdata",
   "icons": {
     "48": "icon48.png"
   },
-  "description": "Transforms the New Tab into an auto-savinng text editor.",
+  "description": "Transforms the New Tab into a minimalist, auto-saving text editor.",
   "permissions": [
     "storage"
   ],
diff --git a/newtab.html b/newtab.html
@@ -7,37 +7,48 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>New Tab</title>
   <link rel="icon" type="image/png" sizes="48x48" href="icon48.png">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
   <script type="text/javascript" src="./tabnotes.js"></script>
   <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" /> -->
 </head>
 
 <style>
-  body {
-    margin: 0;
-    padding: 1rem;
+  html {
     background: rebeccapurple;
   }
 
-  #notes {
+  body {
+    padding: 0 1rem;
     box-sizing: border-box;
-    border: 0;
-    font-size: 18px;
+  }
+
+  .container {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+
+  /* #notes {} */
+
+  .textarea {
+    border-radius: 10px;
     line-height: 1.75rem;
-    margin: 0;
-    min-height: 100vh;
-    height: auto;
-    padding: 2rem 15%;
-    resize: none;
-    width: 100%;
+    border: 0;
     background: #202020;
+    color: #fff;
+    height: 100%;
+  }
+
+  .textarea::placeholder {
     color: #ffffff;
-    border-radius: 8px;
   }
 </style>
 
 <body>
-  <main>
-    <textarea id="notes" placeholder="Start writing."></textarea>
+  <main class="">
+    <div class="container">
+      <textarea class="textarea is-medium" id="notes" placeholder="Start writing..."></textarea>
+    </div>
   </main>
 </body>
 
diff --git a/screenshot-1.png b/screenshot-1.png
