From 64fc0d2d4db1d4296a56d867ecde587571679020 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Sun, 1 Dec 2024 19:30:57 -0700
Subject: [PATCH] refactor: Make form page conform to new styles

---
 assets/styles/millironx.css |  26 +++++++
 content/contact/_index.html | 135 +++++++++++++-----------------------
 2 files changed, 75 insertions(+), 86 deletions(-)

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index 1e620de..fb47932 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -131,6 +131,28 @@ footer {
   align-items: center;
 }
 
+form {
+  margin: 1rem;
+}
+
+fieldset {
+  padding: 1rem;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+
+input:invalid,
+select:invalid,
+textarea:invalid {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--ear-tag-red);
+}
+
 /*
   Container-type helper classes
 */
@@ -330,6 +352,10 @@ footer {
     display: none;
   }
 
+  main {
+    width: calc(100% - 10rem);
+  }
+
   /*
     Container-type helper classes
   */
diff --git a/content/contact/_index.html b/content/contact/_index.html
index 5c1ca50..79d864c 100644
--- a/content/contact/_index.html
+++ b/content/contact/_index.html
@@ -17,94 +17,57 @@ fa-thumbnail: file-signature
 validation: true
 ---
 
-<form
-  class="form-horizontal"
-  action="https://usebasin.com/f/787df7bfd22e"
-  method="post"
->
+<form action="https://usebasin.com/f/787df7bfd22e" method="post">
   <fieldset>
     <legend>Contact Me</legend>
     <input type="hidden" name="_gotcha" />
-    <div class="form-group">
-      <label for="name" class="col-lg-2 control-label">Name</label>
-      <div class="col-lg-10">
-        <input
-          type="text"
-          class="form-control"
-          id="name"
-          name="name"
-          placeholder="Jay Lush"
-          required
-        />
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="email" class="col-lg-2 control-label">Email</label>
-      <div class="col-lg-10">
-        <input
-          type="email"
-          class="form-control"
-          id="email"
-          name="email"
-          placeholder="jlush@iastate.edu"
-          required
-        />
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="phone" class="col-lg-2 control-label">Phone number</label>
-      <div class="col-lg-10">
-        <input
-          type="tel"
-          class="form-control"
-          id="phone"
-          name="phone"
-          placeholder="(515) 294-2160"
-        />
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="category" class="col-lg-2 control-label">Category</label>
-      <div class="col-lg-10">
-        <select class="form-select" id="category">
-          <option>I'm hiring for artificial insemination</option>
-          <option>Something else</option>
-        </select>
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="subject" class="col-lg-2 control-label">Subject</label>
-      <div class="col-lg-10">
-        <input
-          type="text"
-          class="form-control"
-          id="subject"
-          name="subject"
-          placeholder="Beef genetics"
-          required
-        />
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="message" class="col-lg-2 control-label">Message</label>
-      <div class="col-lg-10">
-        <textarea
-          rows="5"
-          class="form-control font-sans"
-          id="message"
-          name="body"
-          required
-          style="min-height: 72pt;"
-        ></textarea>
-      </div>
-    </div>
-    <div class="form-group">
-      <div class="col-lg-10 col-lg-offset-2">
-        <button type="reset" class="btn btn-default">Cancel</button>
-        <button type="submit" class="btn btn-primary pageclip-form__submit">
-          <span>Submit</span>
-        </button>
-      </div>
-    </div>
+    <label for="name">Name</label>
+    <input
+      type="text"
+      class="form-control"
+      id="name"
+      name="name"
+      placeholder="Jay Lush"
+      required
+    />
+    <label for="email">Email</label>
+    <input
+      type="email"
+      class="form-control"
+      id="email"
+      name="email"
+      placeholder="jlush@iastate.edu"
+      required
+    />
+    <label for="phone">Phone number</label>
+    <input
+      type="tel"
+      class="form-control"
+      id="phone"
+      name="phone"
+      placeholder="(515) 294-2160"
+    />
+    <label for="subject">Subject</label>
+    <input
+      type="text"
+      class="form-control"
+      id="subject"
+      name="subject"
+      placeholder="Beef genetics"
+      required
+    />
+    <label for="message">Message</label>
+    <textarea
+      rows="5"
+      class="form-control font-sans"
+      id="message"
+      name="body"
+      required
+      style="min-height: 72pt;"
+    ></textarea>
+    <button type="reset" class="btn btn-default">Cancel</button>
+    <button type="submit" class="btn btn-primary pageclip-form__submit">
+      <span>Submit</span>
+    </button>
   </fieldset>
 </form>