style: fix unreadable text for dark mode

Author: stasadev

src/components/Benefits.astro

@@ -42,7 +42,7 @@ const features = [
 <div class="bg-white dark:bg-transparent">
   <div class="max-w-6xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
     <div class="max-w-3xl mx-auto text-center">
-      <h2 class="text-base font-mono text-navy-300 mb-3 dark:text-white">Benefits</h2>
+      <h2 class="text-base font-mono text-navy-300 mb-3 dark:text-cyan-300">Benefits</h2>
       <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white">
         Made for people that make websites.
       </h3>

src/components/Contributors.astro

@@ -16,7 +16,7 @@ const contributors = await getContributors()
       </h2>
     </div>
 
-    <h3 class="text-base font-mono text-navy-300 text-center mb-8">
+    <h3 class="text-base font-mono text-navy-300 text-center mb-8 dark:text-cyan-300">
       GitHub Contributors
     </h3>
     <div class="max-w-5xl mx-auto flex flex-wrap justify-center">
@@ -40,14 +40,14 @@ const contributors = await getContributors()
       }
     </div>
 
-    <h3 class="mt-24 mb-8 text-base font-mono text-navy-300 text-center">
+    <h3 class="mt-24 mb-8 text-base font-mono text-navy-300 text-center dark:text-cyan-300">
       Featured Sponsors
     </h3>
     <div class="max-w-4xl mx-auto flex flex-wrap justify-center">
       <FeaturedSponsors />
     </div>
 
-    <h3 class="mt-24 mb-8 text-base font-mono text-navy-300 text-center">
+    <h3 class="mt-24 mb-8 text-base font-mono text-navy-300 text-center dark:text-cyan-300">
       GitHub Sponsors
     </h3>
     <div class="max-w-4xl mx-auto flex flex-wrap justify-center">

src/components/Features.astro

@@ -76,7 +76,7 @@ const features = [
   <div
     class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8"
   >
-    <h2 class="text-base font-mono text-navy-300">Features</h2>
+    <h2 class="text-base font-mono text-navy-300 dark:text-cyan-300">Features</h2>
     <p class="mt-2 text-3xl font-bold text-gray-900 sm:text-4xl dark:text-white">
       Running in minutes, ready for the long haul.
     </p>

src/components/Footer.astro

@@ -76,7 +76,7 @@ const navigation = {
       <div class="grid grid-cols-auto gap-8 xl:col-span-4">
         <div class="md:grid md:grid-cols-4 md:gap-8">
           <div class="mt-12 md:mt-0">
-            <h2 class="text-sm font-mono text-navy-300 tracking-wider">
+            <h2 class="text-sm font-mono text-navy-300 tracking-wider dark:text-cyan-300">
               Support
             </h2>
             <ul class="mt-4 space-y-4 dark:text-white">
@@ -97,7 +97,7 @@ const navigation = {
             </ul>
           </div>
           <div class="mt-12 md:mt-0">
-            <h2 class="text-sm font-mono text-navy-300 tracking-wider">
+            <h2 class="text-sm font-mono text-navy-300 tracking-wider dark:text-cyan-300">
               Product
             </h2>
             <ul class="mt-4 space-y-4 dark:text-white">
@@ -118,7 +118,7 @@ const navigation = {
             </ul>
           </div>
           <div class="mt-12 md:mt-0">
-            <h2 class="text-sm font-mono text-navy-300 tracking-wider">
+            <h2 class="text-sm font-mono text-navy-300 tracking-wider dark:text-cyan-300">
               Social
             </h2>
             <ul class="mt-4 space-y-4 dark:text-white">

src/pages/blog/author/[id].astro

@@ -46,7 +46,7 @@ const { Content } = await render(author)
       </div>
     </div>
 
-    <h2 class="text-base font-mono text-navy-300 px-6 lg:px-0">
+    <h2 class="text-base font-mono text-navy-300 px-6 lg:px-0 dark:text-cyan-300">
       {author.data.firstName || author.data.name}’s {
         posts.length == 1 ? `Post` : `Posts`
       }