html: Add search hints.

1 files changed, 22 insertions, 0 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 6d91471..11e02e5 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -98,13 +98,35 @@ tr.important svg {
     #search input:focus {
         width: 400px;
     }
+    #search #search-hints {
+        width: 400px;
+    }
 }
 
 @media (min-width: 768px) {
     #search input:focus {
         width: 500px;
     }
+    #search.form-inline #search-hints {
+        width: 500px;
+    }
+}
+
+#search #search-hints {
+    display: none;
+    position: absolute;
+    background: white;
+    top: 2.5rem;
+    border: 1px solid #ced4da;
+    border-top: none;
+    box-shadow: 3px 3px 10px #ddd;
+    padding: 1em;
+    z-index: 2;
+}
+#search.form-inline:focus-within #search-hints {
+    display: block;
 }
+#search { z-index: 3; }
 
 footer {
     border-color: #1A1A1A1A;