diff --git a/README.md b/README.md index 5264846..b3d5d32 100644 --- a/README.md +++ b/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 ``` diff --git a/assets/style.css b/assets/style.css index b745cc9..09f015f 100644 --- a/assets/style.css +++ b/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 { - width: 20rem; + div.search { + width: 25rem; } .header-title { diff --git a/templates/searchform.html b/templates/searchform.html index c13cd0a..b462948 100644 --- a/templates/searchform.html +++ b/templates/searchform.html @@ -1,6 +1,8 @@
+