feat: repo links, better contrib hover appearance

src/lib/components/atoms/ContributorButton.svelte

@@ -25,7 +25,7 @@
 
 	button {
 		color: var(--white);
-		border-radius: 200px;
+		border-radius: 50%;
 		overflow: hidden;
         border: 0;
         width:45px;
@@ -33,14 +33,18 @@
         max-height: 86px;
         max-width: 86px;
 		cursor: pointer;
-		background-color: var(--grey-four);
+		background-color: transparent;
 		transition: transform 0.4s var(--bezier-one);
 		margin-bottom: 1rem;
 		user-select: none;
 	}
 
 	a:hover  {
-		background-color: var(--grey-one);
+		background-color: var(--grey-three);
+	}
+
+	a:hover > h2 {
+		color: var(--red);
 	}
 
 	h2 {

src/lib/components/molecules/ContributorHost.svelte

@@ -5,31 +5,37 @@
     import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
    
-    let contribs;
+    let contribs: Object;
+    let repo_link: string;
     export let repo: string;
 
     onMount (() => {
-        ContributorsStore.subscribe(async (data) => {
+        ContributorsStore.subscribe(async (e) => {
-            contribs = await data;
+            let data = await e;
-            contribs = contribs[repo].contributors
+            repo_link = 'https://github.com/' + data[repo].name;
+            contribs = data[repo].contributors
         });
     });
 
     let usersIwantToExplodeSoBadly = [
         'semantic-release-bot',
     ]
+    
 </script>
 
 {#if contribs}
     <div class="container" in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
-        <h2>
+        <a href={repo_link} target="_blank">
-            ReVanced {repo === 'cli' ? 'CLI' : repo.charAt(0).toUpperCase() + repo.slice(1)}
+            <h2>ReVanced {repo === 'cli' ? 'CLI' : repo.charAt(0).toUpperCase() + repo.slice(1)}</h2>
-        </h2>
+        </a>
-
         <div class="contrib-host">    
             {#each contribs as contrib}
                 {#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
-                    <ContributorButton name={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
+                    <ContributorButton 
+                        name={contrib.login} 
+                        pfp={contrib.avatar_url} 
+                        url={contrib.html_url} 
+                    />
                 {/if}
             {/each}
         </div>
@@ -37,21 +43,39 @@
 {/if}
 
 <style>
+
     h2 {
         margin-bottom: 1rem;
     }
+    a {
+        transition: all 0.3s var(--bezier-one);
+        display:block;
+        text-decoration: none;
+        width: max-content;
+        border-radius: 8px;
+    }
+
+    a > h2 {
+        transition: all 0.3s var(--bezier-one);
+        width: max-content;
+        padding: 0rem 0.4rem;
+        border-radius: 8px;
+    }
+
+    a:hover > h2 {
+        width: max-content;
+        background-color: var(--grey-three);
+        color: var(--red);
+    }
+
     .contrib-host {
         gap: 1.5rem;
         display: grid;
-		align-items: center;
+        justify-items: center;
         grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
         background-color: var(--grey-six);
         padding: 1.5rem;
         border-radius: 28px;
     }
 
-    /* temporary, put into main wrapper when homepage is more fleshed out */
-    .container {
-        margin-bottom: 3rem;
-    }
 </style>

src/routes/credits/+page.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-
 </script>
 
 <div class="wrapper contrib-grid">
-    <h1>
-        <span class="redder">Re</span>Vanced Contributors
-    </h1>
     <ContributorHost repo="cli"/>
     <ContributorHost repo="patcher"/>
     <ContributorHost repo="patches"/>
@@ -15,36 +11,10 @@
 </div>
 
 <style>
-    .redder {
-		color: var(--red);
-	}
-    h1 {
-        text-align: center;
-		color: var(--white);
-		font-weight: 700;
-		font-size: 5rem;
-		letter-spacing: -0.04em;
-		line-height: 1em;
-	}
     .contrib-grid {
         display: flex;
         flex-direction: column;
-        gap: 2rem;
+        gap: 3rem;
+        margin-bottom: 3rem;
     }
-
-    @media screen and (max-width: 1919px) {
-		h1 {
-			font-size: 3.5rem;
-		}
-	}
-	@media screen and (max-width: 1052px) {
-		h1 {
-			font-size: 2.5rem;
-		}
-	}
-	@media screen and (max-width: 768px) {
-		h1 {
-			font-size: 2rem;
-		}
-	}
 </style>