diff --git a/src/components/ModCard.tsx b/src/components/ModCard.tsx index c14372f..6abd397 100644 --- a/src/components/ModCard.tsx +++ b/src/components/ModCard.tsx @@ -50,7 +50,13 @@ export const ModCard = React.memo((props: ModDetails) => { src={props.featuredImageUrl} onError={handleModImageError} className='cMMPicture' + alt={`featured image for mod ${props.title}`} /> + {props.nsfw && ( +
+

NSFW

+
+ )}

{props.title}

diff --git a/src/styles/cardMod.css b/src/styles/cardMod.css index 7dae7cc..3a50b5c 100644 --- a/src/styles/cardMod.css +++ b/src/styles/cardMod.css @@ -96,6 +96,7 @@ -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; + line-clamp: 2; font-size: 20px; line-height: 1.25; color: rgba(255, 255, 255, 0.75); @@ -107,6 +108,7 @@ -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; + line-clamp: 2; color: rgba(255, 255, 255, 0.5); font-size: 15px; line-height: 1.5; @@ -119,11 +121,12 @@ justify-content: start; align-items: center; font-size: 14px; - background: rgba(255,255,255,0.05); + background: rgba(255, 255, 255, 0.05); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; + line-clamp: 1; } .cMMFootReactions { @@ -145,8 +148,9 @@ } .IBMSMSMBSSTagsTag.IBMSMSMBSSTagsTagNSFW.IBMSMSMBSSTagsTagNSFWCard { - position: absolute; - bottom: 10px; - right: 10px; - backdrop-filter: blur(10px); + position: absolute; + bottom: 10px; + right: 10px; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); }