fixing lots of little issues

static/css/main.css

@@ -265,6 +265,9 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .-left-1 {
+    left: calc(var(--spacing) * -1);
+  }
   .-left-1\/2 {
     left: calc(calc(1/2 * 100%) * -1);
   }
@@ -337,6 +340,9 @@
   .my-10 {
     margin-block: calc(var(--spacing) * 10);
   }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -446,6 +452,9 @@
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-2\/3 {
     height: calc(2/3 * 100%);
   }
@@ -491,15 +500,27 @@
   .h-screen {
     height: 100vh;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/3 {
     width: calc(1/3 * 100%);
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
   .w-3\/4 {
     width: calc(3/4 * 100%);
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -512,6 +533,9 @@
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-11\/12 {
     width: calc(11/12 * 100%);
   }
@@ -533,6 +557,9 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-\[40rem\] {
+    width: 40rem;
+  }
   .w-auto {
     width: auto;
   }
@@ -560,12 +587,21 @@
   .flex-none {
     flex: none;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .basis-1 {
+    flex-basis: calc(var(--spacing) * 1);
+  }
   .basis-1\/2 {
     flex-basis: calc(1/2 * 100%);
   }
@@ -610,9 +646,18 @@
   .resize {
     resize: both;
   }
+  .appearance-none {
+    appearance: none;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -634,6 +679,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
@@ -734,6 +782,14 @@
     border-block-style: var(--tw-border-style);
     border-block-width: 2px;
   }
+  .border-r-8 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 8px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -749,6 +805,9 @@
   .border-gray-800 {
     border-color: var(--color-gray-800);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .bg-\[\#ef4444\] {
     background-color: #ef4444;
   }
@@ -779,6 +838,9 @@
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
+  .bg-gray-600 {
+    background-color: var(--color-gray-600);
+  }
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
@@ -821,6 +883,9 @@
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -857,6 +922,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -869,6 +937,15 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
+  .pr-0 {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -941,6 +1018,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -1049,6 +1130,10 @@
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .outline-2 {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -1060,6 +1145,9 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1098,6 +1186,41 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .peer-checked\:bg-blue-500 {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--color-blue-500);
+    }
+  }
+  .peer-checked\:bg-blue-700 {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--color-blue-700);
+    }
+  }
+  .peer-checked\:bg-blue-800 {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--color-blue-800);
+    }
+  }
+  .peer-checked\:bg-blue-900 {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--color-blue-900);
+    }
+  }
+  .peer-checked\:font-bold {
+    &:is(:where(.peer):checked ~ *) {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .peer-checked\:text-white {
+    &:is(:where(.peer):checked ~ *) {
+      color: var(--color-white);
+    }
+  }
   .peer-invalid\:visible {
     &:is(:where(.peer):invalid ~ *) {
       visibility: visible;
@@ -1546,6 +1669,18 @@
       }
     }
   }
+  .sm\:border-r {
+    @media (width >= 40rem) {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+  }
+  .sm\:border-b-0 {
+    @media (width >= 40rem) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
   .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -1679,6 +1814,11 @@
       flex-basis: calc(1/4 * 100%);
     }
   }
+  .lg\:basis-full {
+    @media (width >= 64rem) {
+      flex-basis: 100%;
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));

templates/shortcodes/camp_form.html

@@ -34,7 +34,7 @@
         <input type="date" id="birth-date" name="birth-date"
                class="basis-full form-date {{ formClasses }}" required>
         <label for="gender" class="basis-full">Gender <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
-        <select id="gender" name="gender" class="basis-full form-select {{ formClasses }}" required>
+        <select id="gender" name="gender" class="basis-full form-select {{ formClasses }} border-r-8 border-transparent" required>
             <option value="Male">Male</option>
             <option value="Female">Female</option>
         </select>
@@ -145,14 +145,14 @@
                class="basis-full form-input {{ formClasses }}">
 
         <label for="week" class="basis-full">My Camp Plan (The second week is filled, so if you'd like to be on a waiting list, you'll have to check the second option.) <span class='inline-block text-[#f39] text-sm align-sup'>* required</span></label>
-        <select id="week" name="week" class="flex-auto form-select {{ formClasses }}">
+        <select id="week" name="week" class="flex-auto form-select {{ formClasses }} border-r-8 border-transparent">
             <option value="week1">Week 1: July 21-25</option>
             <!-- <option value="week2">Week 2: July 28-Aug 1</option> -->
             <option value="waiting-list">Week 1: July 21-25, but on a waiting list for week 2</option>
         </select> 
 
         <label for="shirt" class="basis-full">T-Shirt Size <span class='inline-block text-[#f39] text-sm'>all t-shirts are in adult sizes only</span></label>
-        <select id="shirt" name="shirt" class="mb-8 flex-auto form-select {{ formClasses }}">
+        <select id="shirt" name="shirt" class="mb-8 flex-auto form-select {{ formClasses }} border-r-8 border-transparent">
             <option value="small">Small</option>
             <option value="medium">Medium</option>
             <option value="large">Large</option>

templates/shortcodes/mt_form.html

@@ -1,4 +1,4 @@
-{% set formClasses = "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" -%}
+{% 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>" -%}
 
 <script>
@@ -52,11 +52,12 @@
      console.log(parentAgree);
      if (studentAgree && parentAgree) {
          document.getElementById('mt-form').hidden = false
+         document.getElementById('form').hidden = false
          console.log("WOOHOO");
      }
      else {
-         document.getElementById('form').hidden = true
+         /* document.getElementById('form').hidden = true
-         document.getElementById('mt-form').hidden = true
+          * document.getElementById('mt-form').hidden = true */
          console.log("NEGATORY");
      }
  }
@@ -72,7 +73,7 @@
   <div class="p-2">
       <input type="checkbox" name="adult-agree" id="adult-agree"
              onclick="process()" class="form-checkbox {{ formClasses }}" />
-    <label for="adult-agree">Parent agrees to the above</label>
+    <label for="adult-agree">My parent agrees to the above</label>
   </div>
 </div>
 
@@ -105,20 +106,14 @@
                    class="flex-1 form-input {{ formClasses }}"
                    placeholder="Last Name">
         </div>
-        <div class="basis-full my-4 lg:flex md:flex">
+        <label for="birthdate" class="basis-full mx-2">When were you born?</label>
-            <div class="lg:basis-1/2">
-                <label for="birthdate" class="">When were you born?</label>
         <input type="date" id="birthdate" name="birthdate"
                class="form-date {{ formClasses }}">
-            </div>
+        <label for="gender" class="basis-full mt-4 mx-2">Gender</label>
-            <div class="lg:basis-1/2">
+        <select id="gender" name="gender" class="form-select {{ formClasses }} border-r-8 border-transparent">
-                <label for="gender" class="">Gender</label>
-                <select id="gender" name="gender" class="form-select {{ formClasses }}">
             <option value="Male">Male</option>
             <option value="Female">Female</option>
         </select>
-            </div>
-        </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>
             <input type="text" id="street" name="street"
@@ -217,10 +212,8 @@
                        class="flex-auto form-input {{ formClasses }}" placeholder="Other">
             </div>
         </div>
-        <div class="basis-full flex flex-wrap my-4">
+        <label for="tfcgroup" class="basis-full mx-2">TFC Group</label>
-            <div class="basis-1/2 flex flex-wrap items-center">
+        <select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ formClasses }} border-r-8 border-transparent">
-                <label for="tfcgroup" class="flex-initial">TFC Group</label>
-                <select id="tfcgroup" name="tfcgroup" class="flex-auto form-select {{ formClasses }}">
             <option value="Phillipsburg">Phillipsburg</option>
             <option value="Atwood">Atwood</option>
             <option value="Northern Valley">Northern Valley</option>
