use rename notes to todos, add title, add favicon

src/App.svelte

@@ -61,10 +61,13 @@
 </script>
 
 <svelte:head>
-  <title>Notes</title>
+  <title>Todo</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>">
 </svelte:head>
 
 <main>
+  <h1>Just do it</h1>
+
   <MainInput on:added={handleNewNote} />
 
   <section class="notes">
@@ -121,7 +124,7 @@
   }
 
   main {
-    padding: 3rem;
+    padding: 2rem;
     max-width: 50rem;
     margin: 0 auto;
   }
@@ -129,4 +132,11 @@
   .notes {
     margin: 0.5rem 0;
   }
+
+  h1 {
+    color: var(--gray-900);
+    font-weight: 300;
+    text-align: left;
+    letter-spacing: 1px;
+  }
 </style>

src/lib/Actions.svelte

@@ -44,7 +44,7 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
       <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
     </svg>
-    Clear finished notes
+    Clear finished todos
   </button>
   <button on:click={toggleDarkMode}>
     {#if darkMode}

src/lib/MainInput.svelte

@@ -11,7 +11,7 @@
   }
 </script>
 
-<input type="text" on:keyup={handleKeyup} placeholder="Add a new note, tag with #foo and #bar and press ENTER">
+<input type="text" on:keyup={handleKeyup} placeholder="Add a new todo, tag with #foo and #bar and press ENTER">
 
 <style>
   input {