TFC/tfcconnection-zola
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixing a lot of alignment issues

Browse source
This commit is contained in:
Chris Cochrun 2025-12-05 10:56:37 -06:00
parent 13e4d61023
commit e59785e786
2 changed files with 179 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

111
static/css/main.css
View file

@ -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);

115
templates/shortcodes/mt_form.html
View file

@ -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>
<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 }}">
</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>
<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 }}">
</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>
<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 }}">
</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>
<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 }}">
</div>
<label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>
<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 class="basis-full flex flex-wrap my-4">
<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-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="my-4">
<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="mt-4">
<label for="final-agreement" class="">
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>