@@ -231,10 +224,8 @@
             <option value="Codell">Codell</option>
             <option value="Colby">Colby</option>
         </select>
-            </div>
+        <label for="shirt" class="basis-full mx-2 mt-4">T-Shirt Size</label>
-            <div class="basis-1/2 flex flex-wrap items-center">
+        <select id="shirt" name="shirt" class="mb-4 basis-full flex-auto form-select {{ formClasses }} border-r-8 border-transparent">
-                <label for="shirt" class="flex-initial">T-Shirt Size</label>
-                <select id="shirt" name="shirt" class="flex-auto form-select {{ formClasses }}">
             <option value="small">Small</option>
             <option value="medium">Medium</option>
             <option value="large">Large</option>
@@ -242,8 +233,6 @@
             <option value="xxl">2XL</option>
             <option value="xxxl">3XL</option>
         </select>
-            </div>
-        </div>
         <div class="basis-full my-4 mb-8 flex flex-wrap">
             <label for="image" class="basis-full mx-2">
                 Please give us a picture you'd like to use on prayer cards.
@@ -252,23 +241,26 @@
                    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">
         </div>
 
-        <label class="basis-full mt-8 mx-2" for="trip">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.</label>
+        <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>
-        <select id="trip" name="trip" class="form-select {{ formClasses }} basis-full items-center mb-8">
+        <div class="grid w-full grid-cols-3 gap-2 rounded-xl bg-gray-700 p-2">
-            <option value="SPLASH">SPLASH</option>
+            <div>
-            <option value="Tulsa">Tulsa, Oklahoma</option>
+                <input type="radio" name="trip" id="1" value="tulsa" class="peer hidden" checked />
-            <option value="Cary">Cary Christian Center</option>
+                <label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
-        </select>
+            </div>
-            <!-- <div class="flex-auto basis-1/3">
+
-                 <label for="trip-2" class="basis-1/2">Mexico</label>
+            <div>
-                 <select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ formClasses }}">
+                <input type="radio" name="trip" id="2" value="rehoboth" class="peer hidden" />
-                 <option value="1">1</option>
+                <label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Rehoboth</label>
-                 <option value="2">2</option>
+            </div>
-                 <option value="X">X</option>
+
-                 </select>
+            <div>
-                 </div> -->
+                <input type="radio" name="trip" id="3" value="mexico" class="peer hidden" />
+                <label for="3" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Mexico</label>
+            </div>
+        </div>
 
         <div class="basis-full mt-10">
-            <label for="tripnotes" class="p-4">
+            <label for="tripnotes" class="p-4 mx-2">
                 Is there a trip you cannot go on due to scheduling conflicts? Or do you have any other things you'd wish to inform us about regarding a specific trip?
             </label>
             <br/>