From d6692526d5e8d953a3bbac168e593b0ad8091058 Mon Sep 17 00:00:00 2001
From: Ariejan de Vroom <ariejan@devroom.io>
Date: Wed, 24 Jan 2024 14:24:41 +0100
Subject: [PATCH] restyle contact form

---
 content/contact.md                           | 44 ++++++---------
 themes/devroom-2024/assets/scss/devroom.scss | 57 +++++++++++++++-----
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/content/contact.md b/content/contact.md
index 82779cf..824d78a 100644
--- a/content/contact.md
+++ b/content/contact.md
@@ -3,38 +3,24 @@ type = "page"
 title = "Contact"
 +++
 
-I _love_ hearing from you, especially if any of my posts was helpful to you. I know
-a lot of you are looking to repair your television or audio equipment. Go for it!
+I _love_ hearing from you, especially if any of my posts was helpful to you. Please note, I don't have the time or 
+resources to diagnose specific issues with your audio or TV equipment. 
 
-I do have to disappoint those who want to send me their gear for repair or request
-specific instruction on how to so themselves. I don't have the time to assist you
-to a degree that would make either of us happy. I _can_ refer you to
-[/r/AskElectronics](https://www.reddit.com/r/AskElectronics/) and
-[/r/audiorepair](https://www.reddit.com/r/audiorepair/) on Reddit, where many
-helpful (and more knowledgeable) people are ready to help out.
+_Note: this form is processed through [Fromspree.io](https://formspree.io)_ 
 
-## Let's get to it
-
-<form name="contact" method="POST" class="pure-form pure-form-stacked" action="https://formspree.io/ariejan@devroom.io">
+<form name="contact" method="POST" action="https://formspree.io/ariejan@devroom.io">
     <fieldset>
-        <div class="pure-control-group">
-            <label for="name">Your name:</label>
-            <input type="text" name="name" class="pure-input-1" id="inputName" required>
-        </div>
-        <div class="pure-control-group">
-            <label for="email">Your email address:</label>
-            <input type="email" name="email" class="pure-input-1" id="inputEmail" required>
-        </div>
-        <div class="pure-control-group">
-            <label for="email">Your messages</label>
-            <textarea name="message" class="pure-input-1" id="inputMessage" rows="6" required></textarea>
-        </div>
-        <div class="pure-controls">
-            <button class="pure-button pure-button-primary" style="background-color: #F6019D; margin-top: 1.2vh;" type="submit">Send</button>
-        </div>
+        <label for="name">Your name:</label>
+        <input type="text" name="name" id="inputName" required>
+        <br />
+        <label for="email">Your email address:</label>
+        <input type="email" name="email" id="inputEmail" required>
+        <br />
+        <label for="email">Your messages</label>
+        <textarea name="message" id="inputMessage" rows="12" required></textarea>
+        <br />
+        <input type="submit" value="Send it">
     </fieldset>
 </form>
 
-If you need to, use my [GPG Key](/gpg/) or [Keybase](https://keybase.io/adevroom) to
-encrypt your message to me. Your message will result in a regular email to me and will
-be treated confidentially.
+If you need privacy use my [GPG Key](/gpg/).
diff --git a/themes/devroom-2024/assets/scss/devroom.scss b/themes/devroom-2024/assets/scss/devroom.scss
index 541609d..816b49e 100644
--- a/themes/devroom-2024/assets/scss/devroom.scss
+++ b/themes/devroom-2024/assets/scss/devroom.scss
@@ -11,7 +11,7 @@ $line-height: 1.6;
 
 $accent: rgb(90, 126, 193);
 $background: rgb(40, 44, 53);
-$backdrop: $background;
+$backdrop: darken($background, 5%);
 $text: rgb(226, 226, 226);
 $subtext: #868686;
 $links: $accent;
@@ -20,13 +20,14 @@ $meta: $text;
 $header: $text;
 $highlight: $links;
 $blockquote_border: $accent;
+$important_border: #f00;
 $code_background: $background;
 $code_border_color: $background;
 $code: #ff9327;
 $separator: darken(desaturate($accent, 20%), 20%);
 
 html, body {
-    background-color: $backdrop;
+    background-color: $background;
     color: $text;
     font-family: "Mulish", sans-serif;
     font-size: $font_size;
@@ -39,16 +40,9 @@ code, pre {
 }
 
 .important {
-  width: 100%;
-  display: block;
-  font-style: italic;
-}
-
-.important::before {
-    content: '\f0a4';
-    font-family: "Font Awesome 6 Free";
-    font-size: 1rem;
-    margin-right: 0.7rem;
+    display: block;
+    border-left: 5px solid $important_border;
+    padding-left: 1rem;
 }
 
 .container {
@@ -407,4 +401,43 @@ a.tag {
             border-radius: 50%;
         }
     }
+}
+
+form {
+    fieldset {
+        border: 2px solid $separator;
+        padding: 12px 16px;
+    }
+    input, textarea {
+        width: 100%;
+        padding: 12px;
+        margin: 8px 0;
+        box-sizing: border-box;
+
+        border: 2px solid $separator;
+        border-radius: 4px;
+
+        background-color: $backdrop;
+        color: $text;
+
+        &:focus {
+            outline: none;
+            border: 2px solid $accent;
+        }
+    }
+
+    textarea {
+        resize: none;
+    }
+
+    input[type=button], input[type=submit], input[type=reset] {
+        background-color: $accent;
+        border: none;
+        color: $text;
+        padding: 16px 32px;
+        text-decoration: none;
+        margin: 4px 2px;
+        cursor: pointer;
+      }
+      
 }
\ No newline at end of file