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 @@