feat: improve UX

docs/src/components/GitHubStats.svelte

@@ -31,12 +31,12 @@
 
 {#if !error && !loading}
   <div class="github">
-    <a class="category" href="https://github.com/tomalaforge/angular-challenges">
+    <a class="category star" href="https://github.com/tomalaforge/angular-challenges">
       <slot name="star"/>
       <div>{stargazersCount}</div>
     </a>
 
-    <div class="category fork">
+    <div class="category">
       <slot name="fork"/>
       <div>{forksCount}</div>
     </div>
@@ -48,7 +48,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin-left: var(--sl-nav-gap)
+    margin-left: var(--sl-nav-gap);
   }
 
   .category {
@@ -58,4 +58,13 @@
     gap: 0.25rem;
   }
 
+  .star {
+    color: var(--sl-color-text);
+    text-decoration: none;
+  }
+
+  .star:hover {
+    color: var(--sl-color-accent-high);
+  }
+
 </style>

docs/src/components/github/AnswerNumber.svelte

@@ -2,8 +2,8 @@
   import { isLoaded, totalCount } from './github-store';
 </script>
 
-{#if isLoaded}
+{#if $isLoaded}
-  <div class="answer-text">Answered by {$totalCount} people</div>
+  <a href="#answers" class="answer-text">Answered by {$totalCount} people</a>
 {/if}
 
 <style>
@@ -11,5 +11,10 @@
     font-size: var(--sl-text-xs);
     color: var(--sl-color-gray-3);
     width: max-content;
+    text-decoration: none;
+  }
+
+  .answer-text:hover {
+    color: var(--sl-color-accent-high);
   }
 </style>

docs/src/components/github/AnsweredUser.svelte

@@ -37,7 +37,7 @@
 </script>
 
 {#if $isLoaded}
-  <div class="solution-container">
+  <div class="solution-container" id="answers">
     <div>Answered by</div>
     {#each $data as { user }}
       <img

docs/src/styles/custom-css.css

@@ -32,6 +32,10 @@
   --color-chip-border: rgb(33, 38, 45);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 .github-success-btn {
   border: 2px solid rgba(240, 246, 252, 0.1);
   border-radius: 6px;