TFC/tfcconnection
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

updating mt-form more

Browse source
This commit is contained in:
Chris Cochrun 2022-11-08 17:32:38 -06:00
parent 5f24fedf1f
commit dbfbe34e19
2 changed files with 399 additions and 295 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

438
assets/css/compiled/main.css
View file

@ -1554,6 +1554,10 @@ select {
top: 0px; top: 0px;
} }
.right-0 {
right: 0px;
}
.top-20 { .top-20 {
top: 5rem; top: 5rem;
} }
@ -1562,10 +1566,6 @@ select {
z-index: 30; z-index: 30;
} }
.z-50 {
z-index: 50;
}
.z-10 { .z-10 {
z-index: 10; z-index: 10;
} }
@ -1624,6 +1624,26 @@ select {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mt-0 { .mt-0 {
margin-top: 0px; margin-top: 0px;
} }
@ -1664,6 +1684,10 @@ select {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.mb-10 {
margin-bottom: 2.5rem;
}
.-mr-2 { .-mr-2 {
margin-right: -0.5rem; margin-right: -0.5rem;
} }
@ -1680,10 +1704,6 @@ select {
margin-bottom: 0px; margin-bottom: 0px;
} }
.mb-10 {
margin-bottom: 2.5rem;
}
.-mr-48 { .-mr-48 {
margin-right: -12rem; margin-right: -12rem;
} }
@ -1700,6 +1720,10 @@ select {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.mb-5 {
margin-bottom: 1.25rem;
}
.mr-2 { .mr-2 {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -1740,18 +1764,38 @@ select {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.mb-5 {
margin-bottom: 1.25rem;
}
.\!mb-9 { .\!mb-9 {
margin-bottom: 2.25rem !important; margin-bottom: 2.25rem !important;
} }
.ml-auto {
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.mb-\[2px\] { .mb-\[2px\] {
margin-bottom: 2px; margin-bottom: 2px;
} }
.mr-20 {
margin-right: 5rem;
}
.mr-12 {
margin-right: 3rem;
}
.mr-24 {
margin-right: 6rem;
}
.mr-4 {
margin-right: 1rem;
}
.block { .block {
display: block; display: block;
} }
@ -1812,8 +1856,28 @@ select {
height: 2rem; height: 2rem;
} }
.h-\[300px\] { .h-\[120px\] {
height: 300px; height: 120px;
}
.h-\[100px\] {
height: 100px;
}
.h-\[150px\] {
height: 150px;
}
.h-\[800px\] {
height: 800px;
}
.h-\[1000px\] {
height: 1000px;
}
.h-64 {
height: 16rem;
} }
.max-h-\[5rem\] { .max-h-\[5rem\] {
@ -1824,6 +1888,10 @@ select {
min-height: 0px; min-height: 0px;
} }
.min-h-\[148px\] {
min-height: 148px;
}
.w-12 { .w-12 {
width: 3rem; width: 3rem;
} }
@ -1856,6 +1924,10 @@ select {
min-width: 0px; min-width: 0px;
} }
.min-w-full {
min-width: 100%;
}
.min-w-\[1\.8rem\] { .min-w-\[1\.8rem\] {
min-width: 1.8rem; min-width: 1.8rem;
} }
@ -1888,10 +1960,18 @@ select {
max-width: 36rem; max-width: 36rem;
} }
.max-w-\[1600px\] {
max-width: 1600px;
}
.max-w-3xl { .max-w-3xl {
max-width: 48rem; max-width: 48rem;
} }
.max-w-\[64rem\] {
max-width: 64rem;
}
.flex-1 { .flex-1 {
flex: 1 1 0%; flex: 1 1 0%;
} }
@ -1908,22 +1988,22 @@ select {
flex-grow: 1; flex-grow: 1;
} }
.basis-1\/2 {
flex-basis: 50%;
}
.basis-1 {
flex-basis: 0.25rem;
}
.basis-full { .basis-full {
flex-basis: 100%; flex-basis: 100%;
} }
.basis-1\/2 {
flex-basis: 50%;
}
.basis-1\/4 { .basis-1\/4 {
flex-basis: 25%; flex-basis: 25%;
} }
.basis-1\/3 {
flex-basis: 33.333333%;
}
.-translate-y-8 { .-translate-y-8 {
--tw-translate-y: -2rem; --tw-translate-y: -2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1963,26 +2043,30 @@ select {
flex-wrap: wrap; flex-wrap: wrap;
} }
.place-content-center {
place-content: center;
}
.place-items-center {
place-items: center;
}
.content-center { .content-center {
align-content: center; align-content: center;
} }
.items-end { .content-start {
align-items: flex-end; align-content: flex-start;
}
.content-around {
align-content: space-around;
}
.items-start {
align-items: flex-start;
} }
.items-center { .items-center {
align-items: center; align-items: center;
} }
.items-stretch {
align-items: stretch;
}
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
@ -1991,6 +2075,10 @@ select {
justify-content: space-between; justify-content: space-between;
} }
.justify-items-start {
justify-items: start;
}
.gap-12 { .gap-12 {
gap: 3rem; gap: 3rem;
} }
@ -2200,6 +2288,10 @@ select {
--tw-gradient-to: rgba(var(--color-secondary-700), 1); --tw-gradient-to: rgba(var(--color-secondary-700), 1);
} }
.to-neutral {
--tw-gradient-to: rgba(var(--color-neutral), 1);
}
.object-cover { .object-cover {
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
@ -2220,11 +2312,6 @@ select {
object-position: left; object-position: left;
} }
.object-center {
-o-object-position: center;
object-position: center;
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
@ -2300,6 +2387,11 @@ select {
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-\[1px\] { .py-\[1px\] {
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
@ -2340,6 +2432,22 @@ select {
padding-left: 1rem; padding-left: 1rem;
} }
.pl-8 {
padding-left: 2rem;
}
.pr-8 {
padding-right: 2rem;
}
.pt-4 {
padding-top: 1rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pl-2 { .pl-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
@ -2348,8 +2456,16 @@ select {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.pt-4 { .pl-\[24px\] {
padding-top: 1rem; padding-left: 24px;
}
.pr-\[24px\] {
padding-right: 24px;
}
.pr-2 {
padding-right: 0.5rem;
} }
.text-center { .text-center {
@ -2486,9 +2602,9 @@ select {
color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
} }
.text-\[\#fff\] { .text-neutral-50 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
} }
.text-primary-300 { .text-primary-300 {
@ -2526,14 +2642,9 @@ select {
color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important; color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
} }
.text-neutral-100 { .text-primary-800 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); color: rgba(var(--color-primary-800), var(--tw-text-opacity));
}
.text-neutral-50 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-50), var(--tw-text-opacity));
} }
.\!no-underline { .\!no-underline {
@ -2552,16 +2663,6 @@ select {
text-decoration-color: rgba(var(--color-neutral-300), 1); text-decoration-color: rgba(var(--color-neutral-300), 1);
} }
.placeholder-neutral-100::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity));
}
.placeholder-neutral-100::placeholder {
--tw-placeholder-opacity: 1;
color: rgba(var(--color-neutral-100), var(--tw-placeholder-opacity));
}
.placeholder-neutral-300::-moz-placeholder { .placeholder-neutral-300::-moz-placeholder {
--tw-placeholder-opacity: 1; --tw-placeholder-opacity: 1;
color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity)); color: rgba(var(--color-neutral-300), var(--tw-placeholder-opacity));
@ -2576,6 +2677,14 @@ select {
opacity: 0; opacity: 0;
} }
.opacity-30 {
opacity: 0.3;
}
.opacity-70 {
opacity: 0.7;
}
.mix-blend-normal { .mix-blend-normal {
mix-blend-mode: normal; mix-blend-mode: normal;
} }
@ -2590,30 +2699,18 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px 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-lg { .shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); --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); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.ring-2 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-offset-2 {
--tw-ring-offset-width: 2px;
}
.ring-offset-neutral-50 {
--tw-ring-offset-color: rgba(var(--color-neutral-50), 1);
}
.ring-offset-neutral-500 {
--tw-ring-offset-color: rgba(var(--color-neutral-500), 1);
}
.backdrop-blur { .backdrop-blur {
--tw-backdrop-blur: blur(8px); --tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@ -2626,6 +2723,12 @@ select {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
} }
.backdrop-blur-2xl {
--tw-backdrop-blur: blur(40px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-opacity { .transition-opacity {
transition-property: opacity; transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -3306,6 +3409,13 @@ body:has(#menu-controller:checked) {
background-position:center; background-position:center;
} }
.thumbnail_card {
height: 250px;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
.single_hero_basic { .single_hero_basic {
background-repeat:no-repeat; background-repeat:no-repeat;
background-size:cover; background-size:cover;
@ -3336,6 +3446,14 @@ body:has(#menu-controller:checked) {
box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
} }
.anchor {
display: block;
position: relative;
top: -100px;
height: 0px;
visibility: hidden;
}
@media (min-width: 640px) { @media (min-width: 640px) {
.thumbnail { .thumbnail {
min-width: 100%; min-width: 100%;
@ -3363,14 +3481,6 @@ body:has(#menu-controller:checked) {
margin: 1rem; margin: 1rem;
} }
.file\:mr-4::file-selector-button {
margin-right: 1rem;
}
.file\:rounded-full::file-selector-button {
border-radius: 9999px;
}
.file\:rounded-lg::file-selector-button { .file\:rounded-lg::file-selector-button {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@ -3379,54 +3489,11 @@ body:has(#menu-controller:checked) {
border-width: 0px; border-width: 0px;
} }
.file\:border-2::file-selector-button {
border-width: 2px;
}
.file\:bg-neutral-50::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
}
.file\:bg-primary-50::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-50), var(--tw-bg-opacity));
}
.file\:bg-neutral-500::file-selector-button { .file\:bg-neutral-500::file-selector-button {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity)); background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
} }
.file\:bg-primary-500::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
}
.file\:bg-primary-100::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
}
.file\:bg-neutral-400::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-400), var(--tw-bg-opacity));
}
.file\:bg-neutral-100::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
}
.file\:bg-neutral-200::file-selector-button {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity));
}
.file\:p-4::file-selector-button {
padding: 1rem;
}
.file\:py-2::file-selector-button { .file\:py-2::file-selector-button {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@ -3437,11 +3504,6 @@ body:has(#menu-controller:checked) {
padding-right: 1rem; padding-right: 1rem;
} }
.file\:py-4::file-selector-button {
padding-top: 1rem;
padding-bottom: 1rem;
}
.file\:text-sm::file-selector-button { .file\:text-sm::file-selector-button {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
@ -3451,21 +3513,6 @@ body:has(#menu-controller:checked) {
font-weight: 600; font-weight: 600;
} }
.file\:text-neutral-700::file-selector-button {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
}
.file\:text-primary-700::file-selector-button {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-700), var(--tw-text-opacity));
}
.file\:text-primary-300::file-selector-button {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
}
.file\:text-neutral-100::file-selector-button { .file\:text-neutral-100::file-selector-button {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
@ -3475,16 +3522,6 @@ body:has(#menu-controller:checked) {
margin-top: 2rem; margin-top: 2rem;
} }
.checked\:bg-primary-500:checked {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
}
.checked\:bg-neutral-500:checked {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
}
.checked\:text-neutral-500:checked { .checked\:text-neutral-500:checked {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
@ -3494,6 +3531,11 @@ body:has(#menu-controller:checked) {
border-color: transparent; border-color: transparent;
} }
.hover\:bg-neutral-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
}
.hover\:bg-primary-600:hover { .hover\:bg-primary-600:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
@ -3514,11 +3556,6 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important; background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
} }
.hover\:bg-neutral-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-500), var(--tw-bg-opacity));
}
.hover\:text-primary-600:hover { .hover\:text-primary-600:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity)); color: rgba(var(--color-primary-600), var(--tw-text-opacity));
@ -3560,51 +3597,11 @@ body:has(#menu-controller:checked) {
text-underline-offset: 2px; text-underline-offset: 2px;
} }
.hover\:ring-2:hover {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:ring-primary-500:hover {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(var(--color-primary-500), var(--tw-ring-opacity));
}
.hover\:file\:bg-neutral-100::file-selector-button:hover {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-neutral-100), var(--tw-bg-opacity));
}
.hover\:file\:bg-primary-300::file-selector-button:hover { .hover\:file\:bg-primary-300::file-selector-button:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity)); background-color: rgba(var(--color-primary-300), var(--tw-bg-opacity));
} }
.hover\:file\:p-9::file-selector-button:hover {
padding: 2.25rem;
}
.hover\:file\:px-5::file-selector-button:hover {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.hover\:file\:px-6::file-selector-button:hover {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.hover\:file\:text-primary-100::file-selector-button:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-100), var(--tw-text-opacity));
}
.hover\:file\:text-primary-700::file-selector-button:hover {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-700), var(--tw-text-opacity));
}
.hover\:file\:text-primary-500::file-selector-button:hover { .hover\:file\:text-primary-500::file-selector-button:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity)); color: rgba(var(--color-primary-500), var(--tw-text-opacity));
@ -3639,16 +3636,6 @@ body:has(#menu-controller:checked) {
background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity));
} }
.focus\:text-primary-500:focus {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-500), var(--tw-text-opacity));
}
.focus\:text-primary-200:focus {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-200), var(--tw-text-opacity));
}
.focus\:outline-dotted:focus { .focus\:outline-dotted:focus {
outline-style: dotted; outline-style: dotted;
} }
@ -3676,10 +3663,6 @@ body:has(#menu-controller:checked) {
--tw-ring-offset-width: 2px; --tw-ring-offset-width: 2px;
} }
.focus\:ring-offset-neutral-500:focus {
--tw-ring-offset-color: rgba(var(--color-neutral-500), 1);
}
.focus\:ring-offset-transparent:focus { .focus\:ring-offset-transparent:focus {
--tw-ring-offset-color: transparent; --tw-ring-offset-color: transparent;
} }
@ -3899,6 +3882,10 @@ body:has(#menu-controller:checked) {
--tw-gradient-to: rgba(var(--color-secondary-800), 1); --tw-gradient-to: rgba(var(--color-secondary-800), 1);
} }
.dark .dark\:to-neutral-800 {
--tw-gradient-to: rgba(var(--color-neutral-800), 1);
}
.dark .dark\:prose-invert { .dark .dark\:prose-invert {
--tw-prose-body: var(--tw-prose-invert-body); --tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings); --tw-prose-headings: var(--tw-prose-invert-headings);
@ -3971,6 +3958,15 @@ body:has(#menu-controller:checked) {
color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
} }
.dark .dark\:text-primary-200 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-200), var(--tw-text-opacity));
}
.dark .dark\:opacity-60 {
opacity: 0.6;
}
.dark .dark\:mix-blend-multiply { .dark .dark\:mix-blend-multiply {
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }
@ -4133,6 +4129,10 @@ body:has(#menu-controller:checked) {
height: 18rem; height: 18rem;
} }
.md\:h-\[200px\] {
height: 200px;
}
.md\:h-56 { .md\:h-56 {
height: 14rem; height: 14rem;
} }
@ -4317,3 +4317,9 @@ body:has(#menu-controller:checked) {
width: 25%; width: 25%;
} }
} }
@media (min-width: 1536px) {
.\32xl\:w-1\/5 {
width: 20%;
}
}

