diff --git a/src/main/resources/static/filter.svg b/src/main/resources/static/filter.svg new file mode 100644 index 0000000..d90e5c0 --- /dev/null +++ b/src/main/resources/static/filter.svg @@ -0,0 +1,49 @@ + + + + diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index 62eb72d..706751a 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -30,12 +30,9 @@ header { display: flex; flex-direction: row; float: right; -} - -#search-bar { + gap: .5rem; background-color: var(--fg-color, darkgrey); padding: .5rem 1rem; - width: 100%; border-radius: 1.5rem; } @@ -44,6 +41,9 @@ header { border: none; color: var(--text-color); } +#search-entry:focus-visible { + outline: none; +} .datasets { padding-inline: var(--pad-datasets); @@ -78,7 +78,7 @@ header { gap: .5em; } /* Buttons */ -.upvote-btn, .downvote-btn, .search-btn { +.upvote-btn, .downvote-btn, .search-btn, .filter-btn { background: var(--icon-url) no-repeat; background-size: contain; border: none; @@ -103,11 +103,15 @@ header { --icon-url: url(looking-glass.svg); --icon-size: 1rem; } +.filter-btn{ + --icon-url: url(filter.svg); + --icon-size: 1rem; +} -:is(.upvote-btn, .downvote-btn, .search-btn):is(:hover, :focus-visible) { +:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) { filter: brightness(1.5); } -:is(.upvote-btn, .downvote-btn, .search-btn):active { +:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active { filter: brightness(1.75); } diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 7654302..b65b530 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -14,10 +14,17 @@
-