adjust looks of the sidebar only

semanticdata · semanticdata · commit bd76df6d3036 · 2026-01-15T09:30:54.000-06:00
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
@@ -4,19 +4,19 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>NoteKeeper Companion</title>
+    <title>NoteKeeper Sidebar</title>
     <meta name="description"
         content="NoteKeeper Companion is a Firefox extension that transforms the sidebar into a minimalist, auto-saving text editor.">
     <link rel="icon" type="image/svg+xml" href="icon.svg" />
     <link rel="stylesheet" href="styles.css" />
     <script src="preload.js"></script>
 </head>
 
-<body>
+<body class="sidebar-panel">
     <header>
         <div style="display: flex; align-items: center; gap: 0.25rem;">
             <img src="icon.svg" alt="NoteKeeper Logo" width="24" height="24" />
-            <span class="brand">NoteKeeper Companion</span>
+            <span class="brand">NoteKeeper Sidebar</span>
         </div>
 
         <button id="theme-toggle" aria-label="Toggle theme">
@@ -44,8 +44,8 @@
     </main>
 
     <footer>
-        <div class="col-left"><span>Made with <a class="heart" href="https://github.com/semanticdata/notekeeper"
-                    target="_blank" rel="noopener">❤</a> in Minneapolis.</span></div>
+        <!-- <div class="col-left"><span>Made with <a class="heart" href="https://github.com/semanticdata/notekeeper"
+                    target="_blank" rel="noopener">❤</a> in Minneapolis.</span></div> -->
 
         <div class="col-center">
             <span id="word-count">0 words</span>
diff --git a/shared/styles.css b/shared/styles.css
@@ -9,7 +9,8 @@
   --font-ui: ui-monospace, SFMono-Regular, Menlo, monospace;
   --font-body: "Georgia", serif;
   --measure: 65ch;
-  --note-size: 1.125rem; /* Dynamic font size variable */
+  --note-size: 1.125rem;
+  /* Dynamic font size variable */
 }
 
 [data-theme="dark"] {
@@ -70,9 +71,11 @@ footer {
   display: flex;
   align-items: center;
 }
+
 .col-right {
   justify-content: flex-end;
 }
+
 .col-center {
   display: flex;
   gap: 0.5rem;
@@ -108,17 +111,24 @@ textarea:focus {
   border-color: var(--subtle);
 }
 
+.sidebar-panel textarea {
+  min-height: 80vh;
+}
+
 /* Utilities */
 .divider {
   opacity: 0.3;
 }
+
 .heart {
   text-decoration: none;
   color: inherit;
 }
+
 .heart:hover {
   color: #e00;
 }
+
 .saved {
   color: var(--accent);
   transition: color 0.3s;
@@ -145,13 +155,19 @@ textarea:focus {
   color: var(--fg);
 }
 
+#theme-toggle {
+  color: var(--subtle); 
+}
+
 /* Theme Icons */
 #theme-toggle .icon-moon {
   display: none;
 }
+
 [data-theme="dark"] #theme-toggle .icon-sun {
   display: none;
 }
+
 [data-theme="dark"] #theme-toggle .icon-moon {
   display: block;
 }
@@ -172,7 +188,7 @@ textarea:focus {
 
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
 }
 
 .settings-menu[hidden] {
@@ -202,10 +218,10 @@ textarea:focus {
   border-radius: 4px;
   cursor: pointer;
   font-family: var(--font-ui);
-  font-size: 0.85rem;
+  /* font-size: 0.85rem; */
 }
 
 #font-family:focus {
   outline: none;
   border-color: var(--subtle);
-}
+}
