From d0fd91cedf06be0d6d1c41c097663f270fef6dc3 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cory.dransfeldt@gmail.com>
Date: Sun, 10 Dec 2023 08:31:04 -0800
Subject: [PATCH] chore: contact layout improvements

---
 package.json                   |  2 +-
 src/assets/styles/tailwind.css | 16 ++++++++-----
 src/contact.md                 | 43 ++++++++++++++++++++--------------
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index ce875d20..fef4589d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "main": "index.html",
   "scripts": {
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 2b847215..5b9483ca 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -2461,6 +2461,10 @@ pre {
     margin-right: 1rem;
   }
 
+  .md\:mt-4 {
+    margin-top: 1rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -2469,12 +2473,8 @@ pre {
     height: 24rem;
   }
 
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .md\:w-3\/4 {
-    width: 75%;
+  .md\:w-1\/2 {
+    width: 50%;
   }
 
   .md\:w-96 {
@@ -2527,6 +2527,10 @@ pre {
     padding-left: 2rem;
   }
 
+  .md\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
   .md\:pt-0 {
     padding-top: 0px;
   }
diff --git a/src/contact.md b/src/contact.md
index edbf5ac9..f3e89116 100644
--- a/src/contact.md
+++ b/src/contact.md
@@ -24,20 +24,29 @@ meta:
   {{ title }}
 </h2>
 
-Fill out the form below to get in touch (or ping me on [Mastodon](https://social.lol/@cory) if you'd rather not use email).
-
-<form class="mt-4 flex flex-col justify-center items-center w-full" method="POST" action="/contact/success" name="contact" netlify netlify-honeypot="bot-field">
-  <label class="hidden">
-    Don't fill this out if you're human: <input name="bot-field" />
-  </label>
-  <label class="w-full md:w-3/4">
-    <span class="hidden">Name</span>
-    <input type="text" name="name" placeholder="Name" class="w-full outline-none bg-white dark:bg-gray-900 p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" required />
-  </label>
-  <label class="w-full md:w-3/4">
-    <span class="hidden">Email</span>
-    <input type="email" name="email" placeholder="Email" class="w-full outline-none bg-white dark:bg-gray-900 p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" required />
-  </label>
-  <textarea name="message" placeholder="Message"  class="w-full md:w-3/4 h-40 resize-none outline-none bg-white dark:bg-gray-900 p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" required></textarea>
-  <button class="pill--button w-1/2 md:w-1/3" type="submit">Send message</button>
-</form>
+<div class="flex flex-col md:flex-row">
+  <div class="w-full md:w-1/2 md:pr-6">
+    <p>Fill out the form to get in touch. Or I've got other options below 👇🏻</p>
+    <ul>
+      <li>Ping me on <a href="https://social.lol/@cory">Mastodon</a></li>
+      <li>Message me on Signal or iMessage (if you have my phone number)</li>
+      <li><a href="mailto:{{ site.email }}">Email me directly</a> if you have a client set up to use <code>mailto:</code> links</li>
+      <li>File an issue on the appropriate repo over at <a href="https://github.com/cdransf">GitHub</a></li>
+    </ul>
+  </div>
+  <form class="md:mt-4 flex flex-col items-center justify-center w-full md:w-1/2" method="POST" action="/contact/success" name="contact" netlify netlify-honeypot="bot-field">
+    <label class="hidden">
+      Don't fill this out if you're human: <input name="bot-field" />
+    </label>
+    <label class="w-full">
+      <span class="hidden">Name</span>
+      <input type="text" name="name" placeholder="Name" class="w-full outline-none bg-white dark:bg-gray-900 p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" required />
+    </label>
+    <label class="w-full">
+      <span class="hidden">Email</span>
+      <input type="email" name="email" placeholder="Email" class="w-full outline-none bg-white dark:bg-gray-900 p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" required />
+    </label>
+    <textarea name="message" placeholder="Message"  class="w-full h-40 resize-none outline-none bg-white dark:bg-gray-900 p-2 mb-6 rounded-sm border border-blue-600 focus:border-blue-800 dark:border-blue-400 dark:focus:border-blue-200 transition-colors ease-in-out duration-300" required></textarea>
+    <button class="pill--button w-1/2" type="submit">Send message</button>
+  </form>
+</div>