Remove duplicate media query for timeline lines

[prashantkumarniraj]

This PR removes a redundant media query for the .line-left and .line-right
classes. The styles were already covered by the existing max-width: 768px
rule, so the additional 480px breakpoint was unnecessary.

No visual changes were introduced.

Fixes #460

Summary by CodeRabbit

• Updates
  • Updated social media icons, including refreshing the Twitter icon to reflect current platform branding.
  • Improved footer contact and social media link implementations for better consistency.
  • Adjusted responsive text sizing for page headings to optimize visual layout across mobile, tablet, and desktop viewports.

[vercel]

@prashantkumarniraj is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated social media icons across components from faTwitter to faXTwitter, restructured contact and social links between Link and anchor elements in Footer and home pages, and removed responsive breakpoint classes from About page headings.

Changes

Cohort / File(s)	Summary
Social Media Icon and Link Updates src/components/Footer.jsx, src/pages/index.jsx	Replaced FontAwesome Twitter icon import (faTwitter → faXTwitter), updated social link structures from mixed Link/anchor elements to consistent pattern, and aligned icon sets (GitLab, GitHub, Discord, Twitter) with ARIA labels. Shifted some mailto links from Link to standard anchor tags.
Responsive Design Adjustments src/pages/about.jsx	Removed responsive breakpoint classes (sm:text-6xl from first heading, md:text-6xl and md:text-5xl from GSOC heading) to alter viewport-specific scaling behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 The Twitter bird has changed its name,
Icons swapped, but links stay the same,
Anchors and Links dance side by side,
Breakpoints removed—let content decide! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 4

❌ Failed checks (4 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title references 'timeline lines' and duplicate media queries, but the actual changes affect Footer, About, and Index components with icon updates and responsive text changes.	Update the title to accurately reflect the actual changes: e.g., 'Update social media icons and adjust responsive typography' or 'Replace Twitter icon with X icon and remove responsive breakpoints'.
Linked Issues check	⚠️ Warning	The PR objectives describe removing duplicate media queries for timeline lines (issue #460), but the actual code changes only modify Footer, About, and Index components with icon and typography updates.	Ensure the PR implementation matches the linked issue requirements. Either add the missing media query changes or update the linked issue to reflect the actual scope of changes.
Out of Scope Changes check	⚠️ Warning	The PR contains changes unrelated to removing duplicate media queries: FontAwesome icon updates (faTwitter to faXTwitter), responsive text breakpoint removals, and HTML element type changes (Link to anchor).	Remove out-of-scope changes or create separate PRs for icon updates and typography adjustments. Keep this PR focused solely on removing the redundant media queries.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/pages/about.jsx`:
- Around line 146-148: The h1 currently uses non-monotonic Tailwind sizes
("text-6xl md:text-5xl lg:text-6xl") causing the heading to be largest on
mobile; update the className on the H1 element (the ABOUT heading) to use a
monotonic scale such as "text-4xl md:text-5xl lg:text-6xl" or add an sm
breakpoint (e.g., "text-5xl sm:text-6xl md:text-5xl lg:text-6xl") depending on
the intended design so mobile is not the largest—locate the H1 with className
containing text-6xl and adjust the size tokens accordingly.

🧹 Nitpick comments (3)

src/pages/about.jsx (1)

182-184: GSOC heading responsive classes look reasonable, but lg:text-6xl is redundant.

The progression text-2xl sm:text-6xl lg:text-6xl is sensible, but since sm:text-6xl already sets 6xl from the sm breakpoint onward, the lg:text-6xl class is a no-op. You can safely remove it unless you anticipate inserting an intermediate md: size later.

src/pages/index.jsx (1)

90-96: Update aria-label and href to reflect the X rebrand.

The icon was updated to faXTwitter, but the aria-label still reads "Follow on Twitter" (line 91) and the href still points to twitter.com (line 93). Consider updating to "Follow on X" (or "Follow on X (Twitter)") and https://x.com/aossie_org for consistency with the icon change.

Suggested diff

                  <Link
-                    aria-label="Follow on Twitter"
+                    aria-label="Follow on X"
                     className="text-zinc-500 transition hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400"
-                    href="https://twitter.com/aossie_org"
+                    href="https://x.com/aossie_org"
                  >
                     <FontAwesomeIcon icon={faXTwitter} size="2xl" />
                  </Link>

src/components/Footer.jsx (1)

64-70: Same as index.jsx: update aria-label and href for the X rebrand.

The icon is faXTwitter but the aria-label says "Follow on Twitter" and the href points to twitter.com. For consistency with the icon change, consider updating both.

Suggested diff

                 <Link
-                  aria-label="Follow on Twitter"
+                  aria-label="Follow on X"
                   className="text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
-                  href="https://twitter.com/aossie_org"
+                  href="https://x.com/aossie_org"
                 >
                   <FontAwesomeIcon icon={faXTwitter} size="xl" />
                 </Link>

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Non-monotonic responsive font sizing — heading is largest on mobile.

With text-6xl md:text-5xl lg:text-6xl, the base (mobile) size is 6xl, which then shrinks to 5xl at the md breakpoint before returning to 6xl at lg. This is an unusual pattern where the heading is paradoxically largest on the smallest screens. Was the removal of sm:text-6xl intentional here, or should the base size be reduced (e.g., text-4xl or text-5xl) so that mobile renders a smaller heading?

🤖 Prompt for AI Agents

In `@src/pages/about.jsx` around lines 146 - 148, The h1 currently uses
non-monotonic Tailwind sizes ("text-6xl md:text-5xl lg:text-6xl") causing the
heading to be largest on mobile; update the className on the H1 element (the
ABOUT heading) to use a monotonic scale such as "text-4xl md:text-5xl
lg:text-6xl" or add an sm breakpoint (e.g., "text-5xl sm:text-6xl md:text-5xl
lg:text-6xl") depending on the intended design so mobile is not the
largest—locate the H1 with className containing text-6xl and adjust the size
tokens accordingly.