parker/pkrm.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make contact form look better on mobile

Browse Source
This commit is contained in:
Parker M. 2023-10-17 13:42:42 -05:00
parent ef924e201e
commit ca87cb1480
No known key found for this signature in database
GPG Key ID: 95CD2E0C7E329F2A
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
contact/index.html
View File

@ -75,7 +75,7 @@
/* "Back Home" media query for mobile */ /* "Back Home" media query for mobile */
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#back-home { #back-home {
font-size: 3.125vw; font-size: 7vw;
padding-top: 4.167vw; padding-top: 4.167vw;
width: 90%; width: 90%;
display: flex; display: flex;
@ -95,7 +95,7 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.container { .container {
position: absolute; position: absolute;
top: 60%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
@ -107,6 +107,13 @@
margin: 0.521vw; margin: 0.521vw;
} }
/* Attention media query for mobile */
@media only screen and (max-width: 600px) {
#attention, #attention a {
font-size: 5vw;
}
}
#pgp-key, #contact-email { #pgp-key, #contact-email {
color: #fff; color: #fff;
text-decoration: underline; text-decoration: underline;
@ -144,7 +151,8 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
form input, form textarea, form button { form input, form textarea, form button {
width: 70vw; width: 70vw;
font-size: 1.563vw; font-size: 7vw;
margin: 5px;
} }
form button { form button {
@ -159,6 +167,13 @@
text-align: center; text-align: center;
visibility: hidden; visibility: hidden;
} }
/* Response media query for mobile */
@media only screen and (max-width: 600px) {
.response {
font-size: 3.125vw;
}
}
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script> <script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>

6
index.html
View File

@ -1,9 +1,3 @@
<!-- REMINDER/TODO
Optimization for tablets and possibly other strange resolution/aspect ratio devices has not been done yet.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>