From dd5cf88bca89badc30fc2fe140f348c34dd41c4a Mon Sep 17 00:00:00 2001
From: "Aaron N. Brock" <Contact@AaronNBrock.com>
Date: Sun, 4 Oct 2020 19:18:03 -0400
Subject: [PATCH] refactor contact form typography

---
 assets/scss/components/_contact.scss | 120 +---------------
 layouts/contact/list.html            | 196 ++++++++++++++-------------
 2 files changed, 102 insertions(+), 214 deletions(-)

diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss
index 6dd55cb..5f426fb 100644
--- a/assets/scss/components/_contact.scss
+++ b/assets/scss/components/_contact.scss
@@ -20,135 +20,17 @@
         z-index: 1;
       }
     }
-    h4 {
-      margin: 0 0 30px 0;
-      font-family: $primary-font;
-      font-size: 25px;
-      color: $secondary-color;
-    }
-    p {
-      margin: 0;
-      font-size: 16px;
-      line-height: 34px;
-      color: #7e7e8a;
-      font-family: $secondary-font;
-    }
     a {
-      color: #7e7e8a;
+      color: $body-color;
       text-decoration: underline;
-      font-size: 16px;
-      line-height: 34px;
-      font-family: $secondary-font;
-      display: block;
     }
   }
 }
 .contact-form {
   padding: 50px 0 100px 0;
-  &-title {
-    h4 {
-      font-family: $primary-font;
-      color: $secondary-color;
-      margin: 0 0 30px 0;
-      font-size: 35px;
-    }
-  }
   &-input {
     .form-group {
       margin-bottom: 30px;
-      .form-control {
-        border: 1px solid #aeb8be;
-        border-radius: 7px;
-        padding: 10px 30px;
-        font-size: 14px;
-        font-family: $secondary-font;
-        color: #282f49;
-        &::placeholder {
-          /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: #282f49;
-        }
-        &:-ms-input-placeholder {
-          /* Internet Explorer 10-11 */
-          color: #282f49;
-        }
-        &::-ms-input-placeholder {
-          /* Microsoft Edge */
-          color: #282f49;
-        }
-        &:focus {
-          outline: 0;
-          box-shadow: none;
-        }
-      }
-      input.form-control {
-        height: 55px;
-        border: 1px solid #aeb8be;
-      }
-    }
-    .form-check {
-      padding: 0;
-      margin-bottom: 30px;
-      margin-top: -10px;
-      &-input {
-        padding: 0;
-        height: initial;
-        width: initial;
-        margin-bottom: 0;
-        // display: none;
-        cursor: pointer;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-        margin-left: 10px;
-        margin-top: 23px;
-      }
-      &-label {
-        position: relative;
-        cursor: pointer;
-        &::before {
-          content: "";
-          -webkit-appearance: none;
-          background-color: transparent;
-          border: 1px solid #aeb8be;
-          height: 20px;
-          width: 20px;
-          border-radius: 4px;
-          display: inline-block;
-          position: relative;
-          vertical-align: middle;
-          cursor: pointer;
-          margin-right: 8px;
-        }
-      }
-
-      input:checked + label:after {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 6px;
-        left: 7px;
-        width: 6px;
-        height: 12px;
-        border: solid #0079bf;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-      }
-    }
-    .contact-form-btn {
-      padding: 20px 45px;
-      display: inline-block;
-      font-size: 16px;
-      font-family: $secondary-font;
-      background: $primary-color;
-      border-radius: 7px;
-      color: #fff;
-      transition: all 0.3s ease;
-      &:hover {
-        background: #425fee;
-        box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
-        transform: scale(1.03);
-        text-decoration: none;
-      }
     }
   }
   #map {
diff --git a/layouts/contact/list.html b/layouts/contact/list.html
index 6cc2037..4c7627c 100644
--- a/layouts/contact/list.html
+++ b/layouts/contact/list.html
@@ -1,39 +1,39 @@
 {{ define "main" }}
 
 <header class="breadCrumb">
-	<div class="svg-img">
-		<img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg">
-	</div>
-	<div class="animate-shape">
-		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
-			<defs>
-				<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
-					<stop offset="0" stop-color="#f1f6f9" />
-					<stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
-				</linearGradient>
-			</defs>
-			<g data-name="blob-shape (3)">
-				<path class="blob" fill="url(#d)"
-					d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
-			</g>
-		</svg>
-	</div>
-	<div class="animate-pattern">
-		<img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape">
-	</div>
-	<div class="container">
-		<div class="row">
-			<div class="col-12 text-center">
-				<h3 class="breadCrumb__title">{{ .Title }}</h3>
-				<nav aria-label="breadcrumb" class="d-flex justify-content-center">
-					<ol class="breadcrumb align-items-center">
-						<li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li>
-						<li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li>
-					</ol>
-				</nav>
-			</div>
-		</div>
-	</div>
+  <div class="svg-img">
+    <img src="{{ "images/hero/figure-svg.svg" | absURL }}" alt="bg">
+  </div>
+  <div class="animate-shape">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
+      <defs>
+        <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
+          <stop offset="0" stop-color="#f1f6f9" />
+          <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <g data-name="blob-shape (3)">
+        <path class="blob" fill="url(#d)"
+          d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
+      </g>
+    </svg>
+  </div>
+  <div class="animate-pattern">
+    <img src="{{ "images/service/background-pattern.svg" | absURL }}" alt="background-shape">
+  </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-12 text-center">
+        <h3 class="breadCrumb__title">{{ .Title }}</h3>
+        <nav aria-label="breadcrumb" class="d-flex justify-content-center">
+          <ol class="breadcrumb align-items-center">
+            <li class="breadcrumb-item"><a href="{{ .Site.BaseURL }}">Home</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ .Params.breadcrumb }}</li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </div>
 </header>
 
 {{ $address := .Site.Params.address }}
