Refactor FormLayout as styles only

site/src/assets/styles/form.css

@@ -0,0 +1,12 @@
+main form:not([method]) {
+  > * {
+    display: block;
+    margin: 1rem 0;
+  }
+
+  & select,
+  & textarea,
+  & input:not([type="checkbox"], [type="radio"]) {
+    display: block;
+  }
+}

site/src/assets/styles/styles.css

@@ -2,6 +2,7 @@
 @import url(fonts.css);
 @import url(root-and-body.css);
 @import url(headings.css);
+@import url(form.css);
 @import url(utilities.css);
 @import url(content-layout.css);
 @import url(form-elements.css);

site/src/pages/museum/gift-shop/checkout/payment.astro

@@ -1,7 +1,6 @@
 ---
 import Fixable from "@/components/Fixable.astro";
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import ShopLayout from "@/layouts/ShopLayout.astro";
 
 /** @breaklocation Gift Shop */
@@ -26,7 +25,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
      */
   }
   <Fixable
-    as={FormLayout}
+    as="form"
     broken={{ action: "../confirmation/" }}
     fixed={{ action: "../review/" }}
   >

site/src/pages/museum/gift-shop/checkout/shipping.astro

@@ -1,6 +1,5 @@
 ---
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import ShopLayout from "@/layouts/ShopLayout.astro";
 
 /** @breaklocation Gift Shop */
@@ -10,7 +9,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
 <ShopLayout title="Checkout">
   <h1>Checkout</h1>
   <FixableRegion><h2 slot="fixed">Shipping Information</h2></FixableRegion>
-  <FormLayout action="../payment/">
+  <form action="../payment/">
     <div id="error" class="error" role="alert" hidden></div>
     <input name="name" placeholder="Recipient Name" />
     <input name="street1" placeholder="Street Address" />
@@ -19,7 +18,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
     <input name="state" placeholder="State" />
     <input name="zip" placeholder="ZIP Code" />
     <button>Continue</button>
-  </FormLayout>
+  </form>
 </ShopLayout>
 
 <script>

site/src/pages/museum/login/index.astro

@@ -1,7 +1,6 @@
 ---
 import Fixable from "@/components/Fixable.astro";
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import Layout from "@/layouts/Layout.astro";
 import { museumBaseUrl } from "@/lib/constants";
 
@@ -12,7 +11,7 @@ import { museumBaseUrl } from "@/lib/constants";
 <Layout title="Sign In">
   <h1>Sign In</h1>
   <p id="registered" hidden>Registration successful. Please sign in below.</p>
-  <FormLayout class="form" action={`${museumBaseUrl}`}>
+  <form action={`${museumBaseUrl}`}>
     <Fixable
       as="p"
       id="error"
@@ -49,7 +48,7 @@ import { museumBaseUrl } from "@/lib/constants";
       </Fragment>
     </FixableRegion>
     <button>Submit</button>
-  </FormLayout>
+  </form>
   <p id="register">
     Don't have an account?
     <a href="../register/">Register</a>
@@ -106,7 +105,7 @@ import { museumBaseUrl } from "@/lib/constants";
 </script>
 
 <style>
-  .form {
+  form {
     margin: 10vh 0;
   }
 

site/src/pages/museum/register.astro

@@ -1,6 +1,5 @@
 ---
 import Fixable from "@/components/Fixable.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import Layout from "@/layouts/Layout.astro";
 
 /** @breaklocation Register & Sign In */
@@ -9,7 +8,7 @@ import Layout from "@/layouts/Layout.astro";
 
 <Layout title="Create Account">
   <h1>Create Account</h1>
-  <FormLayout action="../login/">
+  <form action="../login/">
     <h2>Account Information</h2>
     <Fixable
       as="p"
@@ -142,7 +141,7 @@ import Layout from "@/layouts/Layout.astro";
       <input name="captcha" class="captcha" />
     </label>
     <button>Submit</button>
-  </FormLayout>
+  </form>
 </Layout>
 
 <script>

site/src/pages/museum/volunteer/index.astro

@@ -1,7 +1,6 @@
 ---
 import ConditionalParent from "@/components/ConditionalParent.astro";
 import FixableRegion from "@/components/FixableRegion.astro";
-import FormLayout from "@/components/FormLayout.astro";
 import Layout from "@/layouts/Layout.astro";
 import { getMode } from "@/lib/mode";
 
@@ -21,7 +20,7 @@ const isBroken = getMode() === "broken";
   <p id="sign-in-cta" hidden>
     Interested in volunteering? Please <a href="../login/">sign in</a> to apply.
   </p>
-  <FormLayout id="volunteer-form" action="thank-you/" hidden>
+  <form id="volunteer-form" action="thank-you/" hidden>
     <p>
       If you are interested in volunteering, please fill out the form below.
     </p>
@@ -146,7 +145,7 @@ const isBroken = getMode() === "broken";
       </ConditionalParent>
     </ConditionalParent>
     <button type="submit">Submit</button>
-  </FormLayout>
+  </form>
 </Layout>
 
 <script>