WIP: Refactor relate page

[wu0407]

1. Fixed at 4 recommended numbers
2. Fix image alt not correct

before style

current style

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
do-it	✅ Ready (Inspect)	Visit Preview	Nov 4, 2024 11:45am

[HEIGE-PCloud]

I am not sure about this change. Why do you think it's a better idea to fix recommendation count to 4?

[wu0407]

1. It defaults to displaying 5, but only displays 3 at the maximum page width
2. Almost no one pulls the scrollbar to browse more, the scrollbar is meaningless
3. 4 relate items in 800px, it will look more beautiful.
4. This recommendation algorithm is very rough, making it meaningless for users to choose to configure the number of recommendations

[HEIGE-PCloud]

I imagine configuring the count to 2 or 3 makes sense equally. The 800px argument does not hold on mobile, where maybe only one recommendation can fit on screen and you will need to handle the overflow with a scrollbar anyway.

[wu0407]

Dynamically adapt to screen width，maybe change from 4 to 3 would be more appropriate for 800px.

DoIt/assets/css/_partial/_single/_related.scss

Lines 81 to 100 in ba650e8

	@media (max-width: 768px) {
	.related-container {
	grid-template-columns: repeat(2, 1fr);
	padding: 0.5rem;
	}
	.related-title {
	font-size: 1rem;
	}
	}
	@media (max-width: 480px) {
	.related-container {
	grid-template-columns: 1fr;
	gap: 0.5rem;
	}
	.related-title {
	font-size: 0.9rem;
	}