started card settings

README.md

@@ -62,7 +62,7 @@ Better Canvas introduces improvements to the Canvas user interface:
 - custom side logo
 - widgets (music, timer)
 - fix darkmode fixer
-- more card settings (Image Size, Roundness, Width, Space Between)
+- more card settings (Image Size, Roundness, Width, Space Between) (in progress, to be theme compatible)
 - calender sync
 - update better todo list
 - better sidebar
@@ -321,6 +321,10 @@ here is some proof the lisence was changed and this is based on the reverted MIT
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+[![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC_BY--NC--SA_4.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/)
+
+You can fork, modify, and use this code however you like with attributes, but no commercial use.
+
 ![Better Canvas](/icon/icon-48.png)
 
 Copyright (c) 2026 Guy Sandler

html/popup.html

@@ -669,6 +669,33 @@
             <div id="advanced-current"></div>
             <div id="advanced-past"></div>
         </div>
+        <div class="option-container">
+            <h3 class="header-small">More Card Styles</h3>
+            <!-- Image Size, Roundness, Width, Space Between -->
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                <div class="sub-option">
+                    <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
+                        <span class="sub-text" style="width:75px;">Image Size</span>
+                        <input type="number" id="imageSize" class="card-input" min="0" max="300" value="1" style="width:80px;">
+                        <span class="sub-text">px</span>
+                    </div>
+                </div>
+                <div class="sub-option">
+                    <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
+                        <span class="sub-text" style="width:75px;">Card Roundness</span>
+                        <input type="number" id="cardRoundness" class="card-input" min="0" max="300" value="1" style="width:80px;">
+                        <span class="sub-text">px</span>
+                    </div>
+                </div>
+                <div class="sub-option">
+                    <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
+                        <span class="sub-text" style="width:75px;">Card Spacing</span>
+                        <input type="number" id="cardSpacing" class="card-input" min="0" max="300" value="1" style="width: 80px;">
+                        <span class="sub-text">px</span>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="option-container">
             <h3 class="header-small">Missing cards?</h3>
             <div style="display: flex; gap: 10px; align-items: center;">

js/background.js

@@ -128,4 +128,4 @@ chrome.runtime.onInstalled.addListener(function () {
     });
 });
 
-chrome.runtime.setUninstallURL("https://diditupe.dev/bettercanvas/goodbye");
+// chrome.runtime.setUninstallURL("https://diditupe.dev/bettercanvas/goodbye");

js/popup.js

@@ -624,6 +624,18 @@ function setup() {
         });
     });
     
+    document.getElementById("imageSize").addEventListener("input", (e) => {
+        chrome.storage.sync.set({"imageSize": parseInt(e.target.value)});
+        sendFromPopup("updateCardStyles", { imageSize: parseInt(e.target.value) });
+    })
+    document.getElementById("cardRoundness").addEventListener("input", (e) => {
+        chrome.storage.sync.set({"cardRoundness": parseInt(e.target.value)});
+        sendFromPopup("updateCardStyles", { cardRoundness: parseInt(e.target.value) });
+    })
+    document.getElementById("cardSpacing").addEventListener("input", (e) => {
+        chrome.storage.sync.set({"cardSpacing": parseInt(e.target.value)});
+        sendFromPopup("updateCardStyles", { cardSpacing: parseInt(e.target.value) });
+    })
 }
 
 function applyGPAPreset(bounds) {