cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: contact layout improvements

Browse source
This commit is contained in:
Cory Dransfeldt 2023-12-10 08:31:04 -08:00
parent 91de3e0a7e
commit d0fd91cedf
No known key found for this signature in database
3 changed files with 37 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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": {

16
src/assets/styles/tailwind.css
View file

@ -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;
}

43
src/contact.md
View file

@ -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>