actually add the search box

README.md

@@ -17,5 +17,5 @@ Docker has insurmountable issues with producing the files with the right
 permissions. Use `podman` instead:
 
 ```
-podman run -ti --rm -v $PWD:/data gitlab.lcsb.uni.lu:4567/r3-core/websites-dev/reploy
+podman run -ti --rm -v $PWD:/data gitlab.lcsb.uni.lu:4567/r3/websites-dev/reploy
 ```

assets/style.css

@@ -177,14 +177,44 @@ ul.search-results li div.search-tag {
 	font-weight: bold;
 }
 
-input.search {
+form.search-form-wrap {
 	width: 100%;
 }
 
-input, button {
+div.search {
+	width: 100%;
+	border: 2pt solid #eee;
+	border-radius: 2em;
+	transition: border 250ms;
+	margin-left: auto;
+	margin-right: auto;
+	display:flex;
+}
+
+div.search:focus-within {
+	border: 2pt solid #0ad;
+}
+
+.search i {
+	height: 2em;
+	width: 2em;
+	background-image: url('static/search.svg');
+	background-size: contain;
+	background-repeat: no-repeat;
+	flex-grow: 0;
+}
+
+.search input {
 	font-size: inherit;
 	font-family: inherit;
-	height: 2em;
+	line-height: 2em;
+	border: none;
+	background: none;
+	flex-grow: 1;
+}
+
+.search input:focus, .search input:active, .search input:focus-visible{
+	outline: none;
 }
 
 /* front page */
@@ -406,7 +436,7 @@ main {
 .content-footer {
 	height: 10rem;
 	margin-top: 5rem;
-	background-color: #aaa;
+	background-color: #ddd;
 	box-shadow:
 		inset 10rem -10rem 10rem 0 #fff,
 		inset -10rem -10rem 10rem 0 #fff;
@@ -446,8 +476,8 @@ main {
 
 @media screen and (min-width: 390pt /*30 rem*/) {
 
-	input.search {
+	div.search {
-		width: 20rem;
+		width: 25rem;
 	}
 
 	.header-title {

templates/searchform.html

@@ -1,6 +1,8 @@
 <div class="search-form-wrap">
   <form action="{{root}}search/">
+    <div class="search">
+      <i></i>
       <input class="search" placeholder="What are you looking for?" name="search_query" id="search_query" />
-      <button class="search" type="submit">Search!</button>
+    </div>
   </form>
 </div>