proper add button implementation

src/main/resources/static/main.css

@@ -29,12 +29,19 @@ header {
 }
 
 #add-btn {
+    width: 7rem;
+    height: 7rem;
+    content: url("add-button-mask.svg");
+    background: linear-gradient(135deg, pink, darkblue);
+    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
+
+    cursor: pointer;
+
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
 }
-
 #tool-bar {
     display: flex;
     flex-direction: row;
@@ -50,6 +57,7 @@ header {
     border: none;
     color: var(--text-color);
 }
+
 #search-entry:focus-visible {
     outline: none;
 }
@@ -124,13 +132,14 @@ header {
 
 .divider {
     width: .05rem;
-    background-color: #222;
+    height: 1rem;
+    background-color: var(--bg-color);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #add-btn):active {
     filter: brightness(1.75);
 }