andrew/follow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds autofocus to search input and fixes display on mobile

Browse Source
This commit is contained in:
Andrew Gioia 2025-10-31 10:03:36 -04:00
parent efc54383bd
commit 0c551aadd5
Signed by: andrew
GPG Key ID: FC09694A000800C8
2 changed files with 75 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
inc/style.css
View File

@ -68,19 +68,10 @@ h1 {
font-size: 1.25rem;
font-weight: 800;
margin: 0;
}
h1 span {
display: flex;
font-weight: 300;
text-transform: lowercase;
gap: 0.5rem;
margin-left: 0.5rem;
}
h1 span::before {
color: #aaa;
content: '//';
display: block;
span {
display: none;
}
}
form {
@ -103,10 +94,11 @@ input[type="url"] {
padding: 0 8.5rem 0 3.5rem;
transition: box-shadow 150ms ease-in-out;
width: 100%;
}
input[type="url"]:focus {
&:focus {
outline: none;
box-shadow: inset 0 0.25rem 0 0 #f0eded, 0 0 0 1px #fff, 0 0 0 0.25rem #39b9e4;
}
}
button[type="submit"] {
background: #fff;
@ -117,14 +109,19 @@ button[type="submit"] {
cursor: pointer;
height: 100%;
font-size: 1.25rem;
padding: 0.75rem 2rem 0.8rem 1.75rem;
padding: 0.75rem 1.5rem 0.8rem 1.25rem;
position: absolute;
top: 0;
transition: background 150ms ease-in-out;
right: 0;
}
button[type="submit"]:hover {
&:hover {
background-color: #f0eded;
}
span {
display: none;
}
}
address {
@ -387,6 +384,17 @@ caption {
text-align: left;
}
/* tablet */
@media screen and (min-width: 756px) {
button[type="submit"] {
padding: 0.75rem 2rem 0.8rem 1.75rem;
span {
display: inline;
}
}
}
/* laptop */
@media screen and (min-width: 1024px) {
menu {
@ -394,6 +402,20 @@ caption {
}
h1 {
font-size: 1.75rem;
span {
display: flex;
font-weight: 300;
text-transform: lowercase;
gap: 0.5rem;
margin-left: 0.5rem;
&::before {
color: #aaa;
content: '//';
display: block;
}
}
}
form {
width: 75%;

6
index.php
View File

@ -29,8 +29,10 @@ include('inc/codes.php');
</nav>
</menu>
<form method="post" action="/" type="application/x-www-form-urlencoded">
<input type="url" value="<?php echo (isset($url)) ? $url : ''; ?>" placeholder="URL to check..." name="url">
<button type="submit">Check</button>
<input type="url" value="<?php echo (isset($url)) ? $url : ''; ?>" placeholder="URL to check..." name="url" autofocus>
<button type="submit">
<span>Check </span>&rarr;
</button>
</form>
</header>