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 && (
+
+ )}
{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);
}