restyle contact form
This commit is contained in:
parent
d565e3d5f2
commit
d6692526d5
|
@ -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" class="pure-input-1" id="inputName" required>
|
<input type="text" name="name" id="inputName" required>
|
||||||
</div>
|
<br />
|
||||||
<div class="pure-control-group">
|
|
||||||
<label for="email">Your email address:</label>
|
<label for="email">Your email address:</label>
|
||||||
<input type="email" name="email" class="pure-input-1" id="inputEmail" required>
|
<input type="email" name="email" id="inputEmail" required>
|
||||||
</div>
|
<br />
|
||||||
<div class="pure-control-group">
|
|
||||||
<label for="email">Your messages</label>
|
<label for="email">Your messages</label>
|
||||||
<textarea name="message" class="pure-input-1" id="inputMessage" rows="6" required></textarea>
|
<textarea name="message" id="inputMessage" rows="12" required></textarea>
|
||||||
</div>
|
<br />
|
||||||
<div class="pure-controls">
|
<input type="submit" value="Send it">
|
||||||
<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.
|
|
||||||
|
|
|
@ -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;
|
||||||
font-style: italic;
|
border-left: 5px solid $important_border;
|
||||||
}
|
padding-left: 1rem;
|
||||||
|
|
||||||
.important::before {
|
|
||||||
content: '\f0a4';
|
|
||||||
font-family: "Font Awesome 6 Free";
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-right: 0.7rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
@ -408,3 +402,42 @@ a.tag {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user