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

6
index.php
View File

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