@@ -44,17 +44,10 @@
         <div class="contact__info_item">
           <div class="contact__info_item-icon">
             <div class="icon-background">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="122.457"
-                height="109.702"
-                viewBox="0 0 122.457 109.702"
-              >
-                <path
-                  fill="#f1f6f9"
+              <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
+                <path fill="#f1f6f9"
                   d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
-                  data-name="Path 1354"
-                />
+                  data-name="Path 1354" />
               </svg>
             </div>
             <div class="icon">
@@ -71,17 +64,10 @@
         <div class="contact__info_item">
           <div class="contact__info_item-icon">
             <div class="icon-background">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="122.457"
-                height="109.702"
-                viewBox="0 0 122.457 109.702"
-              >
-                <path
-                  fill="#f1f6f9"
+              <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
+                <path fill="#f1f6f9"
                   d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
-                  data-name="Path 1354"
-                />
+                  data-name="Path 1354" />
               </svg>
             </div>
             <div class="icon">
@@ -89,25 +75,20 @@
             </div>
           </div>
           <h4>Phone & Email</h4>
-          <p>{{ $address.phone }}</p>
-          <a href="mailto:{{ $address.email }}">{{ $address.email }}</a>
+          <p>{{ $address.phone }}<br>
+            <a href="mailto:{{ $address.email }}">{{ $address.email }}</a>
+          </p>
+
         </div>
       </div>
       <div class="col-lg-4">
         <div class="contact__info_item">
           <div class="contact__info_item-icon">
             <div class="icon-background">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="122.457"
-                height="109.702"
-                viewBox="0 0 122.457 109.702"
-              >
-                <path
-                  fill="#f1f6f9"
+              <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
+                <path fill="#f1f6f9"
                   d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
-                  data-name="Path 1354"
-                />
+                  data-name="Path 1354" />
               </svg>
             </div>
             <div class="icon">
@@ -123,59 +104,84 @@
     </div>
   </div>
 </section>
+
 <section class="contact-form">
   <div class="container">
     <div class="row">
       <div class="col-lg-6">
         <div class="contact-form-title">
-          <h4>Contact Form</h4>
+          <h3>Contact Form</h3>
         </div>
         <div class="contact-form-input">
           <form id="contact-form" action="{{ .Site.Params.formspreeURL }}" method="POST">
+
             <div class="form-row">
+
               <div class="form-group col-md-6 pr-3">
-                <input
-                  type="text"
-                  class="form-control"
-                  name="Name"
-                  placeholder="Name"
-                  required
-                />
+                <input type="text" class="form-control" name="Name" placeholder="Name" required />
               </div>
               <div class="form-group col-md-6">
-                <input
-                  type="email"
-                  class="form-control"
-                  name="email"
-                  placeholder="Email"
-                  required
-                />
+                <input type="email" class="form-control" name="email" placeholder="Email" required />
               </div>
             </div>
+
             <div class="form-group">
-              <textarea
-                class="form-control"
-                id="exampleFormControlTextarea1"
-                rows="6"
-                name="message"
-                placeholder="Message"
-              ></textarea>
+              <textarea class="form-control" id="message" rows="6" name="message" placeholder="Message"></textarea>
             </div>
-            <div class="form-check">
-              <input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required />
-              <label class="form-check-label" for="aggrement">
-                I agree that my submitted data is being collected and
-                stored.</label
-              >
+
+            <div class="form-group">
+              <div class="form-check small">
+                <input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required />
+                <label class="form-check-label" for="aggrement">
+                  I agree that my submitted data is being collected and
+                  stored.</label>
+              </div>
             </div>
-            <button type="submit" class="btn contact-form-btn" id="contact-form-button">Send Message</button>
+
+            <button type="submit" class="btn btn-primary btn-zoom" id="contact-form-button">Send Message</button>
             <p id="contact-form-status" class="mt-3"></p>
           </form>
+
+          <!-- <form>
+            <div class="form-row">
+              <div class="form-group col-md-6">
+                <label for="inputEmail4">Email</label>
+                <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+              </div>
+              <div class="form-group col-md-6">
+                <label for="inputPassword4">Password</label>
+                <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="inputAddress">Address</label>
+              <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+            </div>
+            <div class="form-group">
+              <label for="inputAddress2">Address 2</label>
+              <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+            </div>
+
+            <div class="form-group">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="gridCheck">
+                <label class="form-check-label" for="gridCheck">
+                  I agree that my submitted data is being collected and
+                  stored.
+                </label>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary">Sign in</button>
+          </form> -->
+
+
+
         </div>
       </div>
       <div class="col-lg-6">
         {{ $map := .Site.Params.map }}
-        <div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}></div>
+        <div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}>
+        </div>
       </div>
     </div>
   </div>