added searchbar

src/main/resources/static/main.css

@@ -29,12 +29,14 @@ header {
 #tool-bar {
     display: flex;
     flex-direction: row;
+    float: right;
 }
 
 #search-bar {
     background-color: var(--fg-color, darkgrey);
     padding: .5rem 1rem;
     width: 100%;
+    border-radius: 1.5rem;
 }
 
 #search-entry {
@@ -75,27 +77,37 @@ header {
     align-items: center;
     gap: .5em;
 }
-
+/* Buttons */
-.upvote-btn, .downvote-btn {
+.upvote-btn, .downvote-btn, .search-btn {
-    background: url(triangle.svg) no-repeat;
+    background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
-    width: 2em;
+    width: var(--icon-size);
-    height: 2em;
+    height: var(--icon-size);
     padding: 0;
     overflow: hidden;
     color: transparent;
     cursor: pointer;
 }
 
+.downvote-btn, .upvote-btn{
+    --icon-url: url(triangle.svg);
+    --icon-size: 2rem;
+}
+
 .downvote-btn {
     transform: rotate(180deg);
 }
 
-:is(.upvote-btn, .downvote-btn):is(:hover, :focus-visible) {
+.search-btn {
+    --icon-url: url(looking-glass.svg);
+    --icon-size: 1rem;
+}
+
+:is(.upvote-btn, .downvote-btn, .search-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn):active {
+:is(.upvote-btn, .downvote-btn, .search-btn):active {
     filter: brightness(1.75);
 }

src/main/resources/templates/index.html

@@ -16,6 +16,7 @@
         <section id="tool-bar">
             <div id="search-bar">
                 <input type="search" name="query" id="search-entry" placeholder="Search">
+                <button class="search-btn">Search</button>
             </div>
         </section>