add search button

2 files changed, 26 insertions, 1 deletions

diff --git a/style/header.php b/style/header.php
index f8b8090..faf7292 100644
--- a/style/header.php
+++ b/style/header.php
@@ -31,7 +31,8 @@
   <div id="searchbox">
   <form action="/query.php" method="GET">
 <?php
-  printf("<input type='text' placeholder='Search...' name='q' value='%s'>\n", $_GET["q"]);
+  printf("<input type='text' placeholder='Search...' name='q' value='%s'>", $_GET["q"]);
+  printf("<input type='submit' value='Go'>");
   printf("<div id='options'>\n");
   printf(" <input type='checkbox' name='SFW' id='SFW' %s>\n", $SFW);
   printf(" <label for='SFW'>SFW</label>\n");
diff --git a/style/style.css b/style/style.css
index d1e1e72..0b0ef38 100644
--- a/style/style.css
+++ b/style/style.css
@@ -29,10 +29,34 @@ h1, #header {
   text-align: center;
 }
 
+@media only screen and (max-width: 75em) {
+  #searchbox input[type=text] { width: 45vw !important; }
+}
+
 #searchbox {
   text-align: center;
   font-size: 1em;
 }
+#searchbox input[type=text] {
+  width: 50em;
+  height: 2.5em;
+  box-sizing: border-box;
+  border: 3px solid #ccc;
+  border-right: none;
+  outline: none;
+}
+#searchbox input[type=text]:focus { background: #aaa; }
+#searchbox input[type=submit]:hover { background: #aaa; }
+#searchbox input[type=submit] {
+  width: 2.5em;
+  height: 2.5em;
+  font-weight: bold;
+  cursor: pointer;
+  margin: 0 1em 0 0;
+  background: #ccc;
+  border: 3px solid #ccc;
+  border-left: none;
+}
 
 #options { display: inline-block; }