226
layouts/shortcodes/mt-form.html
View file

@ -32,79 +32,81 @@
</div> </div>
</div> </div>
<div id="mt-form" class="form text-lg"> <div id="mt-form" class="form text-lg w-full">
<form action="" autocomplete="on" method="post" target="_parent" class="items-center flex flex-wrap"> <form action="" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
<h3 class="basis-full">Mission Trip Application</h3> <h3 class="basis-full">Mission Trip Application</h3>
<div class="basis-1/2"> <div class="basis-full flex flex-wrap my-4">
<label for="firstname" class="">What is your first name?</label> <label for="firstname" class="basis-full">What is your first and last name?</label>
<br/> <br/>
<input type="text" id="firstname" name="firstname" <input type="text" id="firstname" name="firstname"
placeholder="First Name" class="form-input {{ $formClasses }}"> placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
</div>
<div class="basis-1/2">
<label for="lastname" class="">What is your last name</label>
<br/>
<input type="text" id="lastname" name="lastname" <input type="text" id="lastname" name="lastname"
placeholder="Last Name" class="form-input {{ $formClasses }}"> placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
</div> </div>
<div class="basis-1/2"> <div class="basis-full flex flex-wrap my-4">
<label for="parentfirstname" class="">What is your parent's first name?</label> <label for="parentfirstname" class="basis-full">What is your parent's first and last name?</label>
<input type="text" id="parentfirstname" name="parentfirstname" <input type="text" id="parentfirstname" name="parentfirstname"
class="form-input {{ $formClasses }}"> class="flex-1 form-input {{ $formClasses }}"
</div> placeholder="First Name">
<div class="basis-1/2">
<label for="parentlastname" class="">What is your parent's last name?</label>
<input type="text" id="parentlastname" name="parentlastname" <input type="text" id="parentlastname" name="parentlastname"
class="form-input {{ $formClasses }}"> class="flex-1 form-input {{ $formClasses }}"
placeholder="Last Name">
</div> </div>
<div class="basis-1/2"> <label for="parentemail" class="basis-full">What is your parent's email address?</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="basis-full form-input {{ $formClasses }}">
<div class="basis-full my-8">
<div class="">
<label for="birthday" class="">When were you born?</label> <label for="birthday" class="">When were you born?</label>
<input type="date" id="birthday" name="birthday" <input type="date" id="birthday" name="birthday"
class="form-date {{ $formClasses }}"> class="form-date {{ $formClasses }}">
</div> </div>
<div class="basis-1/2"> <div class="">
<label for="age" class="">Age</label>
<input type="number" id="age" name="age" class="form-input {{ $formClasses }}">
</div>
<div class="basis-1/2">
<label for="gender" class="">Gender</label> <label for="gender" class="">Gender</label>
<select id="gender" name="gender" class="form-select {{ $formClasses }}"> <select id="gender" name="gender" class="form-select {{ $formClasses }}">
<option value="male">Male</option> <option value="male">Male</option>
<option value="female">Female</option> <option value="female">Female</option>
</select> </select>
</div> </div>
<div class="basis-1/2"></div>
<div class="basis-1/2 mt-10">
<label for="street" class="">Street Address</label>
<input type="text" id="street" name="street" class="form-input {{ $formClasses }}">
</div> </div>
<div class="basis-1/2"> <div class="basis-full flex flex-wrap">
<label for="city" class="basis-1/4">City</label> <label for="street" class="basis-full">What is your address?</label>
<input type="text" id="city" name="city" class="basis-1/4 form-input {{ $formClasses }}"> <input type="text" id="street" name="street"
class="basis-full form-input {{ $formClasses }}"
placeholder="Street Address">
<input type="text" id="city" name="city"
class="flex-auto form-input {{ $formClasses }}"
placeholder="City">
<input type="text" id="state" name="state"
class="flex-auto form-input {{ $formClasses }}"
placeholder="State">
<input type="text" id="zip" name="zip"
class="flex-auto form-input {{ $formClasses }}"
placeholder="Zip Code">
</div> </div>
<div class="basis-1/2"> <div class="basis-full flex flex-wrap items-center my-8">
<label for="state" class="basis-1/4">State</label> <div class="flex-auto flex flex-wrap items-center">
<input type="text" id="state" name="state" class="basis-1/4 form-input {{ $formClasses }}"> <label for="cellphone" class="mr-4">Cell phone</label>
</div>
<div class="basis-1/2 mb-10">
<label for="zip" class="basis-1/4">Zip Code</label>
<input type="text" id="zip" name="zip" class="basis-1/4 form-input {{ $formClasses }}">
</div>
<label for="image" class="">Please give us a picture you'd like to use on prayer cards.</label>
<input type="file" id="image" name="image" class="file:m-4 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 ">
<br/>
<label for="cellphone" class="">Cell phone</label>
<input type="tel" id="cellphone" name="cellphone" <input type="tel" id="cellphone" name="cellphone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}"> pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
<label for="homephone" class="">Home phone</label> class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="flex-auto flex flex-wrap items-center">
<label for="homephone" class="mr-4">Home phone</label>
<input type="tel" id="homephone" name="homephone" <input type="tel" id="homephone" name="homephone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-input {{ $formClasses }}"> pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
<label for="email" class="">Email</label> class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="flex-auto flex flex-wrap items-center">
<label for="email" class="mr-4">Email</label>
<input type="email" id="email" name="email" <input type="email" id="email" name="email"
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$" pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
class="form-input {{ $formClasses }}"> class="flex-auto form-input {{ $formClasses }}">
<label for="school" class="">School</label> </div>
<input type="text" id="school" name="school" class="form-input {{ $formClasses }}"> </div>
<label for="school" class="basis-full">What school do you go to?</label>
<input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">
<div class="basis-full"> <div class="basis-full">
<label for="grade" class="">Grade</label> <label for="grade" class="">Grade</label>
@ -112,31 +114,28 @@
<input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="8" class="form-input {{ $formClasses }}">
<label for="grade" class="">8th</label> <label for="grade" class="">8th</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="freshman" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="freshman"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Freshman</label> <label for="grade" class="">Freshman</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="sophomore" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="sophomore"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Sophomore</label> <label for="grade" class="">Sophomore</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="junior" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="junior"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Junior</label> <label for="grade" class="">Junior</label>
<br/> <br/>
<input type="radio" id="grade" name="grade" value="senior" class="form-input {{ $formClasses }}"> <input type="radio" id="grade" name="grade" value="senior"
class="form-input {{ $formClasses }}">
<label for="grade" class="">Senior</label> <label for="grade" class="">Senior</label>
</div> </div>
<label for="parentemail" class="">ParentEmail</label> <div class="basis-full flex flex-wrap">
<input type="email" id="parentemail" name="parentemail" <label for="pastorfirstname" class="basis-full">What is your pastor's first and last name?</label>
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
class="form-input {{ $formClasses }}">
<div class="basis-1/2">
<label for="pastorfirstname" class="">What is your pastor's first name?</label>
<input type="text" id="pastorfirstname" name="pastorfirstname" <input type="text" id="pastorfirstname" name="pastorfirstname"
class="form-input {{ $formClasses }}"> class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="basis-1/2">
<label for="pastorlastname" class="">What is your pastor's last name?</label>
<input type="text" id="pastorlastname" name="pastorlastname" <input type="text" id="pastorlastname" name="pastorlastname"
class="form-input {{ $formClasses }}"> class="flex-auto form-input {{ $formClasses }}">
</div> </div>
<div class="basis-full"> <div class="basis-full">
<label for="churchattendance" class="">Do you attend church regularly?</label> <label for="churchattendance" class="">Do you attend church regularly?</label>
@ -166,6 +165,105 @@
<option value="colby">Colby</option> <option value="colby">Colby</option>
</select> </select>
</div> </div>
<div class="basis-1/2">
<label for="shirt" class="">T-Shirt Size</label>
<select id="shirt" name="shirt" class="form-select {{ $formClasses }}">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xl">XL</option>
<option value="xxl">2XL</option>
<option value="xxxl">3XL</option>
</select>
</div>
<div class="basis-full my-12">
<label for="image" class="">
Please give us a picture you'd like to use on prayer cards.
</label>
<input type="file" id="image" name="image"
class="file:m-4 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>
<div class="basis-full mt-10">
<label for="tripnotes" class="p-4">
Do you have any other notes for us regarding this trip?
</label>
<br/>
<textarea id="tripnotes" name="tripnotes"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder="notes..."></textarea>
</div>
<div class="basis-full mt-10">
<label for="relationship-with-jesus" class="p-4">
Describe your relationship with the Lord this past year.
</label>
<br/>
<textarea id="relationship-with-jesus" name="relationship-with-jesus"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="testimony" class="p-4">
Tell us how your relationship with Jesus began. (How you became a Christian)
</label>
<br/>
<textarea id="testimony" name="testimony"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="involvement-with-group" class="p-4">
In the last year, how have you been involved in the ministry of TFC (or your church/youth group)? How do you benefit your group?
</label>
<br/>
<textarea id="involvement-with-group" name="involvement-with-group"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="reasons-for-trip-choice" class="p-4">
Why did you choose the team you applied for as your first choice? (Please indicate if you are unable to a different a trip due to previous commitments.)
</label>
<br/>
<textarea id="reasons-for-trip-choice" name="reasons-for-trip-choice"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="strengths" class="p-4">
The strengths and talents you would bring to this year's team are:
</label>
<br/>
<textarea id="strengths" name="strengths"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="weaknesses" class="p-4">
Some negative traits that might effect my attitude are:
</label>
<br/>
<textarea id="weaknesses" name="weaknesses"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="previous-trip-info" class="p-4">
If you were a part of a previous TFC Mission Trip team-tell us how the trip changed your life?
</label>
<br/>
<textarea id="previous-trip-info" name="previous-trip-info"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
<div class="basis-full mt-10">
<label for="attitude-toward-work" class="p-4">
If we were to ask your parents/employer/or teachers about your attitudes towards work, what would they say?
</label>
<br/>
<textarea id="attitude-toward-work" name="attitude-toward-work"
class="form-input w-full h-64 {{ $formClasses }}"
placeholder=""></textarea>
</div>
</form> </form>
</div> </div>