add makefile and tweak CSS

Makefile

@@ -0,0 +1,8 @@
+todo:
+	go build main.go
+
+air:
+	air
+
+tailwind:
+	npx tailwindcss -i input.css -o static/output.css --watch

static/output.css

@@ -534,6 +534,20 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .flex {
   display: flex;
 }
@@ -546,10 +560,22 @@ video {
   flex-grow: 1;
 }
 
+.basis-1\/2 {
+  flex-basis: 50%;
+}
+
+.basis-1\/4 {
+  flex-basis: 25%;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -564,6 +590,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -592,6 +622,25 @@ video {
   padding: 2rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -615,3 +664,9 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}

templates/todos.html

@@ -1,19 +1,21 @@
-<ul id="todos" class="shadow-lg grid grid-cols-1 gap-2">
+<ul id="todos" class="grid grid-cols-1 gap-2">
   {{range $index, $task := . }}
-  <li id={{$task.Id}} class="p-4 rounded-xl bg-slate-100">
+  <li id={{$task.Id}} class="p-4 shadow rounded-xl bg-slate-100">
-    <input type="checkbox" {{if $task.Completed}}checked{{end}}
+    <div class="flex flex-row">
+      <input class="px-2" type="checkbox" {{if $task.Completed}}checked{{end}}
         hx-post="/toggle-todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">
-      {{$task.Title}}
+      <p class="mx-3">{{$task.Title}}</p>
-    <button class="bg-red-500"
+      <button class="px-4 rounded-xl bg-red-500"
         hx-delete="/todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">X</button>
+    </div>
   </li>
   {{end}}
   <li>
 <form class="p-4 rounded-xl bg-slate-100" hx-post="/todos" hx-swap="outerHTML" hx-target="#todos">
 <label class="flex p-4">
     Title:
-    <input type="text" name="title" class="grow" ></input>
+    <input type="text" name="title" class="grow mx-2 px-2 bg-slate-200" ></input>
-    <button name="submit" class="bg-sky-500">Add</button>
+    <button name="submit" class="px-4 rounded-xl bg-sky-500">Add</button>
 </label>
 </form>