ariejan/devroom.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyle contact form

Browse Source
This commit is contained in:
Ariejan de Vroom 2024-01-24 14:24:41 +01:00
parent d565e3d5f2
commit d6692526d5
Signed by: ariejan
GPG Key ID: AD739154F713697B
2 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
content/contact.md
View File

@ -3,38 +3,24 @@ type = "page"
title = "Contact" title = "Contact"
+++ +++
I _love_ hearing from you, especially if any of my posts was helpful to you. I know I _love_ hearing from you, especially if any of my posts was helpful to you. Please note, I don't have the time or
a lot of you are looking to repair your television or audio equipment. Go for it! 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 _Note: this form is processed through [Fromspree.io](https://formspree.io)_
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.
## Let's get to it <form name="contact" method="POST" action="https://formspree.io/ariejan@devroom.io">
<form name="contact" method="POST" class="pure-form pure-form-stacked" action="https://formspree.io/ariejan@devroom.io">
<fieldset> <fieldset>
<div class="pure-control-group"> <label for="name">Your name:</label>
<label for="name">Your name:</label> <input type="text" name="name" id="inputName" required>
<input type="text" name="name" class="pure-input-1" id="inputName" required> <br />
</div> <label for="email">Your email address:</label>
<div class="pure-control-group"> <input type="email" name="email" id="inputEmail" required>
<label for="email">Your email address:</label> <br />
<input type="email" name="email" class="pure-input-1" id="inputEmail" required> <label for="email">Your messages</label>
</div> <textarea name="message" id="inputMessage" rows="12" required></textarea>
<div class="pure-control-group"> <br />
<label for="email">Your messages</label> <input type="submit" value="Send it">
<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>
</fieldset> </fieldset>
</form> </form>
If you need to, use my [GPG Key](/gpg/) or [Keybase](https://keybase.io/adevroom) to If you need privacy use my [GPG Key](/gpg/).
encrypt your message to me. Your message will result in a regular email to me and will
be treated confidentially.

57
themes/devroom-2024/assets/scss/devroom.scss
View File

@ -11,7 +11,7 @@ $line-height: 1.6;
$accent: rgb(90, 126, 193); $accent: rgb(90, 126, 193);
$background: rgb(40, 44, 53); $background: rgb(40, 44, 53);
$backdrop: $background; $backdrop: darken($background, 5%);
$text: rgb(226, 226, 226); $text: rgb(226, 226, 226);
$subtext: #868686; $subtext: #868686;
$links: $accent; $links: $accent;
@ -20,13 +20,14 @@ $meta: $text;
$header: $text; $header: $text;
$highlight: $links; $highlight: $links;
$blockquote_border: $accent; $blockquote_border: $accent;
$important_border: #f00;
$code_background: $background; $code_background: $background;
$code_border_color: $background; $code_border_color: $background;
$code: #ff9327; $code: #ff9327;
$separator: darken(desaturate($accent, 20%), 20%); $separator: darken(desaturate($accent, 20%), 20%);
html, body { html, body {
background-color: $backdrop; background-color: $background;
color: $text; color: $text;
font-family: "Mulish", sans-serif; font-family: "Mulish", sans-serif;
font-size: $font_size; font-size: $font_size;
@ -39,16 +40,9 @@ code, pre {
} }
.important { .important {
width: 100%; display: block;
display: block; border-left: 5px solid $important_border;
font-style: italic; padding-left: 1rem;
}
.important::before {
content: '\f0a4';
font-family: "Font Awesome 6 Free";
font-size: 1rem;
margin-right: 0.7rem;
} }
.container { .container {
@ -407,4 +401,43 @@ a.tag {
border-radius: 50%; 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;
}
} }