First iteration of mobile view enhancements

diff --git a/app/style.css b/app/style.css
index e0e0cf62b98628ee813acf846377205c2ed4256d..646f1ed16fc3d8605333d24d2296e617541c6d46 100644 (file)
--- a/app/style.css
+++ b/app/style.css
@@ -2,9 +2,12 @@
   color-scheme: light dark;
 
   --border-radius-inner: 0.25rem;
+  @media screen and (max-width: 400px) {
+    --border-radius-inner: 0.5rem;
+  }
   --border-radius-outer: calc(var(--border-radius-inner) * 2);
 }
-
+  
 body {
   display: flex;
   flex-direction: column;
@@ -145,7 +148,7 @@ todo {
       width: -webkit-fill-available;
       resize: none;
       border: unset;
-      border-radius: 0.25rem;
+      border-radius: var(--border-radius-inner);
       background-color: var(--background-primary);
       &:focus-visible {
         outline: unset;
@@ -273,10 +276,19 @@ div:has(> #todos-completed.hidden),
     font-size: 1.5rem !important;
   }
   p, a {
-    font-size: 1rem !important;
+    font-size: 1.25rem !important;
+  }
+  textarea {
+    font-size: 1.25rem !important;
   }
   button {
-    font-size: 1rem !important;
+    font-size: 1.25rem !important;
+  }
+  #createTodo, #showCompleted, #exportData {
+    & > svg {
+      width: 36px !important;
+      height: 36px !important;
+    }
   }
 }