modify a little

This commit is contained in:
Akis 2022-07-28 14:52:53 +03:00
parent 6a9a38cf6c
commit ff5e582e97
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
2 changed files with 57 additions and 19 deletions

12
pnpm-lock.yaml generated
View File

@ -10,6 +10,7 @@ specifiers:
prettier-plugin-svelte: ^2.7.0
svelte: ^3.49.0
svelte-check: ^2.8.0
svelte-hcaptcha: ^0.1.1
svelte-preprocess: ^4.10.7
svelte-seo: ^1.4.1
tslib: ^2.4.0
@ -21,12 +22,13 @@ devDependencies:
'@iconify-json/fa6-solid': 1.1.5
'@iconify-json/simple-icons': 1.1.19
'@sveltejs/adapter-static': 1.0.0-next.38
'@sveltejs/kit': 1.0.0-next.391_svelte@3.49.0+vite@3.0.2
'@sveltejs/kit': 1.0.0-next.396_svelte@3.49.0+vite@3.0.2
mdsvex: 0.10.6_svelte@3.49.0
prettier: 2.7.1
prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
svelte: 3.49.0
svelte-check: 2.8.0_svelte@3.49.0
svelte-hcaptcha: 0.1.1
svelte-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji
svelte-seo: 1.4.1_typescript@4.7.4
tslib: 2.4.0
@ -127,8 +129,8 @@ packages:
tiny-glob: 0.2.9
dev: true
/@sveltejs/kit/1.0.0-next.391_svelte@3.49.0+vite@3.0.2:
resolution: {integrity: sha512-2KWIPF7YjVCFldXRuMcSmv3tliTf92kkJaws/hxJ+MioTJx9QwYB/V+JYzIEMRMcddZDb+Rp1ko3vrQ95c1vmg==}
/@sveltejs/kit/1.0.0-next.396_svelte@3.49.0+vite@3.0.2:
resolution: {integrity: sha512-bKFpuzp9QxPkOIOEIeNeedvxEMORNqBPxUmoJXDP/Se7MrSfcxYiamjBcKrG+bgGNWmV39nD3EvUox+CXno/Ig==}
engines: {node: '>=16.9'}
hasBin: true
peerDependencies:
@ -1034,6 +1036,10 @@ packages:
- sugarss
dev: true
/svelte-hcaptcha/0.1.1:
resolution: {integrity: sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==}
dev: true
/svelte-hmr/0.14.12_svelte@3.49.0:
resolution: {integrity: sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}

View File

@ -15,9 +15,13 @@ description: Do you want to contact us?
{ description }
## Contact Form
<IconLock /> <b>Your IP will be logged for anti-abuse measures.</b>
<form action="https://segfautilities.projectsegfau.lt/api/form" method="POST">
<input type="text" name="email" class="FormTextbox" placeholder="Email" required="required"/>
<div class="ip-note">
<IconLock />
<b>Your IP will be logged for anti-abuse measures.</b>
</div>
<div class="meta">
<input type="text" name="email" class="form-textbox" placeholder="Email" required="required"/>
<select id="commentType" name="commentType" required="required" class="button">
<option value="" selected="selected" disabled="disabled">Select a type of comment</option>
<option value="Feedback">Feedback</option>
@ -25,10 +29,11 @@ description: Do you want to contact us?
<option value="Question">Question</option>
<option value="Bug">Bug</option>
</select>
<br />
<textarea id="comment" name="message" rows="4" cols="50" required="required" class="FormTextbox">Your message.</textarea>
</div>
<textarea id="comment" name="message" rows="4" cols="25" required="required" class="form-textbox" placeholder="Your message"></textarea>
<HCaptcha
sitekey=67e84266-980c-4050-8a39-142a91928fe8
theme=dark
/>
<input type="submit" value="Submit" class="button" />
</form>
@ -44,16 +49,43 @@ _Please be aware that Microsoft often blocks non-popular emails, if you do conta
You can find ways to contact individual members [on our Members page](/members).
<style>
.FormTextbox {
form {
display: flex;
flex-direction: column;
gap: 1rem;
width: fit-content;
}
.ip-note {
display: flex;
align-items: center;
gap: 4px;
}
.meta {
display: flex;
align-items: center;
flex-direction: row;
gap: 1rem;
}
@media screen and (max-width: 450px) {
.meta {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
}
.form-textbox {
background-color: var(--tertiary);
color: var(--text);
border-radius: 10px;
border: none;
padding: 0.5rem;
margin-bottom: 5px;
font-family: 'Comfortaa', sans-serif;
}
.FormTextbox:focus {
.form-textbox:focus {
outline: none !important;
}
@ -68,14 +100,14 @@ You can find ways to contact individual members [on our Members page](/members).
text-decoration: none;
}
.button:hover {
.button:not(select):hover {
background-color: var(--accent-tertiary);
text-decoration: none;
transition: all 0.5s;
color: var(--secondary);
}
.button:active {
.button:not(select):active {
background-color: var(--accent-primary);
text-decoration: none;
transition: all 0.5s;