revert #4

src/components/core/About.astro

@@ -5,7 +5,7 @@ const { title, text } = Astro.props;
 
 <div class="flex flex-col items-center text-white my-[10%]">
   <div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
-    <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
     <p
       class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black"
     >
@@ -17,18 +17,3 @@ const { title, text } = Astro.props;
     {text}
   </p>
 </div>
-
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>

src/components/core/Subtitle.astro

@@ -4,23 +4,8 @@ import { LiaDotCircle } from "react-icons/lia";
 ---
 
 <div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
-  <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
+  <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
   <p>
     {title}
   </p>
 </div>
-
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>

src/components/join/Involvement.astro

@@ -23,15 +23,15 @@ const { image, text, link, delay } = Astro.props;
   >
     <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
       <div
-        class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw] flex items-center justify-center"
+        class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]"
       >
         {
           text === "PROJECTS" ? (
-            <RiRobot2Fill className="icon-fix" />
+            <RiRobot2Fill />
           ) : text === "EVENTS" ? (
-            <IoMdCalendar className="icon-fix" />
+            <IoMdCalendar />
           ) : (
-            <FaGear className="icon-fix" />
+            <FaGear />
           )
         }
       </div>
@@ -49,14 +49,14 @@ const { image, text, link, delay } = Astro.props;
           {text}
         </p>
         <GoArrowDownRight
-          className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow icon-fix"
+          className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"
         />
       </div>
 
       {
         text === "H.A.R.D. HACK" && (
           <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
-            UC San Diego's largest hardware focused hackathon hold by IEEE UCSD,
+            UC San Diego’s largest hardware focused hackathon hold by IEEE UCSD,
             HKN, and TNT
           </p>
         )
@@ -64,18 +64,3 @@ const { image, text, link, delay } = Astro.props;
     </div>
   </Link>
 </div>
-
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>

src/components/main_page/Activity.astro

@@ -27,7 +27,7 @@ const { title, text, link, number, delay } = Astro.props;
   >
     more details
     <IoIosArrowDroprightCircle
-      className="ml-[0.5vw] text-[2vw] md:text-[1.4vw] icon-fix"
+      className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"
     />
   </Link>
   <p
@@ -36,18 +36,3 @@ const { title, text, link, number, delay } = Astro.props;
     {number}
   </p>
 </div>
-
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>

src/components/projects/AP.astro

@@ -5,7 +5,7 @@ import ProjectSection from "./ProjectSection.astro";
 
 <div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
   <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
-    <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
     <p>Annual Projects</p>
   </div>
 
@@ -21,10 +21,10 @@ import ProjectSection from "./ProjectSection.astro";
   <div
     class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]"
   >
-    <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%] icon-fix" />
+    <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" />
     <p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p>
     <p class="w-3/5">
-      IEEE @ UCSD's annual projects are intended for students with intermediate
+      IEEE @ UCSD’s annual projects are intended for students with intermediate
       experience with hardware or software. Participation on teams assemble an
       array of skills and talents of soft and hard skills.
     </p>
@@ -32,18 +32,3 @@ import ProjectSection from "./ProjectSection.astro";
 
   <ProjectSection />
 </div>
-
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>

src/components/projects/ProjectSection.astro

@@ -36,17 +36,17 @@ import { Image } from "astro:assets";
             <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
               <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
                 more details
-                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw] icon-fix" />
+                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
               </div>
             </div>
           </div>
-          <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%] icon-fix" />
+          <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
         </div>
 
-        <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%] flex items-center justify-center">
+        <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
           <FaGear
             data-inview
-            className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg] icon-fix"
+            className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
           />
         </div>
       </a>
@@ -77,36 +77,6 @@ import { Image } from "astro:assets";
       opacity: 1;
     }
   }
-
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-
-    /* Specific fixes for project card icons */
-    .project-card .bg-white {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Fix for the arrow icon at the bottom */
-    .project-card .GoArrowDownRight {
-      margin-bottom: 0.1vw;
-    }
-
-    /* Fix for the more details icon */
-    .project-card .IoIosArrowDroprightCircle {
-      vertical-align: middle;
-    }
-  }
 </style>
 
 <script>
