Adds autofocus to search input and fixes display on mobile

inc/style.css

@@ -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,11 +94,12 @@ 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;
     border: 0.15rem solid #1a1a1a;
@@ -117,16 +109,21 @@ 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 {
     display: flex;
     align-self: stretch;
@@ -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%;

index.php

@@ -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>