From 854e015282745e604a30fc0abc9dd748c34ec222 Mon Sep 17 00:00:00 2001
From: Zakarya <zakaryacarroll.contact@gmail.com>
Date: Wed, 24 Jul 2024 14:17:10 -0700
Subject: [PATCH] Cool pill-style buttons for link tree

---
 css/style.css      | 36 +++++++++++++++++++++++++++++++++---
 zakarya/index.html |  2 +-
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index de11ef2..ec3efe4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -84,11 +84,41 @@ main div.hero p.justify {
 }
 
 main div.hero ul {
-    width: fit-content;
     margin-left: auto;
     margin-right: auto;
-    text-align: left;
-    padding-left: 20px;
+}
+
+ul.linktree {
+    list-style-type: none;
+    margin: 0;
+    padding: 8px;
+    padding-left: 8px;
+    width: 30%;
+}
+
+@media screen and (max-width: 600px) {
+    ul.linktree {
+        width: 60%;
+    }
+}
+
+ul.linktree li {
+    margin: 12px;
+    background-color: #4c5053;
+    padding: 8px 16px;
+    border-radius: 50px;
+    text-align: center;
+    transition-duration: 0.5s;
+}
+
+ul.linktree li:hover {
+    cursor: pointer;
+    background-color: #383c3f
+}
+
+ul.linktree li a {
+    text-decoration: none;
+    color: white;
 }
 
 div.footer {
diff --git a/zakarya/index.html b/zakarya/index.html
index aff555b..00fe729 100644
--- a/zakarya/index.html
+++ b/zakarya/index.html
@@ -24,7 +24,7 @@ $(document).ready(function(){
       <div style="margin-top: 10%;"></div><!-- Separator -->
       <div class="hero">
         <h1>Zakarya</h1>
-        <ul>
+        <ul class="linktree">
           <li><a href="https://github.com/CZakarya" target="_blank" rel="noopener noreferrer">GitHub</a></li>
           <li><a href="https://www.youtube.com/@czakarya" target="_blank" rel="noopener noreferrer">Youtube</a></li>
           <li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>