Switch hover back to default; minor styles adjustment (#2431)

Author: josh-collinsworth

_components/LandingPage.tsx

@@ -111,15 +111,15 @@ export default function LandingPage() {
           own? Check out our{" "}
           <a
             href="https://github.com/denoland/deno-docs?tab=readme-ov-file#examples"
-            class="text-primary hover:underline focus:underline"
+            class="text-primary underline"
           >
             GitHub repository
           </a>.
         </p>
         <p>
           <a
             href="/runtime/contributing/examples/"
-            class="text-primary hover:underline focus:underline text-center mt-4 font-bold"
+            class="text-primary underline mt-4 font-bold"
           >
             Commit an example and we'll send you stickers!
           </a>

_components/SidebarNav.tsx

@@ -133,7 +133,7 @@ function SidebarCategoryHeading(props: {
   isActive?: boolean;
 }) {
   return (
-    <h2 class="block uppercase py-2 pr-4 mt-4 text-foreground-secondary font-bold leading-none tracking-wide !border-0">
+    <h2 class="block uppercase py-2 pr-4 mt-4 text-foreground-secondary font-bold leading-[1.2] text-balance tracking-wide !border-0">
       {props.title}
     </h2>
   );

_components/ThemeToggle.tsx

@@ -9,10 +9,12 @@ export default function () {
       <img
         src="/img/light.svg"
         class="w-full block -translate-y-full dark:translate-y-0 transition-transform duration-200 easing-[0.86,0,0.07,1]"
+        alt=""
       />
       <img
         src="/img/dark.svg"
         class="w-full block -translate-y-full dark:translate-y-0 transition-transform duration-200 easing-[0.86,0,0.07,1]"
+        alt=""
       />
       <span class="sr-only">Toggle Theme</span>
     </button>

_includes/layout.tsx

@@ -19,6 +19,8 @@ export default function Layout(data: Lume.Data) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{deleteBackticks(data.title)}</title>
+        {data?.description &&
+          <meta name="description" content={data.description} />}
         <link rel="icon" href="/favicon.ico" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
         <script>

styles.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@theme {
+@theme static {
   --color-gray-50: #f5f5f5;
   --color-gray-100: #e5eaea;
   --color-gray-200: #d4d6d8;
@@ -40,7 +40,9 @@
   --color-deploy-800: #002633;
   --color-deploy-900: #001319;
   --color-deploy-950: #000a0d;
+}
 
+@theme {
   --color-code-1: #01c2ff;
   --color-code-2: #00a341;
   --color-code-3: #ae01ff;
@@ -82,6 +84,7 @@
 }
 
 @variant dark (&:where(.dark, .dark *));
+@custom-variant hover (&:hover);
 @custom-variant current (&:where([aria-current]));
 @custom-variant sidebar-open (&:where([data-open=true]));
 
@@ -922,7 +925,7 @@
   }
 
   [data-services-page="true"] {
-    --color-primary: var(--color-deploy-300);
+    --color-primary: var(--color-deploy-500);
     --color-header-highlight: var(--color-deploy-200);
   }
 
@@ -1019,11 +1022,6 @@
     @apply text-deploy-500 decoration-deploy-500/20 hover:decoration-deploy-500;
   }
 
-  .learn-link {
-    @apply flex dark:text-foreground-primary gap-3 items-center font-normal
-      underline underline-offset-4;
-  }
-
   .help-link {
     @apply text-purple-600 dark:text-purple-300 decoration-purple-600/20
       dark:decoration-purple-300/20 dark:hover:decoration-purple-300
@@ -1652,12 +1650,12 @@
   }
 
   .runtime-cta {
-    @apply no-underline text-gray-900! bg-runtime-300 border-0
+    @apply no-underline! text-gray-900! bg-runtime-300 border-0
       hover:bg-runtime-200;
   }
 
   .deploy-cta {
-    @apply no-underline text-gray-900!;
+    @apply no-underline! text-gray-900!;
     @apply bg-deploy-300 rounded-full border-0 hover:bg-deploy-200;
   }