From e59785e786f81c9d80d4809c0361c8e7bd2607dc Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Fri, 5 Dec 2025 10:56:37 -0600
Subject: [PATCH] fixing a lot of alignment issues

---
 static/css/main.css               | 111 +++++++++++++++++++++++
 templates/shortcodes/mt_form.html | 143 ++++++++++++++----------------
 2 files changed, 179 insertions(+), 75 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 50f06d3..7cfebee 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -36,6 +36,8 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -50,6 +52,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -313,6 +316,9 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-8 {
+    margin: calc(var(--spacing) * 8);
+  }
   .m-300 {
     margin: calc(var(--spacing) * 300);
   }
@@ -449,6 +455,10 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
@@ -661,6 +671,9 @@
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -744,6 +757,9 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -770,6 +786,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -886,6 +905,9 @@
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -982,6 +1004,12 @@
   .align-text-bottom {
     vertical-align: text-bottom;
   }
+  .align-text-top {
+    vertical-align: text-top;
+  }
+  .align-top {
+    vertical-align: top;
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -1005,6 +1033,10 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1285,6 +1317,11 @@
       border-width: 0px;
     }
   }
+  .file\:bg-gray-500 {
+    &::file-selector-button {
+      background-color: var(--color-gray-500);
+    }
+  }
   .file\:bg-neutral-500 {
     &::file-selector-button {
       background-color: var(--color-neutral-500);
@@ -1312,6 +1349,11 @@
       font-weight: var(--font-weight-semibold);
     }
   }
+  .file\:text-gray-100 {
+    &::file-selector-button {
+      color: var(--color-gray-100);
+    }
+  }
   .file\:text-neutral-100 {
     &::file-selector-button {
       color: var(--color-neutral-100);
@@ -1364,6 +1406,13 @@
       }
     }
   }
+  .hover\:bg-blue-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-900);
+      }
+    }
+  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -1466,6 +1515,24 @@
       }
     }
   }
+  .hover\:file\:bg-blue-300 {
+    &:hover {
+      @media (hover: hover) {
+        &::file-selector-button {
+          background-color: var(--color-blue-300);
+        }
+      }
+    }
+  }
+  .hover\:file\:text-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        &::file-selector-button {
+          color: var(--color-blue-500);
+        }
+      }
+    }
+  }
   .hover\:file\:ring-2 {
     &:hover {
       @media (hover: hover) {
@@ -1476,6 +1543,15 @@
       }
     }
   }
+  .hover\:file\:ring-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        &::file-selector-button {
+          --tw-ring-color: var(--color-blue-500);
+        }
+      }
+    }
+  }
   .hover\:file\:ring-offset-2 {
     &:hover {
       @media (hover: hover) {
@@ -1495,6 +1571,11 @@
       }
     }
   }
+  .focus\:bg-blue-900 {
+    &:focus {
+      background-color: var(--color-blue-900);
+    }
+  }
   .focus\:ring {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1512,6 +1593,11 @@
       --tw-ring-color: var(--color-blue-500);
     }
   }
