diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/style.css | 42 |
1 files changed, 36 insertions, 6 deletions
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 { |