more css tweaks

new font and better margins

src/lib/apps/todoApp.svelte

@@ -45,7 +45,7 @@
 </script>
 
 <div class = "panel">
-    <h2 class= "title">TODO</h2>
+    <h2 class= "title">todo</h2>
     <hr/>
     <div class="todo-input">
         <input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
@@ -71,6 +71,7 @@
 * {
     --cream: #FEF9EF;
     --blue: #227c9d;
+    --blue-disabled: #aabac0;
     --green: #17C3B2;
     --yellow: #FFCB77;
     --red: #FE6D73;
@@ -78,23 +79,33 @@
 
 
 .panel {
-        padding: 10px;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
         background-color: var(--cream);
+        font-size: 1rem;
+        font-family: 'Atkinson Hyperlegible', sans-serif;
 }
 @media only screen and (min-width: 500px) {
     .panel {
         margin-left: auto;
         margin-right: auto;
         width: 500px;
-        border: solid var(--cream) 1px;
+        border: solid var(--cream) 0px;
-        border-radius: 5px;
+        border-radius: 10px;
     }
 }
 
+.title {
+    margin-left: 2rem;
+    font-weight: 400;
+    font-size: 3rem;
+    color: var(--yellow);
+}
+
 hr {
-    margin-top: 10px;
+    margin-left: 1rem;
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
-    border: 1px solid var(--yellow);
+    border: 2px solid var(--yellow);
 }
 
 button {
@@ -103,106 +114,118 @@ button {
     background-color: var(--blue);
     border: solid var(--blue) 1px;
     border-radius: 5px;
-    color: var(--cream);
+    color: white;
+    font-family: 'Atkinson Hyperlegible', sans-serif;
+    font-size: 1rem;
 }
 
 .todo-input {
     font-size: 0px;
+    margin: 1rem;
 }
 .todo-text {
-    padding: 7px;
+    padding: 4px;
     margin: 0px;
     border: solid white 2px;
     border-right: 0px;
     border-radius: 0px;
     border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
+    font-family: 'Atkinson Hyperlegible', sans-serif;
+    font-size: 1rem;
 }
 
 .todo-text:focus {
     outline: none;
     border-bottom-color: var(--blue);
-    /* border-left-color: var(--blue);
-    border-top-color: var(--blue); */
 }
 
 .todo-add {
-    padding: 8px;
+    border-bottom-left-radius: 0px;
-    border-radius: 0px;
+    border-top-left-radius: 0px;
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
 }
 
 .disabled {
+    background-color: var(--blue-disabled);
+    border-color: var(--blue-disabled);
+}
+
+button:active {
     background-color: var(--yellow);
     border-color: var(--yellow);
     color: black;
 }
 
-button:active {
+button:active.disabled {
-    background-color: var(--yellow);
+    background-color: var(--blue-disabled);
-    color: black;
+    border-color: var(--blue-disabled);
-}
+    color: white;
-
-.title {
-    padding: 0px;
-    margin: 0px;
-    margin-left: 5px;
-    font-weight: 400;
-    font-size: 1.5rem;
-    color: var(--yellow);
 }
 
 .todo-filter {
-    padding-top: 10px;
+    margin-top: 1rem;
-    padding-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .todo-filter button {
-    margin-right: 5px;
+    margin-right: 0.5rem;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
 }
 
 .todo-list {
-    display: flex;
+    padding: 1rem;
-    flex-direction: column;
+    padding-bottom: 0.5rem;
-    min-height: 10em;
+    background-color: var(--blue-disabled);
+    /* list
+        * padding 1.5rem
+       todo
+        * content 1.0rem
+        * padding 1.0rem
+        * marging 0.5rem
+       button
+        * padding 6px
+        * border  6px
+       total
+        (1.5 + 2.5*3)rem (9rem)
+        + (12*3)px       (36px)
+    */
+    min-height: calc(11.5rem + 48px);
+
 }
 
 .todo {
-    padding: 10px;
+    padding: 0.5rem;
-    margin: 5px 0px 5px 0px;
+    margin-bottom: 0.5rem;
     background-color: var(--yellow);
     border-radius: 5px;
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    font-size: 1.2rem;
 }
 
 .todo.done {
-    /* background-color: #FEF9EF; */
+    background-color: var(--cream);
-}
-
-.done p {
-    /* text-decoration: line-through; */
-    color: var(--cream);
 }
 
 .todo button {
+    padding: 3px;
     margin-left: auto;
     background-color: var(--green);
-    border-color: var(--green);
+    border: solid 3px var(--green);
-    font-size: 1rem;
     color: var(--cream)
 }
 
 .todo.done button {
     background-color: var(--red);
     border-color: var(--red);
-    color:var(--cream);
+    color: var(--cream);
+}
+
+.todo button:active {
+    background-color: var(--yellow);
+    color: black;
 }
 
 </style>

src/routes/__layout.svelte

@@ -10,6 +10,8 @@
 </div>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
+
 :global(*) {
     padding: 0px;
     margin: 0px;
@@ -25,4 +27,5 @@
     display: flex;
     flex-direction: column;
 }
+
 </style>