diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css
index d3c8a35..1f1581a 100644
--- a/src/main/resources/static/main.css
+++ b/src/main/resources/static/main.css
@@ -87,7 +87,7 @@ header {
gap: .5em;
}
/* Buttons */
-.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
+.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
background: var(--icon-url) no-repeat;
background-size: contain;
border: none;
@@ -108,19 +108,29 @@ header {
transform: rotate(180deg);
}
-.search-btn {
+#search-btn {
--icon-url: url(looking-glass.svg);
--icon-size: 1rem;
}
-.filter-btn{
+#filter-btn {
--icon-url: url(filter.svg);
--icon-size: 1rem;
}
-:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
+#sort-btn {
+ --icon-url: url(sort.svg);
+ --icon-size: 1rem;
+}
+
+.divider {
+ width: .05rem;
+ background-color: #222;
+}
+
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
filter: brightness(1.5);
}
-:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
filter: brightness(1.75);
}
diff --git a/src/main/resources/static/sort.svg b/src/main/resources/static/sort.svg
new file mode 100644
index 0000000..a259268
--- /dev/null
+++ b/src/main/resources/static/sort.svg
@@ -0,0 +1,61 @@
+
+
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index efc3f69..995a140 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -4,7 +4,7 @@
DataDash
-
+