action btns moved

Katarni · Aug 3, 2024 · 70d9b4f · 70d9b4f
1 parent 021c2fa
commit 70d9b4f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -25,6 +25,24 @@
 <body>
     <header>
         <h1 id="header-title">DnD battles</h1>
+
+        <div class="header-buttons-box">
+            <button class="action-btn" id="reorder-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
+                    <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
+                    <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
+                </svg>
+                <p class="action-btn-text">Reorder</p>
+            </button>
+
+            <button class="action-btn" id="remove-all-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
+                    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
+                </svg>
+                <p class="action-btn-text">Clear</p>
+            </button>
+        </div>
     </header>
 
     <main>
@@ -119,16 +137,6 @@ <h2 class="char-name">Name</h2>
                 </div>
             </div>
         </div> -->
-
-        <div id="remove-all-box">
-            <button class="remove-btn">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
-                    <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
-                </svg>
-                <p class="remove-btn-text">Clear</p>
-            </button>
-        </div>
     </main>
 
     <footer>

diff --git a/styles/style.css b/styles/style.css
@@ -14,6 +14,7 @@ header {
     height: 10vh;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 #header-title {
@@ -34,51 +35,70 @@ main {
     align-items: center;
 }
 
-#remove-all-box {
-    margin-top: 20px;
-
-    width: 80%;
-
+.header-buttons-box {
     display: flex;
     flex-direction: row;
-    justify-content: end;
+
+    margin-right: 20px;
 }
 
-.remove-btn {
+.action-btn {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
 
-    color: #b4637a;
+
     background: transparent;
-    border: 2px solid #b4637a;
+
     border-radius: 10px;
     font-weight: 500;
     font-family: "Montserrat";
+
+    margin-right: 20px;
+}
+
+#remove-all-btn {
+    color: #b4637a;
+    border: 2px solid #b4637a;
+}
+
+#reorder-btn {
+    color: #907aa9;
+    border: 2px solid #907aa9;
 }
 
 @media (hover: hover) {
-    .remove-btn:hover {
+    #remove-all-btn:hover {
         color: #fffaf3;
         background: #b4637a;
     }
+
+    #reorder-btn:hover {
+        color: #fffaf3;
+        background: #907aa9;
+    }
 }
 
 @media (hover: none) {
-    .remove-btn:active {
+    #remove-all-btn:active {
         color: #fffaf3;
         background: #b4637a;
     }
+
+    #reorder-btn:hover {
+        color: #fffaf3;
+        background: #907aa9;
+    }
 }
 
-.bi-trash {
+.action-btn > .bi {
     height: 20px;
     width: 20px;
     margin-left: 10px;
 }
 
-.remove-btn-text {
+.action-btn-text {
     font-size: 20px;
     margin: 8px 10px 8px 5px;
 }