@@ -159,20 +129,20 @@ import { Image } from "astro:assets";
   function handleImageLoading() {
     const projectImages = document.querySelectorAll(".project-card img");
 
-    projectImages.forEach((image) => {
+    projectImages.forEach((image, index) => {
       // Ensure the image is fully loaded, even if it's already in cache
-      if ((image as HTMLImageElement).complete) {
+      if (image.complete) {
-        (image as HTMLElement).style.opacity = "1";
+        image.style.opacity = "1";
         const skeleton = image.previousElementSibling;
         if (skeleton && skeleton.classList.contains("skeleton")) {
-          (skeleton as HTMLElement).style.display = "none";
+          skeleton.style.display = "none";
         }
       } else {
         image.addEventListener("load", () => {
-          (image as HTMLElement).style.opacity = "1";
+          image.style.opacity = "1";
           const skeleton = image.previousElementSibling;
           if (skeleton && skeleton.classList.contains("skeleton")) {
-            (skeleton as HTMLElement).style.display = "none";
+            skeleton.style.display = "none";
           }
         });
       }
@@ -183,27 +153,4 @@ import { Image } from "astro:assets";
   setTimeout(handleImageLoading, 100);
   handleImageLoading();
   document.addEventListener("astro:page-load", handleImageLoading);
-
-  // iOS detection and class addition
-  document.addEventListener("DOMContentLoaded", () => {
-    // Check if the device is iOS
-    const isIOS =
-      /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-
-    if (isIOS) {
-      // Add iOS-specific class to the body for additional styling if needed
-      document.body.classList.add("ios-device");
-
-      // Apply additional fixes for specific iOS versions if needed
-      const iOSVersion = parseInt(
-        (navigator.userAgent.match(/OS (\d+)_/) || [])[1],
-        10,
-      );
-
-      if (iOSVersion && iOSVersion < 15) {
-        // Additional fixes for older iOS versions
-        document.body.classList.add("ios-legacy");
-      }
-    }
-  });
 </script>

src/components/projects/QP.astro

@@ -8,7 +8,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
 
 <div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
   <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
-    <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
     <p>Quarterly Project</p>
   </div>
   <div class="w-[70vw] aspect-[2.5/1] relative">
@@ -27,7 +27,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
     className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
   >
     more details
-    <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] icon-fix" />
+    <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]" />
   </Link>
   <div
     data-inview
@@ -43,21 +43,6 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
   </div>
 </div>
 
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>
-
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     const image = document.getElementById("qp-image");
@@ -65,9 +50,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
 
     if (image) {
       image.onload = () => {
-        if (skeleton) {
+        skeleton.style.display = "none";
-          (skeleton as HTMLElement).style.display = "none";
-        }
       };
     }
   });

src/components/qp/PastProject.astro

@@ -27,23 +27,8 @@ import Link from "next/link";
         {title}
       </p>
       <GoArrowDownRight
-        className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 icon-fix"
+        className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "
       />
     </div>
   </div>
 </Link>
-
-<style>
-  /* iOS-specific fixes for icon alignment */
-  @supports (-webkit-touch-callout: none) {
-    .icon-fix {
-      /* Fix vertical alignment on iOS */
-      position: relative;
-      top: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      transform: translateY(0);
-    }
-  }
-</style>

src/layouts/Layout.astro

@@ -26,25 +26,6 @@ import InView from "../components/core/InView.astro";
         document.documentElement.setAttribute("data-theme", savedTheme);
       }
     </script>
-    <style is:global>
-      /* Global iOS-specific fixes for icon alignment */
-      @supports (-webkit-touch-callout: none) {
-        /* Apply to all icons in iOS */
-        svg {
-          position: relative;
-          top: 0;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          transform: translateY(0);
-        }
-
-        /* Add iOS-specific class for additional styling */
-        .ios-device svg {
-          vertical-align: middle;
-        }
-      }
-    </style>
   </head>
   <InView />
   <body class="w-full h-full m-0 bg-ieee-black">
@@ -57,29 +38,5 @@ import InView from "../components/core/InView.astro";
       </main>
       <Footer />
     </div>
-    <script is:inline>
-      // iOS detection
-      document.addEventListener("DOMContentLoaded", () => {
-        // Check if the device is iOS
-        const isIOS =
-          /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-
-        if (isIOS) {
-          // Add iOS-specific class to the body for additional styling
-          document.body.classList.add("ios-device");
-
-          // Apply additional fixes for specific iOS versions if needed
-          const iOSVersion = parseInt(
-            (navigator.userAgent.match(/OS (\d+)_/) || [])[1],
-            10,
-          );
-
-          if (iOSVersion && iOSVersion < 15) {
-            // Additional fixes for older iOS versions
-            document.body.classList.add("ios-legacy");
-          }
-        }
-      });
-    </script>
   </body>
 </html>