Merge pull request #421 from CodeForPhilly/contact-section-stable-layout

make the contact section layout more stable when resizing the message field. simplify the design and provide more room for user to write their message.

Author: earth-walker

website/src/assets/backgrounds/wedge.svg

@@ -1,12 +1,11 @@
 ---
 import { Content } from "../assets/text/Contact.md";
-import wedge from "../assets/backgrounds/wedge.svg";
 ---
 
 <section id="contact">
   <div class="max-w-[130ch] mx-auto">
     <div class="flex flex-row">
-      <div class="sm:w-2/5 p-6 py-12">
+      <div class="sm:w-1/2 p-12 pr-6">
         <div class="prose prose-headings:text-left">
           <Content />
         </div>
@@ -54,10 +53,11 @@ import wedge from "../assets/backgrounds/wedge.svg";
           />
         </form>
       </div>
-      <div
-        class="sm:w-3/5 bg-[url(../assets/backgrounds/man-in-office.webp)] bg-cover bg-center hidden sm:block"
-      >
-        <img class="h-full relative right-0.5" src={wedge.src} alt="" />
+      <div class="w-1/2 h-180 hidden sm:flex">
+        <div
+          class="w-full m-12 ml-6 bg-[url(../assets/backgrounds/man-in-office.webp)] bg-cover bg-center justify-center rounded-2xl"
+        >
+        </div>
       </div>
     </div>
   </div>

website/src/components/Contact.astro

@@ -5,7 +5,7 @@ import cfpLogo from "../assets/logos/cfp-logo.png";
 ---
 
 <div
-  class="md:bg-[url(../assets/backgrounds/bubbles.svg)] bg-center md:mg-size-[150vh] lg:bg-cover bg-no-repeat"
+  class="md:bg-[url(../assets/backgrounds/bubbles.svg)] bg-center md:mg-size-[150vh] lg:bg-cover bg-no-repeat border-b-bdt-green-light border-b-2"
 >
   <section id="overview">
     <div class="max-w-[85ch] mx-auto py-12 px-3 prose prose-a:font-semibold">