Skip to content

style(footer): adjust marquee text size for better responsiveness #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MistEO merged 1 commit into from
Jan 29, 2026
Merged

style(footer): adjust marquee text size for better responsiveness #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function Footer() {
{[...Array(8)].map((_, i) => (
<span
key={i}
className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
>
Comment on lines 26 to 29
Copy link

@sourcery-ai sourcery-ai bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: 请重新考虑这里使用的固定 rem 尺寸，以确保跑马灯在非常小的屏幕上仍能保持良好的响应式表现。

使用固定的 text-[4rem] 作为基础，移除了之前 text-[8vw] 的视口缩放效果，这可能会在小屏设备上导致内容溢出/被裁剪，尤其是在水平循环滚动的跑马灯中。可以考虑：减小基础字号、在移动端使用基于 vw 的字号，或者添加额外的断点（例如 sm:text-[...]），以确保在不同屏幕尺寸下文字都保持良好的可读性。

Suggested change
<span
key={i}
className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
>
<span
key={i}
className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30 sm:text-[3rem] md:text-[9rem]"
>
Original comment in English

suggestion: Revisit fixed rem sizes here to ensure marquee stays responsive on very small screens.

Using a fixed text-[4rem] base removes the previous viewport scaling from text-[8vw] and may cause overflow/clipping on small devices, especially in a horizontally repeating marquee. Consider a smaller base size, a vw-based size for mobile, or an extra breakpoint (e.g. sm:text-[...]) to keep the text readable across screen sizes.

Suggested change
<span
key={i}
className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30"
className="font-syne stroke-text cyber-gradient-text text-[4rem] font-bold text-transparent opacity-30 md:text-[9rem]"
>
<span
key={i}
className="font-syne stroke-text cyber-gradient-text text-[8vw] font-bold text-transparent opacity-30 sm:text-[3rem] md:text-[9rem]"
>

{t("footer.marquee")}
</span>
Expand Down
Loading