+  .focus\:ring-blue-700 {
+    &:focus {
+      --tw-ring-color: var(--color-blue-700);
+    }
+  }
   .focus\:ring-white {
     &:focus {
       --tw-ring-color: var(--color-white);
@@ -1643,6 +1729,11 @@
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
   }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .sm\:flex-col {
     @media (width >= 40rem) {
       flex-direction: column;
@@ -1739,6 +1830,16 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-5 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
@@ -1822,11 +1923,21 @@
       flex-basis: 100%;
     }
   }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .lg\:grid-cols-5 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
diff --git a/templates/shortcodes/mt_form.html b/templates/shortcodes/mt_form.html
index 8987d16..b937d32 100644
--- a/templates/shortcodes/mt_form.html
+++ b/templates/shortcodes/mt_form.html
@@ -1,5 +1,5 @@
 {% set formClasses = "bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" -%}
-{% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
+{% set requiredField = "inline-block text-[#f39] text-xs align-super" -%}
 
 <script>
  function submitForm(e) {
@@ -64,16 +64,16 @@
  document.addEventListener('DOMContentLoaded', process);
 </script>
 
-<div class="m-4">
-  <div class="p-2">
+<div class="m-4 grid grid-cols-2 gap-2">
+  <div class="flex rounded-md p-4 bg-gray-700">
       <input type="checkbox" name="student-agree" id="student-agree"
-             onclick="process()" class="form-checkbox {{ formClasses }}" />
-    <label for="student-agree">I agree to the above</label>
+             onclick="process()" class="basis-1/3 cursor-pointer peer form-checkbox size-6 self-center" />
+      <label for="student-agree" class="ml-4 block cursor-pointe self-center">I agree to the above</label>
   </div>
-  <div class="p-2">
+  <div class="flex rounded-md p-4 bg-gray-700">
       <input type="checkbox" name="adult-agree" id="adult-agree"
-             onclick="process()" class="form-checkbox {{ formClasses }}" />
-    <label for="adult-agree">My parent agrees to the above</label>
+             onclick="process()" class="basis-1/3 cursor-pointer peer form-checkbox size-6 self-center" />
+      <label for="adult-agree" class="ml-4 block cursor-pointer self-center">My parent agrees to the above</label>
   </div>
 </div>
 
@@ -88,7 +88,7 @@
         <h3 class="basis-full">Mission Trip Application</h3>
         <div class="basis-full flex flex-wrap my-4">
             <label for="firstname" class="basis-full mx-2">What is your first and last name?
-<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
+<span class='{{ requiredField }}'>* required</span></label>
             <br/>
             <input type="text" id="firstname" name="firstname" required
                    placeholder="First Name" class="flex-1 form-input {{ formClasses }}">
@@ -97,7 +97,7 @@
         </div>
         <div class="basis-full flex flex-wrap my-4">
             <label for="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?
-<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
+<span class='{{ requiredField }}'>* required</span></label>
 
             <input type="text" id="parentfirstname" name="parentfirstname"
                    class="flex-1 form-input {{ formClasses }}"
@@ -110,7 +110,7 @@
         <input type="date" id="birthdate" name="birthdate"
                class="form-date {{ formClasses }}">
         <label for="gender" class="basis-full mt-4 mx-2">Gender</label>
-        <div class="grid w-full grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
+        <div class="mx-2 grid w-full grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
             <div>
                 <input type="radio" name="gender" id="gender-male" value="male" class="peer hidden" checked />
                 <label for="gender-male" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Male</label>
@@ -123,7 +123,7 @@
         </div>
 
         <div class="basis-full flex flex-wrap my-4">
-            <label for="street" class="basis-full mx-2">What is your address? <span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
+            <label for="street" class="basis-full mx-2">What is your address? <span class='{{ requiredField }}'>* required</span></label>
             <input type="text" id="street" name="street"
                    class="basis-full form-input {{ formClasses }}"
                    placeholder="Street Address" required>
@@ -137,56 +137,51 @@
                    class="flex-auto form-input {{ formClasses }}"
                    placeholder="Zip Code" required>
         </div>
-        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="cellphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Cell phone</label>
-            <input type="tel" id="cellphone" name="cellphone"
-                   class="flex-auto form-input {{ formClasses }}">
-        </div>
-        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="parentphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent phone</label>
-            <input type="tel" id="parentphone" name="parentphone"
-                   class="flex-auto form-input {{ formClasses }}">
-        </div>
-        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="email" class="lg:basis-1/4 basis-full mr-4 ml-2">Email</label>
-            <input type="email" id="email" name="email"
-                   pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
-                   class="flex-auto form-input {{ formClasses }}">
-        </div>
-        <div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
-            <label for="parentemail" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent's email?</label>
-            <input type="email" id="parentemail" name="parentemail"
-                   pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
-                   class="flex-auto form-input {{ formClasses }}">
-        </div>
 
-        <label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>
+        <label for="cellphone" class="basis-full mr-4 ml-2">Cell phone</label>
+        <input type="tel" id="cellphone" name="cellphone"
+               class="flex-auto form-input {{ formClasses }}">
+        <label for="parentphone" class="basis-full mr-4 ml-2">Parent phone</label>
+        <input type="tel" id="parentphone" name="parentphone"
+               class="flex-auto form-input {{ formClasses }}">
+        <label for="email" class="basis-full mr-4 ml-2">Email</label>
+        <input type="email" id="email" name="email"
+               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+               class="flex-auto form-input {{ formClasses }}">
+        <label for="parentemail" class="basis-full mr-4 ml-2">Parent's email?</label>
+        <input type="email" id="parentemail" name="parentemail"
+               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+               class="flex-auto form-input {{ formClasses }}">
+
+        <label for="school" class="basis-full mx-2">What school do you go to?</label>
         <input type="text" id="school" name="school" class="basis-full form-input {{ formClasses }}">
 
-        <div class="basis-full my-4">
-            <label for="grade" class=" mx-2">Grade</label>
-            <br/>
-            <input type="radio" id="grade" name="grade" value="8"
-                   class="form-input {{ formClasses }}" checked>
-            <label for="grade" class="">8th</label>
-            <br/>
-            <input type="radio" id="grade" name="grade" value="freshman"
-                   class="form-input {{ formClasses }}">
-            <label for="grade" class="">Freshman</label>
-            <br/>
-            <input type="radio" id="grade" name="grade" value="sophomore"
-                   class="form-input {{ formClasses }}">
-            <label for="grade" class="">Sophomore</label>
-            <br/>
-            <input type="radio" id="grade" name="grade" value="junior"
-                   class="form-input {{ formClasses }}">
-            <label for="grade" class="">Junior</label>
-            <br/>
-            <input type="radio" id="grade" name="grade" value="senior"
-                   class="form-input {{ formClasses }}">
-            <label for="grade" class="">Senior</label>
+        <label for="grade" class="basis-full mx-2 mt-2">Grade</label>
+        <div class="mx-2 mb-2 grid w-full lg:grid-cols-5 md:grid-cols-5 gap-2 rounded-xl bg-gray-500 p-2">
+            <div>
+                <input type="radio" name="grade" id="grade-8" value="8" class="peer hidden" checked />
+                <label for="grade-8" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">8th</label>
+            </div>
+
+            <div>
+                <input type="radio" name="grade" id="grade-freshman" value="freshman" class="peer hidden" />
+                <label for="grade-freshman" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Freshman</label>
+            </div>
+
+            <div>
+                <input type="radio" name="grade" id="grade-sophomore" value="sophomore" class="peer hidden" />
+                <label for="grade-sophomore" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Sophomore</label>
+            </div>
+            <div>
+                <input type="radio" name="grade" id="grade-junior" value="junior" class="peer hidden" />
+                <label for="grade-junior" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Junior</label>
+            </div>
+            <div>
+                <input type="radio" name="grade" id="grade-senior" value="senior" class="peer hidden" />
+                <label for="grade-senior" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Senior</label>
+            </div>
         </div>
-        <div class="basis-full flex flex-wrap my-4">
+        <div class="basis-full flex flex-wrap my-2">
             <label for="pastorfirstname" class="basis-full mx-2">What is your pastor's name and number?</label>
             <input type="text" id="pastorfirstname" name="pastorfirstname"
                    class="flex-auto form-input {{ formClasses }}"
@@ -198,7 +193,7 @@
                    class="flex-auto form-input {{ formClasses }}"
                    placeholder="Phone Number">
         </div>
-        <div class="basis-full my-4 flex flex-wrap items-center">
+        <div class="basis-full my-2 flex flex-wrap items-center">
             <label for="church" class="basis-full mx-2">What church do you attend?</label>
             <input type="text" id="church" name="church"
                    class="basis-full form-input {{ formClasses }}">
@@ -241,16 +236,16 @@
             <option value="xxl">2XL</option>
             <option value="xxxl">3XL</option>
         </select>
-        <div class="basis-full my-4 mb-8 flex flex-wrap">
+        <div class="basis-full my-4 mb-4 flex flex-wrap">
             <label for="image" class="basis-full mx-2">
                 Please give us a picture you'd like to use on prayer cards.
             </label>
             <input type="file" id="image" name="image"
-                   class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
+                   class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gray-500 file:text-gray-100 hover:file:bg-blue-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-blue-500 hover:file:ring-blue-500">
         </div>
 
-        <h4 class="mb-4">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</h4>
-        <div class="grid w-full grid-cols-3 gap-2 rounded-xl bg-gray-500 p-2">
+        <h4 class="mx-2 mb-4">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</h4>
+        <div class="mx-2 grid w-full lg:grid-cols-3 md:grid-cols-3 gap-2 rounded-xl bg-gray-500 p-2">
             <div>
                 <input type="radio" name="trip" id="1" value="tulsa" class="peer hidden" checked />
                 <label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
@@ -357,19 +352,17 @@
                       class="form-input w-full h-64 {{ formClasses }}"
                       placeholder=""></textarea>
         </div>
-        <div class="basis-full my-10">
-            <label for="final-agreement" class="px-2">
-                I understand that in order for my application to be accepted I need to have this application, a health form, a picture, the $25 registration fee, and 3 reference forms all completed.
+        <label for="final-agreement" class="basis-full px-2">
+            I understand that in order for my application to be accepted I need to have this application, a health form, a picture, the $25 registration fee, and 3 reference forms all completed. <span class="{{ requiredField }}">* required</span>
+        </label>
+        <div class="basis-full">
+            <input type="radio" value="yes" id="final-agreement" name="final-agreement"
+                   class="form-input {{ formClasses }}" required>
+            <label for="final-agreement" class="">
+                I understand
             </label>
-            <div class="my-4">
-                <input type="radio" value="yes" id="final-agreement" name="final-agreement"
-                       class="form-input {{ formClasses }}" required>
-                <label for="final-agreement" class="mt-4">
-                    I understand
-                </label>
-            </div>
         </div>
-        <label for="registration" class="basis-full px-2">
+        <label for="registration" class="basis-full px-2 mt-10">
             Would you like to pay the registration fee now or later?
         </label>
         <div class="basis-full">
@@ -404,7 +397,7 @@
             </label>
         </div>
         <div class="basis-full mt-8">
-            <button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
+            <button type="submit" class="content-right rounded-lg bg-blue-700 h-12 w-24 focus:bg-blue-900 focus:ring focus:ring-blue-700 hover:bg-blue-900 float-right">Submit</button>
         </div>
     </form>
 </div>