More styling stuff

diff --git a/archived.html b/archived.html
index c3e951daed17a7c951e25c95289e52fd846d89b9..1cf4e009b9584b46b712e9b3b72be77e36b8e9f7 100644 (file)
--- a/archived.html
+++ b/archived.html
@@ -20,7 +20,9 @@
     </header>
     <div id="main">
       <div>
-        <div id="archived"></div>
+        <div id="archived">
+          <p>No archived todos for now...</p>
+        </div>
       </div>
     </div>
     <footer></footer>

diff --git a/archived.js b/archived.js
index 1a9814da1d0ba5cf9c66e06a3a73a7e50decd94d..9996c476a34fe6a8a9924d2bcdd295d1b7646269 100644 (file)
--- a/archived.js
+++ b/archived.js
@@ -97,7 +97,7 @@ const applyListeners = () => {
 
 const hydrateTodos = () => {
 
-  archivedElement.innerHTML = archived
+  if (archived.length > 0) archivedElement.innerHTML = archived
     .map((x, index) => todoElement(x, index))
     .join("");
 

diff --git a/index.html b/index.html
index 4aa4a8f7ecdcf685979c33f6c8400c06bda1e29f..915a93852d5cd3358aa97e72983c3993b1e89741 100644 (file)
--- a/index.html
+++ b/index.html
@@ -22,14 +22,7 @@
       <div>
         <button id="createTodo">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-            <g fill="none" stroke="currentColor" stroke-dasharray="16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-              <path d="M5 12h14">
-                <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="16;0"/>
-              </path>
-              <path stroke-dashoffset="16" d="M12 5v14">
-                <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.5s" to="0"/>
-              </path>
-            </g>
+               <path fill="currentColor" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z" />
           </svg>
         </button>
         <div id="todos"></div>

diff --git a/style.css b/style.css
index 04ccb708bfab26a2394b547d657c12a6fe3b2104..2e831461151e39bb45bc3e38e832c0bf6dc21453 100644 (file)
--- a/style.css
+++ b/style.css
@@ -104,7 +104,11 @@ button {
 }
 
 #override_css {
+  font-family: monospace;
+  border-radius: 0.5rem;
   resize: vertical;
+  border: 0.25rem solid var(--background-tertiary);
+  background-color: var(--background-secondary);
 }
 
 a, a:visited, a:active {
@@ -119,6 +123,10 @@ button:active, a:hover {
   background-color: var(--background-tertiary);
 }
 
+#archived p {
+  text-align: center;
+}
+
 .hidden,
 div:has(> #todos-completed.hidden),
 #main div:has(#todos-completed.hidden) #showCompleted_close,