diff --git a/assets/css/custom.css b/assets/css/custom.css index 39ddf1e..5e5529d 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -347,30 +347,31 @@ header { z-index: 1; } -.petal div { +/* This is for each individual petal piece */ +.petal > div { position: absolute; top: 50%; left: 50%; - margin-top: -10px; - margin-left: -5px; - width: 10px; + width: 14px; height: 20px; - border-radius: 5px; - transform-origin: 50% 100%; + margin-left: -7px; + margin-top: -22px; /* Controls distance from center */ + border-radius: 50%; + transform-origin: center 22px; /* PIVOT POINT: (width/2) (margin-top) */ } /* Petal Colors */ -.petal-pink div { background-color: #ffaccb; } -.petal-yellow div { background-color: #fff38a; } -.petal-purple div { background-color: #d9abff; } -.petal-white div { background-color: #ffffff; } +.petal-pink > div { background-color: #ffaccb; } +.petal-yellow > div { background-color: #fff38a; } +.petal-purple > div { background-color: #d9abff; } +.petal-white > div { background-color: #ffffff; } - -.petal .p1 { transform: rotate(0deg) translateY(-15px); } -.petal .p2 { transform: rotate(45deg) translateY(-15px); } -.petal .p3 { transform: rotate(90deg) translateY(-15px); } -.petal .p4 { transform: rotate(135deg) translateY(-15px); } -.petal .p5 { transform: rotate(180deg) translateY(-15px); } -.petal .p6 { transform: rotate(225deg) translateY(-15px); } -.petal .p7 { transform: rotate(270deg) translateY(-15px); } -.petal .p8 { transform: rotate(315deg) translateY(-15px); } +/* Position and rotate each petal */ +.petal .p1 { transform: rotate(0deg); } +.petal .p2 { transform: rotate(45deg); } +.petal .p3 { transform: rotate(90deg); } +.petal .p4 { transform: rotate(135deg); } +.petal .p5 { transform: rotate(180deg); } +.petal .p6 { transform: rotate(225deg); } +.petal .p7 { transform: rotate(270deg); } +.petal .p8 { transform: rotate(315deg); } diff --git a/assets/js/main.js b/assets/js/main.js index 2613a2a..cb4029d 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -16,7 +16,11 @@ document.addEventListener('DOMContentLoaded', () => { // --- Initialization --- function init() { tasks.forEach(renderTask); + // Filter out garden elements whose tasks are no longer completed or no longer exist + const completedTaskIds = new Set(tasks.filter(t => t.completed).map(t => t.id)); + gardenElements = gardenElements.filter(el => completedTaskIds.has(el.taskId)); gardenElements.forEach(renderGardenElement); + saveState(); // Resync localStorage with the filtered elements } // --- State Management --- diff --git a/assets/pasted-20250917-213121-f6094c15.png b/assets/pasted-20250917-213121-f6094c15.png new file mode 100644 index 0000000..bea93e5 Binary files /dev/null and b/assets/pasted-20250917-213121-f6094c15.png differ diff --git a/assets/pasted-20250917-213310-92d2c7b6.png b/assets/pasted-20250917-213310-92d2c7b6.png new file mode 100644 index 0000000..4cefe14 Binary files /dev/null and b/assets/pasted-20250917-213310-92d2c7b6.png differ diff --git a/assets/pasted-20250917-213502-cf2d46cd.png b/assets/pasted-20250917-213502-cf2d46cd.png new file mode 100644 index 0000000..68e0df3 Binary files /dev/null and b/assets/pasted-20250917-213502-cf2d46cd.png differ