From 79b3c9a2f7b76dcb1433615ce112f17435e76fef Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Thu, 3 Feb 2022 20:20:18 +0100
Subject: [PATCH] updated info-table on home

---
 src/views/Home.vue | 79 ++++++++++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 27f4194..ead4d08 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -22,33 +22,58 @@
     </div>
     <hr v-if="recentVisited !== null" class="m-auto text-muted">
     <div class="body container m-auto row mt-5 mb-5 justify-content-center">
-      <div class="col-sm-12 col-md-4 col-lg-3">
-        <i class="fa fa-code-fork"></i>
-
-        <h4 class="fw-light">Open Source</h4>
-        <p class="fw-light">Everything is open source and under GPL licence. Contributions welcome.</p>
-      </div>
-      <div class="col-sm-12 col-md-4 col-lg-3">
-        <i class="fa fa-liberapay"></i>
-        <h4 class="fw-light">
-          <a href="https://liberapay.com/CSGOWTF/donate" target="_blank">
-            <img alt="Donate using Liberapay"
-                 src="https://liberapay.com/assets/widgets/donate.svg"
-                 style="height: 25px">
-          </a>
-        </h4>
-        <p class="fw-light">We develop this site in our spare time. If you want to support us, donations are
-          appreciated!</p>
-        <div class="d-flex flex-column justify-content-center align-items-center gap-2 mb-3">
-          <img alt="liberapay patrons" src="https://img.shields.io/liberapay/patrons/CSGOWTF.svg"
-               style="height: 25px"/>
-        </div>
-      </div>
-      <div class="col-sm-12 col-md-4 col-lg-3">
-        <i class="fa fa-pie-chart"></i>
-        <h4 class="fw-light">In-Depth Data</h4>
-        <p class="fw-light">Matches with parsed replay provide additional match data.</p>
-      </div>
+      <table class="table table-borderless">
+        <thead>
+        <tr>
+          <th>
+            <i class="fa fa-code-fork"/>
+          </th>
+          <th>
+            <i class="fa fa-liberapay"/>
+          </th>
+          <th>
+            <i class="fa fa-pie-chart"/>
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr class="align-middle">
+          <td>
+            <h4 class="fw-light">Open Source</h4>
+          </td>
+          <td>
+            <a href="https://liberapay.com/CSGOWTF/donate" target="_blank">
+              <img alt="Donate using Liberapay"
+                   src="https://liberapay.com/assets/widgets/donate.svg"
+                   style="height: 35px">
+            </a>
+          </td>
+          <td>
+            <h4 class="fw-light">In-Depth Data</h4>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <p class="fw-light">Everything is open source and under GPL licence. Contributions welcome.</p>
+          </td>
+          <td>
+            <p class="fw-light">We develop this site in our spare time. If you want to support us, donations are
+              appreciated!</p>
+          </td>
+          <td>
+            <p class="fw-light">Matches with parsed replay provide additional match data.</p>
+          </td>
+        </tr>
+        <tr>
+          <td/>
+          <td>
+            <img alt="liberapay patrons" src="https://img.shields.io/liberapay/patrons/CSGOWTF.svg"
+                 style="height: 25px"/>
+          </td>
+          <td/>
+        </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </template>