Add query.gg to footer

Author: tylermcginnis

usehooks.com/src/sections/Footer.astro

@@ -2,57 +2,58 @@
 ---
 
 <footer class="main-footer">
-	<a href="/" class="logo image">
-		<img src="/img/logo-useHooks.svg" width="546" height="80" alt="useHooks" />
-	</a>
-	<a href="https://ui.dev" class="byline">by ui.dev</a>
-	<nav>
-		<a href="https://github.com/uidotdev/usehooks">Fork on GitHub</a>
-		<a href="https://bytes.dev">JavaScript Newsletter</a>
-		<a href="https://react.gg">Learn React</a>
-	</nav>
+  <a href="/" class="logo image">
+    <img src="/img/logo-useHooks.svg" width="546" height="80" alt="useHooks" />
+  </a>
+  <a href="https://ui.dev" class="byline">by ui.dev</a>
+  <nav>
+    <a href="https://github.com/uidotdev/usehooks">View the Repo</a>
+    <a href="https://bytes.dev">JavaScript Newsletter</a>
+    <a href="https://react.gg">Learn React</a>
+    <a href="https://query.gg">Learn React Query</a>
+  </nav>
 </footer>
 
 <style>
-	.main-footer {
-		width: 100%;
-		margin-top: 4rem;
-		padding: var(--body-padding);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 2rem;
-		border-radius: .5rem;
-		border: var(--border-dark);
-		font-size: var(--font-sm);
-	}
+  .main-footer {
+    width: 100%;
+    margin-top: 4rem;
+    padding: var(--body-padding);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    border-radius: 0.5rem;
+    border: var(--border-dark);
+    font-size: var(--font-sm);
+  }
 
-	nav {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		gap: 1rem 2rem;
-		text-align: center;
-	}
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem 2rem;
+    text-align: center;
+  }
 
-	.logo {
-		width: 180px;
-	}
+  .logo {
+    width: 180px;
+  }
 
-	.byline {
-		margin-top: -.5rem;
-		padding: .3em .5em;
-		display: inline-block;
-		border-radius: .3em;
-		background-color: var(--charcoal);
-	}
+  .byline {
+    margin-top: -0.5rem;
+    padding: 0.3em 0.5em;
+    display: inline-block;
+    border-radius: 0.3em;
+    background-color: var(--charcoal);
+  }
 
-	.byline:hover {
-		background-color: var(--yellow);
-		color: var(--charcoal);
-	}
+  .byline:hover {
+    background-color: var(--yellow);
+    color: var(--charcoal);
+  }
 
-	nav a:hover {
-		text-decoration: underline;
-	}
+  nav a:hover {
+    text-decoration: underline;
+  }
 </style>