Make links red

src/components/CustomStyles.astro

@@ -60,4 +60,9 @@ import '@fontsource-variable/inter';
       color: snow;
     }
   }
+
+  .link {
+    text-decoration: underline;
+    color: var(--aw-color-primary);
+  }
 </style>

src/components/widgets/Socials.astro

@@ -1,19 +1,19 @@
 ---
 import { Icon } from "astro-icon/components";
+import { twMerge } from "tailwind-merge";
 
 const {
   linkedins = [],
   emails = [],
   facebooks = [],
   youtubes = [],
   instagrams = [],
-  classes = [],
+  classes,
 } = Astro.props;
 ---
 
 <div
-  class="font-normal flex flex-row flex-wrap gap-x-3 my-2 text-muted"
-  class:list={classes}
+  class={twMerge("font-normal flex flex-row flex-wrap gap-x-3 my-2 text-muted", classes)}
 >
   {
     instagrams.map((instagram) => (

src/pages/contact.astro

@@ -19,25 +19,32 @@ const title = "Contact us";
       <div class="flex flex-col gap-8 text-center">
         <div>
           <h2 class="font-bold">Join our Slack</h2>
-          <u><a href="https://linktr.ee/buckeye_sli">https://linktr.ee/buckeye_sli</a></u>
+          <u
+            ><a href="https://linktr.ee/buckeye_sli" class="link"
+              >https://linktr.ee/buckeye_sli</a
+            ></u
+          >
         </div>
 
         <div>
           <h2 class="font-bold">General Inquiries</h2>
           <p>
             Email us at:
             <div class="flex justify-center">
-              <Socials emails={["[email protected]"]} />
+              <Socials classes="text-primary" emails={["[email protected]"]} />
             </div>
           </p>
         </div>
 
         <div>
           <h2 class="font-bold">Leadership/Project Inquiries</h2>
           <p>
-            Find the right person on our <u
-              ><a href={getPermalink("/leadership")}>Leadership</a></u
-            > page.
+            Find the right person on our
+            <u
+              ><a href={getPermalink("/leadership")} class="link">Leadership</a
+              ></u
+            >
+            page.
           </p>
         </div>
 
@@ -52,6 +59,7 @@ const title = "Contact us";
               facebooks={["https://www.facebook.com/spacelaunchinitiative/"]}
               youtubes={["https://www.youtube.com/@buckeyesli1865/videos"]}
               instagrams={["https://www.instagram.com/buckeye_sli/"]}
+              classes="text-primary"
             />
           </div>
         </div>

src/pages/index.astro

@@ -149,15 +149,15 @@ const metadata = {
     items={[
       {
         title:
-          'Step 1: <u><a href="#our-projects"><span class="font-medium">Find your Project Subteam.</span></a></u>',
+          'Step 1: <span class="font-medium"><a href="#our-projects" class="link">Find your Project Subteam.</a></span>',
         description:
           "Research our teams! Across NASA, Spaceport, and Liquids, there is a place for you in BSLI.",
         icon: "tabler:search",
       },
       {
         title:
           'Step 2: <span class="font-medium">Check if the team meets when you\'re available.</span>',
-        description: `Meeting times can be found in the <u><a href="#our-projects">"Our Projects"</a></u> section above.`,
+        description: `Meeting times can be found in the <a href="#our-projects" class="link">"Our Projects"</a> section above.`,
         icon: "tabler:clock",
       },
       {
@@ -174,7 +174,7 @@ const metadata = {
       {
         title:
           'Step 5: <span class="font-medium">Consider joining a leadership position!</span>',
-        description: `If you enjoy being part of BSLI, check out the variety of leadership positions available on the <u><a href="${getPermalink("leadership")}"><span class="font-medium">Leadership</a></u> page.`,
+        description: `If you enjoy being part of BSLI, check out the variety of leadership positions available on the <a class="link" href="${getPermalink("leadership")}">Leadership</a> page.`,
         icon: "tabler:bulb",
       },
     ]}