fix lighthouse issues

ricokahler · May 11, 2020 · 5a1034c · 5a1034c
1 parent 71a02dc
commit 5a1034c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/website/App.css b/website/App.css
@@ -72,6 +72,10 @@ a {
   .search {
     display: none;
   }
+
+  .search-label {
+    display: none;
+  }
 }
 
 .nav {
@@ -88,8 +92,19 @@ a {
   }
 }
 
-.list {
+.jump-to {
+  margin: 0;
   margin-top: 3rem;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.search-label {
+  margin-right: 1rem;
+  flex: 0 0 auto;
+}
+
+.list {
   list-style-type: none;
   padding: 0;
 }
@@ -98,12 +113,6 @@ a {
   margin-top: 0.5rem;
 }
 
-.h2 {
-  font-size: 18px;
-  font-weight: bold;
-  margin: 0;
-}
-
 .nav-link {
   color: #444;
   text-decoration: none;

diff --git a/website/App.tsx b/website/App.tsx
@@ -21,7 +21,9 @@ function App({ docs, readmeHtml }: Props) {
           <a className="logo" href="/">
             <h1>color2k</h1>
           </a>
+          <label className="search-label" htmlFor="search">Search</label>
           <input
+            id="search"
             autoFocus
             className="search"
             value={value}
@@ -56,8 +58,8 @@ function App({ docs, readmeHtml }: Props) {
       </header>
 
       <nav className="nav">
+        <h2 className="jump-to">Jump to</h2>
         <ul className="list">
-          <h2 className="h2">Jump to</h2>
           {docs.map(({ functionName, id }) => {
             const index = functionName
               .toLowerCase()